/* Noble Venta — estilos sobre el markup nativo de WooCommerce.
   Traduce el sistema de diseño de theme.json a los componentes de Woo
   (loop de tienda, ficha de producto, carrito) sin reemplazar su HTML.

   WooCommerce carga su propio CSS clásico (woocommerce-layout.css) con
   grillas basadas en float + width en porcentaje, sin !important. Para
   que nuestra grilla real (CSS grid) gane siempre sin depender del orden
   de carga de los stylesheets, los resets de float/width/margin sí llevan
   !important — son resets neutros, no estética, así que no hay conflicto
   real con nada más. */

/* N° de registro ANMAT/RNPA — junto al precio en la ficha de producto */
.nv-anmat {
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-soft);
	margin-top: -8px;
	margin-bottom: 16px;
}

/* Flexbox en vez de grid: con grid, un template de 4 columnas fijas deja
   pistas vacías (y por lo tanto espacio muerto) cuando hay menos de 4
   productos — pasa seguido en "Promociones" o en categorías con poco
   catálogo. Con flex-wrap + justify-content:center, las tarjetas que haya
   se acomodan centradas sin depender de cuántas entren en la fila. */
.woocommerce ul.products {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0 0 2em;
}

/* WooCommerce agrega ::before/::after de clearfix (display:table) al <ul> para
   su grilla clásica basada en floats. Dentro de un grid CSS, esos pseudo-
   elementos se cuentan como una celda más y corren todos los productos un
   lugar — por eso el primer producto aparecía en la 2da columna. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none !important;
	display: none !important;
}

.woocommerce ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	flex: 0 1 260px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 16px;
	position: relative;
	display: flex;
	flex-direction: column;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	box-shadow: 0 1px 3px rgba(15, 57, 53, 0.04), 0 4px 12px rgba(15, 57, 53, 0.03);
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -4px rgba(15, 57, 53, 0.1), 0 2px 6px -1px rgba(15, 57, 53, 0.05);
}

/* Imagen de producto en tarjeta: caja con fondo parejo (no la foto a sangre
   completa) e imagen contenida adentro con un poco de aire — como catálogo
   de tienda real, no como un banner. Un pequeño zoom al pasar el mouse le
   da vida sin mover el layout (el que se agranda es solo el contenido de
   adentro, la caja/el radio quedan fijos gracias al overflow:hidden). */
.woocommerce ul.products li.product > a:first-child {
	display: block;
	overflow: hidden;
	border-radius: 10px;
	background: var(--wp--preset--color--paper);
}
.woocommerce ul.products li.product a img {
	background: transparent;
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: contain;
	padding: 16px;
	box-sizing: border-box;
	transition: transform 0.25s ease;
}
.woocommerce ul.products li.product:hover a img {
	transform: scale(1.06);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	margin: 10px 0 4px;
	min-height: 2.6em;
}

.woocommerce ul.products li.product .price {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
	margin-bottom: 10px;
}

.woocommerce ul.products li.product .price del {
	color: var(--wp--preset--color--ink-soft);
	opacity: 0.7;
	font-weight: 400;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button {
	margin-top: auto;
}

/* Fila de badges arriba de la imagen: categoría a la izquierda, N° ANMAT
   (si el producto lo tiene cargado) a la derecha. La fila se posiciona
   absoluta sobre la imagen; sus hijos van en flujo normal dentro de ella. */
.nv-product-badge-row {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.nv-audience-pill {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 5px 12px;
	border-radius: 999px;
}
.nv-anmat-badge {
	font-size: 0.65rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 4px 10px;
	white-space: nowrap;
}
.nv-audience-pill--humanos {
	background: var(--wp--preset--color--humanos-mist);
	color: var(--wp--preset--color--humanos);
}
.nv-audience-pill--mascotas {
	background: var(--wp--preset--color--mascotas-mist);
	color: var(--wp--preset--color--mascotas);
}
.nv-audience-pill--neutral {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink-soft);
	border: 1px solid var(--wp--preset--color--border);
}

/* Botones: agregar al carrito / ver producto (clásico y bloques) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.wc-block-components-product-button__button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	border: none;
	border-radius: 10px;
	font-weight: 600;
	font-size: 0.86rem;
	padding: 10px 16px;
	width: 100%;
	text-align: center;
	line-height: 1.3;
	white-space: normal;
	transition: background 0.15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--primary-hover);
	color: var(--wp--preset--color--surface);
}

/* Categorías de producto (archivo) */
.woocommerce-products-header__title.page-title {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--primary);
}

/* Catálogo de categoría, "Los más elegidos" y "Promociones" — usa el bloque
   "Product Collection" de WooCommerce en vez del loop clásico, con sus
   propias clases. Mismo criterio que el loop clásico: flex en vez de grid
   para que se centre solo con pocos productos (ver nota arriba en
   ".woocommerce ul.products"). */
