/* ========================================================= LOQUIERO — SINGLE PRODUCT (EDIT) MÓDULO: LAYOUT BASE Scope: content-single-product.EDIT.php Objetivo: - Eliminar lógica de “cards” en el flujo de compra - Definir progresión vertical clara - Dar respiración entre bloques críticos - NO definir look, colores ni tipografías ========================================================= */ @media (max-width: 767px) { html:not([data-gds-version="1"]) body.single-product .lq-sp .site-container { padding-left: 18px !important; padding-right: 18px !important; } } /* ========================================================= 1. RESET ESTRUCTURAL Quita contención tipo card del flujo de compra ========================================================= */ html:not([data-gds-version="1"]) .lq-sp .site-container { padding-left: 18px !important; padding-right: 18px !important; } /* Sidebar / contenedores legacy */ .lqsp-new, .lqsp-buyflow, .lq-pricebox { background: transparent; border: 0; border-radius: 0; box-shadow: none; } /* Evitar herencia visual en hijos */ .lqsp-buyflow>* { background: transparent; box-shadow: none; } /* PDP — fondo blanco */ body.single-product { background: #ffffff !important; } /* Shared top breathing room for the main PDP columns. */ body.single-product .lqsp-desktop { padding-top: var(--loq-space-3); } /* ========================================================= 2. FLUJO DE COMPRA (COLUMNA DERECHA) ========================================================= */ /* Contenedor del flujo */ .lqsp-buyflow { display: flex; flex-direction: column; } /* ========================================================= 3. BLOQUES DE PRIMER NIVEL Orden y separación, no estilo ========================================================= */ /* Header: título + chips */ .lqsp-titleflow { display: flex; flex-direction: column; gap: var(--loq-space-2); } /* Selector de color */ .lq-color-strip { margin-top: 0; margin-bottom: 0; } /* Precio + info económica */ .lq-pricebox { margin-bottom: 0; } /* Acciones (cantidad + CTA) */ .lqsp-attr { margin-top: 0; } /* ========================================================= 4. SECCIONES FULL-WIDTH, POST-COMPRA (Reviews, Descripción, Relacionados, Video) Fase 11/12: estos bloques salen de la columna angosta de compra (ver "GRID DESKTOP DEFINITIVO" mas abajo) -- quedan contenidos ahi visualmente pero conceptualmente son la "proxima seccion" de la ficha, no parte del flujo de decision de compra. El hairline + padding-top marca ese quiebre sin agregar una card (doctrina Apple/Liquid Glass: sobrio, sin textura de mas). ".lqsp-block--full" (Fase 12) es el marcador genérico que cada render.php ya se pone a sí mismo para decir "voy a ancho completo" -- pdp_video y pdp_related_products ya lo traían (nunca se había conectado a ningún CSS); pdp_description y pdp_google_reviews lo suman ahora. Reemplaza la lista de clases hardcodeadas de la Fase 11: un bloque nuevo que necesite ancho completo no requiere tocar este archivo, solo agregarse la clase. Este selector gana prioridad sobre el margin-top/bottom propio que pdp_video/pdp_related_products traen por su configuración (inline, via sus settings "Margen superior/inferior") en este breakpoint -- intencional: el ritmo entre secciones full-width viene del sistema (este token), no de un valor suelto por bloque; esos settings siguen aplicando en mobile. El selector [data-loq-editor-slug] ya no hace falta acá: el propio loq_render_pdp_block() (Fase 12) refleja "lqsp-block--full" en el wrapper del editor cuando el bloque interno lo trae, así que ".lqsp-block--full" solo alcanza para cubrir también el preview del iframe (Fase 10). ========================================================= */ html:not([data-gds-version="1"]) .lqsp-block--full { margin-top: var(--loq-space-4) !important; padding-top: var(--loq-space-4); border-top: 1px solid var(--loq-border); } /* ========================================================= 5. RITMO POR ZONAS (Fase 14 -- resolución visual completa) Antes cada bloque de la columna de compra era una fila más en una lista de gap uniforme (24px entre TODO): título, precio, envío, confianza, CTA, cuotas, todos a la misma distancia entre sí, sin señal de qué va junto con qué. Eso es exactamente "columna comercial con poca densidad" / "se siente compuesta por módulos independientes" -- el ritmo no contaba ninguna historia. Ahora el ritmo BASE (gap/row-gap más abajo) baja a --loq-space-2 (16px, denso) y son estos overrides puntuales -- no el valor global -- los que abren aire donde de verdad empieza algo nuevo: antes de la franja de confianza (envío+garantía, que además se componen visualmente como una sola card, ver más abajo) y antes de la zona de acción (CTA). Cuotas queda pegada al CTA a propósito -- es letra chica DEL botón, no una fila más. Funciona igual en mobile (flex, gap chico + estos margin-top) y desktop (grid, row-gap chico + estos margin-top con !important para ganarle a los resets de la sección 6/7 más abajo) -- mismos selectores, sin ramas por breakpoint. ========================================================= */ .lqsp-desktop > .lq-shipping-minimal { margin-top: var(--loq-space-3) !important; } .lqsp-desktop > .lqsp-buyflow { margin-top: var(--loq-space-3) !important; } .lqsp-desktop > .lqsp-buyflow + .lq-pdp-installments { margin-top: var(--loq-space-1) !important; } /* ========================================================= 5.1 FRANJA DE CONFIANZA -- Envío + Garantía como una sola card Antes eran dos filas de texto sueltas, indistinguibles de cualquier otra fila de la columna. Ahora comparten una superficie (mismo fondo, un solo borde, una línea divisoria entre las dos) -- se leen como "esto es un bloque de razones para confiar", no como dos párrafos que aparecen uno después del otro. Selector de hermano adyacente (envío INMEDIATAMENTE antes de confianza, como ya están en el layout default) en vez de envolver ambos bloques en un div nuevo -- no requiere tocar la arquitectura de bloques para "componer dos módulos como una unidad". ========================================================= */ .lqsp-desktop > .lq-shipping-minimal { background: var(--loq-surface-alt); border: 1px solid var(--loq-border); border-bottom: none; border-radius: var(--loq-radius) var(--loq-radius) 0 0; padding: 14px 16px 12px !important; margin-bottom: 0 !important; } .lqsp-desktop > .lq-shipping-minimal + .lq-trust-info-section { background: var(--loq-surface-alt); border: 1px solid var(--loq-border); border-top: 1px dashed var(--loq-border); border-radius: 0 0 var(--loq-radius) var(--loq-radius); padding: 12px 16px 14px !important; margin-top: 0 !important; } /* ========================================================= 6. MOBILE REFINES (SOLO ESTRUCTURA) ========================================================= */ @media (max-width: 1023px) { /* El flujo vertical es ahora heredado del DOM: Título -> Galería -> Precio -> Variantes -> Envío -> Confianza -> CTA -> Info complementaria -> Reviews -> Descripción -> Relacionados (Fase 12) */ .lqsp-desktop { display: flex; flex-direction: column; /* Fase 14: bajado de --loq-space-3 (24px) a --loq-space-2 (16px) -- el ritmo base ahora es denso; las zonas que necesitan más aire lo piden explícitamente (sección 5, arriba), no todo el flujo por igual. */ gap: var(--loq-space-2); } .lqsp-gallery { margin-bottom: 0; /* Separación extra debajo de la imagen */ } /* Asegurar respiración entre bloques táctiles */ .lqsp-attr { margin-top: 0; } } /* ========================================= PDP EDIT — RESET DE HERENCIA GLOBAL ========================================= */ body.single-product { background: #fff; } body.single-product .site-container, body.single-product .loq-container, body.single-product .woocommerce-product-gallery, body.single-product .woocommerce-product-gallery * { background: transparent; box-shadow: none; } /* ========================================= PDP EDIT — BLOQUE 2 · GALERÍA ========================================= */ .lq-sp--edit .lqsp-gallery { margin: 0; } /* imagen */ .lq-sp--edit .woocommerce-product-gallery img { background: #fff; border-radius: 0; } /* Ajuste fino si Woo mete wrappers */ .lq-sp--edit .woocommerce-product-gallery__wrapper, .lq-sp--edit .woocommerce-product-gallery__image { background: transparent; } /* PDP EDIT — matar card visual de la galería */ body.single-product .lqsp-gallery, body.single-product .woocommerce-product-gallery, body.single-product .woocommerce-product-gallery__wrapper, body.single-product .woocommerce-product-gallery .flex-viewport { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } /* PDP EDIT — eliminar separador bajo la galería */ body.single-product .woocommerce-product-gallery, body.single-product .woocommerce-product-gallery__wrapper, body.single-product .lqsp-gallery { border-bottom: 0 !important; } /* PDP EDIT — Color strip sin separador */ .lqsp-variants, #lqColorStrip { margin-top: 0; /* aire, no línea */ padding-top: 0; border-top: 0 !important; border-bottom: 0 !important; } /* ========================================================= PDP — GRID DESKTOP DEFINITIVO ========================================================= */ @media (min-width: 1024px) { .lqsp-desktop { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); /* MAGIA GRID: forzamos a que todas las filas abracen el contenido (max-content) y arrojamos todo el espacio extra al final (1fr) para que NO se estire nada verticalmente */ grid-template-rows: repeat(15, max-content) 1fr; column-gap: 64px; /* Fase 11: estaba en 0 -- el comentario de abajo ("confiamos en el row-gap: 24px principal") ya describia la intención original, el valor nunca la reflejó. Cada bloque de la columna derecha tiene su margen reseteado a 0 acá abajo, así que un row-gap: 0 real dejaba el ritmo vertical entero en manos de lo que cada render.php trajera suelto -- de ahí la dependencia de ir tapando huecos con pdp_spacer a mano. Fase 14: bajado de --loq-space-3 (24px) a --loq-space-2 (16px) -- mismo motivo que en mobile (sección 5/6 más arriba): el ritmo base ahora es denso, las zonas piden aire explícitamente. */ row-gap: var(--loq-space-2); align-items: start; } /* La galería ocupa la columna izquierda y se expande infinitamente hacia abajo */ .lqsp-gallery { grid-column: 1; grid-row: 1 / span 20; margin: 0 !important; /* Reseteamos margen extra */ } /* Todos los bloques de la derecha */ .lqsp-desktop> :not(.lqsp-gallery) { grid-column: 2; /* Al estar en Grid, los márgenes no colapsan, se suman. Reseteamos y confiamos en el row-gap principal */ margin-top: 0 !important; margin-bottom: 0 !important; } /* Añadimos aire superior al flujo de la derecha para que no pegue al header */ .lqsp-titleflow { padding-top: 0 !important; } /* Fase 14: mismo motivo que ".lqsp-block--full" más abajo -- misma especificidad que ".lqsp-desktop > :not(.lqsp-gallery)" de arriba pero definida después, así que hay que repetir el margin-top acá (si no, el reset de arriba le gana y las zonas quedan tan pegadas como todo lo demás en desktop). */ .lqsp-desktop > .lq-shipping-minimal { margin-top: var(--loq-space-3) !important; } .lqsp-desktop > .lqsp-buyflow { margin-top: var(--loq-space-3) !important; } .lqsp-desktop > .lqsp-buyflow + .lq-pdp-installments { margin-top: var(--loq-space-1) !important; } /* Fase 11/12: los bloques marcados ".lqsp-block--full" (Reviews, Descripción, Relacionados, Video) salen de la columna angosta de compra y pasan a ocupar el ancho completo, debajo de la grilla galería+compra -- antes quedaban apilados dentro de la misma columna que precio/CTA (~45% del ancho), forzando texto largo, una grilla de reseñas y una card de producto real a un carril angosto pensado para controles de compra, y alargando esa columna muy por debajo del final real de la galería. Misma especificidad que ".lqsp-desktop > :not(.lqsp-gallery)" de arriba pero definida después -- por eso repite margin-top acá (si no, quedaría en 0). ".lqsp-block--full" ya cubre el wrapper del preview del editor (Fase 10) porque loq_render_pdp_block() lo refleja ahí cuando corresponde -- no hace falta un selector [data-loq-editor-slug] aparte por cada bloque nuevo que se sume a este grupo. */ html:not([data-gds-version="1"]) .lqsp-desktop> .lqsp-block--full { grid-column: 1 / -1; margin-top: var(--loq-space-4) !important; } } /* ========================================================= 7. BOTÓN "CONTINUAR CON LA COMPRA" (SINGLE ADD TO CART) ========================================================= */ body.single-product .single_add_to_cart_button { display: flex !important; align-items: center; justify-content: center; width: 100%; padding: 16px 24px !important; /*background: var(--lqh-accent) !important;*/ color: #fff !important; border-radius: 999px; /* Forma de pastilla / pill shape */ font-size: 16px; font-weight: 700; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .1s ease, background 0.2s ease, opacity 0.2s ease; margin-top: 12px; } button.single_add_to_cart_button.button.alt { border-radius: 999px !important; } a.button.checkout.wc-forward { border-radius: 999px !important; } /*body.single-product .single_add_to_cart_button:hover { background: var(--lqh-accent-hover, #4a3dbe) !important; transform: translateY(-1px); }*/ body.single-product .single_add_to_cart_button:active { transform: scale(.98); } body.single-product .single_add_to_cart_button.is-loading { opacity: 0.7; pointer-events: none; } /* GDS v1 consumer bridge: PDP's existing site container consumes DS-1 Container; full-width blocks use the shared section rhythm in opt-in stores. */ html[data-gds-version="1"] body.single-product .lq-sp .site-container.gds-container:not(.loq-container--md):not(.loq-container--sm) { max-width: none; padding-inline: 0; } html[data-gds-version="1"] .lqsp-block--full { margin-top: var(--gds-section-gap); }