/* Lista de deseos - REEMPLAZO COMPLETO del CSS de blockwishlist.
   Disenos 10a / 10b / 10c de "Mi Cuenta PrestaShop.dc.html".

   TODO ESTA EN EL TEMA. No se modifica ni un archivo del modulo, y no hay nada
   en override/. Son solo dos archivos, los dos dentro de themes/theshopgamer/:
     modules/blockwishlist/public/wishlist.css                      (este)
     modules/blockwishlist/views/templates/hook/displayCustomerAccount.tpl

   POR QUE ESTE ARCHIVO SUSTITUYE AL DEL MODULO
   El modulo registra su hoja con ruta relativa
   ('modules/blockwishlist/public/wishlist.css') y
   AbstractAssetManager::getFullPath recorre [_PS_THEME_URI_, parent, raiz]
   devolviendo la primera que existe. Al existir aqui, la del modulo no se carga.

   POR QUE HACEN FALTA "body" Y "#main" EN TODOS LOS SELECTORES
   El modulo lleva mas CSS compilado DENTRO de los bundles JS
   (wishlistcontainer.bundle.js, productslist.bundle.js, button.bundle.js,
   addtowishlist.bundle.js, product.bundle.js) que style-loader inyecta como
   <style> en el <head> en tiempo de ejecucion. Eso no se puede sustituir, y al
   inyectarse despues gana por orden a igual especificidad. Algunas de sus
   reglas usan un id, por ejemplo:
       #main .wishlist-products-container .card.page-content{padding:0}
   asi que para ganarles hace falta un id mas un elemento. El apartado 10 las
   apaga una por una.

   POR QUE EL AMBITO ES :has() Y NO UNA CLASE DEL TEMA
   Las paginas del modulo se montan con Vue y sus plantillas no siempre se
   pueden sobreescribir: pages/lists.tpl usa setTemplate('module:...') y si se
   podria, pero controllers/front/view.php pide su plantilla con una ruta
   relativa cruda ('../../../modules/...'), que se resuelve con is_file() y
   apunta siempre al modulo. Ademas esa clase extiende
   ProductListingFrontController, no ModuleFrontController, asi que el prefijo
   'module:' ni siquiera lo entiende (lanza "No template found").
   Conclusion: sin tocar el modulo, la pagina de productos NO admite override de
   plantilla. Se resuelve por CSS usando como ancla el propio contenedor que
   monta Vue, que siempre esta en el marcado. Tampoco sirve el id del <body>:
   ninguno de los dos controladores define page_name ni php_self.

   Archivo autonomo: no lee variables de otras hojas. Para adaptarlo a otra
   tienda solo se tocan los 5 ajustes de abajo. */

body .wishlist-modal,
body .wishlist-toast,
body .wishlist-button-add,
body #main:has(.wishlist-container, .wishlist-products-container) {

    /* ===== AJUSTES POR TIENDA - lo unico que hay que tocar ===== */
    --des-wl-primary: #8C1C13;                             /* color principal */
    --des-wl-accent: #B12332;                              /* color de acento */
    --des-wl-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* tipografia      */;  /* tipografia      */
    --des-wl-radius: 15px;                                 /* radio           */
    --des-wl-border: 1px;                                  /* grosor de borde */
    /* =========================================================== */

    --des-wl-radius-sm: calc(var(--des-wl-radius) * .62);
    --des-wl-accent-soft: rgba(33, 39, 74, .08);
    --des-wl-surface: #fff;
    --des-wl-fill: #f5f5f7;
    --des-wl-text: #1d1d1f;
    --des-wl-muted: #6e6e73;
    --des-wl-line: #e2e2e6;
    --des-wl-transition: .18s ease;

    --des-wl-heart: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20s-7-4.4-7-9a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 4.6-7 9-7 9z'/></svg>");
    --des-wl-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>");
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
    body .wishlist-modal,
    body .wishlist-toast,
    body .wishlist-button-add,
    body #main:has(.wishlist-container, .wishlist-products-container) {
        --des-wl-accent-soft: color-mix(in srgb, var(--des-wl-accent) 8%, transparent);
    }
}


/* ============================================================
   1. Cascara de las dos paginas
   Sin override de plantilla, #main hace de contenedor y de tarjeta.
   En la pagina de listas #main ya trae .des-container del tema; en la de
   productos no, de ahi que el ancho se fije aqui para las dos.
   ============================================================ */

