/* ==========================================================
   LEONNAS — tema visual sobre Bootstrap 5.3
   Paleta tomada del logo: violeta profundo + magenta + lavanda
   ========================================================== */

:root {
    --lx-deep: #0a0a0a;
    --lx-deep-2: #1f1f1f;
    --lx-violet: #1f1f1f;
    --lx-magenta: #1f1f1f;
    --lx-magenta-dark: #000000;
    --lx-lavender: #f4f4f4;
    --lx-lavender-2: #fafafa;
    --lx-bg: #ffffff;
    --lx-ink: #141414;
    --lx-muted: #737373;
    --lx-border: #e5e5e5;
    /* Verde del precio rebajado (Reglas de precios). El único acento de color
       sobre la paleta monocroma: señala la oferta sin romper lo editorial. */
    --lx-off: #1a8a52;

    /* La estetica editorial no tiene esquinas redondeadas ni sombras: la foto
       va contra el borde y lo que separa es el aire, no una caja.
       Siguen siendo variables a proposito: volver a las esquinas redondeadas
       es cambiar estas dos lineas, no buscar por todo el archivo. */
    --lx-radius: 0;
    --lx-radius-sm: 0;
    --lx-shadow: none;
    --lx-shadow-hover: none;

    /* Variables de Bootstrap */
    --bs-primary: var(--lx-magenta);
    --bs-primary-rgb: 31, 31, 31;
    --bs-danger: #d6336c;
    --bs-danger-rgb: 214, 51, 108;
    --bs-dark: var(--lx-deep);
    --bs-dark-rgb: 10, 10, 10;
    --bs-light: var(--lx-lavender-2);
    --bs-light-rgb: 250, 250, 250;
    --bs-body-bg: var(--lx-bg);
    --bs-body-color: var(--lx-ink);
    --bs-secondary-color: var(--lx-muted);
    --bs-border-color: var(--lx-border);
    --bs-link-color: var(--lx-ink);
    --bs-link-color-rgb: 20, 20, 20;
    --bs-link-hover-color: var(--lx-muted);
    --bs-link-hover-color-rgb: 115, 115, 115;
    --bs-body-font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-border-radius: var(--lx-radius-sm);
    --bs-border-radius-lg: var(--lx-radius);
    --bs-border-radius-sm: var(--lx-radius-sm);
}

body {
    background: var(--lx-bg);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .display-5, .navbar-brand {
    font-family: 'Jost', 'Lato', sans-serif;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--lx-ink);
}
h1 { font-weight: 400; letter-spacing: .01em; }

