/* ==========================================================================
MAVERICK 1997 — product.css
Ficha de producto (PDP). Prefijo exclusivo del área: .mvk-pdp-
Dos columnas iguales por auto-fit: galería y información. Colapsan solas a
una columna cuando cada una bajaría de 380px, o sea alrededor de los 820px
de viewport. No hace falta media query para eso: las dos declaradas (1080 y
760) gobiernan la galería sticky, la barra de compra fija y las columnas de
"Completá tu look".
Todos los valores salen del prototipo (markup 1097-1204, estilos 2085-2165).
Donde el prototipo choca con una regla de fidelidad, gana la regla y queda
anotado en el comentario.
⚠️ Nada de markup vectorial ni data-URI vectorial en este archivo: la CDN de
Hostinger deja inguardable por editor cualquier archivo que lo contenga.
========================================================================== */
/* ==========================================================================
1. Cáscara y barra superior
========================================================================== */
.mvk-pdp-main {
/* 🚨 Contexto de formato propio, y NO es decorativo.
Esto es un display:block sin padding, sin borde y sin overflow, y el
tampoco lo contiene (su overflow-x:hidden se propaga al viewport y
el body queda en overflow visible). Sin flow-root, el margen superior del
primer hijo en flujo SE ESCAPA y baja la ficha entera —barra de Volver
incluida— mientras getComputedStyle(main).marginTop sigue devolviendo 0px.
Ese es exactamente el mecanismo que hizo que dos auditorías midieran
"marginTop 0, paddingTop 0" y concluyeran que el hueco no existía.
Hoy el primer hijo es .woocommerce-notices-wrapper y no trae margen de
arriba, así que no cambia ni un píxel; el día que lo traiga —o que el
aviso de WooCommerce se estile con margin-block-start— el hueco vuelve y
vuelve a ser irrastreable. */
display: flow-root;
background: var(--mvk-white);
/* 🚨 Borde de CONTROL, no de separador.
--mvk-line (#E5E3E0) da 1.28:1 sobre blanco. Sirve de sobra para una línea
decorativa —un separador no tiene que cumplir contraste—, pero WCAG 1.4.11
pide 3:1 para lo que dibuja el LÍMITE de un control, y las cajas de talle,
los swatches, las miniaturas y el campo de código postal no tienen ningún
otro límite: adentro solo hay una letra suelta, un color plano o nada. A
390px se veían cinco letras flotando en blanco (nadie las lee como botones)
y un campo de texto invisible al lado del botón negro "Calcular".
#8A8A8A da 3.45:1 sobre blanco; #949494 queda en 3.03:1, demasiado al filo.
⚠️ Es un token PRESTADO: cuando se toque main.css tiene que subir a la
paleta como --mvk-line-strong —el mismo problema lo tienen todos los
formularios del tema— y esta declaración desaparecer. */
--mvk-pdp-line-control: #8A8A8A;
}
/* Sticky por debajo del bloque fijo del header (que va en z-index 90).
El offset ya lo publica header.css; acá solo se consume. */
.mvk-pdp-bar {
position: sticky;
/* 🚨 El offset SCROLLEADO, no el de reposo, y la cadena de respaldo importa.
--mvk-hdr-offset describe el header quieto. De 1080px para arriba, apenas
se scrollean 30px entra .is-scrolled y la fila baja a --mvk-hdr-short: el
bloque fijo pasa de 130,72px a 110px. Esta barra se pega justamente para
quedar A RAS del header, y con el valor de reposo quedaba una franja de
~20px por la que se veía pasar la foto y el título deslizándose: no es
blanco quieto, es un agujero.
Y una barra sticky SIEMPRE se está viendo con la página ya scrolleada, o
sea con el header corto: ese es el valor que corresponde.
El respaldo es --mvk-hdr-offset y no 102px pelado a propósito: si
header.css todavía no publica el token, esto tiene que caer en el
comportamiento de hoy y no en un número de celular sobre escritorio. */
inset-block-start: var(--mvk-hdr-offset-scrolled, var(--mvk-hdr-offset, 102px));
z-index: 5;
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(10px);
border-block-end: 1px solid var(--mvk-line);
}
.mvk-pdp-bar__in {
max-width: var(--mvk-max-wide);
margin: 0 auto;
/* 🚨 6px, no 12px. El alto ya lo pone el area tactil.
.mvk-pdp-volver mide 44px de alto —minimo de accesibilidad, no se toca— y
con 12px arriba y abajo mas el filete la barra daba 69px para una miga de
pan de 12px. Con 6px queda en 57px y el area tactil sigue intacta. */
padding: 6px var(--mvk-pad);
display: flex;
align-items: center;
gap: 14px;
}
/* El hover no mueve el botón: separa la flecha del texto abriendo el gap. */
.mvk-pdp-volver {
display: inline-flex;
align-items: center;
gap: 10px;
height: 44px;
flex: none;
color: var(--mvk-black);
font: 500 10px/1 var(--mvk-sans);
letter-spacing: .24em;
text-transform: uppercase;
transition: gap .35s var(--mvk-ease);
}
.mvk-pdp-volver:hover,
.mvk-pdp-volver:focus-visible {
gap: 16px;
color: var(--mvk-black);
}
.mvk-pdp-migas {
min-width: 0;
font: 400 12px/1 var(--mvk-sans);
color: var(--mvk-text-mid);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mvk-pdp-migas a { color: var(--mvk-text-mid); }
.mvk-pdp-migas a:hover { color: var(--mvk-black); }
.mvk-pdp-migas .is-current { color: var(--mvk-black); }
/* ==========================================================================
2. La grilla
========================================================================== */
.mvk-pdp {
max-width: var(--mvk-max-wide);
margin: 0 auto;
padding: clamp(18px, 3vw, 40px) var(--mvk-pad) 120px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
gap: clamp(24px, 4vw, 64px);
align-items: start;
}
/* 🚨 Los hijos de un grid arrancan en min-width:auto y no se achican por debajo
de su contenido. La columna de información tiene texto largo (descripción,
nota de envíos) y sin esto empujaba scroll horizontal a todo el sitio. */
.mvk-pdp > * { min-width: 0; }
/* ==========================================================================
3. Galería
========================================================================== */
/* 🚨 Miniaturas en TIRA VERTICAL al costado, no en la fila de abajo.
El prototipo (línea 2104) las pone en un grid de 4 columnas debajo de la
foto, pero el handoff 3.9 pide textualmente "imagen principal 3:4 +
miniaturas verticales" y era el único punto de esa sección que no se podía
tildar en el repaso contra el documento de entrega. Estaba resuelto a favor
del prototipo en un comentario, que no es lo mismo que estar decidido: acá
manda el handoff, porque es un requisito escrito y no una medida.
La tira vale de 1080px para arriba, que es el layout que describe el
documento. Por debajo vuelven a la fila horizontal del prototipo: los 88px
del costado le salían de la foto —a 900px la dejaban en 297px de ancho
contra los 397px de antes— y ahí la foto es lo que hay que mirar. */
.mvk-pdp-gal {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
gap: 12px;
align-items: start;
position: sticky;
/* 🚨 offset + 16, igual que .mvk-shop-filters (shop.css) y .mvk-co-aside
(checkout.css): los tres sticky del tema usan el mismo respiro.
Los 84px de antes salían del prototipo, donde la ficha era una capa a
pantalla completa SIN header fijo y ese 84 ERA la reserva del cromo
superior. Acá esa reserva ya la pone --mvk-hdr-offset: sumarle los 84
la declaraba dos veces. Medido a 1280px el offset resuelve a 130,72px,
así que la foto se clavaba en 214,72 y dejaba 84px de blanco liso entre
el header y la foto durante TODO el scroll de la ficha —que es larga—,
robados del alto útil de la propia foto 3:4. */
inset-block-start: calc(var(--mvk-hdr-offset-scrolled, var(--mvk-hdr-offset, 102px)) + 16px);
}
/* Con una sola foto no hay miniaturas: la foto se queda con las dos columnas en
vez de dejar 88px de aire a la izquierda. Gana por especificidad (0,2,0). */
.mvk-pdp-gal > :only-child { grid-column: 1 / -1; }
.mvk-pdp-gal__main {
grid-column: 2;
grid-row: 1;
position: relative;
/* 🚨 3:4, no el 4/5 del prototipo (línea 1108). La regla de fidelidad 6 y el
stock real (400×533) mandan sobre el prototipo en este punto. */
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--mvk-bg);
}
.mvk-pdp-gal__zoom {
position: absolute;
inset: 0;
overflow: hidden;
}
.mvk-pdp-gal__vacia {
position: absolute;
inset: 0;
background: var(--mvk-bg);
}
/* 🚨 Clase duplicada a propósito. .woocommerce img { height:auto } de
WooCommerce tiene especificidad (0,1,1) y le gana a cualquier regla del tema
de una sola clase: sin esto la foto se dibujaba con su alto natural y se
salía de la caja. */
.mvk-pdp-foto.mvk-pdp-foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center 12%;
transform-origin: center center;
transition: transform .5s var(--mvk-ease);
}
/* Cambio de foto: se vuelve a disparar quitando y poniendo la clase. */
.mvk-pdp-foto.is-cross {
animation: mvkCross .85s var(--mvk-ease) both;
}
.mvk-pdp-gal__hint {
position: absolute;
inset-block-end: 14px;
inset-inline-start: 14px;
font: 500 9px/1 var(--mvk-mono);
letter-spacing: .2em;
text-transform: uppercase;
padding: 8px 11px;
color: var(--mvk-black);
background: rgba(255, 255, 255, .82);
backdrop-filter: blur(6px);
pointer-events: none;
}
/* --- Miniaturas ---------------------------------------------------------- */
.mvk-pdp-gal__thumbs {
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.mvk-pdp-thumb {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 4;
border: 0;
/* outline y no border: el aro de la activa no puede cambiar la caja.
El gris de reposo va en el token de control: sobre el --mvk-bg de la propia
miniatura, el #E5E3E0 daba 1.16:1 y no dibujaba ningún límite (1.4.11). */
outline: 1px solid var(--mvk-pdp-line-control);
outline-offset: -1px;
background: var(--mvk-bg);
padding: 0;
cursor: pointer;
opacity: .72;
transition: opacity .3s ease, outline-color .3s ease;
}
.mvk-pdp-thumb:hover { opacity: 1; }
.mvk-pdp-thumb.is-active {
outline: 1.5px solid var(--mvk-black);
opacity: 1;
}
.mvk-pdp-thumb:focus-visible {
outline: 2px solid var(--mvk-black);
outline-offset: 2px;
}
/* Misma trampa de especificidad que la foto grande. */
.mvk-pdp-thumbimg.mvk-pdp-thumbimg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center 12%;
transition: transform 1.2s var(--mvk-ease);
}
.mvk-pdp-thumb:hover .mvk-pdp-thumbimg { transform: scale(1.06); }
/* ==========================================================================
4. Columna de información
========================================================================== */
.mvk-pdp-info {
display: flex;
flex-direction: column;
gap: 26px;
min-width: 0;
}
/* --- Encabezado ---------------------------------------------------------- */
.mvk-pdp-head {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Rótulo chico: 10px en mayúsculas. La regla 4 pide de .2em a .32em y esto
estaba en .16em, así que la etiqueta negra se veía comprimida al lado del
rótulo "COLOR" (.3em) que tiene 40px más abajo: dos sistemas tipográficos
distintos en el mismo bloque. */
.mvk-pdp-badge {
align-self: flex-start;
background: var(--mvk-black);
color: var(--mvk-white);
font: 600 10px/1 var(--mvk-sans);
letter-spacing: .2em;
text-transform: uppercase;
padding: 7px 10px;
}
/* 🚨 El título más grande de la ficha usa los TOKENS, no valores sueltos.
Antes escribía line-height .92 y letter-spacing -.025em a mano. El .92 es
exactamente --mvk-title-lh, así que no cambia nada; el tracking sí estaba
más cerrado que el de todos los demás títulos del sitio (--mvk-title-ls vale
-.02em) y ningún ajuste global lo alcanzaba: mover el token en main.css
cambiaba el hero, los carruseles, el catálogo y "Completá tu look", y dejaba
el nombre del producto —hasta 62px— con otro tracking, imposible de rastrear
porque el valor no aparecía en ninguna búsqueda del token. Si algún día el
remate pide de verdad un tracking más cerrado, va como token nuevo en
main.css, no como literal acá. */
.mvk-pdp-title {
margin: 0;
font-family: var(--mvk-display);
font-weight: 600;
text-transform: uppercase;
font-size: clamp(32px, 4.4vw, 62px);
line-height: var(--mvk-title-lh);
letter-spacing: var(--mvk-title-ls);
}
.mvk-pdp-meta {
margin: 0;
font: 400 13px/1.3 var(--mvk-sans);
letter-spacing: .1em;
text-transform: uppercase;
/* Fondo claro ⇒ --mvk-text-soft-light, nunca --mvk-text-soft (regla 4). */
color: var(--mvk-text-soft-light);
}
/* --- Precio -------------------------------------------------------------- */
.mvk-pdp-precio {
display: flex;
flex-direction: column;
gap: 9px;
padding-block-end: 22px;
border-block-end: 1px solid var(--mvk-line);
}
.mvk-pdp-precio__fila {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
/* "Desde": mientras el importe grande es el mínimo de un rango. Rótulo chico,
dentro del rango de tracking de la regla 4. Lo esconde product.js apenas hay
una variación resuelta. */
.mvk-pdp-precio__desde {
font: 500 10px/1 var(--mvk-sans);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--mvk-text-soft-light);
}
.mvk-pdp-precio__now {
font-family: var(--mvk-display);
font-weight: 600;
font-size: clamp(28px, 3.4vw, 42px);
line-height: 1;
letter-spacing: -.01em;
}
.mvk-pdp-precio__old {
font: 400 16px/1 var(--mvk-sans);
color: var(--mvk-text-soft-light);
text-decoration: line-through;
}
/* Mismo caso que la etiqueta: 10.5px en mayúsculas es un rótulo chico y va de
.2em para arriba. El text-transform va explícito para no depender de que la
cadena traducida venga ya en mayúsculas. */
.mvk-pdp-precio__off {
background: var(--mvk-black);
color: var(--mvk-white);
font: 600 10.5px/1 var(--mvk-sans);
letter-spacing: .2em;
text-transform: uppercase;
padding: 7px 9px;
}
.mvk-pdp-transfer {
margin: 0;
font: 500 13.5px/1.4 var(--mvk-sans);
color: var(--mvk-black);
}
.mvk-pdp-cuota {
margin: 0;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font: 500 13.5px/1.4 var(--mvk-sans);
color: var(--mvk-text-mid);
}
.mvk-pdp-cuota svg {
width: 16px;
height: 16px;
flex: none;
}
/* 🚨 El ÚNICO acento de toda la pantalla: el importe de la cuota sin interés.
El prototipo pinta de rojo la línea entera —ícono incluido—, pero la regla de
fidelidad 2 dice "solo en el importe", así que el resto queda en gris. Mismo
criterio que .mvk-card-quota-amount en la tarjeta. */
.mvk-pdp-cuota__importe {
font-weight: 600;
color: var(--mvk-red);
}
/* ==========================================================================
5. El formulario: color, talle, cantidad y CTA
========================================================================== */
.mvk-pdp-form {
display: flex;
flex-direction: column;
gap: 26px;
margin: 0;
min-width: 0;
}
.mvk-pdp-grupo {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.mvk-pdp-rotulo {
font: 500 9.5px/1 var(--mvk-sans);
letter-spacing: .3em;
text-transform: uppercase;
color: var(--mvk-text-soft-light);
}
.mvk-pdp-rotulo-fila {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.mvk-pdp-stock {
font: 400 11.5px/1 var(--mvk-sans);
color: var(--mvk-text-mid);
text-align: end;
}
/* Quedan pocas del talle elegido.
*
* Sube a negro y a semibold, sin color de alarma. La paleta es monocroma y un
* rojo acá sería el único punto de color de toda la ficha: leería como error de
* validación —"algo hiciste mal"— y no como "apurate, quedan dos". El peso
* alcanza para que se despegue del gris de al lado.
*/
.mvk-pdp-stock.is-poco {
font-weight: 600;
color: var(--mvk-black);
}
/* El nombre del color marcado, al lado del rótulo "Color". No es un rótulo
chico en mayúsculas: es el valor elegido, y va tal como se cargó el término
("Verde militar"), en la misma línea de base que el rótulo. */
.mvk-pdp-elegido {
font: 500 12px/1 var(--mvk-sans);
color: var(--mvk-black);
text-align: end;
}
/* --- Los radios de verdad -------------------------------------------------
Color y talle son reales para que la ficha agregue al
carrito con el JavaScript apagado. Se sacan de la vista con el recorte del
patrón de WordPress, NUNCA con opacity:0 ni display:none: tienen que seguir
recibiendo foco y flechas del teclado. Lo que se ve es el