/**
 * Hakuna Mataza · Chrome (header + footer + topbar)
 *
 * Fase 3.1 — estiliza la cabecera y el pie del tema Warehouse para que
 * coincidan con el brand book HKFinal (Claude Design). Mantenemos la
 * estructura HTML de Warehouse intacta — sólo cambiamos estilos.
 *
 * El único cambio estructural está en `themes/warehouse/templates/_partials/header.tpl`,
 * donde añadimos un topbar con 3 mensajes. Todo lo demás es CSS puro.
 */

/* =====================================================================
   0. SCROLL LATERAL · fix (feedback test buyer)
   El CSS del theme-editor fuerza `overflow: visible !important` en
   html/body/#wrapper/#inner-wrapper/#content-wrapper/#main/#main-page-content
   (se puso para que el position:sticky de la ficha NO se rompa — el sticky se
   rompe si un ancestro tiene overflow hidden/auto/scroll). Efecto colateral:
   permite SCROLL HORIZONTAL si algún elemento se sale por la derecha.
   Fix: `overflow-x: clip` (NO hidden) → recorta el desborde lateral SIN crear
   contenedor de scroll, así el sticky sigue intacto y overflow-y sigue visible.
   (hidden NO vale: con overflow-y visible el navegador lo convierte a `auto` y
   rompería el sticky.) Especificidad alta para ganar al !important del editor.
   ===================================================================== */
:root { overflow-x: clip !important; }
body[id] { overflow-x: clip !important; }

/* =====================================================================
   0b. SCROLL LATERAL EN iOS · PANELES DESLIZANTES CERRADOS
   El tema esconde el cajon del carrito y el menu movil DESPLAZANDOLOS fuera
   de pantalla (`transform: translate3d(±115%,0,0)`), pero los deja con
   `visibility: visible`. Chrome y Firefox no cuentan los `position: fixed`
   dentro del area desplazable del documento, asi que en escritorio no se ve
   nada raro; iOS Safari SI los cuenta, y el cajon del carrito (que queda a
   429 px a la derecha del viewport) provoca scroll horizontal en el iPhone.

   Los apagamos con `visibility` mientras estan cerrados: un elemento con
   visibility:hidden no se pinta ni aporta area desplazable en ningun
   navegador. La animacion no se pierde porque el apagado se retrasa los
   mismos 0,4 s que dura el deslizamiento de salida, y el encendido va sin
   retardo. Ademas dejan de ser enfocables con el tabulador estando cerrados.

   OJO: se repite la transicion del tema (.4s cubic-bezier(.7,0,.3,1)) tal
   cual. Si algun dia se cambia alli, hay que cambiarla aqui tambien.
   ===================================================================== */

/* --- Cajon del carrito (entra por la derecha) --- */
.ps-shoppingcart.side-cart #blockcart-content {
    visibility: hidden !important;
    transition: transform .4s cubic-bezier(.7, 0, .3, 1),
                visibility 0s linear .4s !important;
}
.ps-shoppingcart.side-cart .show #blockcart-content {
    visibility: visible !important;
    transition: transform .4s cubic-bezier(.7, 0, .3, 1),
                visibility 0s !important;
}

/* --- Menu movil (entra por la izquierda) --- */
.col-mobile-menu-push #_mobile_iqitmegamenu-mobile {
    visibility: hidden !important;
    transition: transform .4s cubic-bezier(.7, 0, .3, 1),
                visibility 0s linear .4s !important;
}
.col-mobile-menu-push #_mobile_iqitmegamenu-mobile.show {
    visibility: visible !important;
    transition: transform .4s cubic-bezier(.7, 0, .3, 1),
                visibility 0s !important;
}


/* =====================================================================
   1. TOPBAR — 3 mensajes en barra superior (tinta oscura, texto cream)
   ===================================================================== */

/* =====================================================================
   BANNER DE CAMPAÑA · 3 variantes (mustard / burdeos / pajarito)
   Va ENCIMA del topbar. Se inyecta desde header.tpl si hay campaña
   activa (gestionada en BO → Módulos → hmtheme).
   ===================================================================== */

.hmcamp {
    width: 100%;
    overflow: hidden;
    font-family: Inter, sans-serif;
    /* Fluido: se encoge solo en pantallas estrechas sin necesidad de tocar nada. */
    font-size: clamp(10.5px, 2.9vw, 12.5px);
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.hmcamp__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px clamp(12px, 4vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px clamp(8px, 2vw, 12px);
    flex-wrap: wrap;
    text-align: center;
}

.hmcamp__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 1.2em;
    line-height: 1;
}

.hmcamp__message {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

.hmcamp__message strong {
    font-weight: 700;
}

.hmcamp__message .hk-italic-burdeos {
    font-family: Fraunces, Georgia, serif;
    font-style: italic;
    font-weight: 400;
}

.hmcamp__code {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 3px clamp(9px, 2.4vw, 12px);
    border-radius: 999px;
    border: 0;
    background: rgba(0, 0, 0, 0.18);
    color: inherit;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.92em;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
    position: relative;
    overflow: hidden;
}

.hmcamp__code:hover {
    background: rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}

.hmcamp__code-copied {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(111, 133, 104, 0.95);
    color: #FBF6EF;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.hmcamp__code.hmcamp__code--copied .hmcamp__code-copied {
    opacity: 1;
}

.hmcamp__date {
    font-size: 0.92em;
    opacity: 0.75;
}

/* ===== Variante MOSTAZA ===== */
.hmcamp--mustard {
    background: var(--hk-mustard, #E2B85A);
    color: var(--hk-ink, #3A2C28);
}

.hmcamp--mustard .hmcamp__icon {
    color: var(--hk-accent, #8A4A4A);
}

.hmcamp--mustard .hmcamp__code {
    background: var(--hk-ink, #3A2C28);
    color: var(--hk-cream, #FBF6EF);
}

.hmcamp--mustard .hmcamp__code:hover {
    background: #1a0e0a;
}

/* ===== Variante BURDEOS ===== */
.hmcamp--burdeos {
    background: var(--hk-accent, #8A4A4A);
    color: var(--hk-cream, #FBF6EF);
}

.hmcamp--burdeos .hmcamp__icon {
    color: var(--hk-mustard, #E2B85A);
}

.hmcamp--burdeos .hmcamp__code {
    background: var(--hk-cream, #FBF6EF);
    color: var(--hk-accent, #8A4A4A);
}

.hmcamp--burdeos .hmcamp__code:hover {
    background: #fff;
}

/* ===== Variante PAJARITO (marca pura · cream + burdeos) ===== */
.hmcamp--pajarito {
    background: var(--hk-cream, #FBF6EF);
    color: var(--hk-ink, #3A2C28);
    border-bottom: 1px solid rgba(138, 74, 74, 0.18);
}

.hmcamp--pajarito .hmcamp__icon--bird {
    color: var(--hk-accent, #8A4A4A);
}

.hmcamp--pajarito .hmcamp__message .hk-italic-burdeos {
    color: var(--hk-accent, #8A4A4A);
}

.hmcamp--pajarito .hmcamp__code {
    background: var(--hk-ink, #3A2C28);
    color: var(--hk-cream, #FBF6EF);
}

.hmcamp--pajarito .hmcamp__code:hover {
    background: #1a0e0a;
}

/* ===== Responsive móvil ===== */
@media (max-width: 575px) {
    /* Los tamaños ya son fluidos (clamp). Aquí solo el ajuste fino de movil:
       la fecha se oculta para ganar espacio y el codigo salta a su propia
       linea, centrado, en vez de quedar colgando al final del texto. */
    .hmcamp__date {
        display: none;
    }
    .hmcamp__message {
        flex: 1 1 100%;
    }
}

/* En estado scroll, el banner colapsa junto con el topbar */
body.hkh-scrolled .hmcamp {
    max-height: 0 !important;
    opacity: 0;
    padding: 0 !important;
    pointer-events: none;
    overflow: hidden;
    transition: max-height 0.32s cubic-bezier(0.2, 0.7, 0.3, 1),
                opacity 0.22s ease,
                padding 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* =====================================================================
   1. TOPBAR — 3 mensajes en barra superior (tinta oscura, texto cream)
   ===================================================================== */
.hkh-topbar {
    background: var(--hk-ink);
    color: var(--hk-cream);
    width: 100%;
    overflow: hidden;
}

.hkh-topbar__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-family: var(--hk-font-sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
}

.hkh-topbar__item,
.hkh-topbar__item:link,
.hkh-topbar__item:visited,
.hkh-topbar a.hkh-topbar__item--link,
.hkh-topbar a.hkh-topbar__item--link:link,
.hkh-topbar a.hkh-topbar__item--link:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hk-cream) !important;
    text-decoration: none !important;
    transition: opacity 0.15s ease;
}

.hkh-topbar__item--link:hover {
    opacity: 0.8;
    color: var(--hk-cream) !important;
    text-decoration: none !important;
}

.hkh-topbar__icon {
    flex-shrink: 0;
}

.hkh-topbar__sep {
    opacity: 0.4;
    font-size: 12px;
}

@media (max-width: 767px) {
    .hkh-topbar__inner {
        gap: 12px;
        font-size: 10px;
        padding: 8px 16px;
    }
    .hkh-topbar__sep {
        display: none;
    }
}

/* =====================================================================
   2. HEADER — main row (search · logo · user/heart/cart)
   ===================================================================== */

#header,
header#header {
    background: var(--hk-cream);
    color: var(--hk-ink);
    /* sin border-bottom: la línea inferior la pone .cbp-hrmenu > ul (2px) */
    border-bottom: 0 !important;
}

/* Top header container — más respiro */
.header-top {
    padding-top: 18px;
    padding-bottom: 14px;
    background: var(--hk-cream);
}

.header-top .container {
    max-width: 1280px;
}

/* Logo central — wrap en italic serif */
#desktop_logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

#desktop_logo a,
#desktop_logo img {
    max-height: 50px;
    width: auto;
    height: auto;
}

/* =====================================================================
   2.1 Logo texto Claude Design (provisional, hasta tener PNG nuevo)
   ===================================================================== */

/* Por defecto: texto SI, PNG oculto */
.hkh-logo-png {
    display: none;
}

.hkh-logo-text {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    line-height: 1;
    color: var(--hk-ink);
    transition: opacity 0.15s ease;
}

.hkh-logo-text:hover {
    text-decoration: none;
    opacity: 0.8;
    color: var(--hk-ink);
}

.hkh-logo-text__main {
    font-family: var(--hk-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 30px;
    color: var(--hk-ink);
    letter-spacing: -0.012em;
    line-height: 1;
}

.hkh-logo-text__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.hkh-logo-text__line {
    width: 18px;
    height: 1px;
    background: var(--hk-accent);
    opacity: 0.7;
    display: inline-block;
}

.hkh-logo-text__sub {
    font-family: var(--hk-font-sans);
    font-weight: 500;
    font-size: 9px;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--hk-ink);
    padding-left: 2px;
}

/* Toggle: para volver al PNG actual, añade body.hkh-use-png-logo */
body.hkh-use-png-logo .hkh-logo-png {
    display: inline-flex;
}

body.hkh-use-png-logo .hkh-logo-text {
    display: none;
}

/* Si el logo es texto (no imagen), forzar serif italic */
.logo-text,
.shop-name {
    font-family: var(--hk-font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--hk-ink);
    font-size: 26px;
    line-height: 1;
}

/* Subtítulo "MATAZA" debajo del logo si existe */
.logo-subtitle,
.shop-tagline {
    font-family: var(--hk-font-sans);
    font-size: 9px;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--hk-ink-2);
    margin-top: 4px;
}

/* Col izquierda — search icon */
.col-header-left {
    display: flex;
    align-items: center;
}

/* =====================================================================
   SEARCH iqitsearch — minimalista "🔍 buscar regalo" (Claude Design)
   Selectores BROAD porque el ID puede estar en el div o en el form,
   y la estructura puede tener .input-group, .form-control, etc.
   ===================================================================== */

body .col-header-left {
    display: flex !important;
    align-items: center !important;
}

/* Wrapper: el div o form que envuelve todo */
body .col-header-left #search_widget,
body .col-header-left .search-widget,
body .col-header-left form[id*="search"],
body .col-header-left .search-widget form {
    max-width: 200px !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Cualquier .input-group, .form-group dentro */
body .col-header-left #search_widget .input-group,
body .col-header-left .search-widget .input-group,
body .col-header-left .search-widget .form-group {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: 100%;
    display: inline-flex !important;
    align-items: center !important;
}

/* TODO el input desnudo — selectores anchos */
body .col-header-left input[type="text"][name="s"],
body .col-header-left input[name="search_query"],
body .col-header-left .search-widget input,
body .col-header-left .search-widget input.form-control,
body .col-header-left #search_widget input,
body .col-header-left form input.form-control {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 0 !important;
    padding: 6px 4px 6px 26px !important;
    margin: 0 !important;
    font-family: var(--hk-font-sans) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--hk-ink) !important;
    box-shadow: none !important;
    height: 32px !important;
    width: 170px !important;
    min-width: 0 !important;
    transition: border-color 0.2s ease, width 0.2s ease !important;
    outline: none !important;
}

body .col-header-left input[name="s"]:focus,
body .col-header-left input[name="search_query"]:focus,
body .col-header-left .search-widget input:focus,
body .col-header-left #search_widget input:focus {
    border-bottom-color: var(--hk-accent) !important;
    outline: none !important;
    width: 220px !important;
}

body .col-header-left .search-widget input::placeholder,
body .col-header-left #search_widget input::placeholder,
body .col-header-left input[name="s"]::placeholder,
body .col-header-left input[name="search_query"]::placeholder {
    color: var(--hk-ink) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
}

/* Botón submit (lupa) — POSICIONAR A LA IZQUIERDA del input */
body .col-header-left .search-widget button[type="submit"],
body .col-header-left #search_widget button[type="submit"],
body .col-header-left .search-widget .input-group-btn,
body .col-header-left .search-widget .btn {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--hk-ink) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    box-shadow: none !important;
    min-width: 0 !important;
}

body .col-header-left .search-widget button[type="submit"]:hover,
body .col-header-left #search_widget button[type="submit"]:hover {
    color: var(--hk-accent) !important;
    background: transparent !important;
}

/* Ocultar los iconos legacy (FA, material) dentro del botón submit */
body .col-header-left .search-widget button i,
body .col-header-left #search_widget button i,
body .col-header-left .search-widget button .material-icons,
body .col-header-left #search_widget button .material-icons {
    display: none !important;
}

/* Y reemplazar por SVG lupa outline */
body .col-header-left .search-widget button[type="submit"]::before,
body .col-header-left #search_widget button[type="submit"]::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2C28' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='6'/><path d='M16 16l4 4'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

body .col-header-left .search-widget button[type="submit"]:hover::before,
body .col-header-left #search_widget button[type="submit"]:hover::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A4A4A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='6'/><path d='M16 16l4 4'/></svg>");
}

/* =====================================================================
   Col derecha — ES·€ + USER + HEART + CART
   Todos los iconos UNIFORMES 20px outline, ALINEADOS y JUNTOS.
   ===================================================================== */

.col-header-right {
    color: var(--hk-ink);
}

/* La row de Bootstrap tiene margin negativo — lo cancelamos */
body .col-header-right > .row {
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    gap: 0 !important;
}

/* CADA wrapper (col-auto que contiene un botón) — tight padding */
body .col-header-right > .row > .col,
body .col-header-right > .row > [class*="col-"],
body .col-header-right .header-btn-w {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

/* El LINK / botón propiamente dicho: 36x36, centrado, sin borde, sin fondo */
body .col-header-right .header-btn,
body .col-header-right .blockcart > a,
body .col-header-right .blockcart .header,
body .col-header-right .blockcart .header > a,
body .col-header-right [class*="header-btn"] > a {
    background: transparent !important;
    color: var(--hk-ink) !important;
    border: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    padding: 8px 10px !important;
    line-height: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

body .col-header-right .header-btn:hover,
body .col-header-right .blockcart > a:hover,
body .col-header-right .blockcart .header > a:hover,
body .col-header-right [class*="header-btn"] > a:hover {
    color: var(--hk-accent) !important;
    background: transparent !important;
}

/* OCULTAR labels de texto y precio dentro del header derecho */
body .col-header-right .header-btn .title,
body .col-header-right .blockcart-text,
body .col-header-right .user-info .title,
body .col-header-right [class*="header-btn"] .title,
body .col-header-right span.cart-tag,
body .col-header-right .blockcart .cart-tag {
    display: none !important;
}

/* OCULTAR TODOS los iconos legacy (FA, material, image, span.icon) — los reemplazamos por SVG */
body .col-header-right i.fa,
body .col-header-right i.fas,
body .col-header-right i.far,
body .col-header-right i.fal,
body .col-header-right i.icon,
body .col-header-right i.material-icons,
body .col-header-right .material-icons,
body .col-header-right span.icon,
body .col-header-right .header-btn > .icon,
body .col-header-right .header-btn > i,
body .col-header-right .header-btn > span > i,
body .col-header-right .blockcart i,
body .col-header-right .blockcart .material-icons {
    display: none !important;
}

/* ===== Inyección SVG outline 20px — Selectores ajustados al markup REAL ===== */

/* USER LOGIN — el SVG ahora viene del TPL nuevo del dropdown (Fase 3.2).
   Eliminado el ::before legacy que duplicaba el icono.
   El estilo del icono actual está en la sección USER DROPDOWN abajo
   (.hk-userdrop__icon). */

/* =====================================================================
   SCROLL SUAVE A ANCHORS (#hk-como-trabajamos, etc.)
   ===================================================================== */
html {
    scroll-behavior: smooth;
}

/* Offset para que el destino del scroll no quede detrás del header sticky */
#hk-como-trabajamos,
[id^="hk-"] {
    scroll-margin-top: 120px;
}
/* La sección newsletter necesita MÁS offset: al saltar al ancla, la topbar del
   header colapsa (.hkh-scrolled, header-scroll.js) y "come" ~60-70px, dejando
   la cejilla y el título pegados/ocultos tras el header. Subimos el margen para
   que se vea la sección entera (cejilla "NEWSLETTER" + título + form). El id
   solo existe en la home. Ajustable a ojo (sube/baja este número). */
#hk-newsletter {
    scroll-margin-top: 200px;
}

/* CART — Estructura: #ps-shoppingcart-wrapper > #ps-shoppingcart > #blockcart > a#cart-toogle
   BUG-001: al hacer scroll el tema MUEVE el carrito a #sticky-cart-wrapper (fuera
   de .col-header-right). Por eso targeteamos también por ID directo (#cart-toogle
   y #blockcart son únicos) → el icono custom sigue en el header sticky. */
body .col-header-right #cart-toogle::before,
body .col-header-right #blockcart > a::before,
body #cart-toogle::before,
body #blockcart > a::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2C28' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5h2l3 11h11l2-8H7'/><circle cx='9' cy='20' r='1.5'/><circle cx='18' cy='20' r='1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    flex-shrink: 0;
    margin-right: 4px;
}

body .col-header-right #cart-toogle:hover::before,
body .col-header-right #blockcart > a:hover::before,
body #cart-toogle:hover::before,
body #blockcart > a:hover::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A4A4A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5h2l3 11h11l2-8H7'/><circle cx='9' cy='20' r='1.5'/><circle cx='18' cy='20' r='1.5'/></svg>");
}

/* BUG-001 · ocultar el icono FontAwesome/Material del carrito también cuando el
   tema lo mueve a #sticky-cart-wrapper (donde el scope .col-header-right no llega) */
body #cart-toogle > i,
body #cart-toogle > .material-icons,
body #blockcart > a > i,
body #blockcart > a > .material-icons {
    display: none !important;
}

/* Cart info-wrapper — ocultar "Carrito" + separador " / " + precio "77,85€"
   PERO mantener visible cart-products-count "(3)" */
body .col-header-right #cart-toogle .info-wrapper .title,
body .col-header-right #cart-toogle .cart-separator,
body .col-header-right #cart-toogle .text-faded,
body .col-header-right #cart-toogle .value {
    display: none !important;
}

body .col-header-right #cart-toogle .info-wrapper {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
}

body .col-header-right #cart-toogle .cart-toggle-details {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
}

body .col-header-right #cart-toogle .cart-products-count {
    background: transparent !important;
    color: var(--hk-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-family: var(--hk-font-sans) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    margin: 0 0 0 2px !important;
    min-width: auto !important;
    line-height: 1 !important;
    display: inline-block !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    visibility: visible !important;
}

body .col-header-right .blockcart.cart-empty .cart-products-count {
    color: var(--hk-ink-3) !important;
}

/* Dropdown del cart preview — no se ve raro al abrirse */
body #_desktop_blockcart-content,
body .blockcart .dropdown-menu-custom {
    background: var(--hk-cream) !important;
    border: 1px solid var(--hk-line) !important;
    border-radius: var(--hk-radius-md) !important;
    box-shadow: var(--hk-shadow-card) !important;
    color: var(--hk-ink);
}

/* Custom HTML del header (si el usuario lo usa para texto) */
.header-custom-html {
    font-family: var(--hk-font-sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hk-ink-2);
    text-align: center;
}

/* =====================================================================
   2.2 Selector idioma/moneda estático "ES · €"
   (mostrado en lugar de ps_languageselector/ps_currencyselector cuando
   sólo hay 1 idioma y 1 moneda — es decorativo, no funcional)
   ===================================================================== */

.hkh-lang-currency {
    /* ⚠️ 4.7.1: el tema fuerza este item del header a ancho completo (display:flex /
       width del contenedor) con un selector de fila más específico → "ES · €" se
       estiraba a 406px y quedaba pegado al logo. Lo recompactamos con !important
       para que vuelva a la derecha, junto a los iconos (wishlist/carrito). */
    display: inline-flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    align-items: center;
    font-family: var(--hk-font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hk-ink-2);
    padding: 6px 14px;
    border-right: 1px solid var(--hk-line);
    margin-right: 6px;
}

@media (max-width: 575px) {
    .hkh-lang-currency {
        display: none;
    }
}

/* =====================================================================
   2.3 Wishlist heart — fix del icono ausente en Font Awesome 6
   El tema usa la clase legacy `fa-heart-o` (FA4) que NO existe en FA6.
   Lo reemplazamos con un SVG inline de corazón outline.
   ===================================================================== */

#header-wishlist-btn,
.header-wishlist-btn-w {
    display: inline-flex !important;
    align-items: center;
}

#header-wishlist-btn .header-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hk-ink);
    text-decoration: none;
    padding: 6px 10px;
    background: transparent;
    transition: color 0.15s ease;
}

#header-wishlist-btn .header-btn:hover {
    color: var(--hk-accent);
    background: transparent;
    text-decoration: none;
}

/* Esconder el <i fa-heart-o> roto y meter SVG via pseudo-elemento del <a> */
#header-wishlist-btn .header-btn .fa-heart-o,
#header-wishlist-btn .header-btn .fa-heart-o::before {
    display: none !important;
}

#header-wishlist-btn .header-btn::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2C28' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20s-7-4.5-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.5-7 10-7 10z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    flex-shrink: 0;
}

#header-wishlist-btn .header-btn:hover::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A4A4A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20s-7-4.5-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.5-7 10-7 10z'/></svg>");
}

/* Ocultar el label "Mis favoritos (..)" — sólo queremos el corazón */
#header-wishlist-btn .header-btn .title {
    display: none;
}

/* =====================================================================
   2.4 Notificación de wishlist — estilo HKFinal
   El toast `#iqitwishlist-notification` que sale al añadir/quitar de
   favoritos. Reemplaza el verde fluorescente por algo con tipografía
   limpia, fondo crema y acento burdeos.
   ===================================================================== */
#iqitwishlist-notification.ns-box {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    left: auto !important;
    bottom: auto !important;
    background: var(--hk-cream, #FBF6EF) !important;
    color: var(--hk-ink, #3A2C28) !important;
    border: 1px solid #EBDDD0 !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    box-shadow: 0 1px 2px rgba(58, 44, 40, 0.04), 0 12px 32px rgba(58, 44, 40, 0.12) !important;
    font-family: Inter, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    max-width: 320px;
    z-index: 9999;
    transform: translateX(110%) !important;
    transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
    opacity: 1 !important;
}

#iqitwishlist-notification.ns-box.ns-show {
    transform: translateX(0) !important;
}

#iqitwishlist-notification .ns-box-inner,
#iqitwishlist-notification .ns-content {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

#iqitwishlist-notification .ns-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--hk-ink, #3A2C28) !important;
    font-weight: 500 !important;
    background: transparent !important;
}

#iqitwishlist-notification .ns-title strong {
    font-weight: 500 !important;
    color: var(--hk-ink, #3A2C28) !important;
}

/* Ocultamos el <i class="fa-check"> rota de FA4/6, lo sustituimos por
   un corazón SVG mostaza para que matche con la card */
#iqitwishlist-notification .ns-title .fa,
#iqitwishlist-notification .ns-title .fa-check {
    display: none !important;
}

#iqitwishlist-notification .ns-title::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background-color: #EFD9A0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233A2C28' stroke='%233A2C28' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
    flex-shrink: 0;
}

/* Estado "removido de favoritos" — fondo distinto para diferenciar */
#iqitwishlist-notification.is-removed .ns-title::before {
    background-color: #E5D5C8;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2C28' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
}

@media (max-width: 575px) {
    #iqitwishlist-notification.ns-box {
        top: auto !important;
        bottom: 16px !important;
        right: 16px !important;
        left: 16px !important;
        max-width: none;
        transform: translateY(140%) !important;
    }
    #iqitwishlist-notification.ns-box.ns-show {
        transform: translateY(0) !important;
    }
}

/* =====================================================================
   3. MEGAMENÚ — bodas / bautizos / regalos / ...
   ===================================================================== */

.iqit-megamenu-container {
    background: var(--hk-cream);
    /* sin border-bottom: la línea inferior (2px) la pinta .cbp-hrmenu > ul */
    border-bottom: 0 !important;
    max-width: 1280px;
    padding: 0 24px;
}

/* Items del megamenú */
/* =====================================================================
   HEADER STICKY · scroll behavior
   El JS de header-scroll.js añade `.hkh-scrolled` al <body> cuando se
   hace scroll > 80px. Aquí gestionamos los 2 estados visuales.
   ===================================================================== */

/* Evita el "bucle" al colapsar la topbar: sin scroll-anchoring el navegador
   NO reajusta el scroll cuando la topbar cambia de altura (lo que provocaba
   activar→colapsar→bajar scroll→desactivar→reaparecer→subir… en loop). */
html, body { overflow-anchor: none; }

/* Sticky desde el principio — siempre pegado arriba */
#header,
.header-top {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--hk-cream, #FBF6EF);
    transition: box-shadow 0.25s ease;
}

/* Topbar: animación de colapso al hacer scroll */
.hkh-topbar {
    transition: max-height 0.32s cubic-bezier(0.2, 0.7, 0.3, 1),
                opacity 0.22s ease,
                padding 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
    max-height: 60px;       /* suficiente para 1 línea */
    overflow: hidden;
}

/* Cross-fade del contenido del header al alternar scrolled (header-scroll.js).
   El reposicionamiento logo/buscador/menú es un reflow que NO anima → en vez de
   un salto seco, desvanecemos el contenido, hacemos el swap invisible y fade-in.
   El fondo cream vive en #header/.header-top (padres) → no se transparenta nada. */
#desktop-header-container > .row { transition: opacity 0.16s ease; }
#desktop-header-container > .row.hkh-row-fading { opacity: 0; }
/* hkh-no-anim: mata las transiciones de los HIJOS durante TODA la ventana del toggle
   (fade-out + swap + fade-in + reasentado del topbar, que tarda 0.32s). El tema les pone
   transition:all → sin esto el logo "desliza" del centro a la izquierda (y al revés al
   expandir, porque el layout sigue reasentándose tras el fade-in). Con transition:none
   saltan de golpe a su sitio mientras están invisibles. La opacidad del row NO se mata. */
#desktop-header-container > .row.hkh-no-anim * { transition: none !important; }

/* === Estado: scrolled === */

/* Topbar colapsa */
body.hkh-scrolled .hkh-topbar {
    max-height: 0 !important;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
}

/* Sombra sutil en todo el header */
body.hkh-scrolled #header,
body.hkh-scrolled .header-top {
    box-shadow: 0 2px 12px rgba(58, 44, 40, 0.06),
                0 1px 0 #EBDDD0;
}

/* ============================================================
   COLAPSO SUAVE DEL HEADER (Opción A · estilo Kool) · body.hkh-mini
   El header ya es sticky siempre (arriba). Al bajar, SOLO:
     - la topbar se desliza arriba (max-height/opacity, ya con transición)
     - el logo encoge un poco
   NO se reestructura ni se mueve nada → cero salto. (header-scroll.js
   añade `hkh-mini`; el bloque `body.hkh-scrolled` de más abajo está
   DEPRECADO/inerte: ya nadie añade esa clase.)
   ============================================================ */
body.hkh-mini .hkh-topbar {
    max-height: 0 !important;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
}
body.hkh-mini #header,
body.hkh-mini .header-top {
    box-shadow: 0 2px 12px rgba(58, 44, 40, 0.06),
                0 1px 0 #EBDDD0;
}
/* el logo encoge un pelín (transición suave, sin moverse de sitio) */
.hkh-logo-text, #desktop_logo, .hkh-logo-png img, .logo {
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
body.hkh-mini .hkh-logo-text,
body.hkh-mini #desktop_logo,
body.hkh-mini .hkh-logo-png img,
body.hkh-mini .logo {
    transform: scale(0.9);
    transform-origin: center center;
}
/* ENCOGER el header al máximo: el header-top tiene 40/25 de padding (110px) y la
   barra de menú 14/14 (62px) → los apretamos para que la cabecera quede estrecha. */
.header-top { transition: padding 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.25s ease; }
.cbp-hrmenu > ul { transition: padding 0.3s cubic-bezier(0.2, 0.7, 0.3, 1); }
body.hkh-mini .header-top {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
body.hkh-mini .cbp-hrmenu > ul {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
/* topbar totalmente fuera (sin franja oscura residual) */
body.hkh-mini .hkh-topbar { border: 0 !important; min-height: 0 !important; }

/* ⚠️ DEPRECADO / INERTE: el bloque `body.hkh-scrolled` de aquí abajo hacía la
   reorg del header en 1 fila + mover el megamenú dentro → daba "salto". Se
   sustituyó por el colapso suave `body.hkh-mini` de arriba. Ningún JS añade ya
   `hkh-scrolled`, así que estas reglas NO aplican (pendiente de purga futura). */

/* === LAYOUT REORGANIZADO con flex + order ===
   Convertimos el .row de Bootstrap (3 cols + 1 col-12 abajo) en una sola
   fila horizontal: [LOGO izq] [SEARCH] [ICONS der]. Ocultamos col-12 que
   tiene hooks de banner. */
body.hkh-scrolled .header-top {
    min-height: 56px;   /* defensa: el header-top no puede colapsar */
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Layout en scroll: flex con SPACERS (::before / ::after) que actúan
   como columnas flex 1 a ambos lados del menú → menú perfectamente
   CENTRADO al viewport sin necesidad de position absolute (que rompía
   el hit-testing de los iconos en el header). */
body.hkh-scrolled #desktop-header-container > .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 48px;
    width: 100%;
    gap: 4px;
    /* IMPORTANTE: NO usar position relative, NO usar justify-content
       (los spacers ::before/::after distribuyen el espacio) */
}

/* Spacer izquierdo · entre logo y menú */
body.hkh-scrolled #desktop-header-container > .row::before {
    content: "";
    flex: 1 1 0;
    order: 2;                            /* entre col-header-center y slot */
    min-width: 0;
}

/* Spacer derecho · entre menú y search/iconos */
body.hkh-scrolled #desktop-header-container > .row::after {
    content: "";
    flex: 1 1 0;
    order: 4;                            /* entre slot y col-header-left */
    min-width: 0;
}

/* Asegurar visibilidad de los 3 grupos */
body.hkh-scrolled .col-header-left,
body.hkh-scrolled .col-header-center,
body.hkh-scrolled .col-header-right {
    display: flex !important;
    align-items: center;
    visibility: visible !important;
    opacity: 1 !important;
}

/* === DEFENSA GLOBAL: forzar que TODAS las .col del header se vean === */
body.hkh-scrolled #desktop-header-container > .row > [class*="col"] {
    width: auto !important;
    max-width: none !important;
    visibility: visible !important;
    overflow: visible !important;
    min-width: 0 !important;
}

/* === ASIGNACIÓN DE CELDAS DEL GRID ===
   - Logo (col-header-center) → celda "logo" (izquierda)
   - hkh-menu-slot           → celda "menu" (centro flexible)
   - Search (col-header-left)+ Iconos (col-header-right) → celda "actions"
     Como queremos ambos a la derecha, ponemos search Y iconos en "actions"
     y los colocamos con flex internamente. */

/* Logo a la IZQUIERDA (flex item) */
body.hkh-scrolled .col-header-center {
    grid-area: unset !important;
    order: 1 !important;            /* antes del ::before spacer */
    flex: 0 0 auto !important;
    text-align: left !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    min-width: 0 !important;
}

body.hkh-scrolled .hkh-logo-wrap,
body.hkh-scrolled #desktop_logo {
    text-align: left !important;
    display: inline-flex !important;
    align-items: center;
}

/* === LOGO EN SCROLL · "hakuna MATAZA" (Design idea) ===
   "hakuna" en burdeos italic + "MATAZA" en ink, sin líneas decorativas
   ni guión. Estilo limpio compacto en una sola línea. */
body.hkh-scrolled .hkh-logo-text {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 8px !important;
    line-height: 1 !important;
    text-decoration: none !important;
}
body.hkh-scrolled .hkh-logo-text__main {
    font-family: Fraunces, Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 26px !important;
    color: var(--hk-accent, #8A4A4A) !important;  /* burdeos */
    line-height: 1 !important;
}
body.hkh-scrolled .hkh-logo-text__tag {
    display: inline-flex !important;
    align-items: baseline;
    gap: 0 !important;
    margin: 0 !important;
    transform: none !important;
}
body.hkh-scrolled .hkh-logo-text__sub {
    font-family: Inter, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.22em !important;
    color: var(--hk-ink, #3A2C28) !important;     /* ink */
    text-transform: uppercase !important;
}

/* Las líneas decorativas (— —) del tag se ocultan en scroll */
body.hkh-scrolled .hkh-logo-text__line {
    display: none !important;
}

/* El logo PNG, si se usa en lugar del texto, también compacto */
body.hkh-scrolled .hkh-logo-png img,
body.hkh-scrolled .logo {
    max-height: 30px !important;
    height: auto !important;
}

/* Logo PNG (si se usa) también más pequeño */
body.hkh-scrolled .hkh-logo-png img,
body.hkh-scrolled .logo {
    max-height: 32px !important;
    height: auto !important;
}

/* Menú · flex item ENTRE los dos spacers → centrado al viewport.
   Sin position absolute, sin pointer-events tricks. Layout flex natural. */
body.hkh-scrolled .hkh-menu-slot {
    grid-area: unset !important;
    order: 3 !important;                 /* entre ::before(2) y ::after(4) */
    position: static !important;         /* anula cualquier posición absoluta */
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    overflow: visible !important;
    min-width: 0 !important;
    pointer-events: auto !important;
    z-index: auto !important;
}

/* Search (col-header-left) — después del spacer derecho */
body.hkh-scrolled .col-header-left {
    grid-area: unset !important;
    order: 5 !important;                 /* después del ::after spacer */
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.hkh-scrolled .hk-search-trigger {
    padding: 8px !important;
    border: 0 !important;
}
body.hkh-scrolled .hk-search-trigger:hover {
    background: rgba(58, 44, 40, 0.06) !important;
    color: var(--hk-ink) !important;
    border: 0 !important;
}
body.hkh-scrolled .hk-search-trigger__label {
    display: none !important;
}

/* Iconos (user, wishlist, cart) a la DERECHA — al final del flex */
body.hkh-scrolled .col-header-right {
    grid-area: unset !important;
    order: 6 !important;                 /* después de col-header-left */
    flex: 0 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    visibility: visible !important;
}

/* El .row interno de col-header-right también flex visible */
body.hkh-scrolled .col-header-right > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px;
    margin: 0 !important;
    justify-content: flex-end !important;
}

/* Esconder ES·€ y los labels de iconos en scrolled para liberar espacio */
body.hkh-scrolled .hkh-lang-currency {
    display: none !important;
}
body.hkh-scrolled .cart-toogle .info-wrapper {
    display: none !important;        /* texto "Cart · Vacío" del carrito */
}
body.hkh-scrolled .hk-userdrop__trigger .title {
    display: none !important;        /* nombre "David" si estuviera */
}

/* col-12 con hook displayTop → oculto en modo scrolled */
body.hkh-scrolled #desktop-header-container > .row > .col-12 {
    display: none !important;
}

/* === Megamenu DENTRO del header-top vía JS — ajustes visuales === */

/* Ocultar .header-nav (la fila gris con social-links + wishlist redundante) */
body.hkh-scrolled .header-nav {
    display: none !important;
}

/* Container del megamenú al moverse al slot — eliminar todos los wrappers
   y asegurar que TODOS hagan flex centered (no solo el ul).
   ¡CRÍTICO! Usamos `>` (hijo directo) en `.iqitmegamenu > .container` para
   NO matchear `.container.iqitmegamenu-submenu-container` que es el contenedor
   INTERNO del dropdown. Si lo matcheamos, las dos rows del dropdown
   (CTA + listas) se ponen lado a lado en lugar de apilarse. */
body.hkh-scrolled .hkh-menu-slot .iqit-megamenu-container,
body.hkh-scrolled .hkh-menu-slot .iqitmegamenu-wrapper,
body.hkh-scrolled .hkh-menu-slot .container-iqitmegamenu,
body.hkh-scrolled .hkh-menu-slot .iqitmegamenu,
body.hkh-scrolled .hkh-menu-slot .iqitmegamenu > .container,
body.hkh-scrolled .hkh-menu-slot .iqitmegamenu > .container.container-iqit-menu,
body.hkh-scrolled .hkh-menu-slot #cbp-hrmenu {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* FORZAR el cbp-hrmenu y su <ul> a horizontal — sin que se rompa por el ancho
   IMPORTANTE: border-bottom: 0 anula el border de 2px que el menú lleva en
   estado normal (de lo contrario aparece una línea oscura bajo la barra
   en scroll que no debe estar). */
body.hkh-scrolled .hkh-menu-slot .cbp-hrmenu > ul,
body.hkh-scrolled .cbp-hrmenu > ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 24px !important;
    border-bottom: 0 !important;     /* anular el 2px del estado normal */
    list-style: none;
    width: auto;
}