.text-muted { color: var(--lx-muted) !important; }
.text-primary { color: var(--lx-magenta) !important; }
.text-success { color: #1f9d6b !important; }
.text-warning { color: #f0a202 !important; }
.bg-dark { background-color: var(--lx-deep) !important; }
.bg-light { background-color: var(--lx-lavender-2) !important; }
.bg-primary { background-color: var(--lx-magenta) !important; }
.bg-danger { background-color: var(--lx-magenta) !important; }
.border { border-color: var(--lx-border) !important; }

::selection { background: var(--lx-magenta); color: #fff; }

/* ---------- Layout ---------- */
.main-content {
    flex: 1 0 auto;
    padding-top: 1rem;
    padding-bottom: 3rem;
}

.page-title {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.page-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    border-radius: var(--lx-radius-sm);
    background: var(--lx-magenta);
    margin: .6rem auto 0;
}

/* ---------- Navbar ---------- */
.lx-navbar {
    background: #ffffff;
    padding-top: .9rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--lx-border);
    box-shadow: none;
}
.lx-navbar .navbar-brand img { height: 34px; width: auto; display: block; }
.lx-navbar .nav-link {
    color: var(--lx-ink);
    font-size: .95rem;
    padding: .45rem .85rem !important;
    border-radius: var(--lx-radius-sm);
    transition: color .2s, background-color .2s;
}
.lx-navbar .nav-link:hover,
.lx-navbar .nav-link:focus,
.lx-navbar .nav-link.active {
    color: var(--lx-muted);
    background: transparent;
}
.lx-navbar .navbar-toggler { border: 0; box-shadow: none; }

.lx-search {
    position: relative;
    min-width: 240px;
}
.lx-search .form-control {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    border-radius: var(--lx-radius-sm);
    padding: .5rem 2.75rem .5rem 1.1rem;
}
.lx-search .form-control::placeholder { color: rgba(255, 255, 255, .6); }
.lx-search .form-control:focus {
    background: rgba(255, 255, 255, .16);
    border-color: var(--lx-magenta);
    box-shadow: 0 0 0 .2rem rgba(31, 31, 31, .25);
}
.lx-search button {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: var(--lx-magenta);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.lx-cart-badge {
    background: var(--lx-magenta);
    font-size: .65rem;
    min-width: 1.25rem;
}

.dropdown-menu {
    border: 1px solid var(--lx-border);
    border-radius: var(--lx-radius);
    box-shadow: var(--lx-shadow-hover);
    padding: .5rem;
    --bs-dropdown-link-active-bg: var(--lx-magenta);
}
.dropdown-item {
    border-radius: var(--lx-radius-sm);
    padding: .45rem .75rem;
    font-size: .93rem;
}
.dropdown-item:hover { background: var(--lx-lavender-2); }
.dropdown-header { font-family: 'Jost', sans-serif; color: var(--lx-deep); font-size: .9rem; }

/* ---------- Botones ---------- */
.btn {
    border-radius: var(--lx-radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
    padding: .55rem 1.25rem;
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s, color .2s;
}
.btn-sm { padding: .35rem .9rem; }
.btn-lg { padding: .8rem 1.8rem; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    --bs-btn-bg: var(--lx-magenta);
    --bs-btn-border-color: var(--lx-magenta);
    --bs-btn-hover-bg: var(--lx-magenta-dark);
    --bs-btn-hover-border-color: var(--lx-magenta-dark);
    --bs-btn-active-bg: var(--lx-magenta-dark);
    --bs-btn-active-border-color: var(--lx-magenta-dark);
    --bs-btn-disabled-bg: var(--lx-magenta);
    --bs-btn-disabled-border-color: var(--lx-magenta);
    box-shadow: 0 6px 16px rgba(31, 31, 31, .25);
}
.btn-dark, .btn-success {
    --bs-btn-bg: var(--lx-deep);
    --bs-btn-border-color: var(--lx-deep);
    --bs-btn-hover-bg: var(--lx-deep-2);
    --bs-btn-hover-border-color: var(--lx-deep-2);
    --bs-btn-active-bg: var(--lx-deep-2);
    --bs-btn-active-border-color: var(--lx-deep-2);
}
.btn-outline-primary, .btn-outline-dark, .btn-outline-secondary {
    --bs-btn-color: var(--lx-deep);
    --bs-btn-border-color: var(--lx-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--lx-deep);
    --bs-btn-hover-border-color: var(--lx-deep);
    --bs-btn-active-bg: var(--lx-deep);
    --bs-btn-active-border-color: var(--lx-deep);
    background: #fff;
}
.btn-outline-danger {
    --bs-btn-color: var(--lx-magenta);
    --bs-btn-border-color: rgba(31, 31, 31, .3);
    --bs-btn-hover-bg: var(--lx-magenta);
    --bs-btn-hover-border-color: var(--lx-magenta);
    --bs-btn-active-bg: var(--lx-magenta-dark);
    --bs-btn-active-border-color: var(--lx-magenta-dark);
}
.btn-danger {
    --bs-btn-bg: #d6336c;
    --bs-btn-border-color: #d6336c;
    --bs-btn-hover-bg: #000000;
    --bs-btn-hover-border-color: #000000;
    --bs-btn-disabled-bg: #e5e5e5;
    --bs-btn-disabled-border-color: #e5e5e5;
    --bs-btn-disabled-color: var(--lx-muted);
}
.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-color: var(--lx-deep);
    --bs-btn-hover-bg: var(--lx-lavender);
    --bs-btn-hover-border-color: var(--lx-lavender);
}

/* ---------- Tarjetas ---------- */
.card {
    border: 1px solid var(--lx-border);
    border-radius: var(--lx-radius);
    box-shadow: var(--lx-shadow);
    background: #fff;
    overflow: hidden;
}
.card.shadow, .card.shadow-sm { box-shadow: var(--lx-shadow) !important; }
.card-header {
    background: var(--lx-lavender-2);
    border-bottom: 1px solid var(--lx-border);
    font-family: 'Jost', sans-serif;
    font-weight: 500;
}
.card-header.bg-dark, .card-header.bg-primary { color: #fff; }

.product-card {
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lx-shadow-hover) !important;
}
/* Foto vertical a sangre, estilo tienda de moda */
.product-card > a:first-of-type,
.product-card > a:has(.card-img-top) {
    display: block;
    overflow: hidden;
    background: var(--lx-lavender-2);
}
.product-card .card-img-top {
    background: var(--lx-lavender-2);
    aspect-ratio: 3 / 4;
    height: auto;
    width: 100%;
    object-fit: cover;
    padding: 0;
    border-radius: var(--lx-radius-sm);
    transition: transform .5s ease;
}
.product-card:hover .card-img-top { transform: scale(1.05); }
.product-card .card-body { text-align: center; }
.product-card .card-title {
    font-size: .92rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.product-card .card-title a { color: var(--lx-ink) !important; }
.product-card .card-title a:hover { color: var(--lx-magenta) !important; }
.product-card .price {
    font-family: 'Jost', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--lx-deep);
}

/* Franja de beneficios bajo el hero */
.lx-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border: 1px solid var(--lx-border);
    border-radius: var(--lx-radius);
    box-shadow: var(--lx-shadow);
    overflow: hidden;
}
.lx-benefit {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.25rem 1.4rem;
}
.lx-benefit + .lx-benefit { border-left: 1px solid var(--lx-border); }
.lx-benefit i {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    color: var(--lx-magenta);
    background: rgba(31, 31, 31, .08);
}
.lx-benefit strong {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lx-deep);
}
.lx-benefit span { font-size: .85rem; color: var(--lx-muted); }
@media (max-width: 991.98px) {
    .lx-benefits { grid-template-columns: repeat(2, 1fr); }
    .lx-benefit:nth-child(3) { border-left: 0; }
    .lx-benefit:nth-child(n+3) { border-top: 1px solid var(--lx-border); }
}
@media (max-width: 575.98px) {
    .lx-benefits { grid-template-columns: 1fr; }
    .lx-benefit + .lx-benefit { border-left: 0; border-top: 1px solid var(--lx-border); }
}
.product-card > .badge { z-index: 2; }

/* ---------- Badges ---------- */
.badge {
    font-weight: 600;
    letter-spacing: .04em;
    border-radius: var(--lx-radius-sm);
    padding: .4em .8em;
}
.badge.bg-warning { color: var(--lx-ink) !important; }

/* ---------- Formularios ---------- */
.form-control, .form-select {
    border-color: var(--lx-border);
    border-radius: var(--lx-radius-sm);
    padding: .6rem .9rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--lx-magenta);
    box-shadow: 0 0 0 .2rem rgba(31, 31, 31, .15);
}
.form-check-input:checked { background-color: var(--lx-magenta); border-color: var(--lx-magenta); }
.form-label { font-weight: 600; color: var(--lx-deep); }
.input-group-text {
    background: var(--lx-lavender-2);
    border-color: var(--lx-border);
    color: var(--lx-deep);
    font-weight: 600;
}

