/* ==========================================================================
   PRIDO — Cart drawer + toast global (r1)
   --------------------------------------------------------------------------
   El cuerpo del drawer lleva la clase .prido-mini-cart-dropdown, así que
   hereda TODO el diseño de contenido de assets/css/mini-cart.css (líneas,
   miniatura, precio tachado, Ahorro, Subtotal, CTA "Finalizar compra").
   Aquí solo se define el *chrome*: panel, backdrop, skeleton, error y toast,
   más los ajustes mínimos para que el cuerpo del dropdown funcione dentro
   de un panel a pantalla completa.

   Escala de z-index del tema (documentada):
     sticky buy bars      999
     header               1002 / 1005
     offcanvas del menú   10000
     mini-cart dropdown   10020
     burbuja de chat      99990
     >> cart drawer       99991
     overlay de búsqueda  100000
     >> toast global      100010
   ========================================================================== */

.prido-cart-drawer {
    --cd-ink: var(--prido-theme-ink, #0B1E2E);
    --cd-muted: var(--prido-theme-muted, #5e6f80);
    --cd-border: var(--prido-theme-border, #dde2e8);
    --cd-surface: var(--prido-glass-shell, #ffffff);
    --cd-accent: #0E7E7A;
    --cd-ease: cubic-bezier(.22, 1, .36, 1);

    position: fixed;
    inset: 0;
    z-index: 99991;
    display: block;
    font-family: 'Noto Sans', system-ui, sans-serif;
}

.prido-cart-drawer[hidden] { display: none; }

/* ── Backdrop ──
   Sin backdrop-filter a pantalla completa: es la operación de composición
   que hacía cara la animación del overlay antiguo. Color plano y listo. */
.prido-cart-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 30, 46, .42);
    opacity: 0;
    transition: opacity .28s var(--cd-ease);
    cursor: pointer;
}

.prido-cart-drawer.is-open .prido-cart-drawer__backdrop { opacity: 1; }

:root[data-theme="dark"] .prido-cart-drawer__backdrop { background: rgba(4, 10, 16, .62); }

/* ── Panel ── */
.prido-cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    display: flex;
    flex-direction: column;
    background: var(--cd-surface);
    box-shadow: -18px 0 48px rgba(11, 30, 46, .18);
    transform: translateX(100%);
    transition: transform .32s var(--cd-ease);
    will-change: transform;
}

.prido-cart-drawer.is-open .prido-cart-drawer__panel { transform: translateX(0); }

.prido-cart-drawer__grabber { display: none; }

/* ── Cabecera ── */
.prido-cart-drawer__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--cd-border);
    flex: 0 0 auto;
}

.prido-cart-drawer__title {
    margin: 0;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--cd-ink);
}

.prido-cart-drawer__count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cd-muted);
    margin-inline-start: 2px;
}

.prido-cart-drawer__close {
    margin-inline-start: auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--cd-ink);
    cursor: pointer;
    transition: background .16s var(--cd-ease);
}

