/* =========================================================
   inlab — WooCommerce (tienda minimalista, fiel al manual).
   Blanco dominante, mucho aire, rojo solo en CTA/acentos.
   Todo el color/tipo sale de tokens.css. Se encola solo en
   páginas de tienda/carrito/checkout/cuenta.
   ========================================================= */

/* ── Contenedores de tienda ── */
.inlab-shop,
.inlab-product { padding-block: var(--space-section); }
.inlab-shop__head { margin-bottom: 2rem; }
.inlab-shop__title { font-size: var(--fs-h1); margin: 0; }

/* Quita el doble título/breadcrumb ruidoso de Woo */
.woocommerce .woocommerce-products-header { display: none; }
.woocommerce-breadcrumb { color: var(--color-text-muted); font-size: var(--fs-small); margin-bottom: 1.5rem; }

/* ── Filtro por categoría ── */
.inlab-catfilter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.inlab-catfilter__link {
	font-family: var(--font-head);
	font-weight: var(--fw-medium);
	font-size: var(--fs-small);
	color: var(--color-text);
	padding: .45em 1em;
	border: 1px solid var(--color-surface);
	border-radius: 999px;
	transition: border-color .15s ease, color .15s ease;
}
.inlab-catfilter__link:hover { color: var(--color-accent); border-color: var(--color-accent); }
.inlab-catfilter__link.is-current { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }

/* Orden/result-count discretos */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { color: var(--color-text-muted); font-size: var(--fs-small); }
.woocommerce .woocommerce-ordering select {
	font-family: var(--font-body);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius);
	padding: .5em 2em .5em .75em;
	background: var(--color-bg);
}

/* ── Catálogo: cuadrícula limpia ── */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	text-align: left;
}
.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
	margin: 0 0 1rem;
	background: var(--color-surface);
	transition: transform .2s ease;
}
.woocommerce ul.products li.product a:hover img { transform: translateY(-4px); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-head);
	font-weight: var(--fw-medium);
	font-size: 1.05rem;
	color: var(--color-text);
	padding: 0;
	margin: 0 0 .35rem;
}
.woocommerce ul.products li.product .price {
	color: var(--color-text);
	font-size: 1rem;
	font-weight: var(--fw-regular);
	margin: 0 0 .75rem;
	display: block;
}
.woocommerce ul.products li.product .price del { color: var(--color-text-muted); font-weight: 400; }
.woocommerce ul.products li.product .button { margin: 0; }
.woocommerce ul.products li.product .added_to_cart { display: inline-block; margin-left: .75rem; font-size: var(--fs-small); }
.woocommerce .star-rating { display: none; }   /* sin reseñas en catálogo, look limpio */

/* ── Producto individual: galería izquierda / resumen derecha ── */
.woocommerce div.product { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.woocommerce div.product .woocommerce-product-gallery { width: 100% !important; margin: 0 !important; float: none !important; }
.woocommerce div.product .woocommerce-product-gallery__image img { border-radius: var(--radius); background: var(--color-surface); }
.woocommerce div.product .summary { width: 100% !important; margin: 0 !important; float: none !important; }
.woocommerce div.product .product_title {
	font-family: var(--font-head);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h1);
	margin: 0 0 .5rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--color-text);
	font-size: 1.5rem;
	font-weight: var(--fw-medium);
	margin: 0 0 1.5rem;
}
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--color-text-muted); }
.woocommerce-tabs { grid-column: 1 / -1; margin-top: var(--space-section); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--color-accent); }

/* Tabla de variaciones: ocultamos la fila gris fea, dejamos el muestrario */
.woocommerce div.product form.variations_form .variations { margin: 0 0 1rem; }
.woocommerce div.product form.variations_form .variations th.label { display: none; }
.woocommerce div.product form.variations_form .variations td { padding: 0; }
.woocommerce div.product form.variations_form .reset_variations { font-size: var(--fs-small); }