/* Cada <li> del menú: que no se rompa, no haga wrap */
body.hkh-scrolled .cbp-hrmenu > ul > li,
body.hkh-scrolled .hkh-menu-slot .cbp-hrmenu > ul > li {
    flex: 0 0 auto !important;
    float: none !important;          /* anular float de IQIT */
    display: block !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* CRÍTICO: el `white-space: nowrap` del <li> principal NO debe heredarse al
   dropdown que vive dentro de ese mismo <li>. Si lo dejamos heredar,
   títulos largos como "REGALOS ESPECIALES (INVITADOS VIP)" se rendizan en
   una sola línea y desbordan a la columna vecina. Reseteamos aquí. */
body.hkh-scrolled .cbp-hrmenu .cbp-hrsub,
body.hkh-scrolled .cbp-hrmenu .cbp-hrsub * {
    white-space: normal !important;
}

/* Items del menú compactos en scrolled */
body.hkh-scrolled .cbp-hrmenu > ul > li > a,
body.hkh-scrolled .cbp-hrmenu > ul > li > span.cbp-main-link {
    font-size: 10.5px !important;
    padding: 8px 2px 6px !important;
    letter-spacing: 0.14em !important;
    line-height: 1 !important;
    border-left: 0 !important;
}

/* === SUBMENÚ DROPDOWN EN ESTADO SCROLL ===
   PROBLEMA: cuando el menú está dentro del slot estrecho (.hkh-menu-slot),
   el `.cbp-hrsub` (position: absolute) hereda el ancho del slot (~80px),
   por lo que las columnas internas se solapan unas con otras.
   SOLUCIÓN: `position: fixed` anclado al viewport, full width, justo bajo
   el header → el `.cbp-hrsub-inner` con max-width:1280 se centra solo. */
body.hkh-scrolled .cbp-hrmenu .cbp-hrsub {
    position: fixed !important;
    top: 56px !important;            /* pegado a la base del header (sin gap) */
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1100 !important;
}

/* PUENTE INVISIBLE para el hover (estado scroll).
   El cursor baja del item del menú al dropdown atravesando un hueco
   de ~14px. Si ese hueco no está cubierto por ningún descendiente
   del <li>, IQIT cierra el dropdown (porque su handler mouseover
   del body se dispara). Añadimos un ::before transparente que
   extiende los límites del .cbp-hrsub hacia arriba y rellena el
   hueco — al ser descendiente del <li>, atrapa el mouseover y
   evita que el cursor "abandone" el LI al pasar al dropdown.

   ¡CRÍTICO! Solo aplicar cuando .cbp-show está activo. Si no, el
   ::before persiste en el header capturando clicks de los iconos
   y haciendo que parezca que los enlaces no funcionan. */
body.hkh-scrolled .cbp-hrmenu .cbp-hrsub.cbp-show::before,
body.hkh-scrolled .cbp-hrmenu .cbp-hropen .cbp-hrsub::before {
    content: "";
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 24px;
    background: transparent;
    pointer-events: auto;
}

/* El panel interno mantiene su look pero limitado a 1280 y centrado.
   DEFENSIVO: forzamos `display: block` para que las rows (.first_rows y
   .menu_row) APILEN verticalmente. Sin esto, en COLECCIONES la row1 con
   el botón "VER TODAS" se renderizaba como columna lateral en vez de
   fila superior. */
body.hkh-scrolled .cbp-hrmenu .cbp-hrsub-inner {
    display: block !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    width: auto !important;
}

/* Cada .row dentro del panel interno se comporta como Bootstrap (flex con wrap) */
body.hkh-scrolled .cbp-hrmenu .cbp-hrsub-inner > .row,
body.hkh-scrolled .cbp-hrmenu .cbp-hrsub-inner .iqitmegamenu-submenu-container > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* El col-12 del row1 (CTA "VER TODAS") debe ocupar 100% del ancho para
   que el botón quede centrado arriba como en estado normal */
body.hkh-scrolled .cbp-hrmenu .cbp-hrsub .row.first_rows > .col-12,
body.hkh-scrolled .cbp-hrmenu .cbp-hrsub .row.first_rows > [class*="col-12"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Header-top container: ancho completo en scrolled para dar espacio */
body.hkh-scrolled #desktop-header-container {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Ocultar el .col-12 vacío que estaba con un displayTop hook */
body.hkh-scrolled #desktop-header-container > .row > .col-12 {
    display: none !important;
}

/* El #header-wishlist-btn del .col-header-right que sale roto (fa-heart-o)
   se mantiene oculto en scrolled si no queremos verlo (ya está duplicado en
   la primera barra normal). Si lo queremos visible, descomentar. */
/* body.hkh-scrolled #header-wishlist-btn { display: none !important; } */

/* Header-banner se oculta */
body.hkh-scrolled .header-banner {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* Transiciones suaves */
.col-header-center,
.col-header-left,
.col-header-right,
.hkh-logo-text__main {
    transition: all 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

#header { will-change: padding; }

.cbp-hrmenu,
.cbp-hrmenu .cbp-hrmenu-tab {
    background: transparent !important;
}

/* CRÍTICO: IQIT pone .cbp-hrmenu > ul > li como `display:inline-block; float:left`
   por lo que `gap` se ignora. Forzamos flex + cancelamos el float para que
   gap funcione realmente y los items respiren.
   Valores EXACTOS del mockup Claude Design (inspector):
   display:flex · gap:28px · padding:14px 0 · border-bottom 2px rgb(235,221,208) */
.cbp-hrmenu > ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 28px !important;                 /* exacto del mockup */
    padding: 14px 0 !important;           /* exacto del mockup */
    margin: 0 !important;
    border-bottom: 2px solid rgb(235, 221, 208) !important;
    flex-wrap: wrap;
    list-style: none;
}

.cbp-hrmenu > ul > li,
.cbp-hrmenu > ul > li.cbp-hrmenu-tab {
    float: none !important;               /* anular float de IQIT (rompe gap) */
    display: block !important;            /* el flex parent maneja el inline */
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.cbp-hrmenu > ul > li > a,
.cbp-hrmenu > ul > li > span.cbp-main-link {
    font-family: var(--hk-font-sans) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;          /* regular (antes 500) */
    letter-spacing: 0.20em !important;    /* tracking más amplio */
    text-transform: uppercase !important;
    color: var(--hk-ink) !important;
    padding: 8px 2px 6px !important;      /* mínimo lateral · todo lo da el gap */
    position: relative !important;
    background: transparent !important;
    border-radius: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;            /* IQIT pone border-left en los li */
    transition: color 0.15s ease;
    line-height: 1.4 !important;
}

/* Subrayado via ::after — control fino de posición */
.cbp-hrmenu > ul > li > a::after,
.cbp-hrmenu > ul > li > span.cbp-main-link::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 1.5px;
    background: var(--hk-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.cbp-hrmenu > ul > li:hover > a,
.cbp-hrmenu > ul > li:hover > span.cbp-main-link,
.cbp-hrmenu > ul > li.active > a,
.cbp-hrmenu > ul > li.active > span.cbp-main-link {
    color: var(--hk-accent) !important;
}

.cbp-hrmenu > ul > li:hover > a::after,
.cbp-hrmenu > ul > li:hover > span.cbp-main-link::after,
.cbp-hrmenu > ul > li.active > a::after,
.cbp-hrmenu > ul > li.active > span.cbp-main-link::after {
    transform: scaleX(1);
}

/* Indicator de submenú (flechita) - desactivado en el design Claude */
.cbp-submenu-aindicator {
    display: none !important;
}

/* =====================================================================
   MEGAMENÚ DROPDOWN · estilo Claude Design
   ===================================================================== */

/* Wrapper externo — sin padding lateral, el panel ocupa el ancho del header */
.cbp-hrmenu .cbp-hrsub {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 20px 32px !important;
}

/* Panel interno — valores del mockup Claude Design (inspector)
   bg rgb(251,246,239) · border 0/1/1 #EBDDD0 · radius 0 0 14px 14px
   shadow doble: 0 1px 1px y 0 14px 32px
   padding-top reducido (24px) porque IqitMegamenu añade su propio espacio
   interno con .cbp-menu-column margin-top:20px que neutralizamos abajo */
.cbp-hrmenu .cbp-hrsub-inner {
    background: rgb(251, 246, 239) !important;
    border-width: 0 1px 1px !important;       /* sin borde superior */
    border-style: solid !important;
    border-color: rgb(235, 221, 208) !important;
    border-radius: 0 0 14px 14px !important;  /* esquinas inferiores 14px */
    box-shadow:
        rgba(58, 44, 40, 0.04) 0px 1px 1px,
        rgba(58, 44, 40, 0.08) 0px 14px 32px !important;
    padding: 24px 36px 32px !important;       /* top 24 · lados 36 · abajo 32 */
    max-width: 1280px;
    margin: 0 auto;
    align-items: flex-start;
}

.cbp-hrmenu .cbp-hrsub .iqitmegamenu-submenu-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* === Pill "VER TODO X" (.hm-megamenu-parent-cta) ===
   - Si HAY producto: el JS la mueve dentro de la columna del producto
     (visualmente ENCIMA de la imagen, pegada sin separador)
   - Si NO HAY producto (caso COLECCIONES): se queda en su col-12 arriba,
     centrada y full-width como header global */
.hm-megamenu-parent-cta {
    margin: 0 0 22px !important;    /* respiración por debajo del botón */
    padding: 0 !important;
    border: 0 !important;
    text-align: center !important;
}

/* CASO COLECCIONES · CTA full-width centrado encima de las columnas
   Espacios reducidos para que no haya hueco enorme entre el botón y las listas */
.cbp-hrmenu .cbp-hrsub-inner.hkh-megamenu-no-product .hm-megamenu-parent-cta {
    text-align: center !important;
    margin: 0 !important;             /* sin margin propio (lo da el row) */
    padding: 0 !important;
}
.cbp-hrmenu .cbp-hrsub-inner.hkh-megamenu-no-product .hm-megamenu-parent-cta a {
    width: auto !important;
    padding: 14px 36px !important;
    font-size: 16px !important;
}

/* Row1 (col-12 con CTA): sin margin extra · el min-height del título ya da espacio */
.cbp-hrmenu .cbp-hrsub-inner.hkh-megamenu-no-product .row.first_rows:first-child {
    margin-bottom: 0 !important;
    text-align: center !important;
}
.cbp-hrmenu .cbp-hrsub-inner.hkh-megamenu-no-product .row.first_rows:first-child .col-12,
.cbp-hrmenu .cbp-hrsub-inner.hkh-megamenu-no-product .row.first_rows:first-child > [class*="col-12"] {
    display: flex !important;
    justify-content: center !important;
    padding: 0 !important;
}
.hm-megamenu-parent-cta a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background: var(--hk-accent, #8A4A4A) !important;
    color: var(--hk-cream, #FBF6EF) !important;
    padding: 11px 16px !important;
    border-radius: 12px !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-style: italic !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.hm-megamenu-parent-cta a::after {
    content: "\2192";
    font-style: normal;
    font-size: 14px;
    opacity: .9;
    flex-shrink: 0;
}
.cbp-hrmenu .cbp-hrsub-inner .hm-megamenu-parent-cta a:hover,
.cbp-hrmenu .cbp-hrsub-inner .hm-megamenu-parent-cta a:focus,
.cbp-hrmenu .cbp-hrsub-inner .hm-megamenu-parent-cta a:active {
    background: #713D3D !important;
    color: var(--hk-cream, #FBF6EF) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
    outline: none;
}

/* La col-12 contenedora del Ver todo que el JS movió queda vacía y la
   ocultamos. La clase `.hkh-megamenu-cta-moved` la añade megamenu-restructure.js
   AL COL-12 directamente (no al row), así que usamos selector genérico. */
.cbp-hrmenu .cbp-hrsub .hkh-megamenu-cta-moved {
    display: none !important;
}
/* Si la row queda sólo con esa col oculta, ocultamos también la row para
   que no consuma espacio vertical vacío */
.cbp-hrmenu .cbp-hrsub .row.first_rows:has(> .hkh-megamenu-cta-moved:only-child) {
    display: none !important;
}

/* === Producto destacado en el submenú === */
.cbp-hrmenu .cbp-hrsub .product-miniature-container {
    padding: 0 !important;
    background: transparent !important;
}

.cbp-hrmenu .cbp-hrsub .product-image-container {
    position: relative;
    background: var(--hk-paper, #F5EAE2);
    border-radius: 10px !important;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    margin-bottom: 12px;
}

.cbp-hrmenu .cbp-hrsub .product-image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}

.cbp-hrmenu .cbp-hrsub .product-flags {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

.cbp-hrmenu .cbp-hrsub .product-title {
    font-family: Fraunces, serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--hk-ink, #3A2C28) !important;
    line-height: 1.3 !important;
    margin: 0 0 6px !important;
}
.cbp-hrmenu .cbp-hrsub .product-title a {
    color: var(--hk-ink, #3A2C28) !important;
    text-decoration: none !important;
    padding: 0 !important;
}

.cbp-hrmenu .cbp-hrsub .product-price-and-shipping {
    margin: 0 !important;
}
.cbp-hrmenu .cbp-hrsub .product-price {
    font-family: Fraunces, serif !important;
    font-style: italic !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--hk-accent, #8A4A4A) !important;
    padding: 0 !important;
    background: transparent !important;
}

/* === Títulos de columna (h4.cbp-column-title) ===
   min-height reserva espacio para 3 líneas (la mayoría de títulos largos
   ocupan 2-3 líneas) y `align-items: flex-end` empuja el texto pegado al
   fondo del bloque → la línea de subrayado queda al mismo Y en TODAS las
   columnas, y las listas debajo arrancan alineadas. */
.cbp-hrmenu .cbp-column-title {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    font-family: Inter, sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--hk-ink, #3A2C28) !important;
    margin: 0 0 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(58, 44, 40, 0.10);
    line-height: 1.3 !important;
    min-height: calc(11px * 1.3 * 3 + 10px) !important;  /* 3 líneas + padding */
}
.cbp-hrmenu .cbp-column-title a {
    color: inherit !important;
    text-decoration: none !important;
    padding: 0 !important;
    font-size: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
}

/* === Items de lista (.cbp-links li a) === */
.cbp-hrmenu .cbp-hrsub ul.cbp-links {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
}
.cbp-hrmenu .cbp-hrsub ul.cbp-links li {
    padding: 0 !important;
    margin: 0 !important;
}
.cbp-hrmenu .cbp-hrsub ul.cbp-links li a {
    display: block !important;
    font-family: Inter, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: var(--hk-ink, #3A2C28) !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    padding: 8px 0 !important;
    line-height: 1.4 !important;
    border-bottom: 1px solid rgba(58, 44, 40, 0.05);
    transition: color 0.15s ease, padding-left 0.18s ease;
}
.cbp-hrmenu .cbp-hrsub ul.cbp-links li:last-child a {
    border-bottom: 0;
}
.cbp-hrmenu .cbp-hrsub ul.cbp-links li a:hover {
    color: var(--hk-accent, #8A4A4A) !important;
    background: transparent !important;
    padding-left: 4px !important;
}

/* === Ocultar "Ver todo" mobile cuando NO es móvil === */
@media (min-width: 992px) {
    .cbp-hrmenu .hm-viewall-mobile {
        display: none !important;
    }
}

/* === Layout columnas ===
   RESPETAMOS los anchos Bootstrap (col-4, col-8, col-3...) que se configuran
   manualmente en el BO de IqitMegamenu — NO forzamos reparto equitativo.
   Sólo neutralizamos márgenes problemáticos y damos padding consistente. */
.cbp-hrmenu .cbp-hrsub .row.menu_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.cbp-hrmenu .cbp-hrsub .row.menu_row + .row.menu_row {
    margin-top: 0 !important;
}

/* Padding suave entre columnas (interno) — NO toca width/flex */
.cbp-hrmenu .cbp-hrsub .row.menu_row > .cbp-menu-column {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
.cbp-hrmenu .cbp-hrsub .row.menu_row > .cbp-menu-column:first-child {
    padding-left: 0 !important;
}
.cbp-hrmenu .cbp-hrsub .row.menu_row > .cbp-menu-column:last-child {
    padding-right: 0 !important;
}

/* Neutralizar el margin-top:20px que IQIT añade a cada .cbp-menu-column
   (era el causante del exceso de espacio arriba del submenu) */
.cbp-hrmenu .cbp-hrsub .cbp-menu-column,
.cbp-hrmenu .cbp-hrsub .row.menu_row > .cbp-menu-column {
    margin-top: 0 !important;
}

/* Ocultar .cbp-empty-column de IqitMegamenu (causa la col vacía a la izquierda
   en Bautizos cuando la config del BO no llena el row) */
.cbp-hrmenu .cbp-hrsub .cbp-empty-column {
    display: none !important;
}

/* SIN líneas verticales entre columnas (Claude Design) */

/* Indicador chevron del submenú — colorearlo */
.cbp-hrmenu > ul > li > a .cbp-tab-title i.fa-angle-down {
    display: none !important;       /* el flecha down del IQIT */
}
.cbp-submenu-aindicator {
    display: none !important;
}

/* =====================================================================
   4. FOOTER — fondo tinta oscura, texto cream
   ===================================================================== */

#footer-container-main,
.footer-container.footer-style-2 {
    background: var(--hk-ink);
    color: var(--hk-cream);
    padding-top: 64px;
    padding-bottom: 0;
}

#footer-container-main .container {
    max-width: 1280px;
}

/* Bloques del footer (Atención al cliente, Productos, Información…) */
#footer-container-main .links,
#footer-container-main .block-contact,
#footer-container-main .block_newsletter,
#footer-container-main .ps-emailsubscription-block,
#footer-container-main .iqit-link-block,
#footer-container-main .footer-block {
    color: var(--hk-cream) !important;
    padding: 0;
    margin-bottom: 32px;
}

/* Títulos de columna — visibles, claros, tracked uppercase */
body #footer-container-main h3,
body #footer-container-main h4,
body #footer-container-main h5,
body #footer-container-main .h3,
body #footer-container-main .h4,
body #footer-container-main .h5,
body #footer-container-main .title,
body #footer-container-main .footer-title,
body #footer-container-main .block-title,
body #footer-container-main .links .h3,
body #footer-container-main .links h3 {
    font-family: var(--hk-font-sans) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #E8DAD0 !important;
    margin-bottom: 18px !important;
    padding-bottom: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 1 !important;
}

/* Texto cuerpo del footer (párrafos, logos texto) */
body #footer-container-main * {
    color: #E8DAD0;
}

body #footer-container-main a {
    color: #E8DAD0;
}

body #footer-container-main a:hover {
    color: var(--hk-cream);
}

/* Logo "hakuna mataza" (texto SVG/img) en el footer — más visible */
body #footer-container-main .logo,
body #footer-container-main .footer-logo,
body #footer-container-main #footer-logo,
body #footer-container-main h2:first-child {
    color: var(--hk-cream) !important;
    opacity: 1 !important;
    font-family: var(--hk-font-serif) !important;
    font-style: italic;
    font-size: 24px !important;
    margin-bottom: 16px;
}

#footer-container-main ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#footer-container-main ul li {
    margin: 0;
    padding: 0;
    border: 0;
}

#footer-container-main ul li a {
    font-family: var(--hk-font-sans);
    font-size: 13px;
    color: #E8DAD0;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    transition: color 0.15s ease;
}

#footer-container-main ul li a:hover {
    color: var(--hk-cream);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#footer-container-main p,
#footer-container-main .text-muted,
#footer-container-main .block-contact-content {
    font-family: var(--hk-font-sans);
    font-size: 13px;
    color: #E8DAD0;
    line-height: 1.55;
}

/* Newsletter input + botón */
#footer-container-main .block_newsletter input[type="text"],
#footer-container-main .block_newsletter input[type="email"] {
    background: rgba(251, 246, 239, 0.08);
    border: 1px solid rgba(251, 246, 239, 0.2);
    color: var(--hk-cream);
    padding: 10px 14px;
    border-radius: var(--hk-radius-sm);
    font-family: var(--hk-font-sans);
    font-size: 13px;
}

#footer-container-main .block_newsletter input[type="text"]::placeholder,
#footer-container-main .block_newsletter input[type="email"]::placeholder {
    color: rgba(251, 246, 239, 0.55);
}

#footer-container-main .block_newsletter button,
#footer-container-main .block_newsletter input[type="submit"] {
    background: var(--hk-accent);          /* newsletter = acción de marca (no compra) → burdeos */
    color: var(--hk-cream);
    border: 0;
    padding: 10px 22px;
    border-radius: var(--hk-radius-pill);
    font-family: var(--hk-font-sans);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#footer-container-main .block_newsletter button:hover,
#footer-container-main .block_newsletter input[type="submit"]:hover {
    background: #743D3D;
    color: var(--hk-cream);
}

/* Iconos sociales — círculos cream con borde, en FILA horizontal */
body #footer-container-main .social-links,
body #footer-container-main ._footer,
body #footer-container-main ul.social,
body #footer-container-main ul[class*="social"],
body #footer-container-main .block-social,
body #footer-container-main .block-social ul,
body #footer-container-main .iqit-social-block ul,
body #footer-container-main .footer-block-social,
body #footer-container-main .footer-block-social ul {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-top: 12px !important;
    padding: 0 !important;
    list-style: none !important;
    align-items: center;
}

body #footer-container-main .social-links li,
body #footer-container-main ._footer li,
body #footer-container-main ul.social li,
body #footer-container-main ul[class*="social"] li,
body #footer-container-main .block-social li,
body #footer-container-main .iqit-social-block li,
body #footer-container-main .footer-block-social li {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    display: inline-block !important;
    float: none !important;
    width: auto !important;
}

body #footer-container-main .social-links li a,
body #footer-container-main ._footer li a,
body #footer-container-main ul.social li a {
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(251, 246, 239, 0.4) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--hk-cream) !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    overflow: hidden;
}

body #footer-container-main .social-links li a:hover,
body #footer-container-main ._footer li a:hover,
body #footer-container-main ul.social li a:hover {
    background-color: rgba(251, 246, 239, 0.12) !important;
    border-color: var(--hk-cream) !important;
}

/* Si el icono está dentro de un <i class="fa..."> o <svg>, asegurar color */
body #footer-container-main .social-links li a i,
body #footer-container-main .social-links li a svg,
body #footer-container-main ._footer li a i,
body #footer-container-main ._footer li a svg,
body #footer-container-main ul.social li a i,
body #footer-container-main ul.social li a svg {
    color: var(--hk-cream) !important;
    fill: var(--hk-cream) !important;
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

/* Algunos themes ponen background-image con sprite de iconos sociales —
   no queremos eso, lo eliminamos para usar los <i> de FontAwesome */
body #footer-container-main .social-links li.facebook a,
body #footer-container-main .social-links li.instagram a,
body #footer-container-main .social-links li.pinterest a,
body #footer-container-main .social-links li.twitter a,
body #footer-container-main .social-links li.youtube a {
    background-image: none !important;
    text-indent: 0 !important;
}

/* Copyright bar (footer-copyrights-1.tpl) — clase real: #footer-copyrights._footer-copyrights-1 */
body #footer-copyrights,
body #footer-copyrights._footer-copyrights-1,
body .footer-bottom,
body .footer-copyrights,
body #footer-bottom {
    background: var(--hk-ink) !important;
    color: #C9B6A8 !important;
    border-top: 1px solid rgba(251, 246, 239, 0.13) !important;
    padding: 22px 0 !important;
    margin: 0 !important;
}

body #footer-copyrights .container,
body #footer-copyrights._footer-copyrights-1 .container,
body .footer-bottom .container,
body .footer-copyrights .container,
body #footer-bottom .container {
    max-width: 1280px;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 16px;
}

body #footer-copyrights .container .row {
    width: 100%;
    margin: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

body #footer-copyrights .copyright,
body #footer-copyrights .copyright-txt,
body #footer-copyrights p,
body .footer-bottom .copyright,
body .footer-copyrights p,
body #footer-bottom p {
    font-family: var(--hk-font-sans);
    font-size: 11.5px;
    color: #C9B6A8 !important;
    margin: 0;
}

/* La frase mantra a la derecha del copyright (clase añadida desde IqitTheme fc_txt) */
body #footer-copyrights .hkh-mantra-line {
    font-family: var(--hk-font-serif);
    font-style: italic;
    font-size: 14px;
    color: #E8DAD0 !important;
    text-align: right;
}

/* Frase mantra al lado del copyright */
.hkh-mantra-line {
    font-family: var(--hk-font-serif);
    font-style: italic;
    font-size: 14px;
    color: #E8DAD0;
}

/* =====================================================================
   5. MOBILE — ajustes mínimos
   ===================================================================== */

@media (max-width: 991px) {
    .header-top {
        padding-top: 14px;
        padding-bottom: 10px;
    }

    #footer-container-main {
        padding-top: 40px;
    }

    .footer-bottom .container,
    .footer-copyrights .container {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
}

@media (max-width: 575px) {
    .col-header-right .blockcart {
        padding: 6px 8px !important;
    }

    .col-header-right .user-info span,
    .col-header-right .blockcart-text {
        display: none;
    }
}

/* =====================================================================
   USER DROPDOWN · panel rico del header (logueado + guest)
   ===================================================================== */

/* ===== Wrapper y trigger del botón ===== */
.hk-userdrop {
    position: relative;
}

.hk-userdrop__trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: var(--hk-ink) !important;
    background: transparent !important;
    padding: 6px 10px !important;
    border-radius: 6px;
    transition: color 0.15s ease;
}
.hk-userdrop__trigger:hover {
    color: var(--hk-accent) !important;
    background: transparent !important;
    text-decoration: none !important;
}
.hk-userdrop__icon {
    stroke: currentColor;
}
.hk-userdrop__trigger .title {
    /* Si quieres ocultar el nombre junto al icono, descomenta:
       display: none; */
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 500;
}
@media (max-width: 768px) {
    .hk-userdrop__trigger .title { display: none; }
}