/* ---------- Tablas ---------- */
.table {
    --bs-table-bg: #fff;
    --bs-table-striped-bg: var(--lx-lavender-2);
    --bs-table-hover-bg: var(--lx-lavender-2);
    border-color: var(--lx-border);
    vertical-align: middle;
}
.table-responsive, .table:not(.table-borderless) {
    border-radius: var(--lx-radius);
}
.table-responsive { box-shadow: var(--lx-shadow); background: #fff; }
.table thead th, .table-dark th {
    background: var(--lx-deep) !important;
    color: #fff !important;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    letter-spacing: .03em;
    border-color: var(--lx-deep) !important;
}

/* ---------- Alertas ---------- */
.alert {
    border: 0;
    border-radius: var(--lx-radius);
    border-left: 4px solid currentColor;
}
.alert-success { background: #e7f7ef; color: #146c4a; }
.alert-danger { background: #f4f4f4; color: #000000; }
.alert-info { background: var(--lx-lavender); color: var(--lx-deep); }
.alert-warning { background: #fff5e0; color: #8a5a00; }

/* ---------- Paginación / breadcrumb / tabs ---------- */
.pagination { gap: .35rem; }
.page-link {
    border-radius: var(--lx-radius-sm);
    border: 1px solid var(--lx-border);
    color: var(--lx-deep);
    min-width: 2.5rem;
    text-align: center;
}
.page-link:hover { background: var(--lx-lavender); color: var(--lx-deep); }
.page-item.active .page-link { background: var(--lx-magenta); border-color: var(--lx-magenta); }

.breadcrumb {
    background: transparent;
    font-size: .9rem;
}
.breadcrumb a { text-decoration: none; color: var(--lx-violet); }

.nav-tabs { border-bottom: 1px solid var(--lx-border); }
.nav-tabs .nav-link {
    border: 0;
    color: var(--lx-muted);
    font-weight: 600;
    border-bottom: 3px solid transparent;
}
.nav-tabs .nav-link.active {
    color: var(--lx-deep);
    background: transparent;
    border-bottom-color: var(--lx-magenta);
}
.tab-content {
    background: #fff !important;
    border-color: var(--lx-border) !important;
    border-radius: 0 0 var(--lx-radius) var(--lx-radius);
}

.list-group-item { border-color: var(--lx-border); }
.list-group-item.active { background: var(--lx-magenta); border-color: var(--lx-magenta); }

.img-thumbnail {
    border-radius: var(--lx-radius-sm);
    border-color: var(--lx-border);
    transition: border-color .2s;
}
.img-thumbnail:hover, .thumb-active { border-color: var(--lx-magenta) !important; }

/* ---------- Hero (carrusel de ofertas) ---------- */
.lx-hero {
    border-radius: var(--lx-radius-sm);
    overflow: hidden;
    box-shadow: var(--lx-shadow-hover);
}
.lx-hero-slide {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    min-height: 380px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(31, 31, 31, .35), transparent 45%),
        linear-gradient(135deg, var(--lx-deep) 0%, var(--lx-deep-2) 100%);
}
.lx-hero-img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.lx-hero-img img {
    max-height: 300px;
    background: #fff;
    border-radius: var(--lx-radius-sm);
    padding: 1.25rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.lx-hero-text { padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
.lx-hero-text h2 { color: #fff; font-weight: 400; font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
.lx-hero-text .lead { color: rgba(255, 255, 255, .85); }
.lx-hero-text .price { font-family: 'Jost', sans-serif; font-size: 2rem; color: #fff; }
.lx-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: #525252;
    margin-bottom: .75rem;
}
.carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 50%; }

/* Barra de filtros */
.lx-filters {
    background: #fff;
    border: 1px solid var(--lx-border);
    border-radius: var(--lx-radius);
    box-shadow: var(--lx-shadow);
}

/* ---------- Footer ---------- */
.lx-footer {
    flex-shrink: 0;
    background: var(--lx-deep);
    color: rgba(255, 255, 255, .75);
    padding: 3rem 0 1.5rem;
    margin-top: 3rem;
}
.lx-footer img { height: 70px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 767.98px) {
    .lx-footer img { height: 40px; }
    .lx-footer li { overflow-wrap: anywhere; }
}
.lx-footer h6 {
    color: #fff;
    font-size: .8rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.lx-footer a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.lx-footer a:hover { color: #525252; }
.lx-footer .lx-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 2rem;
    padding-top: 1.25rem;
    font-size: .85rem;
}

/* ---------- Varios ---------- */
.shadow { box-shadow: var(--lx-shadow) !important; }
.rounded { border-radius: var(--lx-radius-sm) !important; }
hr { border-color: var(--lx-border); opacity: 1; }

@media (max-width: 767.98px) {
    .lx-hero-text { padding: 2rem 1.5rem; }
    .lx-hero-slide { min-height: 0; }
    .lx-search { min-width: 0; width: 100%; margin: .75rem 0; }
}

/* Clases "info" / "secondary" de Bootstrap llevadas a la paleta */
.border-info { border-color: rgba(31, 31, 31, .35) !important; }
.text-info { color: var(--lx-magenta) !important; }
.bg-info { background-color: var(--lx-lavender) !important; color: var(--lx-deep) !important; }
.bg-secondary { background-color: var(--lx-muted) !important; }
.btn-info, .btn-secondary {
    --bs-btn-bg: var(--lx-magenta);
    --bs-btn-border-color: var(--lx-magenta);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--lx-magenta-dark);
    --bs-btn-hover-border-color: var(--lx-magenta-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--lx-magenta-dark);
    --bs-btn-active-color: #fff;
}
.btn-outline-info {
    --bs-btn-color: var(--lx-magenta);
    --bs-btn-border-color: rgba(31, 31, 31, .35);
    --bs-btn-hover-bg: var(--lx-magenta);
    --bs-btn-hover-border-color: var(--lx-magenta);
    --bs-btn-hover-color: #fff;
}
.btn-warning {
    --bs-btn-bg: #f7b733;
    --bs-btn-border-color: #f7b733;
    --bs-btn-color: var(--lx-ink);
}
.input-group > .btn { border-radius: 0 var(--lx-radius-sm) var(--lx-radius-sm) 0; }
.input-group > .form-control:first-child { border-radius: var(--lx-radius-sm) 0 0 var(--lx-radius-sm); }

/* Tarjetas de color (KPIs del panel y encabezados coloreados) */
.card.text-white .card-header {
    background: rgba(255, 255, 255, .08);
    border-bottom-color: rgba(255, 255, 255, .12);
    color: #fff;
}
.lx-kpi { border: 0; box-shadow: var(--lx-shadow-hover); }
.lx-kpi .display-4 { color: #fff; font-weight: 300; }
.lx-kpi-deep { background: linear-gradient(135deg, var(--lx-deep), var(--lx-violet)); }
.lx-kpi-magenta { background: linear-gradient(135deg, var(--lx-magenta-dark), #404040); }
.card.bg-success { background-color: var(--lx-deep) !important; }
.card-header.bg-warning { background: var(--lx-violet) !important; color: #fff !important; }
.card-header.bg-danger, .card-header.bg-primary, .card-header.bg-dark, .card-header.bg-success { color: #fff !important; }
.card-header.bg-success { background: var(--lx-deep) !important; }

/* ==========================================================
   Catálogo estilo moda: grilla limpia, fotos altas, sin cajas
   ========================================================== */
.lx-catalog-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .5rem 0 2rem;
}
.lx-catalog-title {
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0;
    color: var(--lx-ink);
}
.lx-catalog-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    max-width: 100%;
}
.lx-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 38px;
    padding: 0 1.1rem;
    border: 1px solid var(--lx-border);
    border-radius: var(--lx-radius-sm);
    background: #fff;
    color: var(--lx-ink);
    font-size: .88rem;
    transition: border-color .2s, background-color .2s;
}
.lx-pill:hover { border-color: var(--lx-deep); }
.lx-pill.is-active { border-color: var(--lx-magenta); color: var(--lx-magenta); }
.lx-pill-select {
    appearance: none;
    padding-right: 2.2rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23320d4d' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .9rem center;
    cursor: pointer;
}
.lx-pill-select:focus { outline: none; border-color: var(--lx-magenta); }
.lx-price-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding-top: .75rem;
}
.lx-price-filter .input-group { width: 150px; }

.lx-grid { --bs-gutter-x: 1rem; --bs-gutter-y: 2.25rem; }
@media (min-width: 992px) { .lx-grid { --bs-gutter-x: 1.5rem; } }

.lx-card { position: relative; }
.lx-card-img {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #fff;
    border-radius: var(--lx-radius-sm);
}
.lx-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .6s ease;
}
.lx-card.is-agotado .lx-card-gal { opacity: .5; }

.lx-card-bag, .lx-card-fav {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 50%;
    text-decoration: none;
    transition: transform .2s, background-color .2s, color .2s;
}
.lx-card-bag {
    left: 50%;
    bottom: .75rem;
    width: 38px;
    height: 38px;
    transform: translateX(-50%);
    background: var(--lx-ink);
    color: #fff;
    font-size: 1rem;
}
.lx-card-bag:hover { background: var(--lx-magenta); color: #fff; transform: translateX(-50%) scale(1.08); }
.lx-card-fav {
    top: .6rem;
    right: .6rem;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, .9);
    color: var(--lx-ink);
    opacity: 0;
}
.lx-card:hover .lx-card-fav, .lx-card-fav:focus { opacity: 1; }
.lx-card-fav:hover { color: var(--lx-magenta); }
@media (hover: none) { .lx-card-fav { opacity: 1; } }

.lx-tag {
    position: absolute;
    top: .6rem;
    left: .6rem;
    padding: .25rem .6rem;
    border-radius: var(--lx-radius-sm);
    background: var(--lx-magenta);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.lx-tag-muted { background: var(--lx-ink); }

.lx-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding-top: .85rem;
    text-align: center;
    text-decoration: none;
}
.lx-card-name {
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lx-ink);
}
.lx-card-price {
    font-weight: 700;
    font-size: .98rem;
    color: var(--lx-ink);
}
.lx-card-body:hover .lx-card-name { color: var(--lx-magenta); }

/* Precio rebajado (Reglas de precios): original tachado + rebajado en verde */
.lx-card-prices {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
}
.lx-price-old {
    color: var(--lx-muted);
    text-decoration: line-through;
    font-size: .82rem;
}
.lx-price-off { color: var(--lx-off) !important; }
.lx-product-price-wrap {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
}
.lx-product-price-wrap .lx-price-old { font-size: 1.1rem; }

/* De qué son los descuentos del producto (reglas de precios del POS) */
.lx-desc-list {
    list-style: none;
    margin: .9rem 0 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}
.lx-desc-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .65rem .85rem;
    border: 1px solid color-mix(in srgb, var(--lx-off) 25%, transparent);
    background: color-mix(in srgb, var(--lx-off) 6%, transparent);
    border-radius: .6rem;
    line-height: 1.3;
}
.lx-desc-list li > i { color: var(--lx-off); font-size: 1.1rem; margin-top: .05rem; }
.lx-desc-list strong { color: var(--lx-off); display: block; font-size: .95rem; }
.lx-desc-nombre { display: block; font-size: .85rem; color: var(--lx-ink); }
.lx-desc-list small { display: block; color: var(--lx-muted); font-size: .78rem; margin-top: .1rem; }

/* ==========================================================
   Franja de anuncios animada (configurable desde el panel)
   ========================================================== */
.lx-announce {
    background: var(--lx-ink);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    height: 34px;
    display: flex;
    align-items: center;
}
.lx-announce-track {
    display: inline-flex;
    flex-shrink: 0;
    animation: lx-marquee var(--lx-marquee-duration, 30s) linear infinite;
}
.lx-announce:hover .lx-announce-track { animation-play-state: paused; }
.lx-announce-item { display: inline-flex; align-items: center; padding: 0 2rem; }
.lx-announce-item::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--lx-magenta);
    margin-left: 4rem;
}
@keyframes lx-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .lx-announce { justify-content: center; }
    .lx-announce-track { animation: none; }
    .lx-announce-track [aria-hidden="true"] { display: none; }
}