/* ── Muestrario de telas (chips nativos) ── */
.inlab-hide {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.inlab-swatches { display: flex; flex-wrap: wrap; gap: .6rem; margin: .25rem 0 .25rem; }
.inlab-swatch {
	width: 42px; height: 42px;
	padding: 0;
	border-radius: var(--radius);
	border: 2px solid rgba(26, 26, 28, .12);
	background: var(--sw, var(--color-surface));
	box-shadow: inset 0 0 0 3px var(--color-bg);
	cursor: pointer;
	transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.inlab-swatch:hover { transform: translateY(-2px); }
.inlab-swatch.is-selected { border-color: var(--color-accent); box-shadow: inset 0 0 0 3px var(--color-bg); }
.inlab-swatch:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.inlab-swatch-label { font-family: var(--font-head); font-weight: var(--fw-medium); font-size: var(--fs-small); color: var(--color-text-muted); margin: .25rem 0 1rem; min-height: 1.1em; }

/* Cantidad + añadir al carrito */
.woocommerce div.product form.cart { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 0; }
.woocommerce .quantity .qty {
	width: 4.5rem;
	padding: .6em .5em;
	border: 1px solid rgba(26, 26, 28, .18);
	border-radius: var(--radius);
	font-family: var(--font-body);
	text-align: center;
}
.woocommerce div.product form.cart .button { margin: 0; }

/* Slot reservado "Ver en 3D" (Fase 2) — oculto hasta entonces */
.inlab-3d-slot { display: none; }

/* Badge de disponibilidad (cambia con la tela elegida). */
.inlab-disp { font-family: var(--font-head); font-weight: var(--fw-medium); font-size: var(--fs-small); margin: .1rem 0 1.1rem; min-height: 1.3em; display: flex; align-items: center; gap: .4rem; }
.inlab-disp.is-inmediata { color: #2E7D32; }                 /* verde sobrio = disponible ya */
.inlab-disp.is-pedido { color: var(--color-text-muted); }    /* neutro = se fabrica */

/* ── Carrito (clásico) ── */
.woocommerce table.shop_table {
	border: 1px solid var(--color-surface);
	border-radius: var(--radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.woocommerce table.shop_table th { font-family: var(--font-head); font-weight: var(--fw-medium); background: var(--color-surface); }
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { padding: 1rem; }
.woocommerce a.remove { color: var(--color-text-muted); font-weight: 400; }
.woocommerce a.remove:hover { color: var(--color-accent); background: transparent; }
.woocommerce .cart-collaterals .cart_totals > h2 { font-family: var(--font-head); font-weight: var(--fw-medium); font-size: 1.25rem; }
.woocommerce .cart-collaterals .cart_totals { border: 1px solid var(--color-surface); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.woocommerce .wc-proceed-to-checkout .checkout-button { display: block; text-align: center; }

/* ── Checkout (clásico): una columna, aire ── */
.woocommerce-checkout .col2-set,
.woocommerce-page.woocommerce-checkout #customer_details.col2-set { width: 100%; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading { width: 100% !important; float: none !important; }
.woocommerce-checkout #order_review { margin-top: 2rem; border: 1px solid var(--color-surface); border-radius: var(--radius); padding: 1.5rem; }
.woocommerce form .form-row { margin-bottom: 1rem; }
.woocommerce form .form-row label { font-family: var(--font-head); font-weight: var(--fw-medium); font-size: var(--fs-small); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row .select2-container .select2-selection {
	border: 1px solid rgba(26, 26, 28, .18);
	border-radius: var(--radius);
	padding: .7em .85em;
}
.woocommerce #payment, .woocommerce-checkout #payment { background: var(--color-surface); border-radius: var(--radius); }
.woocommerce-info, .woocommerce-message { border-top-color: var(--color-accent); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--color-accent); }

/* ── Mensajes / notices: acento de marca ── */
.woocommerce .woocommerce-error { border-top-color: var(--color-accent); }

/* ── Responsive ── */
@media (max-width: 900px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
	.woocommerce div.product { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: 1fr; }
}

/* =========================================================
   PRODUCTO tipo LANDING (PDP): hero (galería + resumen sticky) +
   secciones (cualidades, bandas con parallax, ficha, reseñas, CTA) +
   barra de compra sticky. Todo desde tokens.
   ========================================================= */

/* Hero: resumen STICKY en desktop → "Agregar al carrito" siempre a la mano. */
.single-product div.product .summary { position: sticky; top: 1.5rem; align-self: start; }
/* La disponibilidad nativa de la variación la cubre nuestro badge. */
.woocommerce-variation-availability { display: none; }
.woocommerce div.product form.cart .single_add_to_cart_button { padding: 1em 2.2em; font-size: 1.05rem; }

/* Las secciones añadidas ocupan todo el ancho del grid del producto. */
.pdp-section, .pdp-bands { grid-column: 1 / -1; }

/* 1) Cualidades / beneficios */
.pdp-quals { border-block: 1px solid var(--color-surface); margin-top: var(--space-section); }
.pdp-quals__grid { list-style: none; margin: 0; padding-block: 1.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 1.5rem; }
.pdp-qual { display: flex; align-items: center; justify-content: center; gap: .55rem; text-align: center; font-family: var(--font-head); font-weight: var(--fw-medium); font-size: var(--fs-small); }
.pdp-qual__icon { flex: none; width: 24px; height: 24px; color: var(--color-text-muted); }

/* 2) Bandas de galería con parallax PRO — FULL-BLEED (100vw) como la home.
   overflow-x:clip en el main del producto contiene el desborde del 100vw SIN romper
   el position:sticky del resumen (clip no crea contenedor de scroll, a diferencia de hidden). */
.single-product .site-main { overflow-x: clip; }
.pdp-bands { margin-block: var(--space-section); display: grid; gap: 0; }
.pdp-band { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: 80vh; min-height: 420px; overflow: hidden; background: var(--color-surface); }
.pdp-band__media { position: absolute; top: -30%; bottom: -30%; left: 0; right: 0; will-change: transform; }
.pdp-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 3) Medidas y materiales (ficha) */
.pdp-specs { padding-block: var(--space-section); }
.pdp-specs__title { font-size: var(--fs-h2); margin: 0 0 1.5rem; }
.pdp-specs__list { margin: 0; max-width: 760px; }
.pdp-specs__row { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--color-surface); }
.pdp-specs__row dt { font-family: var(--font-head); font-weight: var(--fw-medium); margin: 0; }
.pdp-specs__row dd { margin: 0; color: var(--color-text-muted); }

/* 4) Reseñas (on-brand) */
.pdp-reviews { padding-block: var(--space-section); }
.pdp-reviews .woocommerce-Reviews-title, .pdp-reviews #reply-title { font-family: var(--font-head); font-weight: var(--fw-medium); }

/* 5) CTA final */
.pdp-final { background: var(--color-surface); }
.pdp-final__inner { padding-block: var(--space-section); text-align: center; }
.pdp-final__title { font-size: var(--fs-h1); margin: 0 0 .5rem; }
.pdp-final__copy { color: var(--color-text-muted); max-width: 46ch; margin: 0 auto 1.75rem; }

/* 6) Barra de compra sticky (fija abajo) — sobre todo en móvil. */
.pdp-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--color-bg); border-top: 1px solid var(--color-surface); box-shadow: 0 -6px 24px rgba(26, 26, 28, .10); }
.pdp-buybar[hidden] { display: none; }
.pdp-buybar__inner { max-width: 1200px; margin-inline: auto; padding: .7rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
.pdp-buybar__name { font-family: var(--font-head); font-weight: var(--fw-medium); }
.pdp-buybar__price { margin-left: auto; font-weight: var(--fw-medium); }
.pdp-buybar__price .price, .pdp-buybar__price del { color: var(--color-text); }
.pdp-buybar__btn { white-space: nowrap; }

/* Reveals (fade-up) — solo cuando el JS añade la clase (sin JS → visible). */
.inlab-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.inlab-reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 900px) {
	.single-product div.product .summary { position: static; }
	.pdp-quals__grid { grid-template-columns: repeat(2, 1fr); }
	.pdp-band { height: 52vh; }
	.pdp-specs__row { grid-template-columns: 1fr; gap: .15rem; }
	body.single-product { padding-bottom: 76px; }   /* hueco para la buybar */
}
@media (min-width: 901px) {
	.pdp-buybar { display: none; }                   /* en desktop basta el resumen sticky */
}