sin href (ver single-product/product-image.php: lightbox deshabilitado ahí). CONTRATO JS — STICKY ATC (inc/product-extras.php imprime el markup): #vc-sticky-atc nace con hidden + aria-hidden="true". El JS los quita y alterna .is-visible con IntersectionObserver sobre el CTA principal. Sin .is-visible la barra queda fuera de pantalla por transform (abajo en mobile, arriba en ≥880px). Sin JS: hidden ⇒ no existe. ========================================================================== */ /* ============================ 1. WRAPPER / LAYOUT ======================= */ /* content-single-product.php: div.vc-single (wc_product_class) > .vc-container.vc-single__inner > .vc-single__layout (galería + sumario), y después .vc-container.vc-single__extras. OJO: la ficha ya vive dentro del wrapper del shop (#primary.vc-shop > .vc-container.vc-shop__inner), así que estos .vc-container internos se APLANAN para no duplicar gutter ni re-encajonar el ancho. */ .vc-single > .vc-container { max-width: none; padding-inline: 0; } .vc-single__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; } @media (min-width: 880px) { .vc-single__layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(var(--sp-6), 4vw, var(--sp-8)); } } /* ============================ 2. GALERÍA ================================ */ /* single-product/product-image.php: .vc-single__gallery (columna, hook) > .vc-gallery.woocommerce-product-gallery > figure.woocommerce-product-gallery__wrapper.vc-gallery__stage > a.vc-gallery__main.woocommerce-product-gallery__image (o