/* La grilla vive dentro del .row del layout: evitar que se sume el gutter vertical dos veces */
.lx-grid { margin-top: calc(-1 * var(--bs-gutter-y)) !important; }

/* ==========================================================
   Ficha de producto
   ========================================================== */
.lx-gallery { display: flex; gap: .75rem; }
.lx-gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 72px;
    flex-shrink: 0;
    max-height: 640px;
    overflow-y: auto;
}
.lx-gallery-thumbs img {
    width: 72px;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--lx-border);
    border-radius: var(--lx-radius-sm);
    cursor: pointer;
    transition: border-color .2s;
}
.lx-gallery-thumbs img:hover, .lx-gallery-thumbs img.thumb-active { border-color: var(--lx-ink) !important; }
.lx-gallery-main {
    position: relative;
    flex: 1;
    aspect-ratio: 3 / 4;
    max-height: 640px;
    background: #fff;
    border-radius: var(--lx-radius-sm);
    overflow: hidden;
}
.lx-gallery-main img { width: 100%; height: 100%; object-fit: contain; }

/* Al cambiar de color se abre la ficha de otra variante (es otro producto).
   El link apunta a #ficha (el bloque "Color:") para caer justo en los swatches
   donde la persona estaba eligiendo —no en la barra de anuncio ni, en el celular,
   arriba de la foto alta—. Este margen lo deja debajo del nav fijo. */
#ficha, #ficha-top { scroll-margin-top: 90px; }
@media (max-width: 575.98px) {
    .lx-gallery { flex-direction: column-reverse; }
    .lx-gallery-thumbs { flex-direction: row; width: auto; overflow-x: auto; }
    .lx-gallery-thumbs img { width: 60px; }
}

.lx-buybox { position: sticky; top: 90px; }
.lx-product-title {
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: .5rem;
}
.lx-product-price {
    font-family: 'Jost', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--lx-ink);
}
.lx-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lx-muted);
    margin-bottom: .6rem;
}
.lx-sizes { display: flex; flex-wrap: wrap; gap: .5rem; }
.lx-size {
    min-width: 48px;
    height: 44px;
    padding: 0 .9rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--lx-border);
    border-radius: var(--lx-radius-sm);
    background: #fff;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}
.lx-size:hover { border-color: var(--lx-ink); }
.btn-check:checked + .lx-size { background: var(--lx-ink); border-color: var(--lx-ink); color: #fff; }
.btn-check:focus-visible + .lx-size { box-shadow: 0 0 0 .2rem rgba(31, 31, 31, .3); }
.lx-size.is-out {
    color: #a3a3a3;
    background: repeating-linear-gradient(135deg, #fff, #fff 6px, #f4f4f4 6px, #f4f4f4 12px);
    text-decoration: line-through;
    cursor: not-allowed;
}
.lx-description {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lx-border);
    color: var(--lx-muted);
    line-height: 1.7;
}

/* Opciones de pago: radio dentro de la tarjeta */
.payment-options .form-check { padding-left: 2.9rem !important; cursor: pointer; }
.payment-options .form-check-input { margin-left: -1.9rem; margin-top: .3rem; }
.payment-options .form-check:has(.form-check-input:checked) { border-color: var(--lx-magenta) !important; background: #fff !important; }

/* ==========================================================
   Pedidos: pago simulado, avisos de mail, seguimiento
   ========================================================== */
.lx-demo-badge {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: var(--lx-radius-sm);
    border: 1px dashed var(--lx-magenta);
    color: var(--lx-magenta);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    vertical-align: middle;
    background: rgba(31, 31, 31, .05);
}

.lx-mail-sim {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--lx-border);
    border-left: 4px solid var(--lx-magenta);
    border-radius: var(--lx-radius);
    box-shadow: var(--lx-shadow);
}
.lx-mail-sim-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    color: var(--lx-magenta);
    background: rgba(31, 31, 31, .08);
}
.lx-mail-preview {
    background: var(--lx-lavender-2);
    border-radius: var(--lx-radius-sm);
    padding: .6rem .8rem;
    display: grid;
    gap: .15rem;
}