body #main:has(.wishlist-container, .wishlist-products-container) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: 40px 70px;
    background: var(--des-wl-surface);
    font-family: var(--des-wl-font);
    color: var(--des-wl-text);
}


/* ============================================================
   2. Modales: crear, renombrar, compartir, borrar, login, anadir
   Vue alterna la clase .show sobre .wishlist-modal
   ============================================================ */

body .wishlist-modal {
    display: none;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    font-family: var(--des-wl-font);
}

body .wishlist-modal.show {
    display: block;
    opacity: 1;
    pointer-events: all;
    z-index: 1051;
}

/* Conservado del original: el fondo no debe capturar clics si esta apagado */
body .wishlist-modal .modal-backdrop,
body .wishlist-modal + .modal-backdrop {
    pointer-events: none;
}

body .wishlist-modal.show + .modal-backdrop,
body .wishlist-modal .modal-backdrop.in,
body .wishlist-modal + .modal-backdrop.in {
    pointer-events: all;
}

body .wishlist-modal .modal-dialog {
    max-width: 520px;
    margin: 60px auto;
    padding: 0 15px;
}

/* theme.css no define .modal-content: sin esto el modal sale sin caja */
body .wishlist-modal .modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--des-wl-surface);
    border: 0;
    border-radius: var(--des-wl-radius);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
    overflow: hidden;
}

body .wishlist-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 0;
    border: 0;
    margin: 0;
}

body .wishlist-modal .modal-header::after {
    content: none;
}

body .wishlist-modal .modal-title,
body .wishlist-modal .modal-header h5 {
    margin: 0;
    font-family: var(--des-wl-font);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--des-wl-text);
}

body .wishlist-modal .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--des-wl-radius-sm);
    background: none;
    font-family: var(--des-wl-font);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    color: var(--des-wl-muted);
    opacity: 1;
    cursor: pointer;
    transition: background var(--des-wl-transition), color var(--des-wl-transition);
}

body .wishlist-modal .close:hover,
body .wishlist-modal .close:focus-visible {
    background: var(--des-wl-fill);
    color: var(--des-wl-text);
    opacity: 1;
}

body .wishlist-modal .modal-body {
    padding: 18px 24px;
    font-family: var(--des-wl-font);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--des-wl-muted);
}

body .wishlist-modal .modal-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--des-wl-muted);
    text-wrap: pretty;
}

body .wishlist-modal .form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}

body .wishlist-modal .form-control-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--des-wl-text);
}

/* El reset del tema deja los input sin borde, sin fondo y con appearance:none */
body .wishlist-modal .form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    min-height: 46px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: var(--des-wl-text);
    background: var(--des-wl-fill);
    border: var(--des-wl-border) solid transparent;
    border-radius: var(--des-wl-radius-sm);
    outline: none;
    transition: border-color var(--des-wl-transition);
}

body .wishlist-modal .form-control:focus {
    border-color: var(--des-wl-accent);
}

body .wishlist-modal .modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 6px 24px 22px;
    border: 0;
    margin: 0;
}

body .wishlist-modal .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 0;
    padding: 12px 24px;
    border: 0;
    border-radius: var(--des-wl-radius-sm);
    font-family: var(--des-wl-font);
    font-size: 14.5px;
    font-weight: 600;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--des-wl-transition), color var(--des-wl-transition), filter var(--des-wl-transition);
    box-shadow: unset;
}

body .wishlist-modal .btn-primary {
    background: var(--des-wl-primary);
    color: #fff;
}

body .wishlist-modal .btn-primary:hover,
body .wishlist-modal .btn-primary:focus-visible {
    filter: brightness(1.08);
    color: #fff;
}

body .wishlist-modal .btn-secondary,
body .wishlist-modal .modal-cancel {
    background: var(--des-wl-fill);
    color: var(--des-wl-text);
}

body .wishlist-modal .btn-secondary:hover,
body .wishlist-modal .btn-secondary:focus-visible,
body .wishlist-modal .modal-cancel:hover,
body .wishlist-modal .modal-cancel:focus-visible {
    background: var(--des-wl-accent-soft);
    color: var(--des-wl-accent);
    opacity: 1;
}