.prido-cart-drawer__close:hover { background: var(--prido-theme-canvas-soft, #f1f4f7); }

/* ── Cuerpo (hereda mini-cart.css) ── */
.prido-cart-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

/* Neutraliza el "shell de dropdown" del mini-cart: dentro del drawer el panel
   YA es la superficie, así que el hijo no debe traer borde, radio ni sombra. */
.prido-cart-drawer .prido-mini-cart-dropdown { min-width: 0; width: 100%; }

.prido-cart-drawer .widget_shopping_cart_content {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    /* Gana el !important de header-system-r2.css:1697 (.prido-hs-active …) */
    position: relative;
    z-index: auto;
}

/* El fragment trae su propia cabecera "Mi carrito"; el drawer ya tiene la suya. */
.prido-cart-drawer .prido-mini-cart-header { display: none; }

/* ── Skeleton ── */
.prido-cart-drawer__skeleton { display: none; padding: 18px 20px; }

.prido-cart-drawer[data-state="loading"] .prido-cart-drawer__skeleton { display: block; }
.prido-cart-drawer[data-state="loading"] .prido-cart-drawer__body,
.prido-cart-drawer[data-state="error"] .prido-cart-drawer__body { display: none; }

.prido-cart-drawer__sk-row {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--cd-border);
}

.prido-cart-drawer__sk-img,
.prido-cart-drawer__sk-lines i,
.prido-cart-drawer__sk-foot i {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg,
        var(--prido-theme-canvas-soft, #eef1f5) 25%,
        var(--prido-theme-canvas, #f7f9fb) 50%,
        var(--prido-theme-canvas-soft, #eef1f5) 75%);
    background-size: 400% 100%;
    animation: prido-cd-shimmer 1.4s ease-in-out infinite;
}

.prido-cart-drawer__sk-img { width: 72px; height: 72px; flex: 0 0 72px; }
.prido-cart-drawer__sk-lines { flex: 1 1 auto; display: grid; gap: 9px; }
.prido-cart-drawer__sk-lines i:first-child { height: 13px; width: 78%; }
.prido-cart-drawer__sk-lines i:last-child { height: 13px; width: 44%; }
.prido-cart-drawer__sk-foot { padding-top: 20px; }
.prido-cart-drawer__sk-foot i { height: 46px; border-radius: 12px; }

@keyframes prido-cd-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* ── Error ── */
.prido-cart-drawer__error {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 42px 24px;
    color: var(--cd-muted);
}

.prido-cart-drawer[data-state="error"] .prido-cart-drawer__error { display: flex; }
.prido-cart-drawer__error[hidden] { display: none; }

.prido-cart-drawer__error-msg { margin: 0; font-size: 14px; color: var(--cd-ink); }

.prido-cart-drawer__retry {
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    background: var(--cd-accent);
    color: #fff;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
}

.prido-cart-drawer__fallback {
    font-size: 13px;
    color: var(--cd-muted);
    text-decoration: underline;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ── Pie ── */
.prido-cart-drawer__foot {
    flex: 0 0 auto;
    padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--cd-border);
    text-align: center;
}

.prido-cart-drawer__continue {
    border: 0;
    background: transparent;
    color: var(--cd-muted);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    padding: 0 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prido-cart-drawer__continue:hover { color: var(--cd-ink); }

/* ── Foco visible (WCAG 2.4.7 / contraste 3:1) ── */
.prido-cart-drawer :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cd-accent) 75%, transparent);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ── Móvil / tablet: bottom-sheet ── */
@media (max-width: 1024px) {
    .prido-cart-drawer__panel {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 85vh;          /* fallback */
        height: 85svh;         /* svh: en iOS vh incluye la barra de URL */
        max-height: 85svh;
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -18px 48px rgba(11, 30, 46, .22);
    }

    .prido-cart-drawer.is-open .prido-cart-drawer__panel { transform: translateY(0); }

    .prido-cart-drawer__grabber {
        display: block;
        width: 42px;
        height: 4px;
        margin: 10px auto 2px;
        border-radius: 99px;
        background: var(--cd-border);
        flex: 0 0 auto;
    }

    .prido-cart-drawer__head { padding: 10px 18px 12px; }
}

/* ── Bloqueo de scroll del fondo (mismo patrón que el resto de modales) ── */
html.prido-modal-open,
html.prido-modal-open body { overflow: hidden !important; }

/* ==========================================================================
   TOAST GLOBAL
   Sustituye a #prido-grilla-toast, que vivía solo en las páginas de grilla,
   no tenía role/aria-live y usaba white-space:nowrap (se desbordaba en móvil).
   ========================================================================== */

.prido-toast {
    position: fixed;
    left: 50%;
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(20px);
    z-index: 100010;

    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(440px, calc(100vw - 32px));
    padding: 13px 20px;

    background: var(--prido-glass-shell, #ffffff);
    color: var(--prido-theme-ink, #0B1E2E);
    border: 1px solid var(--prido-theme-border, #dde2e8);
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(11, 30, 46, .18);

    font-family: 'Noto Sans', system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s var(--prido-ease, cubic-bezier(.22, 1, .36, 1)),
                transform .3s var(--prido-ease, cubic-bezier(.22, 1, .36, 1)),
                visibility .3s;
}

.prido-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.prido-toast__msg { flex: 1 1 auto; }

.prido-toast__action {
    flex: 0 0 auto;
    color: #0E7E7A;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
}

.prido-toast--error {
    border-color: #e5b4b4;
    color: #7a1f1f;
}

:root[data-theme="dark"] .prido-toast {
    background: var(--prido-glass-shell-strong, rgba(24, 32, 41, .96));
    color: var(--prido-theme-ink, #edf4f8);
    border-color: var(--prido-glass-border, rgba(255, 255, 255, .12));
}

/* En móvil el toast debe quedar por encima de la sticky buy bar y de la
   píldora de comparar, no debajo. */
@media (max-width: 1024px) {
    .prido-toast {
        bottom: calc(var(--prido-bottom-safe, 92px) + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Movimiento reducido (11.º bloque del tema) ── */
@media (prefers-reduced-motion: reduce) {
    .prido-cart-drawer__panel,
    .prido-cart-drawer__backdrop,
    .prido-toast {
        transition-duration: .01ms !important;
    }
    .prido-cart-drawer__sk-img,
    .prido-cart-drawer__sk-lines i,
    .prido-cart-drawer__sk-foot i {
        animation: none !important;
        background: var(--prido-theme-canvas-soft, #eef1f5);
    }
}

/* ==========================================================================
   ESTADOS DE LOS DISPARADORES
   Feedback local en el propio botón: es la alternativa correcta al velo de
   pantalla completa. Vale para el CTA de la buybox, los rieles y las tarjetas.
   ========================================================================== */

[data-prido-add].is-loading,
.single_add_to_cart_button.is-loading,
#prido-sticky-add-btn.is-loading,
#prido-sticky-mobile-add-btn.is-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

[data-prido-add].is-loading > *,
.single_add_to_cart_button.is-loading > *,
#prido-sticky-add-btn.is-loading > *,
#prido-sticky-mobile-add-btn.is-loading > * { opacity: 0; }

[data-prido-add].is-loading::after,
.single_add_to_cart_button.is-loading::after,
#prido-sticky-add-btn.is-loading::after,
#prido-sticky-mobile-add-btn.is-loading::after {
    content: "" !important;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: .9;
    color: #fff;
    animation: prido-cart-spin .7s linear infinite;
}

/* El CTA fantasma de la sticky móvil tiene texto teal sobre fondo claro. */
#prido-sticky-mobile-add-btn.is-loading::after { color: currentColor; }

@keyframes prido-cart-spin { to { transform: rotate(360deg); } }

[data-prido-add].is-disabled,
[data-prido-add][aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

[data-prido-add].prido-btn-confirm { animation: prido-cart-confirm .85s var(--prido-ease, cubic-bezier(.22, 1, .36, 1)); }

@keyframes prido-cart-confirm {
    0%, 100% { transform: none; }
    30% { transform: scale(1.04); }
}

/* ==========================================================================
   PDP — "falta elegir una variación"
   Sustituye al window.alert() nativo de wc-add-to-cart-variation.js.
   ========================================================================== */

table.variations tr.prido-attr-missing > td.value,
table.variations tr.prido-attr-missing > th.label {
    background: color-mix(in srgb, #d9534f 8%, transparent);
}

table.variations tr.prido-attr-missing > td.value {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, #d9534f 55%, transparent);
    border-radius: 12px;
    animation: prido-attr-nudge .45s var(--prido-ease, cubic-bezier(.22, 1, .36, 1)) 2;
}

@keyframes prido-attr-nudge {
    0%, 100% { transform: none; }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    [data-prido-add].is-loading::after,
    .single_add_to_cart_button.is-loading::after,
    #prido-sticky-add-btn.is-loading::after,
    #prido-sticky-mobile-add-btn.is-loading::after,
    [data-prido-add].prido-btn-confirm,
    table.variations tr.prido-attr-missing > td.value {
        animation: none !important;
    }
}

/* ==========================================================================
   CTA STICKY MÓVIL — CONTRASTE (WCAG 1.4.3 / 1.4.11)
   --------------------------------------------------------------------------
   Estado por defecto en producción: fondo blanco al 40 % con texto y borde en
   el teal de marca (#2dc6c1) -> 2,11:1, cuando se exige 4,5:1 para texto y
   3:1 para el borde. Y su ÚNICO refuerzo era `:hover`, que en una pantalla
   táctil no existe: el CTA principal de la ficha en móvil no salía nunca de
   ese estado.

   Se invierte: fondo teal oscuro (#0E7E7A, 4,9:1 con blanco) desde el arranque,
   y el estilo fantasma queda solo como :hover dentro de @media (hover:hover).
   Este archivo depende de prido-css-maestro-v2 (ver inc/cart/bootstrap.php),
   así que carga después y gana por orden de cascada sin necesidad de !important.
   ========================================================================== */

.prido-sticky-buy-mobile-btn {
    background: var(--prido-teal-700, #0E7E7A);
    color: #fff;
    border: 2px solid var(--prido-teal-700, #0E7E7A);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 6px 18px -6px rgba(14, 126, 122, .5);
}

:root[data-theme="dark"] .prido-sticky-buy-mobile-btn {
    background: var(--prido-teal-700, #0E7E7A);
    color: #fff;
}

@media (hover: hover) {
    .prido-sticky-buy-mobile-btn:hover,
    :root[data-theme="dark"] .prido-sticky-buy-mobile-btn:hover {
        background: #0B6A67;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 8px 25px rgba(14, 126, 122, .35);
    }
}

.prido-sticky-buy-mobile-btn:focus-visible,
#prido-sticky-add-btn:focus-visible,
.prido-bb .single_add_to_cart_button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--prido-teal-700, #0E7E7A) 80%, #fff);
    outline-offset: 3px;
}

/* Variable de zona segura inferior: la publica prido-cart-drawer.r1.js a partir
   de la altura real de la sticky bar móvil, para que el toast (y en el futuro la
   burbuja del chat) no se solapen con ella. */
:root { --prido-bottom-safe: 92px; }

/* ==========================================================================
   PULSO DEL ICONO DEL CARRITO — GLOBAL
   --------------------------------------------------------------------------
   Vivía solo en prido-grilla.r28.css, que se encola únicamente en páginas de
   grilla, así que el pulso no existía en la ficha ni en el comparador ni en la
   lista de deseos. Aquí es global. Además la regla del contador apuntaba a
   `.wd-tools-count`, un nodo de WoodMart que ya no existe: el badge real es
   `.prido-hs-tools__badge` / `.prido-hs-cart-count`.
   ========================================================================== */

@keyframes prido-header-pulse {
    0%   { transform: scale(1);    opacity: 1; }
    25%  { transform: scale(1.15); opacity: .85; }
    50%  { transform: scale(.97);  opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

.prido-header-pulse {
    animation: prido-header-pulse .7s cubic-bezier(.22, .61, .36, 1);
}

.prido-header-pulse .prido-hs-tools__badge,
.prido-header-pulse .prido-hs-cart-count,
.prido-header-pulse .wd-tools-count {
    animation: prido-header-pulse .7s cubic-bezier(.22, .61, .36, 1) .1s;
}

/* Estado intermedio del badge mientras se hidrata desde la cookie (el HTML
   cacheado por LiteSpeed llega siempre con data-count="0"). */
.prido-hs-cart-count.is-pending {
    animation: prido-badge-pending 1.1s ease-in-out infinite;
}

@keyframes prido-badge-pending {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
    .prido-header-pulse,
    .prido-header-pulse .prido-hs-tools__badge,
    .prido-header-pulse .prido-hs-cart-count,
    .prido-header-pulse .wd-tools-count,
    .prido-hs-cart-count.is-pending {
        animation: none !important;
    }
}

/* ==========================================================================
   AJUSTES FINOS (verificados en producción el 2026-08-31)
   ========================================================================== */

/* 1. Barra de administración de WordPress. El panel es position:fixed, así que
      ignora el `margin-top` que WP aplica a <html>: se metía debajo de la barra.
      Solo afecta a usuarios logueados. */
body.admin-bar .prido-cart-drawer__panel { top: 32px; }

@media screen and (max-width: 782px) {
    body.admin-bar .prido-cart-drawer__panel { top: 46px; }
}

@media (max-width: 1024px) {
    body.admin-bar .prido-cart-drawer__panel { top: auto; }
}

/* 2. Enlace "Ver carrito" que inyecta wc-add-to-cart.js.
      Su listener de `added_to_cart` sigue vivo aunque ya no maneje ningún
      botón nuestro, y al emitir el evento (obligatorio para GTM4WP) añade un
      <a class="added_to_cart"> sin estilos junto al CTA. El JS lo elimina del
      DOM a los 2,2 s; esto lo oculta desde el primer frame. */
.added_to_cart.wc-forward,
.prido-grilla-cart-wrap .added_to_cart,
form.cart .added_to_cart,
.prido-rel-action-btn + .added_to_cart,
.prido-bs-action-btn + .added_to_cart,
.prido-mbtn + .added_to_cart,
.wl-add + .added_to_cart,
.cmp-add-cart + .added_to_cart { display: none !important; }