/* ===== Dropdown menu (Bootstrap) ===== */
.hk-userdrop .dropdown-menu.hk-userdrop__menu {
    width: 340px;
    max-width: calc(100vw - 32px);
    padding: 0 !important;
    margin-top: 12px !important;
    background: #FBF6EF !important;
    border: 1px solid #EBDDD0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(58, 44, 40, 0.04),
                0 16px 40px rgba(58, 44, 40, 0.12) !important;
    overflow: hidden;
    animation: hk-userdrop-fadein 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes hk-userdrop-fadein {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Fix parpadeo del panel de usuario al CERRAR (hk-userdrop__menu-flicker-fix) ===
   Bootstrap pone un `left:0` inline al ABRIR (menú alineado a la derecha del
   trigger, extendiéndose a la derecha) y lo QUITA al cerrar → el menú revertía
   al `right:0` del tema warehouse (`inset:0 0 auto auto` + `.dropdown-menu-right`)
   y SALTABA ~300px a la izquierda durante el fade de salida. Fijamos left:0 /
   right:auto en AMBOS estados: la posición abierta (la que gusta) se mantiene y
   al cerrar ya no hay salto. Especificidad (0,3,0) > tema (0,2,0). */
.hk-userdrop .dropdown-menu.hk-userdrop__menu {
    left: 0 !important;
    right: auto !important;
}

/* ===== Header con avatar + greeting ===== */
.hk-userdrop__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 20px 16px;
}

.hk-userdrop__avatar {
    --hmlo-tw: 34px;  /* tamano de baldosa de particulas, proporcional al leon */
    --hmlo-th: 42px;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: var(--hk-paper, #F5EAE2);
    color: var(--hk-ink, #3A2C28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Fraunces, serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    border: 1px solid rgba(58, 44, 40, 0.08);
    position: relative;
    overflow: hidden;
}
/* León en el avatar del dropdown (logueado) — lo monta userdrop-lion.js.
   El "h·m" queda de fallback si el fetch del rig falla. */
.hk-userdrop__avatar.hk-udlion > .hk-userdrop__avatar-fallback { display: none; }
/* Insignia del accesorio de hmlionoutfits sobre el rig (ver userdrop-lion.js).
   overflow:hidden del avatar recorta cualquier sobresaliente. */
.hk-udlion-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--hk-paper, #F5EAE2);
    border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(58, 44, 40, 0.25);
    object-fit: contain;
    padding: 2px;
    z-index: 2;
}

.hk-userdrop__greeting {
    flex: 1;
    min-width: 0;
}

.hk-userdrop__eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: var(--hk-accent, #8A4A4A) !important;
    margin: 0 !important;
}

.hk-userdrop__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--hk-sage-dk, #6F8568);
    display: inline-block;
    flex-shrink: 0;
}

.hk-userdrop__name {
    font-family: Fraunces, serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: var(--hk-ink, #3A2C28);
    margin: 4px 0 2px !important;
    line-height: 1.15;
}

.hk-userdrop__tier {
    font-family: Inter, sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hk-ink-2, #6B5852);
    margin: 0;
}

/* ===== Card pedido en curso ===== */
.hk-userdrop__card {
    display: block !important;
    margin: 0 16px 12px;
    padding: 14px 16px;
    background: var(--hk-paper, #F5EAE2);
    border-radius: 10px;
    text-decoration: none !important;
    color: var(--hk-ink, #3A2C28) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hk-userdrop__card:hover {
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(58, 44, 40, 0.06);
}

.hk-userdrop__order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.hk-userdrop__order-eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: var(--hk-sage-dk, #6F8568) !important;
    margin: 0 !important;
}
.hk-userdrop__pulse {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--hk-sage-dk, #6F8568);
    display: inline-block;
    position: relative;
    animation: hk-pulse 1.8s ease-in-out infinite;
}
@keyframes hk-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(111, 133, 104, 0.5); }
    50%      { box-shadow: 0 0 0 5px rgba(111, 133, 104, 0); }
}

.hk-userdrop__order-ref {
    font-family: Fraunces, serif;
    font-size: 15px;
    color: var(--hk-ink, #3A2C28);
    margin: 0 0 10px;
    line-height: 1.3;
}
.hk-userdrop__order-ref em {
    font-size: 13px;
    font-weight: 400;
}

.hk-userdrop__progress {
    display: flex;
    gap: 4px;
    align-items: center;
}
.hk-userdrop__progress-step {
    flex: 1;
    height: 3px;
    background: rgba(58, 44, 40, 0.10);
    border-radius: 999px;
    transition: background 0.3s ease;
}
.hk-userdrop__progress-step.is-done {
    background: var(--hk-sage-dk, #6F8568);
}

/* ===== Card cupón ===== */
.hk-userdrop__coupon {
    display: flex !important;
    align-items: center;
    gap: 12px;
}

.hk-userdrop__coupon-badge {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--hk-accent, #8A4A4A);     /* cupón = burdeos (oferta/énfasis), no mostaza */
    color: var(--hk-cream, #FBF6EF);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Fraunces, serif;
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}

.hk-userdrop__coupon-body {
    flex: 1;
    min-width: 0;
}

.hk-userdrop__coupon-title {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: var(--hk-ink-2, #6B5852);
    margin: 0 0 2px;
    letter-spacing: 0.04em;
}
.hk-userdrop__coupon-title strong {
    font-weight: 600;
    color: var(--hk-accent, #8A4A4A);
    margin-left: 4px;
}

.hk-userdrop__coupon-meta {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: var(--hk-ink-3, #9A8780);
    margin: 0;
}

.hk-userdrop__coupon-arrow {
    flex-shrink: 0;
    color: var(--hk-ink, #3A2C28);
    stroke: currentColor;
    opacity: 0.5;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.hk-userdrop__coupon:hover .hk-userdrop__coupon-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* ===== Nav (lista items) ===== */
.hk-userdrop__nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    border-top: 1px solid rgba(58, 44, 40, 0.06);
    margin-top: 4px;
}

.hk-userdrop__item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 20px !important;
    color: var(--hk-ink, #3A2C28) !important;
    font-family: Inter, sans-serif !important;
    font-size: 13px !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.18s ease;
}
.hk-userdrop__item:hover {
    background: rgba(245, 234, 226, 0.5) !important;
    color: var(--hk-accent, #8A4A4A) !important;
    padding-left: 24px !important;
    text-decoration: none !important;
}

.hk-userdrop__item-icon {
    color: var(--hk-ink-2, #6B5852);
    stroke: currentColor;
    flex-shrink: 0;
}
.hk-userdrop__item:hover .hk-userdrop__item-icon {
    color: var(--hk-accent, #8A4A4A);
}

.hk-userdrop__item-count {
    margin-left: auto;
    background: rgba(58, 44, 40, 0.08);
    color: var(--hk-ink-2, #6B5852);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.hk-userdrop__item-dot {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--hk-sage-dk, #6F8568);     /* dot de estado = sage (info) */
}

.hk-userdrop__item-arrow {
    margin-left: auto;
    color: var(--hk-ink-3, #9A8780);
    stroke: currentColor;
    transition: transform 0.18s ease;
}
.hk-userdrop__item:hover .hk-userdrop__item-arrow {
    color: var(--hk-accent, #8A4A4A);
    transform: translateX(2px);
}

.hk-userdrop__item--soon {
    opacity: 0.7;
    cursor: not-allowed;
}
.hk-userdrop__item--soon:hover {
    padding-left: 20px !important;
}

/* ===== Footer (logout + version) ===== */
.hk-userdrop__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 14px;
    border-top: 1px solid rgba(58, 44, 40, 0.08);
    background: rgba(245, 234, 226, 0.3);
}

.hk-userdrop__logout {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: var(--hk-ink, #3A2C28) !important;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none !important;
    transition: color 0.15s ease;
}
.hk-userdrop__logout:hover {
    color: var(--hk-accent, #8A4A4A) !important;
}
.hk-userdrop__logout svg { stroke: currentColor; }

.hk-userdrop__version {
    font-family: Inter, sans-serif;
    font-size: 10px;
    color: var(--hk-ink-3, #9A8780);
    letter-spacing: 0.04em;
}

/* =====================================================================
   USER DROPDOWN · variante GUEST (sin sesión)
   ===================================================================== */
.hk-userdrop__menu--guest {
    /* Mismo container que logueado, pero contenido distinto */
}

/* Decoración top: pattern de puntos sutil */
.hk-userdrop__deco {
    height: 64px;
    background-color: var(--hk-paper, #F5EAE2);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(58, 44, 40, 0.12) 1px, transparent 0);
    background-size: 12px 12px;
    border-bottom: 1px solid rgba(58, 44, 40, 0.06);
}

.hk-userdrop__guest-head {
    padding: 20px 20px 12px;
    text-align: center;
    margin-top: -36px;          /* sube el icono sobre la decoración */
    position: relative;
}

.hk-userdrop__guest-iconwrap {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--hk-cream, #FBF6EF);
    border: 1px solid rgba(58, 44, 40, 0.08);
    color: var(--hk-accent, #8A4A4A);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(58, 44, 40, 0.06);
}
.hk-userdrop__guest-iconwrap svg { stroke: currentColor; }

.hk-userdrop__guest-title {
    font-family: Fraunces, serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: var(--hk-ink, #3A2C28);
    margin: 0 0 6px !important;
    line-height: 1.15;
}

.hk-userdrop__guest-desc {
    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: var(--hk-ink-2, #6B5852);
    margin: 0;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}

/* CTAs */
.hk-userdrop__cta-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px 8px;
}

.hk-userdrop__cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px !important;
    border-radius: 999px !important;
    font-family: Inter, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, transform 0.15s ease;
}
.hk-userdrop__cta svg { stroke: currentColor; }

.hk-userdrop__cta--primary {
    background: var(--hk-mustard, #E2B85A) !important;
    color: var(--hk-ink, #3A2C28) !important;
    border: 0 !important;
}
.hk-userdrop__cta--primary:hover {
    background: #D4A437 !important;
    color: var(--hk-ink, #3A2C28) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

.hk-userdrop__cta--ghost {
    background: transparent !important;
    color: var(--hk-ink, #3A2C28) !important;
    border: 1px solid var(--hk-ink, #3A2C28) !important;
}
.hk-userdrop__cta--ghost:hover {
    background: var(--hk-ink, #3A2C28) !important;
    color: var(--hk-cream, #FBF6EF) !important;
    text-decoration: none !important;
}

/* Promo bienvenida */
.hk-userdrop__promo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    margin: 12px 16px;
    background: rgba(245, 234, 226, 0.5);
    border-radius: 12px;
    border: 1px dashed rgba(138, 74, 74, 0.18);
}
/* Promo clicable → sección newsletter de la home (#hk-newsletter-email) */
a.hk-userdrop__promo {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}
a.hk-userdrop__promo:hover {
    background: rgba(245, 234, 226, 0.9);
    border-color: rgba(138, 74, 74, 0.4);
}
.hk-userdrop__promo-arrow {
    flex-shrink: 0;
    color: var(--hk-accent, #8A4A4A);
    opacity: .5;
    transition: opacity .18s ease, transform .18s ease;
}
a.hk-userdrop__promo:hover .hk-userdrop__promo-arrow {
    opacity: 1;
    transform: translateX(2px);
}

.hk-userdrop__promo-sticker {
    width: 56px !important;
    height: 56px !important;
    transform: rotate(-10deg);
    flex-shrink: 0;
}
.hk-userdrop__promo-sticker .hk-sticker__big {
    font-size: 14px !important;
}
.hk-userdrop__promo-sticker .hk-sticker__sub {
    font-size: 7px !important;
}

.hk-userdrop__promo-body {
    flex: 1;
    min-width: 0;
}
.hk-userdrop__promo-title {
    font-family: Fraunces, serif;
    font-size: 13px;
    line-height: 1.3;
    color: var(--hk-ink, #3A2C28);
    margin: 0 0 2px;
}
.hk-userdrop__promo-desc {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: var(--hk-ink-2, #6B5852);
    margin: 0;
}

/* En menú guest, el nav va sin padding lateral extra */
.hk-userdrop__menu--guest .hk-userdrop__nav {
    border-top: 1px solid rgba(58, 44, 40, 0.06);
    margin-top: 4px;
}
.hk-userdrop__menu--guest .hk-userdrop__nav .hk-userdrop__item {
    padding: 12px 20px !important;
}
.hk-userdrop__menu--guest .hk-userdrop__nav .hk-userdrop__item:last-child {
    padding-bottom: 16px !important;
}

/* =====================================================================
   USER DROPDOWN · responsive
   ===================================================================== */
@media (max-width: 575px) {
    .hk-userdrop .dropdown-menu.hk-userdrop__menu {
        width: 320px;
        margin-right: -8px !important;
    }
}

/* =====================================================================
   WISHLIST BUTTON · estilo Claude Design GLOBAL (toda la web)
   Corazón outline limpio cuando NO está añadido a favoritos.
   Corazón filled burdeos cuando SÍ está añadido.
   Reemplaza los <i class="fa-heart-o">/<i class="fa-heart"> de FontAwesome.
   ===================================================================== */

/* Ocultar los icons FontAwesome que pone Warehouse en el TPL */
body .btn-iqitwishlist-add > i,
body .btn-iqitwishlist-add > .fa,
body a.btn-iqitwishlist-add > i {
    display: none !important;
}

/* Dibujar el corazón OUTLINE via SVG mask · color = currentColor */
body .btn-iqitwishlist-add,
body a.btn-iqitwishlist-add {
    position: relative !important;
}

body .btn-iqitwishlist-add::before,
body a.btn-iqitwishlist-add::before {
    content: "" !important;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: 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='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>") no-repeat center / contain;
            mask: 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='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>") no-repeat center / contain;
    transition: background-color 0.18s ease;
}

/* Estado AÑADIDO · corazón filled con el color que declare cada contexto
   (currentColor, igual que el outline) — NO fijo a crema. La mayoría de
   contextos (categoría/listado/búsqueda/home/cuenta) dejan el círculo
   CREMA y ponen `color: burdeos` en `.iqitwishlist-added`; el cross-sell de
   ficha (#hkp-section-related) hace lo contrario (círculo burdeos + `color:
   crema`). Antes esto estaba hardcodeado a crema → corazón invisible
   (crema sobre crema) en categoría/listado/etc. */
body .btn-iqitwishlist-add.iqitwishlist-added::before,
body a.btn-iqitwishlist-add.iqitwishlist-added::before {
    background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>") no-repeat center / contain !important;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>") no-repeat center / contain !important;
}

/* =====================================================================
   SISTEMA UNIFICADO DE PRODUCT FLAGS · Hakuna Mataza
   Aplica en TODAS las vistas: home (carrusel), categoría (grid + lista),
   ficha producto, megamenú. Misma estética pill consistente.

   Catálogo de flags soportados:
   SISTEMA DE ETIQUETAS (decidido con cliente · "cada tipo un color"):
     .product-flag (sin clase extra)  → INK / tinta (default · Top Ventas / custom)
     .new                              → SAGE (novedad)
     .on-sale, .discount, .discount-*  → BURDEOS (descuento / oferta)
     .pack                             → INK
     .online-only                      → PAPER outline (sutil)
     .out_of_stock, .out-of-stock      → GRIS apagado (agotado · no grita)
     .top-seller, .bestseller          → INK / tinta (Top ventas)

   Posicionamiento: absolute top-left del thumbnail-container,
   apilados verticalmente con gap pequeño.
   ===================================================================== */

/* Contenedor de flags · absolute en la esquina superior izquierda */
body .product-flags,
body ul.product-flags,
body .js-product-flags,
body .product-miniature .product-flags,
body article.product-miniature .product-flags {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 5 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    background: transparent !important;
    border: 0 !important;
    pointer-events: none;            /* las flags no deben capturar click sobre la card */
}

body .product-flags .product-flag,
body ul.product-flags li.product-flag,
body .product-miniature .product-flag,
body article.product-miniature .product-flag,
body li.product-flag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 11px !important;
    /* DEFAULT · pill ROSA (Top Ventas / flags custom) · test buyer: TOP = rosa Hakuna */
    background: var(--hk-rose-dk, #C99D93) !important;
    color: #fff !important;
    border-radius: 999px !important;
    border: 0 !important;
    font-family: Inter, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 0 rgba(58, 44, 40, 0.06) !important;
    pointer-events: auto;            /* las flags individuales sí pueden hacer hover */
}

/* NEW / NOVEDAD · sage oscuro */
body .product-flag.new,
body li.product-flag.new {
    background: var(--hk-sage-dk, #6F8568) !important;
    color: var(--hk-cream, #FBF6EF) !important;
}

/* DESCUENTO / OFERTA · burdeos (máxima atención) */
body .product-flag.on-sale,
body .product-flag.discount,
body .product-flag.discount-amount,
body .product-flag.discount-percentage,
body li.product-flag.on-sale,
body li.product-flag.discount,
body li.product-flag.discount-amount,
body li.product-flag.discount-percentage {
    background: var(--hk-accent, #8A4A4A) !important;
    color: var(--hk-cream, #FBF6EF) !important;
}

/* PACK · ink (sobrio, no chillón) */
body .product-flag.pack,
body li.product-flag.pack {
    background: var(--hk-ink, #3A2C28) !important;
    color: var(--hk-cream, #FBF6EF) !important;
}

/* ONLINE ONLY · paper outline sutil */
body .product-flag.online-only,
body li.product-flag.online-only {
    background: var(--hk-paper, #F5EAE2) !important;
    color: var(--hk-ink, #3A2C28) !important;
    border: 1px solid var(--hk-line, #E5D5C8) !important;
}

/* OUT OF STOCK / SIN STOCK · GRIS apagado (agotado · no grita) */
body .product-flag.out_of_stock,
body .product-flag.out-of-stock,
body li.product-flag.out_of_stock,
body li.product-flag.out-of-stock {
    background: var(--hk-ink-2, #6B5852) !important;
    color: var(--hk-cream, #FBF6EF) !important;
    backdrop-filter: blur(2px);
}

/* TOP SELLER / BESTSELLER / TOP VENTAS · ROSA Hakuna (test buyer · distinto del
   descuento burdeos y del pack tinta) */
body .product-flag.top-seller,
body .product-flag.bestseller,
body .product-flag.top-ventas,
body li.product-flag.top-seller,
body li.product-flag.bestseller,
body li.product-flag.top-ventas {
    background: var(--hk-rose-dk, #C99D93) !important;
    color: #fff !important;
}

/* === PILL "SIN STOCK" en thumbnail · grid mode ===
   El theme Warehouse renderiza la disponibilidad como
   <div class="product-availability d-block">
     <span class="badge badge-danger product-unavailable">...Sin stock</span>
   </div>
   dentro del thumbnail-container. Lo posicionamos como pill en esquina
   superior DERECHA (las product-flags van a la izquierda) para no solapar
   con flags tipo "Top Ventas", "Nuevo", etc. cuando coexisten.
   COLOR BURDEOS · mismo nivel de atención que las ofertas. */
body #category .product-miniature .thumbnail-container .product-availability,
body[id^="category"] .product-miniature .thumbnail-container .product-availability,
body .product-miniature .thumbnail-container .product-availability,
body article.product-miniature .thumbnail-container .product-availability,
body .product-miniature .product-availability.d-block,
body article.product-miniature .product-availability.d-block {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;             /* DERECHA · separamos de las flags */
    left: auto !important;
    bottom: auto !important;
    z-index: 5 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    pointer-events: none;
    /* CRÍTICO: forzar display inline-block para que NO sea flex column con
       width:0 (que era lo que cortaba el badge a "STOCK"). */
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    align-items: initial !important;
    flex-direction: initial !important;
    /* ⚠️ El tema (.product-miniature-grid .product-availability) le mete
       left:50% + transform:translateX(-50%) para centrarla. Como la
       reposicionamos arriba-derecha, hay que RESETEAR ese transform; si no,
       el translateX(-50%) residual la empuja ~44px a la izquierda (descentrada). */
    transform: none !important;
    bottom: auto !important;
}

/* Por defecto, ocultar el badge "disponible" en grid (no aporta) */
body .product-miniature .product-availability .badge.product-available,
body article.product-miniature .product-availability .badge.product-available {
    display: none !important;
}

/* El badge de UNAVAILABLE → estilo pill BURDEOS · "atención, no hay" */
body .product-miniature .product-availability .badge.product-unavailable,
body article.product-miniature .product-availability .badge.product-unavailable,
body .product-miniature .product-availability .badge.badge-danger,
body article.product-miniature .product-availability .badge.badge-danger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 5px 11px !important;
    background: var(--hk-ink-3, #9A8780) !important;      /* GRIS apagado · agotado (no grita) */
    color: var(--hk-cream, #FBF6EF) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: Inter, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;             /* texto siempre en una línea */
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-shadow: 0 1px 0 rgba(58, 44, 40, 0.06) !important;
    margin: 0 !important;
}

/* Ocultar el icono fa-ban dentro del badge (no aporta visualmente al pill) */
body .product-miniature .product-availability .badge.product-unavailable .fa,
body article.product-miniature .product-availability .badge.product-unavailable .fa,
body .product-miniature .product-availability .badge.badge-danger .fa,
body article.product-miniature .product-availability .badge.badge-danger .fa {
    display: none !important;
}

/* ── jul-2026 · "SIN STOCK" una sola etiqueta por card ────────────────────
   El pill "Sin stock" lo pinta ahora la LISTA DE FLAGS de la miniatura
   (themes/warehouse/templates/catalog/_partials/miniatures/_partials/
   product-miniature-thumb.tpl): arriba-IZQUIERDA, apilado con "Nuevo" y con
   el de descuento, igual que en la ficha de producto. Antes ese flag se
   descartaba con {continue} y el único aviso era este badge
   .product-availability — que además está oculto en el carrusel
   "También te puede gustar" de la ficha (#hkp-section-related), por lo que
   ahí no se veía nada.
   Con el pill ya en las flags, este badge sería una SEGUNDA etiqueta con el
   mismo texto en la misma imagen → se oculta en las miniaturas.
   Las reglas de posición y estilo de arriba se conservan a propósito: si
   algún día se quiere volver al badge arriba-derecha, basta con quitar este
   bloque. ⚠️ No afecta a la ficha (usa #product-availability, otro selector)
   ni al modo lista de categoría (ya estaba oculto en category.css). */
body #category .product-miniature .thumbnail-container .product-availability,
body[id^="category"] .product-miniature .thumbnail-container .product-availability,
body .product-miniature .thumbnail-container .product-availability,
body article.product-miniature .thumbnail-container .product-availability,
body .product-miniature .product-availability.d-block,
body article.product-miniature .product-availability.d-block {
    display: none !important;
}

/* También el flag out_of_stock (del array $product.flags) al mismo GRIS
   para mantener consistencia visual en TODA la tienda */
body .product-flag.out_of_stock,
body .product-flag.out-of-stock,
body li.product-flag.out_of_stock,
body li.product-flag.out-of-stock {
    background: var(--hk-ink-2, #6B5852) !important;
    color: var(--hk-cream, #FBF6EF) !important;
    backdrop-filter: none;                       /* ya no necesitamos el blur */
}

/* ── jul-2026 · "Sin stock" en miniaturas · gana a la regla DEFAULT ──────────
   El pill salía ROSA (el color por defecto de .product-flag) aunque más arriba
   hay dos reglas que lo pintan de tinta apagada. Motivo: la lista de selectores
   del DEFAULT incluye `body ul.product-flags li.product-flag`, con especificidad
   (0,2,3), MAYOR que la de `body li.product-flag.out_of_stock` (0,2,2) — y las
   dos llevan !important, así que gana la más específica, no la última.
   Le pasa lo mismo a .new/.pack/.top-seller: en categoría se salvan porque
   category.css los repite con `#category ...` (un id gana), pero .out_of_stock
   no estaba en esa lista, así que se quedaba en rosa en TODOS los listados y en
   el carrusel de la ficha. La cover de la ficha sí acertaba porque su regla va
   scopeada con `body #product ...` (1,2,2).
   Aquí subimos la especificidad del agotado a (0,4,4) para que gane sin depender
   del orden. Color = --hk-ink-2, el mismo del sticker redondo de la ficha.
   ⚠️ Si algún día se toca la lista del DEFAULT, revisar este bloque. */
body ul.product-flags li.product-flag.out_of_stock,
body ul.product-flags li.product-flag.out-of-stock,
body ul.product-flags.js-product-flags li.product-flag.out_of_stock,
body ul.product-flags.js-product-flags li.product-flag.out-of-stock,
body article.product-miniature ul.product-flags li.product-flag.out_of_stock,
body article.product-miniature ul.product-flags li.product-flag.out-of-stock {
    background: var(--hk-ink-2, #6B5852) !important;
    color: var(--hk-cream, #FBF6EF) !important;
}


/* ----- AJUSTES POR VISTA ----- */

/* En MODO LISTA de categoría, las flags se ven sobre la imagen pequeña 200px */
body .products-list .product-miniature .product-flags {
    top: 8px !important;
    left: 8px !important;
}
body .products-list .product-miniature .product-flag {
    padding: 4px 9px !important;
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
}

/* En la FICHA DE PRODUCTO las flags están al lado de la imagen grande.
   El flag "NUEVO" se renderiza como STICKER CIRCULAR mostaza rotado (-9°),
   POSICIONADO PARCIALMENTE FUERA de la imagen (top/left negativos) para
   dar sensación de etiqueta artesanal pegada al fondo.
   Los demás flags (descuento, pack, agotado) mantienen su pill normal. */
body #product .product-cover .product-flags,
body[id^="product"] .product-cover .product-flags {
    position: absolute !important;
    top: -22px !important;                          /* sobresale ~25% por arriba */
    left: -22px !important;                         /* sobresale ~25% por izquierda */
    z-index: 20 !important;                         /* por encima de TODO (imagen, ribbon) */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: transparent !important;
    pointer-events: none;
    overflow: visible !important;                   /* asegurar que el sticker no se corta */
}

/* El asomo (-22px) SOLO cabe cuando la página tiene margen lateral suficiente.
   El contenedor `.container` está capado a 1400px → por debajo de ~1480px de
   viewport no hay hueco a la izquierda y el sticker se salía por el borde de la
   página. Ahí lo metemos DENTRO de la imagen (esquina). En ≥1481px (pantallas
   anchas, con margen) se mantiene el asomo artesanal. (≤991px ya va dentro.) */
@media (max-width: 1480px) {
    body #product .product-cover .product-flags,
    body[id^="product"] .product-cover .product-flags {
        top: 10px !important;
        left: 10px !important;
    }
}

/* === STICKER "NUEVO" mostaza rotado · solo cover de ficha (no cross-sell) === */
body #product .product-cover .product-flags li.product-flag.new,
body[id^="product"] .product-cover .product-flags li.product-flag.new,
body #product .product-cover .product-flag.new,
body[id^="product"] .product-cover .product-flag.new {
    /* Resetear estilo pill anterior */
    width: 86px !important;
    height: 86px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--hk-sage-dk, #6F8568) !important;  /* NUEVO/Novedad = sage (sistema etiquetas) */
    color: var(--hk-cream, #FBF6EF) !important;
    border: 0 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: Fraunces, Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    letter-spacing: 0 !important;
    text-transform: lowercase !important;
    line-height: 1 !important;
    transform: rotate(-9deg) !important;
    box-shadow: 0 6px 20px rgba(58, 44, 40, 0.18),
                0 2px 6px rgba(58, 44, 40, 0.08) !important;
    /* Sub-texto opcional con ::after */
    position: relative;
}

/* (El sub-texto "NOVEDAD" en ::after bajo el "nuevo" era redundante — el flag ya
   dice "nuevo" — eliminado a petición del cliente. El sticker muestra solo "nuevo".) */
body #product .product-cover .product-flag.new::after,
body[id^="product"] .product-cover .product-flag.new::after {
    content: none !important;
    display: none !important;
}

/* Hover sutil del sticker · ligero scale + sombra más profunda */
body #product .product-cover .product-flag.new:hover,
body[id^="product"] .product-cover .product-flag.new:hover {
    transform: rotate(-9deg) scale(1.05) !important;
    box-shadow: 0 10px 28px rgba(58, 44, 40, 0.22),
                0 3px 8px rgba(58, 44, 40, 0.12) !important;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.25s ease;
}

/* Los demás flags en ficha (descuento, pack, agotado) → mantienen pill normal pero un poco más grande */
body #product .product-flag:not(.new):not(.discount):not(.on-sale):not(.discount-percentage):not(.discount-amount):not(.out_of_stock):not(.out-of-stock),
body[id^="product"] .product-flag:not(.new):not(.discount):not(.on-sale):not(.discount-percentage):not(.discount-amount):not(.out_of_stock):not(.out-of-stock),
body #product li.product-flag:not(.new):not(.discount):not(.on-sale):not(.discount-percentage):not(.discount-amount):not(.out_of_stock):not(.out-of-stock) {
    padding: 7px 14px !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
}

/* test buyer · FICHA: el flag de DESCUENTO (incl. descuento por cantidad) → MISMO
   sticker REDONDO bonito que el "NUEVO", pero burdeos (antes era un pill feo colgando
   fuera de la foto). El % se centra en Fraunces italic.
   EXCLUYE el carousel de cross-sell y el megamenú (esos usan pill pequeño siempre). */
body #product .product-flag.on-sale,
body #product .product-flag.discount,
body #product .product-flag.discount-percentage,
body #product .product-flag.discount-amount,
body[id^="product"] .product-flag.on-sale,
body[id^="product"] .product-flag.discount,
body[id^="product"] .product-flag.discount-percentage,
body[id^="product"] .product-flag.discount-amount {
    width: 78px !important;
    height: 78px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--hk-accent, #8A4A4A) !important;   /* descuento = burdeos */
    color: var(--hk-cream, #FBF6EF) !important;
    border: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-family: Fraunces, Georgia, serif !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1 !important;
    transform: rotate(-9deg) !important;
    box-shadow: 0 6px 20px rgba(58, 44, 40, 0.18), 0 2px 6px rgba(58, 44, 40, 0.08) !important;
}

/* FICHA: el flag "Sin stock" (agotado) → MISMO sticker REDONDO que new/descuento,
   pero en tono apagado (no es buena noticia, no debe gritar). El tema 4.7.1 lo dejaba
   como pill por defecto arriba-izquierda; antes era círculo como el resto. 2 líneas. */
body #product .product-flag.out_of_stock,
body #product .product-flag.out-of-stock,
body #product li.product-flag.out_of_stock,
body[id^="product"] .product-flag.out_of_stock,
body[id^="product"] .product-flag.out-of-stock,
body[id^="product"] li.product-flag.out_of_stock {
    width: 78px !important;
    height: 78px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--hk-ink-2, #6B5852) !important;   /* agotado = tinta apagada (neutro) */
    color: var(--hk-cream, #FBF6EF) !important;
    border: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-family: Fraunces, Georgia, serif !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    transform: rotate(-9deg) !important;
    box-shadow: 0 6px 20px rgba(58, 44, 40, 0.18), 0 2px 6px rgba(58, 44, 40, 0.08) !important;
}

/* "¡En oferta!" (on-sale) lleva TEXTO largo: a 19px no cabe en el círculo de 78px
   y se cortaba. Fuente menor + 2 líneas (white-space normal) para que entre bien.
   El "-33%" (discount-percentage) se queda a 19px porque es corto y cabe. */
body #product .product-flag.on-sale,
body[id^="product"] .product-flag.on-sale {
    font-size: 12.5px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    padding: 0 10px !important;
}

/* En el carousel "Te puede gustar" de la ficha y en el megamenú,
   el badge SIEMPRE es pill pequeño (nunca el círculo grande de la cover).
   Los selectores son más específicos que los del círculo, así vencen. */
body #product .hkh-cross--product .product-flag.on-sale,
body #product .hkh-cross--product .product-flag.discount,
body #product .hkh-cross--product .product-flag.discount-percentage,
body #product .hkh-cross--product .product-flag.discount-amount,
body[id^="product"] .hkh-cross--product .product-flag.on-sale,
body[id^="product"] .hkh-cross--product .product-flag.discount,
body[id^="product"] .hkh-cross--product .product-flag.discount-percentage,
body[id^="product"] .hkh-cross--product .product-flag.discount-amount,
body #product #hkp-section-related .product-flag.on-sale,
body #product #hkp-section-related .product-flag.discount,
body #product #hkp-section-related .product-flag.discount-percentage,
body #product #hkp-section-related .product-flag.discount-amount,
body[id^="product"] #hkp-section-related .product-flag.on-sale,
body[id^="product"] #hkp-section-related .product-flag.discount,
body[id^="product"] #hkp-section-related .product-flag.discount-percentage,
body[id^="product"] #hkp-section-related .product-flag.discount-amount,
body .cbp-hrmenu .cbp-hrsub .product-flag.on-sale,
body .cbp-hrmenu .cbp-hrsub .product-flag.discount,
body .cbp-hrmenu .cbp-hrsub .product-flag.discount-percentage,
body .cbp-hrmenu .cbp-hrsub .product-flag.discount-amount,
body #product .cbp-hrmenu .cbp-hrsub .product-flag.on-sale,
body #product .cbp-hrmenu .cbp-hrsub .product-flag.discount,
body #product .cbp-hrmenu .cbp-hrsub .product-flag.discount-percentage,
body #product .cbp-hrmenu .cbp-hrsub .product-flag.discount-amount,
body[id^="product"] .cbp-hrmenu .cbp-hrsub .product-flag.on-sale,
body[id^="product"] .cbp-hrmenu .cbp-hrsub .product-flag.discount,
body[id^="product"] .cbp-hrmenu .cbp-hrsub .product-flag.discount-percentage,
body[id^="product"] .cbp-hrmenu .cbp-hrsub .product-flag.discount-amount {
    width: auto !important;
    height: auto !important;
    border-radius: 999px !important;
    padding: 5px 11px !important;
    font-family: Inter, sans-serif !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    transform: none !important;
    box-shadow: 0 1px 0 rgba(58, 44, 40, 0.06) !important;
}

/* FICHA: badge "Sin stock" encima del precio (#product-availability.badge-danger)
   Por defecto es el badge-danger rojo de Bootstrap (fuera de estilo Hakuna).
   Lo pasamos a pill con el mismo tono que el sticker "agotado" de la foto
   (--hk-ink-2, marrón apagado) para que combine con el resto de la ficha. */
body #product #product-availability.badge-danger.product-unavailable,
body[id^="product"] #product-availability.badge-danger.product-unavailable {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--hk-ink-2, #6B5852) !important;
    color: var(--hk-cream, #FBF6EF) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 7px 16px !important;
    font-family: Inter, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    box-shadow: 0 1px 0 rgba(58, 44, 40, 0.06) !important;
}

body #product #product-availability.badge-danger.product-unavailable .fa,
body[id^="product"] #product-availability.badge-danger.product-unavailable .fa {
    font-size: 10px !important;
}

/* test buyer · FICHA: al hacer hover sobre la imagen, los flags/badges NO deben
   desaparecer. Forzamos visibilidad + z-index muy alto (por encima del zoom/rollover
   de la galería iqit, que era lo que los tapaba). */
body #product .product-flags,
body[id^="product"] .product-flags,
body #product .product-cover .product-flags,
body[id^="product"] .product-cover .product-flags,
body #product .product-cover:hover .product-flags,
body[id^="product"] .product-cover:hover .product-flags {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1000 !important;
}

/* =====================================================================
   FICHA PRODUCTO · ajustes de imagen principal (cover)
   Border-radius generoso, sin padding interno, margin justo del breadcrumb.

   IMPORTANTE: overflow VISIBLE en el .product-cover para que el sticker
   NUEVO pueda sobresalir del borde superior izquierdo como "etiqueta
   pegada al fondo". El radius y el clip de las imágenes los maneja el
   .product-images-large (swiper container interno) que tiene su propio
   overflow hidden + border-radius. */
body #product .product-cover,
body[id^="product"] .product-cover {
    position: relative !important;
    overflow: visible !important;                  /* CRÍTICO · sticker puede sobresalir */
    border-radius: 14px !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

body #product .product-cover .product-images-large,
body[id^="product"] .product-cover .product-images-large,
body #product .product-cover #product-images-large,
body[id^="product"] .product-cover #product-images-large {
    border-radius: 14px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--hk-paper, #F5EAE2) !important;
    /* CRÍTICO · forzar width 100% para que el cover se alinee con los thumbs.
       Sin esto, Swiper reduce el ancho a un valor calculado interno que es
       menor que el container y queda visualmente más estrecho que los thumbs. */
    width: 100% !important;
    max-width: 100% !important;
}

/* También los slides internos del cover deben respetar el width del padre */
body #product .product-cover .swiper-wrapper,
body[id^="product"] .product-cover .swiper-wrapper {
    width: 100% !important;
}

/* === RESET AGRESIVO de TODA la cadena de wrappers de la galería ===
   Algún wrapper intermedio (theme Warehouse o CSS de Swiper) aplica
   margin auto / max-width que reduce el ancho efectivo de la imagen
   grande, dejándola más estrecha que el grid de thumbs.
   Forzamos width:100% + margin:0 en cada nivel para descartar.

   ⚠️ 4.7.1: NO incluir aquí `.col-product-image`. En 4.5.10 esa clase era un
   wrapper INTERNO de la columna; en Warehouse 4.7.1 está SOBRE la propia
   `.col-md-6` → un width:100% la saca del grid (columna a ancho completo →
   ficha "descuadrada"). El 50% de escritorio lo da Bootstrap (col-md-6); el
   100% en <992px (1 columna) se fuerza abajo, en el @media (max-width:991px). */
body #product .images-container,
body[id^="product"] .images-container,
body #product .images-container.js-images-container,
body[id^="product"] .images-container.js-images-container,
body #product .product-cover .swiper-container,
body[id^="product"] .product-cover .swiper-container,
body #product .js-qv-mask,
body[id^="product"] .js-qv-mask {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* === COLUMNA IMAGEN STICKY ===
   La columna de imagen se queda pegada al top del viewport mientras el
   usuario hace scroll por la columna derecha (info + personalización +
   variantes + descripción larga). UX clásica de productos premium.

   IMPORTANTE: el `.row.product-info-row` padre debe tener
   align-items: flex-start (no stretch · que es el default).
   El `top` lo controla product-enhance.js dinámicamente (igual que el
   header de personalización · respeta el header del sitio Hakuna). */
body #product .col-product-image,
body[id^="product"] .col-product-image {
    position: sticky !important;
    top: 119px;                                /* CONSTANTE = header colapsado (99) + 20 de respiro.
                                                  Ya NO lo controla el JS (la sacamos de setupStickyOffset):
                                                  seguir el header EN VIVO daba un SALTO en el primer scroll,
                                                  porque el #header colapsa de ~213px (topbar + 2 filas) a 99px
                                                  de golpe y el top saltaba de ~233 a 119. Con top fijo la
                                                  imagen no se mueve nunca → sin salto. */
    align-self: flex-start !important;         /* clave para sticky en flex */
    z-index: 1;
    transition: none !important;               /* refuerzo: el tema le pone transition:all */
}

/* El row padre debe permitir que el child sticky funcione */
body #product .row.product-info-row,
body[id^="product"] .row.product-info-row {
    align-items: flex-start !important;
    overflow: visible !important;
}

/* === MÓVIL/TABLET · SIN stickys en la ficha (<992px) ===
   En <992px la ficha es de 1 columna (imagen arriba, info debajo). El sticky de
   la imagen — y los que product-enhance.js pone INLINE en el header de
   personalización (.hkp-personalize-header) y en los tabs (#hkpTabs) — "perseguían"
   el scroll y molestaban (feedback cliente · móvil). Los anulamos aquí.
   El `!important` del stylesheet gana al inline no-important que escribe el JS,
   así que no hace falta tocar el JS para esto. */
@media (max-width: 991px) {
    body #product .col-product-image,
    body[id^="product"] .col-product-image,
    body #product .hkp-personalize-box .hkp-personalize-header,
    body[id^="product"] .hkp-personalize-box .hkp-personalize-header,
    body #product #hkpTabs,
    body[id^="product"] #hkpTabs {
        position: static !important;
        top: auto !important;
    }
    /* <992px = ficha de 1 columna: la columna de imagen a ancho completo.
       (En ≥992px el 50% lo da Bootstrap col-md-6.) Ver la nota del reset de arriba. */
    body #product .col-product-image,
    body[id^="product"] .col-product-image,
    /* …y la columna de INFO también a ancho completo. Sin esto se quedaba en
       col-md-6 = 50% en el rango 768–991px (tablet VERTICAL): la imagen ocupaba
       todo el ancho y los campos de personalización quedaban al 50%, perdiendo
       la mitad derecha. (En <768px Bootstrap ya la pone al 100%; en ≥992px va a
       2 columnas como en escritorio.) */
    body #product .col-product-info,
    body[id^="product"] .col-product-info {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    /* Sticker NUEVO · con la imagen a ancho completo (≤991px) el -22px del
       "asomo" de desktop lo sacaba fuera de la pantalla → lo metemos dentro de
       la esquina. (En ≤767px, más abajo, además se reduce el círculo.) */
    body #product .product-cover .product-flags,
    body[id^="product"] .product-cover .product-flags {
        top: 10px !important;
        left: 10px !important;
    }
}

/* =====================================================================
   FICHA · TABLET (600–991px) · alto de imagen + miniaturas
   La cover es cuadrada (800×800): a ancho completo se volvía ~810px de alto y
   llenaba la pantalla. Además las miniaturas iban en rejilla de 4 col (2 filas
   enormes) → no se veía nada debajo. Aquí: (1) encogemos el CONTENEDOR de la
   cover (imagen + badge "nuevo" + ribbon "hecho en España" juntos, centrado) →
   los overlays quedan SIEMPRE alineados con la imagen real y el margen alrededor
   es el fondo de página de verdad (no un letterbox falso). La cover es cuadrada
   → max-width 55vh = alto 55vh. (2) Miniaturas en tira horizontal compacta.
   Móvil (<600px) NO se toca. Ajustable: el 55vh a gusto (≈ 48–64vh).
   ===================================================================== */
@media (min-width: 600px) and (max-width: 991px) {
    /* Cover (imagen + overlays) contenida y centrada → badge/ribbon alineados. */
    body #product .product-cover,
    body[id^="product"] .product-cover {
        max-width: 55vh !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* (Las miniaturas se compactan más abajo, DESPUÉS de su bloque base de
       rejilla 4-col, para ganar por orden de fuente · ver "MINIATURAS TABLET".) */
}

/* =====================================================================
   MEGAMENÚ HORIZONTAL · evitar el salto a 2 líneas en tablet grande
   (992–1199px · p.ej. iPad Pro 12.9" vertical ≈1024). Los 9 ítems de primer
   nivel suman ~937px y quedan al límite justo por encima de 992 → se parten.
   Compactamos SOLO el interletrado (2.3→1.3px) y quitamos separaciones
   sobrantes entre pestañas para que entren en UNA línea. En ≥1200px se mantiene
   el interletrado de marca (2.3px); en ≤991px ya hay hamburguesa (#mobile-header).
   Verificado en vivo: total 937→854px (margen ~90px a 992px).
   ===================================================================== */
@media (min-width: 992px) and (max-width: 1199px) {
    #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a,
    #iqitmegamenu-horizontal .cbp-hrmenu-tab > a {
        letter-spacing: 1.3px !important;
    }
    #iqitmegamenu-horizontal .cbp-hrmenu > ul > li {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* =====================================================================
   HEADER MÓVIL · restyle a marca (<992px)
   En móvil el tema Warehouse cambia a SU propio header
   (#mobile-header.mobile-header-style-1) — el rediseño .hkh-* es solo
   ESCRITORIO (en móvil va display:none). Por eso el header móvil se veía
   "100% versión antigua": fondo blanco con iconos FontAwesome gris #777.
   Lo llevamos a marca SIN tocar el motor del tema (mismo enfoque del resto
   del proyecto): fondo crema, iconos en TINTA, respiración y tap targets
   cómodos (≥44px). Estructura conservada: hamburguesa · buscar · logo ·
   usuario · carrito. Ref de diseño: _inbox/final-mobile.jsx · MobileHeader.
   ===================================================================== */
@media (max-width: 991px) {
    /* Barra: fondo CREMA (era blanco #FFF) + línea inferior sutil */
    body #mobile-header,
    body #mobile-header-sticky {
        background: var(--hk-cream, #FBF6EF) !important;
    }
    body #mobile-header-sticky {
        border-bottom: 1px solid var(--hk-line, #E5D5C8) !important;
        box-shadow: none !important;
    }
    /* --- HEADER MÓVIL · NO desaparecer al hacer scroll ---
       El plugin sticky-up del tema oculta el header (.stuck-up +
       translateY(-100%)) al BAJAR y lo muestra (añade .visible-stuck-up →
       translateY 0) al SUBIR. Pero al cambiar nosotros la altura del header
       (topbar/logo/iconos) sus medidas quedan obsoletas y al subir a veces NO
       vuelve → "el header desaparece". Forzamos que, cuando está FIJO (stuck),
       se quede SIEMPRE visible (sin auto-ocultar). */
    body #mobile-header-sticky.stuck-up,
    body #mobile-header-sticky.stuck-up.visible-stuck-up-scroll {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    /* Respiración lateral de la barra (iba pegada a los bordes) */
    body #mobile-header .mobile-main-bar {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    /* Iconos a TINTA (eran gris #777 = aspecto genérico/viejo) */
    body #mobile-header .m-nav-btn,
    body #mobile-header .m-nav-btn > i.fa {
        color: var(--hk-ink, #3A2C28) !important;
    }
    /* Tap target cómodo (los botones eran 31px) */
    body #mobile-header .col-mobile-btn .m-nav-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    body #mobile-header .m-nav-btn > i.fa {
        font-size: 19px !important;
    }
    /* Logo: altura contenida → barra más fina y elegante */
    body #mobile-header img.logo {
        max-height: 38px !important;
        width: auto !important;
        max-width: 72% !important;
    }
    /* Badge del carrito: burdeos + crema (coherente con el sistema) */
    body #mobile-header .cart-products-count {
        background: var(--hk-accent, #8A4A4A) !important;
        color: var(--hk-cream, #FBF6EF) !important;
    }

    /* --- Logo de TEXTO (header-mobile.js sustituye el img.logo PNG antiguo
       por la tipografía "hakuna — MATAZA —", igual que escritorio) --- */
    body #mobile-header img.logo { display: none !important; }
    body #mobile-header .hkmh-logo {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        line-height: 1;
        text-decoration: none;
    }
    body #mobile-header .hkmh-logo__main {
        font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
        font-style: italic;
        font-weight: 500;
        font-size: 25px;
        color: var(--hk-ink, #3A2C28);
        letter-spacing: .005em;
    }
    body #mobile-header .hkmh-logo__sub {
        font-family: 'Inter', 'Helvetica Neue', sans-serif;
        font-weight: 600;
        font-size: 8px;
        letter-spacing: .44em;
        text-transform: uppercase;
        color: var(--hk-ink-2, #6B5852);
        margin-top: 4px;
        padding-left: .44em;            /* compensa el tracking para centrar óptico */
    }

    /* --- Iconos SVG outline (header-mobile.js) · heredan tinta, centrados ---
       ⚠️ BUG resuelto: el tema oculta los <span> dentro de .m-nav-btn (son las
       etiquetas SR "Menu"/"Search") con una regla más específica → nuestro
       icono (que también es un <span>) heredaba ese display:none y los iconos
       "desaparecían". Se gana con especificidad extra (.m-nav-btn .hkmh-ico) +
       !important. */
    body #mobile-header .m-nav-btn .hkmh-ico,
    body #mobile-header .col-mobile-btn .hkmh-ico,
    body #mobile-header .hkmh-ico {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        color: var(--hk-ink, #3A2C28);
        line-height: 0;
    }
    body #mobile-header .hkmh-ico svg {
        display: block;
    }

    /* --- TOPBAR móvil: SOLO el primer mensaje ("Envío gratis"). La
       personalización y el WhatsApp se ven abajo (footer/menú), así arriba
       hay menos ruido (petición cliente). --- */
    body .hkh-topbar__inner > *:not(:first-child) {
        display: none !important;
    }
    body .hkh-topbar__inner {
        justify-content: center !important;
    }

    /* --- BUSCADOR viejo del tema OCULTO (#search-widget-mobile) ---
       La lupa abre NUESTRO overlay (search-overlay.js · [data-hk-search-open]),
       pero el tema ABRÍA ADEMÁS su propio buscador móvil (#search-widget-mobile,
       z-index 1000) POR DEBAJO del nuestro y ENFOCABA SU input → el cliente
       escribía en ese input (oculto bajo nuestro overlay) y "no se ponía nada".
       Ocultándolo (display:none) su input deja de ser enfocable y el foco se
       queda en el nuestro. (ESTE era "el antiguo que se cargaba por debajo".) */
    body #search-widget-mobile,
    body #mobile-btn-search .dropdown-content {
        display: none !important;
    }
}

/* =====================================================================
   FLYOUT de cuenta en MÓVIL  (header-mobile.js · clon del .hk-userdrop de
   escritorio, porteado a <body> con clase "hkmh-userflyout").
   GLOBAL (NO dentro de @media): así en ESCRITORIO también queda display:none.
   Antes la regla vivía en @media(max-width:991px) → en escritorio no aplicaba
   y el clon se quedaba SUELTO al final del <body> (el "duplicado abajo").
   El clon conserva .hk-userdrop__menu (estilos internos) pero PIERDE la
   TARJETA, que vive en `.hk-userdrop .dropdown-menu.hk-userdrop__menu` (mi clon
   no tiene ni .dropdown-menu ni el ancestro .hk-userdrop) → la REPLICAMOS aquí.
   En móvil lo abre el icono de usuario; cierra al pulsar fuera o ESC.
   ===================================================================== */
body .hkmh-userflyout {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    background: #FBF6EF !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 100050 !important;
    transform: none !important;
    display: none !important;
}
body .hkmh-userflyout.is-open { display: block !important; }
body.hkmh-fly-open { overflow: hidden !important; }

/* Topbar sticky del flyout a pantalla completa (botón cerrar) */
.hkmh-flyout-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #E5D5C8;
    position: sticky;
    top: 0;
    background: #FBF6EF;
    z-index: 5;
}
.hkmh-flyout-label {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6B5852;
}
.hkmh-flyout-close {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: #3A2C28;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0;
    transition: background 0.18s ease;
}
.hkmh-flyout-close:hover { background: rgba(58, 44, 40, 0.08); }
/* Contenido interior: max 480px centrado (legible en pantallas anchas) */
body .hkmh-userflyout .hk-userdrop__head,
body .hkmh-userflyout .hk-userdrop__card,
body .hkmh-userflyout .hk-userdrop__cta-wrap,
body .hkmh-userflyout .hk-userdrop__promo,
body .hkmh-userflyout .hk-userdrop__nav,
body .hkmh-userflyout .hk-userdrop__foot,
body .hkmh-userflyout .hk-userdrop__guest-head,
body .hkmh-userflyout .hk-userdrop__deco {
    max-width: 480px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Los swiper-slides del cover · ancho del slide = 100% del wrapper.
   Swiper inyecta inline style="width: 590px" pero queremos 100%. */
body #product .product-cover .swiper-slide,
body[id^="product"] .product-cover .swiper-slide,
body #product #product-images-large .swiper-slide,
body[id^="product"] #product-images-large .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body #product .product-cover .swiper-slide img,
body[id^="product"] .product-cover .swiper-slide img,
body #product .product-cover .product-lmage-large img,
body[id^="product"] .product-cover .product-lmage-large img {
    border-radius: 14px !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* =====================================================================
   TRUST RIBBON · 3 badges sobre la parte inferior de la imagen
   "Hecho en España · Revisado a mano · Hecho con amor"
   Estilo: pill cream con backdrop blur, iconos sage dk, texto ink upper.
   ===================================================================== */
body .hm-trust-ribbon {
    position: absolute !important;
    bottom: 14px;
    left: 14px;
    right: 14px;
    z-index: 6;
    background: rgba(251, 246, 239, 0.95);       /* cream 95% */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 10px 14px;
    border-radius: 999px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(58, 44, 40, 0.08),
                0 1px 2px rgba(58, 44, 40, 0.04);
    pointer-events: none;                         /* no captura clicks sobre la galería */
}

body .hm-trust-ribbon .hm-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 1 auto;
}

body .hm-trust-ribbon .hm-trust-icon {
    color: var(--hk-sage-dk, #6F8568);
    flex-shrink: 0;
    display: block;
}

body .hm-trust-ribbon .hm-trust-text {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hk-ink, #3A2C28);
    white-space: nowrap;
    line-height: 1.2;
}

/* === RIBBON desaparece en HOVER del cover ===
   Cuando el usuario hace hover sobre la imagen grande, las flechas del swiper
   aparecen (es el comportamiento del theme). Para mantener consistencia visual,
   el sticker NUEVO y el trust ribbon se desvanecen suavemente. Cuando el cursor
   sale del cover, vuelven a aparecer con fade.

   Aplico también al sticker (product-flags) para que el comportamiento sea
   explícito y no dependa solo de la opacidad heredada del theme. */
body .hm-trust-ribbon,
body #product .product-cover .product-flags,
body[id^="product"] .product-cover .product-flags {
    transition: opacity 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
}

/* test buyer: al hacer hover sobre la imagen, el trust ribbon de abajo y los flags
   NO deben desaparecer (antes se desvanecían a opacity:0). Se mantienen visibles
   (pointer-events:none para que el click siga llegando a la imagen/zoom). */
body #product .product-cover:hover .hm-trust-ribbon,
body[id^="product"] .product-cover:hover .hm-trust-ribbon,
body #product .product-cover:hover .product-flags,
body[id^="product"] .product-cover:hover .product-flags {
    opacity: 1 !important;
    pointer-events: none !important;
}

/* Responsive · móvil: ribbon más compacto, posible wrap si no cabe */
@media (max-width: 575px) {
    body .hm-trust-ribbon {
        padding: 8px 12px;
        gap: 6px;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }
    body .hm-trust-ribbon .hm-trust-text {
        font-size: 9px;
        letter-spacing: 0.06em;
    }
    body .hm-trust-ribbon .hm-trust-icon {
        width: 12px;
        height: 12px;
    }
    body .hm-trust-ribbon .hm-trust-item {
        gap: 5px;
    }
}

/* =====================================================================
   THUMBNAILS · ajuste de spacing
   - Separación TOP respecto a la imagen principal (margin-top wrapper)
   - Separación HORIZONTAL entre thumbs reducida (override de Swiper)
   ===================================================================== */
body #product .js-qv-mask,
body[id^="product"] .js-qv-mask,
body #product #product-images-thumbs,
body[id^="product"] #product-images-thumbs {
    margin-top: 20px !important;            /* respiración entre cover y thumbs */
    margin-left: 0 !important;               /* el theme aplica -7px · forzamos 0 para alinear con cover */
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* =====================================================================
   FICHA PRODUCTO · TÍTULO H1 con split editorial
   "Marco libro personalizado · Diseño Pareja"
                ↓
   Marco libro personalizado    ← serif Fraunces 400 ink
   Diseño Pareja                 ← serif Fraunces italic burdeos (acento)

   El split lo hace el template (regex en product.tpl). El CSS estiliza
   cada parte. Si el producto no tiene guión, el nombre completo va como
   el "acento" (italic burdeos).
   ===================================================================== */
body #product .hkp-title,
body #product h1.hkp-title,
body[id^="product"] .hkp-title {
    font-family: Fraunces, Georgia, serif !important;
    font-size: clamp(28px, 3.4vw, 44px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    color: var(--hk-ink, #3A2C28) !important;
    letter-spacing: -0.01em !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    text-transform: none !important;
}

/* El <span> wrapper interno (legacy del theme · forzar block para layout) */
body #product .hkp-title > span,
body[id^="product"] .hkp-title > span {
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Primera parte · "Marco libro personalizado" · ink, en su propia línea */
body #product .hkp-title .hkp-title-first,
body[id^="product"] .hkp-title .hkp-title-first {
    display: block !important;
    color: var(--hk-ink, #3A2C28) !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

/* Segunda parte · "Diseño Pareja" · italic burdeos, en línea siguiente */
body #product .hkp-title .hkp-title-em,
body[id^="product"] .hkp-title .hkp-title-em {
    display: block !important;
    color: var(--hk-accent, #8A4A4A) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    margin-top: 2px !important;          /* leve separación · más editorial que br */
}

/* === EYEBROW · categoría del producto (BODAS · MARCOS estilo design) === */
body #product .hkp-eyebrow,
body[id^="product"] .hkp-eyebrow {
    display: inline-block !important;
    font-family: Inter, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--hk-accent, #8A4A4A) !important;
    margin: 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* === RATING widget (FAKE · placeholder de Revi) === */
body #product .hkp-rating-fake,
body[id^="product"] .hkp-rating-fake {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    flex-wrap: wrap;
}

body #product .hkp-rating-fake .hkp-rating-stars,
body[id^="product"] .hkp-rating-fake .hkp-rating-stars {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    color: var(--hk-accent, #8A4A4A) !important;     /* estrellas = burdeos (valoración/énfasis, no acción) */
    line-height: 0;
}

body #product .hkp-rating-fake .hkp-rating-stars svg,
body[id^="product"] .hkp-rating-fake .hkp-rating-stars svg {
    display: block;
    flex-shrink: 0;
}

body #product .hkp-rating-fake .hkp-rating-text,
body[id^="product"] .hkp-rating-fake .hkp-rating-text {
    font-family: Inter, sans-serif !important;
    font-size: 12px !important;
    color: var(--hk-ink2, #6B5852) !important;
    line-height: 1.4 !important;
}

body #product .hkp-rating-fake .hkp-rating-text strong,
body[id^="product"] .hkp-rating-fake .hkp-rating-text strong {
    color: var(--hk-ink, #3A2C28) !important;
    font-weight: 700 !important;
}

/* === DESCRIPCIÓN CORTA y resto del bloque info · alineado a la IZQUIERDA ===
   El theme Warehouse aplica text-align: center heredado a la columna del
   producto. Lo forzamos a left para coherencia editorial con el design. */
body #product .col-product-info,
body[id^="product"] .col-product-info,
body #product .col-product-info *,
body[id^="product"] .col-product-info * {
    text-align: left !important;
}

/* === GAP entre columna imagen y columna info ·
   Bootstrap aplica padding 15px por defecto a cada col, lo que deja muy
   pegadas la imagen y el texto. Añadimos 35px extra de padding-left a la
   columna info SOLO en desktop (en móvil se apilan y no aplica). */
@media (min-width: 992px) {
    body #product .col-product-info,
    body[id^="product"] .col-product-info {
        padding-left: 50px !important;
    }
}
@media (min-width: 1280px) {
    body #product .col-product-info,
    body[id^="product"] .col-product-info {
        padding-left: 70px !important;
    }
}

/* Excepción: los precios y badges pueden mantener su alineación específica
   si lo necesitan, pero por defecto van a la izquierda. */
body #product .col-product-info .hkp-eyebrow,
body[id^="product"] .col-product-info .hkp-eyebrow,
body #product .col-product-info .hkp-title,
body[id^="product"] .col-product-info .hkp-title,
body #product .col-product-info .hkp-rating-fake,
body[id^="product"] .col-product-info .hkp-rating-fake {
    text-align: left !important;
}

/* === EM dentro de la descripción del producto · FRAUNCES ITALIC BURDEOS ===
   Convención editorial Hakuna: la última frase en italic de la descripción
   funciona como "remate emocional" del copywriting. Le damos:
     - Fraunces serif (más editorial que Inter del body)
     - italic
     - color burdeos accent
   El usuario suele encerrar la descripción del producto en un div
   `.resumen-producto` con CSS custom · cubrimos AMBOS selectores (el genérico
   y el específico de .resumen-producto) con specificity ALTA para ganar. */
body #product .col-product-info em,
body[id^="product"] .col-product-info em,
body #product .product-information em,
body[id^="product"] .product-information em,
body #product .product-description em,
body[id^="product"] .product-description em,
body #product .product-description-short em,
body[id^="product"] .product-description-short em,
body #product .col-product-info p em,
body[id^="product"] .col-product-info p em,
body #product .resumen-producto em,
body #product .resumen-producto p em,
body[id^="product"] .resumen-producto em,
body[id^="product"] .resumen-producto p em,
body #product .col-product-info .resumen-producto em,
body #product .col-product-info .resumen-producto p em,
body[id^="product"] .col-product-info .resumen-producto em,
body[id^="product"] .col-product-info .resumen-producto p em {
    font-family: Fraunces, Georgia, serif !important;
    color: var(--hk-accent, #8A4A4A) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 17px !important;                  /* fijo en lugar de em · evita escalado raro */
    line-height: 1.45 !important;
    letter-spacing: -0.005em !important;
}

/* Si el <em> es el ÚNICO contenido de un <p> (frase de cierre editorial),
   añadirle más respiración arriba para separarlo del párrafo anterior */
body #product .col-product-info p:has(> em:only-child),
body[id^="product"] .col-product-info p:has(> em:only-child),
body #product .resumen-producto p:has(> em:only-child),
body[id^="product"] .resumen-producto p:has(> em:only-child) {
    margin-top: 18px !important;
}

/* =====================================================================
   FICHA PRODUCTO · BLOQUE DE PERSONALIZACIÓN (Claude Design)
   Estructura:
     .hkp-personalize-box
       .hkp-personalize-header (mustard)
       .hkp-personalize-body (formulario)
       .hkp-personalize-footer (aviso)

   Estado dinámico:
     - default: status pill cream "Para personalizar"
     - .hkp-is-editing: status pill ink "Editando" + dot pulsante

   El estado se aplica via JS en product-enhance.js cuando un input
   dentro del .hkp-personalize-body recibe focus.
   ===================================================================== */

/* === CAJA EXTERIOR · border mustard, radius 12, cream ===
   IMPORTANTE: overflow VISIBLE (no hidden) para que el header pueda usar
   position: sticky dentro de la caja. El clip de las esquinas redondeadas
   lo manejamos individualmente en .hkp-personalize-header (top-radius) y
   .hkp-personalize-footer (bottom-radius). */
body #product .hkp-personalize-box,
body[id^="product"] .hkp-personalize-box {
    background: var(--hk-cream, #FBF6EF) !important;
    border: 1.5px solid var(--hk-sage-dk, #6F8568) !important;   /* marco perso = sage (calma), no mostaza */
    border-radius: 12px !important;
    overflow: visible !important;             /* CRÍTICO · sticky requiere esto */
    margin: 26px 0 0 !important;
    padding: 0 !important;
    box-shadow: 0 4px 18px rgba(58, 44, 40, 0.05);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;                       /* contexto para sticky child */
}

body #product .hkp-personalize-box.hkp-is-editing,
body[id^="product"] .hkp-personalize-box.hkp-is-editing {
    box-shadow: 0 8px 28px rgba(111, 133, 104, 0.18);
    border-color: var(--hk-sage-dk, #6F8568) !important;
}

/* === HEADER MUSTARD STICKY · emoji + step/hint + status ===
   El header se pega al borde EXACTO del viewport cuando se hace scroll.
   Top: 0 → sin hueco arriba · el header queda al lado del top.

   El header del sitio Hakuna se oculta al hacer scroll-down (hide-on-scroll),
   por lo que no hay solapamiento durante el scroll. Cuando el usuario
   sube y el header del sitio reaparece, lo hace con z-index mayor y queda
   por encima · comportamiento visual aceptable. */
body #product .hkp-personalize-box .hkp-personalize-header,
body[id^="product"] .hkp-personalize-box .hkp-personalize-header {
    /* Color nuevo (mayo 2026, Cata + Design):
       fondo paper cálido limpio · el mustard sólido era demasiado dominante.
       El acento mustard vive ahora SOLO en la caja del icono lápiz. */
    background: #EFDFD3;                      /* rgb(239, 223, 211) */
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    /* STICKY · el `top` lo controla product-enhance.js dinámicamente
       (mide el bottom del header del sitio en cada scroll para pegarse
       justo debajo, sin hueco ni solape). Si JS no carga, fallback top:0. */
    position: sticky;
    top: 0;                                   /* fallback · JS lo sobrescribe */
    z-index: 5;
    /* Border-radius arriba para que respete las esquinas de la caja
       (el box ya no tiene overflow hidden) */
    border-top-left-radius: 10px;             /* 12 - 1.5 border */
    border-top-right-radius: 10px;
    /* Sombra sutil cuando está stuck arriba · feedback visual */
    box-shadow: 0 2px 6px rgba(58, 44, 40, 0);
    transition: box-shadow 0.2s ease;
}

/* Cuando está stuck (header arriba del viewport), añadir sombra más visible.
   Es una sombra siempre visible pero solo cobra protagonismo cuando hay
   contenido debajo · suficientemente sutil para no chocar. */
body #product .hkp-personalize-box .hkp-personalize-header:hover,
body[id^="product"] .hkp-personalize-box .hkp-personalize-header:hover {
    box-shadow: 0 2px 8px rgba(58, 44, 40, 0.08);
}

/* Icono lápiz · contenedor en mustard suave con SVG ink dentro (estilo design).
   Tamaño 34x34 con padding · cuadrado redondeado · destaca sin gritar.
   Legacy: .hkp-personalize-emoji se mantiene por si algún template viejo lo usa. */
body #product .hkp-personalize-box .hkp-personalize-icon,
body[id^="product"] .hkp-personalize-box .hkp-personalize-icon,
body #product .hkp-personalize-box .hkp-personalize-emoji,
body[id^="product"] .hkp-personalize-box .hkp-personalize-emoji {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--hk-sage-dk, #6F8568);   /* sage · acento secundario (mostaza reservado a CTAs) */
    color: var(--hk-cream, #FBF6EF);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;                          /* fallback para .hkp-personalize-emoji legacy */
    line-height: 1;
}
body #product .hkp-personalize-box .hkp-personalize-icon svg,
body[id^="product"] .hkp-personalize-box .hkp-personalize-icon svg {
    display: block;
}

body #product .hkp-personalize-box .hkp-personalize-header-text,
body[id^="product"] .hkp-personalize-box .hkp-personalize-header-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body #product .hkp-personalize-box .hkp-personalize-step,
body[id^="product"] .hkp-personalize-box .hkp-personalize-step {
    font-family: Inter, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--hk-ink, #3A2C28) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

body #product .hkp-personalize-box .hkp-personalize-hint,
body[id^="product"] .hkp-personalize-box .hkp-personalize-hint {
    font-family: Inter, sans-serif !important;
    font-size: 11.5px !important;
    color: var(--hk-ink2, #6B5852) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

/* === STATUS PILL · default cream "Sin empezar" ===
   Permite que se quede en la primera línea si cabe, o que pase a una segunda
   línea ocupando el ancho disponible (sin truncar). flex: 0 1 auto + min-width: 0
   = puede comprimirse hasta su contenido pero no se hace shrink agresivo. */
body #product .hkp-personalize-box .hkp-personalize-status,
body[id^="product"] .hkp-personalize-box .hkp-personalize-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: rgba(46, 37, 32, 0.10) !important;        /* ink 10% sobre mustard */
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-family: Inter, sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--hk-ink, #3A2C28) !important;
    line-height: 1.2 !important;
    transition: background 0.2s ease, color 0.2s ease;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El span interno con el texto · puede truncar con ellipsis si excede */
body #product .hkp-personalize-box .hkp-personalize-status-text,
body[id^="product"] .hkp-personalize-box .hkp-personalize-status-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

body #product .hkp-personalize-box .hkp-personalize-dot,
body[id^="product"] .hkp-personalize-box .hkp-personalize-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--hk-ink, #3A2C28);
    box-shadow: 0 0 0 3px rgba(46, 37, 32, 0.18);
    flex-shrink: 0;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* === STATUS PILL · estado EDITANDO (al focus en input) === */
body #product .hkp-personalize-box.hkp-is-editing .hkp-personalize-status,
body[id^="product"] .hkp-personalize-box.hkp-is-editing .hkp-personalize-status {
    background: var(--hk-ink, #3A2C28) !important;
    color: var(--hk-cream, #FBF6EF) !important;
}

body #product .hkp-personalize-box.hkp-is-editing .hkp-personalize-dot,
body[id^="product"] .hkp-personalize-box.hkp-is-editing .hkp-personalize-dot {
    background: var(--hk-sage-dk, #6F8568);
    box-shadow: 0 0 0 3px rgba(111, 133, 104, 0.4);
    animation: hkp-dot-pulse 1.4s ease-in-out infinite;
}

@keyframes hkp-dot-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(111, 133, 104, 0.4);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(111, 133, 104, 0.6);
    }
}

/* === BODY · formulario con campos === */
body #product .hkp-personalize-box .hkp-personalize-body,
body[id^="product"] .hkp-personalize-box .hkp-personalize-body {
    padding: 22px 22px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

body #product .hkp-personalize-box .hkp-personalize-body > form > ul,
body[id^="product"] .hkp-personalize-box .hkp-personalize-body > form > ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

/* === CAMPO INDIVIDUAL (.hkp-field) · estado default + active === */
body #product .hkp-personalize-box .hkp-field,
body[id^="product"] .hkp-personalize-box .hkp-field {
    position: relative;
    padding: 8px 12px 10px !important;
    border: 1.5px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    transition: border-color 0.22s ease, background 0.22s ease;
    margin: 0 !important;
    list-style: none !important;
}

/* Al hacer focus dentro del campo · borde mostaza + fondo paper sutil */
body #product .hkp-personalize-box .hkp-field.hkp-field-active,
body[id^="product"] .hkp-personalize-box .hkp-field.hkp-field-active {
    border-color: var(--hk-sage-dk, #6F8568) !important;
    background: rgba(111, 133, 104, 0.06) !important;
}

/* === LABEL ESTRUCTURADO · dot + título + sep + hint === */
body #product .hkp-personalize-box .hkp-field-label,
body[id^="product"] .hkp-personalize-box .hkp-field-label {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    cursor: pointer;
    line-height: 1.3;
}

/* DOT mostaza · solo visible cuando el campo está active */
body #product .hkp-personalize-box .hkp-field-dot,
body[id^="product"] .hkp-personalize-box .hkp-field-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--hk-sage-dk, #6F8568);
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.22s ease, transform 0.22s ease;
    display: inline-block;
}

body #product .hkp-personalize-box .hkp-field.hkp-field-active .hkp-field-dot,
body[id^="product"] .hkp-personalize-box .hkp-field.hkp-field-active .hkp-field-dot {
    opacity: 1;
    transform: scale(1);
}

/* TÍTULO del campo · Inter UPPERCASE 600 ink */
body #product .hkp-personalize-box .hkp-field-title,
body[id^="product"] .hkp-personalize-box .hkp-field-title {
    font-family: Inter, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--hk-ink, #3A2C28) !important;
    line-height: 1.2 !important;
}

/* SEPARADOR vertical visible (|) entre título y hint · estilo design */
body #product .hkp-personalize-box .hkp-field-sep,
body[id^="product"] .hkp-personalize-box .hkp-field-sep {
    width: 1px;
    height: 12px;
    background: rgba(58, 44, 40, 0.3);             /* más visible que antes (era 0.18) */
    display: inline-block;
    flex-shrink: 0;
    margin: 0 2px;
}

/* HINT · sutil, Inter normal con letra DIFERENTE al título uppercase */
body #product .hkp-personalize-box .hkp-field-hint,
body[id^="product"] .hkp-personalize-box .hkp-field-hint {
    font-family: Inter, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    color: var(--hk-ink2, #6B5852) !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;             /* sin tracking · contrasta con el title UPPERCASE */
    text-transform: none !important;          /* MUY IMPORTANTE: NO uppercase (texto normal) */
    opacity: 0.95;
    font-style: normal;
}

/* La palabra "Ejm:" en italic dentro del hint · estilo editorial sutil
   Como no podemos usar :first-word, usamos un span specific.
   Si quieres que "Ejm:" se vea italic, lo dejamos como está · todo el hint
   en Inter regular ink2 es suficiente diferencia con el title UPPERCASE. */

/* === CONTADOR "Te quedan X caracteres" === */
body #product .hkp-personalize-box .hkp-field-counter,
body[id^="product"] .hkp-personalize-box .hkp-field-counter {
    display: block !important;
    text-align: right !important;
    font-family: Inter, sans-serif !important;
    font-size: 11px !important;
    color: var(--hk-ink2, #6B5852) !important;
    opacity: 0.7;
    margin-top: 6px !important;
    float: none !important;                 /* anular el float-xs-right del template */
}

/* === INPUT / TEXTAREA / FILE INPUT styles editorial Hakuna === */
body #product .hkp-personalize-box textarea,
body[id^="product"] .hkp-personalize-box textarea,
body #product .hkp-personalize-box input[type="text"],
body[id^="product"] .hkp-personalize-box input[type="text"] {
    width: 100% !important;
    background: var(--hk-white, #FFFFFF) !important;    /* fondo BLANCO al escribir (no rosa) · no cansa la vista */
    border: 1px solid var(--hk-line, #E5D5C8) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-family: Inter, sans-serif !important;
    font-size: 13.5px !important;
    color: var(--hk-ink, #3A2C28) !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
    resize: vertical;
    min-height: 44px;
}

body #product .hkp-personalize-box textarea:focus,
body[id^="product"] .hkp-personalize-box textarea:focus,
body #product .hkp-personalize-box input[type="text"]:focus,
body[id^="product"] .hkp-personalize-box input[type="text"]:focus {
    background: var(--hk-white, #FFFFFF) !important;
    border-color: var(--hk-sage-dk, #6F8568) !important;    /* resalte campo activo = sage suave (calma, no marea) */
    box-shadow: 0 0 0 3px rgba(111, 133, 104, 0.18) !important;
}

body #product .hkp-personalize-box textarea::placeholder,
body[id^="product"] .hkp-personalize-box textarea::placeholder,
body #product .hkp-personalize-box input::placeholder,
body[id^="product"] .hkp-personalize-box input::placeholder {
    color: var(--hk-ink3, #9B8A82) !important;
    opacity: 0.85;
    font-style: normal;
}

/* === FILE INPUT integrado en una sola línea (Claude Design) =========
   Layout:
     ┌─────────────────────────────────┬───────────────┐
     │ Sube una foto JPG/PNG           │ 🗂 SELECCIONAR │
     └─────────────────────────────────┴───────────────┘

   El <input type="file"> nativo queda visualmente oculto pero accesible
   (técnica sr-only). Los dos <label for="..."> abren el file picker al
   hacer click. El span .js-file-name se actualiza vía JS al elegir archivo.
*/
body #product .hkp-personalize-box .hkp-file-row,
body[id^="product"] .hkp-personalize-box .hkp-file-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--hk-white, #FFFFFF);
    border: 1px solid var(--hk-line, #E5D5C8);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

body #product .hkp-personalize-box .hkp-file-row:focus-within,
body[id^="product"] .hkp-personalize-box .hkp-file-row:focus-within {
    border-color: var(--hk-sage-dk, #6F8568);
    box-shadow: 0 0 0 3px rgba(111, 133, 104, 0.18);
}

/* "Input fake" · label que muestra el nombre del archivo o placeholder */
body #product .hkp-personalize-box .hkp-file-fake,
body[id^="product"] .hkp-personalize-box .hkp-file-fake {
    flex: 1 1 auto;
    min-width: 0;                              /* permite truncar nombres largos */
    margin: 0;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
    background: transparent;
    border: 0;
    font-family: Inter, sans-serif;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--hk-ink, #3A2C28);
}

body #product .hkp-personalize-box .hkp-file-fake-text,
body[id^="product"] .hkp-personalize-box .hkp-file-fake-text {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mientras el nombre coincide con el placeholder, color "muted" (sin archivo).
   Cuando JS lo cambia con el nombre real del archivo, se ve en color ink normal. */
body #product .hkp-personalize-box .hkp-file-fake-text:empty,
body[id^="product"] .hkp-personalize-box .hkp-file-fake-text:empty {
    color: var(--hk-ink3, #9B8A82);
}

/* El input nativo oculto pero accesible (sr-only) */
body #product .hkp-personalize-box .hkp-file-input,
body[id^="product"] .hkp-personalize-box .hkp-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Botón "SELECCIONAR" · ink con icono carpeta + label uppercase */
body #product .hkp-personalize-box .hkp-file-btn,
body[id^="product"] .hkp-personalize-box .hkp-file-btn {
    flex-shrink: 0;
    margin: 0;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--hk-ink, #3A2C28);
    color: #FFF;
    font-family: Inter, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    transition: background 0.18s ease;
}
body #product .hkp-personalize-box .hkp-file-btn:hover,
body[id^="product"] .hkp-personalize-box .hkp-file-btn:hover {
    background: #2A1F1C;
}
body #product .hkp-personalize-box .hkp-file-btn svg,
body[id^="product"] .hkp-personalize-box .hkp-file-btn svg {
    flex-shrink: 0;
}

/* Preview de imagen ya subida (cuando is_customized) */
body #product .hkp-personalize-box .hkp-file-preview,
body[id^="product"] .hkp-personalize-box .hkp-file-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
body #product .hkp-personalize-box .hkp-file-preview img,
body[id^="product"] .hkp-personalize-box .hkp-file-preview img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--hk-line, #E5D5C8);
}
body #product .hkp-personalize-box .hkp-file-preview .remove-image,
body[id^="product"] .hkp-personalize-box .hkp-file-preview .remove-image {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: var(--hk-accent, #8A4A4A);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Ocultar el counter ".png .jpg .gif" antiguo si todavía aparece (compatibilidad)
   El layout integrado ya implica los formatos vía accept="..." del input. */
body #product .hkp-personalize-box li.hkp-field .hkp-field-counter[data-legacy="formats"],
body[id^="product"] .hkp-personalize-box li.hkp-field .hkp-field-counter[data-legacy="formats"] {
    display: none !important;
}

/* Defensa anti bootstrap-filestyle ·
   El theme Warehouse usa $('.file-input').filestyle({...}) que genera
   <div class="bootstrap-filestyle"> con su propio botón. Si por cache de
   JS o cualquier otra vía el wrapper se cuela dentro de la caja de
   personalización, lo escondemos. Nuestro botón .hkp-file-btn es el oficial. */
body #product .hkp-personalize-box .bootstrap-filestyle,
body[id^="product"] .hkp-personalize-box .bootstrap-filestyle {
    display: none !important;
}

/* === FOOTER · aviso "Cada detalle cuenta" + emoji 💛 ===
   Border-radius abajo para que respete las esquinas de la caja
   (el box ya no tiene overflow hidden por el sticky del header). */
body #product .hkp-personalize-box .hkp-personalize-footer,
body[id^="product"] .hkp-personalize-box .hkp-personalize-footer {
    background: rgba(255, 248, 220, 0.6);                 /* cream cálido leve */
    padding: 14px 22px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-top: 1px solid var(--hk-line-soft, #F3E7DC);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

body #product .hkp-personalize-box .hkp-personalize-warning-emoji,
body[id^="product"] .hkp-personalize-box .hkp-personalize-warning-emoji {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--hk-accent, #8A4A4A);
    display: inline-flex;
}
body #product .hkp-personalize-box .hkp-personalize-warning-emoji svg,
body[id^="product"] .hkp-personalize-box .hkp-personalize-warning-emoji svg {
    display: block;
}

body #product .hkp-personalize-box .hkp-personalize-warning-text,
body[id^="product"] .hkp-personalize-box .hkp-personalize-warning-text {
    font-family: Inter, sans-serif !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: var(--hk-ink2, #6B5852) !important;
    flex: 1 1 auto;
}

body #product .hkp-personalize-box .hkp-personalize-warning-text strong,
body[id^="product"] .hkp-personalize-box .hkp-personalize-warning-text strong {
    color: var(--hk-ink, #3A2C28) !important;
    font-weight: 700 !important;
}

/* Responsive · móvil: header se apila vertical, status va abajo */
@media (max-width: 575px) {
    body #product .hkp-personalize-box .hkp-personalize-header {
        padding: 14px 16px;
    }
    body #product .hkp-personalize-box .hkp-personalize-status {
        margin-left: auto;
    }
    body #product .hkp-personalize-box .hkp-personalize-body {
        padding: 18px 16px !important;
    }
    body #product .hkp-personalize-box .hkp-personalize-footer {
        padding: 12px 16px;
    }
}

/* =====================================================================
   FICHA PRODUCTO · VARIANTES/COMBINACIONES (Claude Design)
   - Cards visuales para radio (tipografía, opciones)
   - Swatches refinados para color
   - Select estilizado con flecha custom
   ===================================================================== */

body #product .hkp-variants,
body[id^="product"] .hkp-variants {
    margin: 26px 0 0 !important;
    background: var(--hk-paper, #F5EAE2) !important;
    border-radius: 12px !important;
    padding: 22px !important;
    box-sizing: border-box !important;
}
/* test buyer: en productos SIN combinación, .hkp-variants queda VACÍO pero con fondo
   paper → salía una "card rosa vacía" bajo la personalización. La ocultamos. */
body #product .hkp-variants:empty,
body[id^="product"] .hkp-variants:empty,
body #product .hkp-variants:not(:has(.hkp-variants-group)),
body[id^="product"] .hkp-variants:not(:has(.hkp-variants-group)) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Cada grupo de atributos · separación entre grupos */
body #product .hkp-variants .hkp-variants-group,
body[id^="product"] .hkp-variants .hkp-variants-group {
    margin: 0 0 22px !important;
    padding: 0 !important;
    float: none !important;
}

body #product .hkp-variants .hkp-variants-group:last-child,
body[id^="product"] .hkp-variants .hkp-variants-group:last-child {
    margin-bottom: 0 !important;
}

/* === HEADER del grupo · nombre + hint === */
body #product .hkp-variants .hkp-variants-head,
body[id^="product"] .hkp-variants .hkp-variants-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
}

body #product .hkp-variants .hkp-variants-name,
body[id^="product"] .hkp-variants .hkp-variants-name {
    font-family: Inter, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--hk-ink, #3A2C28) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body #product .hkp-variants .hkp-variants-hint,
body[id^="product"] .hkp-variants .hkp-variants-hint {
    font-family: Inter, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    color: var(--hk-ink2, #6B5852) !important;
    line-height: 1.3 !important;
    opacity: 0.85;
    margin: 0 !important;
}

/* === OPTIONS · pills alineadas a la IZQUIERDA (flex-wrap) ===
   Coherente con los pickers de diseño (los de fotos), que van a la izquierda.
   Antes iban centradas (justify-center); el cliente prefiere todo a la izquierda
   para un look más ordenado y homogéneo. */
body #product .hkp-variants .hkp-variants-options,
body[id^="product"] .hkp-variants .hkp-variants-options {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: none !important;
}
body #product .hkp-variants .hkp-variant-card,
body[id^="product"] .hkp-variants .hkp-variant-card {
    flex: 0 1 150px !important;
}

/* === CARD individual (label envolvente del radio input) === */
body #product .hkp-variants .hkp-variant-card,
body[id^="product"] .hkp-variants .hkp-variant-card {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 60px;
    padding: 14px 10px !important;
    background: var(--hk-paper, #F5EAE2) !important;
    border: 1.5px solid var(--hk-line, #E5D5C8) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    overflow: hidden;
    text-align: center;
    margin: 0 !important;
}

body #product .hkp-variants .hkp-variant-card:hover,
body[id^="product"] .hkp-variants .hkp-variant-card:hover {
    border-color: rgba(138, 74, 74, 0.4) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(58, 44, 40, 0.04);
}

/* Card SELECCIONADA · border BURDEOS + fondo cream + check visible (selección = burdeos) */
body #product .hkp-variants .hkp-variant-card.hkp-variant-selected,
body[id^="product"] .hkp-variants .hkp-variant-card.hkp-variant-selected,
body #product .hkp-variants .hkp-variant-card:has(input:checked),
body[id^="product"] .hkp-variants .hkp-variant-card:has(input:checked) {
    border-color: var(--hk-accent, #8A4A4A) !important;
    background: var(--hk-cream, #FBF6EF) !important;
    box-shadow: 0 0 0 1px var(--hk-accent, #8A4A4A) inset, 0 4px 12px rgba(138, 74, 74, 0.12);
}

/* Input radio · oculto pero accesible */
body #product .hkp-variants .hkp-variant-input,
body[id^="product"] .hkp-variants .hkp-variant-input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0;
    height: 0;
}

/* Nombre del attribute · Fraunces serif por defecto (más editorial) */
body #product .hkp-variants .hkp-variant-name,
body[id^="product"] .hkp-variants .hkp-variant-name {
    font-family: Fraunces, Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--hk-ink, #3A2C28) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.005em !important;
    width: 100% !important;          /* test buyer: el nombre ocupa toda la card… */
    text-align: center !important;   /* …y se centra (el check va en la esquina, no descoloca) */
}

/* === TIPOGRAFÍA · cards con nombre simple (sin preview) ===
   Decisión usuario: las fuentes reales no encajan porque tiene múltiples
   diseños con el mismo nombre pero distintas fuentes (ej: 2 "manuscrita"
   con tipografías distintas). Mejor mantener el nombre en Fraunces serif
   genérico — limpio y elegante para cualquier caso. */

/* === CHECK ICON · esquina superior derecha al seleccionar (recuperado) === */
body #product .hkp-variants .hkp-variant-check,
body[id^="product"] .hkp-variants .hkp-variant-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--hk-accent, #8A4A4A);     /* check de selección = burdeos */
    color: var(--hk-cream, #FBF6EF);
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.22s ease, transform 0.22s ease;
    box-shadow: 0 1px 3px rgba(58, 44, 40, 0.12);
    border: 0 !important;
    padding: 0 !important;
}

body #product .hkp-variants .hkp-variant-card.hkp-variant-selected .hkp-variant-check,
body #product .hkp-variants .hkp-variant-card:has(input:checked) .hkp-variant-check,
body[id^="product"] .hkp-variants .hkp-variant-card.hkp-variant-selected .hkp-variant-check {
    opacity: 1;
    transform: scale(1);
}

/* === RESET del border feo heredado del theme Warehouse en el span del nombre ===
   El theme aplica border + padding al span por convención de radios/checkboxes,
   pero rompe nuestro diseño editorial. Forzamos reset agresivo. */
body #product .hkp-variants .hkp-variant-name,
body[id^="product"] .hkp-variants .hkp-variant-name,
body #product .hkp-variants .hkp-variant-card .hkp-variant-name,
body[id^="product"] .hkp-variants .hkp-variant-card .hkp-variant-name,
body #product .hkp-variants .hkp-variant-card span.hkp-variant-name {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* === HIGHLIGHT estilo MARCADOR debajo del texto al seleccionar ===
   En vez de underline solid (formal), simulamos un trazo de "rotulador
   amarillo" pasado por debajo del texto. Linear-gradient horizontal
   que pinta solo la franja inferior del texto.

   El truco: background-image en el span inline-block, posicionado bottom,
   con altura ~30% del texto. Da look "highlighter" desenfadado. */
body #product .hkp-variants .hkp-variant-card.hkp-variant-selected .hkp-variant-name,
body #product .hkp-variants .hkp-variant-card:has(input:checked) .hkp-variant-name,
body[id^="product"] .hkp-variants .hkp-variant-card.hkp-variant-selected .hkp-variant-name {
    /* test buyer: QUITADO el "subrayado" tipo marcador del seleccionado. Se mantiene
       el resto del estado activo (borde burdeos + check ✓). */
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    border: 0 !important;
}

/* Tipografía · highlight bajo el PREVIEW (Elena & Santiago) en lugar del label */
body #product .hkp-variants-typography .hkp-variant-card.hkp-variant-selected .hkp-variant-name,
body[id^="product"] .hkp-variants-typography .hkp-variant-card.hkp-variant-selected .hkp-variant-name {
    background: transparent !important;            /* el name pequeño NO lleva highlight */
    padding: 0 !important;
    margin: 0 !important;
}

body #product .hkp-variants-typography .hkp-variant-card.hkp-variant-selected .hkp-variant-preview,
body #product .hkp-variants-typography .hkp-variant-card:has(input:checked) .hkp-variant-preview,
body[id^="product"] .hkp-variants-typography .hkp-variant-card.hkp-variant-selected .hkp-variant-preview {
    /* test buyer: sin marcador (coherente con el resto de combinaciones) */
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
}

/* === TAG "Seleccionada" · solo en tipografía cuando active === */
body #product .hkp-variants-typography .hkp-variant-typo-tag,
body[id^="product"] .hkp-variants-typography .hkp-variant-typo-tag {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Inter, sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hk-accent, #8A4A4A);          /* tag "Seleccionada" = burdeos */
    opacity: 0;
    transition: opacity 0.22s ease;
    white-space: nowrap;
}

body #product .hkp-variants-typography .hkp-variant-card.hkp-variant-selected .hkp-variant-typo-tag,
body #product .hkp-variants-typography .hkp-variant-card:has(input:checked) .hkp-variant-typo-tag {
    opacity: 1;
}

/* === DISABLED (sin stock) === */
body #product .hkp-variants .hkp-variant-card.hkp-variant-disabled,
body[id^="product"] .hkp-variants .hkp-variant-card.hkp-variant-disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
}

/* === COLOR SWATCHES · OPCIÓN B del design ===
   Círculo grande + NOMBRE del color debajo. Activo:
     - Anillo BURDEOS alrededor del círculo
     - Check inside el círculo (si es color claro) o sin check (color oscuro)
     - Nombre con peso bold ink
   El nombre del activo aparece también junto al título del grupo
   ("COLOR ASA E INTERIOR | Blanco"). */
body #product .hkp-variants-color .hkp-variants-color-list,
body[id^="product"] .hkp-variants-color .hkp-variants-color-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;   /* color vinilo a la izquierda (como el resto) */
    gap: 16px !important;
}

body #product .hkp-variants-color .hkp-variant-color-item,
body[id^="product"] .hkp-variants-color .hkp-variant-color-item {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer;
    transition: transform 0.18s ease;
}

body #product .hkp-variants-color .hkp-variant-color-item:hover,
body[id^="product"] .hkp-variants-color .hkp-variant-color-item:hover {
    transform: translateY(-1px);
}

/* El círculo de color · 38px (un poco más grande que antes para el check interno) */
body #product .hkp-variants-color .hkp-variant-color-item .color,
body[id^="product"] .hkp-variants-color .hkp-variant-color-item .color {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(58, 44, 40, 0.15) !important;
    box-sizing: border-box;
    position: relative;
    transition: box-shadow 0.22s ease, transform 0.18s ease;
}

/* Estado SELECCIONADO · anillo BURDEOS (más distintivo que mustard) */
body #product .hkp-variants-color .hkp-variant-color-item.hkp-variant-selected .color,
body[id^="product"] .hkp-variants-color .hkp-variant-color-item.hkp-variant-selected .color,
body #product .hkp-variants-color .hkp-variant-color-item:has(input:checked) .color {
    box-shadow:
        0 0 0 2px var(--hk-cream, #FBF6EF),
        0 0 0 3.5px var(--hk-accent, #8A4A4A);
    border-color: transparent !important;
}

/* CHECK ICON dentro del círculo · visible solo cuando active */
body #product .hkp-variants-color .hkp-variant-color-check,
body[id^="product"] .hkp-variants-color .hkp-variant-color-check {
    color: var(--hk-accent, #8A4A4A);     /* burdeos sobre colores claros */
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

body #product .hkp-variants-color .hkp-variant-color-item.hkp-variant-selected .hkp-variant-color-check,
body #product .hkp-variants-color .hkp-variant-color-item:has(input:checked) .hkp-variant-color-check {
    opacity: 1;
    transform: scale(1);
}

/* Nombre del color · debajo del círculo, Inter pequeño UPPERCASE */
body #product .hkp-variants-color .hkp-variant-color-label,
body[id^="product"] .hkp-variants-color .hkp-variant-color-label {
    font-family: Inter, sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--hk-ink2, #6B5852) !important;
    line-height: 1.2 !important;
    text-align: center;
    opacity: 0.7;
    transition: color 0.2s ease, opacity 0.2s ease, font-weight 0.2s ease;
    white-space: nowrap;
}

body #product .hkp-variants-color .hkp-variant-color-item.hkp-variant-selected .hkp-variant-color-label,
body #product .hkp-variants-color .hkp-variant-color-item:has(input:checked) .hkp-variant-color-label {
    color: var(--hk-ink, #3A2C28) !important;
    opacity: 1;
    font-weight: 700 !important;
}

body #product .hkp-variants-color .hkp-variant-color-input,
body[id^="product"] .hkp-variants-color .hkp-variant-color-input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0;
    height: 0;
}

/* === NOMBRE DEL COLOR ACTIVO — oculto: redundante con el label bajo el swatch === */
body #product .hkp-variants-color-selected,
body[id^="product"] .hkp-variants-color-selected {
    display: none !important;
}

body #product .hkp-variants-color-selected .hkp-variants-color-sep,
body[id^="product"] .hkp-variants-color-selected .hkp-variants-color-sep {
    color: rgba(58, 44, 40, 0.3);
    font-weight: 400;
}

body #product .hkp-variants-color-selected .hkp-variants-color-name,
body[id^="product"] .hkp-variants-color-selected .hkp-variants-color-name {
    font-family: Inter, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--hk-accent, #8A4A4A) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* === SELECT estilizado · mantiene el render nativo === */
body #product .hkp-variants-select-wrapper,
body[id^="product"] .hkp-variants-select-wrapper {
    position: relative;
    max-width: 100%;
}

body #product .hkp-variants-select,
body[id^="product"] .hkp-variants-select {
    width: 100% !important;
    background: var(--hk-paper, #F5EAE2) !important;
    border: 1.5px solid var(--hk-line, #E5D5C8) !important;
    border-radius: 10px !important;
    padding: 12px 40px 12px 14px !important;
    font-family: Inter, sans-serif !important;
    font-size: 13.5px !important;
    color: var(--hk-ink, #3A2C28) !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233A2C28' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
    transition: border-color 0.22s ease, box-shadow 0.22s ease !important;
}

body #product .hkp-variants-select:focus,
body[id^="product"] .hkp-variants-select:focus {
    outline: none !important;
    border-color: var(--hk-accent, #8A4A4A) !important;     /* foco = burdeos */
    box-shadow: 0 0 0 3px rgba(138, 74, 74, 0.15) !important;
}

/* Responsive · móvil: 2 cards por fila */
@media (max-width: 575px) {
    body #product .hkp-variants .hkp-variants-options {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =====================================================================
   FICHA PRODUCTO · PRECIO centrado y grande (estilo design)

   IMPORTANTE: una regla anterior (.col-product-info * { text-align: left })
   piso el centrado. Usamos selectores con MUCHA specificity + el `body`
   prefijo para ganar al `.col-product-info *` que tenía (1,2,2).
   ===================================================================== */
body #product .col-product-info .product-prices,
body[id^="product"] .col-product-info .product-prices,
body #product .product-prices,
body[id^="product"] .product-prices {
    text-align: center !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Reset agresivo de TODO el contenido interno · gana al `* { text-align: left }` */
body #product .col-product-info .product-prices *,
body[id^="product"] .col-product-info .product-prices *,
body #product .product-prices *,
body[id^="product"] .product-prices * {
    text-align: center !important;
}

/* El wrapper del precio · centrado real con inline-flex baseline */
body #product .col-product-info .product-prices .current-price,
body[id^="product"] .col-product-info .product-prices .current-price,
body #product .product-prices .current-price,
body[id^="product"] .product-prices .current-price {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    justify-content: center !important;
    width: 100%;
}

/* El precio principal · Fraunces ITALIC grande burdeos (estilo design) */
body #product .col-product-info .product-prices .current-price-value,
body #product .col-product-info .product-prices .product-price,
body[id^="product"] .col-product-info .product-prices .current-price-value,
body[id^="product"] .col-product-info .product-prices .product-price,
body #product .product-prices .current-price-value,
body[id^="product"] .product-prices .current-price-value,
body #product .product-prices .product-price,
body[id^="product"] .product-prices .product-price {
    font-family: Fraunces, Georgia, serif !important;
    font-size: clamp(32px, 4vw, 44px) !important;
    font-weight: 400 !important;
    font-style: italic !important;                    /* ITALIC · estilo design */
    color: var(--hk-accent, #8A4A4A) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
}

/* "IVA incluido" INLINE al lado del precio (nuevo span en el template,
   dentro del .current-price para que el flex baseline lo alinee) */
body #product .product-prices .hkp-tax-inline,
body[id^="product"] .product-prices .hkp-tax-inline {
    font-family: Inter, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--hk-ink2, #6B5852) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-style: normal !important;
    opacity: 0.85;
    margin-left: 6px;
    align-self: baseline;
}

/* OCULTAR el .tax-shipping-delivery-label original (ahora duplicado por el
   span inline que añadimos al wrapper). El template Warehouse lo sigue
   renderizando con datos extra (delivery, etc.) · si en el futuro necesitas
   esos extras los podemos mostrar como bloque aparte. */
body #product .product-prices .tax-shipping-delivery-label,
body[id^="product"] .product-prices .tax-shipping-delivery-label {
    display: none !important;
}

/* =====================================================================
   FICHA PRODUCTO · BOTÓN AÑADIR AL CARRITO centrado + qty stepper
   ===================================================================== */
body #product .product-add-to-cart,
body[id^="product"] .product-add-to-cart {
    padding-top: 20px !important;
}

body #product .product-add-to-cart .product-quantity,
body[id^="product"] .product-add-to-cart .product-quantity {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 !important;
}

body #product .product-add-to-cart .col-add-qty,
body[id^="product"] .product-add-to-cart .col-add-qty {
    flex: 0 0 auto !important;
    max-width: none !important;
    padding: 0 !important;
}

body #product .product-add-to-cart .col-add-btn,
body[id^="product"] .product-add-to-cart .col-add-btn {
    flex: 1 1 auto !important;
    max-width: 320px !important;
    padding: 0 !important;
}

/* El input de cantidad · cuadrado con stepper sutil */
body #product .product-add-to-cart .qty input,
body[id^="product"] .product-add-to-cart .qty input,
body #product .product-add-to-cart #quantity_wanted {
    width: 70px !important;
    height: 48px !important;
    text-align: center !important;
    font-family: Fraunces, Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--hk-ink, #3A2C28) !important;
    background: var(--hk-cream, #FBF6EF) !important;
    border: 1px solid var(--hk-line, #E5D5C8) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body #product .product-add-to-cart .qty input:focus {
    outline: none !important;
    border-color: var(--hk-accent, #8A4A4A) !important;     /* foco cantidad = burdeos */
}

/* Botón "Añadir al carrito" · MUSTARD prominente (CTA principal) */
body #product .product-add-to-cart .btn.add-to-cart,
body[id^="product"] .product-add-to-cart .btn.add-to-cart {
    width: 100% !important;
    height: 48px !important;
    background: var(--hk-mustard, #E2B85A) !important;
    color: var(--hk-ink, #3A2C28) !important;
    font-family: Inter, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 24px !important;
    box-shadow: 0 1px 0 rgba(58, 44, 40, 0.06) !important;
    transition: background 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

body #product .product-add-to-cart .btn.add-to-cart:hover,
body[id^="product"] .product-add-to-cart .btn.add-to-cart:hover {
    background: #d6a849 !important;
    color: var(--hk-ink, #3A2C28) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(226, 184, 90, 0.3) !important;
}

/* Icono SVG carrito del botón "Añadir al carrito" · mismo cart del header */
body #product .product-add-to-cart .btn.add-to-cart .hkp-cart-icon,
body[id^="product"] .product-add-to-cart .btn.add-to-cart .hkp-cart-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke-width: 1.6;
}

/* Defensa · si por algún motivo queda el <i class="fa-shopping-bag"> legacy
   (caché de plantillas, modal quickview, etc.), no lo dibujamos para evitar
   que se vea el icono antiguo encima del nuevo SVG. */
body #product .product-add-to-cart .btn.add-to-cart .bag-icon,
body[id^="product"] .product-add-to-cart .btn.add-to-cart .bag-icon,
body #product .product-add-to-cart .btn.add-to-cart .fa-shopping-bag,
body[id^="product"] .product-add-to-cart .btn.add-to-cart .fa-shopping-bag {
    display: none !important;
}

/* === OCULTAR el botón wishlist nativo cuadrado ===
   El módulo iqitwishlist lo renderiza en varios sitios posibles según
   versión y configuración. Apuntamos a TODOS los wrappers conocidos pero
   con "visually hidden" (no display:none) para que el botón siga siendo
   accesible vía JS — mi puente "Guardar" hace click programático en él. */
body #product .iqitwishlist-product,
body[id^="product"] .iqitwishlist-product,
body #product .product-actions-buttons.iqit-product-actions,
body[id^="product"] .product-actions-buttons.iqit-product-actions,
body #product .product-quantity ~ .iqitwishlist-product,
body #product .col-add-btn ~ .iqitwishlist-product,
body #product .col-add-btn + div .iqitwishlist-product,
body #product .product-quantity .col-add-btn + .col,
body #product .product-quantity > .col:has(.btn-iqitwishlist-add),
body[id^="product"] .product-quantity > .col:has(.btn-iqitwishlist-add) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: block !important;            /* override del display:none por si lo aplica el theme */
    visibility: hidden !important;
}

/* Fallback agresivo: cualquier .btn-iqitwishlist-add que esté DENTRO de
   .product-add-to-cart o como sibling directo · ocultar */
body #product .product-add-to-cart .btn-iqitwishlist-add,
body[id^="product"] .product-add-to-cart .btn-iqitwishlist-add,
body #product .product-quantity .btn-iqitwishlist-add,
body[id^="product"] .product-quantity .btn-iqitwishlist-add {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: auto !important;       /* el JS lo necesita clickable */
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* === STEPPER de cantidad · custom limpio ===
   El theme Warehouse usa bootstrap-touchspin que añade botones extra raros.
   Estilizamos el input number + ocultamos los wrappers feos del touchspin. */
body #product .product-add-to-cart .input-group-btn-vertical,
body[id^="product"] .product-add-to-cart .input-group-btn-vertical,
body #product .product-add-to-cart .bootstrap-touchspin-up,
body #product .product-add-to-cart .bootstrap-touchspin-down,
body[id^="product"] .product-add-to-cart .bootstrap-touchspin-up,
body[id^="product"] .product-add-to-cart .bootstrap-touchspin-down,
body #product .product-add-to-cart .input-group-append,
body[id^="product"] .product-add-to-cart .input-group-append {
    display: none !important;
}

/* Quitar las flechas nativas del input number en webkit */
body #product .product-add-to-cart input[type="number"]::-webkit-outer-spin-button,
body #product .product-add-to-cart input[type="number"]::-webkit-inner-spin-button,
body[id^="product"] .product-add-to-cart input[type="number"]::-webkit-outer-spin-button,
body[id^="product"] .product-add-to-cart input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
}

/* Y en Firefox */
body #product .product-add-to-cart input[type="number"],
body[id^="product"] .product-add-to-cart input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* === Wrapper .qty · stepper pill con − [input] + === */
body #product .product-add-to-cart .qty,
body[id^="product"] .product-add-to-cart .qty {
    display: inline-flex !important;
    align-items: stretch !important;
    width: auto !important;
    position: relative !important;
    background: var(--hk-cream, #FBF6EF) !important;
    border: 1px solid var(--hk-line, #E5D5C8) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    height: 48px !important;
    box-shadow: none !important;
}

/* El input · transparente dentro del wrapper · sin borde propio */
body #product .product-add-to-cart .qty input,
body #product .product-add-to-cart #quantity_wanted,
body[id^="product"] .product-add-to-cart #quantity_wanted {
    width: 44px !important;
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    padding: 0 !important;
    font-family: Inter, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--hk-ink, #3A2C28) !important;
}

body #product .product-add-to-cart .qty input:focus,
body #product .product-add-to-cart #quantity_wanted:focus {
    outline: none !important;
    background: transparent !important;
}

/* Botones − y + · planos, transparentes, hover sutil */
body #product .product-add-to-cart .hkp-qty-btn,
body[id^="product"] .product-add-to-cart .hkp-qty-btn {
    background: transparent !important;
    border: 0 !important;
    padding: 0 14px !important;
    cursor: pointer !important;
    color: var(--hk-ink, #3A2C28) !important;
    font-family: Inter, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.18s ease, color 0.18s ease !important;
    user-select: none;
    -webkit-user-select: none;
    min-width: 32px;
    box-shadow: none !important;
}

body #product .product-add-to-cart .hkp-qty-btn:hover,
body[id^="product"] .product-add-to-cart .hkp-qty-btn:hover {
    background: var(--hk-paper, #F5EAE2) !important;
    color: var(--hk-accent, #8A4A4A) !important;
}

body #product .product-add-to-cart .hkp-qty-btn:active,
body[id^="product"] .product-add-to-cart .hkp-qty-btn:active {
    background: rgba(58, 44, 40, 0.12) !important;
}

/* El símbolo − necesita ser un pelín más grueso para verse igual que el + */
body #product .product-add-to-cart .hkp-qty-minus,
body[id^="product"] .product-add-to-cart .hkp-qty-minus {
    font-size: 18px !important;
    font-weight: 500 !important;
}

/* =====================================================================
   FICHA · DESPLEGABLE DE MARCA para selects de opción (.hkp-csel)
   Mismo look que el del checkout (.hkco-addr). Lo monta product-enhance.js
   (enhanceProductSelects) ocultando el <select> nativo del SO.
   ===================================================================== */
body[id^="product"] .hkp-csel { position: relative; width: 100%; }
body[id^="product"] .hkp-csel-trigger {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; border-radius: 10px; cursor: pointer; text-align: left;
    background: var(--hk-cream, #FBF6EF);
    border: 1.5px solid var(--hk-line, #EBDDD0);
    font-family: Inter, sans-serif;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
body[id^="product"] .hkp-csel-trigger[aria-expanded="true"] {
    border-color: var(--hk-accent, #8A4A4A);
    box-shadow: 0 0 0 3px rgba(138, 74, 74, 0.10);
}
body[id^="product"] .hkp-csel-label { flex: 1; font-size: 14px; color: var(--hk-ink, #3A2C28); }
body[id^="product"] .hkp-csel-trigger.is-placeholder .hkp-csel-label { color: var(--hk-ink-3, #9A8780); }
body[id^="product"] .hkp-csel-caret { display: inline-flex; color: var(--hk-ink-2, #6B5852); transition: transform 0.15s ease; }
body[id^="product"] .hkp-csel-trigger[aria-expanded="true"] .hkp-csel-caret { transform: rotate(180deg); }
body[id^="product"] .hkp-csel-menu {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    margin: 0; padding: 6px; list-style: none;
    background: var(--hk-cream, #FBF6EF);
    border: 1px solid var(--hk-line, #EBDDD0);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(58, 44, 40, 0.18);
    overflow-y: auto; max-height: 320px;
}
body[id^="product"] .hkp-csel-menu[hidden] { display: none; }
body[id^="product"] .hkp-csel-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px; border-radius: 7px; cursor: pointer;
    transition: background 0.1s ease;
}
body[id^="product"] .hkp-csel-opt:hover { background: rgba(138, 74, 74, 0.08); }
body[id^="product"] .hkp-csel-opt[aria-selected="true"] { background: var(--hk-accent, #8A4A4A); }
body[id^="product"] .hkp-csel-opt[data-disabled="1"] { cursor: default; }
body[id^="product"] .hkp-csel-opt[data-disabled="1"]:hover { background: transparent; }
body[id^="product"] .hkp-csel-opt-label { flex: 1; min-width: 0; font-family: Inter, sans-serif; font-size: 13.5px; color: var(--hk-ink, #3A2C28); }
body[id^="product"] .hkp-csel-opt[data-disabled="1"] .hkp-csel-opt-label { color: var(--hk-ink-3, #9A8780); }
body[id^="product"] .hkp-csel-opt[aria-selected="true"] .hkp-csel-opt-label { color: var(--hk-cream, #FBF6EF); font-weight: 600; }
body[id^="product"] .hkp-csel-opt-check { display: none; flex-shrink: 0; color: var(--hk-cream, #FBF6EF); }
body[id^="product"] .hkp-csel-opt[aria-selected="true"] .hkp-csel-opt-check { display: inline-flex; }

/* Neutralizar el wrapper del tema (.custom-select2) que rodea nuestro .hkp-csel:
   le quita el fondo blanco, su flecha ::after (duplicada) y el margin:auto que centra. */
body[id^="product"] .product-variants-item .custom-select2 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
body[id^="product"] .product-variants-item .custom-select2::after,
body[id^="product"] .product-variants-item .custom-select2::before { display: none !important; content: none !important; }

/* =====================================================================
   FICHA PRODUCTO · BLOQUE DE ACCIONES (diseño A · test buyer)
   Fila de 3 botones: Guardar · Para una fecha · Preguntar. La monta
   product-enhance.js (buildGiftActionRow) MOVIENDO los 3 botones reales aquí
   (conserva cableado). Cada celda = botón vertical icono arriba + label debajo.
   ===================================================================== */
body #product .hkp-action-row,
body[id^="product"] .hkp-action-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;   /* 2×2 (test buyer): Guardar·Fecha / Preguntar·Traducción */
    gap: 10px !important;
    margin: 18px 0 0 !important;
    align-items: stretch !important;
}
body #product .hkp-action-row > *,
body[id^="product"] .hkp-action-row > * { min-width: 0 !important; }
body #product .hkp-action-row .hmgs-wrap,
body[id^="product"] .hkp-action-row .hmgs-wrap { position: relative !important; width: 100% !important; margin: 0 !important; border-top: 0 !important; padding-top: 0 !important; }

/* Botón de cada celda · vertical (icono arriba, label debajo) */
body #product .hkp-action-row .js-hkp-wishlist-link,
body #product .hkp-action-row .hmgs-btn,
body #product .hkp-action-row #hmwa-product-btn,
body[id^="product"] .hkp-action-row .js-hkp-wishlist-link,
body[id^="product"] .hkp-action-row .hmgs-btn,
body[id^="product"] .hkp-action-row #hmwa-product-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 13px 8px !important;
    background: #FFFFFF !important;   /* test buyer: blanco + borde (no el rosa, que competía con las combinaciones) */
    border: 1px solid var(--hk-line, #E5D5C8) !important;
    border-radius: 12px !important;
    color: var(--hk-ink, #3A2C28) !important;
    font-family: Inter, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: border-color .18s ease, background .18s ease, transform .15s ease !important;
}
body #product .hkp-action-row .js-hkp-wishlist-link:hover,
body #product .hkp-action-row .hmgs-btn:hover,
body #product .hkp-action-row #hmwa-product-btn:hover,
body[id^="product"] .hkp-action-row .js-hkp-wishlist-link:hover,
body[id^="product"] .hkp-action-row .hmgs-btn:hover,
body[id^="product"] .hkp-action-row #hmwa-product-btn:hover {
    border-color: var(--hk-accent, #8A4A4A) !important;
    background: var(--hk-cream, #FBF6EF) !important;
    transform: translateY(-1px) !important;
    color: var(--hk-ink, #3A2C28) !important;
}
/* Iconos · tamaño uniforme (el corazón conserva su lógica outline/filled) */
body #product .hkp-action-row .hkp-action-cell svg,
body[id^="product"] .hkp-action-row .hkp-action-cell svg {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}
body #product .hkp-action-row .hmgs-btn svg,
body #product .hkp-action-row #hmwa-product-btn svg,
body[id^="product"] .hkp-action-row .hmgs-btn svg,
body[id^="product"] .hkp-action-row #hmwa-product-btn svg {
    color: var(--hk-ink, #3A2C28) !important;
    stroke: currentColor;
}
/* Labels · debajo del icono, centrados */
body #product .hkp-action-row .hkp-secondary-label,
body #product .hkp-action-row .hmgs-btn span,
body #product .hkp-action-row #hmwa-product-btn span,
body[id^="product"] .hkp-action-row .hkp-secondary-label,
body[id^="product"] .hkp-action-row .hmgs-btn span,
body[id^="product"] .hkp-action-row #hmwa-product-btn span {
    display: block !important;
    text-align: center !important;
    line-height: 1.15 !important;
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* 4ª card · "Traducción gratis" (enlace a /content/idiomas) · mismo look que las acciones */
body #product .hkp-action-row .hkp-action-translate,
body[id^="product"] .hkp-action-row .hkp-action-translate {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 13px 8px !important;
    background: #FFFFFF !important;
    border: 1px solid var(--hk-line, #E5D5C8) !important;
    border-radius: 12px !important;
    color: var(--hk-ink, #3A2C28) !important;
    text-decoration: none !important;
    font-family: Inter, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: border-color .18s ease, background .18s ease, transform .15s ease !important;
}
body #product .hkp-action-row .hkp-action-translate:hover,
body[id^="product"] .hkp-action-row .hkp-action-translate:hover {
    border-color: var(--hk-accent, #8A4A4A) !important;
    background: var(--hk-cream, #FBF6EF) !important;
    transform: translateY(-1px) !important;
}
body #product .hkp-action-row .hkp-action-translate svg,
body[id^="product"] .hkp-action-row .hkp-action-translate svg {
    width: 20px !important; height: 20px !important;
    color: var(--hk-ink, #3A2C28) !important; flex: 0 0 auto !important;
}
body #product .hkp-action-row .hkp-action-translate span,
body[id^="product"] .hkp-action-row .hkp-action-translate span {
    display: block !important; line-height: 1.15 !important;
    font-size: 12px !important; font-weight: 600 !important; color: inherit !important;
}

/* test buyer: con la fila 2×2 presente, fuera los 3 badges en línea (envío / no-cambios /
   idioma); el idioma pasa a ser la 4ª card. La card "¿cuándo me llega?" se queda (va
   después de #block-reassurance, así que no le afecta). */
body #product .hkp-action-row ~ #block-reassurance,
body[id^="product"] .hkp-action-row ~ #block-reassurance {
    display: none !important;
}

/* =====================================================================
   FICHA · botón "PRODUCTO GEMELO" (.hm-switch-model) · diseño Hakuna 2.0
   El theme-editor lo pintaba como pill verde-menta (Hakuna 1.0). product-enhance.js
   lo enriquece (.hm-sm-enhanced: icono + título + subtítulo auto + flecha) y aquí
   lo restilamos a pill crema con hover burdeos. La clase extra .hm-sm-enhanced gana
   en especificidad al CSS del theme-editor. Cuando hay 2 links gemelos,
   product-enhance.js los agrupa en .hm-sm-row (flex, 1 centrado si es unico /
   2 en fila si son dos). (En prod: opcional limpiar la regla
   .hm-switch-model verde del theme-editor.)
   ===================================================================== */
body .hm-sm-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
}
body .hm-sm-row .hm-switch-model.hm-sm-enhanced {
    margin: 0 !important;
    max-width: none !important;
    flex: 1 1 0;
    min-width: 200px;
}
body .hm-switch-model.hm-sm-enhanced {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 360px;
    box-sizing: border-box !important;
    margin: 14px 0 0 !important;
    padding: 11px 16px !important;
    background: var(--hk-cream, #FBF6EF) !important;
    border: 1px solid var(--hk-line, #E5D5C8) !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    color: var(--hk-ink, #3A2C28) !important;
    box-shadow: 0 1px 2px rgba(58, 44, 40, .04) !important;
    transition: border-color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease !important;
}
body .hm-switch-model.hm-sm-enhanced:hover {
    border-color: var(--hk-accent, #8A4A4A) !important;
    background: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(138, 74, 74, .10) !important;
}
body .hm-switch-model.hm-sm-enhanced .hm-sm-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(138, 74, 74, .08);
    color: var(--hk-accent, #8A4A4A);
}
body .hm-switch-model.hm-sm-enhanced .hm-sm-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.25;
}
body .hm-switch-model.hm-sm-enhanced .hm-sm-title {
    font-family: Inter, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--hk-ink, #3A2C28);
}
body .hm-switch-model.hm-sm-enhanced .hm-sm-sub {
    font-family: Inter, sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--hk-ink-3, #9A8780);
    margin-top: 1px;
}
body .hm-switch-model.hm-sm-enhanced .hm-sm-arrow {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--hk-ink-3, #9A8780);
    transition: transform .2s ease, color .2s ease;
}
body .hm-switch-model.hm-sm-enhanced:hover .hm-sm-arrow {
    color: var(--hk-accent, #8A4A4A);
    transform: translateX(3px);
}

/* =====================================================================
   WISHLIST · corazón del "TAMBIÉN TE PUEDE GUSTAR" (crosssell de la ficha) ·
   MISMO look que la home (test buyer: "así lo quiero en todos lados"):
   círculo crema ARRIBA-DERECHA + corazón OUTLINE tinta → RELLENO burdeos.
   La home y categoría ya quedan; esto cubre el crosssell de la ficha (que
   salía sin estilo, abajo-derecha). Autocontenido (dibuja el icono por SVG).
   ===================================================================== */
body[id^="product"] .product-miniature .product-functional-buttons,
body[id^="product"] .crossselling-products .product-functional-buttons,
body[id^="product"] .hkh-cross--product .product-functional-buttons {
    position: absolute !important;
    top: 12px !important; right: 12px !important; left: auto !important; bottom: auto !important;
    width: auto !important; margin: 0 !important; padding: 0 !important;
    background: transparent !important; box-shadow: none !important;
    z-index: 6 !important;
    opacity: 1 !important; visibility: visible !important; transform: none !important;
}
body[id^="product"] .product-miniature .btn-iqitwishlist-add {
    position: relative !important;
    width: 38px !important; height: 38px !important; min-width: 38px !important;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 999px !important;
    background: rgba(251, 246, 239, .92) !important;
    color: var(--hk-ink, #3A2C28) !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 16px rgba(58,44,40,.10) !important;
    text-decoration: none !important; font-size: 0 !important; line-height: 1 !important;
    transition: transform .18s ease, background .2s ease !important;
}
body[id^="product"] .product-miniature .btn-iqitwishlist-add:hover {
    transform: scale(1.07) !important;
    background: #FFFFFF !important;
    color: var(--hk-accent, #8A4A4A) !important;
}
/* ocultar el <i> de FontAwesome (roto en FA6) y dibujar el corazón por SVG */
body[id^="product"] .product-miniature .btn-iqitwishlist-add i,
body[id^="product"] .product-miniature .btn-iqitwishlist-add .fa { display: none !important; }
body[id^="product"] .product-miniature .btn-iqitwishlist-add::before {
    content: '' !important;
    display: block !important;
    width: 18px !important; height: 18px !important;
    -webkit-mask: none !important; mask: none !important;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2C28' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;
}
body[id^="product"] .product-miniature .btn-iqitwishlist-add.iqitwishlist-added::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238A4A4A' stroke='%238A4A4A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;
}

/* =====================================================================
   FICHA PRODUCTO · ENLACES SECUNDARIOS · Guardar / Pregúntanos
   ===================================================================== */
body #product .hkp-secondary-actions,
body[id^="product"] .hkp-secondary-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
}

body #product .hkp-secondary-action,
body[id^="product"] .hkp-secondary-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: Inter, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--hk-ink2, #6B5852) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
}

body #product .hkp-secondary-action:hover,
body[id^="product"] .hkp-secondary-action:hover {
    color: var(--hk-accent, #8A4A4A) !important;
    text-decoration: none !important;
}

body #product .hkp-secondary-action svg,
body[id^="product"] .hkp-secondary-action svg {
    flex-shrink: 0;
}

/* === GUARDAR · conmutación outline/filled del corazón según estado ===
   Por defecto (no guardado): outline visible, filled oculto.
   Cuando .is-saved (guardado): outline oculto, filled visible burdeos.
   Animación "pop" cuando cambia · feedback delicioso al guardar. */

/* Default · solo outline visible */
body #product .js-hkp-wishlist-link .hkp-heart-outline,
body[id^="product"] .js-hkp-wishlist-link .hkp-heart-outline {
    display: inline-block !important;
}
body #product .js-hkp-wishlist-link .hkp-heart-filled,
body[id^="product"] .js-hkp-wishlist-link .hkp-heart-filled {
    display: none !important;
}

/* Saved · oculto outline, mostrar filled burdeos con pop */
body #product .js-hkp-wishlist-link.is-saved .hkp-heart-outline,
body[id^="product"] .js-hkp-wishlist-link.is-saved .hkp-heart-outline {
    display: none !important;
}
body #product .js-hkp-wishlist-link.is-saved .hkp-heart-filled,
body[id^="product"] .js-hkp-wishlist-link.is-saved .hkp-heart-filled {
    display: inline-block !important;
    color: var(--hk-accent, #8A4A4A) !important;
    animation: hkp-heart-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hkp-heart-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* Texto del link también en burdeos cuando saved */
body #product .js-hkp-wishlist-link.is-saved,
body[id^="product"] .js-hkp-wishlist-link.is-saved,
body #product .js-hkp-wishlist-link.is-saved .hkp-secondary-label,
body[id^="product"] .js-hkp-wishlist-link.is-saved .hkp-secondary-label {
    color: var(--hk-accent, #8A4A4A) !important;
}

/* =====================================================================
   BLOCK REASSURANCE · SVG iconos (estilo Hakuna)
   El template ya renderiza SVG inline en lugar de <img> JPG.
   Aquí solo aplicamos color, tamaño y layout. */
body #product #block-reassurance .hkr-svg,
body[id^="product"] #block-reassurance .hkr-svg,
body #block-reassurance .hkr-svg {
    color: var(--hk-sage-dk, #6F8568) !important;
    flex-shrink: 0;
    display: block;
}

/* Sustituimos también el wrapper visual del item (los círculos con jpg) */
body #product #block-reassurance .block-reassurance-item.hkr-has-svg,
body[id^="product"] #block-reassurance .block-reassurance-item.hkr-has-svg,
body #block-reassurance .block-reassurance-item.hkr-has-svg {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 6px 0 !important;
    background: transparent !important;
    border: 0 !important;
}

body #product #block-reassurance .block-reassurance-item.hkr-has-svg span,
body[id^="product"] #block-reassurance .block-reassurance-item.hkr-has-svg span,
body #block-reassurance .block-reassurance-item.hkr-has-svg span {
    font-family: Inter, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--hk-ink, #3A2C28) !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* === Block reassurance · estilo design Claude (círculos paper + icono burdeos) ===
   Cada item: círculo paper rosa grande con icono burdeos dentro + texto al lado.
   Sin caja envolvente · separados por aire vertical generoso. */
/* La fila .product-additional-info trae un border-top del TEMA
   (themes/warehouse/_dev/css/components/products.scss → theme.css). En las fichas
   va vacía pero el borde dibujaba una línea bajo "Guardar/Pregúntanos". El cliente
   la quiere fuera → anulamos el borde siempre y colapsamos el div cuando está vacío. */
body #product .product-additional-info,
body[id^="product"] .product-additional-info {
    border-top: 0 !important;
}
body #product .product-additional-info:empty,
body[id^="product"] .product-additional-info:empty {
    padding: 0 !important;
    margin: 0 !important;
}

body #product #block-reassurance,
body[id^="product"] #block-reassurance {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 22px 0 0 !important;
    box-sizing: border-box !important;
    border-top: 0 !important;                          /* sin línea separadora arriba (sobraba · pedido cliente) */
    padding-top: 8px !important;
}

/* La lista · vertical con gap generoso */
body #product #block-reassurance ul,
body[id^="product"] #block-reassurance ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

body #product #block-reassurance li,
body[id^="product"] #block-reassurance li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Item · texto en línea con el círculo · gap generoso */
body #product #block-reassurance .block-reassurance-item.hkr-has-svg,
body[id^="product"] #block-reassurance .block-reassurance-item.hkr-has-svg {
    padding: 0 !important;
    gap: 18px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
}

/* CÍRCULO grande paper rosa · icono color por tipo (emocional) */
body #product #block-reassurance .block-reassurance-item.hkr-has-svg .hkr-svg,
body[id^="product"] #block-reassurance .block-reassurance-item.hkr-has-svg .hkr-svg {
    width: 22px !important;
    height: 22px !important;
    padding: 11px !important;
    box-sizing: content-box;
    background: var(--hk-paper, #F5EAE2) !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: var(--hk-accent, #8A4A4A) !important;          /* burdeos por default */
    flex-shrink: 0;
}

/* === COLOR POR TIPO DE ICONO · semántica emocional ===
   - VERDE (sage) → positivo, natural, calma · envío, escudo, check, hand, return, heart
   - BURDEOS (accent) → atención, alerta · prohibición, no-edit
   - MUSTARD (mostaza) → cálido, info · traducir, pencil, clock

   Specificity boost: añado .hkr-has-svg al selector por icono para que
   gane a la regla general (que tiene .hkr-has-svg también). Con + 1 attribute
   queda (0, 4, 0) vs (0, 3, 0) de la general. */

/* Cada badge: FONDO tinte claro del color + ICONO color oscuro del mismo tono
   (color-matched look · más editorial). Usamos rgba con alpha bajo para tinte. */

/* SAGE (verde) · envío + protección + acciones positivas */
body[id^="product"] #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="truck"] .hkr-svg,
body[id^="product"] #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="shield"] .hkr-svg,
body[id^="product"] #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="check"] .hkr-svg,
body[id^="product"] #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="hand"] .hkr-svg,
body[id^="product"] #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="return"] .hkr-svg,
body[id^="product"] #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="heart"] .hkr-svg,
body#product #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="truck"] .hkr-svg,
body#product #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="shield"] .hkr-svg,
body#product #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="check"] .hkr-svg,
body#product #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="hand"] .hkr-svg,
body#product #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="return"] .hkr-svg,
body#product #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="heart"] .hkr-svg {
    color: var(--hk-sage-dk, #6F8568) !important;
    background: rgba(111, 133, 104, 0.16) !important;   /* sage tint claro */
}

/* BURDEOS (accent) · alertas / prohibición */
body[id^="product"] #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="noedit"] .hkr-svg,
body#product #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="noedit"] .hkr-svg {
    color: var(--hk-accent, #8A4A4A) !important;
    background: rgba(138, 74, 74, 0.14) !important;     /* burdeos tint claro */
}

/* MOSTAZA CLARITO · info cálida: traducir / lápiz / reloj (tono suave · NO compite con el CTA de compra) */
body[id^="product"] #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="translate"] .hkr-svg,
body[id^="product"] #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="pencil"] .hkr-svg,
body[id^="product"] #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="clock"] .hkr-svg,
body#product #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="translate"] .hkr-svg,
body#product #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="pencil"] .hkr-svg,
body#product #block-reassurance .block-reassurance-item.hkr-has-svg[data-icon="clock"] .hkr-svg {
    color: var(--hk-mustard-dk, #C99A3F) !important;
    background: rgba(226, 184, 90, 0.20) !important;    /* mostaza clarito · info cálida */
}

/* Texto del item · Inter 15px ink */
body #product #block-reassurance .block-reassurance-item.hkr-has-svg span,
body[id^="product"] #block-reassurance .block-reassurance-item.hkr-has-svg span {
    color: var(--hk-ink, #3A2C28) !important;
    font-weight: 400 !important;
    font-family: Inter, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    background: transparent !important;
    padding: 0 !important;
    flex: 1 1 auto;
}

/* Swiper.js inyecta widths inline + transform translateX en el wrapper.
   Eso hace que la 4ª thumb se corte (queda fuera del viewport del swiper).
   SOLUCIÓN: convertimos el .swiper-wrapper en un CSS GRID puro de 4 cols,
   forzando overflow:visible en el container y reseteando transform/width
   inline de Swiper. Las thumbs quedan 100% alineadas y centradas.
   Si un producto tiene >4 thumbs, las extras quedan en una 2ª fila
   (acceptable para casos raros · la mayoría tienen 1-4 imágenes). */
body #product #product-images-thumbs,
body[id^="product"] #product-images-thumbs,
body #product .js-qv-mask,
body[id^="product"] .js-qv-mask {
    overflow: visible !important;
}

body #product #product-images-thumbs .swiper-wrapper,
body[id^="product"] #product-images-thumbs .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    transform: none !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    height: auto !important;
}

body #product #product-images-thumbs .swiper-slide,
body[id^="product"] #product-images-thumbs .swiper-slide {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: initial !important;
    /* Si hay más de 4 thumbs, se muestran las extras en filas siguientes
       (CSS grid auto-wraps con 4 cols). */
}

/* Thumbnails · NO padding/background entre swiper-slide → thumb-container → img.
   La imagen llena 100% del slide directamente, sin offsets.
   Para que el halo se vea pegado a la imagen, lo aplicamos al swiper-slide
   (envoltura externa) en vez del thumb-container interno. */
body #product #product-images-thumbs .swiper-slide,
body[id^="product"] #product-images-thumbs .swiper-slide {
    padding: 0 !important;
    background: transparent !important;
}

body #product #product-images-thumbs .thumb-container,
body[id^="product"] #product-images-thumbs .thumb-container {
    border-radius: 8px !important;
    overflow: visible !important;
    background: transparent !important;          /* SIN fondo paper */
    padding: 0 !important;                        /* SIN padding · imagen pegada al borde */
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;                      /* alto auto · marca la imagen */
    line-height: 0 !important;                    /* evita gap por baseline del inline */
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.2s ease;
}

body #product #product-images-thumbs .thumb,
body[id^="product"] #product-images-thumbs .thumb,
body #product #product-images-thumbs .thumb-container img,
body[id^="product"] #product-images-thumbs .thumb-container img {
    border-radius: 8px !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;                      /* respeta aspect-ratio natural · sin estirar */
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    /* Resetear cualquier shadow heredado de iteraciones anteriores */
    box-shadow: none !important;
    outline: none !important;
    border: 0 !important;
    object-fit: cover !important;
}

/* === RESALTADO del thumb SELECCIONADO ·
   El JS del Warehouse mueve dinámicamente la clase `js-thumb-selected`
   en el <img>. Usamos `:has()` para aplicar el halo en el CONTENEDOR
   externo (sin overflow hidden) → la sombra se ve por los 4 lados.
   Cubrimos también `.selected` por si el JS no la actualiza igual. === */
body #product #product-images-thumbs .swiper-slide:has(.js-thumb-selected),
body #product #product-images-thumbs .swiper-slide:has(.thumb.selected),
body #product #product-images-thumbs .thumb-container:has(.js-thumb-selected),
body #product #product-images-thumbs .thumb-container:has(.thumb.selected),
body[id^="product"] #product-images-thumbs .swiper-slide:has(.js-thumb-selected),
body[id^="product"] #product-images-thumbs .thumb-container:has(.js-thumb-selected) {
    box-shadow: 0 0 0 2px var(--hk-accent, #8A4A4A) !important;     /* thumb activa = burdeos (selección) */
    border-radius: 8px !important;
    outline: none !important;
}

/* === MINIATURAS TABLET (600–991px) · tira horizontal compacta ===
   Va DESPUÉS del bloque base de rejilla 4-col a propósito (mismo selector +
   !important → gana la posterior). En tablet esa rejilla ocupaba 2 filas
   enormes y tapaba el contenido de abajo; aquí pasa a UNA fila deslizable y
   pequeña, así se ve enseguida que hay más debajo. */
@media (min-width: 600px) and (max-width: 991px) {
    /* Mantenemos display:grid (la base ya lo fuerza con !important · no lo
       peleamos) y lo convertimos en UNA fila deslizable con grid-auto-flow. */
    body #product #product-images-thumbs .swiper-wrapper,
    body[id^="product"] #product-images-thumbs .swiper-wrapper {
        grid-template-columns: none !important;   /* anula la rejilla de 4 col */
        grid-auto-flow: column !important;        /* todo en UNA fila */
        grid-auto-columns: 104px !important;      /* cada miniatura 104px */
        overflow-x: auto !important;              /* deslizable horizontal */
        gap: 8px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
    }
    body #product #product-images-thumbs .swiper-wrapper::-webkit-scrollbar,
    body[id^="product"] #product-images-thumbs .swiper-wrapper::-webkit-scrollbar { display: none !important; }
    body #product #product-images-thumbs .swiper-slide,
    body[id^="product"] #product-images-thumbs .swiper-slide {
        width: 104px !important;
        max-width: 104px !important;
        min-width: 104px !important;
    }
}

/* Fallback para browsers sin :has() (Firefox <121).
   Si no soporta :has, el shadow se aplica directamente al img · queda algo
   recortado pero al menos visible. */
@supports not selector(:has(*)) {
    body #product #product-images-thumbs .thumb.selected,
    body #product #product-images-thumbs .thumb.js-thumb-selected,
    body[id^="product"] #product-images-thumbs .thumb.selected,
    body[id^="product"] #product-images-thumbs .thumb.js-thumb-selected {
        box-shadow: 0 0 0 2px var(--hk-accent, #8A4A4A) !important;
        outline: none !important;
    }
}

/* Hover sutil de cualquier thumb · ligero scale */
body #product #product-images-thumbs .thumb-container:hover,
body[id^="product"] #product-images-thumbs .thumb-container:hover {
    transform: translateY(-1px);
    transition: transform 0.18s ease;
}

/* =====================================================================
   FLECHAS PREV/NEXT del swiper · ficha producto
   Las flechas amarillas del theme Warehouse usan un mustard "antiguo"
   (más saturado/cálido). Las pasamos al MUSTARD de la paleta HKFinal
   para coherencia visual con el sticker NUEVO y los otros elementos
   mustard de la tienda. Mantenemos forma circular y posición original.
   ===================================================================== */
body #product .swiper-button-prev,
body #product .swiper-button-next,
body #product .swiper-button-arrow,
body[id^="product"] .swiper-button-prev,
body[id^="product"] .swiper-button-next,
body[id^="product"] .swiper-button-arrow,
body #product .swiper-button-inner-prev,
body #product .swiper-button-inner-next {
    /* test buyer · Claude design: círculo CREMA + flecha tinta (antes burdeos/malva feo) */
    background-color: var(--hk-cream, #FBF6EF) !important;
    color: var(--hk-ink, #3A2C28) !important;
    border: 1px solid var(--hk-line, #E5D5C8) !important;
    box-shadow: 0 2px 10px rgba(58, 44, 40, 0.10) !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

/* Hover · mustard oscuro (mismo cambio que aplicamos en el CTA "Personalizar") */
body #product .swiper-button-prev:hover,
body #product .swiper-button-next:hover,
body #product .swiper-button-arrow:hover,
body[id^="product"] .swiper-button-prev:hover,
body[id^="product"] .swiper-button-next:hover,
body[id^="product"] .swiper-button-arrow:hover {
    background-color: #FFFFFF !important;   /* hover: círculo más claro + lift (NO relleno oscuro) */
    color: var(--hk-ink, #3A2C28) !important;   /* la flecha sigue en tinta */
    border-color: var(--hk-line, #E5D5C8) !important;
    transform: scale(1.06) !important;
    box-shadow: 0 6px 18px rgba(58, 44, 40, 0.16) !important;
}

/* El icono de flecha dentro · asegurar contraste sobre el mustard */
body #product .swiper-button-prev::after,
body #product .swiper-button-next::after,
body #product .swiper-button-arrow::after,
body[id^="product"] .swiper-button-prev::after,
body[id^="product"] .swiper-button-next::after,
body[id^="product"] .swiper-button-arrow::after {
    color: inherit !important;   /* sigue al botón: tinta normal, crema en hover */
    font-weight: 700 !important;
}

/* Las flechas DESHABILITADAS (sin más slides hacia ese lado) · gris suave */
body #product .swiper-button-disabled,
body[id^="product"] .swiper-button-disabled {
    background-color: rgba(58, 44, 40, 0.12) !important;
    color: rgba(58, 44, 40, 0.4) !important;
    cursor: default !important;
    box-shadow: none !important;
}
body #product .swiper-button-disabled:hover,
body[id^="product"] .swiper-button-disabled:hover {
    transform: none !important;
    background-color: rgba(58, 44, 40, 0.12) !important;
}

/* =====================================================================
   FICHA PRODUCTO · TRIGGER de plazos de envío (debajo de trust badges)
   ===================================================================== */
/* MISMA geometría que el botón "producto gemelo" (.hm-sm-enhanced) — pill,
   icono en círculo, título/subtítulo apilados y flecha — pero en SAGE, no en
   burdeos: por el sistema de color semántico (_docs/sistema-color.md) el sage
   es INFO/AVISO (envíos, plazos) y el burdeos es NAVEGACIÓN (los gemelos llevan
   a otro producto). Iban idénticos y no se distinguía que hacen cosas distintas.
   Se probó también con el fondo teñido de sage (#F1F4F0) pero se descartó: basta
   con el icono (+ hover y foco) en sage para diferenciarlos sin que el bloque
   pese más que el botón de compra. Requiere el wrapper .hkp-shipping-trigger-text
   (label+cta apilados) que añadimos en trust_badges.tpl. */
body .hkp-shipping-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 16px 0 0 !important;
    padding: 11px 16px !important;
    border: 1px solid var(--hk-line, #E5D5C8) !important;
    border-radius: 14px !important;
    background: var(--hk-cream, #FBF6EF) !important;
    text-decoration: none !important;
    cursor: pointer;
    color: var(--hk-ink, #3A2C28) !important;
    font-family: Inter, sans-serif !important;
    text-align: left;
    box-shadow: 0 1px 2px rgba(58, 44, 40, .04) !important;
    outline: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}
body .hkp-shipping-trigger:focus-visible {
    outline: 2px solid var(--hk-sage-dk, #6F8568);
    outline-offset: 2px;
}
body .hkp-shipping-trigger:hover {
    border-color: var(--hk-sage-dk, #6F8568) !important;
    background: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(111, 133, 104, .12) !important;
}
/* Icono · el propio SVG se hace círculo sage (sin wrapper) */
body .hkp-shipping-trigger-icon {
    flex: 0 0 auto !important;
    width: 34px !important;
    height: 34px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    background: rgba(111, 133, 104, .12) !important;
    color: var(--hk-sage-dk, #6F8568) !important;
}
/* Título + subtítulo apilados */
body .hkp-shipping-trigger-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0;
    line-height: 1.25;
}
body .hkp-shipping-trigger-label {
    color: var(--hk-ink, #3A2C28) !important;
    font-family: Inter, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}
body .hkp-shipping-trigger-cta {
    color: var(--hk-ink-3, #9A8780) !important;
    font-family: Inter, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    margin: 1px 0 0 !important;
}
body .hkp-shipping-trigger-arrow {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    color: var(--hk-ink-3, #9A8780) !important;
    transition: transform 0.2s ease, color 0.2s ease;
}
body .hkp-shipping-trigger:hover .hkp-shipping-trigger-arrow {
    color: var(--hk-sage-dk, #6F8568) !important;
    transform: translateX(3px);
}

/* =====================================================================
   MODAL "¿Cuándo llega tu pedido?" · plazos y gastos
   ===================================================================== */
body .hkp-shipping-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}
body .hkp-shipping-modal.is-open {
    display: flex;
}
body .hkp-shipping-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(58, 44, 40, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}
body .hkp-shipping-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 720px;
    background: var(--hk-cream, #FBF6EF);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(58, 44, 40, 0.25);
    overflow: hidden;
    animation: hkp-modal-in 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
    margin: 0 auto;
}
@keyframes hkp-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* HEAD del modal · eyebrow + título + close */
body .hkp-shipping-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 26px 28px 18px;
    border-bottom: 1px solid var(--hk-line, #E5D5C8);
}
body .hkp-shipping-eyebrow {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--hk-sage-dk, #6F8568);
    margin: 0 0 8px;
}
body .hkp-shipping-title {
    font-family: Fraunces, Georgia, serif;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 400;
    color: var(--hk-ink, #3A2C28);
    margin: 0;
    line-height: 1.2;
}
body .hkp-shipping-title em {
    font-style: italic;
    color: var(--hk-accent, #8A4A4A);
}
body .hkp-shipping-modal-close {
    background: transparent;
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--hk-ink, #3A2C28);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease;
    flex-shrink: 0;
}
body .hkp-shipping-modal-close:hover {
    background: rgba(58, 44, 40, 0.08);
}

/* BODY del modal */
body .hkp-shipping-modal-body { padding: 22px 28px 28px; }

/* Aviso verde superior */
body .hkp-shipping-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(111, 133, 104, 0.10);
    border-left: 3px solid var(--hk-sage-dk, #6F8568);
    border-radius: 8px;
    margin: 0 0 22px;
}
body .hkp-shipping-alert svg { color: var(--hk-sage-dk, #6F8568); flex-shrink: 0; margin-top: 2px; }
body .hkp-shipping-alert p {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--hk-ink, #3A2C28);
}
body .hkp-shipping-alert strong { color: var(--hk-sage-dk, #6F8568); font-weight: 700; }

/* 4 cards de tipos de envío · grid 2x2 */
body .hkp-shipping-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 24px;
}
body .hkp-shipping-card {
    background: white;
    border: 1.5px solid var(--hk-line, #E5D5C8);
    border-radius: 10px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}
body .hkp-shipping-card-highlight {
    background: var(--hk-paper, #F5EAE2);
    border-color: var(--hk-line, #EBDDD0);     /* (clase ya no se usa · sin acento mostaza) */
}
body .hkp-shipping-card-icon { color: var(--hk-accent, #8A4A4A); margin-bottom: 4px; }
body .hkp-shipping-card-title {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--hk-ink, #3A2C28);
}
body .hkp-shipping-card-days {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: var(--hk-ink2, #6B5852);
    margin: 0;
}
body .hkp-shipping-card-date {
    font-family: Fraunces, Georgia, serif;
    font-style: italic;
    font-size: 13px;
    color: var(--hk-accent, #8A4A4A);
    margin: 2px 0 6px;
}
body .hkp-shipping-card-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--hk-paper, #F5EAE2);      /* badge zona envío = papel (sin mostaza) */
    color: var(--hk-ink, #3A2C28);
    border-radius: 999px;
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
}
body .hkp-shipping-card:not(.hkp-shipping-card-highlight) .hkp-shipping-card-badge {
    background: var(--hk-paper, #F5EAE2);
    color: var(--hk-ink, #3A2C28);
}
body .hkp-shipping-card-price {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--hk-ink, #3A2C28);
    margin: 2px 0 0;
}
/* Zona sin transportista activo todavía (ej. Canarias/Ceuta/Melilla) */
body .hkp-shipping-card--soon {
    opacity: 0.72;
    border-style: dashed;
}

/* Gastos de envío */
body .hkp-shipping-h3 {
    font-family: Fraunces, Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--hk-ink, #3A2C28);
    margin: 0 0 12px;
}
body .hkp-shipping-gastos {
    background: white;
    border: 1px solid var(--hk-line, #E5D5C8);
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 22px;
}
body .hkp-shipping-gastos-row {
    padding: 12px 16px;
    border-bottom: 1px solid var(--hk-line, #E5D5C8);
}
body .hkp-shipping-gastos-row:last-child { border-bottom: 0; }
body .hkp-shipping-gastos-zone {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--hk-ink, #3A2C28);
    margin: 0 0 4px;
}
body .hkp-shipping-gastos-text {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--hk-ink2, #6B5852);
}
body .hkp-shipping-gastos-text strong { color: var(--hk-sage-dk, #6F8568); font-weight: 700; }

/* Avisos finales · WhatsApp + Carteles */
body .hkp-shipping-aviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 0 0 10px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}
body .hkp-shipping-aviso p { margin: 0; color: var(--hk-ink, #3A2C28); }
body .hkp-shipping-aviso strong { color: var(--hk-ink, #3A2C28); font-weight: 700; }
body .hkp-shipping-aviso svg { flex-shrink: 0; margin-top: 2px; }
body .hkp-shipping-aviso-bulk {
    background: rgba(111, 133, 104, 0.10);
    border-left: 3px solid var(--hk-sage-dk, #6F8568);
}
body .hkp-shipping-aviso-bulk svg { color: var(--hk-sage-dk, #6F8568); }
body .hkp-shipping-aviso-banners {
    background: rgba(111, 133, 104, 0.10);
    border-left: 3px solid var(--hk-sage-dk, #6F8568);     /* aviso = sage (info) */
}
body .hkp-shipping-aviso-banners svg { color: var(--hk-sage-dk, #6F8568); }

/* Lock scroll cuando el modal está abierto · técnica position:fixed.
   El JS aplica `position: fixed; top: -scrollY` al body para mantener
   visualmente la posición del scroll mientras el modal está abierto.
   Al cerrar, restaura window.scrollTo(0, scrollY) sin saltos.
   NO necesita ninguna clase CSS · el JS aplica todo inline. */

/* Responsive · móvil */
@media (max-width: 575px) {
    body .hkp-shipping-modal { padding: 12px; }
    body .hkp-shipping-modal-head { padding: 20px 18px 14px; }
    body .hkp-shipping-modal-body { padding: 18px 18px 22px; }
    body .hkp-shipping-cards { grid-template-columns: 1fr; }
}

/* =====================================================================
   FICHA PRODUCTO · PESTAÑAS sticky + secciones del footer (Paso A)
   ===================================================================== */

/* Scroll suave global · el navegador maneja la animación del scrollTo
   con curva más natural que la implementación JS manual */
html { scroll-behavior: smooth; }
/* Respeta usuarios que prefieren reduced-motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Ocultar las pestañas viejas del theme Warehouse · usamos las nuestras */
body #product .tabs.product-tabs,
body[id^="product"] .tabs.product-tabs,
body #product .product-tabs.ets-ept-list-tabs-more-info,
body #product .iqit-accordion,
body[id^="product"] .iqit-accordion,
body #product .product-info-block,
body #product #product-infos-accordion-mobile {
    display: none !important;
}

/* Wrapper del footer · full-width que se sale del container */
body #product .hkp-product-footer,
body[id^="product"] .hkp-product-footer {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 64px;
    background: var(--hk-bg, #FBF6EF);
}

/* === NAV DE PESTAÑAS · sticky barra horizontal === */
body #product .hkp-tabs,
body[id^="product"] .hkp-tabs {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--hk-bg, #FBF6EF);
    border-bottom: 1px solid var(--hk-line, #E5D5C8);
    box-shadow: 0 1px 0 transparent;
    transition: box-shadow 0.22s ease;
}

/* Estado "stuck" (cuando está pegado arriba) · sombra sutil */
body #product .hkp-tabs.is-stuck,
body[id^="product"] .hkp-tabs.is-stuck {
    box-shadow: 0 2px 12px rgba(58, 44, 40, 0.06);
}

body #product .hkp-tabs-inner,
body[id^="product"] .hkp-tabs-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;        /* Firefox · ocultar scrollbar */
    -ms-overflow-style: none;     /* IE/Edge */
}

body #product .hkp-tabs-inner::-webkit-scrollbar,
body[id^="product"] .hkp-tabs-inner::-webkit-scrollbar {
    display: none;
}

body #product .hkp-tab,
body[id^="product"] .hkp-tab {
    flex-shrink: 0;
    padding: 22px 18px;                  /* +4px vertical · texto respira mejor */
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hk-ink2, #6B5852);
    text-decoration: none !important;
    border-bottom: 3px solid transparent; /* +1px más grueso · más visible */
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    background: transparent;
    cursor: pointer;
    line-height: 1.2;
}

body #product .hkp-tab:hover,
body[id^="product"] .hkp-tab:hover {
    color: var(--hk-accent, #8A4A4A);
    text-decoration: none !important;
}

body #product .hkp-tab.is-active,
body[id^="product"] .hkp-tab.is-active {
    color: var(--hk-ink, #3A2C28);
    border-bottom-color: var(--hk-accent, #8A4A4A);
}

/* === SECCIONES · contenedores que el scroll-to apunta === */
body #product .hkp-section,
body[id^="product"] .hkp-section {
    padding: 64px 0;
    border-bottom: 1px solid var(--hk-line, #E5D5C8);
    scroll-margin-top: 80px;       /* offset cuando scroll-to · no se tapa con pestañas */
}

body #product .hkp-section:last-child,
body[id^="product"] .hkp-section:last-child {
    border-bottom: 0;
}

/* Placeholder visual (mientras desarrollamos pasos B-F) */
body #product .hkp-section-placeholder,
body[id^="product"] .hkp-section-placeholder {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
    color: var(--hk-ink2, #6B5852);
}

body #product .hkp-section-eyebrow,
body[id^="product"] .hkp-section-eyebrow {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--hk-accent, #8A4A4A);
    margin: 0 0 12px;
    text-transform: uppercase;
}

/* Alternancia de fondos · Descripción (1ª sección visual) = cream, luego paper.
   Nota: el primer hijo del .hkp-product-footer es <nav class="hkp-tabs">,
   así que la 1ª <section> es nth-child(2) (even). Por eso even=cream y odd=paper. */
body #product .hkp-section:nth-child(even),
body[id^="product"] .hkp-section:nth-child(even) {
    background: var(--hk-cream, #FBF6EF);
}
body #product .hkp-section:nth-child(odd),
body[id^="product"] .hkp-section:nth-child(odd) {
    background: var(--hk-paper, #F5EAE2);
}

/* Reseñas (Paso E) · fondo cream fijo para que las cards paper contrasten
   (foto 2). Especificidad 0,3,1 = empata con :nth-child y gana por ir después. */
body #product .hkp-section.hkp-section-reviews,
body[id^="product"] .hkp-section.hkp-section-reviews {
    background: var(--hk-cream, #FBF6EF);
}

/* Te puede gustar (Paso F) · fondo paper (rosa) como el design · las cards
   van en paper-deep para destacar sobre la sección.
   padding-bottom 0 → la sección queda pegada al footer (sin espacio inferior). */
body #product .hkp-section.hkp-section-related,
body[id^="product"] .hkp-section.hkp-section-related {
    background: var(--hk-paper, #F5EAE2);
    padding-bottom: 0 !important;
}

/* El #wrapper del tema mete ~25px de padding-bottom bajo el footer de la ficha
   → hueco antes del footer oscuro. En producto lo quitamos para que "Te puede
   gustar" quede pegado al footer (visto en el inspector · foto 3). */
body #product #wrapper,
body[id^="product"] #wrapper {
    padding-bottom: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   PASO F · TE PUEDE GUSTAR · cross-sell reubicado en la sección
   (iqitcrossselling · variante producto, movido por product-enhance.js)
   ════════════════════════════════════════════════════════════════ */
/* Usamos el eyebrow de la sección ("TE PUEDE GUSTAR") · ocultamos el título
   propio del bloque movido ("También te puede interesar"), venga de
   iqitcrossselling (.titulo-cross) o del bloque de accesorios (.section-title). */
body #product .hkp-section-related .titulo-cross,
body[id^="product"] .hkp-section-related .titulo-cross,
body #product .hkp-section-related .section-title,
body[id^="product"] .hkp-section-related .section-title { display: none; }

/* Reset de márgenes/fondo del bloque movido dentro de nuestra sección */
body #product .hkp-section-related .hkh-cross--product,
body[id^="product"] .hkp-section-related .hkh-cross--product,
body #product .hkp-section-related .crossselling-products,
body[id^="product"] .hkp-section-related .crossselling-products,
body #product .hkp-section-related .product-accessories,
body[id^="product"] .hkp-section-related .product-accessories {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}
body #product .hkp-section-related .hkp-related-mount,
body[id^="product"] .hkp-section-related .hkp-related-mount {
    margin-top: 8px;
}

/* ── Cabecera 2-col: título a la izq · botón categoría a la dcha ── */
body[id^="product"] .hkp-related-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
body[id^="product"] .hkp-related-eyebrow { margin-bottom: 12px; }
body[id^="product"] .hkp-related-title {
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.12;
    margin: 0;
    color: var(--hk-ink, #3A2C28);
}
body[id^="product"] .hkp-related-title em { font-style: italic; color: var(--hk-accent, #8A4A4A); }
body[id^="product"] .hkp-related-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hk-accent, #8A4A4A) !important;
    text-decoration: none !important;
    border: 1px solid var(--hk-line, #E5D5C8);
    border-radius: 999px;
    padding: 10px 18px;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body[id^="product"] .hkp-related-cta:hover {
    background: var(--hk-ink, #3A2C28);
    color: var(--hk-cream, #FBF6EF) !important;
    border-color: var(--hk-ink, #3A2C28);
}
@media (max-width: 768px) {
    body[id^="product"] .hkp-related-head { flex-direction: column; align-items: stretch; }
}

/* ── Grid de 4 (mata el swiper · sin scroll lateral) ── */
body[id^="product"] #hkp-section-related .section-content,
body[id^="product"] #hkp-section-related .swiper-container-wrapper,
body[id^="product"] #hkp-section-related .swiper-container { overflow: visible !important; }
body[id^="product"] #hkp-section-related .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    transform: none !important;
    transition: none !important;
}
body[id^="product"] #hkp-section-related .swiper-slide,
body[id^="product"] #hkp-section-related .product-carousel {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}
/* Máximo 4 · evita scroll y filas de más */
body[id^="product"] #hkp-section-related .swiper-slide:nth-child(n+5) { display: none !important; }
body[id^="product"] #hkp-section-related .swiper-button-prev,
body[id^="product"] #hkp-section-related .swiper-button-next,
body[id^="product"] #hkp-section-related .swiper-pagination { display: none !important; }
@media (max-width: 991px) {
    body[id^="product"] #hkp-section-related .swiper-wrapper { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    body[id^="product"] #hkp-section-related .swiper-wrapper { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ── Card · imagen cuadrada sobre fondo paper ── */
body[id^="product"] #hkp-section-related .product-miniature {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
body[id^="product"] #hkp-section-related .thumbnail-container {
    position: relative;
    background: var(--hk-paper-deep, #EFDFD3);
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    margin-bottom: 14px;
}
body[id^="product"] #hkp-section-related .thumbnail-container .product-thumbnail {
    display: block; width: 100%; height: 100%; position: relative;
}
/* Rollover slide + fade · IDÉNTICO al de categoría (1ª imagen sale a la izq,
   2ª entra desde la derecha con fade · cubic-bezier suave). */
body[id^="product"] #hkp-section-related .product-thumbnail-first {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
    will-change: transform; backface-visibility: hidden;
}
body[id^="product"] #hkp-section-related .product-thumbnail-second {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important; object-fit: cover;
    opacity: 0; transform: translate3d(50%, 0, 0) !important;
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) !important;
    will-change: opacity, transform; backface-visibility: hidden;
}
body[id^="product"] #hkp-section-related .product-miniature:hover .product-thumbnail-first {
    transform: translate3d(-50%, 0, 0) !important;
}
body[id^="product"] #hkp-section-related .product-miniature:hover .product-thumbnail-second {
    opacity: 1; transform: translate3d(0, 0, 0) !important;
}

/* Badge "TOP VENTA" (product flags) arriba-izquierda */
body[id^="product"] #hkp-section-related .product-flags {
    position: absolute; top: 12px; left: 12px;
    margin: 0; padding: 0; list-style: none; z-index: 2;
}
body[id^="product"] #hkp-section-related .product-flag {
    display: inline-block;
    background: var(--hk-ink, #3A2C28);     /* Top venta relacionados = tinta (sistema etiquetas) */
    color: var(--hk-cream, #FBF6EF);
    border-radius: 999px;
    padding: 4px 11px;
    font-family: Inter, sans-serif;
    font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(58, 44, 40, 0.1);
}

/* Wishlist (corazón) abajo-derecha · ocultamos quickview */
body[id^="product"] #hkp-section-related .product-functional-buttons {
    position: absolute; bottom: 12px; right: 12px; z-index: 3; top: auto; left: auto;
    /* Siempre visible (el tema lo enseña solo en hover) */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
/* A PRUEBA DE BALAS · ocultamos TODOS los botones funcionales y dejamos SOLO
   el corazón de wishlist. El "ojo" (quickview/compare) seguía colándose aunque
   lo ocultábamos por clase, así que mejor ocultar todo y reactivar el corazón. */
body[id^="product"] #hkp-section-related .product-functional-buttons-links > * { display: none !important; }
body[id^="product"] #hkp-section-related .product-functional-buttons-links > .btn-iqitwishlist-add,
body[id^="product"] #hkp-section-related .product-functional-buttons-links > a.btn-iqitwishlist-add { display: inline-flex !important; }
/* Refuerzo por si el quickview/compare cuelga fuera de .product-functional-buttons-links */
body[id^="product"] #hkp-section-related .js-quick-view-iqit,
body[id^="product"] #hkp-section-related [data-link-action="quickview"],
body[id^="product"] #hkp-section-related .quick-view,
body[id^="product"] #hkp-section-related .btn-iqitcompare-add,
body[id^="product"] #hkp-section-related .js-iqitcompare-add { display: none !important; }
body[id^="product"] #hkp-section-related .product-functional-buttons-links { display: flex; gap: 6px; }
/* OJO: estilizar SOLO el corazón. Si aplicáramos a todos los <a> (como antes),
   el display:inline-flex !important re-mostraba el quickview/compare ocultos. */
body[id^="product"] #hkp-section-related .product-functional-buttons-links .btn-iqitwishlist-add,
body[id^="product"] #hkp-section-related .product-functional-buttons-links a.btn-iqitwishlist-add {
    width: 34px; height: 34px;
    border-radius: 999px;
    background: #fff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(58, 44, 40, 0.12);
    color: var(--hk-ink, #3A2C28);
    border: 0;
    transition: background 0.18s ease, color 0.18s ease;
}
/* Estado AÑADIDO (foto 1) · botón burdeos · el corazón ya pasa a cream filled
   por la regla global .iqitwishlist-added::before */
body[id^="product"] #hkp-section-related .btn-iqitwishlist-add.iqitwishlist-added {
    background: var(--hk-accent, #8A4A4A) !important;
    color: var(--hk-cream, #FBF6EF) !important;
}

/* Cards a igual altura → precio siempre al fondo, alineado entre cards */
body[id^="product"] #hkp-section-related .swiper-slide { display: flex; }
body[id^="product"] #hkp-section-related .product-carousel { width: 100% !important; display: flex; }
body[id^="product"] #hkp-section-related .product-miniature {
    display: flex; flex-direction: column; width: 100%;
}
/* Descripción · nombre serif + precio italic burdeos · resto oculto */
body[id^="product"] #hkp-section-related .product-description {
    text-align: left; padding: 0;
    display: flex; flex-direction: column; flex: 1 1 auto;
}
body[id^="product"] #hkp-section-related .product-category-name,
body[id^="product"] #hkp-section-related .product-brand,
body[id^="product"] #hkp-section-related .product-reference,
body[id^="product"] #hkp-section-related .product-description-short,
body[id^="product"] #hkp-section-related .products-variants,
body[id^="product"] #hkp-section-related .product-availability,
body[id^="product"] #hkp-section-related .product-add-cart,
body[id^="product"] #hkp-section-related .product-add-cart-below { display: none !important; }
body[id^="product"] #hkp-section-related .product-title {
    font-family: var(--hk-font-serif, Georgia, serif);
    font-size: 15px; line-height: 1.3; margin: 0 0 6px; font-weight: 400;
}
body[id^="product"] #hkp-section-related .product-title a { color: var(--hk-ink, #3A2C28); text-decoration: none; }
body[id^="product"] #hkp-section-related .product-title a:hover { color: var(--hk-accent, #8A4A4A); }
body[id^="product"] #hkp-section-related .product-price-and-shipping {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-top: auto;        /* empuja el precio al fondo · alineado entre cards */
    padding-top: 10px;
}
body[id^="product"] #hkp-section-related .product-price {
    font-family: var(--hk-font-serif, Georgia, serif);
    font-style: italic; font-weight: 400;
    color: var(--hk-accent, #8A4A4A);
    font-size: 16px;
}

/* Responsive · móvil: pestañas más compactas */
@media (max-width: 575px) {
    body #product .hkp-tabs-inner {
        padding: 0 16px;
        gap: 4px;
    }
    body #product .hkp-tab {
        padding: 14px 10px;
        font-size: 11px;
        letter-spacing: 0.1em;
    }
    body #product .hkp-section {
        padding: 40px 0;
        scroll-margin-top: 60px;
    }
    body #product .hkp-section-placeholder {
        padding: 0 16px;
    }
}

/* ============================================================
   PASO B · SECCIÓN DESCRIPCIÓN
   Layout flexible: se adapta al HTML que traiga cada producto.
   - H2 (si existe)        → grande centrado serif italic burdeos
   - H3 + P consecutivos   → 2 columnas en desktop (vía .hkp-desc-pair)
   - .hm-info-box          → caja paper con bullets emoji
   - Listas sueltas        → estilo limpio sin viñetas browser
============================================================ */

/* Wrapper de contenido en sección · alineación izquierda como el design */
body #product .hkp-section-wrap,
body[id^="product"] .hkp-section-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Eyebrow alineado izquierda en la sección descripción */
body #product .hkp-section-description .hkp-section-eyebrow,
body[id^="product"] .hkp-section-description .hkp-section-eyebrow {
    text-align: left;
    margin-bottom: 18px;
}

/* Body de la descripción · flexbox para layout flexible */
body #product .hkp-desc-body,
body[id^="product"] .hkp-desc-body {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 48px;
    max-width: 980px;
    margin: 0 auto;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--hk-ink, #3A2C28);
    line-height: 1.75;
    font-size: 15.5px;
    text-align: left;
}

/* Por defecto · todo full-width, sin margen propio (lo controla el gap) */
body #product .hkp-desc-body > *,
body[id^="product"] .hkp-desc-body > * {
    width: 100%;
    margin: 0;
}

/* H2 (si el producto lo tiene) · grande IZQUIERDA serif */
body #product .hkp-desc-body h2,
body[id^="product"] .hkp-desc-body h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.18;
    text-align: left;
    color: var(--hk-ink, #3A2C28);
    margin-top: 0;
    margin-bottom: -8px;   /* compensar el gap base · el H2 va más pegado a su párrafo */
    letter-spacing: -0.005em;
}

/* El párrafo inmediatamente posterior al H2 va pegado (compensa el gap) */
body #product .hkp-desc-body h2 + p,
body[id^="product"] .hkp-desc-body h2 + p {
    margin-top: 8px;
}

/* <em> dentro del H2 · color burdeos italic (estilo design)
   Puedes añadirlo manualmente en el HTML del producto (BO):
   <h2>Un marco que guarda <em>vuestra historia</em></h2>
   O el JS lo añade automáticamente con heurística si no existe. */
body #product .hkp-desc-body h2 em,
body[id^="product"] .hkp-desc-body h2 em,
body #product .hkp-desc-body h2 i,
body[id^="product"] .hkp-desc-body h2 i {
    color: var(--hk-accent, #8A4A4A);
    font-style: italic;
    font-weight: 400;
    font-family: 'Fraunces', Georgia, serif;
}

/* H3 · más sutil, serif elegante */
body #product .hkp-desc-body h3,
body[id^="product"] .hkp-desc-body h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    color: var(--hk-ink, #3A2C28);
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
}

/* Párrafos */
body #product .hkp-desc-body p,
body[id^="product"] .hkp-desc-body p {
    color: var(--hk-ink2, #6B5852);
    margin: 0;
}

/* Enlaces dentro de la descripción */
body #product .hkp-desc-body a,
body[id^="product"] .hkp-desc-body a {
    color: var(--hk-accent, #8A4A4A);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Strong / em */
body #product .hkp-desc-body strong,
body[id^="product"] .hkp-desc-body strong {
    color: var(--hk-ink, #3A2C28);
    font-weight: 600;
}
body #product .hkp-desc-body em,
body[id^="product"] .hkp-desc-body em {
    color: var(--hk-accent, #8A4A4A);
    font-style: italic;
}

/* PAIRS (H3 + P) · 2 columnas en desktop, 1 en móvil */
body #product .hkp-desc-body .hkp-desc-pair,
body[id^="product"] .hkp-desc-body .hkp-desc-pair {
    width: 100%;
}
body #product .hkp-desc-body .hkp-desc-pair h3,
body[id^="product"] .hkp-desc-body .hkp-desc-pair h3 {
    margin-top: 0;
    margin-bottom: 6px;
}
body #product .hkp-desc-body .hkp-desc-pair p,
body[id^="product"] .hkp-desc-body .hkp-desc-pair p {
    margin: 0;
}

@media (min-width: 768px) {
    body #product .hkp-desc-body .hkp-desc-pair,
    body[id^="product"] .hkp-desc-body .hkp-desc-pair {
        /* 2 pairs consecutivos → 50% cada uno. 1 pair aislado → 100%. */
        flex: 1 1 calc(50% - 24px);
        min-width: 280px;
    }
}

/* CAJA INFO-BOX · características técnicas */
body #product .hkp-desc-body .hm-info-box,
body[id^="product"] .hkp-desc-body .hm-info-box {
    width: 100%;
    background: rgba(229, 213, 200, 0.32);
    border: 1px solid var(--hk-line, #E5D5C8);
    border-radius: 14px;
    padding: 32px 36px;
    margin-top: 16px;
}

body #product .hkp-desc-body .hm-info-box h3,
body[id^="product"] .hkp-desc-body .hm-info-box h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    font-weight: 500;
    color: var(--hk-ink, #3A2C28);
    margin-top: 0;
    margin-bottom: 14px;
    letter-spacing: 0.01em;
}

body #product .hkp-desc-body .hm-info-box ul,
body[id^="product"] .hkp-desc-body .hm-info-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* multicolumna en vez de grid: los ítems fluyen en vertical y NO se alinean por filas,
       así un ítem de 2 líneas no deja hueco en el de al lado (bug del grid 1fr 1fr) */
    columns: 2;
    column-gap: 32px;
    font-size: 14.5px;
    color: var(--hk-ink2, #6B5852);
}

body #product .hkp-desc-body .hm-info-box li,
body[id^="product"] .hkp-desc-body .hm-info-box li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.45;
    margin-bottom: 10px;                 /* ritmo vertical (multicol no tiene row-gap) */
    break-inside: avoid;                 /* no partir un ítem entre columnas */
    -webkit-column-break-inside: avoid;  /* Safari antiguo */
}

/* Bullet decorativo burdeos · sustituye al emoji (problemas en móvil) */
/* Se aplica a TODAS las listas dentro de la descripción · sin emoji = compatibilidad 100% */
body #product .hkp-desc-body .hm-info-box li::before,
body[id^="product"] .hkp-desc-body .hm-info-box li::before,
body #product .hkp-desc-body > ul > li::before,
body[id^="product"] .hkp-desc-body > ul > li::before {
    content: '';
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hk-accent, #8A4A4A);
    margin-top: 9px;        /* alinea con baseline de la 1ª línea (line-height 1.45 · font 14.5px) */
    opacity: 0.65;          /* sutil · acompaña sin gritar */
}

/* Listas sueltas (no en info-box) · UL hijo directo del body */
body #product .hkp-desc-body > ul,
body[id^="product"] .hkp-desc-body > ul {
    list-style: none;
    padding: 0;
    columns: 2;                 /* multicolumna (mismo fix que la info-box) */
    column-gap: 32px;
    font-size: 14.5px;
    color: var(--hk-ink2, #6B5852);
}
body #product .hkp-desc-body > ul > li,
body[id^="product"] .hkp-desc-body > ul > li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.45;
    margin-bottom: 10px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* Mensaje "sin descripción" · neutral */
body #product .hkp-desc-empty,
body[id^="product"] .hkp-desc-empty {
    text-align: center;
    color: var(--hk-ink2, #6B5852);
    font-style: italic;
    padding: 24px 0;
}

/* MÓVIL · todo en 1 columna */
@media (max-width: 767px) {
    body #product .hkp-section-wrap,
    body[id^="product"] .hkp-section-wrap {
        padding: 0 20px;
    }
    body #product .hkp-desc-body,
    body[id^="product"] .hkp-desc-body {
        gap: 18px 0;
        font-size: 15px;
    }
    body #product .hkp-desc-body h2,
    body[id^="product"] .hkp-desc-body h2 {
        font-size: 26px;
    }
    body #product .hkp-desc-body h3,
    body[id^="product"] .hkp-desc-body h3 {
        font-size: 19px;
    }
    body #product .hkp-desc-body .hm-info-box,
    body[id^="product"] .hkp-desc-body .hm-info-box {
        padding: 20px 18px;
    }
    body #product .hkp-desc-body .hm-info-box ul,
    body #product .hkp-desc-body > ul,
    body[id^="product"] .hkp-desc-body .hm-info-box ul,
    body[id^="product"] .hkp-desc-body > ul {
        columns: 1;   /* móvil: 1 columna (antes grid-template-columns:1fr) */
    }
}

/* ============================================================
   PASO C · SECCIÓN "CÓMO LO HACEMOS"
   Bloque editorial con encabezado + grid 4 cards.
   Cada card: imagen arriba (paper bg) + body (número 01 grande,
   título serif, texto sans). Editable desde BO.
============================================================ */

/* Wide wrap · esta sección usa más anchura que la descripción */
body #product .hkp-section-wrap--wide,
body[id^="product"] .hkp-section-wrap--wide {
    max-width: 1280px;
    padding: 0 40px;
}

/* ── Encabezado del bloque ── */
body #product .hkp-workshop-head,
body[id^="product"] .hkp-workshop-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 60px;
    align-items: end;
    margin-bottom: 40px;
}

body #product .hkp-workshop-head-left,
body[id^="product"] .hkp-workshop-head-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body #product .hkp-workshop-eyebrow,
body[id^="product"] .hkp-workshop-eyebrow {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--hk-accent, #8A4A4A);
    text-transform: uppercase;
    line-height: 1;
}

body #product .hkp-workshop-title,
body[id^="product"] .hkp-workshop-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.18;
    color: var(--hk-ink, #3A2C28);
    margin: 0;
    letter-spacing: -0.005em;
}

/* El JS heurístico split italic burdeos · respeta <em> manual */
body #product .hkp-workshop-title em,
body[id^="product"] .hkp-workshop-title em,
body #product .hkp-workshop-title i,
body[id^="product"] .hkp-workshop-title i {
    color: var(--hk-accent, #8A4A4A);
    font-style: italic;
    font-family: 'Fraunces', Georgia, serif;
}

body #product .hkp-workshop-intro,
body[id^="product"] .hkp-workshop-intro {
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--hk-ink2, #6B5852);
    margin: 0;
    max-width: 480px;
}

/* ── Grid de 4 cards ── */
body #product .hkp-workshop-grid,
body[id^="product"] .hkp-workshop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* ── Card individual ── */
body #product .hkp-workshop-card,
body[id^="product"] .hkp-workshop-card {
    display: flex;
    flex-direction: column;
    background: #FFF;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--hk-line, #E5D5C8);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body #product .hkp-workshop-card:hover,
body[id^="product"] .hkp-workshop-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(58, 44, 40, 0.06);
}

/* Media (imagen) · ratio cuadrado · fondo paper si no hay imagen */
body #product .hkp-workshop-card-media,
body[id^="product"] .hkp-workshop-card-media {
    aspect-ratio: 1 / 1;
    background: var(--hk-paper, #F5EAE2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body #product .hkp-workshop-card-media img,
body[id^="product"] .hkp-workshop-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder cuando aún no se ha subido imagen (admin sin completar) */
body #product .hkp-workshop-card-media-empty,
body[id^="product"] .hkp-workshop-card-media-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--hk-ink3, #9B8A82);
    text-align: center;
}
body #product .hkp-workshop-card-media-empty small,
body[id^="product"] .hkp-workshop-card-media-empty small {
    font-family: Inter, sans-serif;
    font-size: 11px;
    letter-spacing: 0.05em;
}

/* Body de la card (debajo de la imagen) */
body #product .hkp-workshop-card-body,
body[id^="product"] .hkp-workshop-card-body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
}

body #product .hkp-workshop-card-num,
body[id^="product"] .hkp-workshop-card-num {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    color: var(--hk-accent, #8A4A4A);
    line-height: 1;
    margin-bottom: 6px;
}

body #product .hkp-workshop-card-title,
body[id^="product"] .hkp-workshop-card-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    color: var(--hk-ink, #3A2C28);
    margin: 0 0 4px;
}

body #product .hkp-workshop-card-text,
body[id^="product"] .hkp-workshop-card-text {
    font-family: Inter, sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--hk-ink2, #6B5852);
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    body #product .hkp-workshop-grid,
    body[id^="product"] .hkp-workshop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (max-width: 767px) {
    body #product .hkp-section-wrap--wide,
    body[id^="product"] .hkp-section-wrap--wide {
        padding: 0 20px;
    }
    body #product .hkp-workshop-head,
    body[id^="product"] .hkp-workshop-head {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 28px;
    }
    body #product .hkp-workshop-intro,
    body[id^="product"] .hkp-workshop-intro {
        max-width: 100%;
    }
    body #product .hkp-workshop-card-body,
    body[id^="product"] .hkp-workshop-card-body {
        padding: 18px 18px 20px;
    }
}

@media (max-width: 479px) {
    body #product .hkp-workshop-grid,
    body[id^="product"] .hkp-workshop-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PASO D · SECCIÓN "MADERA NATURAL" (solo productos madera)
   Bloque horizontal · imagen close-up (izq) + texto (der).
   Italic verde sage en el <em> del título · diferencia con
   el burdeos de la descripción.
============================================================ */

body #product .hkp-wood-block,
body[id^="product"] .hkp-wood-block {
    display: grid;
    grid-template-columns: minmax(300px, 420px) 1fr;
    gap: 56px;
    align-items: center;
    /* Tono "madera natural" · cream verde muy suave + border sage.
       Lo natural se siente sin gritar · opacidad baja en ambos. */
    background: rgba(164, 181, 156, 0.13);          /* sage al 13% */
    border: 1px solid rgba(111, 133, 104, 0.4);      /* sage-dk al 40% */
    border-radius: 16px;
    padding: 32px;
    max-width: 1080px;
    margin: 0 auto;
}

/* ── Media (imagen close-up de la madera) ── */
body #product .hkp-wood-media,
body[id^="product"] .hkp-wood-media {
    aspect-ratio: 1 / 1;
    /* Fondo paper rosa "antiguo" mientras no haya imagen subida ·
       cuando subes la foto la imagen lo cubre con cover. */
    background: rgba(245, 234, 226, 0.6);  /* paper translúcido sobre el sage */
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

body #product .hkp-wood-media img,
body[id^="product"] .hkp-wood-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body #product .hkp-wood-media-empty,
body[id^="product"] .hkp-wood-media-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    color: var(--hk-ink3, #9B8A82);
    text-align: center;
}
body #product .hkp-wood-media-empty small,
body[id^="product"] .hkp-wood-media-empty small {
    font-family: Inter, sans-serif;
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

/* ── Body (eyebrow + título + texto) ── */
body #product .hkp-wood-body,
body[id^="product"] .hkp-wood-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body #product .hkp-wood-eyebrow,
body[id^="product"] .hkp-wood-eyebrow {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    /* Verde sage para mantener el rollo natural del bloque entero
       (no burdeos como el resto de eyebrows). */
    color: var(--hk-sage-dk, #6F8568);
    text-transform: uppercase;
    line-height: 1;
}

body #product .hkp-wood-title,
body[id^="product"] .hkp-wood-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.2;
    color: var(--hk-ink, #3A2C28);
    margin: 0;
    letter-spacing: -0.005em;
}

/* <em> dentro del título de madera → VERDE SAGE italic
   (vs burdeos de descripción · indica "natural · orgánico") */
body #product .hkp-wood-title em,
body[id^="product"] .hkp-wood-title em,
body #product .hkp-wood-title i,
body[id^="product"] .hkp-wood-title i {
    color: var(--hk-sage-dk, #6B8454);
    font-style: italic;
    font-family: 'Fraunces', Georgia, serif;
}

body #product .hkp-wood-text,
body[id^="product"] .hkp-wood-text {
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--hk-ink2, #6B5852);
    margin: 0;
    max-width: 540px;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    body #product .hkp-wood-block,
    body[id^="product"] .hkp-wood-block {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 20px;
    }
    body #product .hkp-wood-media,
    body[id^="product"] .hkp-wood-media {
        max-width: 320px;
        margin: 0 auto;
        width: 100%;
    }
    body #product .hkp-wood-title,
    body[id^="product"] .hkp-wood-title {
        font-size: 24px;
    }
}

/* ============================================================
   PASO E · SECCIÓN "RESEÑAS"  (widget propio · diseño Claude Design)
   Cabecera (título izq + rating der) + grid 3 testimonios curados.
   Cero embed de Revi · cero llamadas externas.
============================================================ */

body #product .hkp-reviews-block,
body[id^="product"] .hkp-reviews-block {
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Encabezado: título a la izq · rating a la der ── */
body #product .hkp-reviews-head,
body[id^="product"] .hkp-reviews-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px 40px;
    flex-wrap: wrap;
    margin-bottom: 36px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--hk-line, #E5D5C8);
}

body #product .hkp-reviews-head-left,
body[id^="product"] .hkp-reviews-head-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body #product .hkp-reviews-eyebrow,
body[id^="product"] .hkp-reviews-eyebrow {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--hk-accent, #8A4A4A);
    text-transform: uppercase;
    line-height: 1;
}

body #product .hkp-reviews-title,
body[id^="product"] .hkp-reviews-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.2;
    color: var(--hk-ink, #3A2C28);
    margin: 0;
    letter-spacing: -0.005em;
}

/* <em> → italic burdeos (mismo patrón que descripción) */
body #product .hkp-reviews-title em,
body[id^="product"] .hkp-reviews-title em,
body #product .hkp-reviews-title i,
body[id^="product"] .hkp-reviews-title i {
    color: var(--hk-accent, #8A4A4A);
    font-style: italic;
    font-family: 'Fraunces', Georgia, serif;
}

/* Bloque de rating a la derecha de la cabecera */
body #product .hkp-reviews-score,
body[id^="product"] .hkp-reviews-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

body #product .hkp-reviews-stars,
body[id^="product"] .hkp-reviews-stars {
    color: var(--hk-accent, #8A4A4A);
    font-size: 17px;
    letter-spacing: 2px;
    line-height: 1;
}

body #product .hkp-reviews-score-text,
body[id^="product"] .hkp-reviews-score-text {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: var(--hk-ink2, #6B5852);
}
body #product .hkp-reviews-score-text strong,
body[id^="product"] .hkp-reviews-score-text strong {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 16px;
    color: var(--hk-accent, #8A4A4A);
    font-weight: 500;
}

/* ── Grid de testimonios destacados (3 cards) ── */
body #product .hkp-reviews-grid,
body[id^="product"] .hkp-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

body #product .hkp-review-card,
body[id^="product"] .hkp-review-card {
    background: rgba(245, 234, 226, 0.45);   /* paper translúcido */
    border: 1px solid var(--hk-line, #E5D5C8);
    border-radius: 14px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body #product .hkp-review-stars,
body[id^="product"] .hkp-review-stars {
    color: var(--hk-accent, #8A4A4A);
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 1;
}

body #product .hkp-review-text,
body[id^="product"] .hkp-review-text {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--hk-ink, #3A2C28);
    margin: 0;
    flex: 1 1 auto;
}

body #product .hkp-review-foot,
body[id^="product"] .hkp-review-foot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid var(--hk-line, #E5D5C8);
    padding-top: 12px;
}

body #product .hkp-review-meta,
body[id^="product"] .hkp-review-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

body #product .hkp-review-author,
body[id^="product"] .hkp-review-author {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hk-ink, #3A2C28);
}

body #product .hkp-review-date,
body[id^="product"] .hkp-review-date {
    font-family: Inter, sans-serif;
    font-size: 11.5px;
    color: var(--hk-ink3, #9B8A82);
    flex-shrink: 0;
}

body #product .hkp-review-gift,
body[id^="product"] .hkp-review-gift {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: var(--hk-ink2, #6B5852);
    font-style: italic;
}
body #product .hkp-review-gift em,
body[id^="product"] .hkp-review-gift em {
    font-style: italic;
    color: var(--hk-accent, #8A4A4A);
}

/* ── Botón "Ver todas las reseñas" ── */
body #product .hkp-reviews-cta,
body[id^="product"] .hkp-reviews-cta {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

body #product .hkp-reviews-all-btn,
body[id^="product"] .hkp-reviews-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    border: 1px solid var(--hk-ink, #3A2C28);
    border-radius: 999px;
    background: transparent;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hk-ink, #3A2C28);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
body #product .hkp-reviews-all-btn:hover,
body[id^="product"] .hkp-reviews-all-btn:hover {
    background: var(--hk-ink, #3A2C28);
    color: #FFF;
}

/* Nota de preview local (solo visible en .local con datos fake) */
body #product .hkp-reviews-localnote,
body[id^="product"] .hkp-reviews-localnote {
    margin: 20px 0 0;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: var(--hk-ink3, #9B8A82);
    font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    body #product .hkp-reviews-grid,
    body[id^="product"] .hkp-reviews-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 767px) {
    body #product .hkp-reviews-head,
    body[id^="product"] .hkp-reviews-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    body #product .hkp-reviews-score,
    body[id^="product"] .hkp-reviews-score {
        align-items: flex-start;
        text-align: left;
    }
}

/* =====================================================================
   FICHA PRODUCTO · ZONA CANTIDAD/PRECIO (Fase 3.3)
   Aviso de mínimo (caja sage en positivo) + tabla de descuentos clara.
   Inyectados por product-enhance.js (enhanceMinQuantity / enhanceDiscountTable).
   ===================================================================== */

/* ---- Aviso de cantidad mínima · caja sage amable ---- */
body #product p.hkp-minqty,
body[id^="product"] p.hkp-minqty {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 14px 0 0 !important;
    padding: 12px 14px !important;
    background: rgba(164, 181, 156, 0.16) !important;
    border: 1px solid var(--hk-sage, #A4B59C) !important;
    border-radius: 10px !important;
}
body #product p.hkp-minqty .hkp-minqty-ico,
body[id^="product"] p.hkp-minqty .hkp-minqty-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--hk-sage-dk, #6F8568);
    color: #fff;
}
body #product p.hkp-minqty .hkp-minqty-txt,
body[id^="product"] p.hkp-minqty .hkp-minqty-txt {
    font-family: var(--hk-font-sans, Inter, sans-serif) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: var(--hk-ink-2, #6B5852) !important;
    padding-top: 2px;
}
body #product p.hkp-minqty .hkp-minqty-txt b,
body[id^="product"] p.hkp-minqty .hkp-minqty-txt b {
    color: var(--hk-sage-dk, #6F8568) !important;
    font-weight: 700 !important;
}
/* por si quedara el icono FontAwesome viejo */
body #product p.hkp-minqty > i.fa,
body[id^="product"] p.hkp-minqty > i.fa { display: none !important; }

/* ---- Tabla de descuentos por cantidad · estilo claro Hakuna ---- */
body #product .hkp-disc-table,
body[id^="product"] .hkp-disc-table {
    width: 100% !important;
    margin: 16px 0 0 !important;
    border: 1px solid var(--hk-line, #EBDDD0) !important;
    border-radius: 12px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: none !important;
}
body #product .hkp-disc-table thead th,
body[id^="product"] .hkp-disc-table thead th {
    padding: 11px 14px !important;
    background: var(--hk-paper, #F5EAE2) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--hk-line, #EBDDD0) !important;
    font-family: var(--hk-font-sans, Inter, sans-serif) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--hk-ink-3, #9A8780) !important;
    text-align: left !important;
    vertical-align: middle !important;
}
body #product .hkp-disc-table tbody td,
body[id^="product"] .hkp-disc-table tbody td {
    padding: 11px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--hk-line-soft, #F3E7DC) !important;
    background: transparent !important;
    font-family: var(--hk-font-sans, Inter, sans-serif) !important;
    font-size: 13.5px !important;
    color: var(--hk-ink-2, #6B5852) !important;
    vertical-align: middle !important;
}
body #product .hkp-disc-table tbody tr:last-child td,
body[id^="product"] .hkp-disc-table tbody tr:last-child td { border-bottom: 0 !important; }

/* col 1 (a partir de N) · Fraunces */
body #product .hkp-disc-table tbody td:first-child,
body[id^="product"] .hkp-disc-table tbody td:first-child {
    font-family: var(--hk-font-serif, Fraunces, serif) !important;
    font-size: 15px !important;
    color: var(--hk-ink, #3A2C28) !important;
}
/* col 3 (ahorro) · burdeos italic */
body #product .hkp-disc-table tbody td:nth-child(3),
body[id^="product"] .hkp-disc-table tbody td:nth-child(3) {
    font-family: var(--hk-font-serif, Fraunces, serif) !important;
    font-style: italic !important;
    color: var(--hk-accent, #8A4A4A) !important;
}

/* pastilla de descuento (sage) */
body #product .hkp-disc-table .hkp-disc-pill,
body[id^="product"] .hkp-disc-table .hkp-disc-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(164, 181, 156, 0.22);
    color: var(--hk-sage-dk, #6F8568);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
}

/* fila activa según la cantidad actual · resalte mostaza */
body #product .hkp-disc-table tbody tr.hkp-disc-active td,
body[id^="product"] .hkp-disc-table tbody tr.hkp-disc-active td {
    background: rgba(138, 74, 74, 0.10) !important;
}
body #product .hkp-disc-table tbody tr.hkp-disc-active td:first-child,
body[id^="product"] .hkp-disc-table tbody tr.hkp-disc-active td:first-child {
    box-shadow: inset 3px 0 0 var(--hk-accent, #8A4A4A) !important;
    font-weight: 600 !important;
}

/* =====================================================================
   FICHA PRODUCTO · DESIGN PICKER (tira horizontal + modal "Ver los N")
   Inyectado por product-enhance.js (buildDesignPicker) en los grupos opt-in.
   Diseño: _inbox/final-design-picker.jsx. Clases únicas → sin scope.
   ===================================================================== */
.hkp-dpick { margin: 6px 0 2px; }
.hkp-dpick-head { margin-bottom: 12px; }
.hkp-dpick-eyebrow {
    display: block;
    font-family: var(--hk-font-sans, Inter, sans-serif);
    font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--hk-ink-2, #6B5852); margin-bottom: 4px;
}
/* El "Elige tu diseño / color" del head es redundante con el título del grupo y
   con el nombre seleccionado; lo ocultamos para igualar a los grupos nativos
   (p.ej. COLOR VINILO, sin subtítulo). El eyebrow del MODAL ("N disponibles") sí
   se mantiene. */
.hkp-dpick-head .hkp-dpick-eyebrow { display: none; }
.hkp-dpick-namerow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hkp-dpick-selname {
    font-family: var(--hk-font-serif, Fraunces, serif); font-style: italic;
    font-size: 17px; color: var(--hk-accent, #8A4A4A);
}
/* Nombre del color elegido en grupos de color "simples" (Color vinilo) ·
   mismo look que el subtítulo de los pickers, con su propio espaciado. */
.hkp-colorlist-selname { display: block; margin: 2px 0 12px; }
.hkp-dpick-verbtn {
    flex-shrink: 0; background: transparent; border: 0; cursor: pointer;
    font-family: var(--hk-font-sans, Inter, sans-serif); font-size: 11.5px; font-weight: 600;
    color: var(--hk-accent, #8A4A4A); display: inline-flex; align-items: center; gap: 5px;
}
.hkp-dpick-verbtn:hover { text-decoration: underline; }
.hkp-dpick-verbtn svg { display: block; }
/* Hint + enlace "Ver los N" unificados en la cabecera, a la derecha (antes el hint
   era un <p> suelto bajo la tira). Texto suave; "Ver los N" mantiene burdeos + lupa
   para que se lea como enlace. */
.hkp-dpick-see {
    flex: 0 1 auto; min-width: 0; text-align: right;
    font-family: var(--hk-font-sans, Inter, sans-serif); font-size: 11px;
    line-height: 1.45; color: var(--hk-ink-3, #9A8780);
}
.hkp-dpick-see .hkp-dpick-verbtn { display: inline-flex; white-space: nowrap; vertical-align: baseline; }

/* ----- tira ----- */
.hkp-dpick-stripwrap { position: relative; }
.hkp-dpick-strip {
    display: flex; gap: 12px; overflow-x: auto; padding: 8px 6px 10px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.hkp-dpick-strip::-webkit-scrollbar { height: 6px; }
.hkp-dpick-strip::-webkit-scrollbar-thumb { background: var(--hk-line, #EBDDD0); border-radius: 999px; }
.hkp-dpick-card {
    flex-shrink: 0; width: 100px; padding: 0; border: 0; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.hkp-dpick-thumb {
    position: relative; width: 100px; height: 100px; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--hk-line, #EBDDD0); background: var(--hk-paper, #F5EAE2);
    display: flex; align-items: center; justify-content: center;
    transition: outline-color .15s ease;
}
.hkp-dpick-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hkp-dpick-num {
    font-family: var(--hk-font-serif, Fraunces, serif); font-size: 34px; line-height: 1;
    color: var(--hk-ink-3, #9A8780);
}
.hkp-dpick-check {
    position: absolute; bottom: 3px; right: 3px; width: 18px; height: 18px; border-radius: 999px;
    background: var(--hk-accent, #8A4A4A); border: 1.5px solid var(--hk-cream, #FBF6EF);
    display: none; align-items: center; justify-content: center; color: var(--hk-cream, #FBF6EF);
}
.hkp-dpick-cardlabel {
    font-family: var(--hk-font-sans, Inter, sans-serif); font-size: 10px;
    color: var(--hk-ink-3, #9A8780); text-align: center; line-height: 1.2;
    max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hkp-dpick-card.is-on .hkp-dpick-thumb { outline: 2.5px solid var(--hk-accent, #8A4A4A); outline-offset: 2px; border-color: transparent; }
.hkp-dpick-card.is-on .hkp-dpick-check { display: inline-flex; }
.hkp-dpick-card.is-on .hkp-dpick-cardlabel { color: var(--hk-accent, #8A4A4A); font-weight: 600; }

/* ----- flechas ----- */
.hkp-dpick-arrow {
    position: absolute; top: 58px; transform: translateY(-50%); z-index: 3;
    width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--hk-line, #EBDDD0);
    background: var(--hk-cream, #FBF6EF); cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(58, 44, 40, .14); color: var(--hk-ink, #3A2C28);
}
.hkp-dpick-arrow:hover { background: var(--hk-accent, #8A4A4A); color: var(--hk-cream, #FBF6EF); }
.hkp-dpick-arrow-prev { left: -6px; }
.hkp-dpick-arrow-next { right: -6px; }
.hkp-dpick-hint {
    margin: 8px 0 0; font-family: var(--hk-font-sans, Inter, sans-serif); font-size: 11px;
    color: var(--hk-ink-3, #9A8780);
}

/* ----- modal "Ver los N" ----- */
.hkp-dpick-overlay {
    position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(58, 44, 40, .42);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.hkp-dpick-modal {
    width: min(720px, 100%); max-height: 100%; overflow-y: auto;
    background: var(--hk-cream, #FBF6EF); border-radius: 16px; padding: 26px 28px;
    box-shadow: 0 30px 80px rgba(58, 44, 40, .34);
}
.hkp-dpick-modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.hkp-dpick-modal-title { margin: 4px 0 0; font-family: var(--hk-font-serif, Fraunces, serif); font-size: 24px; color: var(--hk-ink, #3A2C28); }
.hkp-dpick-modal-title em { font-style: italic; color: var(--hk-accent, #8A4A4A); }
.hkp-dpick-close {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px; border: 0;
    background: rgba(58, 44, 40, .07); color: var(--hk-ink, #3A2C28); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.hkp-dpick-close:hover { background: rgba(58, 44, 40, .15); }
.hkp-dpick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.hkp-dpick-card-lg { width: 100%; }
.hkp-dpick-card-lg .hkp-dpick-thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.hkp-dpick-card-lg .hkp-dpick-cardlabel { font-size: 10.5px; color: var(--hk-ink-2, #6B5852); max-width: 100%; }

@media (max-width: 767px) {
    .hkp-dpick-grid { grid-template-columns: repeat(3, 1fr); }
    .hkp-dpick-modal { padding: 20px 18px; }
}

/* ----- lupa de zoom sobre cada miniatura + lightbox "ver grande" ----- */
.hkp-dpick-zoom {
    position: absolute; top: 4px; right: 4px; z-index: 2;
    width: 24px; height: 24px; border-radius: 999px; padding: 0; border: 0;
    background: rgba(251, 246, 239, .92); color: var(--hk-accent, #8A4A4A);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 1px 4px rgba(58, 44, 40, .22); opacity: 0;
    transition: opacity .15s ease, background .15s ease, transform .15s ease;
}
.hkp-dpick-thumb:hover .hkp-dpick-zoom,
.hkp-dpick-card:focus-within .hkp-dpick-zoom { opacity: 1; }
.hkp-dpick-zoom:hover { background: var(--hk-accent, #8A4A4A); color: var(--hk-cream, #FBF6EF); transform: scale(1.08); }
/* Táctil: no hay hover -> la lupa siempre visible */
@media (hover: none) { .hkp-dpick-zoom { opacity: 1; } }

.hkp-dlb-overlay {
    position: fixed; inset: 0; z-index: 100010; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(58, 44, 40, .58);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.hkp-dlb {
    position: relative; width: min(560px, 100%); background: var(--hk-cream, #FBF6EF);
    border-radius: 18px; padding: 22px; box-shadow: 0 30px 80px rgba(58, 44, 40, .4);
    display: flex; flex-direction: column; align-items: center;
}
.hkp-dlb-close {
    position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 999px; border: 0;
    background: rgba(58, 44, 40, .07); color: var(--hk-ink, #3A2C28); cursor: pointer; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
}
.hkp-dlb-close:hover { background: rgba(58, 44, 40, .15); }
.hkp-dlb-stage { display: flex; align-items: center; gap: 10px; width: 100%; }
.hkp-dlb-figure {
    flex: 1 1 auto; width: 100%; max-width: 440px; margin: 6px auto 0;
    border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1;
    background: var(--hk-paper, #F5EAE2); border: 1px solid var(--hk-line, #EBDDD0);
    display: flex; align-items: center; justify-content: center;
}
.hkp-dlb-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hkp-dlb-nav {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--hk-line, #EBDDD0);
    background: var(--hk-white, #fff); color: var(--hk-ink, #3A2C28); cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(58, 44, 40, .14);
}
.hkp-dlb-nav:hover { background: var(--hk-accent, #8A4A4A); color: var(--hk-cream, #FBF6EF); }
.hkp-dlb-cap { margin-top: 16px; text-align: center; }
.hkp-dlb-name {
    display: block; font-family: var(--hk-font-serif, Fraunces, serif); font-size: 19px;
    color: var(--hk-ink, #3A2C28); font-style: italic;
}
.hkp-dlb-count {
    display: block; margin-top: 3px; font-family: var(--hk-font-sans, Inter, sans-serif);
    font-size: 12px; color: var(--hk-ink-3, #9A8780); letter-spacing: .04em;
}
.hkp-dlb-choose {
    margin-top: 16px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--hk-accent, #8A4A4A); color: var(--hk-cream, #FBF6EF);
    font-family: var(--hk-font-sans, Inter, sans-serif); font-size: 13px; font-weight: 600;
    padding: 11px 26px; transition: background .15s ease;
}
.hkp-dlb-choose:hover { background: var(--hk-accent-soft, #A66565); }
@media (max-width: 767px) {
    .hkp-dlb { padding: 16px; }
    .hkp-dlb-nav { width: 34px; height: 34px; }
    .hkp-dlb-name { font-size: 17px; }
}

/* =====================================================================
   FICHA · badge de descuento del precio + precio tachado → estilo Hakuna 2.0
   El badge "-X%" → BURDEOS SÓLIDO + crema, IGUAL que la etiqueta "¡En oferta!"
   del producto (descuento/oferta = burdeos en el sistema semántico). Antes iba
   sage, pero el verde es INFO; el descuento es oferta → burdeos (petición
   cliente). El precio tachado a tinta suave. ====================== */
.product-prices .discount-percentage,
.product-prices .badge-discount,
.product-prices .discount.discount-percentage {
    background: var(--hk-accent, #8A4A4A) !important;
    color: var(--hk-cream, #FBF6EF) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    vertical-align: middle;
}
.product-prices .regular-price {
    color: var(--hk-ink-3, #9A8780) !important;
    font-weight: 400 !important;
}

/* #4 · suavizar el "parpadeo" del bloque de precio al cambiar la cantidad.
   PS refresca/reemplaza .product-prices al cruzar un tramo (muestra el precio
   con descuento). Una transición de opacidad convierte un dim/carga abrupto en
   un fundido suave. (No verificable por screenshot — juzgar a ojo.) */
body[id^="product"] .product-prices,
body #product .product-prices { transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) {
    body[id^="product"] .product-prices,
    body #product .product-prices { transition: none; }
}

/* =====================================================================
   FICHA · CABECERA DE PERSONALIZACIÓN → variante "tinta + icono mostaza"
   (design final-errors-panel.jsx) · más sobria/premium; el mostaza queda
   SOLO de acento en el icono, libre para los CTAs. Override de la cabecera
   clara previa (#EFDFD3). El pie "Cada detalle cuenta" pasa a sage suave.
   ===================================================================== */
body[id^="product"] .hkp-personalize-box,
body #product .hkp-personalize-box {
    border-color: var(--hk-line, #EBDDD0) !important;
}
body[id^="product"] .hkp-personalize-box .hkp-personalize-header,
body #product .hkp-personalize-box .hkp-personalize-header {
    background: var(--hk-ink, #3A2C28) !important;
}
body[id^="product"] .hkp-personalize-box .hkp-personalize-icon,
body #product .hkp-personalize-box .hkp-personalize-icon {
    background: var(--hk-sage-dk, #6F8568) !important;   /* icono lápiz = sage (mostaza reservado a CTAs) */
    color: var(--hk-cream, #FBF6EF) !important;
}
body[id^="product"] .hkp-personalize-box .hkp-personalize-step,
body #product .hkp-personalize-box .hkp-personalize-step {
    color: var(--hk-cream, #FBF6EF) !important;
}
body[id^="product"] .hkp-personalize-box .hkp-personalize-hint,
body #product .hkp-personalize-box .hkp-personalize-hint {
    color: rgba(251, 246, 239, 0.72) !important;
}
body[id^="product"] .hkp-personalize-box .hkp-personalize-status,
body #product .hkp-personalize-box .hkp-personalize-status {
    background: rgba(251, 246, 239, 0.16) !important;
    color: var(--hk-cream, #FBF6EF) !important;
}
body[id^="product"] .hkp-personalize-box .hkp-personalize-dot,
body #product .hkp-personalize-box .hkp-personalize-dot {
    background: rgba(251, 246, 239, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(251, 246, 239, 0.15) !important;
}
/* estado EDITANDO · badge crema sólido (visible sobre la cabecera oscura) */
body[id^="product"] .hkp-personalize-box.hkp-is-editing .hkp-personalize-status,
body #product .hkp-personalize-box.hkp-is-editing .hkp-personalize-status {
    background: var(--hk-cream, #FBF6EF) !important;
    color: var(--hk-ink, #3A2C28) !important;
}
body[id^="product"] .hkp-personalize-box.hkp-is-editing .hkp-personalize-dot,
body #product .hkp-personalize-box.hkp-is-editing .hkp-personalize-dot {
    background: var(--hk-sage, #A4B59C) !important;
}
/* pie "Cada detalle cuenta" → sage suave (descansa más que el amarillo) */
body[id^="product"] .hkp-personalize-box .hkp-personalize-footer,
body #product .hkp-personalize-box .hkp-personalize-footer {
    background: rgba(164, 181, 156, 0.16) !important;
    border-top-color: var(--hk-line-soft, #F3E7DC) !important;
}

/* =====================================================================
   FICHA · ERRORES DE PERSONALIZACIÓN → inline coral terracota (design
   final-errors-panel.jsx). Coral #C4543C, distinto del burdeos de marca.
   Inyectado por modules/hmpersonalization/views/js/product.js (showError):
   campo con borde coral + mensaje inline debajo + resumen arriba + scroll.
   ===================================================================== */
body[id^="product"] .hkp-field.hmp-field-error .hkp-field-title,
body #product .hkp-field.hmp-field-error .hkp-field-title { color: #C4543C !important; }

body[id^="product"] textarea.hmp-error-border,
body[id^="product"] .hkp-field.hmp-field-error textarea,
body #product textarea.hmp-error-border,
body #product .hkp-field.hmp-field-error textarea {
    border-color: #C4543C !important;
    background: rgba(111, 133, 104, 0.05) !important;
    box-shadow: inset 0 0 0 1px #C4543C !important;
}

/* mensaje inline, justo bajo el campo */
body[id^="product"] .hmp-field-error-msg,
body #product .hmp-field-error-msg {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    font-family: var(--hk-font-sans, Inter, sans-serif);
    font-size: 12px;
    color: #C4543C;
    line-height: 1.4;
}
body[id^="product"] .hmp-field-error-ico,
body #product .hmp-field-error-ico {
    flex-shrink: 0;
    width: 16px; height: 16px;
    border-radius: 999px;
    background: #C4543C; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; line-height: 1;
}

/* resumen arriba (coral terracota · NO burdeos, NO bloque .alert) */
body[id^="product"] .hmp-error-summary,
body #product .hmp-error-summary {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 18px;
    padding: 13px 15px;
    border: 1px solid #C4543C;
    background: rgba(111, 133, 104, 0.08);
    border-radius: 10px;
}
body[id^="product"] .hmp-error-summary-ico,
body #product .hmp-error-summary-ico {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 999px;
    background: #C4543C; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; line-height: 1; margin-top: 1px;
}
body[id^="product"] .hmp-error-summary-title,
body #product .hmp-error-summary-title {
    display: block;
    font-family: var(--hk-font-sans, Inter, sans-serif);
    font-size: 13px; font-weight: 600; color: #C4543C; margin-bottom: 2px;
}
/* nombres de campos que faltan · EN LÍNEA (no apilados) */
body[id^="product"] .hmp-error-summary-list strong,
body #product .hmp-error-summary-list strong { color: #C4543C; font-weight: 600; }
body[id^="product"] .hmp-error-summary-text span,
body #product .hmp-error-summary-text span {
    font-family: var(--hk-font-sans, Inter, sans-serif);
    font-size: 12.5px; color: var(--hk-ink-2, #6B5852); line-height: 1.45;
}

/* refuerzo de especificidad · gana a front.css de hmpersonalization (carga
   después y pinta los errores en burdeos). Scope extra .hkp-personalize-box. */
body[id^="product"] .hkp-personalize-box .hkp-personalize-body .hkp-field.hmp-field-error textarea,
body #product .hkp-personalize-box .hkp-personalize-body .hkp-field.hmp-field-error textarea,
body[id^="product"] .hkp-personalize-box textarea.hmp-error-border,
body #product .hkp-personalize-box textarea.hmp-error-border {
    border-color: #C4543C !important;
    box-shadow: inset 0 0 0 1px #C4543C !important;
    background: rgba(111, 133, 104, 0.05) !important;
}
body[id^="product"] .hkp-personalize-box .hmp-error-summary,
body #product .hkp-personalize-box .hmp-error-summary {
    background: rgba(111, 133, 104, 0.08) !important;
    border: 1px solid #C4543C !important;
}
body[id^="product"] .hkp-personalize-box .hmp-field-error-msg,
body[id^="product"] .hkp-personalize-box .hmp-field-error-msg span,
body #product .hkp-personalize-box .hmp-field-error-msg,
body #product .hkp-personalize-box .hmp-field-error-msg span {
    color: #C4543C !important;
}
body[id^="product"] .hkp-personalize-box .hmp-field-error-msg .hmp-field-error-ico,
body #product .hkp-personalize-box .hmp-field-error-msg .hmp-field-error-ico {
    background: #C4543C !important;
    color: #fff !important;
}
body[id^="product"] .hkp-personalize-box .hmp-error-summary-text strong,
body #product .hkp-personalize-box .hmp-error-summary-text strong { color: #C4543C !important; }
body[id^="product"] .hkp-personalize-box .hmp-error-summary .hmp-error-summary-ico,
body #product .hkp-personalize-box .hmp-error-summary .hmp-error-summary-ico {
    background: #C4543C !important; color: #fff !important;
}

/* ===================================================================
   CMS · quitar el "sobretítulo" duplicado. PrestaShop pinta su título
   nativo (.page-header > h1) ENCIMA del contenido; nuestras CMS rediseñadas
   (legal/sobre nosotros/faq/idiomas/envío) ya traen su propio título, así
   que ese nativo sobra. Lo ocultamos SOLO donde existe nuestro wrapper de
   diseño (:has) → las CMS sin rediseñar conservan su título nativo.
   =================================================================== */
body#cms:has(.hkleg, .hkc-about, .hkc-faq, .hkc-lang, .hkenv) .page-header {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   LEÓN EN EL FLYOUT DE CUENTA (invitado) · saluda y parpadea
   Lo monta views/js/userdrop-lion.js (rig.svg inline en el círculo
   .hk-userdrop__guest-iconwrap). Animaciones 100% CSS.
   ════════════════════════════════════════════════════════════════ */
.hk-userdrop__guest-iconwrap { position: relative; }
.hk-userdrop__guest-iconwrap.hk-udlion {
    --hmlo-tw: 60px;
    --hmlo-th: 75px;
    width: 116px;                       /* león grande, protagonista */
    height: 116px;
    margin-top: -32px;                  /* se mete en la banda de puntitos → la caja NO crece */
    background: #FBF3E0;                /* cremita, como el marco del login */
    overflow: hidden;
}
/* el bocadillo original queda como fallback: oculto cuando hay león */
.hk-userdrop__guest-iconwrap.hk-udlion > svg:not(.hk-udlion-svg) { display: none; }
.hk-udlion-svg {
    position: absolute;
    left: 50%;
    top: 0;
    width: 116px;                       /* = círculo: mismo encuadre que el login (cabeza + cuerpo real) */
    height: 116px;
    transform: translateX(-50%);
    overflow: visible;
}
/* En el header el león se ve como en el LOGIN: cuerpo REAL de #lion-open. Se oculta #body-static
   (la capa que se usaba para el giro de cabeza). El cliente lo quiere ESTÁTICO → NO se mueve la
   cabeza ni se tapa los ojos; SOLO parpadea. */
.hk-udlion-svg #body-static { display: none; }
/* brazo izquierdo: escondido bajo el círculo (mismo pivote/giro que auth.css .rest(), si no,
   con el brazo nuevo —mano+antebrazo largo— sin el giro se ve mal recortado). */
.hk-udlion-svg #arm-left {
    transform: translate(192px, 96px) rotate(-30deg) translate(-192px, -96px) translateY(84px);
}
/* brazo derecho: escondido bajo el círculo, igual que el izquierdo (mismo pivote/giro que
   auth.css .rest() / lion.js, espejado: +30° en vez de -30°).
   NOTA: se probó que saludara (mano de almohadilla, #arm-right-palm sigue en rig.svg oculta
   por defecto) pero no convenció — el brazo curvo "de antes" se veía mejor y hacerlo bien
   (curvo + por delante) se complicaba demasiado para el beneficio. Descartado, header ESTÁTICO. */
.hk-udlion-svg #arm-right {
    transform: translate(260.1px, 96px) rotate(30deg) translate(-260.1px, -96px) translateY(84px);
}
/* parpadeo suave periódico (bisagra arriba; la propiedad CSS pisa el atributo) */
.hk-udlion-svg #eyelid-left,
.hk-udlion-svg #eyelid-right {
    transform-box: fill-box;
    transform-origin: 50% 0;
    transform: scaleY(0);
    animation: hkUdParpadeo 4.6s linear 1s infinite;
}
@keyframes hkUdParpadeo {
    0%, 92%  { transform: scaleY(0); }
    95%, 98% { transform: scaleY(1); }
    100%     { transform: scaleY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hk-udlion-svg #arm-right { animation: none; transform: translate(260.1px, 96px) rotate(17deg) translate(-260.1px, -96px); }
    .hk-udlion-svg #eyelid-left,
    .hk-udlion-svg #eyelid-right { animation: none; }
}

/* León en el avatar del header (logueado, círculo pequeño de 44px) — mismo
   rig y mecanismo que el flyout de invitado, encuadre propio más chico. */
.hk-userdrop__avatar.hk-udlion .hk-udlion-svg {
    width: 64px;
    height: 64px;
}

/* =====================================================================
   FICHA DE PRODUCTO · RESPONSIVE (≤ 767px)
   ===================================================================== */
@media (max-width: 767px) {

    /* 1 · Trust ribbon · "Revisado a mano" (2º badge) no cabe junto a
       "Hecho en España" + "Hecho con amor" en 391px → se oculta.
       WhatsApp ya tiene botón flotante; esta variante se queda con los
       2 pilares de marca más relevantes para el comprador rápido. */
    body #product .hm-trust-ribbon .hm-trust-item:nth-child(2),
    body[id^="product"] .hm-trust-ribbon .hm-trust-item:nth-child(2) {
        display: none !important;
    }

    /* 2 · Personalización · los 18px de gap entre campos (UL.clearfix)
       son demasiado en móvil — se reducen a 10px. El padding exterior
       baja de 22px a 14px para aprovechar mejor el ancho de 391px. */
    body #product .hkp-personalize-box .hkp-personalize-body,
    body[id^="product"] .hkp-personalize-box .hkp-personalize-body {
        padding: 14px 14px !important;
    }
    body #product .hkp-personalize-box .hkp-personalize-body > form > ul,
    body[id^="product"] .hkp-personalize-box .hkp-personalize-body > form > ul {
        gap: 10px !important;
    }

    /* 3 · Cantidad · el .col-add-qty tiene Bootstrap col-12 → ocupa fila
       completa pero el stepper (125px) queda pegado a la izquierda.
       Centrar el stepper dentro de su fila con flexbox. */
    body #product .product-add-to-cart .col-add-qty,
    body[id^="product"] .product-add-to-cart .col-add-qty {
        display: flex !important;
        justify-content: center !important;
    }

    /* 4 · Barra de pestañas · en vez de scroll horizontal oculto (las 4
       pestañas no caben en 391px) se usa un grid de 3 columnas iguales.
       La 4ª pestaña ("Te puede gustar") está oculta por JS hasta que
       cross-sell carga → grid de 3 cubre el caso habitual; si las 4
       llegan a verse, la 4ª fluye a una 2ª fila.
       ⚠️ A ≤991px hay una regla en chrome.css que pone position:static
       en #hkpTabs para desactivar el sticky en tablet. Se re-activa aquí
       con top = altura del header móvil colapsado (63px). */
    body #product #hkpTabs,
    body[id^="product"] #hkpTabs {
        position: sticky !important;
        top: 63px !important;
    }
    body #product .hkp-tabs-inner,
    body[id^="product"] .hkp-tabs-inner {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    body #product .hkp-tab,
    body[id^="product"] .hkp-tab {
        flex: none !important;
        width: 100% !important;
        text-align: center !important;
        padding: 14px 4px !important;
        font-size: 10px !important;
        letter-spacing: 0.09em !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* scroll-margin-top = header (63px) + barra pestañas (~43px) + respiro */
    body #product .hkp-section,
    body[id^="product"] .hkp-section {
        scroll-margin-top: 110px !important;
    }

    /* 5 · "Cómo lo hacemos" · 4 cards verticales en móvil = ~2.400px de
       scroll. Grid 2×2 (igual que las categorías de la home) = mucho más
       manejable. El texto se compacta levemente para no ahogar las tarjetas. */
    body #product .hkp-workshop-grid,
    body[id^="product"] .hkp-workshop-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    body #product .hkp-workshop-card-body,
    body[id^="product"] .hkp-workshop-card-body {
        padding: 14px 12px 16px !important;
        gap: 4px !important;
    }
    body #product .hkp-workshop-card-num,
    body[id^="product"] .hkp-workshop-card-num {
        font-size: 18px !important;
        margin-bottom: 2px !important;
    }
    body #product .hkp-workshop-card-title,
    body[id^="product"] .hkp-workshop-card-title {
        font-size: 14px !important;
        margin: 0 !important;
    }
    body #product .hkp-workshop-card-text,
    body[id^="product"] .hkp-workshop-card-text {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    /* 6 · Reseñas · carrusel Swiper construido por rvMobileCarousel()
       en product-enhance.js. Solo aplica a las cards de preview local
       (.hkp-rv-preview); en producción Revi inyecta su propio widget. */
    body #product .hkp-rv-carousel,
    body[id^="product"] .hkp-rv-carousel {
        margin: 0 -16px;
    }
    body #product .hkp-rv-swiper,
    body[id^="product"] .hkp-rv-swiper {
        overflow: hidden;
        padding: 0 16px 4px;
    }
    body #product .hkp-rv-swiper .swiper-wrapper,
    body[id^="product"] .hkp-rv-swiper .swiper-wrapper {
        align-items: stretch;
    }
    body #product .hkp-rv-swiper .swiper-slide,
    body[id^="product"] .hkp-rv-swiper .swiper-slide {
        height: auto;
        box-sizing: border-box;
    }
    body #product .hkp-rv-nav,
    body[id^="product"] .hkp-rv-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 20px;
    }
    body #product .hkp-rv-dots,
    body[id^="product"] .hkp-rv-dots {
        position: static;
        width: auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    body #product .hkp-rv-dots .swiper-pagination-bullet,
    body[id^="product"] .hkp-rv-dots .swiper-pagination-bullet {
        width: 8px; height: 8px; margin: 0 !important;
        background: #E5D5C8; opacity: 1; border-radius: 999px;
        transition: width .3s cubic-bezier(.2,.7,.3,1), background .3s ease;
    }
    body #product .hkp-rv-dots .swiper-pagination-bullet-active,
    body[id^="product"] .hkp-rv-dots .swiper-pagination-bullet-active {
        width: 28px; background: #8A4A4A;
    }
    body #product .hkp-rv-navbtn,
    body[id^="product"] .hkp-rv-navbtn {
        width: 32px; height: 32px; padding: 0; border-radius: 999px;
        background: transparent; border: 1px solid #E5D5C8;
        color: #3A2C28; display: inline-flex; align-items: center;
        justify-content: center; cursor: pointer;
        transition: background .2s ease, color .2s ease, border-color .2s ease;
    }
    body #product .hkp-rv-navbtn:hover,
    body[id^="product"] .hkp-rv-navbtn:hover {
        background: #3A2C28; color: #FBF6EF; border-color: #3A2C28;
    }
    body #product .hkp-rv-navbtn.swiper-button-disabled,
    body[id^="product"] .hkp-rv-navbtn.swiper-button-disabled {
        opacity: .35; cursor: default; pointer-events: none;
    }

    /* === MODAL ¿Cuándo llega mi pedido? === */
    body .hkp-shipping-modal-dialog {
        display: flex !important;
        flex-direction: column !important;
        max-height: calc(100dvh - 40px) !important;
    }
    body .hkp-shipping-modal-head {
        flex-shrink: 0 !important;
        padding: 16px 16px 12px !important;
    }
    body .hkp-shipping-modal-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        padding: 14px 14px 18px !important;
        -webkit-overflow-scrolling: touch;
    }
    body .hkp-shipping-alert {
        padding: 10px 12px !important;
        margin-bottom: 14px !important;
    }
    body .hkp-shipping-cards {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
    body .hkp-shipping-card { padding: 12px 10px !important; gap: 3px !important; }
    body .hkp-shipping-card-days { font-size: 12px !important; }
    body .hkp-shipping-card-date { font-size: 13px !important; }
    body .hkp-shipping-h3 { margin-bottom: 8px !important; }
    body .hkp-shipping-gastos { margin-bottom: 14px !important; }
    body .hkp-shipping-gastos-row { padding: 9px 12px !important; }
    body .hkp-shipping-aviso { padding: 10px 12px !important; gap: 10px !important; }
}

/* ============================================================================
   MÓVIL (≤767px) · Páginas CMS + Contacto · aprovechar el ancho
   El contenido CMS heredaba mucho padding lateral acumulado (container 15px +
   wrapper propio): "Sobre nosotros"/FAQ (.hkc-*) ~39px, legales (.hkleg +
   .hkleg-body) hasta 53px, contacto ~30px. Reducimos sin quitarlo del todo.
   ============================================================================ */
@media (max-width: 767px) {
    /* Container del contenido (no afecta header/footer, que van fuera) */
    body#cms #inner-wrapper.container,
    body#contact #inner-wrapper.container { padding-left: 12px !important; padding-right: 12px !important; }

    /* Wrappers de las páginas de contenido (elementor: sobre nosotros, faq, envío, idiomas) */
    body#cms [class^="hkc-"] { padding-left: 14px !important; padding-right: 14px !important; }

    /* Páginas legales (.hkleg > .hkleg-body anidados → el texto caía a ~53px del borde) */
    body#cms .hkleg { padding-left: 4px !important; padding-right: 4px !important; }
    body#cms .hkleg .hkleg-body { padding-left: 14px !important; padding-right: 14px !important; }

    /* Alineación vertical del tab de cookies con el botón WA.
       El tab hereda line-height del tema → su caja mide más que el botón WA (36px),
       su centro queda más alto. Con bottom: 8px los centros visuales se equilibran. */
    #cookiesplus-tab { bottom: 8px !important; left: 0 !important; }

    /* Ficha producto · sticker NUEVO: en desktop sobresale (top/left -22px = efecto
       "etiqueta pegada"). En móvil left:-22px lo saca de la pantalla → lo recolocamos
       dentro de la imagen con posición positiva y reducimos el círculo. */
    body #product .product-cover .product-flags,
    body[id^="product"] .product-cover .product-flags {
        top: 10px !important;
        left: 10px !important;
    }
    body #product .product-cover .product-flag.new,
    body[id^="product"] .product-cover .product-flag.new {
        width: 64px !important;
        height: 64px !important;
        font-size: 17px !important;
    }
}

/* =====================================================================
   ISOLOGO (espiral + corona) · fallback del avatar del userdrop
   (sustituye el "h·m" de texto; si el rig del león carga, sigue oculto
   por .hk-udlion > .hk-userdrop__avatar-fallback { display:none }).
   ===================================================================== */
.hk-userdrop__avatar-fallback .hk-isologo {
    height: 26px;
    width: auto;
    display: block;
    color: var(--hk-accent, #8A4A4A);
}

/* ============================================================
   Aviso 'temporalmente agotado' en la ficha (sustituye al
   formulario de personalizacion cuando el producto no tiene
   stock). Reutiliza .hkp-personalize-box pero en tono apagado
   (sage/gris) en vez del mostaza, para que se lea como estado
   neutro y no como una accion disponible.
   ============================================================ */
body #product .hkp-oos-box .hkp-personalize-header,
body[id^="product"] .hkp-oos-box .hkp-personalize-header {
    background: #6F8568 !important;   /* sage apagado; !important para ganar a la regla base del header */
}
body #product .hkp-oos-box,
body[id^="product"] .hkp-oos-box {
    border-color: #6F8568;
}
body #product .hkp-oos-box .hkp-oos-text,
body[id^="product"] .hkp-oos-box .hkp-oos-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #4F6049;
}
body #product .hkp-oos-box .hkp-oos-text a,
body[id^="product"] .hkp-oos-box .hkp-oos-text a {
    color: #3A2C28;
    font-weight: 700;
    text-decoration: underline;
}

/* ── Botón "Añadir al carrito" sin stock (hmpersonalization) ──────────────
   Cuando el producto no tiene stock (out_of_stock resuelto en resolveStock-
   Availability), hmpersonalization deja el botón con [disabled]+.disabled.
   El tema lo dejaba casi invisible (opacity:.05); aquí lo pintamos en un gris
   claro y legible, con cursor bloqueado, sin depender del hover ni del click. */
body[id^="product"] .product-add-to-cart .add-to-cart[disabled],
body[id^="product"] .product-add-to-cart .add-to-cart.disabled {
    background-color: #D9D2CE !important;
    border-color: #D9D2CE !important;
    color: #8A7A73 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    pointer-events: none;
}
body[id^="product"] .product-add-to-cart .add-to-cart[disabled]:hover,
body[id^="product"] .product-add-to-cart .add-to-cart.disabled:hover {
    background-color: #D9D2CE !important;
    border-color: #D9D2CE !important;
    color: #8A7A73 !important;
    transform: none !important;
}

/* --- Movil: personalizacion + cantidad a 16px (evita el zoom auto de iOS) ---
   iOS Safari hace zoom al enfocar un input < 16px. En la ficha pasaba al
   teclear la personalizacion (.product-message = 13.5px) y en la cantidad
   (15px). Se sube SOLO en movil; el desktop conserva su tamano. */
@media (max-width: 767px) {
  body[id^="product"] .product-customization textarea,
  body[id^="product"] .product-customization input[type="text"],
  body[id^="product"] textarea.product-message,
  body #product .customization-text,
  body[id^="product"] .customization-text {
    font-size: 16px !important;
  }
  body #product .product-add-to-cart .qty input,
  body #product .product-add-to-cart #quantity_wanted,
  body[id^="product"] .product-add-to-cart #quantity_wanted {
    font-size: 16px !important;
  }
}

/* --- Movil: legibilidad y espacio en la ficha (cosmeticos) --- */
@media (max-width: 767px) {
  /* Descripcion corta (gancho emocional): 12px se lee pequeno en movil */
  body[id^="product"] .product-description-short,
  body[id^="product"] .product-description-short p { font-size: 15px !important; line-height: 1.55 !important; }
  /* Las pestañas ya no se quedan pegadas: la cabecera sticky basta y libera
     ~87px de alto en pantallas pequenas (evita doble barra fija). */
  body[id^="product"] .hkp-tabs,
  body[id^="product"] .hkp-tabs.is-stuck { position: static !important; top: auto !important; }
}

/* ===========================================================================
   "¿Cómo llega tu regalo?" · galería de empaquetado (modal packaging)
   Reutiliza .hkp-shipping-modal* para todo el chrome del modal; aquí solo la
   rejilla de fotos + placeholders (slots sin foto todavía).
   =========================================================================== */
.hkp-pkg-trigger { margin-top: 8px; }

.hkp-pkg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 4px;
}
.hkp-pkg-tile { margin: 0; }
.hkp-pkg-img,
.hkp-pkg-ph {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;                 /* la foto se recorta sola a cuadrado */
    border-radius: 12px;
    background: #F5EAE2;
}
.hkp-pkg-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed #D9C7B8;
    color: #B79B86;
    text-align: center;
}
.hkp-pkg-ph-txt {
    font-family: var(--hk-font-sans, Arial, sans-serif);
    font-size: 12px;
    letter-spacing: .04em;
}
.hkp-pkg-cap {
    margin: 8px 2px 0;
    font-family: var(--hk-font-sans, Arial, sans-serif);
    font-size: 12.5px;
    color: #6B5852;
    text-align: center;
}
@media (max-width: 480px) {
    .hkp-pkg-grid { gap: 9px; }
    .hkp-pkg-cap { font-size: 11.5px; }
}

/* ==========================================================================
   LOGOTIPO REAL EN CABECERA · 25-jul-2026
   Sustituye al logo-texto simulado (.hkh-logo-text__main/__sub/__line, que ya
   no se emiten desde header-2.tpl; sus reglas de arriba quedan inertes).
   Dos lineas en reposo · una linea cuando el header encoge con el scroll.
   Archivos: modules/hmtheme/views/img/hm-logo-{2l,1l}-tinta.svg
   ========================================================================== */
.hkh-logo-text.hkh-logo-svg {
    flex-direction: row;
    align-items: center;
    gap: 0;
    line-height: 0;
}
.hkh-logo-svg img {
    display: block;
    width: auto;
    max-width: 100%;
}
.hkh-logo-svg__2l { height: 66px; }
.hkh-logo-svg__1l { display: none; height: 24px; }

/* al hacer scroll el header encoge -> version de una linea */
body.hkh-scrolled .hkh-logo-text.hkh-logo-svg {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
}
body.hkh-scrolled .hkh-logo-svg__2l { display: none; }
body.hkh-scrolled .hkh-logo-svg__1l { display: block; }

@media (max-width: 1199px) { .hkh-logo-svg__2l { height: 50px; } }
@media (max-width: 991px)  { .hkh-logo-svg__2l { height: 44px; } }

/* ==========================================================================
   REVI · estrellas nativas al color de marca
   Al activar el modulo revi (jul-2026, pre-cutover) entra en juego
   modules/revi/views/css/front.css, que pinta las estrellas de .reviStarsContainer
   en amarillo #f4c318 sobre gris #dedede — fuera del sistema de color Hakuna.
   Ese CSS define el color via custom properties, asi que basta reasignarlas:
   chrome.css se carga DESPUES de front.css, misma especificidad y gana.
   Estrella llena = burdeos (valoracion/enfasis, igual que .hk-stars y
   .hkp-rating-fake .hkp-rating-stars). Estrella vacia = --hk-line, el beige
   de bordes suaves, en vez del gris neutro de Revi.
   ⚠️ No tocar front.css: es del modulo y una actualizacion lo pisaria.
   ========================================================================== */
.reviStarsContainer {
    --star-background: var(--hk-accent, #8A4A4A);
    --star-color: var(--hk-line, #EBDDD0);
}

/* El contador junto a las estrellas viene con font-family roboto y
   color var(--secundary) (variable de Revi, no existe en el tema). */
.reviStarsContainer .reviStarsBlock {
    font-family: Inter, sans-serif;
    color: var(--hk-ink2, #6B5852);
}

/* ==========================================================================
   AJUSTES LOGO · 25-jul-2026 (2a ronda, feedback del cliente)
   - Cabecera: SIEMPRE la version de una linea (antes 2 lineas en reposo).
   - Footer: logotipo real de una linea en crema, sustituye al logo-texto.
   - Panel de usuario: el "hakuna mataza" del pie pasa a sello h.m.
   ========================================================================== */
.hkh-logo-svg__2l { display: none !important; }
.hkh-logo-svg__1l { display: block; height: 40px; }
body.hkh-scrolled .hkh-logo-svg__1l { display: block; height: 32px; }
@media (max-width: 1199px) { .hkh-logo-svg__1l { height: 34px; } }
@media (max-width: 991px)  { .hkh-logo-svg__1l { height: 32px; } }

/* --- footer --- */
.hkf__logo-img { display: block; height: 26px; width: auto; max-width: 100%; }
.hkf__logo { display: inline-block; line-height: 0; }

/* --- sello del pie del desplegable de usuario --- */
.hk-userdrop__version { display: inline-flex; align-items: center; line-height: 0; }
.hk-userdrop__seal { display: block; width: 26px; height: 26px; opacity: .9; }

/* El tema traia un interruptor TEMPORAL (custom_s_1.js, 22-jul) que anadia
   body.hkh-use-png-logo para previsualizar el logo PNG y ocultaba el vectorial.
   Ya no hace falta: el logotipo real vive en la plantilla. Lo neutralizamos aqui
   en vez de tocar el JS del Theme Editor (que vive duplicado en BD y en disco). */
body.hkh-use-png-logo .hkh-logo-text.hkh-logo-svg { display: inline-flex !important; }
body.hkh-use-png-logo .hkh-logo-png { display: none !important; }

/* El tema trae `#desktop_logo a, #desktop_logo img { max-height:50px; height:auto }`
   (selector de ID) que gana a cualquier regla de clase: sin esto el SVG salia a 0px.
   Por eso estas van con ID + !important. */
#desktop_logo .hkh-logo-svg__2l { display: none !important; }
#desktop_logo .hkh-logo-svg__1l { display: block !important; width: auto !important;
    height: 40px !important; max-height: none !important; }
body.hkh-scrolled #desktop_logo .hkh-logo-svg__1l { height: 32px !important; }
@media (max-width: 1199px) { #desktop_logo .hkh-logo-svg__1l { height: 34px !important; } }
@media (max-width: 991px)  { #desktop_logo .hkh-logo-svg__1l { height: 32px !important; } }


/* ============= INICIAL DEL CLIENTE EN EL PIE DEL DESPLEGABLE =============
   Sustituye al <img> del isologo. Fraunces es la tipografia del logotipo, asi
   que la inicial se lee como parte de la marca y no como un avatar generico.
   Ademas deja de ser una imagen que haya que regenerar cada vez que Cata
   cambia el logo. */
.hk-userdrop__seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--hk-accent, #8A4A4A);
    color: var(--hk-cream, #FBF6EF);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 14px;
    font-weight: 600;
    /* la mayuscula de Fraunces queda optivamente alta dentro del circulo */
    line-height: 1;
    padding-top: 1px;
    user-select: none;
}