/* ============================================================
   2b. Turno 18: los modales al detalle (18a, 18b, 18c, 18d)

   Refina el apartado 2 con las medidas del lienzo. Va DESPUES del 2 a
   proposito: a igual especificidad gana lo de aqui, y el 9 (responsive) sigue
   siendo el ultimo, asi que sus reglas de movil siguen mandando por debajo de
   767 px.

   Los cuatro artboards son el mismo componente con distinto contenido:
     18a / 18b  add-to-wishlist.tpl  selector de lista al guardar un producto
     18c        create.tpl           crear lista
     18d        login.tpl            hace falta iniciar sesion

   SOLO CSS, sin sobreescribir ninguna plantilla mas. Los tres .tpl se incluyen
   con {include file="module:blockwishlist/..."} y si se podrian sobreescribir
   desde el tema, pero lo unico que cambiaria es la «×» de cerrar por un icono
   SVG: no compensa meter tres archivos mas en el paquete para eso.

   LO QUE SI HAY QUE RESOLVER POR CSS SI O SI: las filas de listas del 18a/18b
   las pinta Vue (ChooseList.vue, dentro de un bundle) y emite solo

       <ul class="wishlist-list">
         <li class="wishlist-list-item"><p>nombre</p></li>

   sin el cuadrado del corazon ni el chevron que dibuja el lienzo. Van como
   ::before y ::after con mask, igual que en la pagina de listas del 10a.

   OJO con el ambito: .wishlist-list y .wishlist-list-item existen TAMBIEN en la
   pagina de listas, donde las estila el apartado 5 bajo #main. Los modales se
   pintan desde displayHeader, fuera de #main, asi que no se pisan. Aun asi todo
   lo de aqui cuelga de .wishlist-modal para que quede explicito.
   ============================================================ */

/* ---- Cascara comun a los cuatro ---- */

/* El lienzo centra el dialogo. .modal-dialog-centered la emiten las tres
   plantillas pero no la define ninguna hoja del tema, asi que se define aqui. */
body .wishlist-modal .modal-dialog {
    max-width: 440px;
}

body .wishlist-modal .modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 120px);
}

body .wishlist-modal .modal-content {
    gap: 20px;
    width: 100%;
    padding: 26px 28px;
    border-radius: calc(var(--des-wl-radius) + 4px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

/* Con el padding en .modal-content y el gap de la columna, las tres franjas van
   sin padding propio */
body .wishlist-modal .modal-header,
body .wishlist-modal .modal-body,
body .wishlist-modal .modal-footer {
    padding: 0;
}

body .wishlist-modal .modal-header {
    gap: 14px;
}

body .wishlist-modal .modal-title,
body .wishlist-modal .modal-header h5 {
    flex: 1;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -.01em;
}

/* La plantilla del modulo emite una «×» de texto, no un icono */
body .wishlist-modal .close {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    font-size: 22px;
    line-height: 1;
}

body .wishlist-modal .close:hover,
body .wishlist-modal .close:focus-visible {
    background: var(--des-wl-fill);
    color: var(--des-wl-text);
}


/* ---- 18a / 18b: selector de lista ---- */

body .wishlist-modal .wishlist-chooselist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body .wishlist-modal .wishlist-chooselist .wishlist-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: none;
    overflow-y: visible;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

/* El bundle inyecta .wishlist-list-item{padding:.875rem 0} y un hover en
   #ecf8fb, que es de su paleta. Se sustituyen los dos. */
body .wishlist-modal .wishlist-chooselist .wishlist-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    background: var(--des-wl-fill);
    border: 0;
    border-radius: var(--des-wl-radius-sm);
    list-style: none;
    cursor: pointer;
    transition: background var(--des-wl-transition);
}

/* En el 18b la primera lista va en acento y el resto en gris: es la lista por
   defecto del cliente, que Vue pinta siempre la primera. En el 18a, con una
   sola lista, es esa. */


body .wishlist-modal .wishlist-chooselist .wishlist-list-item:hover,
body .wishlist-modal .wishlist-chooselist .wishlist-list-item:focus-visible {
    background: var(--des-wl-accent-soft);
}

/* Cuadrado del corazon: Vue no lo emite, va de pseudoelemento con mask para
   que siga al color de acento */
body .wishlist-modal .wishlist-chooselist .wishlist-list-item::before {
    content: "";
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--des-wl-radius-sm);
    background-color: var(--des-wl-accent);
    -webkit-mask: var(--des-wl-heart) center / 17px 17px no-repeat;
    mask: var(--des-wl-heart) center / 17px 17px no-repeat;
}

