/*
 * Resumen de la ficha (glee-catalogo): título, marca, miga de pan, precio, leyenda de
 * stock, opciones, cantidad, botón y lista de deseos.
 *
 * Todo eso lo imprime el tema y no tiene un contenedor propio, así que los
 * estilos cuelgan de la clase que la composición le agrega al `body` de la ficha
 * (.glee-catalogo-product). Sin !important: Woodmart estiliza los botones, los
 * campos y las opciones con más especificidad que una clase suelta.
 *
 * Los tokens están copiados de glee-brand/assets/tokens.css, que no se carga en
 * el sitio. Si uno cambia en glee-brand, cambiarlo acá.
 *
 * Todo cuelga de `.entry-summary` (la ficha principal): los precios del menú de
 * producto anterior y la compra rápida de los relacionados son otros elementos y
 * no tienen que cambiar.
 */

.glee-catalogo-product {
	--glee-primary: #392869;
	--glee-primary-soft: #efedf4;
	--glee-accent: #e1ae3b;
	--glee-on-accent: #161616;
	--glee-ink: #161616;
	--glee-ink-muted: #5b5663;
	--glee-background: #ffffff;
	--glee-surface: #f4f4f4;
	--glee-success: #459647;
	--glee-line: #dddddd;
	--glee-font-display: "Montserrat", Arial, Helvetica, sans-serif;
	--glee-focus-ring: 2px solid var(--glee-primary);
	--glee-focus-offset: 2px;
	--glee-catalogo-purchase-height: 52px;
	--glee-catalogo-touch-height: 48px;
	--glee-catalogo-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E");
}

/* Precio: 24 px, y «Desde» chico y apagado cuando hay varias opciones. */
.glee-catalogo-product .entry-summary .summary-inner > .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 16px 0 0;
	font-family: var(--glee-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.15;
	color: var(--glee-ink);
}

.glee-catalogo-product .entry-summary .summary-inner > .price ins {
	order: 1;
	background: none;
	text-decoration: none;
	font-weight: 700;
}

.glee-catalogo-product .entry-summary .summary-inner > .price del {
	order: 2;
	font-weight: 400;
	font-size: 16px;
	color: var(--glee-ink-muted);
	opacity: 1;
}

.glee-catalogo-product .glee-catalogo-price-from {
	font-size: 14px;
	font-weight: 700;
	color: var(--glee-ink-muted);
}

/* El precio de la variación ya está arriba (lo cambia glee-catalogo-variation.js). */
.glee-catalogo-product .entry-summary .woocommerce-variation-price {
	display: none;
}

/*
 * Opciones (contenido neto, tamaño): botones de 48 px, la elegida en violeta suave. El tema marca
 * la elegida con la clase `wd-active` y deja `aria-checked="false"` en todas (lo sincroniza
 * glee-catalogo-variation.js): por eso el estilo cuelga de la clase y no del atributo.
 */
.glee-catalogo-product .entry-summary .variations .wd-swatch.wd-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 72px;
	min-height: var(--glee-catalogo-touch-height);
	padding: 0 20px;
	border: 2px solid var(--glee-line);
	border-radius: 0;
	background: var(--glee-background);
	color: var(--glee-ink);
	box-shadow: none;
}

.glee-catalogo-product .entry-summary .variations .wd-swatch.wd-text .wd-swatch-text {
	font-weight: 700;
	font-size: 16px;
	color: inherit;
}

.glee-catalogo-product .entry-summary .variations .wd-swatch.wd-text.wd-active {
	border-color: var(--glee-primary);
	background: var(--glee-primary-soft);
	color: var(--glee-primary);
}

.glee-catalogo-product .entry-summary .variations .wd-swatch.wd-text:focus-visible {
	outline: var(--glee-focus-ring);
	outline-offset: var(--glee-focus-offset);
}

/* Cantidad y botón de compra, en una fila de 52 px. */
.glee-catalogo-product .entry-summary form.cart:not(.variations_form),
.glee-catalogo-product .entry-summary form.variations_form .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 12px;
	margin-top: 16px;
}

.glee-catalogo-product .entry-summary form.cart .quantity {
	display: flex;
	flex: none;
	align-items: center;
	height: var(--glee-catalogo-purchase-height);
	margin: 0;
	border: 2px solid var(--glee-line);
	border-radius: 0;
	background: transparent;
}

.glee-catalogo-product .entry-summary form.cart .quantity .btn.minus,
.glee-catalogo-product .entry-summary form.cart .quantity .btn.plus {
	width: 44px;
	min-width: 44px;
	height: var(--glee-catalogo-touch-height);
	min-height: var(--glee-catalogo-touch-height);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--glee-ink);
	font-size: 20px;
	line-height: 1;
	text-transform: none;
}

.glee-catalogo-product .entry-summary form.cart .quantity input.qty {
	width: 40px;
	height: var(--glee-catalogo-touch-height);
	min-height: var(--glee-catalogo-touch-height);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--glee-ink);
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.glee-catalogo-product .entry-summary form.cart .quantity input.qty::-webkit-inner-spin-button,
.glee-catalogo-product .entry-summary form.cart .quantity input.qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.glee-catalogo-product .entry-summary form.cart .quantity .btn.minus:focus-visible,
.glee-catalogo-product .entry-summary form.cart .quantity .btn.plus:focus-visible,
.glee-catalogo-product .entry-summary form.cart .quantity input.qty:focus-visible,
.glee-catalogo-product .entry-summary form.cart .single_add_to_cart_button:focus-visible {
	outline: var(--glee-focus-ring);
	outline-offset: var(--glee-focus-offset);
}

