/* ==========================================================================
   BrandTienda — estilos SOLO de tienda: ficha de producto, carrito, checkout,
   mi cuenta. Se encola aparte (inc/enqueue.php) únicamente en contexto Woo,
   después de theme.css; en el editor se carga siempre junto con theme.css.
   Lo que también se usa fuera de la tienda (grillas de productos, botones,
   avisos, mini-cart, ul.products de shortcodes) sigue en theme.css.
   ========================================================================== */

/* --------------------------------------------------- Producto individual. */
.woocommerce div.product { display: grid; }

@media (width > 782px) {
	.woocommerce div.product {
		/* Galería protagonista (~57%), summary con aire real (~43%). */
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: clamp(2.5rem, 5vw, 4.5rem);
		align-items: start;
	}
	/* Woo mete width:48% (float) en galería y resumen; dentro del grid ese
	   % se resuelve contra la columna y encoge la foto a ~50%. 100% llena. */
	.woocommerce div.product .woocommerce-product-gallery,
	.woocommerce div.product .summary.entry-summary {
		width: 100% !important;
		float: none !important;
	}
	/* align-self:start alinea la galería al top del grid (igual que el resumen);
	   sin el sticky+top:92px que degradaba a relative y la empujaba 92px abajo,
	   desalineándola del título. */
	.woocommerce div.product .woocommerce-product-gallery { align-self: start; margin: 0; }
	/* La columna resumen respira: padding y separación entre bloques. */
	.woocommerce div.product .summary {
		margin: 0 !important;
		display: flex;
		flex-direction: column;
		gap: 1.15rem;
	}
	.woocommerce div.product .summary > * { margin: 0; }
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells,
	.woocommerce div.product .brandtienda-upsell-wrap,
	.woocommerce div.product .brandtienda-slot { grid-column: 1 / -1; }
}

/* La imagen llena su columna: pasa de verse chica a protagonista. */
.woocommerce div.product .woocommerce-product-gallery__image img { border-radius: var(--bt-r-lg); }

.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image { width: 100%; }

.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .wp-post-image { width: 100%; height: auto; }

.woocommerce div.product .product_title { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 0 0 .5rem; }

.woocommerce div.product p.price, .woocommerce div.product span.price {
	color: var(--bt-ink); font-weight: 800; font-size: 1.6rem;
}

.woocommerce div.product p.price ins { text-decoration: none; color: var(--bt-primary); }

.woocommerce div.product p.price del { color: var(--bt-muted); font-weight: 400; font-size: 1.1rem; }

.woocommerce div.product form.cart { margin: 1.25rem 0; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

.woocommerce div.product form.cart .quantity input {
	height: 48px; width: 72px; border: 1px solid var(--bt-line); border-radius: var(--bt-r-pill); text-align: center; background: var(--wp--preset--color--base, #fff);
}

.woocommerce div.product .single_add_to_cart_button { height: 48px; padding-inline: 2rem; }

.woocommerce div.product .woocommerce-tabs ul.tabs { border: 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border: 1px solid var(--bt-line); border-radius: var(--bt-r-pill); background: transparent; padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--bt-ink); border-color: var(--bt-ink); }

.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: .5rem 1.1rem; font-weight: 600; }

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--primary-ink, #fff); }

/* Sticky add-to-cart en mobile. */
@media (width <= 782px) {
	.bt-sticky-atc {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
		display: flex; gap: .75rem; align-items: center; justify-content: space-between;
		padding: .7rem 1rem; background: var(--wp--preset--color--base, #fff); border-top: 1px solid var(--bt-line);
		box-shadow: 0 -6px 20px rgba(16,24,32,.08);
		transform: translateY(120%); transition: transform var(--bt-t);
	}
	.bt-sticky-atc.is-visible { transform: none; }
	.bt-sticky-atc__price { font-weight: 800; }
	.bt-sticky-atc__btn { flex: 1; max-width: 60%; text-align: center; }
}

/* ------------------------------------------------------ Carrito / checkout. */
.woocommerce table.shop_table {
	border: 1px solid var(--bt-line); border-radius: var(--bt-r-lg); border-collapse: separate; border-spacing: 0; overflow: clip;
}

.woocommerce table.shop_table th { background: var(--bt-surface); font-weight: 600; }

.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-top: 1px solid var(--bt-line); padding: 1rem; }

.woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #order_review {
	border: 1px solid var(--bt-line); border-radius: var(--bt-r-lg); padding: 1.25rem; background: var(--wp--preset--color--base, #fff);
}

.woocommerce form .form-row input.input-text:focus, .woocommerce-checkout .input-text:focus {
	border-color: var(--bt-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bt-primary) 18%, transparent);
	outline: none;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table { font-size: .95rem; }

.woocommerce #payment, .wc-block-checkout__form { border-radius: var(--bt-r-lg); }

/* Carrito/checkout anchos (≥70% del viewport en escritorio) para que las dos
   columnas respiren y el resumen no colapse. */
.bt-checkout-wide > * { max-width: min(1320px, 82vw); }

@media (max-width: 1024px) { .bt-checkout-wide > * { max-width: 100%; } }

/* Proporción de columnas y ancho mínimo del resumen (anti-colapso). */
@media (min-width: 1025px) {
	.wc-block-checkout__sidebar { flex-basis: 34% !important; min-width: 340px; }
	.wc-block-checkout__main { flex-basis: 62% !important; }
	.wp-block-woocommerce-cart .wc-block-cart__sidebar { min-width: 320px; }
}

/* Checkout de bloques (Gutenberg) — el que convierte. */
.wc-block-checkout__sidebar .wc-block-components-order-summary,
.wc-block-checkout__sidebar > .wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block {
	border: 1px solid var(--bt-line);
	border-radius: var(--bt-r-lg);
	background: var(--wp--preset--color--base, #fff);
}

.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus {
	border-color: var(--bt-primary) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bt-primary) 16%, transparent) !important;
}

.wc-block-components-text-input.is-active label,
.wc-block-checkout__actions .wc-block-components-checkout-step__title { color: var(--bt-primary); }

/* Botón de finalizar (con el monto vía placeOrderButtonLabel). */
.wc-block-components-checkout-place-order-button {
	border-radius: var(--bt-r-pill) !important;
	background: var(--bt-primary) !important;
	font-weight: 700 !important;
	min-height: 52px;
	transition: transform var(--bt-t), background var(--bt-t) !important;
}

.wc-block-components-checkout-place-order-button:hover { transform: translateY(-1px); background: var(--bt-ink) !important; }

/* Express pay (Apple/Google/Mercado Pago) — separador prolijo. */
.wc-block-components-express-payment { margin-bottom: 1rem; }

.wc-block-components-express-payment__title-container { color: var(--bt-muted); }

/* Mi cuenta. */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block; padding: .6rem .9rem; border-radius: var(--bt-r-md); text-decoration: none; color: var(--bt-ink); transition: background var(--bt-t);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--bt-surface); }

/* ------------------------------- Producto: secciones revestidas. */
/* Related y upsells (Combina con) dejan de flotar en blanco: banda con
   fondo teñido de marca, radio grande y título estilo section-head. */
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .brandtienda-upsell-wrap {
	background: color-mix(in srgb, var(--bt-primary) 5%, var(--wp--preset--color--base, #fff));
	border-radius: var(--bt-r-lg);
	padding: clamp(1.25rem, 3vw, 2rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* La lista de relacionados ocupa todo el ancho de su banda. */
.woocommerce div.product .related ul.products,
.woocommerce div.product .upsells ul.products {
	margin: 0;
	width: 100%;
}

/* Tabs con aire propio. */
.woocommerce div.product .woocommerce-tabs { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* --- Resumen del pedido (checkout de bloques). ---
   El panel trae `padding: 0 16px`: aire a los costados pero NADA arriba ni
   abajo, así que la foto del primer producto y el último elemento quedaban
   tocando el borde redondeado. El radio se nota justo ahí, y sin margen interno
   la caja se lee apretada. */
.wc-block-components-order-summary {
	padding-block: 1rem;
}

/* Separación entre productos: sin esto quedan pegados uno arriba del otro. */
.wc-block-components-order-summary-item + .wc-block-components-order-summary-item {
	margin-block-start: 1rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--bt-line);
}

/* La miniatura no puede desbordar el borde del panel. */
.wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__image img {
	max-inline-size: 100%;
}