/* ========================================================================== PRIDO Header System — v3 · r4 assets/css/header-system-v3.r9.css (r3: píldora del buscador · r4–r6: v3.1 · r7–r9: modal B2B dirección A — tema en Mi cuenta, CTA Empresas teal-tinta, escalones ≤1399 / ≤1199 sin solapes) Documento normativo: docs/arquitectura-header-v3.md §4 (869-1150). REGLA DE ORO (§4.1): este archivo SUSTITUYE por completo a header-system-r2.css cuando el flag v3 está activo. Por eso reimplementa todo lo que r2.css hacía FUERA de #prido-hs: puente global (§0a), header de producto móvil .prido-hs-pmh (§0b) y auto-hide (§21). Orden de secciones = §4.2: §0a puente global · §0b PMH · §1 tokens · §2 reset acotado · §3 iconos y botones · §4 tooltips · §5 badges · §6 shell · §7 topbar · §8 navbar · §9 nav · §10 mega · §11 tools · §12 barra móvil · §13 capas · §14 offcanvas · §15 buscador · §16 modal B2B · §21 auto-hide · §18 responsive. §17 (toast) y §20 (.prido-demo/.prido-card) NO se portan a propósito. Nombres: contrato de impl/header/CONTRATO.md — tokens --hs3-*, clases .prido-hs3-*; se conservan .prido-hs-tools__badge, .prido-hs-icon, .prido-iconbtn, .prido-btn*, .prido-field*, .prido-hs-offcanvas* y .prido-hs-navbar--desktop/--mobile por contrato con JS y fragments. ========================================================================== */ /* ============ §0a · Puente global — reimplementa header-system-r2.css:13-24, :47-83, :1656-1699 y :1793-1805. SIN ESTO el preview rompe wrappers, dark mode de los alias legacy y el overlay de búsqueda legado. ============ */ body.prido-hs-active { /* El offset se DERIVA de los tokens: si divergen, syncHeaderOffset() (header-system-r5.js:224-228) mide una altura mayor y el spacer crece en el primer frame → CLS. Nunca escribir un número suelto aquí. */ --prido-hs-offset: calc(var(--hs3-topbar-h) + var(--hs3-nav-h)); /* 114px */ --prido-wp-adminbar-offset: 0px; --prido-dark: var(--prido-theme-ink); --prido-muted: var(--prido-theme-muted); --prido-border-light: var(--prido-theme-border); --prido-bg-tint: var(--prido-theme-surface-alt); /* Alias glass que r2.css:21-33 declaraba y consumen mini-cart.css y header-product-mobile.css (sobreviven al swap). */ --hs-mobile-glass-bg: var(--prido-glass-shell); --hs-mobile-glass-border: var(--prido-glass-border); --hs-mobile-glass-blur: var(--prido-glass-backdrop-strong); --hs-mobile-glass-shadow: var(--prido-glass-shadow-soft); --hs-liquid-fill: var(--prido-glass-shell-soft); --hs-liquid-fill-strong: var(--prido-glass-shell); --hs-liquid-line: var(--prido-glass-border); --hs-liquid-line-soft: var(--prido-glass-border); --hs-liquid-shadow: var(--prido-glass-shadow-soft); --hs-liquid-shadow-soft: var(--prido-glass-shadow-soft); --hs-button-fill: var(--prido-glass-chip); --hs-button-fill-hover: var(--prido-glass-chip-hover); --hs-button-hover-border: var(--prido-glass-accent-border); --hs-button-hover-shadow: var(--prido-glass-shadow-soft); --hs-transition: 0.3s cubic-bezier(.25,.46,.45,.94); } /* Bloqueo de scroll de las capas v3 (§2). Vive aquí, junto al resto de selectores de /, para no dejar reglas globales sueltas fuera del §0a (ver lint del archivo). */ body.prido-hs3-lock { overflow: hidden; } .prido-hs-spacer { display: block; height: var(--prido-hs-offset, 114px); background: transparent; pointer-events: none; } .prido-hs-active .main-page-wrapper { padding-top: 0 !important; margin-top: 0 !important; transition: none; } .prido-hs-active .website-wrapper > .main-page-wrapper:first-of-type { margin-top: 0 !important; } .prido-hs-spacer + .main-page-wrapper, .prido-hs-spacer + .prido-catalog-page, .prido-hs-spacer ~ .main-page-wrapper { padding-top: 0 !important; margin-top: 0 !important; } /* Header nativo WoodMart: visually-hidden A PROPÓSITO (el DOM sigue vivo para fragments/mini-cart de WC). NO usar display:none. (r2.css:1658-1668) */ .prido-hs-active .whb-header { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; padding: 0 !important; margin: -1px !important; } .prido-hs-active .whb-clone, .prido-hs-active .whb-space-for-sticky { display: none !important; } /* Overlay de búsqueda legado y capas por encima del header (r2.css:1677-1699). §19: el PMH se aparta también con las capas v3 (html.prido-hs3-modal-open). */ .prido-hs-active [class*="wd-search-full-screen"] { z-index: 100000 !important; } html.wd-search-opened .prido-hs, html.wd-search-opened .prido-hs-pmh, html.prido-hs3-modal-open .prido-hs-pmh { z-index: 1 !important; pointer-events: none; opacity: 0; transition: opacity .2s ease; } .prido-hs-active .prido-mini-cart-dropdown { z-index: 10001 !important; } /* COPIA del vivo (r2.css:1697-1699) */ /* ≤1024: el PMH sustituye al header global en PDP (r2.css:1793-1805) */ @media (max-width: 1024px) { body.prido-hs-active { --prido-hs-offset: calc(var(--hs3-topbar-h) + var(--hs3-mobile-h)); } /* 36+56 = 92 */ .prido-hs-product .prido-hs-navbar--mobile, .prido-hs-product .prido-hs3-topbar { display: none !important; } .prido-hs-product .prido-hs-spacer { height: 0 !important; } /* r2.css:1728-1730 — con el offcanvas abierto el header no se desplaza. */ html.prido-hs-menu-open .prido-hs { top: var(--prido-wp-adminbar-offset, 0px) !important; } } @media (max-width: 768px) { body.prido-hs-active { --prido-hs-offset: calc(var(--hs3-topbar-h) + var(--hs3-mobile-h)); } /* 32+50 = 82 */ } @media (prefers-reduced-motion: reduce) { .prido-hs *, .prido-hs-offcanvas *, .prido-hs-pmh *, .prido-hs3-layer, .prido-hs3-layer * { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ============ §0b · PMH — 23 reglas que vivían en r2.css y NO en header-product-mobile.css. El PMH es v1 intacto: si esto falta, cada PDP móvil pierde iconos, píldora del badge y toggle de tema. ============ */ .prido-hs-pmh__btn svg, .prido-hs-pmh__btn svg * { /* r2.css:595-601 */ display: block !important; fill: none !important; stroke: currentColor !important; opacity: 1 !important; visibility: visible !important; } .prido-hs-pmh__btn .prido-hs-icon { position: relative; z-index: 1; } /* r2.css:610 */ button.prido-hs-pmh__btn.prido-hs-theme-toggle[data-prido-theme-toggle] { /* r2.css:670-694 */ position: relative; isolation: isolate; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: 12px !important; background: transparent !important; box-shadow: none !important; color: var(--prido-theme-ink) !important; line-height: 0 !important; font-size: 0 !important; overflow: hidden !important; appearance: none !important; -webkit-appearance: none !important; outline: none !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent; } button.prido-hs-pmh__btn.prido-hs-theme-toggle[data-prido-theme-toggle]:hover, button.prido-hs-pmh__btn.prido-hs-theme-toggle[data-prido-theme-toggle]:focus-visible { /* :696-708 */ background: color-mix(in srgb, var(--prido-theme-ink) 8%, transparent) !important; border-color: transparent !important; box-shadow: none !important; color: var(--prido-theme-ink) !important; } button.prido-hs-pmh__btn.prido-hs-theme-toggle[data-prido-theme-toggle]:active { transform: scale(.93); } /* :709-712 */ .prido-hs-theme-toggle__icon { /* :714-728 */ position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; opacity: 0; visibility: hidden; pointer-events: none; color: currentColor !important; transition: opacity var(--hs-transition), transform var(--hs-transition); } .prido-hs-pmh__btn.prido-hs-theme-toggle .prido-hs-icon { width: 18px; height: 18px; stroke-width: 1.8px; } /* :736-741 */ .prido-hs-pmh__btn.prido-hs-theme-toggle svg, .prido-hs-pmh__btn.prido-hs-theme-toggle svg * { /* :746-752 */ display: block !important; opacity: 1 !important; visibility: visible !important; fill: none !important; stroke: currentColor !important; } /* Conmutación sol/luna del PMH y del header (r2.css:754-779). Es el mecanismo que emite prido_hs_theme_toggle_markup(); el v3 lo reusa tal cual. */ :root[data-theme="light"] .prido-hs-theme-toggle__icon--moon, :root:not([data-theme="dark"]) .prido-hs-theme-toggle__icon--moon { opacity: 1; visibility: visible; transform: scale(1); } :root[data-theme="light"] .prido-hs-theme-toggle__icon--sun, :root:not([data-theme="dark"]) .prido-hs-theme-toggle__icon--sun { opacity: 0; visibility: hidden; transform: scale(.75); } :root[data-theme="dark"] .prido-hs-theme-toggle__icon--sun { opacity: 1; visibility: visible; transform: scale(1); } :root[data-theme="dark"] .prido-hs-theme-toggle__icon--moon { opacity: 0; visibility: hidden; transform: scale(.75); } @media (max-width: 768px) { /* :781-785 */ .prido-hs-pmh__btn.prido-hs-theme-toggle .prido-hs-icon { width: 16px; height: 16px; } } /* Badge del PMH — misma píldora que el header (r2.css:791-841, :883-885, :888-894), reescopeada. Oculto por defecto, visible con .is-visible / .is-pending (A-13). */ .prido-hs .prido-hs-tools__badge, .prido-hs-pmh .prido-hs-tools__badge { position: absolute !important; top: 5px !important; right: 5px !important; z-index: 3; display: inline-flex !important; align-items: center; justify-content: center; min-width: 18px !important; height: 18px !important; padding: 0 5px !important; margin: 0 !important; border: 0 !important; border-radius: 999px; background: var(--hs3-badge-bg) !important; color: var(--hs3-badge-fg) !important; font-family: 'Outfit', sans-serif; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; font-variant-numeric: tabular-nums; text-align: center; box-shadow: 0 0 0 2px var(--prido-badge-ring, var(--prido-theme-canvas)); opacity: 0; transform: translate(38%, -38%) scale(.72); transform-origin: 70% 30%; transition: opacity .22s ease, transform .22s cubic-bezier(.2,0,0,1), box-shadow .22s ease; pointer-events: none; } .prido-hs .prido-iconbtn:hover .prido-hs-tools__badge, .prido-hs-pmh .prido-hs-tools__btn:hover .prido-hs-tools__badge { --prido-badge-ring: color-mix(in srgb, var(--prido-theme-ink) 8%, var(--prido-theme-canvas)); } .prido-hs-tools__badge.is-visible, .prido-hs-tools__badge.is-pending { opacity: 1; transform: translate(38%, -38%) scale(1); } .prido-hs-tools__badge.is-bump { animation: prido-hs3-bump .34s cubic-bezier(.2,0,0,1); } @keyframes prido-hs3-bump { 0%{transform:translate(38%,-38%) scale(1)} 45%{transform:translate(38%,-38%) scale(1.28)} 100%{transform:translate(38%,-38%) scale(1)} } /* Carrito del PMH (r2.css:844-882) */ .prido-hs-pmh .prido-hs-pmh__cart { display: inline-flex !important; align-items: center; justify-content: center; font-size: 1rem !important; line-height: 1 !important; color: var(--prido-dark, #1a2a3a) !important; } .prido-hs-pmh .prido-hs-pmh__cart::before, .prido-hs-pmh .prido-hs-pmh__cart::after { content: none !important; display: none !important; } .prido-hs-pmh .prido-hs-pmh__cart svg { width: 20px !important; height: 20px !important; overflow: visible !important; } .prido-hs-pmh .prido-hs-pmh__cart svg * { stroke-width: 1.9 !important; } /* ============ §1 · Tokens v3 ============ */ /* Geometría y movimiento en :root — los consume también body.prido-hs-active para derivar --prido-hs-offset (una var declarada en .prido-hs no sería visible desde , y el offset DEBE coincidir con la altura real). */ :root { --hs3-topbar-h: 42px; --hs3-nav-h: 72px; --hs3-nav-h-compact: 58px; --hs3-mobile-h: 56px; --hs3-mobile-h-compact: 50px; --hs3-dur: .28s; --hs3-ease: cubic-bezier(.25, .46, .45, .94); --hs3-r-btn: 12px; --hs3-r-panel: 18px; /* z-index: escala documentada en prido-cart-drawer.r1.css:11-20 */ --hs3-z-header: 1002; --hs3-z-mega: 1005; --hs3-z-offcanvas: 10000; --hs3-z-dropdown: 10020; --hs3-z-modal: 100000; } @media (max-width: 1024px) { :root { --hs3-topbar-h: 36px; --hs3-mobile-h: 56px; --hs3-mobile-h-compact: 50px; } } @media (max-width: 768px) { :root { --hs3-topbar-h: 32px; --hs3-mobile-h: 50px; --hs3-mobile-h-compact: 46px; } } /* AÑADIDO al bloque literal de §4.3: tipografías con prefijo propio. El prototipo usaba --font-heading/--font-ui, nombres sueltos prohibidos por §4.2 §1; se mapean a los del sitio (prido-design-tokens.css:77-78). */ :root { --hs3-font-heading: var(--prido-font-heading, 'Outfit', 'Avenir Next', 'Segoe UI', system-ui, sans-serif); --hs3-font-ui: var(--prido-font-ui, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif); } /* Color: el PMH ENTRA en el scope — su raíz .prido-hs-pmh es hermana de .prido-hs. AÑADIDO a la lista literal: #prido-hs-offcanvas. El offcanvas v3 NO lleva la clase .prido-hs3-layer (§3.6 lo declara .prido-hs-offcanvas.prido-hs3-drawer), así que sin este cuarto scope el drawer se quedaría sin tokens de color. */ .prido-hs, .prido-hs-pmh, .prido-hs3-layer, #prido-hs-offcanvas { /* — mapeo 1:1 con prido-design-tokens.css (theme-aware por :root[data-theme]) — */ --hs3-ink: var(--prido-theme-ink); --hs3-muted: var(--prido-theme-muted); --hs3-border: var(--prido-theme-border); --hs3-border-strong: var(--prido-theme-border-strong); --hs3-canvas: var(--prido-theme-canvas); --hs3-canvas-soft: var(--prido-theme-canvas-soft); --hs3-overlay: var(--prido-theme-overlay); --hs3-shadow: var(--prido-theme-shadow, 0 20px 44px rgba(18,29,42,.12)); --hs3-shadow-soft: var(--prido-theme-shadow-soft, 0 12px 24px rgba(18,29,42,.06)); --hs3-primary: var(--prido-primary); /* prido-design-tokens.css:13 = var(--wd-primary-color,#5e81a2) */ --hs3-teal: var(--prido-secondary); /* prido-design-tokens.css:14 = var(--wd-secondary-color,#2dc6c1) */ /* — tokens que NO existen en el sitio: se CREAN aquí — */ --hs3-ink-soft: #2f4256; --hs3-surface: #ffffff; --hs3-surface-alt: #f8fbfd; --hs3-hover-fill: rgba(26, 42, 58, .08); --hs3-glass: rgba(248, 250, 252, .78); --hs3-glass-border: rgba(201, 212, 221, .62); --hs3-primary-text: #4a6b8a; --hs3-teal-deep: #0e7e7a; --hs3-teal-tint: rgba(45, 198, 193, .12); --hs3-badge-bg: #2dc6c1; --hs3-badge-fg: #0c1219; --hs3-cta-bg: #1a2a3a; --hs3-cta-fg: #ffffff; --hs3-cta-bg-hover: #24394f; --hs3-danger: #b4441c; --hs3-success: #1c7c5a; --hs3-skeleton: #e8eef3; } /* Dark: sólo los tokens que NO derivan de --prido-theme-* */ :root[data-theme="dark"] .prido-hs, :root[data-theme="dark"] .prido-hs-pmh, :root[data-theme="dark"] .prido-hs3-layer, :root[data-theme="dark"] #prido-hs-offcanvas { --hs3-ink-soft: #c9d6e0; --hs3-surface: #121c26; --hs3-surface-alt: #18222d; --hs3-hover-fill: rgba(237, 244, 248, .09); --hs3-glass: rgba(10, 19, 27, .74); --hs3-glass-border: rgba(255, 255, 255, .08); --hs3-primary-text: #9dbbd6; --hs3-teal-deep: #2dc6c1; --hs3-teal-tint: rgba(45, 198, 193, .16); --hs3-badge-bg: #17a39c; --hs3-badge-fg: #04241f; --hs3-cta-bg: #2dc6c1; --hs3-cta-fg: #0c1219; --hs3-cta-bg-hover: #4bd3ce; --hs3-danger: #f0906c; --hs3-success: #5fd3a5; --hs3-skeleton: #1a2632; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prido-hs, :root:not([data-theme="light"]) .prido-hs-pmh, :root:not([data-theme="light"]) .prido-hs3-layer, :root:not([data-theme="light"]) #prido-hs-offcanvas { --hs3-ink-soft: #c9d6e0; --hs3-surface: #121c26; --hs3-surface-alt: #18222d; --hs3-hover-fill: rgba(237, 244, 248, .09); --hs3-glass: rgba(10, 19, 27, .74); --hs3-glass-border: rgba(255, 255, 255, .08); --hs3-primary-text: #9dbbd6; --hs3-teal-deep: #2dc6c1; --hs3-teal-tint: rgba(45, 198, 193, .16); --hs3-badge-bg: #17a39c; --hs3-badge-fg: #04241f; --hs3-cta-bg: #2dc6c1; --hs3-cta-fg: #0c1219; --hs3-cta-bg-hover: #4bd3ce; --hs3-danger: #f0906c; --hs3-success: #5fd3a5; --hs3-skeleton: #1a2632; } } /* ============ §2 · Reset acotado (parts_css.py:95-109 recortado) NO se portan html/body/a/ul/h1-h4/:focus-visible globales: pisan prido-design-tokens.css y rompen listas del blog. ============ */ .prido-hs, .prido-hs *, .prido-hs *::before, .prido-hs *::after, .prido-hs3-layer, .prido-hs3-layer *, .prido-hs3-layer *::before, .prido-hs3-layer *::after, #prido-hs-offcanvas, #prido-hs-offcanvas *, #prido-hs-offcanvas *::before, #prido-hs-offcanvas *::after { box-sizing: border-box; } .prido-hs .is-hidden, .prido-hs3-layer .is-hidden, #prido-hs-offcanvas .is-hidden { display: none !important; } .prido-hs .prido-hs3-sr, .prido-hs3-layer .prido-hs3-sr, #prido-hs-offcanvas .prido-hs3-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ⚠ .prido-hs3-b2b__sr NO va aquí: tools.php imprime __full, __short y __sr a la vez, así que un visually-hidden permanente duplicaría el nombre accesible del CTA («Empresas Cotización Empresas», WCAG 2.5.3). Se apaga por defecto y sólo se repone en la banda icon-only de ≤1199 (§18). */ .prido-hs .prido-hs3-b2b__sr { display: none; } /* Accesibilidad (r2.css:1841-1852) */ .prido-hs *:focus-visible, .prido-hs3-layer *:focus-visible, #prido-hs-offcanvas *:focus-visible { outline: 2px solid var(--hs3-teal, #2dc6c1); outline-offset: 2px; } .prido-hs *, .prido-hs-offcanvas *, .prido-hs3-layer * { -webkit-tap-highlight-color: transparent; } .prido-hs img, .prido-hs3-layer img, #prido-hs-offcanvas img { display: block; max-width: 100%; } .prido-hs ul, .prido-hs3-layer ul, #prido-hs-offcanvas ul { list-style: none; margin: 0; padding: 0; } .prido-hs button, .prido-hs3-layer button, #prido-hs-offcanvas button { font: inherit; color: inherit; } /* ============ §3 · Iconos + botones base (parts_css.py:112-129) Acotados a los cuatro scopes; se conservan los fill/stroke !important de r2.css:591-601 porque WoodMart pinta SVGs con fill heredado. ============ */ .prido-hs .prido-hs-icon, .prido-hs-pmh .prido-hs-icon, .prido-hs3-layer .prido-hs-icon, #prido-hs-offcanvas .prido-hs-icon { display: block !important; width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ⚠ prido_hs3_icon() NUNCA emite --sm/--xs (sólo `prido-hs-icon--`), y la regla base de arriba gana a los atributos width/height del . Por eso los tamaños distintos de 20px se declaran por contexto, con el MISMO peso que la base (el scope de #prido-hs-offcanvas vale 1-1-0). */ .prido-hs .prido-hs-icon--sm, .prido-hs3-layer .prido-hs-icon--sm, #prido-hs-offcanvas .prido-hs-icon--sm { width: 16px; height: 16px; } .prido-hs .prido-hs-icon--xs, .prido-hs3-layer .prido-hs-icon--xs, #prido-hs-offcanvas .prido-hs-icon--xs { width: 14px; height: 14px; } /* 14px: píldora «Top ventas» y su CTA, «Ver toda la categoría» del offcanvas y el pie del buscador (tanto el SSR como el ICON.arrow que inyecta el JS). */ .prido-hs .prido-hs3-mega__feature-tag .prido-hs-icon, .prido-hs .prido-hs3-mega__feature-cta .prido-hs-icon, #prido-hs-offcanvas .prido-hs3-oc__all .prido-hs-icon, .prido-hs3-layer .prido-hs3-search__all .prido-hs-icon { width: 14px; height: 14px; } /* 22px: hamburguesa de la barra móvil (mobile-bar.php:30). */ .prido-hs .prido-hs-mobile__hamburger .prido-hs-icon { width: 22px; height: 22px; } /* 16px: cualquier icono dentro de un .prido-btn y el eyebrow del modal B2B. */ .prido-hs .prido-btn .prido-hs-icon, .prido-hs3-layer .prido-btn .prido-hs-icon, #prido-hs-offcanvas .prido-btn .prido-hs-icon, .prido-hs3-layer .prido-hs3-b2b__eyebrow .prido-hs-icon { width: 16px; height: 16px; } .prido-hs .prido-iconbtn svg, .prido-hs .prido-iconbtn svg *, .prido-hs3-layer .prido-iconbtn svg, .prido-hs3-layer .prido-iconbtn svg *, #prido-hs-offcanvas .prido-iconbtn svg, #prido-hs-offcanvas .prido-iconbtn svg * { display: block !important; fill: none !important; stroke: currentColor !important; opacity: 1 !important; visibility: visible !important; pointer-events: none; } /* Botón pastilla */ .prido-hs .prido-btn, .prido-hs3-layer .prido-btn, #prido-hs-offcanvas .prido-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; font-family: var(--hs3-font-heading); font-weight: 600; font-size: 14px; letter-spacing: .005em; cursor: pointer; text-decoration: none; white-space: nowrap; background: transparent; transition: background var(--hs3-dur) var(--hs3-ease), color var(--hs3-dur) var(--hs3-ease), border-color var(--hs3-dur) var(--hs3-ease), transform var(--hs3-dur) var(--hs3-ease), box-shadow var(--hs3-dur) var(--hs3-ease); } .prido-hs .prido-btn--cta, .prido-hs3-layer .prido-btn--cta, #prido-hs-offcanvas .prido-btn--cta { background: var(--hs3-cta-bg); color: var(--hs3-cta-fg); } .prido-hs .prido-btn--cta:hover, .prido-hs3-layer .prido-btn--cta:hover, #prido-hs-offcanvas .prido-btn--cta:hover { background: var(--hs3-cta-bg-hover); color: var(--hs3-cta-fg); transform: translateY(-1px); box-shadow: var(--hs3-shadow-soft); } .prido-hs .prido-btn--cta:active, .prido-hs3-layer .prido-btn--cta:active, #prido-hs-offcanvas .prido-btn--cta:active { transform: translateY(0) scale(.98); } .prido-hs .prido-btn--outline, .prido-hs3-layer .prido-btn--outline, #prido-hs-offcanvas .prido-btn--outline { background: transparent; color: var(--hs3-ink); border-color: var(--hs3-border-strong); } .prido-hs .prido-btn--outline:hover, .prido-hs3-layer .prido-btn--outline:hover, #prido-hs-offcanvas .prido-btn--outline:hover { background: var(--hs3-hover-fill); color: var(--hs3-ink); } .prido-hs .prido-btn--ghost, .prido-hs3-layer .prido-btn--ghost, #prido-hs-offcanvas .prido-btn--ghost { background: transparent; color: var(--hs3-ink); } .prido-hs .prido-btn--ghost:hover, .prido-hs3-layer .prido-btn--ghost:hover, #prido-hs-offcanvas .prido-btn--ghost:hover { background: var(--hs3-hover-fill); color: var(--hs3-ink); } .prido-hs .prido-btn--block, .prido-hs3-layer .prido-btn--block, #prido-hs-offcanvas .prido-btn--block { width: 100%; } .prido-hs .prido-btn--sm, .prido-hs3-layer .prido-btn--sm, #prido-hs-offcanvas .prido-btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; } /* Botón icono (44px de área táctil) */ .prido-hs .prido-iconbtn, .prido-hs-pmh .prido-iconbtn, .prido-hs3-layer .prido-iconbtn, #prido-hs-offcanvas .prido-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--hs3-r-btn); background: transparent; background-image: none; box-shadow: none; color: var(--hs3-ink); cursor: pointer; appearance: none; -webkit-appearance: none; text-decoration: none; font: inherit; transition: background var(--hs3-dur) var(--hs3-ease), color var(--hs3-dur) var(--hs3-ease), transform var(--hs3-dur) var(--hs3-ease); } .prido-hs .prido-iconbtn:hover, .prido-hs3-layer .prido-iconbtn:hover, #prido-hs-offcanvas .prido-iconbtn:hover { background: var(--hs3-hover-fill); color: var(--hs3-ink); border-color: transparent; box-shadow: none; } .prido-hs .prido-iconbtn:active, .prido-hs3-layer .prido-iconbtn:active, #prido-hs-offcanvas .prido-iconbtn:active { transform: scale(.93); } /* Resets duros de r2.css:611-660: WoodMart inyecta ::before en los disparadores de búsqueda y en el carrito. Sin esto salen dos iconos. */ .prido-hs .prido-hs-tools__search::before, .prido-hs .prido-hs-tools__search::after, .prido-hs .prido-hs-tools__cart::before, .prido-hs .prido-hs-tools__cart::after { content: none !important; display: none !important; } .prido-hs .prido-hs-tools__search, .prido-hs .prido-hs-tools__cart { color: var(--hs3-ink) !important; background-image: none !important; } .prido-hs .prido-hs-tools__cart svg { width: 20px !important; height: 20px !important; overflow: visible !important; } .prido-hs .prido-hs-tools__cart svg * { stroke-width: 1.9 !important; } /* ============ §4 · Tooltips (parts_css.py:132-135) ACOTADOS: [data-tip] global colisiona con plugins de terceros. ============ */ .prido-hs [data-tip], .prido-hs3-layer [data-tip] { position: relative; } .prido-hs [data-tip]::after, .prido-hs3-layer [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); translate: -50% 0; padding: 6px 10px; border-radius: 8px; background: var(--hs3-ink); color: var(--hs3-canvas); font-family: var(--hs3-font-ui); font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; z-index: 60; transition: opacity .16s var(--hs3-ease), translate .16s var(--hs3-ease), visibility 0s linear .16s; } .prido-hs [data-tip]:hover::after, .prido-hs [data-tip]:focus-visible::after, .prido-hs3-layer [data-tip]:hover::after, .prido-hs3-layer [data-tip]:focus-visible::after { opacity: 1; visibility: visible; translate: -50% 2px; transition-delay: .35s, .35s, .35s; } /* Con el panel abierto el tooltip estorba (§5.2, módulo tooltips = CSS puro). */ .prido-hs [data-tip][aria-expanded="true"]::after, .prido-hs3-layer [data-tip][aria-expanded="true"]::after, .prido-hs .prido-no-tip[data-tip]::after { display: none; } /* ============ §5 · Badges — la píldora base y .is-visible/.is-pending/.is-bump ya están en §0b (compartidas con el PMH). Aquí sólo lo decorativo. ============ */ .prido-hs .prido-hs-tools__badge.is-zero { opacity: 0; } .prido-hs.is-compact .prido-hs-tools__badge { --prido-badge-ring: var(--hs3-glass); } /* Contador textual (panel de cuenta y filas del offcanvas) */ .prido-hs .prido-hs3-count, #prido-hs-offcanvas .prido-hs3-count { font-family: var(--hs3-font-ui); font-size: 12.5px; font-weight: 600; color: var(--hs3-muted); font-variant-numeric: tabular-nums; } /* ============ §6 · Shell del header (parts_css.py:145-146) A-1: fixed + spacer, NO sticky. z-index 1002 (r2.css:49-54). ============ */ .prido-hs { position: fixed; top: var(--prido-wp-adminbar-offset, 0px); left: 0; right: 0; z-index: var(--hs3-z-header); font-family: var(--hs3-font-ui); font-size: 15px; line-height: 1.5; color: var(--hs3-ink); } /* Container: valor real del sitio (r2.css:258-267), no el --container:1520px del prototipo. */ .prido-hs3-container { width: min(1600px, calc(100% - 5%)); max-width: none; margin: 0 auto; padding: 0 clamp(18px, 2vw, 32px); } /* ============ §7 · Topbar + rotador (parts_css.py:149-163) ============ */ .prido-hs3-topbar { height: var(--hs3-topbar-h); max-height: var(--hs3-topbar-h); background: var(--hs3-canvas-soft); color: var(--hs3-ink-soft); font-size: 12.5px; font-weight: 500; letter-spacing: .01em; box-shadow: inset 0 -1px 0 var(--hs3-border); overflow: hidden; position: relative; z-index: 2; transition: height var(--hs3-dur) var(--hs3-ease), max-height var(--hs3-dur) var(--hs3-ease), opacity var(--hs3-dur) var(--hs3-ease); } .prido-hs3-topbar .prido-hs3-container { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; } .prido-hs3-topbar__contact { display: flex; align-items: center; gap: 4px; min-width: 0; } .prido-hs3-topbar__link { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; color: inherit; text-decoration: none; white-space: nowrap; transition: color var(--hs3-dur) var(--hs3-ease), background var(--hs3-dur) var(--hs3-ease); } .prido-hs3-topbar__link:hover { color: var(--hs3-teal-deep); background: var(--hs3-hover-fill); } .prido-hs3-topbar__link .prido-hs-icon { width: 15px; height: 15px; stroke-width: 1.9; } .prido-hs3-topbar__sep { width: 1px; height: 14px; background: var(--hs3-border-strong); margin: 0 4px; flex: 0 0 auto; } .prido-hs3-topbar__benefits { display: flex; align-items: center; gap: 22px; min-width: 0; } .prido-hs3-topbar__benefit { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--hs3-ink-soft); } .prido-hs3-topbar__benefit .prido-hs-icon { width: 15px; height: 15px; color: var(--hs3-teal-deep); } .prido-hs3-topbar__benefit strong { font-weight: 600; color: var(--hs3-ink); } .prido-hs3-topbar__rotator { position: relative; display: none; height: 100%; min-width: 0; flex: 1 1 auto; align-items: center; justify-content: flex-end; overflow: hidden; } .prido-hs3-topbar__rotator .prido-hs3-topbar__benefit { position: absolute; right: 0; opacity: 0; translate: 0 8px; transition: opacity .4s var(--hs3-ease), translate .4s var(--hs3-ease); } .prido-hs3-topbar__rotator .prido-hs3-topbar__benefit.is-active { opacity: 1; translate: 0 0; } /* ============ §8 · Navbar + logo + glass (parts_css.py:166-177) ============ */ .prido-hs-navbar { position: relative; } .prido-hs3-navbar { display: none; /* se enciende en ≥1025 (§18) */ position: relative; z-index: 1; background: var(--hs3-canvas); border-bottom: none; box-shadow: none; overflow: visible; transition: background var(--hs3-dur) var(--hs3-ease), box-shadow var(--hs3-dur) var(--hs3-ease); } .prido-hs3-navbar > .prido-hs3-container { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; height: var(--hs3-nav-h); column-gap: clamp(18px, 3vw, 52px); overflow: visible; transition: height var(--hs3-dur) var(--hs3-ease); } .prido-hs3-logo { display: inline-flex; align-items: center; flex: 0 0 auto; height: 100%; justify-self: start; text-decoration: none; } .prido-hs .prido-hs3-logo-img { display: block; width: auto; height: 60px; max-width: 340px; object-fit: contain; transition: height var(--hs3-dur) var(--hs3-ease); } /* Estado condensado / compacto: el topbar se colapsa y la navbar toma glass. `sticky` (§5.2) pone .is-compact Y .is-condensed en el mismo tick (A-2b); .is-condensed además saca el topbar del flujo, como r2.css:239-249, para que syncHeaderOffset() mida sólo la navbar. */ .prido-hs.is-compact .prido-hs3-topbar { height: 0; max-height: 0; opacity: 0; pointer-events: none; } .prido-hs.is-condensed .prido-hs3-topbar { position: absolute; top: 0; left: 0; right: 0; height: 0; max-height: 0; opacity: 0; pointer-events: none; overflow: hidden; transform: translateY(-100%); } .prido-hs.is-compact .prido-hs3-navbar { background: var(--hs3-glass); -webkit-backdrop-filter: saturate(150%) blur(18px); backdrop-filter: saturate(150%) blur(18px); box-shadow: inset 0 -1px 0 var(--hs3-glass-border), 0 10px 30px rgba(18, 29, 42, .08); } :root[data-theme="dark"] .prido-hs.is-compact .prido-hs3-navbar { box-shadow: inset 0 -1px 0 var(--hs3-glass-border), 0 12px 34px rgba(0, 0, 0, .4); } .prido-hs.is-compact .prido-hs3-navbar > .prido-hs3-container { height: var(--hs3-nav-h-compact); } .prido-hs.is-compact .prido-hs .prido-hs3-logo-img, .prido-hs.is-compact .prido-hs3-logo-img { height: 46px; } /* .is-stuck (r2.css:1635-1645): plano, sin costura contra el cuerpo. */ .prido-hs-navbar--desktop.is-stuck, .prido-hs-navbar--mobile.is-stuck { box-shadow: none; background: var(--hs3-canvas); } /* ============ §9 · Nav + subrayado teal (parts_css.py:180-191) El :hover NO abre el mega: eso lo hace el módulo JS `mega`. ============ */ .prido-hs3-nav { display: flex; align-items: center; justify-content: center; min-width: 0; } .prido-hs3-nav__list { display: flex; align-items: center; gap: 2px; } .prido-hs3-nav__item { position: relative; } .prido-hs3-nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 999px; border: 0; background: transparent; font-family: var(--hs3-font-heading); font-size: 14.5px; font-weight: 500; letter-spacing: .005em; color: var(--hs3-ink); text-decoration: none; white-space: nowrap; cursor: pointer; transition: color var(--hs3-dur) var(--hs3-ease); } .prido-hs3-nav__label { position: relative; display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; } .prido-hs3-nav__label::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; border-radius: 2px; background: var(--hs3-teal); transform: scaleX(0); transform-origin: center; transition: transform var(--hs3-dur) var(--hs3-ease); } .prido-hs3-nav__link:hover .prido-hs3-nav__label::after, .prido-hs3-nav__link:focus-visible .prido-hs3-nav__label::after, .prido-hs3-nav__item.is-current > .prido-hs3-nav__link .prido-hs3-nav__label::after, .prido-hs3-nav__item.is-open > .prido-hs3-nav__link .prido-hs3-nav__label::after { transform: scaleX(1); } .prido-hs3-nav__link:hover, .prido-hs3-nav__item.is-open > .prido-hs3-nav__link { color: var(--hs3-primary-text); } .prido-hs3-nav__chev { width: 14px !important; height: 14px !important; stroke-width: 2; color: var(--hs3-muted); transition: transform var(--hs3-dur) var(--hs3-ease), color var(--hs3-dur) var(--hs3-ease); } .prido-hs3-nav__item.is-open .prido-hs3-nav__chev { transform: rotate(180deg); color: var(--hs3-primary-text); } .prido-hs3-nav__item--offer .prido-hs3-nav__link { color: var(--hs3-teal-deep); font-weight: 600; } .prido-hs3-nav__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hs3-teal); box-shadow: 0 0 0 3px var(--hs3-teal-tint); flex: 0 0 auto; } /* ============ §10 · Mega (parts_css.py:194-223) Los paneles son hermanos del