(template). Scopeamos a main.orbita-pdp para NO pad-ear el body (header/footer quedaban inset — QA ronda 4, item 4). Container + paddings van solo en el contenido. */ main.orbita-pdp { container-type: inline-size; container-name: pdp; padding-top: var(--space-8); padding-bottom: var(--space-16); } /* Breadcrumbs WC nativo */ .woocommerce-breadcrumb { font-size: var(--text-sm); color: var(--ink-mid); margin-bottom: var(--space-6); } .woocommerce-breadcrumb a { color: var(--ink-mid); text-decoration: none; transition: color var(--duration-fast) var(--easing-default); } .woocommerce-breadcrumb a:hover { color: var(--ink); } /* Mobile: taxonomías profundas (5 niveles) wrappean a 3 líneas y empujan el título. Lo dejamos en una sola línea con scroll horizontal (swipe) en vez de apilarse — patrón mobile estándar, no se pierde ningún crumb. */ @media (max-width: 599px) { .woocommerce-breadcrumb { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ font-size: var(--text-xs); margin-bottom: var(--space-4); } .woocommerce-breadcrumb::-webkit-scrollbar { display: none; /* WebKit/Blink */ } } /* ============================================================================= 2. Galería — bloque nativo woocommerce/product-gallery ============================================================================= */ /* Imagen principal: aspect-ratio 4:3 */ .wp-block-woocommerce-product-gallery-large-image, .orbita-pdp__gallery, .woocommerce-product-gallery__wrapper { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); background-color: var(--paper-card); } .wp-block-woocommerce-product-gallery-large-image img, .orbita-pdp__gallery img, .woocommerce-product-gallery__wrapper img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Thumbnails: horizontal scroll en mobile, nativo WC */ .wp-block-woocommerce-product-gallery-thumbnails, .flex-control-thumbs { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-top: var(--space-3); -webkit-overflow-scrolling: touch; } .wp-block-woocommerce-product-gallery-thumbnails::-webkit-scrollbar, .flex-control-thumbs::-webkit-scrollbar { display: none; } .wp-block-woocommerce-product-gallery-thumbnails img, .flex-control-thumbs li img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; transition: border-color var(--duration-fast) var(--easing-default); } .wp-block-woocommerce-product-gallery-thumbnails img:hover, .flex-control-thumbs li img:hover, .flex-control-thumbs li img.flex-active { border-color: var(--accent); } /* ============================================================================= 3. Precio — bloque woocommerce/product-price ============================================================================= */ /* Selectores del bloque nativo WC */ .wp-block-woocommerce-product-price .price, .orbita-pdp__price .price, .woocommerce-Price-amount { font-family: var(--font-mono); font-size: clamp(1.25rem, 4vw, 1.75rem); font-weight: var(--weight-semibold); color: var(--ink); line-height: var(--leading-tight); } .wp-block-woocommerce-product-price .price del, .orbita-pdp__price .price del { font-size: var(--text-sm); color: var(--ink-mid); font-weight: var(--weight-regular); text-decoration: line-through; } .wp-block-woocommerce-product-price .price ins, .orbita-pdp__price .price ins { color: var(--critical); text-decoration: none; } /* ============================================================================= 4. Stock badge — bloque woocommerce/product-stock-indicator ============================================================================= */ .wc-block-product-stock-indicator, .orbita-pdp .stock { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); } .wc-block-product-stock-indicator.wc-block-product-stock-indicator--in-stock, .orbita-pdp .in-stock { color: var(--success); } .wc-block-product-stock-indicator.wc-block-product-stock-indicator--out-of-stock, .orbita-pdp .out-of-stock { color: var(--critical); } /* ============================================================================= 5. Add-to-cart — bloque woocommerce/add-to-cart-with-options ============================================================================= */ /* Botón principal: accent, full-width en mobile */ .wp-block-woocommerce-add-to-cart-with-options .single_add_to_cart_button, .woocommerce-variation-add-to-cart .single_add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: var(--space-4) var(--space-8); background: var(--accent); color: var(--paper); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold); border-radius: var(--radius-md); border: none; cursor: pointer; text-decoration: none; transition: background-color var(--duration-fast) var(--easing-default), box-shadow var(--duration-fast) var(--easing-default); /* Mínimo touch target WCAG 2.5.8 */ min-height: 48px; } .wp-block-woocommerce-add-to-cart-with-options .single_add_to_cart_button:hover, .woocommerce-variation-add-to-cart .single_add_to_cart_button:hover { background: var(--accent-deep); box-shadow: var(--shadow-glow-accent); } .wp-block-woocommerce-add-to-cart-with-options .single_add_to_cart_button:focus, .wp-block-woocommerce-add-to-cart-with-options .single_add_to_cart_button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .wp-block-woocommerce-add-to-cart-with-options .single_add_to_cart_button:disabled, .wp-block-woocommerce-add-to-cart-with-options .single_add_to_cart_button.disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } /* * Estado post-add: "Ver carrito" — outline/secundario, NO igual al botón amarillo. * Bug reportado: el link "Ver carrito" se veía con el mismo fondo amarillo del ATC. * Solución: override como variante outline con color de tinta, no accent. * El padding compensa los 2px del border para mantener la misma altura. */ .wp-block-woocommerce-add-to-cart-with-options .added_to_cart, .woocommerce .added_to_cart { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: calc(var(--space-4) - 2px) calc(var(--space-8) - 2px); background-color: transparent; border: 2px solid var(--ink-mid); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); border-radius: var(--radius-md); text-decoration: none; min-height: 48px; cursor: pointer; transition: border-color var(--duration-fast) var(--easing-default); margin-top: var(--space-2); } .wp-block-woocommerce-add-to-cart-with-options .added_to_cart:hover, .woocommerce .added_to_cart:hover { border-color: var(--ink); color: var(--ink); } .wp-block-woocommerce-add-to-cart-with-options .added_to_cart:focus, .wp-block-woocommerce-add-to-cart-with-options .added_to_cart:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* Quantity input */ .wp-block-woocommerce-add-to-cart-with-options .qty { width: 64px; text-align: center; background: var(--paper-card); border: 1px solid var(--rule); color: var(--ink); font-family: var(--font-mono); font-size: var(--text-base); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); -moz-appearance: textfield; } .wp-block-woocommerce-add-to-cart-with-options .qty::-webkit-outer-spin-button, .wp-block-woocommerce-add-to-cart-with-options .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .wp-block-woocommerce-add-to-cart-with-options .qty:focus, .wp-block-woocommerce-add-to-cart-with-options .qty:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ============================================================================= 6. B2B badge placeholder ============================================================================= */ .orbita-b2b-badge { display: inline-flex; align-items: center; padding: 4px 10px; background-color: var(--b2b-badge-bg); color: var(--b2b-badge-fg); border: 1px solid rgba(207, 162, 42, 0.25); border-radius: var(--radius-full); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); } /* ============================================================================= 7. WhatsApp CTA (inyectado por PdpHooks::render_whatsapp_cta) ============================================================================= */ .orbita-pdp-cta-area { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); } .orbita-pdp-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; padding: var(--space-4) var(--space-6); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: 1; text-decoration: none; border-radius: var(--radius-md); cursor: pointer; min-height: 48px; transition: background-color var(--duration-fast) var(--easing-default), box-shadow var(--duration-fast) var(--easing-default); } .orbita-pdp-cta--whatsapp { background-color: var(--whatsapp); color: var(--ink-on-accent); /* Secundario respecto a "Añadir al carrito" (accent, semibold, text-base): más liviano para no competir por la atención. Mantiene min-height 48px. */ font-size: var(--text-sm); font-weight: var(--weight-medium); } .orbita-pdp-cta--whatsapp:hover { background-color: var(--whatsapp-deep); box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.18); } .orbita-pdp-cta--whatsapp:focus, .orbita-pdp-cta--whatsapp:focus-visible { outline: 2px solid var(--ink-on-accent); outline-offset: 3px; } .orbita-pdp-cta svg { flex-shrink: 0; fill: currentColor; } @media (prefers-reduced-motion: reduce) { .orbita-pdp-cta { transition: none; } } /* ============================================================================= 8. Trust row (inyectada por PdpHooks::render_trust_row via woocommerce_after_single_product_summary, priority 15) D-QA-01: banda full-width después del hero 2-col, sin recuadro. ============================================================================= */ .orbita-pdp-trust { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; /* Sin background ni border-radius: es una banda, no un recuadro */ padding: var(--space-4) 0; margin: var(--space-6) 0; background-color: transparent; border: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .orbita-pdp-trust__item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--ink-mid); font-weight: var(--weight-medium); } .orbita-pdp-trust__item svg { flex-shrink: 0; color: var(--success); stroke: currentColor; } @media (min-width: 640px) { .orbita-pdp-trust { flex-direction: row; justify-content: space-around; gap: var(--space-4); align-items: center; } } /* B2C override: fondo transparente garantizado sobre crema */ body.orbita-b2c .orbita-pdp-trust { background-color: transparent; border-top-color: var(--rule); border-bottom-color: var(--rule); } /* ============================================================================= 9. Section headings — fitment, CTA footer ============================================================================= */ .orbita-pdp-section { margin-top: var(--space-12); } .orbita-pdp-section__title { font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--ink); margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule); } .orbita-pdp-section__lead { font-size: var(--text-sm); color: var(--ink-mid); margin-top: calc(-1 * var(--space-4)); margin-bottom: var(--space-6); } /* ============================================================================= 10. Related products — bloque woocommerce/related-products ============================================================================= */ .wp-block-woocommerce-related-products ul.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); list-style: none; padding: 0; margin: 0; } @media (min-width: 768px) { .wp-block-woocommerce-related-products ul.products { grid-template-columns: repeat(4, 1fr); } } /* ============================================================================= 11. Footer CTA banner ("¿No encontrás lo que buscás?") ============================================================================= */ .orbita-pdp-footer-cta { container-type: inline-size; container-name: pdp-footer-cta; margin-top: var(--space-16); border-top: 1px solid var(--rule); } .orbita-pdp-footer-cta__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); padding: var(--space-12) var(--space-4); background: var(--paper-soft); border-radius: var(--radius-lg); } .orbita-pdp-footer-cta__heading { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--ink); margin: 0; line-height: var(--leading-tight); } .orbita-pdp-footer-cta__body { font-size: var(--text-base); color: var(--ink-mid); line-height: var(--leading-relaxed); margin: var(--space-2) 0 0; } .orbita-pdp-footer-cta__btn { width: auto; flex-shrink: 0; } @container pdp-footer-cta (min-width: 600px) { .orbita-pdp-footer-cta__inner { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-10) var(--space-8); } .orbita-pdp-footer-cta__text { flex: 1; min-width: 0; } } /* ============================================================================= 12. Sale badge ============================================================================= */ .woocommerce-badge, .onsale, .orbita-pdp-badge--sale { display: inline-flex; align-items: center; padding: 4px 10px; background-color: var(--critical); color: var(--paper); border-radius: var(--radius-full); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1; line-height: 1; } /* ============================================================================= 13. Tabs — Descripción / Información adicional (sin Valoraciones) D-QA-05: flex 50/50 en mobile con 2 tabs, nowrap garantizado. ============================================================================= */ .woocommerce-tabs { margin-top: var(--space-8); } /* Barra de tabs */ .woocommerce-tabs ul.tabs, .woocommerce-tabs ul.wc-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0; margin: 0; padding: 0; list-style: none; border-bottom: 2px solid var(--rule); } .woocommerce-tabs ul.tabs::-webkit-scrollbar, .woocommerce-tabs ul.wc-tabs::-webkit-scrollbar { display: none; } /* Cada tab ocupa 50% con 2 tabs (flex: 1 1 0) */ .woocommerce-tabs ul.tabs li, .woocommerce-tabs ul.wc-tabs li { flex: 1 1 0; text-align: center; list-style: none; } .woocommerce-tabs ul.tabs li a, .woocommerce-tabs ul.wc-tabs li a { display: block; padding: var(--space-3) var(--space-2); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-mid); text-decoration: none; white-space: nowrap; /* Reserva espacio para el indicador activo sin CLS */ border-bottom: 2px solid transparent; /* Solapa con el border del ul para continuidad visual */ margin-bottom: -2px; transition: color var(--duration-fast) var(--easing-default), border-color var(--duration-fast) var(--easing-default); } /* Tab activa */ .woocommerce-tabs ul.tabs li.active a, .woocommerce-tabs ul.wc-tabs li.active a { color: var(--ink); font-weight: var(--weight-semibold); border-bottom-color: var(--accent); } /* Tab hover (no activa) */ .woocommerce-tabs ul.tabs li:not(.active) a:hover, .woocommerce-tabs ul.wc-tabs li:not(.active) a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); } /* A11y focus visible — sin !important para no violar A03 */ .woocommerce-tabs ul.tabs li a:focus, .woocommerce-tabs ul.tabs li a:focus-visible, .woocommerce-tabs ul.wc-tabs li a:focus, .woocommerce-tabs ul.wc-tabs li a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Panel de contenido */ .woocommerce-Tabs-panel { padding: var(--space-6) 0; font-size: var(--text-base); color: var(--ink); line-height: var(--leading-relaxed); } /* Desktop: tabs de ancho por contenido, más padding */ @media (min-width: 768px) { .woocommerce-tabs ul.tabs li, .woocommerce-tabs ul.wc-tabs li { flex: 0 0 auto; } .woocommerce-tabs ul.tabs li a, .woocommerce-tabs ul.wc-tabs li a { padding: var(--space-3) var(--space-6); font-size: var(--text-base); } } /* ============================================================================= 14. Sección de compatibilidad — ocultar cuando no hay datos de fitment El bloque render.php emite .orbita-compat--empty cuando rows está vacío. El selector :has() oculta la sección wrapper si el único hijo es --empty. ============================================================================= */ /* Navegadores modernos (Chrome 105+, Firefox 121+, Safari 15.4+) */ .orbita-pdp-section--compat:has(.orbita-compat--empty) { display: none; } /* ============================================================================= 15. Padding lateral garantizado en mobile (spec designer §1.1) Garantía de que el contenido del PDP no toca los bordes del viewport. ============================================================================= */ @media (max-width: 639px) { main.orbita-pdp { padding-left: var(--space-4); padding-right: var(--space-4); } } /* ============================================================================= 16. Ancho uniforme para bloques alignwide dentro de la PDP (D077) Problema: .wc-block-breadcrumbs y .wp-block-woocommerce-product-details llevan `alignwide` que los expande al wideSize (1280px), mientras que el resto de los hijos del main constrained heredan contentSize (1100px). Resultado: bordes izquierdo/derecho desalineados en 1440px. Fix: dentro de main.orbita-pdp, forzamos esos dos bloques específicos a max-width: var(--wp--style--global--content-size) + margin auto. No usamos el selector genérico .alignwide para no afectar otros contextos. ============================================================================= */ main.orbita-pdp .wc-block-breadcrumbs, main.orbita-pdp .wp-block-woocommerce-product-details.alignwide { max-width: var(--wp--style--global--content-size); margin-inline: auto; /* Reset del override de ancho que aplica el FSE a bloques alignwide */ width: 100%; } /* ============================================================================= 17. Galería mobile — lightbox al tap (tarea 2) WC product-image-gallery clásico (FlexSlider) ya soporta zoom al click en desktop. En mobile el zoom está desactivado por defecto. Este CSS prepara el cursor y el overlay. El JS liviano en pdp-lightbox.js activa el lightbox real. ============================================================================= */ /* Cursor de zoom en la imagen principal en mobile */ @media (max-width: 767px) { .woocommerce-product-gallery__wrapper img, .orbita-pdp__gallery img { cursor: zoom-in; } } /* Overlay del lightbox (inserido por pdp-lightbox.js) */ .orbita-lightbox-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; /* Estado inicial: oculto */ opacity: 0; pointer-events: none; transition: opacity var(--duration-fast, 150ms) ease; } .orbita-lightbox-overlay.is-open { opacity: 1; pointer-events: auto; } .orbita-lightbox-overlay__img { max-width: 95vw; max-height: 95vh; object-fit: contain; border-radius: var(--radius-md); } /* Botón cerrar lightbox */ .orbita-lightbox-overlay__close { position: absolute; top: var(--space-4); right: var(--space-4); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.15); border: none; border-radius: var(--radius-full); color: #fff; cursor: pointer; font-size: var(--text-xl); line-height: 1; /* Touch target mínimo WCAG 2.5.5 */ min-width: 44px; min-height: 44px; } .orbita-lightbox-overlay__close:focus, .orbita-lightbox-overlay__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ============================================================================= 18. Tabla de compatibilidad — .orbita-compat (D072, D077) El CSS del bloque orbita/compatibility-table no se encolaba (block.json apuntaba a build/style-index.css inexistente). Estilos movidos aquí — pdp.css ya se encola condicionalmente en todas las PDP via inc/pdp.php. Mobile-first: el wrapper overflow-x:auto permite scroll horizontal en 375px. ============================================================================= */ /* Wrapper scrollable */ .orbita-compat-table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-md); } /* Tabla */ .orbita-compat__table { width: 100%; min-width: 480px; border-collapse: collapse; table-layout: fixed; font-size: var(--text-sm); } /* Cabecera */ .orbita-compat__thead tr { background-color: var(--paper-card); border-bottom: 2px solid var(--rule); } .orbita-compat__th { padding: var(--space-3) var(--space-4); text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-mid); white-space: nowrap; } /* Celdas de datos */ .orbita-compat__td { padding: var(--space-3) var(--space-4); color: var(--ink); border-bottom: 1px solid var(--rule); vertical-align: middle; } /* Última fila del tbody: sin border-bottom */ .orbita-compat__tbody tr:last-child .orbita-compat__td { border-bottom: none; } /* Hover de fila */ .orbita-compat__tbody tr:hover .orbita-compat__td { background-color: var(--paper-soft); } /* Columna Años: monospace + nowrap (D072) */ .orbita-compat__td--years { font-family: var(--font-mono); white-space: nowrap; color: var(--ink-mid); } /* Columna Marca: semibold, alineada al top porque usa rowspan */ .orbita-compat__td--brand { font-weight: var(--weight-semibold); vertical-align: top; padding-top: var(--space-4); } /* Zebra striping — clase condicional cuando la tabla tiene >= 6 filas */ .orbita-compat__table--zebra .orbita-compat__tbody tr:nth-child(even) .orbita-compat__td { background-color: var(--paper-soft); }