.lx-success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2.2rem;
    color: #fff;
    background: linear-gradient(135deg, var(--lx-magenta), #404040);
    box-shadow: 0 12px 30px rgba(31, 31, 31, .35);
    animation: lx-pop .45s ease-out;
}
@keyframes lx-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.lx-code-box {
    height: 100%;
    background: #fff;
    border: 1px solid var(--lx-border);
    border-radius: var(--lx-radius);
    padding: 1rem 1.25rem;
}
.lx-code {
    font-family: 'Jost', monospace;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--lx-deep);
}

/* Pago simulado */
.lx-paysim { overflow: hidden; }
.lx-paysim-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .9rem 1.25rem;
    background: #009ee3;
    color: #fff;
    font-weight: 700;
}
.lx-paysim-head .lx-demo-badge { color: #fff; border-color: rgba(255, 255, 255, .7); background: transparent; }
.lx-paysim-amount { font-family: 'Jost', sans-serif; font-size: 2.2rem; font-weight: 600; }
.lx-paysim-status { position: relative; width: 64px; height: 64px; margin: 0 auto; }
.lx-paysim-status .spinner-border { width: 64px; height: 64px; color: #009ee3; border-width: .3rem; }
.lx-paysim-ok {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2rem;
    color: #fff;
    background: #00a650;
    transform: scale(0);
    transition: transform .35s ease-out;
}
.lx-paysim-status.is-ok .spinner-border { visibility: hidden; }
.lx-paysim-status.is-ok .lx-paysim-ok { transform: scale(1); }
.lx-paysim-progress { height: 6px; border-radius: var(--lx-radius-sm); background: #e8f4fb; }
.lx-paysim-progress .progress-bar { background: #009ee3; transition: width 1.2s ease; }

/* Línea de tiempo */
.lx-steps {
    --lx-progress: 0%;
    position: relative;
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
}
.lx-steps::before, .lx-steps::after {
    content: "";
    position: absolute;
    top: 21px;
    left: 12.5%;
    height: 3px;
    border-radius: var(--lx-radius-sm);
}
.lx-steps::before { right: 12.5%; background: var(--lx-border); }
.lx-steps::after { width: calc(75% * var(--lx-progress) / 100%); background: var(--lx-magenta); transition: width .6s; }
.lx-step {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-align: center;
}
.lx-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    background: #fff;
    border: 2px solid var(--lx-border);
    color: #a3a3a3;
}
.lx-step-text { font-size: .8rem; color: var(--lx-muted); }
.lx-step.is-done .lx-step-icon { background: var(--lx-magenta); border-color: var(--lx-magenta); color: #fff; }
.lx-step.is-current .lx-step-icon { box-shadow: 0 0 0 6px rgba(31, 31, 31, .15); }
.lx-step.is-done .lx-step-text { color: var(--lx-ink); font-weight: 700; }

.lx-track-form { display: flex; gap: .5rem; }
.lx-track-form .form-control { letter-spacing: .12em; font-weight: 600; }

/* ---------- Inicio: categorías en grande ----------
   Mosaico de fotos a sangre, de borde a borde de la pantalla aunque el
   contenido viva en un .container: se sale con el margen negativo de 50vw.
   Dos columnas en escritorio, una en el teléfono. */
body { overflow-x: clip; } /* el 100vw cuenta la barra de scroll: que no aparezca scroll horizontal */

/* .row > .lx-cats le gana al width/max-width/padding que Bootstrap pone
   a todo hijo de .row; sin eso el mosaico queda del ancho del container. */
.row > .lx-cats {
    width: 100vw;
    max-width: none;
    flex: 0 0 auto;
    margin: -1rem calc(50% - 50vw) -3rem; /* -3rem: se come el padding de abajo del main */
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.lx-cat {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    max-height: 92vh;
    width: 100%;
    overflow: hidden;
    background: var(--lx-lavender);
}

/* Si queda una suelta al final, ocupa el ancho entero en formato apaisado */
.lx-cat:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 7; }

.lx-cat img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 70%; /* en las fotos con el pie puesto, el zapato está abajo */
    transition: transform .8s ease;
}

/* Velo apenas oscuro para que el nombre blanco se lea sobre fotos claras */
.lx-cat::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .14);
    transition: background .3s ease;
}

.lx-cat-name {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Jost', 'Lato', sans-serif;
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: .3em;
    text-decoration-thickness: 1px;
}

.lx-cat:hover img { transform: scale(1.03); }
.lx-cat:hover::after { background: rgba(0, 0, 0, .26); }
.lx-cat:focus-visible { outline: 2px solid var(--lx-ink); outline-offset: -4px; }

@media (max-width: 767.98px) {
    /* De a dos también en el teléfono: de a una eran seis pantallas de scroll */
    .lx-cat { aspect-ratio: 3 / 4; max-height: none; }
    .lx-cat:last-child:nth-child(odd) { aspect-ratio: 2 / 1; }
    .lx-cat-name { font-size: .78rem; letter-spacing: .1em; text-align: center; padding: 0 .5rem; }
}


/* Animación de entrada de las categorías. Se elige en el POS (Tienda online ·
   Config) y llega como .anim-<tipo>. Solo se esconde algo si el script del
   inicio puso .is-anim: sin JavaScript las fotos se ven igual. Cada foto
   entra cuando llega a la pantalla (.in); .listo devuelve el transition
   corto para que el hover no quede pesado. */

/* 1 · Zoom lento: arranca agrandada y en blanco y negro y se asienta tomando color */
.lx-cats.is-anim.anim-zoom .lx-cat img {
    transform: scale(1.25);
    filter: grayscale(1) brightness(1.1);
    transition: transform 2.4s cubic-bezier(.2, .7, .2, 1), filter 1.6s ease;
    transition-delay: var(--lx-delay, 0s);
}
.lx-cats.is-anim.anim-zoom .lx-cat.in img { transform: none; filter: none; }

/* 2 · Subir y aparecer: la tarjeta entera sube desde abajo mientras aparece */
.lx-cats.is-anim.anim-subir .lx-cat {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--lx-delay, 0s);
}
.lx-cats.is-anim.anim-subir .lx-cat.in { opacity: 1; transform: none; }

/* 3 · Cortina: la foto se descubre de izquierda a derecha */
.lx-cats.is-anim.anim-cortina .lx-cat img {
    clip-path: inset(0 100% 0 0);
    transform: scale(1.06);
    transition: clip-path 1.4s cubic-bezier(.77, 0, .18, 1), transform 2s ease;
    transition-delay: var(--lx-delay, 0s);
}
.lx-cats.is-anim.anim-cortina .lx-cat.in img { clip-path: inset(0 0 0 0); transform: none; }