/* El cuadrado va sobre blanco; en la fila de acento el propio fondo ya es
   tintado, asi que el cuadrado se recorta sobre la superficie */
body .wishlist-modal .wishlist-chooselist .wishlist-list-item::after {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-color: var(--des-wl-muted);
    -webkit-mask: var(--des-wl-chevron) center / contain no-repeat;
    mask: var(--des-wl-chevron) center / contain no-repeat;
}

body .wishlist-modal .wishlist-chooselist .wishlist-list-item p {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--des-wl-text);
    text-wrap: pretty;
}

/* Sin listas y mientras cargan. El lienzo no los dibuja: se resuelven con el
   mismo lenguaje para que no salgan en crudo. */
body .wishlist-modal .wishlist-chooselist .wishlist-list-empty {
    margin: 0;
    padding: 20px 16px;
    background: var(--des-wl-fill);
    border-radius: var(--des-wl-radius-sm);
    font-size: 14.5px;
    color: var(--des-wl-muted);
    text-align: center;
}

body .wishlist-modal .wishlist-chooselist .wishlist-list-loader {
    width: auto;
    padding: 0;
    background: none;
}

/* «Crear lista de deseos» del pie del 18a/18b: boton de texto, no pastilla.
   El apartado 5 estila .wishlist-add-to-new como chip gris, pero aquella regla
   cuelga de #main y los modales viven fuera, asi que no chocan.

   EL !important DEL COLOR NO ES OPCIONAL. add-to-wishlist.tpl emite

       <a class="wishlist-add-to-new text-primary">

   y classic declara .text-primary{color:#24b9d7!important}. Un !important no se
   gana con especificidad, se gana solo con otro !important, asi que sin esto el
   enlace sale en el cian de classic en TODOS los temas hijos de classic. En
   theshopgamer no se nota porque su theme.css no define .text-primary. */
body .wishlist-add-to .modal-footer {
    justify-content: flex-start;
}

body .wishlist-modal .wishlist-add-to-new {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    min-height: 46px;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--des-wl-radius-sm);
    background: transparent;
    font-family: var(--des-wl-font);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    color: var(--des-wl-accent) !important;
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
    transition: background var(--des-wl-transition);
}

/* classic tambien lleva a.text-primary:hover{color:#1d93ab!important} */
body .wishlist-modal .wishlist-add-to-new:hover,
body .wishlist-modal .wishlist-add-to-new:focus-visible {
    background: var(--des-wl-accent-soft);
    color: var(--des-wl-accent) !important;
    opacity: 1;
}

body .wishlist-modal .wishlist-add-to-new i,
body .wishlist-modal .wishlist-add-to-new .material-icons {
    margin: 0;
    font-size: 18px;
    color: inherit;
}


/* ---- 18c: crear lista ---- */

body .wishlist-create .modal-body .form-group {
    gap: 8px;
}

body .wishlist-create .form-control-label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--des-wl-text);
}


/* ---- 18d: iniciar sesion ---- */

body .wishlist-login .modal-text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--des-wl-muted);
}

/* En el 18d el «Iniciar sesion» es un <a>, no un <button>: el apartado 2 estila
   .btn, que lo lleva igual, pero conviene fijar el alto porque un enlace no
   hereda el min-height del boton en todos los navegadores. */
body .wishlist-modal .modal-footer a.btn {
    min-height: 46px;
}


/* ============================================================
   3. Aviso flotante (Toast.vue). Vue le pone .isActive
   ============================================================ */

body .wishlist-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1060;
    width: auto;
    max-width: min(420px, calc(100% - 32px));
    padding: 14px 18px;
    border: 0;
    border-radius: var(--des-wl-radius-sm);
    background: var(--des-wl-text);
    color: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity var(--des-wl-transition), transform var(--des-wl-transition), visibility var(--des-wl-transition);
}