.wc-block-product-template {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
}

ul.wc-block-product-template li.wc-block-product {
	position: relative;
	flex: 0 1 260px;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 1px 3px rgba(15, 57, 53, 0.04), 0 4px 12px rgba(15, 57, 53, 0.03);
}

/* Fila "cantidad + agregar al carrito": el selector de cantidad queda fijo
   y el botón siempre estira para ocupar el resto del ancho — sin esto, el
   botón se dimensiona por el largo de su propio texto ("Agregar al
   carrito" vs "1 en el carrito" una vez que ya hay unidades en el
   carrito), y la fila entera se corre de forma distinta tarjeta por
   tarjeta según cuántas unidades tenga cada una en el carrito. */
.wp-block-add-to-cart-with-options > div:has(.wc-block-components-product-button) {
	flex-wrap: nowrap !important;
}
.wc-block-add-to-cart-with-options__quantity-selector {
	flex: 0 0 auto;
}
.wc-block-components-product-button {
	flex: 1 1 auto;
	min-width: 0;
}

/* Empuja el bloque de "agregar al carrito" siempre al fondo de la tarjeta,
   para que las tarjetas de una misma fila queden alineadas aunque el
   título de alguna ocupe dos líneas y el de al lado solo una. */
.wc-block-product-template li.wc-block-product > div:last-child {
	margin-top: auto;
}

.wc-block-product-template li.wc-block-product .wp-block-post-title {
	min-height: 2.6em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wc-block-components-product-image {
	overflow: hidden;
	border-radius: 10px;
	background: var(--wp--preset--color--paper);
}
.wc-block-components-product-image img {
	object-fit: contain !important;
	padding: 16px;
	box-sizing: border-box;
	transition: transform 0.25s ease;
}
.wc-block-product-template li.wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.06);
}

/* Insignia de oferta — unifica el círculo gris por defecto de WooCommerce
   (ficha de producto) y el rectángulo gris por defecto de los bloques
   (grillas) en una sola pastilla con los colores de marca. */
.onsale,
.wc-block-components-product-sale-badge {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	left: auto !important;
	z-index: 2;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	line-height: 1.2 !important;
	background: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--mascotas) !important;
	border: 1.5px solid var(--wp--preset--color--mascotas) !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 5px 12px !important;
	box-shadow: none !important;
}

.wc-block-components-product-price .woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 880px) {
	.woocommerce ul.products li.product,
	.wc-block-product-template li.wc-block-product {
		flex-basis: calc(50% - 10px);
	}
}

@media (max-width: 480px) {
	.woocommerce ul.products li.product,
	.wc-block-product-template li.wc-block-product {
		flex-basis: 100%;
	}
}

/* Ficha de producto — la galería no traía límite de altura: una foto angosta
   y alta (botella) se mostraba a ancho completo del contenedor sin techo,
   estirando la imagen a más de 1000px de alto. Con un alto fijo + object-fit
   contain, cualquier foto (angosta, ancha, cuadrada) queda enmarcada igual. */
.woocommerce-product-gallery__wrapper {
	background: var(--wp--preset--color--paper);
	border-radius: 12px;
	overflow: hidden;
}

/* !important porque ".woocommerce div.product div.images img" del CSS
   propio de WooCommerce (height:auto) tiene más especificidad que este
   selector y gana igual si no se fuerza. */
.woocommerce-product-gallery__image img {
	width: 100% !important;
	height: 460px !important;
	object-fit: contain !important;
}

@media (max-width: 600px) {
	.woocommerce-product-gallery__image img {
		height: 320px !important;
	}
}

/* ==================== Migas de pan (tienda + ficha de producto) ==================== */

.woocommerce-breadcrumb {
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 8px;
}
.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* ==================== Barra de la tienda: resultados + orden ==================== */

.nv-shop-toolbar {
	padding-bottom: 16px;
	margin-bottom: 24px !important;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.9rem;
}
.woocommerce-ordering select {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
}

/* ==================== Paginación ==================== */

.wp-block-query-pagination {
	margin-top: 32px !important;
}
.wp-block-query-pagination a,
.wp-block-query-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 999px;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	font-size: 0.9rem;
}
.wp-block-query-pagination a:hover {
	background: var(--wp--preset--color--paper);
}
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	font-weight: 700;
}

/* ==================== Ficha de producto: SKU / categoría / marca ==================== */

.wp-block-woocommerce-product-meta {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--border);
}
.wp-block-woocommerce-product-meta .wp-block-group {
	flex-wrap: wrap !important;
	gap: 8px !important;
}
.wp-block-woocommerce-product-meta .product_meta,
.wp-block-woocommerce-product-meta .wp-block-post-terms {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-soft);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 5px 12px;
}
.wp-block-woocommerce-product-meta a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 600;
}
.wp-block-woocommerce-product-meta a:hover {
	color: var(--wp--preset--color--primary);
}