/* El nombre aparece después de la foto, en las tres */
.lx-cats.is-anim .lx-cat-name {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .8s ease, transform .8s ease;
    transition-delay: calc(var(--lx-delay, 0s) + .6s);
}
.lx-cats.is-anim .lx-cat.in .lx-cat-name { opacity: 1; transform: none; }
.lx-cats.is-anim .lx-cat.listo img { transition: transform .8s ease; transition-delay: 0s; }
.lx-cats.is-anim .lx-cat.listo:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
    .lx-cats.is-anim .lx-cat,
    .lx-cats.is-anim .lx-cat img,
    .lx-cats.is-anim .lx-cat-name { transform: none; filter: none; clip-path: none; opacity: 1; transition: none; }
}
.lx-cats.sin-transicion .lx-cat,
.lx-cats.sin-transicion .lx-cat img,
.lx-cats.sin-transicion .lx-cat-name { transition: none !important; }

/* ---------- Inicio: slider de promociones ----------
   A sangre como el mosaico de categorías y del alto de la pantalla menos el
   encabezado. En escritorio cada slide son dos fotos lado a lado; en el
   teléfono, la primera sola. */
.row > .lx-slider {
    width: 100vw;
    max-width: none;
    flex: 0 0 auto;
    padding: 0;
    margin: -1rem calc(50% - 50vw) 0;
}
.lx-slider + .lx-cats { margin-top: 4px; }

.lx-slide {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: clamp(420px, calc(100svh - 140px), 62vw);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: var(--lx-lavender);
}
.lx-slide:hover { color: #fff; }

.lx-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 65%;
}
/* Banner (slide de una sola foto, lo que se sube desde el POS): ocupa todo el
   ancho y se ve ENTERO, con la proporción de la imagen, sin recortar nada.
   El alto lo pone la imagen; por eso el tamaño recomendado en el POS. */
.lx-slide.is-banner { display: block; height: auto; background: none; }
.lx-slide.is-banner .lx-slide-img { display: block; height: auto; object-fit: contain; }
/* Sin título no hay texto encima, así que tampoco hace falta el velo oscuro */
.lx-slide.sin-texto::after { content: none; }

/* Velo de abajo hacia arriba para que el texto blanco se lea sobre fotos claras */
.lx-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}

.lx-slide-text {
    position: absolute;
    left: clamp(1.5rem, 6vw, 6rem);
    right: clamp(1.5rem, 6vw, 6rem);
    bottom: clamp(3.5rem, 9vh, 6.5rem);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    font-family: 'Jost', 'Lato', sans-serif;
}
.lx-slide-eyebrow { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; }
.lx-slide-title { font-size: clamp(2.6rem, 6vw, 5.5rem); font-weight: 400; line-height: 1; letter-spacing: -.01em; }
.lx-slide-copy { font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 300; max-width: 32rem; }
.lx-slide-cta {
    margin-top: .75rem;
    font-size: .85rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: .4em;
    text-decoration-thickness: 1px;
}

/* El slide que entra: la foto se asienta despacio (como el zoom de las
   categorías) y el texto sube de a una línea. */
.lx-slider .carousel-item.active .lx-slide-img { animation: lx-slide-zoom 7s cubic-bezier(.2, .7, .2, 1) both; }
.lx-slider .carousel-item.active .lx-slide-text > * { animation: lx-slide-up .9s cubic-bezier(.2, .7, .2, 1) both; }
.lx-slider .carousel-item.active .lx-slide-text > :nth-child(2) { animation-delay: .12s; }
.lx-slider .carousel-item.active .lx-slide-text > :nth-child(3) { animation-delay: .24s; }
.lx-slider .carousel-item.active .lx-slide-text > :nth-child(4) { animation-delay: .36s; }
@keyframes lx-slide-zoom { from { transform: scale(1.12); } to { transform: none; } }
@keyframes lx-slide-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.lx-slider.carousel-fade .carousel-item { transition-duration: 1s; }

.lx-slider-dots { margin-bottom: 1.5rem; gap: .5rem; }
.lx-slider-dots [data-bs-target] {
    width: 32px;
    height: 2px;
    margin: 0;
    border: 0;
    background-color: #fff;
    opacity: .45;
}
.lx-slider-dots .active { opacity: 1; }

.lx-slider-arrow { width: 7%; opacity: 0; transition: opacity .3s ease; }
.lx-slider-arrow i { font-size: 2rem; color: #fff; }
.lx-slider:hover .lx-slider-arrow { opacity: .85; }
.lx-slider-arrow:focus-visible { opacity: 1; }

@media (max-width: 767.98px) {
    .lx-slide { grid-template-columns: 1fr; height: clamp(460px, calc(100svh - 120px), 760px); }
    .lx-slide-img-extra { display: none; }
    .lx-slider-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lx-slider .carousel-item.active .lx-slide-img,
    .lx-slider .carousel-item.active .lx-slide-text > * { animation: none; }
}

/* ---------- Encabezado ----------
   Como Prune: hamburguesa a la izquierda con el logo al lado, y a la derecha
   buscar, bolsa y cuenta. Las categorías viven siempre en el menú lateral,
   que entra desde la izquierda: en el teléfono ocupa toda la pantalla y en
   escritorio es una columna. En el teléfono el logo va centrado. */
.lx-navbar { padding-top: .75rem; padding-bottom: .75rem; }
.lx-navbar > .container { flex-wrap: nowrap; }
.lx-navbar .navbar-toggler { border: 0; box-shadow: none; padding: .25rem 0; }
.lx-navbar .navbar-brand { margin: 0 0 0 1.25rem; padding: 0; }

.lx-navbar .nav-link,
.lx-search .form-control {
    font-family: 'Jost', 'Lato', sans-serif;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.lx-navbar .nav-link { padding: .4rem .7rem !important; white-space: nowrap; color: var(--lx-ink); }
.lx-navbar .nav-link:hover { color: var(--lx-muted); }

.lx-bar-tools { margin-left: auto; display: flex; align-items: center; }
.lx-bar-desk { align-items: center; gap: .25rem; }
.lx-bar-desk .navbar-nav { flex-direction: row; align-items: center; }
/* Sin navbar-expand, Bootstrap pone los desplegables en el flujo: acá flotan */
.lx-bar-desk .dropdown-menu { position: absolute; }

.lx-bag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--lx-ink);
    text-decoration: none;
}
.lx-navbar .lx-bag, .lx-navbar .lx-bag:hover { color: var(--lx-ink); }
.lx-bag .bi { font-size: 1.15rem; line-height: 1; }
.lx-bag-count { font-size: .72rem; letter-spacing: 0; }

