` del tema (display:inline-flex; width:100%;
align-items:center; padding:8px 0). De este modo el botón hereda
el mismo cálculo de ancho que "Añadir al carrito" y se renderiza
idéntico desde el primer paint, sin flashes ni JS.
- `#customization-panel`: se mantiene como bloque oculto debajo. */
/* CSS GRID DE LOS BOTONES (Personalizar gorra + Añadir al carrito).
El `
` lo añade product.tpl cuando hay
personalizador. Sus hijos:
row 1: [customize-toggle] [cust-heart-ghost] (col2 invisible)
row 2: #customization-panel (span 2) [display:none por default]
row 3: .customization-price (span 2) [display:none por default]
row 4: #add_to_cart button [add-to-wishlist] (heart real)
El truco clave: `grid-template-columns: max-content auto` →
columna 1 toma el ancho del botón MÁS ANCHO (el que mande), y
ambos buttons en col 1 se estiran a ese ancho (justify-self:stretch
por defecto). Resultado: los dos botones acaban del mismo ancho
exacto desde el primer paint, sin JS, sin flicker.
`#customization-section` y `#add_to_cart` usan `display:contents`
para que sus hijos suban al grid en lugar de crear su propia caja. */
/* LAYOUT DEL BLOQUE DE BOTONES (Personalizar + Añadir al carrito).
Estructura DOM:
(display:contents)
[Personalizar] [ghost-heart]
...
...
[Añadir al carrito] [heart]
Clave: `.cust-block { width: max-content }` + `#customization-panel
{ contain: inline-size }`.
- `width: max-content` hace que el wrapper se dimensione al ancho
intrínseco del hijo más ancho.
- `contain: inline-size` en el panel le dice al browser que la
inline-size del panel NO depende de su contenido → su contribución
a max-content del padre es 0.
- Resultado: el ancho lo dicta el botón más ancho (Añadir al
carrito), y NO cambia al desplegar el panel.
En móvil pasamos a `width: 100%` para que ocupe todo el viewport. */
.cust-block {
display: flex;
flex-direction: column;
width: max-content;
max-width: 100%;
box-sizing: border-box;
margin-top: 8px;
}
.cust-block #customization-section { display: contents; }
/* Filas de botones: ambos `
` (cust-btn-row y add_to_cart) son flex
row con gap y el botón a `flex:1` para que ocupe todo menos el
heart. Como el contenedor padre (.cust-block) tiene width fija
determinada por el botón más ancho, ambos botones acaban del mismo
ancho exacto, estable y sin parpadeo. */
.cust-block .cust-btn-row {
display: flex;
align-items: center;
gap: 8px;
padding-top: 0;
padding-bottom: 4px;
margin: 0;
width: 100%;
}
/* `#add_to_cart` ya viene del tema con display:inline-flex; width:100%;
pero forzamos display:flex aquí para que el botón `flex:1 1 auto` se
resuelva bien en ambos casos. */
.cust-block #add_to_cart {
display: flex;
gap: 8px;
width: 100%;
padding-top: 0;
padding-bottom: 8px;
}
.cust-block .cust-btn-row > button.exclusive,
.cust-block #add_to_cart button.exclusive { flex: 1 1 auto; min-width: 0; }
/* Panel: `contain: inline-size` es la magia. Hace que el panel y todo
su contenido (SVG, dropdowns, etc.) NO contribuya al cálculo de
`max-content` del padre `.cust-block`. */
.cust-block #customization-panel {
width: 100%;
max-width: 100%;
box-sizing: border-box;
contain: inline-size;
margin-bottom: 8px;
}
/* Desktop: panel mas ancho que los botones (preview). El ancho de
.cust-block lo siguen dictando los botones: contain:inline-size +
% (sin min-width en px, que si entra en el max-content del padre). */
@media (min-width: 768px) {
.cust-block {
overflow: visible;
}
.cust-block #customization-panel {
contain: inline-size;
width: 175%;
max-width: 175%;
margin-left: 0;
}
}
.cust-block .customization-price { width: 100%; box-sizing: border-box; }
@media (max-width: 767px) {
.cust-block { width: 100%; }
}
/* Heart fantasma: invisible y sin interacción. Mantiene el mismo
tamaño que el heart real (mismo HTML + clases), por si en el futuro
queremos alinear visualmente algún elemento. */
.cust-heart-ghost {
visibility: hidden;
pointer-events: none;
}
/* El botón "Personalizar gorra" replica el comportamiento del de
"Añadir al carrito": hereda `.exclusive` del tema (display:block,
padding interno en , font-size 16px, border-radius 4px),
crece con su contenido y queda alineado a la izquierda — igual que
el otro. De este modo el primer pintado es ya el correcto, sin
necesidad de JS para igualar anchos.
Notas:
- NO se le añade `padding` al