body .wishlist-toast.isActive {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

body .wishlist-toast.success {
    background: #1a7f4b;
    border: 0;
}

body .wishlist-toast.error {
    background: #c1121f;
    border: 0;
}

body .wishlist-toast-text,
body .wishlist-toast.success .wishlist-toast-text,
body .wishlist-toast.error .wishlist-toast-text {
    margin: 0;
    font-family: var(--des-wl-font);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: normal;
    color: #fff;
}


/* ============================================================
   4. Boton de corazon en fichas de producto y pagina de producto
   ============================================================ */

body .wishlist-button-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--des-wl-surface);
    color: var(--des-wl-muted);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    cursor: pointer;
    transition: background var(--des-wl-transition), color var(--des-wl-transition);
}

body .wishlist-button-add:hover,
body .wishlist-button-add:focus-visible {
    background: var(--des-wl-accent-soft);
    color: var(--des-wl-accent);
    opacity: 1;
}

body .wishlist-button-add:active {
    transform: none;
}

body .wishlist-button-add .material-icons {
    margin: 0;
    font-size: 19px;
    color: inherit;
}

/* Conservado del original: posicion sobre la ficha en los listados */
body .products article .wishlist-button-add {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

/* En la pagina de producto va en linea junto al boton de anadir al carrito */
body .wishlist-button-product {
    position: static;
    width: 48px;
    min-width: 48px;
    height: 48px;
    margin-left: 10px;
    background: var(--des-wl-fill);
    box-shadow: none;
}


/* ============================================================
   5. Pagina de listas (10a)
   ============================================================ */

/* El modulo envuelve en .page-content .card .card-block, que aqui no existen */
body #main:has(.wishlist-container, .wishlist-products-container) .page-content,
body #main:has(.wishlist-container, .wishlist-products-container) .card,
body #main:has(.wishlist-container, .wishlist-products-container) .card-block {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-container-header,
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-products-container-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 28px;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-container-header h1,
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-products-container-header h1 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-family: var(--des-wl-font);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--des-wl-text);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-products-count {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--des-wl-line);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-add-to-new {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 11px 16px;
    border-radius: var(--des-wl-radius-sm);
    background: var(--des-wl-fill);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    color: var(--des-wl-text);
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
    transition: background var(--des-wl-transition), color var(--des-wl-transition);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-add-to-new:hover,
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-add-to-new:focus-visible {
    background: var(--des-wl-accent-soft);
    color: var(--des-wl-accent);
    opacity: 1;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-add-to-new i {
    margin: 0;
    font-size: 18px;
    color: inherit;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-container {
    padding: 24px;
    background: var(--des-wl-fill);
    border-radius: var(--des-wl-radius);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: none;
    overflow-y: visible;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 0;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item:hover {
    background: none;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--des-wl-surface);
    border-radius: var(--des-wl-radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--des-wl-transition);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-link:hover {
    background: var(--des-wl-accent-soft);
}

/* El cuadrado del corazon y el chevron final son decoracion del diseno: Vue no
   los emite. Se pintan con mask para que sigan al color de acento. */
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-link::before {
    content: "";
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: var(--des-wl-radius-sm);
    background-color: var(--des-wl-accent);
    -webkit-mask: var(--des-wl-heart) center / 19px 19px no-repeat;
    mask: var(--des-wl-heart) center / 19px 19px no-repeat;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-link::after {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-color: var(--des-wl-line);
    -webkit-mask: var(--des-wl-chevron) center / contain no-repeat;
    mask: var(--des-wl-chevron) center / contain no-repeat;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-title,
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item:hover .wishlist-list-item-title {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 9px;
    min-width: 160px;
    margin: 0;
    padding: 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: normal;
    color: var(--des-wl-text);
    word-break: normal;
    overflow-wrap: anywhere;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-title span {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--des-wl-muted);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-right {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-right button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--des-wl-radius-sm);
    background: none;
    box-shadow: none;
    color: var(--des-wl-muted);
    cursor: pointer;
    opacity: 1;
    transition: background var(--des-wl-transition), color var(--des-wl-transition);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-right button:hover,
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-right button:focus-visible {
    background: var(--des-wl-fill);
    color: var(--des-wl-accent);
    opacity: 1;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-right button i {
    margin: 0;
    font-size: 18px;
    color: inherit;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item .dropdown-menu,
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-right .dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    z-index: 100;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    padding: 6px;
    background: var(--des-wl-surface);
    border: 0;
    border-radius: var(--des-wl-radius-sm);
    box-shadow: 0 12px 32px rgba(15, 20, 26, .16);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-right .dropdown-menu button {
    width: auto;
    height: auto;
    justify-content: flex-start;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    color: var(--des-wl-text);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-right .dropdown-menu button:hover {
    background: var(--des-wl-accent-soft);
    color: var(--des-wl-accent);
}


/* ============================================================
   6. Productos de una lista (10b / 10c)
   ============================================================ */

body #main:has(.wishlist-container, .wishlist-products-container) .sort-by-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

body #main:has(.wishlist-container, .wishlist-products-container) .sort-by {
    padding: 0;
    font-size: 13.5px;
    color: var(--des-wl-muted);
    white-space: nowrap;
}

body #main:has(.wishlist-container, .wishlist-products-container) .products-sort-order {
    position: relative;
    padding: 0;
}

body #main:has(.wishlist-container, .wishlist-products-container) .select-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 15px;
    border: 0;
    border-radius: var(--des-wl-radius-sm);
    background: var(--des-wl-fill);
    font-family: var(--des-wl-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--des-wl-text);
    cursor: pointer;
}

body #main:has(.wishlist-container, .wishlist-products-container) .products-sort-order .dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    display: none;
    flex-direction: column;
    min-width: 220px;
    padding: 6px;
    background: var(--des-wl-surface);
    border: 0;
    border-radius: var(--des-wl-radius-sm);
    box-shadow: 0 12px 32px rgba(15, 20, 26, .16);
}

body #main:has(.wishlist-container, .wishlist-products-container) .products-sort-order .dropdown-menu.show,
body #main:has(.wishlist-container, .wishlist-products-container) .products-sort-order.open .dropdown-menu {
    display: flex;
}

body #main:has(.wishlist-container, .wishlist-products-container) .select-list {
    padding: 10px 12px;
    border-radius: var(--des-wl-radius-sm);
    font-size: 14px;
    color: var(--des-wl-text);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--des-wl-transition), color var(--des-wl-transition);
}

body #main:has(.wishlist-container, .wishlist-products-container) .select-list:hover,
body #main:has(.wishlist-container, .wishlist-products-container) .select-list:focus-visible {
    background: var(--des-wl-accent-soft);
    color: var(--des-wl-accent);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-products-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 24px;
    background: var(--des-wl-fill);
    border-radius: var(--des-wl-radius);
    list-style: none;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-products-item,
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-products-item:not(:last-child) {
    width: auto;
    margin: 0;
    list-style: none;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    width: auto;
    max-width: none;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 16px;
    background: var(--des-wl-surface);
    border-radius: var(--des-wl-radius);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    text-decoration: none;
}

/* El bundle hace la imagen de 250px fija, con la <img> en absoluto y zoom en
   hover. El diseno la quiere cuadrada y fluida. */
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-image {
    position: relative;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-image img {
    position: static;
    display: block;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    max-height: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--des-wl-radius-sm);
    background: var(--des-wl-fill);
    transform: none;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-link:hover img {
    transform: none;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-unavailable {
    opacity: .55;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-availability {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--des-wl-muted);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-availability i {
    margin: 0;
    font-size: 15px;
    color: inherit;
}

/* El bundle esconde una y muestra la otra segun el ancho; con la tarjeta del
   diseno el duplicado responsive sobra */
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-availability-responsive {
    display: none;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-right {
    display: flex;
    flex: initial;
    flex-direction: column;
    gap: 5px;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: normal;
    color: var(--des-wl-text);
    text-wrap: pretty;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--des-wl-text);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-price-promo {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--des-wl-muted);
    text-decoration: line-through;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-combinations {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-combinations-text {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 7px;
    min-height: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--des-wl-muted);
    text-wrap: pretty;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-combinations a {
    display: inline-flex;
    flex: none;
    color: var(--des-wl-muted);
    transition: color var(--des-wl-transition);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-combinations a:hover {
    color: var(--des-wl-accent);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-combinations .material-icons {
    font-size: 15px;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-bottom {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    margin-top: auto;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-addtocart {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 46px;
    padding: 12px 18px;
    border: 0;
    border-radius: var(--des-wl-radius-sm);
    background: var(--des-wl-primary);
    font-family: var(--des-wl-font);
    font-size: 14.5px;
    font-weight: 600;
    text-transform: none;
    color: #fff;
    cursor: pointer;
    transition: filter var(--des-wl-transition);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-addtocart:hover,
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-addtocart:focus-visible {
    filter: brightness(1.08);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-addtocart.btn-secondary,
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-addtocart[disabled],
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-addtocart.disabled {
    background: var(--des-wl-fill);
    color: var(--des-wl-muted);
    cursor: not-allowed;
    filter: none;
    opacity: 1;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product-addtocart .material-icons {
    margin: 0;
    font-size: 17px;
}

/* Vue lo emite al final de la tarjeta; el diseno lo pone sobre la imagen */
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product .wishlist-button-add {
    position: absolute;
    top: 26px;
    right: 26px;
    z-index: 2;
    width: 38px;
    min-width: 38px;
    height: 38px;
    box-shadow: none;
}


/* ============================================================
   7. Estado vacio, cargador, paginacion y enlaces de pie
   ============================================================ */

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 56px 24px;
    background: var(--des-wl-fill);
    border-radius: var(--des-wl-radius);
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: var(--des-wl-text);
}

/* Vue solo emite un <p>, asi que el icono va en un pseudoelemento */
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-empty::before {
    content: "";
    width: 30px;
    height: 30px;
    background-color: var(--des-wl-accent);
    -webkit-mask: var(--des-wl-heart) center / contain no-repeat;
    mask: var(--des-wl-heart) center / contain no-repeat;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-loader {
    width: auto;
    padding: 24px;
    background: var(--des-wl-fill);
    border-radius: var(--des-wl-radius);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--des-wl-muted);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-pagination .page-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-pagination .page-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 40px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--des-wl-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--des-wl-text);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--des-wl-transition), color var(--des-wl-transition);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-pagination .page-list a:hover,
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-pagination .js-wishlist-search-link:not([href]):not([tabindex]):hover {
    background: var(--des-wl-accent-soft);
    color: var(--des-wl-accent);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-pagination .page-list .current a,
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-pagination .page-list a.disabled {
    background: var(--des-wl-accent-soft);
    color: var(--des-wl-accent);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-pagination .previous {
    margin-right: 0;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-pagination .material-icons {
    font-size: 17px;
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
    padding-top: 20px;
    border-top: var(--des-wl-border) solid var(--des-wl-line);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-footer-links > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    border-radius: var(--des-wl-radius-sm);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: normal;
    color: var(--des-wl-muted);
    text-decoration: none;
    transition: background var(--des-wl-transition), color var(--des-wl-transition);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-footer-links > a:hover,
body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-footer-links > a:focus-visible {
    background: var(--des-wl-accent-soft);
    color: var(--des-wl-accent);
}

body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-footer-links > a i {
    margin: 0;
    font-size: 18px;
    vertical-align: middle;
}


/* ============================================================
   8. RTL - conservado del original
   ============================================================ */

body.lang-rtl .products article .wishlist-button-add {
    right: inherit;
    left: 10px;
}

body.lang-rtl .wishlist-button-product {
    margin-left: 0;
    margin-right: 10px;
}

body.lang-rtl #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-right .dropdown-menu,
body.lang-rtl #main:has(.wishlist-container, .wishlist-products-container) .products-sort-order .dropdown-menu {
    right: inherit;
    left: 0;
}

body.lang-rtl #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-right .dropdown-menu button {
    text-align: right;
}

body.lang-rtl #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product .wishlist-button-add {
    right: inherit;
    left: 26px;
}


/* ============================================================
   9. Responsive
   ============================================================ */

@media (max-width: 992px) {
    body #main:has(.wishlist-container, .wishlist-products-container) {
        padding: 24px 15px;
    }

    body .wishlist-modal .modal-dialog {
        margin: 24px auto;
    }

    body .wishlist-modal .modal-footer .btn {
        flex: 1;
    }

    body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-container-header h1,
    body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-products-container-header h1 {
        font-size: 26px;
    }

    body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-container,
    body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-products-list {
        padding: 0;
        background: none;
    }

    body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-list-item-link,
    body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product {
        background: var(--des-wl-fill);
        border-radius: var(--des-wl-radius);
    }

    body #main:has(.wishlist-container, .wishlist-products-container) .wishlist-product .wishlist-button-add {
        background: var(--des-wl-surface);
    }
}