/* Buscador: base común (línea abajo, sin caja) */
.lx-search { position: relative; min-width: 0; }
.lx-search .form-control {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--lx-ink);
    border-radius: 0;
    color: var(--lx-ink);
    padding: .3rem 1.75rem .3rem 0;
}
.lx-search .form-control::placeholder { color: var(--lx-ink); opacity: 1; }
.lx-search .form-control:focus { border-color: var(--lx-ink); box-shadow: none; }
.lx-search .form-control:focus::placeholder { color: var(--lx-muted); }
.lx-search button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: var(--lx-ink);
    display: grid;
    place-items: center;
}

/* En la barra es una lupa: al tocarla se despliega el campo hacia la izquierda */
.lx-bar-desk .lx-search { width: 28px; height: 32px; flex: 0 0 auto; margin-right: .5rem; }
.lx-bar-desk .lx-search .form-control {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    opacity: 0;
    background: #fff;
    border-bottom-color: transparent;
    transition: width .35s cubic-bezier(.2, .7, .2, 1), opacity .2s ease;
}
.lx-bar-desk .lx-search:focus-within .form-control,
.lx-bar-desk .lx-search .form-control:not(:placeholder-shown) { width: 240px; opacity: 1; border-bottom-color: var(--lx-ink); }
.lx-bar-desk .lx-search .form-control:focus { background: #fff; } /* tapa lo que haya debajo */
.lx-drawer .lx-search .form-control:focus { background: transparent; }

/* ---------- Menú lateral ---------- */
.lx-drawer {
    --bs-offcanvas-width: 100%;
    --bs-offcanvas-transition: transform .45s cubic-bezier(.77, 0, .18, 1);
    border: 0 !important;
}
.lx-drawer .offcanvas-header {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding: .6rem calc(var(--bs-gutter-x, 1.5rem) * .5);
    min-height: 57px;
    border-bottom: 1px solid var(--lx-border);
}
.lx-drawer-close { border: 0; background: none; padding: .25rem 0; color: var(--lx-ink); font-size: 1.35rem; justify-self: start; line-height: 1; }
.lx-drawer-logo { justify-self: center; color: var(--lx-ink); text-decoration: none; }
.lx-drawer-logo img { height: 24px; width: auto; display: block; }
.lx-drawer .offcanvas-body { padding: .5rem 1.5rem 2rem; display: flex; flex-direction: column; }

.lx-drawer .lx-nav-main .nav-link,
.lx-drawer .lx-nav-tools > .nav-item > .nav-link {
    padding: 1.05rem 0 !important;
    font-size: .9rem;
    border-bottom: 1px solid var(--lx-border);
}
.lx-drawer .lx-search { width: 100%; margin: 1.5rem 0 0; }
.lx-drawer .lx-search .form-control { font-size: .85rem; padding-top: .7rem; padding-bottom: .7rem; }
.lx-drawer .lx-nav-tools { margin-top: .5rem; }
.lx-drawer .lx-nav-tools .dropdown-menu { border: 0; padding: 0 0 .5rem 1rem; }

/* Las opciones entran de izquierda a derecha, una detrás de la otra,
   mientras el panel termina de abrirse. --i lo pone el script del footer. */
.lx-drawer:is(.showing, .show:not(.hiding)) .lx-drawer-item {
    animation: lx-drawer-in .55s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(.15s + var(--i, 0) * .05s);
}
@keyframes lx-drawer-in { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }

@media (min-width: 992px) {
    .lx-drawer { --bs-offcanvas-width: 420px; }
    .lx-drawer .offcanvas-header { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (max-width: 991.98px) {
    .lx-navbar { padding-top: .6rem; padding-bottom: .6rem; }
    .lx-navbar > .container {
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        align-items: center;
    }
    .lx-navbar .navbar-toggler { grid-column: 1; grid-row: 1; justify-self: start; }
    .lx-navbar .navbar-brand { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; }
    .lx-navbar .navbar-brand img { height: 24px; }
    .lx-bar-tools { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lx-drawer { --bs-offcanvas-transition: none; }
    .lx-drawer:is(.showing, .show:not(.hiding)) .lx-drawer-item { animation: none; }
}

/* El slider va pegado al encabezado: se come el mb-4 de la barra y el
   padding de arriba del main */
.row > .lx-slider { margin-top: calc(-1rem - 1.5rem); }

/* ---------- Tarjeta: galería al pasar el mouse ----------
   Las fotos van apiladas y se ve la que tiene .is-on, con un fundido.
   Con mouse: al entrar pasa a la segunda y al salir vuelve a la primera.
   En pantallas táctiles: se desliza con el dedo y hay puntitos. */
.lx-card-gal { position: absolute; inset: 0; display: block; }
.lx-card-gal img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
}
.lx-card-gal img.is-on { opacity: 1; }

.lx-gal-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3.6rem;
    z-index: 2;
    display: none;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
}
.lx-gal-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--lx-ink); opacity: .25; transition: opacity .2s; }
.lx-gal-dots i.is-on { opacity: .9; }

@media (hover: none) {
    .lx-gal-dots { display: flex; }
    .lx-card-gal { touch-action: pan-y; } /* el gesto vertical sigue siendo scroll */
}
@media (prefers-reduced-motion: reduce) {
    .lx-card-gal img { transition: none; }
}

/* ---------- Listados: tamaño de las fotos ----------
   Tres íconos (grande / medio / chico) en el encabezado de categoría,
   búsqueda y catálogo. "Medio" es la grilla de siempre (2 · 3 · 4 por fila,
   según el ancho). La elección vive en <html data-vista> (ver _vista.php). */
.lx-catalog-side { display: flex; align-items: center; gap: 1.25rem; }
.lx-vista { display: inline-flex; align-items: center; gap: .35rem; }
.lx-vista button {
    border: 0;
    border-bottom: 1px solid transparent;
    background: none;
    padding: .2rem .15rem .3rem;
    color: var(--lx-muted);
    line-height: 0;
    transition: color .2s, border-color .2s;
}
.lx-vista button:hover { color: var(--lx-ink); }
.lx-vista button[aria-pressed="true"] { color: var(--lx-ink); border-bottom-color: var(--lx-ink); }
.lx-vista svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1; }

/* Grande: 1 por fila en el teléfono, 2 desde tablet */
html[data-vista="grande"] .lx-grid-vista > * { width: 100%; }
/* Chico: 3 en el teléfono, 4 en tablet, 6 en escritorio */
html[data-vista="chico"] .lx-grid-vista > * { width: 33.3333%; }
@media (min-width: 768px) {
    html[data-vista="grande"] .lx-grid-vista > * { width: 50%; }
    html[data-vista="chico"] .lx-grid-vista > * { width: 25%; }
}
@media (min-width: 992px) {
    html[data-vista="chico"] .lx-grid-vista > * { width: 16.6667%; }
}

/* En chico no entran los botones encima de la foto: se ve la foto, el nombre
   y el precio, y se toca para entrar. */