/* El botón principal es mostaza con texto oscuro (decisión del dueño). */
.glee-catalogo-product .entry-summary form.cart .single_add_to_cart_button {
	flex: 1;
	width: auto;
	height: var(--glee-catalogo-purchase-height);
	min-height: var(--glee-catalogo-purchase-height);
	margin: 0;
	padding: 0 16px;
	border: 2px solid var(--glee-accent);
	border-radius: 0;
	background: var(--glee-accent);
	box-shadow: none;
	color: var(--glee-on-accent);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	opacity: 1;
}

.glee-catalogo-product .entry-summary form.cart .single_add_to_cart_button:hover {
	border-color: color-mix(in srgb, var(--glee-accent) 88%, var(--glee-ink));
	background: color-mix(in srgb, var(--glee-accent) 88%, var(--glee-ink));
	color: var(--glee-on-accent);
}

/* Sin opción elegida: apagado y con su texto («Elegí una opción»). */
.glee-catalogo-product .entry-summary form.cart .single_add_to_cart_button.disabled,
.glee-catalogo-product .entry-summary form.cart .single_add_to_cart_button:disabled {
	border-color: var(--glee-line);
	background: var(--glee-surface);
	color: var(--glee-ink-muted);
	cursor: not-allowed;
	opacity: 1;
}

/* Título: Montserrat 700 en violeta; 24 px en celular y 32 px en escritorio. */
.glee-catalogo-product .entry-summary h1.product_title {
	margin: 0;
	font-family: var(--glee-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: none;
	color: var(--glee-primary);
}

/*
 * Marca: en celular, texto chico sobre el título (lo imprime el plugin) y se oculta el
 * logo del tema, que ocupaba un bloque entero; en escritorio queda el logo del tema.
 */
.glee-catalogo-product .entry-summary .glee-catalogo-eyebrow {
	margin: 0 0 4px;
	font-family: var(--glee-font-display);
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--glee-ink-muted);
}

/* Miga de pan (la ubicación la da la opción del tema, ver tools/single-theme-options.php). */
.glee-catalogo-product .single-breadcrumbs-wrapper .wd-breadcrumbs {
	min-height: 44px;
	align-items: center;
	font-size: 14px;
	font-weight: 400;
	color: var(--glee-ink-muted);
}

.glee-catalogo-product .single-breadcrumbs-wrapper .wd-breadcrumbs a {
	font-weight: 400;
	color: var(--glee-ink-muted);
}

.glee-catalogo-product .single-breadcrumbs-wrapper .wd-breadcrumbs .wd-last,
.glee-catalogo-product .single-breadcrumbs-wrapper .wd-breadcrumbs .wd-last-link {
	font-weight: 700;
	color: var(--glee-ink);
}

/* Leyenda de stock: a la derecha del precio, con una tilde verde. El tema imprime la suya más abajo. */
.glee-catalogo-product .entry-summary .summary-inner > .price .glee-catalogo-stock {
	order: 3;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	color: var(--glee-ink);
}

.glee-catalogo-product .entry-summary .glee-catalogo-stock__icon {
	flex: none;
	width: 20px;
	height: 20px;
	background-color: var(--glee-success);
	-webkit-mask: var(--glee-catalogo-check) center / contain no-repeat;
	mask: var(--glee-catalogo-check) center / contain no-repeat;
}

/* Solo se oculta el «en stock» del tema: «agotado» y «en reposición» se siguen viendo. */
.glee-catalogo-product .entry-summary p.stock.in-stock {
	display: none;
}

/* Lista de deseos: acción secundaria, violeta, en negrita y con 48 px de alto. */
.glee-catalogo-product .entry-summary .wd-wishlist-btn > a {
	align-items: center;
	gap: 8px;
	min-height: var(--glee-catalogo-touch-height);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--glee-primary);
}

.glee-catalogo-product .entry-summary .wd-wishlist-btn .wd-action-text {
	font-weight: 700;
	font-size: 16px;
	text-transform: none;
	color: inherit;
}

.glee-catalogo-product .entry-summary .wd-wishlist-btn .wd-action-icon {
	font-size: 20px;
	color: inherit;
}

.glee-catalogo-product .entry-summary .wd-wishlist-btn > a:hover .wd-action-text {
	text-decoration: underline;
}

.glee-catalogo-product .entry-summary .wd-wishlist-btn > a:focus-visible {
	outline: var(--glee-focus-ring);
	outline-offset: var(--glee-focus-offset);
}

/* Celular: sin el logo de la marca ni las flechas de producto anterior y siguiente. */
@media (max-width: 1023px) {
	.glee-catalogo-product .entry-summary .wd-product-brands,
	.glee-catalogo-product .single-breadcrumbs-wrapper .wd-products-nav {
		display: none;
	}
}

/* Escritorio (1024px, el corte del prototipo): título de 32 px, logo de la marca y más aire en la miga. */
@media (min-width: 1024px) {
	.glee-catalogo-product .entry-summary h1.product_title {
		font-size: 32px;
	}

	.glee-catalogo-product .entry-summary .glee-catalogo-eyebrow {
		display: none;
	}

	.glee-catalogo-product .single-breadcrumbs-wrapper {
		padding: 24px 0 20px;
	}
}