placeholder SIN href) > img.vc-gallery__img > .vc-gallery__thumbs > a.vc-gallery__thumb[href][data-full][data-alt] (.is-active + aria-current="true" en la activa). */ .vc-single__gallery { position: relative; min-width: 0; } .vc-gallery { position: relative; } .vc-gallery__stage { margin: 0; } /* Imagen principal. La piel puede cambiar la proporción con --vc-gallery-aspect (default 4/5, herencia de la referencia v1). */ .vc-gallery__main { display: block; width: 100%; aspect-ratio: var(--vc-gallery-aspect, 4 / 5); overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-2); border: var(--border-w) solid var(--line); } .vc-gallery__main img, .vc-gallery__img { width: 100%; height: 100%; object-fit: cover; } /* Solo el real (con lightbox) invita al zoom; el placeholder

nativo: accesible y operable sin JS. */ .vc-single__extras { margin-top: clamp(var(--sp-6), 6vw, var(--sp-8)); } .vc-accordions { border-top: var(--border-w) solid var(--line); } .vc-accordion { border-bottom: var(--border-w) solid var(--line); } .vc-accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-1); cursor: pointer; list-style: none; /* saca el marker nativo (Firefox) */ font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); } /* Marker nativo de WebKit. */ .vc-accordion__summary::-webkit-details-marker { display: none; } .vc-accordion__summary:hover { color: var(--brand-strong); } .vc-accordion__summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .vc-accordion__title { min-width: 0; } .vc-accordion__marker { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2); } .vc-accordion__marker svg { width: 18px; height: 18px; } .vc-accordion[open] > .vc-accordion__summary .vc-accordion__marker { transform: rotate(180deg); background: var(--brand-soft); color: var(--brand-strong); } .vc-accordion__panel { padding: 0 var(--sp-1) var(--sp-5); color: var(--ink-2); line-height: var(--lh-body); } .vc-accordion__panel > :first-child { margin-top: 0; } .vc-accordion__panel p { max-width: 70ch; margin: 0 0 var(--sp-3); } .vc-accordion__panel p:last-child { margin-bottom: 0; } .vc-accordion__panel h2, .vc-accordion__panel h3 { font-size: var(--fs-h3); margin: var(--sp-4) 0 var(--sp-2); } /* Tabla de atributos (tab "Información adicional" del core). El core pinta bordes/fondos en table.shop_attributes (0,1,2): se vence con (0,2,1)+. */ .vc-accordion__panel .shop_attributes, .vc-accordion__panel .woocommerce-product-attributes { width: 100%; border-collapse: collapse; border: 0; font-size: var(--fs-sm); } .vc-accordion__panel .shop_attributes th, .vc-accordion__panel .shop_attributes td { padding: var(--sp-3) var(--sp-3); border: 0; border-bottom: var(--border-w) solid var(--line); text-align: left; vertical-align: top; background: transparent; font-style: normal; } .vc-accordion__panel .shop_attributes th { width: 32%; font-weight: 500; color: var(--ink); background: var(--surface-2); } .vc-accordion__panel .shop_attributes td p { margin: 0; max-width: none; } /* ============================ 9. RESEÑAS ================================ */ /* El callback del core (comments_template) imprime #reviews.woocommerce-Reviews dentro del panel del acordeón (id tab-reviews conservado para el ancla del rating). El form usa .comment-respond, que ya estila core/layout.css. */ .vc-accordion__panel #reviews .woocommerce-Reviews-title { font-size: var(--fs-body); font-weight: 600; margin: 0 0 var(--sp-4); } .vc-accordion__panel #reviews .commentlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); } .vc-accordion__panel #reviews .comment_container { display: flex; gap: var(--sp-3); align-items: flex-start; } .vc-accordion__panel #reviews .comment_container .avatar { flex: none; width: 48px; height: 48px; border-radius: var(--radius-pill); /* Neutraliza el marco flotado que el core le pone al avatar (0,1,3). */ float: none; position: static; padding: 0; border: 0; background: transparent; box-shadow: none; } .vc-accordion__panel #reviews .comment-text { flex: 1; min-width: 0; margin: 0; /* el core le deja margin-left para el avatar flotado */ padding: var(--sp-4); border: var(--border-w) solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); } .vc-accordion__panel #reviews .comment-text .meta { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); color: var(--ink-3); } .vc-accordion__panel #reviews .comment-text .description p { margin: 0 0 var(--sp-2); max-width: none; } .vc-accordion__panel #reviews .comment-text .description p:last-child { margin-bottom: 0; } .vc-accordion__panel #reviews .star-rating { color: var(--accent); float: none; margin-bottom: var(--sp-1); } .vc-accordion__panel #review_form_wrapper { margin-top: var(--sp-5); } /* Selector de estrellas del form (p.stars del core). */ .vc-accordion__panel #reviews p.stars a { color: var(--accent); } .vc-accordion__panel #reviews .comment-form-rating > label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); margin-bottom: var(--sp-1); } /* ============================ 10. RELACIONADOS / UPSELLS ================ */ /* related.php / up-sells.php: section.vc-related|.vc-upsells (.vc-section da el respiro vertical; título .vc-section__title — ambos en core/layout.css). La grilla ul.products + .vc-card la resuelve core/shop.css (incluida la anulación del clearfix del core). Acá solo el encadenado de secciones. */ .vc-related, .vc-upsells { padding-bottom: 0; } .vc-upsells + .vc-related { padding-top: 0; } /* ============================ 11. STICKY ADD-TO-CART ==================== */ /* inc/product-extras.php: #vc-sticky-atc.vc-sticky-atc[hidden] > .vc-container.vc-sticky-atc__inner > __info (__name + __price) + __actions (input#vc-sticky-qty.vc-sticky-atc__qty? + button __btn). Estados: ver contrato en la cabecera. Mobile: barra inferior; ≥880px: barra superior. Mismo --z-nav que el header: al vivir al final del pinta por encima sin inventar capas nuevas. */ .vc-sticky-atc { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-nav); background: var(--surface-raised); border-top: var(--border-w) solid var(--line); box-shadow: var(--shadow-2); padding-block: var(--sp-2); transform: translateY(102%); } .vc-sticky-atc.is-visible { transform: none; } .vc-sticky-atc__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .vc-sticky-atc__info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .vc-sticky-atc__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vc-sticky-atc__price { font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; } .vc-sticky-atc__price del { color: var(--ink-3); } .vc-sticky-atc__price ins { text-decoration: none; color: var(--accent-strong); } .vc-sticky-atc__actions { display: flex; align-items: stretch; gap: var(--sp-2); flex: none; } .vc-sticky-atc__qty { width: 4.25rem; min-height: 44px; padding: 0 var(--sp-2); text-align: center; font: inherit; color: var(--ink); background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius-md); } .vc-sticky-atc__qty:focus-visible { border-color: var(--brand); } .vc-sticky-atc__btn { flex: none; } @media (min-width: 880px) { .vc-sticky-atc { /* Offset de la admin bar (mismo patrón que el resto de los sticky del motor): sin él, la barra quedaba tapada por los 32px de la admin bar de un usuario logueado. El translateY resta también el offset para que la barra oculta quede 100% fuera de pantalla. */ top: var(--wp-admin--admin-bar--height, 0px); bottom: auto; border-top: 0; border-bottom: var(--border-w) solid var(--line); transform: translateY(calc(-102% - var(--wp-admin--admin-bar--height, 0px))); } .vc-sticky-atc.is-visible { transform: none; } .vc-sticky-atc__name { font-size: var(--fs-body); } } /* ============================ 12. MOTION ================================ */ /* Todas las transiciones/animaciones de esta hoja viven acá: con prefers-reduced-motion: reduce, nada se mueve (bloque global del motor). */ @media (prefers-reduced-motion: no-preference) { .vc-gallery__thumb { transition: border-color var(--tr) var(--ease-out); } .vc-gallery__thumb img { transition: opacity var(--tr) var(--ease-out); } .vc-gallery__main img { transition: opacity var(--tr) var(--ease-out); } .vc-lightbox { animation: vc-lb-in var(--tr) var(--ease-out) both; } .vc-lightbox__nav, .vc-lightbox__close { transition: background var(--tr) var(--ease-out); } .vc-accordion__summary { transition: color var(--tr) var(--ease-out); } .vc-accordion__marker { transition: transform var(--tr) var(--ease-out), background var(--tr) var(--ease-out), color var(--tr) var(--ease-out); } .vc-sticky-atc { transition: transform var(--tr-slow) var(--ease-out); } .vc-single__rating-link, .vc-variations__reset { transition: color var(--tr) var(--ease-out); } } @keyframes vc-lb-in { from { opacity: 0; } to { opacity: 1; } }