html[data-vista="chico"] .lx-grid-vista { --bs-gutter-x: .5rem; --bs-gutter-y: 1.5rem; }
html[data-vista="chico"] .lx-grid-vista .lx-card-bag,
html[data-vista="chico"] .lx-grid-vista .lx-card-fav { display: none; }
html[data-vista="chico"] .lx-grid-vista .lx-gal-dots { bottom: .5rem; }
html[data-vista="chico"] .lx-grid-vista .lx-card-name { font-size: .7rem; }
html[data-vista="chico"] .lx-grid-vista .lx-card-price { font-size: .8rem; }

/* ---------- Contraste en los listados ----------
   Con todo en blanco las filas se pegaban entre sí. En las páginas con grilla
   de productos el fondo pasa a un gris tibio y cada producto es una tarjeta
   blanca con borde: así se ve dónde termina una fila y empieza la otra. */
body:has(.lx-grid-vista) { background: #f1f0ed; }
.lx-grid-vista .lx-card {
    height: 100%;
    background: #fff;
    border: 1px solid #e2e0dc;
    padding-bottom: 1rem;
    transition: box-shadow .25s ease, border-color .25s ease;
}
.lx-grid-vista .lx-card:hover {
    border-color: #cfccc6;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
}

/* ---------- Botón Filtrar (listado de categoría) ---------- */
.lx-filtrar-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem 1rem;
    border: 1px solid var(--lx-ink);
    background: #fff;
    color: var(--lx-ink);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background-color .2s, color .2s;
}
.lx-filtrar-btn:hover, .lx-filtrar-btn[aria-expanded="true"] { background: var(--lx-ink); color: #fff; }
.lx-filtrar-n {
    display: inline-grid;
    place-items: center;
    min-width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--lx-ink);
    color: #fff;
    font-size: .65rem;
    letter-spacing: 0;
}
.lx-filtrar-btn:hover .lx-filtrar-n, .lx-filtrar-btn[aria-expanded="true"] .lx-filtrar-n { background: #fff; color: var(--lx-ink); }
.lx-filtrar .dropdown-menu { min-width: 13rem; padding: .5rem 0; border: 1px solid var(--lx-border); border-radius: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.lx-filtrar .dropdown-header { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lx-muted); }
.lx-filtrar .dropdown-item { display: flex; justify-content: space-between; align-items: center; font-size: .88rem; }
.lx-filtrar .dropdown-item.active, .lx-filtrar .dropdown-item:active { background: var(--lx-lavender); color: var(--lx-ink); font-weight: 600; }
.lx-filtrar-limpiar { color: var(--lx-muted); text-decoration: underline; }

/* ---------- Color en la ficha (va antes que el talle) ----------
   Una foto chica por color. El del producto que se está viendo queda con
   borde negro; los demás llevan a la ficha de ese color. */
.lx-label strong { font-weight: 700; color: var(--lx-ink); text-transform: none; letter-spacing: 0; }
.lx-colors { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.lx-color {
    display: block;
    width: 64px;
    height: 64px;
    padding: 3px;
    border: 1px solid var(--lx-border);
    background: #fff;
    cursor: pointer;
    transition: border-color .2s;
}
.lx-color img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lx-color:hover { border-color: var(--lx-muted); }
.lx-color.is-on { border: 2px solid var(--lx-ink); padding: 2px; }
.lx-size-item[hidden] { display: none; }

/* ---------- Favoritos: corazón relleno y aviso ---------- */
.lx-card-fav.is-fav { opacity: 1; color: var(--lx-ink); }
.lx-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.25rem;
    background: var(--lx-ink);
    color: #fff;
    font-size: .9rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    transform: translateX(-50%);
    animation: lx-toast 4s ease forwards;
    white-space: nowrap;
}
.lx-toast a { color: #fff; font-weight: 700; text-decoration: underline; margin-left: .4rem; }
@keyframes lx-toast {
    0%   { opacity: 0; transform: translate(-50%, 1rem); }
    8%   { opacity: 1; transform: translate(-50%, 0); }
    85%  { opacity: 1; transform: translate(-50%, 0); visibility: visible; }
    100% { opacity: 0; transform: translate(-50%, 0); visibility: hidden; }
}

/* ---------- Lista vacía (favoritos) ---------- */
.lx-empty { text-align: center; padding: 4rem 1rem; color: var(--lx-muted); }
.lx-empty .bi { font-size: 2.2rem; color: var(--lx-ink); }
.lx-empty p { margin: 1rem 0 1.5rem; }

/* ---------- Carrito en mobile: cada fila pasa a ser una tarjeta ---------- */
@media (max-width: 767.98px) {
    .lx-cart-table thead { display: none; }
    .lx-cart-table,
    .lx-cart-table tbody { display: block; width: 100%; }

    .lx-cart-table tr {
        display: grid;
        grid-template-columns: 64px 1fr auto;
        grid-template-areas:
            "img prod   del"
            "img talla  precio"
            "qty qty    qty";
        column-gap: .85rem;
        row-gap: .45rem;
        align-items: center;
        border: 1px solid var(--lx-border);
        padding: .85rem;
        margin-bottom: .85rem;
    }

    .lx-cart-table td {
        display: block;
        border: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        background: transparent;
    }

    .lx-cart-table td:nth-child(1) { grid-area: img; align-self: start; }
    .lx-cart-table td:nth-child(2) { grid-area: prod; }
    .lx-cart-table td:nth-child(3) { grid-area: talla; }
    .lx-cart-table td:nth-child(4) { grid-area: precio; text-align: right !important; }
    .lx-cart-table td:nth-child(5) { grid-area: qty; }
    .lx-cart-table td:nth-child(6) { grid-area: del; text-align: right !important; align-self: start; }

    .lx-cart-table td:nth-child(1) img {
        width: 64px; height: 84px; object-fit: contain;
        background: #fff; border: 1px solid var(--lx-border); padding: 2px;
    }

    /* Etiquetas chiquitas para que se entienda cada dato */
    .lx-cart-table td:nth-child(3)::before,
    .lx-cart-table td:nth-child(5)::before {
        display: block;
        font-size: .66rem; letter-spacing: .04em; text-transform: uppercase;
        color: var(--lx-muted); margin-bottom: .15rem; font-weight: 400;
    }
    .lx-cart-table td:nth-child(3)::before { content: "Talle"; }
    .lx-cart-table td:nth-child(5)::before { content: "Cantidad"; }

    /* El selector de cantidad arranca en una fila propia, separado por una línea */
    .lx-cart-table td:nth-child(5) {
        margin-top: .35rem;
        padding-top: .6rem !important;
        border-top: 1px solid var(--lx-border) !important;
    }
    .lx-cart-table td:nth-child(5) .btn-group { width: 100%; max-width: 180px; }
    .lx-cart-table td:nth-child(5) .btn-group > .btn { flex: 1; }
}