/* Baby Bloom — WooCommerce: tarjetas de producto, grid, insignias, encabezado.
   Reemplaza el archivo anterior (que usaba variables inexistentes). */

/* ---- Botones de marca ---- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
	border-radius: var(--bb-radius-full);
	font-family: var(--bb-font-body); font-weight: 500;
	background-color: var(--bb-action-primary); color: #fff;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover, .woocommerce #respond input#submit:hover {
	background-color: var(--bb-action-primary-hover); color: #fff;
}
.woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible {
	outline: 2px solid var(--bb-focus-ring); outline-offset: 2px;
}

/* ---- Aviso de demostración ---- */
.bb-demo-notice {
	background: var(--bb-calma-100); color: var(--bb-confianza-900);
	border-radius: var(--bb-radius-md); padding: .8rem 1.1rem; margin: 0 auto 1.4rem;
	max-width: 1240px; font-size: .9rem;
}

/* ---- Encabezado de la tienda ---- */
.bb-shop-head { text-align: center; max-width: 1240px; margin: 0 auto 1.6rem; padding: .5rem 24px 0; }
.bb-shop-head .bb-kicker { display: block; margin-bottom: 10px; }
.bb-shop-head h1 { font-family: var(--bb-font-heading); font-size: var(--bb-text-3xl); color: var(--bb-ink); line-height: 1.2; margin: 0 0 .6rem; }
.bb-shop-head__lead { color: var(--bb-text-muted); max-width: 60ch; margin: 0 auto; line-height: 1.6; }
.bb-shop-head__note { margin: 1rem auto 0; max-width: 62ch; background: var(--bb-alegria-100); color: var(--bb-alegria-700); padding: .6rem 1rem; border-radius: var(--bb-radius-sm); font-size: .88rem; }

/* ---- Chips de categoría ---- */
.bb-shop-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1.2rem auto 0; max-width: 1240px; padding: 0 24px; }
.bb-shop-chips--cat { margin-bottom: 1.4rem; }
.bb-chip { padding: .4rem .95rem; border-radius: var(--bb-radius-full); border: 1px solid var(--bb-border-default);
	color: var(--bb-text-link); font-size: .9rem; font-weight: 500; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; transition: background-color .15s ease, color .15s ease; }
.bb-chip:hover, .bb-chip:focus-visible { background: var(--bb-confianza-100); color: var(--bb-confianza-700); }
.bb-chip:focus-visible { outline: 2px solid var(--bb-focus-ring); outline-offset: 2px; }
.bb-chip.is-active { background: var(--bb-confianza); color: #fff; border-color: var(--bb-confianza); }

/* ---- Grid de productos ---- */
.woocommerce ul.products, .woocommerce-page ul.products {
	display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 28px;
	margin: 0 auto !important; padding: 0; max-width: 1240px; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; display: none !important; }
@media (max-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 782px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 480px)  { .woocommerce ul.products { grid-template-columns: 1fr; } }

/* ---- Tarjeta ---- */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
	position: relative; width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
	background: #fff; border: 1px solid var(--bb-border-subtle); border-radius: var(--bb-radius-md);
	box-shadow: var(--bb-shadow-sm); overflow: hidden; padding: 0; display: flex; flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--bb-shadow-md); }
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex; flex-direction: column; flex: 1 1 auto; text-decoration: none;
}
.woocommerce ul.products li.product > a:focus-visible { outline: 2px solid var(--bb-focus-ring); outline-offset: -2px; }
.woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1; object-fit: contain; width: 100%; height: auto; margin: 0 !important;
	background: var(--bb-gris-100); padding: 16px; box-sizing: border-box;
}
.woocommerce ul.products li.product .bb-card-cat {
	display: block; padding: 12px 14px 0; font-size: .76rem; color: var(--bb-text-muted);
	text-transform: uppercase; letter-spacing: .05em;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--bb-font-heading); font-size: 1rem; color: var(--bb-ink); line-height: 1.3;
	padding: 4px 14px 0 !important; margin: 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em;
}
.woocommerce ul.products li.product .price {
	padding: 6px 14px !important; margin: 0; color: var(--bb-ink); font-weight: 600; font-size: 1rem;
}
.woocommerce ul.products li.product .price del { color: var(--bb-text-muted); font-weight: 400; opacity: 1; margin-right: .4rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--bb-amor-700); font-weight: 700; }
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart {
	margin: auto 14px 14px !important; text-align: center; justify-content: center;
}
.woocommerce ul.products li.product.outofstock .button { background: var(--bb-confianza); }

