/* v0.12 · 42-pdp3 — reglas nuevas de este frente (se cargan después de theme.css; al final se pegan a theme.css en este orden). */

/* ---------- Ficha de nuevos (wireframe producto-nuevo): galería ---------- */
/* Escritorio: la foto de catálogo va con aire, como mucho de 369.6px (88% de la foto de 420px del wireframe) y centrada sobre blanco. En celular manda el cuadro de 214px de theme.css */
@media (min-width:782px){.emx-pd-new .pd-gal .pd-shot img{max-width:min(100%,369.6px);max-height:min(100%,369.6px)}}
/* Miniaturas (las dos fichas del wireframe): la columna mide lo mismo que la foto principal y se desliza si hay más fotos */
.pd-thumbs{align-self:stretch;height:0;min-height:100%;overflow:hidden auto;scrollbar-width:thin}
.pd-thumbs button{flex:none}
/* Miniaturas limpias (dueño, nov 2026): sin borde negro en la elegida, sin marco gris y sin borde al pasar el puntero; con el
   teclado conserva el anillo de foco, por dentro para que la columna no lo recorte */
.pd-thumbs button,.pd-thumbs button:hover,.pd-thumbs button[aria-current="true"]{border:0;background:transparent;box-shadow:none}
.pd-thumbs button:focus-visible{outline-offset:-3px}

/* ---------- Ficha: selector de unidades (− 1 +) ---------- */
/* Botones de 48x54 y número de 28px (34x52, ícono de 14px y número de 20px en celular); la regla del carrito lateral (36x36) les ganaba */
.emx-atc .emx-qty-b{width:48px;height:54px}
.emx-atc .quantity input.qty{width:28px}
@media (max-width:781px){
	.emx-atc .emx-qty-b{width:34px;height:52px}
	.emx-atc .emx-qty-b svg{width:14px;height:14px}
	.emx-atc .quantity input.qty{width:20px}
	/* 8px entre el selector y "Comprar" también en productos con opciones */
	.emx-atc form.cart,.emx-atc .single_variation_wrap .woocommerce-variation-add-to-cart{gap:8px}
}

/* ---------- Ficha: opciones (Color, RAM, SSD) como el fieldset del wireframe ---------- */
/* Rótulo de 14px "Color: Azul" (el valor en negrilla, lo escribe product.js), 10px hasta las opciones y 26px bajo cada grupo (16px del fieldset + 10px de la caja);
   sin "Limpiar" (WooCommerce solo lo oculta con visibility y seguía ocupando su línea) */
.emx-atc table.variations,.emx-atc table.variations tbody,.emx-atc table.variations tr{display:block}
.woocommerce .emx-atc table.variations th,.woocommerce .emx-atc table.variations td{padding:0}
.emx-atc table.variations{margin:0}
.emx-atc table.variations tr{margin:0 0 26px}
.emx-atc table.variations label{display:block;margin:0 0 10px;font-size:14px;font-weight:400;line-height:1.5;color:var(--muted)}
.emx-atc table.variations label b{font-weight:700;color:var(--ink)}
.emx-atc .pd-sw,.emx-atc .pd-ch{margin:0}
.emx-atc .reset_variations{display:none!important}

/* ---------- Ficha: aviso de reserva en productos con opciones ---------- */
/* Va dentro del formulario, entre las opciones y "Comprar", con 22px hasta la fila de compra (12px del wireframe + 10px de la caja) */
.emx-atc .pd-stock{margin:0 0 22px}

/* ---------- Ficha: producto agotado o unidad vendida ---------- */
/* Botón a todo el ancho de 52px (centrado si el nombre de la categoría ocupa dos líneas); sin logos de pago ni promesas debajo (las dos fichas del wireframe) */
.pd-sold .btn{align-self:stretch;min-height:52px;text-align:center}
.pd-buy:has(> .pd-sold) > :is(.emx-pay-block,.emx-promises){display:none}

/* ---------- Ficha de nuevos: reseñas de Google ---------- */
/* Título con el estilo de subtítulo de la ficha (28px/800; 22px en celular) y 32px hasta la caja (22px en celular) */
.single-product .emx-rev-head{margin-bottom:32px}
.single-product .emx-rev-head h2{font-size:28px;font-weight:700;line-height:1.15}
@media (max-width:781px){.single-product .emx-rev-head{margin-bottom:22px}.single-product .emx-rev-head h2{font-size:22px}}

/* ---------- Ficha de nuevos: "También te recomendamos" ---------- */
/* 24px entre tarjetas en escritorio (12px en celular, como ya estaba) y 24px de la bajada a la grilla */
@media (min-width:782px){.emx-sec-pd .is-grid .emx-rail{gap:24px}}
.emx-sec-pd .is-grid .emx-rail-head{margin-bottom:24px}
/* En celular, fila deslizable y no grilla de 2 en 2 (dueño, nov 2026: alargaba mucho la página): dos tarjetas y se asoma la
   tercera, como las filas del inicio; la fila llega a los bordes de la pantalla y arranca alineada con el título */
@media (max-width:781px){
	.emx-sec-pd .is-grid .emx-rail-scroll{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--wp--style--root--padding-left,16px)) calc(-1 * var(--wp--style--root--padding-right,16px));padding:4px var(--wp--style--root--padding-right,16px) 12px var(--wp--style--root--padding-left,16px);scroll-padding-inline:var(--wp--style--root--padding-left,16px)}
	.emx-sec-pd .is-grid .emx-rail-scroll::-webkit-scrollbar{display:none}
	.emx-sec-pd .is-grid .emx-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 12px) / 2.1)}
	.emx-sec-pd .is-grid .emx-rail > li{scroll-snap-align:start}
}

/* ---------- Ficha: títulos de sección que no son bloques de título ---------- */
/* "Detalles del producto/equipo", "También te recomendamos" y "Otras … disponibles" también suben y aparecen al llegar (los observa theme.js) */
@media (prefers-reduced-motion:no-preference){
	.emx-anim .single-product .emx-sec h2.dt-t:not(.emx-in),.emx-anim .single-product .emx-sec h2.emx-rail-t:not(.emx-in){opacity:0;transform:translateY(12px)}
	.emx-anim .single-product .emx-sec h2.dt-t,.emx-anim .single-product .emx-sec h2.emx-rail-t{transition:opacity .4s ease-out,transform .4s ease-out}
}