/* EG · Base común 2026 · eg-nivel (maqueta aprobada por Rafael el 28-sep-2026). Subida 1. Cambia SOLO: letra, tokens, barra de despacho, cabecera, menú lateral, buscador (estilo), pie y WhatsApp. Y (§11) que menú, buscador y filtros abiertos queden por encima del aviso de cookies. La encola mu-plugins/eg-base-2026.php en wp_enqueue_scripts 100, con dependencia emporio-garcia-main. REGLAS DE ESTA HOJA - En el checkout no se carga: eg_base26_on() devuelve false y el checkout queda como hoy. - Todo selector que reestiliza una clase existente lleva body delante. Esta hoja queda dentro de la combinada ANTES que eg-footer-legal, eg-brand-ui y eg-motion, y antes que los bloques sueltos de eg-menu-categorias, eg-cat-movil-compacto y eg-catalog-cards: sin body, pierde. - Nada de position, transform ni transition en .eg-header: la esconde y la muestra eg-motion.php. - No se redefinen --container-padding ni --container-padding-mobile (NO_ROMPER 2) ni --font-serif. - Sin el signo menor que en esta hoja, ni en comentarios. Textos de content con escapes (Men\00FA). - Los colores de un enlace se ponen en su contenedor: main.css:55 fija a{color:inherit !important}. */ /* ── 0 · Tokens (eg-nivel estilo.css:8-10) ─────────────────────────────────────────────── */ :root{ --eg-ui:'Work Sans','WS-resp',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; --eg-display:'EG Playfair','PF-resp',Georgia,'Times New Roman',serif; --eg-formentera:var(--eg-display); --eg-papel:#FAF8F3; --eg-tinta:#1A1A1A; --eg-tinta-2:#555; --eg-linea:#E5E0D5; --eg-gp:16px; --font-sans:var(--eg-ui); --weight-light:300; --weight-regular:400; --weight-medium:400; --weight-semibold:500; --eg-i-lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='6.75' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='m13.5 13.5 5.5 5.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); --eg-i-bolsa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 28'%3E%3Cpath d='M2.75 8.25h20.5v18.5H2.75z' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M8.5 8V6a4.5 4.5 0 0 1 9 0v2' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); --eg-i-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m1 1 16 16M17 1 1 17' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); --eg-i-abajo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); --eg-logo-negro:url(/wp-content/themes/emporio-garcia-child/assets/img/eg-logo-2026-negro-v1.svg); } @media (min-width:901px){ :root{ --eg-gp:48px; } } /* ── 0b · Compensación de la letra (no es diseño de categoría) ───────────────────────────── Work Sans 400 es ~5 % más ancha que Inter 300: con 480 px la bajada de /hombre/ pasa a 2 líneas en escritorio (+23,2 px, mapas/letras.md §8). Con 520 px vuelve a 1. La pieza 3 rehace ese héroe. */ @media (min-width:901px){ body .eg-cat-hero-lead{ max-width:520px; } } /* «Formentera» en la bolsa y el mini-carro: hoy pinta Playfair de Google; sin Google caería a Georgia. La página de gracias tampoco pasa por la combinada (no se cachea) y hoy pinta en Playfair cursiva el nombre del cliente del H1 (thankyou.php:40, main.css:2391-2396), la marca de cada prenda (:122) y la de las tarjetas relacionadas (:239). .eg-thankyou es el envoltorio de esa plantilla (thankyou.php:12). Todo en 400 cursiva, la cara declarada de EG Playfair. */ body.woocommerce-cart .eg-italic-formentera, body.woocommerce-cart .eg-cart-empty-btn-italic, body .eg-mc-panel .eg-italic-formentera, body .eg-thankyou .eg-ty-title em, body .eg-thankyou .eg-italic-formentera, body .eg-thankyou .eg-product-brand-italic, body .eg-login-hero-title em, body .eg-search-page-title em{ font-family:var(--eg-formentera); } /* ── 1 · Barra de despacho (estilo.css:73-75) ───────────────────────────────────────────── Texto de hoy (header.php:53) en un solo nodo. Bajo 700 px la caja se angosta a 300 px para que el corte caiga después de «$80.000 ·» (273 px) y no en «ZONAS / EXTREMAS». */ body .eg-announcement-bar{ background:#1A1A1A; color:#FAF8F3; text-align:center; padding:5px 16px; font:400 12px/1.3 var(--eg-ui); letter-spacing:.05em; text-transform:uppercase; } @media (max-width:699px){ body .eg-announcement-bar{ padding-left:max(16px,calc(50% - 130px)); padding-right:max(16px,calc(50% - 130px)); } } @media (min-width:901px){ body .eg-announcement-bar{ padding-left:var(--container-padding); padding-right:var(--container-padding); } } /* ── 2 · Cabecera, común a todos los anchos (estilo.css:76-87) ─────────────────────────── */ body .eg-header{ background:#FAF8F3; color:#1A1A1A; border-bottom:1px solid #E5E0D5; } body .eg-header .eg-header-grid{ gap:0; column-gap:0; row-gap:0; padding:0; align-items:center; white-space:nowrap; } body .eg-header .eg-hamburger{ display:inline-flex !important; align-items:center; position:relative; width:44px; height:44px; margin:0 0 0 -10px; padding:0 !important; justify-self:start; cursor:pointer; } body .eg-header .eg-hamburger span{ position:absolute; left:10px; display:block; width:24px; height:1.5px; margin:0; background:currentColor; } body .eg-header .eg-hamburger span:nth-child(1){ top:15.75px; } body .eg-header .eg-hamburger span:nth-child(2){ display:none; } body .eg-header .eg-hamburger span:nth-child(3){ top:26.75px; } /* El logo 2026 va de fondo: el texto «EMPORIO GARCÍA» sigue en el HTML para lectores y buscadores. La caja mide 44 de alto (zona de toque de la maqueta, estilo.css:81); el dibujo, 22, dentro del relleno (content-box en el atajo = origen y recorte del fondo en la caja de contenido). */ body .eg-header .eg-header-logo{ display:block; justify-self:start; width:100%; max-width:150px; height:44px; padding:11px 0; box-sizing:border-box; background:var(--eg-logo-negro) left center / contain no-repeat content-box; overflow:hidden; white-space:nowrap; text-indent:100%; font-size:13px; line-height:22px; letter-spacing:0; color:#1A1A1A; text-align:left; } body .eg-header .eg-header-utilities{ display:flex; align-items:center; justify-content:flex-end; justify-self:end; gap:0; font:400 12px/1 var(--eg-ui); letter-spacing:.06em; text-transform:uppercase; color:#1A1A1A; } body .eg-header .eg-utility-sep{ display:none; } body .eg-header .eg-header-utilities .eg-utility-link{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:44px; height:44px; padding:0 10px; margin:0; font:inherit; letter-spacing:inherit; line-height:1; opacity:1; } body .eg-header .eg-header-utilities .eg-utility-link:hover{ opacity:1; } body .eg-header .eg-header-utilities .eg-utility-search::before{ content:""; flex:none; width:20px; height:20px; background:currentColor; -webkit-mask:var(--eg-i-lupa) center / 20px 20px no-repeat; mask:var(--eg-i-lupa) center / 20px 20px no-repeat; } /* «BOLSA (», el número y «)» son tres piezas del flex: sin gap:0 quedaban separadas 10 px. */ body .eg-header .eg-header-utilities .eg-cart-link{ gap:0; } body .eg-header .eg-header-utilities .eg-cart-link .eg-cart-count{ font-weight:500; } /* ── 2a · Cabecera en celular, hasta 900 px (el corte de main.css:1199) ─────────────────── 52 px con la raya. Raya del ☰ en x=16 y borde de la bolsa en ancho-16, alineados con FILTROS. */ @media (max-width:900px){ body .eg-header .eg-header-grid{ grid-template-columns:auto minmax(0,1fr) auto; height:51px; } body .eg-header .eg-header-nav{ display:none; } /* FAVORITOS solo existe si vuelve YITH Wishlist (header.php:82-88). main.css:1233 lo esconde en celular con menos peso que la regla común de .eg-utility-link de arriba: aquí se repite para que la fila no cambie. */ body .eg-header .eg-header-utilities .eg-utility-favs{ display:none; } body .eg-header .eg-header-utilities .eg-utility-search{ display:inline-flex; width:44px; padding:0; gap:0; font-size:0; letter-spacing:0; } body .eg-header .eg-header-utilities .eg-cart-link{ position:relative; width:46px; padding:0; margin-right:-10px; gap:0; font-size:0; letter-spacing:0; } body .eg-header .eg-header-utilities .eg-cart-link::before{ content:""; flex:none; width:26px; height:28px; background:currentColor; -webkit-mask:var(--eg-i-bolsa) center / 26px 28px no-repeat; mask:var(--eg-i-bolsa) center / 26px 28px no-repeat; } body .eg-header .eg-header-utilities .eg-cart-link .eg-cart-count{ position:absolute; left:0; right:0; top:15px; text-align:center; font:500 14px/1 var(--eg-ui); letter-spacing:0; } } /* ── 2b · Cabecera en escritorio, desde 901 px (estilo.css:88-99) ───────────────────────── Cinco columnas simétricas: el logo queda centrado de verdad sin position:absolute. ☰ MENÚ en la 1, PUROEGO · Formentera · BLOG en la 2, logo en la 3, utilidades en la 4 y 5. */ @media (min-width:901px){ body .eg-header .eg-header-grid{ grid-template-columns:108px minmax(0,1fr) auto minmax(0,1fr) 108px; height:71px; } body .eg-header .eg-hamburger{ grid-column:1; grid-row:1; width:auto; padding:0 10px 0 44px !important; } body .eg-header .eg-hamburger::after{ content:"Men\00FA"; font:400 12px/1 var(--eg-ui); letter-spacing:.06em; text-transform:uppercase; } body .eg-header .eg-header-nav{ grid-column:2; grid-row:1; justify-self:start; display:flex; align-items:center; justify-content:flex-start; gap:6px; } body .eg-header .eg-header-logo{ grid-column:3; grid-row:1; justify-self:center; width:150px; max-width:none; height:44px; padding:7px 0; line-height:30px; background-position:center; } body .eg-header .eg-header-utilities{ grid-column:4 / 6; grid-row:1; margin-right:-10px; } body .eg-header .eg-nav-link{ display:inline-flex; align-items:center; height:44px; padding:0 12px; font:400 12px/1 var(--eg-ui); letter-spacing:.06em; text-transform:uppercase; opacity:1; } body .eg-header .eg-nav-link.eg-nav-formentera{ font:italic 400 15px/1 var(--eg-formentera); letter-spacing:.01em; text-transform:none; } body .eg-header .eg-nav-link:hover{ opacity:1; text-decoration:underline; text-underline-offset:8px; text-decoration-thickness:1px; } body .eg-header-nav .eg-nav-link::after{ content:none; } } /* 901-1199 px: no caben ☰ MENÚ + tres marcas + logo centrado + utilidades (mapas/cabecera.md §8.3). Las marcas quedan dentro de ☰ MENÚ, el logo baja a 24 px y BUSCAR queda solo con la lupa. */ @media (min-width:901px) and (max-width:1199px){ body .eg-header .eg-header-nav{ display:none; } body .eg-header .eg-header-logo{ width:150px; height:44px; padding:10px 0; line-height:24px; } body .eg-header .eg-header-utilities .eg-utility-search{ width:44px; padding:0; gap:0; font-size:0; letter-spacing:0; } } /* ── 3 · Foco: sin recuadro al tocar o hacer clic, visible con teclado (s11 de Rafael) ─────── main.css:105-111 pinta un recuadro en todo botón con foco, también al tocar. Aquí se apaga para el toque y el clic, y se deja el anillo de la maqueta (estilo.css:21) para el teclado. El campo del buscador recibe el foco por código al abrir (header.js:72-74) y un campo de texto siempre cuenta como :focus-visible: se queda con el recuadro de HOY (1 px, sin separación, main.css:105-111) mientras Rafael no conteste la pregunta 15. */ body .eg-header button:focus:not(:focus-visible), body .eg-mm-panel button:focus:not(:focus-visible), body .eg-search-overlay button:focus:not(:focus-visible){ outline:none !important; } body .eg-header :focus-visible, body .eg-mm-panel :focus-visible, body .eg-search-overlay :focus-visible{ outline:2px solid #1A1A1A !important; outline-offset:3px !important; } body .eg-search-overlay input:focus-visible{ outline:1px solid #1A1A1A !important; outline-offset:0 !important; } body .eg-mm-panel .eg-mm-marca-flecha:focus-visible{ outline-offset:-2px !important; } /* PUROEGO, Formentera y BLOG van de borde a borde del panel: hacia afuera, el contorno lo cortan la orilla de la pantalla y el overflow del panel (main.css:4368) y solo se veían las rayas de arriba y abajo. */ body .eg-mm-panel .eg-mm-marca-fila > .eg-mm-marca-link:focus-visible, body .eg-mm-panel .eg-mm-nav > a:focus-visible{ outline-offset:-2px !important; } body .eg-header a, body .eg-header button, body .eg-mm-panel a, body .eg-mm-panel summary, body .eg-mm-panel button, body .eg-search-overlay a, body .eg-search-overlay button{ -webkit-tap-highlight-color:transparent; } body .eg-header button, body .eg-mm-panel button, body .eg-search-overlay button{ transition-property:color, background-color, opacity; } /* ── 4 · Menú lateral (estilo.css:105-126, 137) ───────────────────────────────────────────── Sale por la izquierda. ⛔ La transición no pasa de 280 ms: header.js pone hidden a los 300 ms. ⛔ La flecha lleva alto FIJO (48 px en una fila de 56): nunca height:100% (NO_ROMPER 2). */ body .eg-mm-overlay{ background:rgba(26,26,26,.45); } body .eg-mm-panel{ left:0; right:auto; width:400px; max-width:88vw; padding:0 0 32px; background:#FAF8F3; color:#1A1A1A; box-shadow:none; transform:translateX(-100%); transition:transform 280ms cubic-bezier(.2,.7,.2,1); } body .eg-mm-panel.is-open{ transform:translateX(0); } body .eg-mm-panel .eg-mm-head{ flex:none; height:52px; padding:0 4px 0 var(--eg-gp); border-bottom:1px solid #E5E0D5; } body .eg-mm-panel .eg-mm-label{ display:block; width:150px; height:18px; overflow:hidden; font-size:0; letter-spacing:0; color:transparent; background:var(--eg-logo-negro) left center / contain no-repeat; } body .eg-mm-panel .eg-mm-close{ position:relative; width:44px; height:44px; padding:0 !important; font-size:0 !important; line-height:0; } body .eg-mm-panel .eg-mm-close::before{ content:""; position:absolute; top:13px; left:13px; width:18px; height:18px; background:currentColor; -webkit-mask:var(--eg-i-x) center / 18px 18px no-repeat; mask:var(--eg-i-x) center / 18px 18px no-repeat; } body .eg-mm-panel .eg-mm-nav{ padding:12px 0; gap:0; } body .eg-mm-panel .eg-mm-nav a{ padding:0; opacity:1; } body .eg-mm-panel .eg-mm-marca-fila{ padding:0; } body .eg-mm-panel .eg-mm-marca-fila > .eg-mm-marca-link, body .eg-mm-panel .eg-mm-nav > a{ display:flex; align-items:center; min-height:56px; padding:0 56px 0 var(--eg-gp); font:500 12px/1 var(--eg-ui); letter-spacing:.06em; text-transform:uppercase; } body .eg-mm-panel .eg-mm-marca-fila > .eg-mm-marca-link.eg-italic-formentera-h, body .eg-mm-panel .eg-mm-nav > a.eg-italic-formentera-h{ font:italic 400 15px/1 var(--eg-formentera); letter-spacing:0; text-transform:none; } body .eg-mm-panel .eg-mm-marca-fila > .eg-mm-marca > .eg-mm-marca-flecha{ top:4px; right:4px; width:48px; height:48px; } body .eg-mm-panel .eg-mm-marca-fila .eg-mm-marca-flecha::after{ top:50%; left:50%; right:auto; width:12px; height:8px; margin:-4px 0 0 -6px; border:0; opacity:1; transform:none; transition:transform .28s ease; background:currentColor; -webkit-mask:var(--eg-i-abajo) center / 12px 8px no-repeat; mask:var(--eg-i-abajo) center / 12px 8px no-repeat; } body .eg-mm-panel .eg-mm-marca-fila .eg-mm-marca[open] .eg-mm-marca-flecha::after{ transform:rotate(180deg); margin-top:-4px; opacity:1; } body .eg-mm-panel .eg-mm-subcats{ margin:0; padding:0 var(--eg-gp) 12px calc(var(--eg-gp) + 12px); border-left:0; } body .eg-mm-panel .eg-mm-subcats a{ display:flex; align-items:center; min-height:44px; padding:0; font:400 12px/1 var(--eg-ui); letter-spacing:.05em; text-transform:uppercase; } body .eg-mm-panel .eg-mm-subcats a:hover{ text-decoration:underline; text-underline-offset:6px; } body .eg-mm-panel .eg-mm-divider{ display:none; } body .eg-mm-panel .eg-mm-utilities, body .eg-mm-panel .eg-mm-foot-nav{ margin:8px var(--eg-gp) 0; padding:12px 0; gap:0; border-top:1px solid #E5E0D5; } body .eg-mm-panel .eg-mm-foot-nav{ padding-bottom:0; } body .eg-mm-panel .eg-mm-wa{ margin:0 var(--eg-gp); padding:0 0 12px; font-size:12px; letter-spacing:.05em; } /* gap:0: en «Bolsa (0)» el flex deja «Bolsa (», el número y «)» como tres piezas; con gap se leía «BOLSA ( 0 )». Los demás enlaces de este bloque son solo texto: el gap no les hacía nada. */ body .eg-mm-panel .eg-mm-utilities a, body .eg-mm-panel .eg-mm-foot-nav a, body .eg-mm-panel .eg-mm-wa a{ display:flex; align-items:center; gap:0; min-height:44px; padding:0; border:0; font:400 12px/1 var(--eg-ui); letter-spacing:.05em; text-transform:uppercase; } /* ── 5 · Buscador: solo estilo (estilo.css:127-135, 40, 48-50) ───────────────────────────── Capa crema entera, contenido de 760 px. ⛔ La opacidad sigue en 0,25 s: header.js pone hidden a los 250 ms. */ body .eg-search-overlay{ display:block; padding:0; overflow-y:auto; background:#FAF8F3; color:#1A1A1A; -webkit-backdrop-filter:none; backdrop-filter:none; } body .eg-search-overlay .eg-search-close{ position:absolute; top:12px; right:max(var(--eg-gp),calc(50% - 380px + var(--eg-gp))); width:44px; height:44px; padding:0; font-size:0; line-height:0; } body .eg-search-overlay .eg-search-close::before{ content:""; position:absolute; top:13px; left:13px; width:18px; height:18px; background:currentColor; -webkit-mask:var(--eg-i-x) center / 18px 18px no-repeat; mask:var(--eg-i-x) center / 18px 18px no-repeat; } body .eg-search-overlay .eg-search-inner{ width:auto; max-width:760px; margin:0 auto; padding:56px var(--eg-gp) 48px; color:#1A1A1A; } body .eg-search-overlay .eg-search-eyebrow{ margin:28px 0 12px; text-align:left; color:#1A1A1A; font:400 14px/1.45 var(--eg-ui); letter-spacing:.06em; text-transform:uppercase; } body .eg-search-overlay .eg-search-form{ display:flex; align-items:center; gap:0; margin:0; padding:0; border-bottom:1px solid #1A1A1A; } /* border-radius:0: el reset de Hello Elementor le pone 3 px (combinada, input[type=search]) y el contorno del foco sigue esa curva; en la maqueta las cajas son rectas. */ body .eg-search-overlay .eg-search-form input[type="search"]{ flex:1; min-width:0; padding:12px 0; border:0; border-radius:0; background:transparent; color:#1A1A1A; font:400 20px/1.3 var(--eg-ui); letter-spacing:0; } body .eg-search-overlay .eg-search-form input[type="search"]::placeholder{ color:#555; opacity:1; } body .eg-search-overlay .eg-search-submit{ position:relative; flex:none; width:44px; height:44px; padding:0; font-size:0; letter-spacing:0; line-height:0; } body .eg-search-overlay .eg-search-submit::before{ content:""; position:absolute; top:12px; left:12px; width:20px; height:20px; background:currentColor; -webkit-mask:var(--eg-i-lupa) center / 20px 20px no-repeat; mask:var(--eg-i-lupa) center / 20px 20px no-repeat; } body .eg-search-overlay .eg-search-suggest{ display:flex; flex-wrap:wrap; align-items:center; gap:0 22px; color:#1A1A1A; font-size:14px; } body .eg-search-overlay .eg-search-suggest-label{ flex:0 0 100%; margin:36px 0 6px; color:#555; font:400 14px/1.45 var(--eg-ui); letter-spacing:.06em; text-transform:uppercase; } body .eg-search-overlay .eg-search-suggest a{ display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; font:400 14px/1.2 var(--eg-ui); letter-spacing:.05em; text-transform:uppercase; } body .eg-search-overlay .eg-search-suggest a:hover{ text-decoration:underline; text-underline-offset:6px; } /* ── 6 · Mini-bolsa: sin reglas propias. Cambia de letra y de peso por los tokens (el cuerpo pasa de Inter 300 a Work Sans 400): «IR A PAGAR» está dentro del cuerpo con scroll y se mide en staging. ─── */ /* ── 7 · Pie «B» (Rafael, 30-sep): el orden y las clases de hoy (main.css:947-1267) con el estilo de la maqueta ── Marcado en template-parts/eg26/pie.php (