/* ---- Insignias ---- */
.bb-card-badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.bb-badge-demo, .bb-badge-sale, .bb-badge-stock, .bb-badge-soon {
	font-family: var(--bb-font-body); font-size: .7rem; font-weight: 600; letter-spacing: .05em;
	padding: .25rem .6rem; border-radius: var(--bb-radius-full); line-height: 1.4;
}
.bb-badge-demo { background: var(--bb-confianza); color: #fff; }
.bb-badge-sale { background: var(--bb-alegria); color: var(--bb-ink); }
.bb-badge-stock { background: var(--bb-gris-300); color: var(--bb-gris-700); }
.bb-badge-soon { background: var(--bb-alegria); color: var(--bb-ink); font-weight: 700; }
.woocommerce span.onsale { display: none; } /* usamos nuestra insignia de oferta */

/* ---- Ficha individual ---- */
.woocommerce div.product { position: relative; }
/* El título del producto puede ser largo: que rompa por palabra y nunca desborde. */
.woocommerce div.product .product_title,
.single-product .entry-title { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; }
.woocommerce div.product .summary,
.woocommerce div.product .entry-summary { max-width: 100%; box-sizing: border-box; }
.bb-badge-demo--single { position: absolute; top: 12px; left: 12px; z-index: 3; }
.bb-badge-soon--single {
	position: absolute; top: 12px; left: 12px; z-index: 3;
	font-family: var(--bb-font-body); font-size: .78rem; font-weight: 700; letter-spacing: .05em;
	padding: .3rem .8rem; border-radius: var(--bb-radius-full);
	background: var(--bb-alegria); color: var(--bb-ink);
}
/* Aviso "Muy pronto" en la ficha, donde iría el botón de compra. */
.bb-soon-note {
	margin: 1.2rem 0 0; padding: .9rem 1.1rem; border-radius: var(--bb-radius-md);
	background: var(--bb-alegria-100); color: var(--bb-alegria-700);
	font-weight: 600; line-height: 1.5;
}
.woocommerce div.product div.images img { border-radius: var(--bb-radius-md); background: var(--bb-gris-100); }

/* ---- Tienda full-width (sin sidebar de Storefront) ---- */
.bb-shop-full .content-area { width: 100%; float: none; margin: 0; }
.bb-shop-full #secondary, .woocommerce.archive #secondary { display: none; }
.bb-shop-full .col-full { max-width: 1240px; }
.bb-footer { clear: both; }
.bb-shop-full .content-area { width: 100% !important; float: none !important; }
.bb-shop-full #content .col-full::after { content: ""; display: table; clear: both; }
.bb-shop-full #content { overflow: hidden; }

/* Ficha de producto a ancho normal: no ocupa los 1240px de la tienda; se acota y
   centra (sin regresar el sidebar de Storefront) para una lectura más cómoda.
   Con padding lateral para que en móvil el contenido no toque el borde. */
.single-product.bb-shop-full .content-area {
	max-width: 1080px; margin-left: auto; margin-right: auto;
	padding-left: 16px; padding-right: 16px; box-sizing: border-box;
}
/* Evita el desbordamiento horizontal de la galería en móvil. */
.single-product.bb-shop-full div.product { overflow-x: hidden; }

/* ---- Barra de herramientas del catálogo (conteo + orden) ---- */
/* `.storefront-sorting` es el wrapper que Storefront imprime antes de `ul.products`
   y es HERMANO directo del grid. Se le da EXACTAMENTE la misma caja que al grid
   (max-width 1240px, sin padding lateral, centrado) para que el conteo quede a ras
   de la primera tarjeta y el selector a ras de la última.
   El DOM real es: [.woocommerce-notices-wrapper (vacío)] [form.woocommerce-ordering]
   [p.woocommerce-result-count]. Con `order` se coloca el conteo a la izquierda y el
   selector a la derecha sin depender del orden del DOM ni usar position/left/right;
   `margin-right:auto` en el conteo empuja el selector al borde derecho. El wrapper de
   avisos se reordena a una fila propia (no se oculta para no suprimir notices). */
.woocommerce .storefront-sorting, .woocommerce-page .storefront-sorting {
	max-width: 1240px; margin: 0 auto 1.4rem; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center;
	column-gap: 24px; row-gap: 0; clear: both; box-sizing: border-box;
}
/* Storefront añade un clearfix `::before/::after` (content:''; display:table) que, al
   ser el contenedor un flex, se convierte en ítems flex y desplazaba el conteo ~48px.
   Se neutralizan, igual que en `ul.products`, para que el conteo arranque a ras de la
   primera tarjeta. */
.woocommerce .storefront-sorting::before, .woocommerce .storefront-sorting::after,
.woocommerce-page .storefront-sorting::before, .woocommerce-page .storefront-sorting::after {
	content: none !important; display: none !important;
}
.woocommerce .woocommerce-result-count {
	order: 1; margin: 0 auto 0 0; color: var(--bb-text-muted); font-size: .9rem;
}
.woocommerce .woocommerce-ordering { order: 2; margin: 0; }
.woocommerce .storefront-sorting .woocommerce-notices-wrapper { order: 3; width: 100%; }
.woocommerce .woocommerce-ordering select {
	border-radius: var(--bb-radius-full); border: 1px solid var(--bb-border-default);
	padding: .5rem 1rem; min-height: 44px; font: inherit; color: var(--bb-ink); background: #fff;
}
@media (max-width: 600px) {
	.woocommerce .storefront-sorting, .woocommerce-page .storefront-sorting { row-gap: .6rem; }
	.woocommerce .woocommerce-result-count { width: 100%; margin: 0; text-align: left; }
	.woocommerce .woocommerce-ordering, .woocommerce .woocommerce-ordering select { width: 100%; }
}
/* Tras agregar al carrito, oculta el enlace "Ver carrito" extra dentro de la tarjeta
   (lo añade el JS de WooCommerce). El feedback se da en el contador del header. */
.woocommerce ul.products a.added_to_cart { display: none !important; }

/* ---- Página del carrito: contenedor centrado (~80% en escritorio) ---- */
/* WooCommerce 10 usa el Cart Block (.wp-block-woocommerce-cart, .alignwide), que por
   defecto va de borde a borde (full-bleed). En móvil/tablet ocupa todo el ancho;
   desde 783px se acota al 80% y se centra, anulando el comportamiento alignwide. */
.woocommerce-cart.bb-shop-full .wp-block-woocommerce-cart {
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
@media (max-width: 782px) {
	.woocommerce-cart.bb-shop-full .wp-block-woocommerce-cart { padding-left: 16px; padding-right: 16px; }
}
/* Pantallas muy angostas (≤400px): la columna de total + el badge de oferta del
   item ("Ahorra $X") forzaban overflow horizontal. Se reduce el padding lateral y
   se permite que el badge y el precio se ajusten sin empujar el ancho. */
@media (max-width: 400px) {
	.woocommerce-cart.bb-shop-full .wp-block-woocommerce-cart { padding-left: 10px; padding-right: 10px; }
	.woocommerce-cart .wc-block-cart-item__total { min-width: 0; padding-left: 6px; }
	.woocommerce-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper { min-width: 0; }
	.woocommerce-cart .wc-block-components-sale-badge { white-space: normal; }
}
@media (min-width: 783px) {
	.woocommerce-cart.bb-shop-full .wp-block-woocommerce-cart {
		width: 80%;
		max-width: 1120px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ---- Título "Carrito": mismo contenedor que el Cart Block ---- */
/* DOM real: article#post-7 > header.entry-header > h1.entry-title  +  .entry-content
   > .wp-block-woocommerce-cart. El título es HERMANO del Cart Block y, por defecto,
   ocupa todo el ancho del contenido (queda más a la izquierda que la tabla, que está
   acotada al 80%/1120px centrado). Se le da al `.entry-header` la MISMA caja que al
   Cart Block en cada breakpoint para que el borde izquierdo del título coincida con
   el de la tabla ("Producto"). Solo width/max-width/margin/padding; no se toca la
   tipografía ni el tamaño. */
.woocommerce-cart.bb-shop-full .entry-header {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.75rem;
	box-sizing: border-box;
}
.woocommerce-cart.bb-shop-full .entry-title { margin: 0; }
@media (max-width: 782px) {
	.woocommerce-cart.bb-shop-full .entry-header { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 400px) {
	.woocommerce-cart.bb-shop-full .entry-header { padding-left: 10px; padding-right: 10px; }
}
@media (min-width: 783px) {
	.woocommerce-cart.bb-shop-full .entry-header {
		width: 80%;
		max-width: 1120px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ---- Página de checkout: contenedor centrado ---- */
/* Checkout Block (.wp-block-woocommerce-checkout, .alignwide), también full-bleed.
   Se centra sin tocar header/footer ni otras páginas. Conserva sus 2 columnas
   (.wc-block-checkout__main + .wc-block-checkout__sidebar) en escritorio y colapsa
   a una columna en móvil por su propio responsive. Solo width/max-width/margin. */
.woocommerce-checkout.bb-shop-full .wp-block-woocommerce-checkout {
	margin-inline: auto;
	box-sizing: border-box;
}
@media (max-width: 767px) {
	.woocommerce-checkout.bb-shop-full .wp-block-woocommerce-checkout {
		width: calc(100% - 32px);
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.woocommerce-checkout.bb-shop-full .wp-block-woocommerce-checkout {
		width: 90%;
		max-width: 1120px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}
@media (min-width: 1024px) {
	.woocommerce-checkout.bb-shop-full .wp-block-woocommerce-checkout {
		width: 80%;
		max-width: 1120px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ---- Título "Finalizar compra": mismo contenedor que el Checkout Block ---- */
/* Igual que en el carrito, el título (header.entry-header > h1.entry-title) es
   HERMANO del Checkout Block y por defecto ocupa todo el ancho del contenido,
   quedando desalineado a la izquierda del formulario (que está acotado y centrado).
   Se le da al `.entry-header` la MISMA caja que al Checkout Block en cada breakpoint.
   Solo width/max-width/margin/padding; no se toca la tipografía. */
.woocommerce-checkout.bb-shop-full .entry-header {
	margin-inline: auto;
	margin-bottom: 1.75rem;
	box-sizing: border-box;
}
.woocommerce-checkout.bb-shop-full .entry-title { margin: 0; }
@media (max-width: 767px) {
	.woocommerce-checkout.bb-shop-full .entry-header { width: calc(100% - 32px); }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.woocommerce-checkout.bb-shop-full .entry-header {
		width: 90%;
		max-width: 1120px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}
@media (min-width: 1024px) {
	.woocommerce-checkout.bb-shop-full .entry-header {
		width: 80%;
		max-width: 1120px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ---- Indicador de cantidad en el carrito (tarjeta de producto) ---- */
/* Esquina superior derecha del área de imagen (las insignias DEMO/oferta van a la
   izquierda; no se superponen). Oculto cuando la cantidad es 0. */
.woocommerce ul.products li.product .bb-card-qty {
	display: none;
	position: absolute; top: 10px; right: 10px; z-index: 3;
	min-width: 36px; height: 36px; padding: 0 6px; box-sizing: border-box;
	border-radius: var(--bb-radius-full);
	background: var(--bb-amor-700); color: #fff;
	font-family: var(--bb-font-body); font-weight: 700; font-size: .95rem; line-height: 1;
	align-items: center; justify-content: center; text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.woocommerce ul.products li.product .bb-card-qty.is-filled { display: inline-flex; }
/* Dos o más dígitos: cápsula para no deformar el círculo. */
.woocommerce ul.products li.product .bb-card-qty.is-wide { padding: 0 11px; }

/* ---- Estado sutil de la tarjeta con producto en el carrito ---- */
.woocommerce ul.products li.product.bb-product-in-cart {
	border-color: var(--bb-amor);
	box-shadow: 0 6px 16px rgba(177, 70, 129, .14);
}

/* -------------------------------------------------------------------------
 * Página "Pedido recibido" (order-received / thank you).
 * Columna centrada (título incluido), SIN tarjeta: bloques planos separados
 * por reglas finas, estilo recibo. Acotado a body.woocommerce-order-received.
 * ---------------------------------------------------------------------- */
/* Centra TODO el artículo (título + contenido), no solo el contenido. */
.woocommerce-order-received .site-main .hentry {
	max-width: 600px;
	margin: 0 auto;
	padding: 0 20px;
}
.woocommerce-order-received .entry-header { margin-bottom: 1.2rem; }
.woocommerce-order-received .entry-title {
	font-family: var(--bb-font-heading);
	text-align: left;
	margin: 0;
}
/* "Gracias, tu pedido ha sido recibido": línea simple, sin caja. */
.woocommerce-order-received .woocommerce-notice--success {
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 1.8rem;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--bb-equilibrio-700);
}
.woocommerce-order-received .woocommerce-notice--success::before { content: none; }

/* Bloque 1 — Resumen (nº, fecha, total, método): filas etiqueta / valor. */
.woocommerce-order-received ul.woocommerce-order-overview {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	border: 0;
}
.woocommerce-order-received ul.woocommerce-order-overview li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .55rem 0;
	border: 0;
	border-bottom: 1px solid var(--bb-border-subtle);
	font-size: .95rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--bb-text-muted);
}
.woocommerce-order-received ul.woocommerce-order-overview li strong {
	text-align: right;
	font-weight: 700;
	color: var(--bb-text-default);
}

/* Bloques 2 y 3 — Detalles del pedido y Direcciones: separados por regla. */
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details {
	margin-top: 2rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--bb-border-default);
}
.woocommerce-order-received h2 {
	font-family: var(--bb-font-heading);
	font-size: var(--bb-text-xl);
	color: var(--bb-text-heading);
	margin: 0 0 1rem;
}
/* Tabla de detalle: plana, filas con línea inferior; valores a la derecha. */
.woocommerce-order-received table.shop_table,
.woocommerce-order-received table.woocommerce-table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
}
.woocommerce-order-received table.shop_table th,
.woocommerce-order-received table.shop_table td {
	padding: .6rem 0;
	border: 0;
	border-bottom: 1px solid var(--bb-border-subtle);
	text-align: left;
	vertical-align: top;
}
.woocommerce-order-received table.shop_table th:last-child,
.woocommerce-order-received table.shop_table td:last-child { text-align: right; }
.woocommerce-order-received table.shop_table tfoot th,
.woocommerce-order-received table.shop_table tfoot td { font-weight: 700; }
/* Direcciones: texto plano, sin caja. */
.woocommerce-order-received .woocommerce-customer-details address {
	border: 0;
	padding: 0;
	font-style: normal;
	line-height: 1.7;
	color: var(--bb-text-default);
}