/* ═══════════════════════════════════════════════════════════════ MOREAMORE — wp-fixes.css ═══════════════════════════════════════════════════════════════ El único CSS nuevo permitido en este proyecto (spec 00 §4). Se carga SIEMPRE al final, después de styles → shop → [plantilla]. Nada aquí "mejora" o refactoriza los CSS del prototipo: son parches puntuales para lo que WordPress/Woo inyectan y el prototipo no tiene. Cinco secciones, ni una regla más. ═══════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────── 1 · Offsets de admin bar (spec 00 §3.4) ─────────────────────────────────────────────────────────────── */ body.admin-bar { --admin-bar: 32px; } body.admin-bar .site-header { top: var(--admin-bar); } @media (max-width: 782px) { body.admin-bar { --admin-bar: 46px; } body.admin-bar .site-header { top: var(--admin-bar); } } /* ─────────────────────────────────────────────────────────────── 2 · Neutralización de .wp-site-blocks y restos de layout core ─────────────────────────────────────────────────────────────── */ .wp-site-blocks { margin: 0; padding: 0; } /* ─────────────────────────────────────────────────────────────── 3 · Estilizado de .woocommerce-notices-wrapper reubicado ─────────────────────────────────────────────────────────────── La sección estaba VACÍA desde la Fase 0, y hasta ahora daba igual: ninguna pantalla del sitio producía avisos de WooCommerce, porque todo el flujo lo pintan bloques mam/* con su propio copy. La cuenta los produce en cada acción: entrar mal, guardar una dirección, pedir una contraseña nueva (EXCEPCIONES #81). Sin esto salían con la tipografía por defecto del navegador, que es la única cosa de todo el sitio que no pasó por el prototipo. La forma es la de `.co-dates` (checkout.css §6): filete de color a la izquierda, fondo lavanda y texto pequeño. Los valores están copiados de ahí, y el rojo/ámbar del error, de la variante `.warn` del mismo bloque. No es una pieza nueva: es la franja de estado del sitio aplicada a los mensajes de Woo. ─────────────────────────────────────────────────────────────── */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-info, .woocommerce-message, .woocommerce-error { margin: 0 0 20px; padding: 14px 17px; border-left: 2px solid var(--mm-morado); border-radius: 0 10px 10px 0; background: linear-gradient(90deg, var(--mm-azul-lavanda), rgba(217, 221, 246, 0.22)); font-size: 13px; line-height: 1.55; color: var(--mm-gris-texto); list-style: none; } .woocommerce-info strong, .woocommerce-message strong, .woocommerce-error strong { font-weight: 600; color: var(--mm-grafito); } .woocommerce-info a, .woocommerce-message a, .woocommerce-error a { color: var(--mm-morado); text-decoration: underline; } /* El error usa la variante de aviso del prototipo, no un rojo nuevo. */ .woocommerce-error { border-left-color: var(--mm-ambar-advertencia); background: #FDF6E7; color: #6E4F14; } .woocommerce-error li + li, .woocommerce-message li + li { margin-top: 6px; } /* ─────────────────────────────────────────────────────────────── 4 · Puente de presets → tokens (spec 00 §3.1) ─────────────────────────────────────────────────────────────── */ /* ─────────────────────────────────────────────────────────────── 5 · Estados de :focus-visible que el editor requiera ─────────────────────────────────────────────────────────────── */ /* ─────────────────────────────────────────────────────────────── 6 · Compra finalizada bajo el header del sitio ─────────────────────────────────────────────────────────────── SECCIÓN NUEVA — pendiente de aprobación de Vik (EXCEPCIONES #74). La spec 00 §4 fija cinco secciones; esta es la sexta y por eso está documentada como excepción en vez de colada en otra. `.co-main` trae `padding: 40px 0 80px` del prototipo, calculado para el header REDUCIDO del checkout, que va en el flujo (`position: sticky`). La página de compra finalizada usa el header del sitio, que es `position: fixed` — así que el título quedaba debajo de él, ilegible. El valor no se inventa: es el mismo que el prototipo usa en cada página sin hero, `calc(var(--header-h) + 34px)` de `.cart-head` (carrito.css §1). Si en la revisión se decide que esta página lleve el header reducido del checkout, esta regla sobra y se borra entera. ─────────────────────────────────────────────────────────────── */ /* La cuenta se suma a la misma regla y por la misma razón: usa `.co-main` con el header del sitio, que es fijo (EXCEPCIONES #81, enmienda de #74). */ body.woocommerce-order-received .co-main, body.woocommerce-account .co-main { padding-top: calc(var(--header-h) + 34px); } /* La franja de aviso va entre el título y la primera sección, un sitio que no existe en el checkout (allí `.co-dates` vive dentro de una sección y hereda su aire). Sin esto queda pegada al "01". El valor es el mismo `margin-bottom` que el prototipo le da a `.co-title`. */ body.woocommerce-order-received .co-main > .container > .co-dates { margin-bottom: 32px; } /* ─────────────────────────────────────────────────────────────── 7 · La burbuja del CTA de Amore se estrangula en móvil y tablet ─────────────────────────────────────────────────────────────── SECCIÓN NUEVA — pendiente de aprobación de Vik (EXCEPCIONES #76). Es un fallo del prototipo, no de la implementación. La última línea de styles.css dice: .bubble.bubble-cta { max-width: min(var(--channel), 340px); } y vive FUERA de los media queries. `--channel` es el corredor lateral que deja libre el aro de Amore, y solo tiene sentido en el layout de escritorio. Por debajo de 880px el prototipo cambia a columna única bajo el aro y reajusta `.bubble` a 84% y 90%… pero `.bubble.bubble-cta` gana por especificidad (dos clases) y por orden (está al final del archivo), así que sigue midiendo contra un canal que ya no existe. Medido en el contenedor: la burbuja de la RESPUESTA —la única que trae el enlace a la selección— quedaba en 62px a 768px y en 28px a 390px. Una palabra por línea. No se toca styles.css: es copia verbatim del prototipo (spec 00 §1.3). Se repite aquí la misma regla con el porcentaje que el propio prototipo usa en cada breakpoint, conservando su tope de 340px, que sí es una decisión suya. ─────────────────────────────────────────────────────────────── */ @media (max-width: 880px) { .bubble.bubble-cta { max-width: min(84%, 340px); } } @media (max-width: 680px) { .bubble.bubble-cta { max-width: min(90%, 340px); } } /* ─────────────────────────────────────────────────────────────── 8 · Los guardados, fuera del carrito ─────────────────────────────────────────────────────────────── SECCIÓN NUEVA — pendiente de aprobación de Vik (EXCEPCIONES #80). `/favoritos/` reusa entera la sección 6 del carrito, y estas dos reglas son lo único que el préstamo necesita. Las dos SOBRESCRIBEN reglas del prototipo, que es exactamente lo que distingue a wp-fixes de la hoja propia de un bloque: si fueran clases nuevas irían en la del bloque, como en mam/page-body. 1 · `.cart-empty-state` nace `display: none` (carrito.css:726) y solo lo enciende `body.cart-empty` (727). Esa clase la pone el tema cuando WooCommerce dice que el carrito está vacío, que en esta página no significa nada: aquí lo que puede estar vacío es la lista de guardados. Se enciende con la clase de la página. 2 · `.saved` trae `margin-top: 44px; padding-top: 28px; border-top` (carrito.css:677) porque en el carrito cuelga DEBAJO del resumen y necesita separarse de él. En su propia página va justo bajo `.cart-head`, que ya cierra con su propio filete: sin esto se ven dos hairlines a 44px una de otra. ─────────────────────────────────────────────────────────────── */ body.mm-favoritos .cart-empty-state { display: block; } body.mm-favoritos .saved { margin-top: 0; padding-top: 0; border-top: 0; }