:root {
        --primary: var(--marca-acento);
        --primary-dark: color-mix(in srgb, var(--marca-acento) 86%, #000);
        --secondary: var(--marca-acento-hondo);
        --gold-ink: var(--marca-sobre-acento);      /* texto/icono sobre relleno ámbar */
        --dark: var(--marca-texto);          /* tinta neutra (antes azulada) */
        --light: var(--marca-fondo);
        --gray: var(--marca-tenue);
        --light-gray: var(--marca-linea);
        --success: #1a7640;
        --warning: #f59e0b;
        --danger: #ef4444;
        --card-shadow: 0 18px 40px -22px color-mix(in srgb, var(--marca-primario) 28%, transparent);
        --vx-ease: cubic-bezier(.4, 0, .2, 1);
      }

      /* Base tipográfica alineada con el sistema vx-* del módulo web */
      body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        color: var(--dark);
        background: var(--light);
      }
      h1, h2, h3, h4, h5, .section-title h2, .product-card .card-title {
        font-family: 'Manrope', system-ui, sans-serif;
      }

      /* Estilos generales */
      .section-title {
        text-align: center;
        margin-bottom: 40px;
      }

      .section-title h2 {
        font-size: 2.2rem;
        font-weight: 700;
        color: var(--dark);
        position: relative;
        display: inline-block;
        margin-bottom: 15px;
      }

      .section-title h2::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: linear-gradient(45deg, var(--primary), var(--secondary));
        border-radius: 2px;
      }

      .section-title p {
        color: var(--gray);
        max-width: 700px;
        margin: 20px auto 0;
        font-size: 1.1rem;
      }

      /* Estilos para la tienda */
      .product-card {
        transition: all 0.3s ease;
        border: none;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--card-shadow);
        margin-bottom: 20px;
        background: white;
      }

      .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
      }

      .product-card .card-img-top {
        height: 200px;
        object-fit: contain;
        padding: 20px;
        background: var(--marca-fondo);
        transition: transform 0.3s ease;
      }

      .product-card:hover .card-img-top {
        transform: scale(1.05);
      }

      .product-card .card-body {
        padding: 20px;
      }

      .product-card .card-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--dark);
        margin-bottom: 10px;
        height: 50px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .product-card .card-text {
        color: var(--gray);
        font-size: 0.9rem;
        margin-bottom: 15px;
        height: 60px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }

      .product-card .price {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 15px;
      }

      .product-card .btn {
        border-radius: 11px;
        font-weight: 700;
        font-size: .9rem;
        padding: 10px 16px;
        letter-spacing: .01em;
        transition: transform .2s var(--vx-ease), box-shadow .2s var(--vx-ease),
                    background .2s var(--vx-ease), color .2s var(--vx-ease), border-color .2s var(--vx-ease);
        white-space: nowrap;
      }

      /* Fila de acciones de la tarjeta: separadas y equilibradas */
      .product-card .card-body > .d-flex {
        gap: 10px;
        align-items: stretch;
      }
      .product-card .card-body > .d-flex .btn { flex: 1 1 0; }
      .product-card .card-body > .d-flex .btn-outline-primary {
        flex: 0 0 auto;
        min-width: 64px;
        padding-left: 16px; padding-right: 16px;
      }

      /* El badge del carrito se oculta cuando está a 0 (también el flotante) */
      .cart-count[hidden] { display: none !important; }

      .product-card .btn-outline-primary {
        border: 1.5px solid var(--primary);
        color: var(--marca-acento-hondo);
        background: var(--marca-superficie);
      }

      .product-card .btn-outline-primary:hover {
        background: color-mix(in srgb, var(--marca-acento) 14%, transparent);
        border-color: var(--primary);
        color: #8a5f06;
        transform: translateY(-2px);
      }

      .product-card .btn-primary {
        background: var(--primary);
        border: none;
        color: var(--gold-ink);
      }

      .product-card .btn-primary:hover {
        background: var(--primary-dark);
        color: var(--gold-ink);
        transform: translateY(-2px);
        box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--marca-acento) 55%, transparent);
      }

      .product-card .btn-primary:disabled,
      .product-card .btn-primary[disabled] {
        background: var(--marca-linea);
        color: var(--marca-tenue);
        box-shadow: none;
      }

      /* Badges */
      .product-badges {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        pointer-events: none;
      }

       .product-badge {
         position: static;
         min-height: 25px;
         padding: 0 11px 0 9px;
         border-radius: 5px 3px 3px 5px;
         font-family: 'Manrope', system-ui, sans-serif;
         font-size: .66rem;
         font-weight: 800;
         letter-spacing: .05em;
         line-height: 25px;
         text-transform: uppercase;
         color: var(--marca-sobre-primario);
         background: var(--dark);
         box-shadow: 0 5px 12px -6px rgba(0, 0, 0, .4);
         clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%);
       }

      .badge-new {
        background: var(--primary);
        color: var(--gold-ink);
      }

       .badge-sale {
         background: var(--danger);
         color: var(--marca-sobre-primario);
       }

       .badge-danger { background: var(--danger); color: var(--marca-sobre-primario); }
       .badge-success { background: #1f8f4e; color: var(--marca-sobre-primario); }
       .badge-secondary { background: #6f7787; color: var(--marca-sobre-primario); }

      .badge-popular {
        background: #1f8f4e;
        color: var(--marca-sobre-primario);
      }

      /* Filtros */
      .filter-section {
        background: white;
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 30px;
        box-shadow: var(--card-shadow);
      }

      .filter-section h5 {
        font-weight: 600;
        color: var(--dark);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .filter-section h5 i {
        color: var(--primary);
      }

      /* Carrito flotante */
      .floating-cart-btn {
        position: fixed;
        left: 30px;
        bottom: 30px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: var(--primary);
        color: var(--gold-ink);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 10px 25px color-mix(in srgb, var(--marca-acento) 30%, transparent);
        z-index: 1000;
        transition: all 0.3s ease;
        text-decoration: none;
      }

      .floating-cart-btn:hover {
        transform: translateY(-5px) scale(1.05);
        background: var(--primary-dark);
        color: var(--gold-ink);
        box-shadow: 0 15px 30px color-mix(in srgb, var(--marca-acento) 40%, transparent);
      }

      .floating-cart-btn i {
        font-size: 1.5rem;
        margin-bottom: 2px;
      }

      .floating-cart-btn .cart-text {
        font-size: 0.7rem;
        font-weight: 500;
      }

      .cart-count {
        position: absolute;
        top: -5px;
        right: -5px;
        background: white;
        color: var(--primary);
        border-radius: 50%;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 700;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }

      /* Estilos para el boton de pago */
      #checkout-btn {
        background: linear-gradient(135deg, var(--marca-acento) 0%, #bb8f0c 100%);
        border: none;
        padding: 10px;
        font-weight: 600;
        transition: all 0.3s ease;
      }

      #checkout-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
      }

      /* Animaciones */
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .product-card {
        animation: fadeIn 0.6s ease-out;
      }

      /* Responsive */
      @media (max-width: 768px) {
        .product-card .card-img-top {
          height: 150px;
        }

        .section-title h2 {
          font-size: 1.8rem;
        }
      }

      @media (max-width: 576px) {
        .product-card .card-img-top {
          height: 120px;
        }

        .section-title h2 {
          font-size: 1.5rem;
        }
      }
  
      .pagination {
        margin-top: 40px;
      }

      .page-item {
        margin: 0 5px;
      }

      .page-link {
        border: none;
        color: var(--dark);
        font-weight: 600;
        border-radius: 8px !important;
        padding: 8px 15px;
        min-width: 40px;
        text-align: center;
        transition: all 0.3s;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      }

      .page-link:hover {
        background: var(--light-gray);
        color: var(--dark);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      .page-item.active .page-link {
        background: var(--primary);
        color: var(--gold-ink);
        box-shadow: 0 5px 15px color-mix(in srgb, var(--marca-acento) 30%, transparent);
      }

      .page-item.disabled .page-link {
        color: var(--gray);
        background: transparent;
        box-shadow: none;
      }
      .filter-section {
        background: white;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 30px;
        box-shadow: var(--card-shadow);
      }

      .filter-card {
        background: var(--marca-fondo);
        border-radius: 10px;
        overflow: hidden;
        height: 100%;
      }

      .filter-header {
        background: var(--primary);
        color: var(--gold-ink);
        padding: 12px 15px;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .filter-header h5 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        font-family: 'Manrope', system-ui, sans-serif;
      }

      .filter-header i {
        font-size: 1rem;
      }

      .filter-body {
        padding: 15px;
      }

      .input-with-icon {
        position: relative;
      }

      .input-with-icon i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray);
      }

      .input-with-icon input {
        padding-left: 40px;
        border-radius: 8px;
        border: 1px solid var(--light-gray);
        height: 45px;
      }

      .filter-card select {
        width: 100%;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid var(--light-gray);
        height: 45px;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 15px;
      }

      @media (max-width: 768px) {
        .filter-card {
          margin-bottom: 15px;
        }
      }
  
      .user-option {
        transition: all 0.3s ease;
        min-width: 130px;
        max-width: 200px;
      }

      .user-option:hover {
        background-color: var(--marca-fondo);
        transform: scale(1.05);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
      }
   
      /* User Avatar Navigation */
      .user-avatar-nav {
        --size: 2.25rem;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        background: var(--marca-acento);
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--shadow-sm);
        position: relative;
        margin-left: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        overflow: hidden;
      }

      .user-avatar-nav::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.1);
        opacity: 0;
        transition: var(--transition);
      }

      .user-avatar-nav:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(78, 115, 223, 0.25);
      }

      .user-avatar-nav:hover::before {
        opacity: 1;
      }


      /* ======================================================================
         CATÁLOGO
         Cabecera + barra lateral de filtros + rejilla de producto.

         Las clases `vx-pcard*`, `.add-to-cart` y `.fav-heart` son un contrato
         con catalogo_variantes.js, contador_carrito.js y favoritos.js: los tres
         las buscan por nombre. Renombrarlas rompe el carrito y los favoritos
         sin que salte ningún error.
         ====================================================================== */

      /* Más ancho para que quepan más productos de un vistazo. Es `max-width`,
         así que en pantallas menores no cambia nada. */
      .shop-wrap {
        max-width: 1560px;
        margin: 0 auto;
        padding: 34px 22px 60px;
      }

      /* ---- Cabecera ---- */

      .shop-crumbs {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 22px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: .72rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--gray);
      }
      .shop-crumbs a { color: var(--gray); text-decoration: none; }
      .shop-crumbs a:hover { color: var(--primary-dark); }
      .shop-crumbs span[aria-current] { color: var(--dark); font-weight: 600; }

      .shop-hero { margin-bottom: 26px; }

      .shop-hero__fila {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 40px;
        flex-wrap: wrap;
      }

      .shop-hero__titulo {
        margin: 0 0 .5rem;
        font-family: 'Manrope', system-ui, sans-serif;
        font-size: 2.35rem;
        font-weight: 800;
        letter-spacing: -.025em;
        color: var(--dark);
      }

      .shop-hero__sub {
        margin: 0;
        max-width: 58ch;
        color: var(--gray);
        font-size: .97rem;
        line-height: 1.6;
      }

      /* Las tres promesas van arriba y no en el pie: son las que deciden si
         alguien sigue mirando precios. */
      .shop-garantias {
        display: flex;
        gap: 34px;
        margin: 0;
        padding: 0;
        list-style: none;
        flex-wrap: wrap;
      }
      .shop-garantias li { display: flex; flex-direction: column; gap: 3px; }
      .shop-garantias b { color: var(--dark); font-size: .88rem; font-weight: 700; }
      .shop-garantias span { color: var(--gray); font-size: .8rem; }

      .shop-fallo {
        padding: 16px 18px;
        margin-bottom: 22px;
        border: 1px solid #f0c9c4;
        border-radius: 12px;
        background: #fdf1f0;
        color: #a03024;
        font-size: .9rem;
      }

      /* ---- Rejilla de dos columnas ---- */

      .shop-layout {
        display: grid;
        grid-template-columns: 296px minmax(0, 1fr);
        gap: 28px;
        align-items: start;
      }

      /* ---- Barra lateral ---- */

      .shop-filter-toggle {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 10px;
        height: 46px;
        padding: 0 16px;
        margin-bottom: 14px;
        border: 1px solid var(--light-gray);
        border-radius: 12px;
        background: var(--marca-superficie);
        color: var(--dark);
        font-size: .92rem;
        font-weight: 600;
        cursor: pointer;
      }
      .shop-filter-toggle__chev { margin-left: auto; transition: transform .2s var(--vx-ease); }
      .shop-filter-toggle.is-open .shop-filter-toggle__chev { transform: rotate(180deg); }

      /* ---- Colapso en escritorio ----
         El botón es el mismo que en móvil; aquí solo cambia lo que oculta:
         el panel se quita y la columna de la barra lateral se cierra, para
         que la rejilla ocupe todo el ancho cuando no se quiere filtrar. */
      .shop-layout.filtros-colapsados {
        grid-template-columns: minmax(0, 1fr);
      }
      .shop-layout.filtros-colapsados .shop-filtros {
        display: none;
      }

      /* Lo pegajoso es la COLUMNA, no la tarjeta de filtros: así todo lo que
         viva en ella acompaña al catálogo mientras se desliza.

         Sin desplazamiento propio a propósito. La lista de categorías tiene el
         suyo, que es lo único que puede crecer sin límite aquí; poner otro por
         encima añadía una segunda barra que se comía a la primera. */
      .shop-sidebar {
        position: sticky;
        top: 18px;
      }

      .shop-filtros {
        padding: 20px;
        border: 1px solid var(--light-gray);
        border-radius: 14px;
        background: var(--marca-superficie);
      }

      .shop-filtros__head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 14px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--light-gray);
      }

      .shop-filtros__titulo {
        margin: 0;
        font-family: 'Manrope', system-ui, sans-serif;
        font-size: 1rem;
        font-weight: 700;
        color: var(--dark);
      }

      .shop-filtros__limpiar {
        color: var(--gray);
        font-size: .82rem;
        text-decoration: none;
      }
      .shop-filtros__limpiar:hover { color: var(--primary-dark); text-decoration: underline; }

      .filtro { padding: 16px 0; border-bottom: 1px solid var(--light-gray); }
      .filtro:last-of-type { border-bottom: 0; padding-bottom: 4px; }

      .filtro__rotulo {
        display: block;
        margin-bottom: 11px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .13em;
        text-transform: uppercase;
        color: var(--gray);
      }
      .filtro__rotulo i { font-style: normal; opacity: .7; }

      .filtro__campo {
        width: 100%;
        height: 42px;
        padding: 0 13px;
        border: 1px solid var(--light-gray);
        border-radius: 10px;
        background: var(--marca-superficie);
        color: var(--dark);
        font-family: inherit;
        font-size: .9rem;
      }
      .filtro__campo::placeholder { color: #a8a49c; }
      .filtro__campo:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 16%, transparent);
      }

      .filtro__rango { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

      /* ---- Categorías ---- */

      /* Un catálogo con treinta categorías haría la columna interminable y
         empujaría el resto de filtros fuera de la vista. Se desliza dentro de
         su caja; el alto está elegido para que la siguiente categoría asome por
         abajo y se vea que hay más. */
      .filtro__categorias {
        margin: 0;
        padding: 0;
        list-style: none;
        max-height: 212px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #ded8cc transparent;
      }

      .filtro__categorias::-webkit-scrollbar { width: 6px; }
      .filtro__categorias::-webkit-scrollbar-track { background: transparent; }
      .filtro__categorias::-webkit-scrollbar-thumb { background: var(--marca-linea); border-radius: 999px; }
      .filtro__categorias::-webkit-scrollbar-thumb:hover { background: #cdc6b7; }

      .filtro__cat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 0;
        color: var(--dark);
        font-size: .92rem;
        font-weight: 600;
        text-decoration: none;
        transition: color .15s var(--vx-ease);
      }
      .filtro__cat:hover { color: var(--primary-dark); }
      .filtro__cat b { color: var(--gray); font-size: .8rem; font-weight: 500; }
      .filtro__cat.is-activa { color: var(--primary-dark); }
      .filtro__cat.is-activa::after { content: "×"; margin-left: -6px; color: var(--gray); }

      /* ---- Valoración ---- */

      .filtro__check {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 5px 0;
        margin: 0;
        color: var(--dark);
        font-size: .88rem;
        cursor: pointer;
      }
      .filtro__check input { accent-color: var(--primary-dark); width: 16px; height: 16px; }

      .filtro__estrellas { letter-spacing: 1px; color: #d9d5cc; font-size: .95rem; }
      .filtro__estrellas b { color: var(--primary-dark); font-weight: 400; }

      .filtro__quitar {
        display: inline-block;
        margin-top: 6px;
        color: var(--gray);
        font-size: .8rem;
        text-decoration: underline;
      }

      /* ---- Interruptores ---- */

      .filtro__switch {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 7px 0;
        margin: 0;
        color: var(--dark);
        font-size: .9rem;
        cursor: pointer;
      }
      .filtro__switch input { position: absolute; opacity: 0; width: 0; height: 0; }

      .filtro__palanca {
        position: relative;
        flex: 0 0 auto;
        width: 38px;
        height: 21px;
        border-radius: 999px;
        background: #d9d5cc;
        transition: background .18s var(--vx-ease);
      }
      .filtro__palanca::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: var(--marca-superficie);
        transition: transform .18s var(--vx-ease);
      }
      .filtro__switch input:checked + .filtro__palanca { background: var(--success); }
      .filtro__switch input:checked + .filtro__palanca::after { transform: translateX(17px); }
      .filtro__switch input:focus-visible + .filtro__palanca {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 30%, transparent);
      }

      .filtro__aplicar {
        width: 100%;
        height: 44px;
        margin-top: 16px;
        border: 0;
        border-radius: 10px;
        background: var(--primary-dark);
        color: var(--gold-ink);
        font-family: inherit;
        font-size: .92rem;
        font-weight: 700;
        cursor: pointer;
      }

      /* ---- Barra de herramientas ---- */

      .shop-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        flex-wrap: wrap;
        padding: 14px 18px;
        margin-bottom: 18px;
        border: 1px solid var(--light-gray);
        border-radius: 14px;
        background: var(--marca-superficie);
      }

      .shop-toolbar__izq {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .shop-toolbar__count {
        margin: 0;
        color: var(--dark);
        font-size: .92rem;
        font-weight: 600;
        white-space: nowrap;
      }

      /* Cada filtro puesto se ve y se puede quitar de un clic. Un filtro activo
         escondido en un panel plegado es la causa número uno de «la tienda no
         tiene nada». */
      .shop-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 30px;
        padding: 0 12px;
        border-radius: 999px;
        background: #f2efe8;
        color: var(--dark);
        font-size: .82rem;
        font-weight: 600;
        text-decoration: none;
        transition: background .15s var(--vx-ease);
      }
      .shop-chip:hover { background: #e7e2d7; color: var(--dark); }
      .shop-chip span { color: var(--gray); font-size: .9rem; line-height: 1; }

      .shop-toolbar__sort { display: flex; align-items: center; gap: .6rem; }
      .shop-toolbar__sort label { margin: 0; color: var(--gray); font-size: .86rem; }
      .shop-toolbar__sort select {
        height: 42px;
        min-width: 190px;
        padding: 0 34px 0 12px;
        border: 1px solid var(--light-gray);
        border-radius: 10px;
        background: var(--marca-superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236f7787' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
        color: var(--dark);
        font-family: inherit;
        font-size: .88rem;
        appearance: none;
        cursor: pointer;
      }

      /* ---- Rejilla ---- */

      /* Tarjetas más estrechas: con 260 px entraban 3 por fila y ver doce
         costaba cuatro pantallas. Con 200 entran 5 o 6 según el monitor, así
         que la primera tanda cabe casi entera sin bajar.
         `auto-fill` decide cuántas columnas: no se fija un número porque
         dependería del ancho de pantalla, que aquí no se conoce. */
      .shop-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
      }

      .shop-empty {
        grid-column: 1 / -1;
        padding: 70px 20px;
        border: 1px dashed var(--light-gray);
        border-radius: 14px;
        text-align: center;
        color: var(--gray);
      }
      .shop-empty i { font-size: 2rem; opacity: .45; margin-bottom: 12px; display: block; }
      .shop-empty p { margin: 0; font-size: .95rem; }

      /* ---- Tarjeta de producto ---- */

      .vx-pcard {
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 1px solid var(--light-gray);
        border-radius: 14px;
        background: var(--marca-superficie);
        overflow: hidden;
        cursor: pointer;
        transition: border-color .18s var(--vx-ease), box-shadow .18s var(--vx-ease), transform .18s var(--vx-ease);
      }
      .vx-pcard:hover {
        transform: translateY(-3px);
        border-color: var(--marca-linea);
        box-shadow: var(--card-shadow);
      }
      /* El foco lo recibe el enlace del título, pero se marca la tarjeta entera:
         es lo que se abre, y un subrayado en el título se ve poco. */
      .vx-pcard:focus-within:has(.vx-pcard__link:focus-visible) {
        outline: 3px solid var(--dark);
        outline-offset: 2px;
      }
      .vx-pcard__link { color: inherit; text-decoration: none; }
      .vx-pcard__link:focus-visible { outline: none; }
      /* Navegadores sin :has(): el foco se queda en el propio enlace. */
      @supports not selector(:has(*)) {
        .vx-pcard__link:focus-visible { outline: 3px solid var(--dark); outline-offset: 2px; }
      }

      .vx-pcard__media {
        position: relative;
        aspect-ratio: 4 / 3;
        background: var(--marca-fondo);
        overflow: hidden;
      }

      .vx-pcard__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .35s var(--vx-ease);
      }
      .vx-pcard:hover .vx-pcard__img { transform: scale(1.05); }

      .vx-pcard__badges {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 2;
        display: flex;
        gap: 6px;
      }

      .vx-badge {
        padding: 4px 10px;
        border-radius: 7px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .02em;
        color: var(--marca-sobre-primario);
      }
      .vx-badge--desc  { background: #c1392b; }
      .vx-badge--nuevo { background: var(--dark); }

      .fav-heart {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .94);
        color: #b9b3a8;
        font-size: .9rem;
        cursor: pointer;
        box-shadow: 0 2px 8px color-mix(in srgb, var(--marca-primario) 12%, transparent);
        transition: color .15s var(--vx-ease), transform .15s var(--vx-ease);
      }
      .fav-heart:hover { color: #e5484d; transform: scale(1.08); }
      .fav-heart[aria-pressed="true"] { color: #e5484d; }

      .vx-pcard__body {
        display: flex;
        flex-direction: column;
        gap: 7px;
        flex: 1;
        padding: 15px 16px 16px;
      }

      .vx-pcard__cat {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--gray);
      }

      .vx-pcard__title {
        margin: 0;
        font-family: 'Manrope', system-ui, sans-serif;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.35;
        color: var(--dark);
      }

      .vx-pcard__rating {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: .82rem;
        color: var(--gray);
      }
      .vx-pcard__stars { letter-spacing: 1px; font-size: .92rem; }
      .vx-pcard__stars-on  { color: var(--primary-dark); }
      .vx-pcard__stars-off { color: #ddd8ce; }
      .vx-pcard__rating-n { color: var(--dark); font-weight: 600; }

      .vx-pcard__price {
        display: flex;
        align-items: baseline;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 2px;
      }
      .vx-pcard__now {
        font-family: 'Manrope', system-ui, sans-serif;
        font-size: 1.22rem;
        font-weight: 800;
        letter-spacing: -.015em;
        color: var(--dark);
      }
      .vx-pcard__was {
        color: var(--gray);
        font-size: .88rem;
        text-decoration: line-through;
      }

      /* El precio se anuncia sin IVA porque es como se factura aquí; callar el
         importe final solo traslada la sorpresa al carrito. */
      .vx-pcard__iva {
        margin: 0;
        color: var(--gray);
        font-size: .78rem;
      }

      .vx-pcard__meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 2px;
      }

      .vx-pcard__stock {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: .82rem;
        font-weight: 500;
      }
      .vx-pcard__stock::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
      }
      .vx-pcard__stock--ok      { color: var(--success); }
      .vx-pcard__stock--pocas   { color: #8f5c08; }
      .vx-pcard__stock--agotado { color: #b3382b; }

      .vx-pcard__variants {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: .76rem;
        color: var(--gray);
      }

      .vx-pcard__actions {
        display: flex;
        gap: 9px;
        margin-top: auto;
        padding-top: 13px;
      }

      .vx-pcard__add {
        flex: 1;
        height: 44px;
        border: 0;
        border-radius: 10px;
        background: var(--primary-dark);
        color: var(--gold-ink);
        font-family: inherit;
        font-size: .92rem;
        font-weight: 700;
        cursor: pointer;
        transition: background .15s var(--vx-ease);
      }
      .vx-pcard__add:hover:not(:disabled) { background: var(--marca-acento-hondo); }
      .vx-pcard__add:disabled {
        background: #ece9e3;
        color: #a8a49c;
        cursor: not-allowed;
      }

      .vx-pcard__more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex: none;
        border: 1px solid var(--light-gray);
        border-radius: 10px;
        background: var(--marca-superficie);
        color: var(--dark);
        font-size: 1.15rem;
        line-height: 1;
        text-decoration: none;
        transition: background .15s var(--vx-ease), border-color .15s var(--vx-ease);
      }
      .vx-pcard__more:hover { background: var(--marca-fondo); border-color: var(--marca-linea); color: var(--dark); }

      /* Muestras de color de la variante. Las pinta producto.js en los
         productos relacionados; el catálogo ya no las usa, pero la regla se
         queda porque tienda.css lo cargan las dos páginas. */
      .vx-pcard__swatches {
        position: absolute;
        left: 10px; bottom: 10px;
        z-index: 3;
        display: flex; align-items: center; gap: 5px;
        padding: 4px 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .82);
        backdrop-filter: blur(4px);
        box-shadow: 0 3px 10px -4px rgba(0, 0, 0, .3);
      }
      .vx-swatch {
        width: 13px; height: 13px;
        border-radius: 50%;
        border: 1.5px solid #fff;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
      }
      .vx-swatch--more {
        width: auto; height: auto;
        border: none; box-shadow: none;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: .62rem; font-weight: 800;
        color: #5b616e;
        line-height: 1;
        background: transparent;
      }

      /* ---- Pie: recuento y paginación ---- */

      .shop-pie {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 26px;
      }

      .shop-pie__resumen { margin: 0; color: var(--gray); font-size: .88rem; }

      .shop-pager { display: flex; align-items: center; gap: 8px; }

      .shop-pager__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        border: 1px solid var(--light-gray);
        border-radius: 10px;
        background: var(--marca-superficie);
        color: var(--dark);
        font-size: .9rem;
        font-weight: 600;
        text-decoration: none;
        transition: background .15s var(--vx-ease), border-color .15s var(--vx-ease);
      }
      .shop-pager__btn:hover { background: var(--marca-fondo); border-color: var(--marca-linea); color: var(--dark); }
      .shop-pager__btn.is-actual {
        background: var(--dark);
        border-color: var(--dark);
        color: var(--marca-sobre-primario);
      }
      .shop-pager__btn.is-off { opacity: .4; cursor: default; }

      /* ---- Estrecho ---- */

      @media (max-width: 991.98px) {
        .shop-layout { grid-template-columns: 1fr; gap: 16px; }
        .shop-filter-toggle { display: flex; }
        /* Apilada bajo la cabecera, una columna pegajosa taparía los productos
           en vez de acompañarlos. */
        .shop-sidebar { position: static; }
        .shop-filtros { display: none; margin-top: 12px; }
        .shop-filtros.is-open { display: block; }
        .shop-hero__fila { align-items: flex-start; }
      }

      @media (max-width: 767.98px) {
        .shop-wrap { padding: 22px 16px 44px; }
        .shop-hero__titulo { font-size: 1.8rem; }
        .shop-garantias { gap: 20px; }
        .shop-toolbar { align-items: stretch; }
        .shop-toolbar__sort { justify-content: space-between; }
        .shop-toolbar__sort select { flex: 1; min-width: 0; }
      }

      @media (max-width: 575.98px) {
        .shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
        .vx-pcard__body { padding: 12px 12px 13px; gap: 5px; }
        .vx-pcard__title { font-size: .88rem; }
        .vx-pcard__now { font-size: 1.02rem; }
        .vx-pcard__add { height: 40px; font-size: .85rem; }
        .vx-pcard__more { width: 40px; height: 40px; }
      }

      @media (prefers-reduced-motion: reduce) {
        .vx-pcard, .vx-pcard__img, .vx-pcard__add, .fav-heart { transition: none !important; }
        .vx-pcard:hover { transform: none; }
        .vx-pcard:hover .vx-pcard__img { transform: none; }
      }

      /* Corazón en el detalle (cuadrado, junto a Añadir) */
      .fav-heart--detail {
        position: static;
        width: 52px; height: auto;
        align-self: stretch;
        border-radius: 12px;
        border: 1px solid var(--light-gray);
        background: var(--marca-superficie);
        box-shadow: none;
        flex: none;
        font-size: 1.15rem;
      }
      .fav-heart--detail:hover { transform: none; border-color: #f3c3c4; background: #fff5f5; color: #e5484d; }

       /* Favoritos */
       #favoritesModal .modal-content { border: none; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--marca-primario) 45%, transparent); }
       #favoritesModal .modal-header {
         background: var(--marca-primario);
         color: var(--marca-sobre-primario);
         border-bottom: 3px solid var(--primary);
         padding: 1.1rem 1.4rem;
       }
       .favorites-modal__eyebrow, .favorites-hero__eyebrow, .fav-item__label { display: block; font-family: 'Inter', system-ui, sans-serif; font-size: .65rem; font-weight: 800; letter-spacing: .11em; }
       .favorites-modal__eyebrow { color: var(--primary); margin-bottom: .22rem; }
       #favoritesModal .modal-title {
         font-family: 'Manrope', system-ui, sans-serif;
         font-weight: 800;
         display: flex; align-items: center; gap: .5rem;
       }
       #favoritesModal .modal-title i { color: #ef6a6d; }
       .favorites-modal__count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.13); color: var(--marca-sobre-primario); display: inline-flex; align-items: center; justify-content: center; font-family: 'Inter', system-ui, sans-serif; font-size: .7rem; }
       #favoritesModal .modal-header .close {
         border: none; background: rgba(255,255,255,.1); color: var(--marca-sobre-primario);
         width: 32px; height: 32px; border-radius: 50%;
         font-size: 1.5rem; line-height: 1; opacity: .8; cursor: pointer;
       }
       #favoritesModal .modal-header .close:hover { opacity: 1; background: rgba(255,255,255,.2); }
       #favoritesModal .modal-body { padding: .5rem 1.4rem 1rem; }
       .favorites-modal__footer { display: flex; justify-content: center; border-top: 1px solid var(--light-gray); padding: .8rem 1.4rem; }
       .favorites-modal__link { color: var(--primary-dark); font-family: 'Manrope', system-ui, sans-serif; font-size: .88rem; font-weight: 800; text-decoration: none; }
       .favorites-modal__link:hover { color: var(--dark); }

       .fav-empty { text-align: center; max-width: 460px; margin: 0 auto; padding: 58px 20px; color: var(--gray); }
       .fav-empty__icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 20px; background: #fff6f6; color: #e5484d; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; transform: rotate(-8deg); }
       .fav-empty h2 { margin: 0 0 8px; color: var(--dark); font-family: 'Manrope', system-ui, sans-serif; font-size: 1.35rem; font-weight: 800; }
       .fav-empty p { margin: 0; font-size: .94rem; line-height: 1.6; }
       .fav-empty__cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 22px; padding: .7rem 1rem; border-radius: 10px; background: var(--primary); color: var(--gold-ink); font-family: 'Manrope', system-ui, sans-serif; font-size: .86rem; font-weight: 800; text-decoration: none; box-shadow: 0 9px 18px -12px rgba(224, 168, 0, .9); }
       .fav-empty__cta:hover { background: var(--primary-dark); color: var(--gold-ink); transform: translateY(-1px); }

       .fav-item {
         display: flex; align-items: center; gap: 16px;
         padding: 16px 0;
         border-bottom: 1px solid var(--light-gray, var(--marca-linea));
       }
       .fav-item:last-child { border-bottom: none; }
       .fav-item__img {
         width: 82px; height: 92px; flex: none;
         border-radius: 12px; overflow: hidden; background: #f4f2ee;
         display: flex; align-items: center; justify-content: center;
       }
       .fav-item__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; transition: transform .3s var(--vx-ease); }
       .fav-item:hover .fav-item__img img { transform: scale(1.05); }
       .fav-item__info { flex: 1; min-width: 0; }
       .fav-item__label { color: #9298a4; margin-bottom: 4px; }
       .fav-item__name {
         font-family: 'Manrope', system-ui, sans-serif;
         font-weight: 800; color: var(--dark);
         text-decoration: none; display: block; line-height: 1.35;
         display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
       }
       .fav-item__name:hover { color: var(--marca-acento-hondo); }
       .fav-item__price { color: var(--marca-acento-hondo); font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; margin-top: 6px; }
       .fav-item__actions { display: flex; align-items: center; gap: 8px; flex: none; }
       .fav-add { border: none; border-radius: 9px; background: var(--primary); color: var(--gold-ink); min-height: 38px; padding: 0 .85rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-family: 'Manrope', system-ui, sans-serif; font-size: .8rem; font-weight: 800; cursor: pointer; transition: transform .2s var(--vx-ease), background .2s ease; }
       .fav-add:hover { background: var(--primary-dark); transform: translateY(-1px); }
       .fav-remove {
         border: 1px solid #ece8e4; background: var(--marca-superficie); color: #8b919d;
         width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
         display: inline-flex; align-items: center; justify-content: center;
         transition: background .2s ease, color .2s ease, border-color .2s ease;
       }
       .fav-remove:hover { background: #fde8e8; border-color: #f5c8c9; color: #e5484d; }

       .favorites-page { min-height: 60vh; padding: 44px 0 70px; background: linear-gradient(180deg, #fffdf9 0, var(--marca-superficie) 280px); }
       .favorites-breadcrumb { display: flex; align-items: center; gap: .55rem; margin-bottom: 26px; color: #8b919d; font-size: .85rem; }
       .favorites-breadcrumb a { color: var(--dark); font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; text-decoration: none; }
       .favorites-breadcrumb a:hover { color: var(--primary-dark); }
       .favorites-hero { display: flex; align-items: center; gap: 18px; padding: 27px 30px; border: 1px solid #ece8e0; border-radius: 20px; background: var(--marca-superficie); box-shadow: 0 18px 38px -30px color-mix(in srgb, var(--marca-primario) 50%, transparent); }
       .favorites-hero__icon { width: 62px; height: 62px; flex: none; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: #fff2f2; color: #e5484d; font-size: 1.45rem; }
       .favorites-hero__eyebrow { color: var(--primary-dark); margin-bottom: 4px; }
       .favorites-hero h1 { margin: 0; color: var(--dark); font-family: 'Manrope', system-ui, sans-serif; font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 800; }
       .favorites-hero p { margin: 4px 0 0; color: var(--marca-tenue); font-size: .93rem; }
       .favorites-hero__count { margin-left: auto; padding: .62rem .85rem; border-radius: 999px; background: #f5f3ef; color: #565d6b; font-family: 'Inter', system-ui, sans-serif; font-size: .78rem; font-weight: 700; white-space: nowrap; }
       .favorites-list { margin-top: 22px; padding: 4px 26px; border: 1px solid #ece8e0; border-radius: 18px; background: var(--marca-superficie); }
       .favorites-list .fav-item { padding: 20px 0; }
       .favorites-list .fav-item__img { width: 100px; height: 112px; }
       .favorites-list .fav-item__name { font-size: 1.03rem; }
       .favorites-list .fav-add { min-height: 42px; padding: 0 1rem; }

       @media (max-width: 575.98px) {
         #favoritesModal .modal-dialog { margin: .75rem; }
         #favoritesModal .modal-body { padding: .4rem 1rem .8rem; }
         .fav-item { align-items: flex-start; gap: 12px; }
         .fav-item__img { width: 68px; height: 78px; }
         .fav-item__actions { align-self: center; gap: 6px; }
         .fav-add { width: 38px; padding: 0; }
         .fav-add span { display: none; }
         .favorites-page { padding: 26px 0 50px; }
         .favorites-hero { align-items: flex-start; flex-wrap: wrap; padding: 22px; gap: 14px; }
         .favorites-hero__icon { width: 50px; height: 50px; border-radius: 15px; font-size: 1.15rem; }
         .favorites-hero p { font-size: .87rem; }
         .favorites-hero__count { width: 100%; margin-left: 0; text-align: center; }
         .favorites-list { margin-top: 15px; padding: 3px 16px; }
         .favorites-list .fav-item__img { width: 76px; height: 88px; }
       }

      /* Ocultar el carrito flotante en escritorio (el navbar ya tiene el icono) */
      @media (min-width: 1200px) {
        .floating-cart-btn { display: none; }
      }

      /* Botón "Volver" (compartido detalle + carrito) */
      .product-back {
        display: inline-flex; align-items: center; gap: .55rem;
        margin-bottom: 22px;
        padding: .55rem 1.1rem .55rem .9rem;
        background: var(--marca-superficie); border: 1px solid var(--light-gray); border-radius: 999px;
        color: var(--dark);
        font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: .9rem;
        text-decoration: none; box-shadow: var(--card-shadow);
        transition: color .2s var(--vx-ease), border-color .2s var(--vx-ease), transform .2s var(--vx-ease);
      }
      .product-back i { color: var(--primary-dark); transition: transform .2s var(--vx-ease); }
      .product-back:hover { color: var(--marca-acento-hondo); border-color: var(--primary); transform: translateX(-2px); }
      .product-back:hover i { transform: translateX(-3px); }

      /* ==================================================================
         PÁGINA DE CARRITO (tipo Shein): artículos + resumen lateral
         ================================================================== */
      .cart-head { margin-bottom: 28px; }
      .cart-head .product-back { margin-bottom: 14px; }
      .cart-title {
        font-family: 'Manrope', system-ui, sans-serif;
        font-size: 2rem; font-weight: 800; color: var(--dark);
        margin: 0; letter-spacing: -.01em;
      }

      /* Vacío */
      .cart-empty {
        text-align: center;
        background: var(--marca-superficie);
        border: 1px solid var(--light-gray);
        border-radius: 20px;
        padding: 64px 24px;
        box-shadow: var(--card-shadow);
      }
      .cart-empty i { font-size: 3.2rem; color: #e6e3db; margin-bottom: 18px; }
      .cart-empty h2 { font-family: 'Manrope', system-ui, sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--dark); margin: 0 0 .4rem; }
      .cart-empty p { color: var(--gray); margin: 0 0 1.5rem; }
      .cart-empty__btn {
        display: inline-block;
        background: var(--primary); color: var(--gold-ink);
        font-family: 'Manrope', system-ui, sans-serif; font-weight: 700;
        text-decoration: none; padding: 12px 28px; border-radius: 12px;
        transition: background .2s var(--vx-ease), transform .2s var(--vx-ease);
      }
      .cart-empty__btn:hover { background: var(--primary-dark); color: var(--gold-ink); transform: translateY(-2px); }

      /* Layout */
      .cart-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 30px;
        align-items: start;
      }
      .cart-main {
        background: var(--marca-superficie);
        border: 1px solid var(--light-gray);
        border-radius: 18px;
        padding: 8px 22px 12px;
        box-shadow: var(--card-shadow);
      }
      .cart-main__head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 16px 0 14px;
        border-bottom: 1px solid var(--light-gray);
      }
      .cart-main__title { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--dark); margin: 0; }
      .cart-clear {
        border: none; background: transparent; cursor: pointer;
        color: #b0546a; font-weight: 600; font-size: .86rem;
        display: inline-flex; align-items: center; gap: .4rem;
        transition: color .2s var(--vx-ease);
      }
      .cart-clear:hover { color: #e5484d; }

      /* Línea de artículo */
      .cart-line {
        display: flex;
        gap: 16px;
        padding: 20px 0;
        border-bottom: 1px solid var(--light-gray);
      }
      .cart-line:last-child { border-bottom: none; }
      .cart-line__img {
        width: 92px; height: 92px; flex: none;
        border-radius: 12px; overflow: hidden; background: var(--marca-fondo);
        display: flex; align-items: center; justify-content: center;
      }
      .cart-line__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
      .cart-line__img i { font-size: 1.8rem; color: #cfcabd; }
      .cart-line__body {
        flex: 1; min-width: 0;
        display: flex; align-items: center; justify-content: space-between;
        gap: 16px; flex-wrap: wrap;
      }
      .cart-line__info { min-width: 0; flex: 1 1 200px; }
      .cart-line__name {
        font-family: 'Manrope', system-ui, sans-serif; font-weight: 700;
        color: var(--dark); font-size: 1rem; margin-bottom: 4px;
      }
      .cart-line__price .cart-line__now { color: var(--marca-acento-hondo); font-weight: 700; }
      .cart-line__price .cart-line__old { color: var(--gray); text-decoration: line-through; font-size: .85rem; margin-right: .4rem; }
      .cart-line__stock { display: block; font-size: .78rem; color: var(--gray); margin-top: 2px; }
      .cart-line__variants { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
      .cart-line__attr {
        font-size: .74rem; color: #5b6270;
        background: #f4f2ec; border-radius: 7px; padding: 3px 9px; line-height: 1.4;
      }
      .cart-line__attr b { font-weight: 600; color: #3a4051; }
      .cart-line__controls { display: flex; align-items: center; gap: 16px; flex: none; }

      /* Stepper de cantidad */
      .cart-qty {
        display: inline-flex; align-items: stretch;
        border: 1px solid var(--light-gray); border-radius: 10px; overflow: hidden;
      }
      .cart-qty__btn {
        width: 34px; border: none; background: var(--marca-fondo); color: var(--dark);
        font-size: 1.05rem; font-weight: 700; cursor: pointer;
        transition: background .2s var(--vx-ease), color .2s var(--vx-ease);
      }
      .cart-qty__btn:hover { background: var(--primary); color: var(--gold-ink); }
      .cart-qty__input {
        width: 44px; border: none;
        border-left: 1px solid var(--light-gray); border-right: 1px solid var(--light-gray);
        text-align: center; font-weight: 700; color: var(--dark);
        -moz-appearance: textfield;
      }
      .cart-qty__input::-webkit-outer-spin-button,
      .cart-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
      .cart-qty__input:focus { outline: none; }
      .cart-line__total { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; color: var(--dark); min-width: 92px; text-align: right; }
      .cart-line__remove {
        border: none; background: var(--marca-fondo); color: #b0546a;
        width: 36px; height: 36px; border-radius: 9px; cursor: pointer; flex: none;
        transition: background .2s var(--vx-ease), color .2s var(--vx-ease);
      }
      .cart-line__remove:hover { background: #fde8e8; color: #e5484d; }

      /* Resumen lateral */
      .cart-summary { position: sticky; top: 96px; }
      .cart-summary__card {
        background: var(--marca-superficie);
        border: 1px solid var(--light-gray);
        border-radius: 18px;
        padding: 24px;
        box-shadow: var(--card-shadow);
      }
      .cart-summary__title {
        font-family: 'Manrope', system-ui, sans-serif; font-weight: 800;
        font-size: 1.2rem; color: var(--dark); margin: 0 0 18px;
      }

      /* Cupón */
      .cart-coupon { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--light-gray); }
      .cart-coupon__label { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; color: var(--dark); margin-bottom: .6rem; }
      .cart-coupon__label i { color: var(--primary-dark); }
      .cart-coupon__row { display: flex; gap: 8px; }
      .cart-coupon__row .form-control {
        flex: 1; height: 44px; border: 1px solid var(--light-gray); border-radius: 10px;
        padding: 10px 12px; font-size: .9rem;
      }
      .cart-coupon__row .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 18%, transparent); }
      .cart-coupon__apply {
        flex: none; border: 1.5px solid var(--primary); background: var(--marca-superficie); color: var(--marca-acento-hondo);
        border-radius: 10px; padding: 0 18px; font-weight: 700; cursor: pointer;
        transition: background .2s var(--vx-ease), color .2s var(--vx-ease);
      }
      .cart-coupon__apply:hover { background: var(--primary); color: var(--gold-ink); }
      .cart-coupon__remove { margin-top: 8px; border: none; background: transparent; color: #e5484d; font-size: .84rem; font-weight: 600; cursor: pointer; }
      .cart-coupon__feedback { font-size: .82rem; margin-top: 8px; color: var(--gray); }
      .cart-coupon__feedback.text-success, .cart-coupon__feedback .text-success { color: var(--success) !important; }

      /* Totales */
      .cart-sum__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: .94rem; color: #48505f; }
      .cart-sum__discount { color: var(--success); font-weight: 600; }
      .cart-sum__total {
        margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--light-gray);
        font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--dark);
      }
      .cart-sum__total #total { color: var(--marca-acento-hondo); }

      #checkout-btn.cart-checkout {
        width: 100%; margin-top: 20px;
        display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
        background: var(--primary); color: var(--gold-ink);
        border: none; border-radius: 12px; padding: 15px 20px;
        font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 1.02rem;
        cursor: pointer;
        box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--marca-acento) 90%, transparent);
        transition: background .2s var(--vx-ease), transform .2s var(--vx-ease), box-shadow .2s var(--vx-ease);
      }
      #checkout-btn.cart-checkout:hover { background: var(--primary-dark); color: var(--gold-ink); transform: translateY(-2px); box-shadow: 0 18px 34px -12px color-mix(in srgb, var(--marca-acento) 100%, transparent); }
      #checkout-btn.cart-checkout i { font-size: .9rem; }
      .cart-sum__info { font-size: .76rem; color: var(--gray); line-height: 1.5; margin: 14px 0 0; }

      /* Opciones de usuario */
      .cart-useropts {
        background: var(--marca-superficie); border: 1px solid var(--light-gray); border-radius: 18px;
        padding: 32px; box-shadow: var(--card-shadow); text-align: center;
      }
      .cart-useropts__back {
        border: none; background: var(--marca-fondo); color: var(--dark);
        border-radius: 10px; padding: 8px 16px; font-weight: 600; cursor: pointer;
        display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 18px;
      }
      .cart-useropts h5 { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; color: var(--dark); margin-bottom: 24px; }
      .cart-useropts__grid { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
      .cart-useropts__opt {
        flex: 1 1 220px; max-width: 280px;
        border: 1px solid var(--light-gray); border-radius: 14px; padding: 28px 20px;
        text-decoration: none; color: var(--dark);
        transition: border-color .2s var(--vx-ease), transform .2s var(--vx-ease), box-shadow .2s var(--vx-ease);
      }
      .cart-useropts__opt:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--card-shadow); }
      .cart-useropts__opt i { font-size: 1.8rem; color: var(--primary-dark); margin-bottom: 12px; }
      .cart-useropts__opt h6 { font-weight: 700; color: var(--dark); margin: 0; }

      @media (max-width: 991.98px) {
        .cart-layout { grid-template-columns: 1fr; }
        .cart-summary { position: static; }
      }
      @media (max-width: 575.98px) {
        .cart-line { flex-wrap: wrap; }
        .cart-line__body { gap: 12px; }
        .cart-line__controls { width: 100%; justify-content: space-between; }
        .cart-title { font-size: 1.6rem; }
      }

      /* User Modal Tabs */
      #userModal .nav-tabs {
        border-bottom: 2px solid rgba(222, 226, 230, 0.5);
        margin-bottom: 1.5rem;
      }

      #userModal .nav-tabs .nav-link {
        border: none;
        color: var(--dark);
        font-weight: 500;
        padding: 0.75rem 1.25rem;
        transition: var(--transition);
        position: relative;
        margin-right: 0.5rem;
        border-radius: 0.5rem 0.5rem 0 0;
      }

      #userModal .nav-tabs .nav-link:hover {
        color: var(--primary);
        background-color: rgba(78, 115, 223, 0.05);
      }

      #userModal .nav-tabs .nav-link.active {
        color: var(--primary);
        background-color: transparent;
      }

      #userModal .nav-tabs .nav-link.active::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 3px;
        background-color: var(--primary);
        border-radius: 3px 3px 0 0;
      }

      /* Table Styles */
      #userModal .table {
        border-collapse: separate;
        border-spacing: 0 0.5rem;
      }

      #userModal .table th {
        border-top: none;
        font-weight: 600;
        font-size: 0.8125rem;
        text-transform: uppercase;
        color: var(--medium-gray);
        letter-spacing: 0.5px;
        padding: 0.75rem 1rem;
        background-color: var(--light-gray);
      }

      #userModal .table td {
        vertical-align: middle;
        padding: 1rem;
        background-color: var(--white);
        border-top: 1px solid rgba(0, 0, 0, 0.03);
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
      }

      #userModal .table tr:first-child td {
        border-top: 1px solid rgba(0, 0, 0, 0.05);
      }

      #userModal .table tr:hover td {
        background-color: rgba(78, 115, 223, 0.02);
      }

      /* Profile Form Styles */
      #profileForm label {
        font-weight: 500;
        color: var(--dark);
        margin-bottom: 0.5rem;
        display: block;
      }

      #profileForm .form-control {
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        border: 1px solid rgba(0, 0, 0, 0.1);
        transition: var(--transition);
      }

      #profileForm .form-control:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
      }

      #profileForm .form-group {
        margin-bottom: 1.25rem;
      }

      .form-row {
        display: flex;
        gap: 1rem;
      }
      
      .form-row .form-group {
        flex: 1;
      }

      /* Responsive Adjustments */
      @media (max-width: 768px) {
        #userModal .modal-dialog {
          margin: 0.5rem auto;
          max-width: 95%;
        }
        
        #profileForm .col-md-4 {
          margin-bottom: 1.5rem;
        }
        
        #userModal .nav-tabs {
          flex-wrap: nowrap;
          overflow-x: auto;
          padding-bottom: 0.5rem;
          -webkit-overflow-scrolling: touch;
        }
        
        #userModal .nav-tabs .nav-link {
          white-space: nowrap;
          font-size: 0.875rem;
          padding: 0.5rem 0.75rem;
        }

        .form-row {
          flex-direction: column;
          gap: 0;
        }
      }

      /* Accessibility Improvements */
      #userModal .nav-tabs .nav-link:focus {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
      }

      .user-avatar-nav:focus {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
      }

      /* Animation for better UX */
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }

      #userModal .tab-pane {
        animation: fadeIn 0.3s ease-out;
      }

      /* Añadir estos estilos en la sección de estilos del modal de usuario */
      .password-strength {
        height: 4px;
        background: var(--marca-linea);
        border-radius: 2px;
        margin-top: 0.5rem;
        overflow: hidden;
      }
      
      .strength-meter {
        height: 100%;
        width: 0;
        background: var(--error);
        transition: var(--transition);
      }
      
      .password-hints {
        margin-top: 0.5rem;
        font-size: 0.8rem;
        color: var(--gray);
      }
      
      .password-hints ul {
        padding-left: 1.25rem;
        margin-top: 0.25rem;
      }
      
      .password-hints li {
        margin-bottom: 0.25rem;
      }
      
      .password-hints .valid {
        color: var(--success);
      }
      
      .error-message {
        color: var(--error);
        font-size: 0.85rem;
        margin-top: 0.5rem;
        display: none;
      }
      
      .is-invalid {
        border-color: var(--error) !important;
      }
      .toggle-password-btn {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--gray);
        cursor: pointer;
        transition: var(--transition);
        padding: 0.5rem;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .toggle-password-btn:hover {
        color: var(--primary);
        background-color: color-mix(in srgb, var(--marca-acento) 10%, transparent);
      }

      /* ==================================================================
         Modal de variantes al añadir desde el catálogo (tipo Shein)
         ================================================================== */
      body.gcvm-open { overflow: hidden; }
      .gcvm {
        position: fixed; inset: 0; z-index: 1200;
        display: flex; align-items: flex-end; justify-content: center;
      }
      .gcvm[hidden] { display: none; }
      .gcvm__backdrop {
        position: absolute; inset: 0;
        background: rgba(17, 20, 30, .55);
        opacity: 0; transition: opacity .22s var(--vx-ease, ease);
      }
      .gcvm.is-open .gcvm__backdrop { opacity: 1; }
      .gcvm__panel {
        position: relative;
        width: 100%; max-width: 460px;
        max-height: 88vh; overflow-y: auto;
        background: var(--marca-superficie);
        border-radius: 22px 22px 0 0;
        padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -20px 50px -18px rgba(0, 0, 0, .45);
        transform: translateY(100%);
        transition: transform .28s var(--vx-ease, cubic-bezier(.4,0,.2,1));
      }
      .gcvm.is-open .gcvm__panel { transform: translateY(0); }
      .gcvm__close {
        position: absolute; top: 12px; right: 12px;
        width: 34px; height: 34px; border: none; border-radius: 50%;
        background: var(--marca-fondo); color: #5b616e;
        font-size: 1.4rem; line-height: 1; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
        transition: background .2s ease, color .2s ease;
      }
      .gcvm__close:hover { background: var(--marca-linea); color: var(--dark, var(--marca-texto)); }

      .gcvm__head { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; padding-right: 34px; }
       .gcvm__img {
         width: 72px; height: 92px; flex: none;
         object-fit: contain; padding: 5px; border-radius: 12px; background: #f4f2ee;
      }
      .gcvm__title {
        margin: 0 0 6px;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: .98rem; font-weight: 600; line-height: 1.3;
        color: var(--dark, var(--marca-texto));
      }
      .gcvm__price { display: flex; align-items: baseline; gap: 8px; }
      .gcvm__price .vx-pcard__now { font-size: 1.15rem; }

      .gcvm__groups { display: flex; flex-direction: column; gap: 18px; margin: 18px 0 22px; }
      .gcvm-group__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
      .gcvm-group__name {
        font-family: 'Manrope', system-ui, sans-serif;
        font-weight: 800; font-size: .95rem; color: var(--dark, var(--marca-texto));
      }
      .gcvm-group__sel { font-size: .85rem; color: #6b7180; font-weight: 600; }
      .gcvm-group.is-missing .gcvm-group__name { color: var(--danger, #e5484d); }

      .gcvm-opts { display: flex; flex-wrap: wrap; gap: 10px; }
      .gcvm-opt { border: none; background: none; cursor: pointer; padding: 0; }

      /* Opción de color */
      .gcvm-opt--color {
        width: 38px; height: 38px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e6e4df;
        transition: box-shadow .18s var(--vx-ease, ease), transform .18s var(--vx-ease, ease);
      }
      .gcvm-opt--color > span { width: 26px; height: 26px; border-radius: 50%; display: block; }
      .gcvm-opt--color:hover { transform: scale(1.06); }
      .gcvm-opt--color.is-selected { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--primary, var(--marca-acento)); }

      /* Opción tipo pastilla (talla, tamaño…) */
      .gcvm-opt--pill {
        min-width: 52px;
        padding: 10px 16px;
        border-radius: 11px;
        border: 1.5px solid #e6e4df;
        background: var(--marca-superficie);
        font-family: 'Inter', system-ui, sans-serif;
        font-size: .9rem; font-weight: 600; color: var(--dark, var(--marca-texto));
        transition: border-color .18s var(--vx-ease, ease), background .18s var(--vx-ease, ease), color .18s var(--vx-ease, ease);
      }
      .gcvm-opt--pill:hover { border-color: var(--gold-soft, var(--marca-acento)); }
      .gcvm-opt--pill.is-selected {
        border-color: var(--primary, var(--marca-acento));
        background: color-mix(in srgb, var(--marca-acento) 12%, transparent);
        color: var(--primary-dark, var(--marca-acento-hondo));
      }
      .gcvm-group.is-missing .gcvm-opts { animation: gcvmShake .3s ease; }
      @keyframes gcvmShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

      .gcvm__confirm {
        width: 100%;
        padding: 15px;
        border: none; border-radius: 13px;
        background: var(--primary, var(--marca-acento));
        color: var(--gold-ink, var(--marca-texto));
        font-family: 'Manrope', system-ui, sans-serif;
        font-weight: 800; font-size: 1rem;
        cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; gap: 9px;
        box-shadow: 0 12px 26px -12px rgba(224, 168, 0, .9);
        transition: background .2s ease, transform .15s ease;
      }
      .gcvm__confirm:hover { background: var(--gold-hi, var(--marca-acento-hondo)); }
      .gcvm__confirm:active { transform: scale(.98); }

      @media (min-width: 560px) {
        .gcvm { align-items: center; }
        .gcvm__panel { border-radius: 22px; transform: translateY(16px) scale(.98); }
        .gcvm.is-open .gcvm__panel { transform: translateY(0) scale(1); }
      }
      @media (prefers-reduced-motion: reduce) {
        .gcvm__backdrop, .gcvm__panel { transition: none !important; }
        .gcvm-group.is-missing .gcvm-opts { animation: none !important; }
      }

      /* Ajustes de interfaz: acceso y cabecera del carrito */
      .cart-page { padding-top: 58px; padding-bottom: 64px; }

      #loginModal .modal-content {
        border: 0;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 24px 60px -22px color-mix(in srgb, var(--marca-primario) 45%, transparent);
      }
      #loginModal .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .9rem 1.1rem;
        border: 0;
        background: var(--marca-primario);
      }
      #loginModal .close {
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 50%;
        background: rgba(255,255,255,.1);
        color: var(--marca-sobre-primario);
        font-size: 1.45rem;
        line-height: 1;
        cursor: pointer;
      }
      #loginModal .close:hover { background: rgba(255,255,255,.2); }
      .login-choice-modal__eyebrow {
        color: var(--primary);
        font-family: 'Inter', system-ui, sans-serif;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .14em;
      }
      .login-choice-modal__body { padding: 34px 32px 30px; text-align: center; }
      .login-choice-modal__icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 16px;
        border-radius: 18px;
        background: #fff4d3;
        color: var(--marca-acento-hondo);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.7rem;
      }
      .login-choice-modal__body .modal-title {
        margin: 0;
        color: var(--dark);
        font-family: 'Manrope', system-ui, sans-serif;
        font-size: 1.3rem;
        font-weight: 800;
      }
      .login-choice-modal__body p {
        margin: 8px auto 24px;
        max-width: 310px;
        color: var(--gray);
        font-size: .93rem;
        line-height: 1.55;
      }
      .login-choice-modal__actions { display: grid; gap: 10px; }
      .login-choice-modal__login,
      .login-choice-modal__register {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        border-radius: 10px;
        font-family: 'Manrope', system-ui, sans-serif;
        font-size: .9rem;
        font-weight: 800;
        text-decoration: none;
      }
      .login-choice-modal__login {
        background: var(--primary);
        color: var(--gold-ink);
        box-shadow: 0 10px 18px -14px rgba(224,168,0,.9);
      }
      .login-choice-modal__login:hover { background: var(--primary-dark); color: var(--gold-ink); transform: translateY(-1px); }
      .login-choice-modal__register { border: 1px solid var(--light-gray); color: var(--dark); }
      .login-choice-modal__register:hover { border-color: var(--primary); color: var(--marca-acento-hondo); background: #fffdf5; }

/* Recuento junto a cada faceta (2026-08-31).
   Evita el clic en vacío: se ve cuántos productos hay detrás antes de marcar,
   y una casilla con «0» no llega a pintarse porque la consulta no la devuelve. */
.filtro__cuenta {
  margin-left: auto;
  font-size: .76rem;
  color: var(--tenue, #9ca3af);
  font-variant-numeric: tabular-nums;
}
.filtro__check { display: flex; align-items: center; gap: 8px; }

/* ===========================================================================
   Página de marca (2026-08-31)
   =========================================================================== */

.marca-cabecera {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.marca-logo {
  max-width: 120px;
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
}
.marca-cabecera__texto { flex: 1 1 320px; min-width: 0; }

.marca-sitio { margin: 8px 0 0; font-size: .88rem; }
.marca-sitio a { color: var(--acento, var(--marca-acento-hondo)); }

/* Barra de categorías: es la navegación natural de una marca. Se desplaza en
   horizontal en móvil en vez de romper a varias líneas, que descolocaría el
   resto de la página cada vez que una marca tiene muchas categorías. */
.marca-categorias {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px;
  margin-bottom: 8px;
  scrollbar-width: thin;
}
.marca-categoria {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--linea, #e5e7eb);
  border-radius: 999px;
  font-size: .88rem;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  background: var(--marca-superficie);
}
.marca-categoria:hover { background: var(--suave, #f3f4f6); }
.marca-categoria.is-activa {
  background: var(--tinta, #111827);
  border-color: var(--tinta, #111827);
  color: var(--marca-sobre-primario);
}
.marca-categoria span {
  font-size: .78rem;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

/* Aviso de marca inexistente o error: ocupa la página entera para que no
   parezca que el contenido está más abajo. */
.shop-aviso {
  max-width: 640px;
  margin: 60px auto;
  text-align: center;
  padding: 0 20px;
}
.shop-aviso h1 { font-size: 1.5rem; margin-bottom: 12px; }
.shop-aviso p { color: var(--tenue, var(--marca-tenue)); margin-bottom: 12px; }
.shop-boton {
  display: inline-block;
  padding: 10px 20px;
  background: var(--tinta, #111827);
  color: var(--marca-sobre-primario);
  border-radius: 8px;
  text-decoration: none;
}
.shop-vacio { padding: 40px 0; text-align: center; color: var(--tenue, var(--marca-tenue)); }

/* Árbol de categorías en el filtro y migas (2026-09-01) */
.filtro__cat.es-hija { font-size: .88em; }
.filtro__cat.es-hija span { color: var(--tenue, var(--marca-tenue)); }

.shop-migas-cat {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 8px 0 4px;
  font-size: .88rem;
  color: var(--tenue, var(--marca-tenue));
}
.shop-migas-cat a { color: var(--acento, var(--marca-acento-hondo)); text-decoration: none; }
.shop-migas-cat a:hover { text-decoration: underline; }
.shop-migas-cat [aria-current] { color: inherit; font-weight: 600; }


      /* ---- Carga progresiva ---- */

      .shop-mas {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 26px 0 8px;
      }

      .shop-mas__btn {
        padding: 11px 30px;
        border: 1px solid var(--primary, var(--marca-acento-hondo));
        border-radius: 999px;
        background: transparent;
        /* El ámbar como color de texto no se lee sobre fondo claro (1,5:1): va
           en el borde, y el texto en oscuro. */
        color: var(--dark);
        font-size: .92rem;
        font-weight: 600;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
      }
      .shop-mas__btn:hover:not(:disabled) { background: var(--primary, var(--marca-acento-hondo)); color: var(--dark); }
      .shop-mas__btn:disabled { opacity: .6; cursor: progress; }

      /* Que se acabaron los productos se dice, no se deja en silencio: si no,
         no se distingue de una carga que se ha quedado colgada. */
      .shop-mas__aviso {
        margin: 0;
        font-size: .85rem;
        color: var(--gray, var(--marca-tenue));
        text-align: center;
      }
      .shop-mas__aviso--error { color: var(--danger, #c0392b); }

      /* ---- Aviso de sesión dentro del carrito ---- */
      /* Va aquí y no como modal al cargar: solo lo ve quien abre el carrito,
         que es cuando la pregunta viene a cuento. */
      .cart-need-login {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        margin: 14px auto 0;
        max-width: 46ch;
        padding: 10px 14px;
        border-radius: 10px;
        background: var(--light, var(--marca-fondo));
        font-size: .88rem;
        color: var(--gray, var(--marca-tenue));
      }
      .cart-need-login a {
        /* El ámbar como texto no se lee sobre fondo claro (1,5:1). */
        color: var(--dark);
        font-weight: 600;
        text-decoration: underline;
      }

/* ---- Colores del producto en la tarjeta del catálogo ----
   Van en el cuerpo y no flotando sobre la foto —eso ya lo hace
   `.vx-pcard__swatches` en los relacionados—: aquí son botones de verdad, hay
   que poder pulsarlos y verlos enfocados. */
.vx-pcard__colores {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 6px 0 0;
}
/* El botón mide 24×24 (lo mínimo para acertar con el dedo) y el círculo que
   se ve sigue siendo de 16: se dibuja en el ::before. Antes el botón entero
   medía 16 px y en móvil se pulsaba el de al lado. */
.vx-pcard__swatch {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.vx-pcard__swatch::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: var(--muestra, transparent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .16);
  transition: transform .12s ease, box-shadow .12s ease;
}
.vx-pcard__swatch:hover::before,
.vx-pcard__swatch:focus-visible::before {
  transform: scale(1.18);
  box-shadow: 0 0 0 2px var(--vx-gold, var(--marca-acento-hondo));
}
/* Un color sin código declarado no se inventa: se marca el hueco. */
.vx-pcard__swatch[style*="transparent"]::before {
  background: repeating-linear-gradient(45deg, var(--marca-superficie), var(--marca-superficie) 3px, #e2e0da 3px, #e2e0da 6px);
}
.vx-pcard__swatch-mas {
  font-size: .68rem;
  font-weight: 700;
  color: #616773;
  line-height: 1;
}

/* ===========================================================================
   Tarjeta de producto, sistema visual de la portada (2026-10-29)

   Mismo marcado y mismo contrato de clases que antes: solo cambia el aspecto,
   para que el catálogo, la ficha (relacionados) y las marcas se parezcan a los
   carriles de la portada. Foto contenida sobre crema —una foto de producto
   recortada por `cover` se queda sin la mitad del producto—, una sola marca
   en forma de pastilla y el botón en ámbar con icono.
   =========================================================================== */
.vx-pcard { border-color: #ecebe6; border-radius: 16px; }
.vx-pcard:hover { border-color: transparent; box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--marca-primario) 50%, transparent); }
.vx-pcard__media {
  aspect-ratio: 1 / .82;
  margin: 6px 6px 0;
  border-radius: 12px;
  background: #f4f3ef;
}
.vx-pcard__img { object-fit: contain; padding: 12px; }
.vx-pcard__sinfoto { width: 100%; height: 100%; display: grid; place-items: center; color: #c9ccd3; font-size: 2.4rem; }
/* El corazón a la izquierda y la marca a la derecha, como en la portada. */
.vx-pcard .fav-heart { left: 8px; right: auto; top: 8px; width: 32px; height: 32px; font-size: .85rem; }
.vx-pcard__badges { top: 8px; left: auto; right: 8px; }
.vx-badge {
  border-radius: 999px;
  padding: .22rem .6rem;
  font-family: inherit; font-size: .7rem; font-weight: 800; letter-spacing: 0;
}
.vx-badge--desc  { background: #e5484d; }
.vx-badge--nuevo { background: var(--vx-gold, var(--marca-acento)); color: var(--vx-gold-ink, var(--marca-texto)); }
.vx-pcard__body { padding: 12px 14px 14px; gap: 6px; }
.vx-pcard__cat { font-family: inherit; font-size: .66rem; font-weight: 700; letter-spacing: .08em; color: var(--marca-tenue); }
.vx-pcard__title { font-size: .95rem; font-weight: 800; line-height: 1.28; }
.vx-pcard__title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vx-pcard__title a:hover { color: var(--vx-accent, var(--marca-acento-hondo)); }
.vx-pcard__now { font-size: 1.15rem; }
.vx-pcard__price:has(.vx-pcard__was) .vx-pcard__now { color: #c62f35; }
.vx-pcard__actions { padding-top: 10px; }
.vx-pcard__add {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 42px;
  border-radius: 999px;
  background: var(--vx-gold, var(--marca-acento));
  color: var(--vx-gold-ink, var(--marca-texto));
  font-weight: 800;
  box-shadow: none;
}
.vx-pcard__add:hover:not(:disabled) { background: var(--vx-gold-hi, var(--marca-acento-hondo)); }
.vx-pcard__add:disabled { box-shadow: none; }
.vx-pcard__more { width: 42px; height: 42px; border-radius: 50%; border-color: #ecebe6; }
.vx-pcard__variants { font-family: inherit; font-size: .74rem; white-space: nowrap; }
@media (max-width: 575.98px) {
  .vx-pcard__add { height: 38px; font-size: .8rem; gap: .35rem; }
  .vx-pcard__more { display: none; }   /* sin sitio; la tarjeta entera ya abre la ficha */
}

/* Aviso de sesión dentro del carrito vacío: `.cart-empty i` y `.cart-empty p`
   le ponían el icono a 3,2 rem y le quitaban el margen automático, y salía
   como una caja suelta a la izquierda. */
.cart-empty .cart-need-login { margin: 1.4rem auto 0; }
.cart-empty .cart-need-login i { font-size: 1rem; color: var(--vx-accent, var(--marca-acento-hondo)); margin: 0; }

/* Carrito con el sistema de la portada (2026-10-29): importes en tinta y la
   oferta en rojo. El ámbar como color de texto no se lee sobre blanco (1,5:1);
   se queda para los botones. */
.cart-line__price .cart-line__now { color: var(--vx-ink, var(--marca-texto)); font-weight: 800; }
.cart-line__price .cart-line__old + .cart-line__now { color: #c62f35; }
.cart-sum__total #total { color: var(--vx-ink, var(--marca-texto)); }
.cart-page { padding-top: 32px; }
.cart-main, .cart-summary__card, .cart-empty { border-color: #ecebe6; }
#checkout-btn.cart-checkout { border-radius: 999px; }
.cart-coupon__apply { border-radius: 999px; }
/* El selector de cantidad no se encoge: en móvil, con `overflow: hidden`, la
   fila le quitaba ancho y solo quedaba el «−». */
.cart-qty { flex: none; border-radius: 999px; }
.cart-qty__btn, .cart-qty__input { flex: none; min-height: 36px; }
@media (max-width: 575.98px) {
  .cart-line__controls { gap: 8px; }
  .cart-line__total { min-width: 0; margin-left: auto; font-size: .92rem; white-space: nowrap; }
  .cart-line__img { width: 72px; height: 72px; }
}

/* Carrito sin sesión (2026-10-29): notas en el resumen. */
.cart-guest-nota {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .15rem .55rem;
  margin: 0 0 1rem; padding: .7rem .85rem;
  border-radius: 12px;
  background: #f6f4ee;
  font-size: .82rem; line-height: 1.45; color: var(--vx-muted, var(--marca-tenue));
}
.cart-guest-nota i { color: var(--vx-accent, var(--marca-acento-hondo)); margin-top: .2rem; }
.cart-guest-nota a { grid-column: 2; justify-self: start; }
.cart-guest-nota a { color: var(--vx-ink, var(--marca-texto)); font-weight: 700; text-decoration: underline; }
.cart-guest-nota--pago { margin: .9rem 0 0; }