/* ==================== Ficha de producto: pestañas (Descripción / Info / Valoraciones) ==================== */

.woocommerce-tabs {
	margin-top: 48px;
}
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.woocommerce-tabs ul.tabs li {
	margin: 0;
}
.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 10px 4px;
	margin-bottom: -1px;
	color: var(--wp--preset--color--ink-soft);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li:not(:last-child) a {
	margin-right: 20px;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--wp--preset--color--primary);
}
.woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--wp--preset--color--primary);
}
.woocommerce-tabs .panel h2 {
	font-size: 1.3rem;
	margin-bottom: 12px;
}

/* Mi cuenta — venía con el markup nativo sin ningún estilo, solo texto
   plano. Layout de 2 columnas (nav + contenido) igual que cualquier panel
   de cuenta, reusando los mismos tokens de tarjeta que el resto del sitio. */
.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-start;
}
.woocommerce-MyAccount-navigation {
	flex: 0 0 220px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 8px;
}
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 10px 14px;
	border-radius: 10px;
	color: var(--wp--preset--color--ink-soft);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.woocommerce-MyAccount-navigation-link a:hover {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}
.woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}
.woocommerce-MyAccount-content {
	flex: 1 1 420px;
	min-width: 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 28px;
}
.woocommerce-MyAccount-content mark {
	background: none;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}
.woocommerce-MyAccount-content a {
	color: var(--wp--preset--color--primary);
}

/* Tablas (pedidos, direcciones) */
.woocommerce-orders-table,
.account-orders-table {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-orders-table th {
	text-align: left;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink-soft);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 10px 8px;
}
.woocommerce-orders-table td {
	padding: 12px 8px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.woocommerce-orders-table__cell-order-status mark {
	font-weight: 600;
}

/* Direcciones */
.woocommerce-Addresses {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.woocommerce-Address {
	flex: 1 1 260px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 16px;
}
.woocommerce-Address-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.woocommerce-Address-title h3 {
	font-size: 1rem;
	margin: 0;
}

/* Formularios (editar cuenta, direcciones, login/registro) */
.woocommerce-account .woocommerce-form-row label,
.woocommerce-account form label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 4px;
}
.woocommerce-account .woocommerce-form-row input.input-text,
.woocommerce-account .woocommerce-form-row select,
.woocommerce-account form input.input-text,
.woocommerce-account form select,
.woocommerce-account form textarea {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 0.9rem;
	background: var(--wp--preset--color--paper);
}
.woocommerce-account .woocommerce-form-row input.input-text:focus,
.woocommerce-account form input.input-text:focus,
.woocommerce-account form select:focus,
.woocommerce-account form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
}
.woocommerce-account form .button {
	width: auto;
}
.woocommerce-account .woocommerce-form-row {
	margin-bottom: 16px;
}

@media (max-width: 640px) {
	.woocommerce-account .woocommerce {
		flex-direction: column;
	}
	.woocommerce-MyAccount-navigation {
		flex-basis: auto;
		width: 100%;
	}
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}
	.woocommerce-MyAccount-navigation-link {
		flex: 1 1 auto;
	}
	.woocommerce-MyAccount-content {
		padding: 20px;
	}
}

/* Envío Andreani (plugin) — la sección de "Mi cuenta > Ver pedido" venía sin
   ningún estilo propio, y el link de "seguir envío" era solo un ícono chico
   de 16px sin texto (casi invisible). Se convierte en una tarjeta prolija y
   el link pasa a ser un botón real con label + ícono. */
.andreani-shipping-details {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 20px 24px;
	margin: 24px 0;
}
.andreani-shipping-details .woocommerce-column__title {
	font-size: 1.1rem;
	margin: 0 0 12px;
	color: var(--wp--preset--color--primary);
}
.andreani-details-list {
	margin: 0;
}
.andreani-details-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 12px 0;
	border-top: 1px solid var(--wp--preset--color--border);
}
.andreani-details-row:first-child {
	border-top: none;
	padding-top: 0;
}
.andreani-details-row dt {
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.85rem;
	margin: 0;
	flex: 0 0 140px;
}
.andreani-details-row dd {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.andreani-details-row code {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: 3px 8px;
	font-size: 0.85rem;
}
.andreani-pending {
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}
.andreani-track-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface) !important;
	border-radius: 999px;
	padding: 8px 16px 8px 12px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none !important;
	line-height: 1.2;
	transition: background 0.15s ease;
}
.andreani-track-link::after {
	content: "Seguir envío";
}
.andreani-track-link:hover {
	background: var(--wp--preset--color--primary-hover);
}
.andreani-track-link svg {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
}