/*
 * Ficha de producto de Glee (glee-catalogo): las secciones «Descripción»,
 * «Datos del producto» y «Cómo recibirlo», el resumen de envío de escritorio y el
 * botón de compartir.
 *
 * Los tokens están copiados de glee-brand/assets/tokens.css, porque ese archivo
 * no se carga en el sitio. Si un token cambia en glee-brand, cambiarlo acá. Los
 * valores que no son de la marca llevan el prefijo --glee-catalogo-.
 * Radio 0 y sin sombras, como pide la marca. Sin !important: todo cuelga de
 * .glee-catalogo y gana por especificidad (Woodmart estiliza los `button`).
 *
 * Celular primero. El corte de escritorio es 1024px, el del prototipo (una
 * variable no sirve dentro de @media).
 */

.glee-catalogo {
	--glee-primary: #392869;
	--glee-primary-soft: #efedf4;
	--glee-ink: #161616;
	--glee-ink-muted: #5b5663;
	--glee-line: #dddddd;
	--glee-font-display: "Montserrat", Arial, Helvetica, sans-serif;
	--glee-focus-ring: 2px solid var(--glee-primary);
	--glee-focus-offset: 2px;
	--glee-control-height: 48px;
	--glee-catalogo-row-height: 56px;
	--glee-catalogo-reading-width: 72ch;

	color: var(--glee-ink);
}

.glee-catalogo *,
.glee-catalogo *::before,
.glee-catalogo *::after {
	box-sizing: border-box;
}

.glee-catalogo-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Contenedor de pestañas del tema. Ya no hay pestañas y su relleno y sus dos líneas grises se
 * sumaban a las del plugin (dos líneas seguidas sobre la descripción). Se le quitan; las
 * separaciones las ponen las secciones.
 */
.glee-catalogo-product .product-tabs-wrapper {
	padding-top: 0;
	padding-bottom: 0;
	border-top: 0;
	border-bottom: 0;
}

.glee-catalogo .glee-catalogo-section {
	padding-top: 32px;
}

.glee-catalogo .glee-catalogo-section__title {
	margin: 0 0 12px;
	font-family: var(--glee-font-display);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: var(--glee-ink);
}

.glee-catalogo .glee-catalogo-section__title--primary {
	font-weight: 700;
	font-size: 24px;
	line-height: 1.15;
}

.glee-catalogo .glee-catalogo-section__body {
	max-width: var(--glee-catalogo-reading-width);
	overflow-wrap: anywhere;
}

/* Iconos: máscaras SVG, del color del texto que los contiene. */
.glee-catalogo .glee-catalogo-icon {
	flex: none;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: var(--glee-catalogo-icon-image) center / contain no-repeat;
	mask: var(--glee-catalogo-icon-image) center / contain no-repeat;
}

.glee-catalogo .glee-catalogo-icon--delivery {
	--glee-catalogo-icon-image: 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' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 6h11v10H3z'/%3E%3Cpath d='M14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='18' r='1.8'/%3E%3Ccircle cx='17' cy='18' r='1.8'/%3E%3C/svg%3E");
}

.glee-catalogo .glee-catalogo-icon--pickup {
	--glee-catalogo-icon-image: 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' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 21s7-6 7-11a7 7 0 0 0-14 0c0 5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

.glee-catalogo .glee-catalogo-icon--destinations {
	--glee-catalogo-icon-image: 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' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E");
}

.glee-catalogo .glee-catalogo-icon--restricted {
	--glee-catalogo-icon-image: 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' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
}

.glee-catalogo .glee-catalogo-icon--share {
	--glee-catalogo-icon-image: 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' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='6' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='18' r='2.5'/%3E%3Cpath d='M8.2 10.8l7.6-3.6M8.2 13.2l7.6 3.6'/%3E%3C/svg%3E");
}

.glee-catalogo .glee-catalogo-icon--chevron {
	--glee-catalogo-icon-image: 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' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Cómo recibirlo: en celular, filas que se despliegan. */
.glee-catalogo .glee-catalogo-option {
	border-top: 1px solid var(--glee-line);
}

.glee-catalogo .glee-catalogo-receiving__group:last-child .glee-catalogo-option:last-of-type {
	border-bottom: 1px solid var(--glee-line);
}

.glee-catalogo .glee-catalogo-option__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--glee-catalogo-row-height);
	cursor: pointer;
	list-style: none;
}

.glee-catalogo .glee-catalogo-option__summary::-webkit-details-marker {
	display: none;
}

.glee-catalogo .glee-catalogo-option__summary:focus-visible,
.glee-catalogo .glee-catalogo-share__button:focus-visible {
	outline: var(--glee-focus-ring);
	outline-offset: var(--glee-focus-offset);
}

.glee-catalogo .glee-catalogo-option__summary > .glee-catalogo-icon:first-child {
	color: var(--glee-primary);
}

.glee-catalogo .glee-catalogo-option__title {
	flex: 1;
	font-weight: 700;
}

.glee-catalogo .glee-catalogo-icon--chevron {
	color: var(--glee-ink-muted);
}

.glee-catalogo .glee-catalogo-option[open] .glee-catalogo-icon--chevron {
	transform: rotate(180deg);
}

.glee-catalogo .glee-catalogo-option__text {
	max-width: 60ch;
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
}

/* Datos del producto: lista de definiciones. */
.glee-catalogo .glee-catalogo-data {
	margin: 0;
}

.glee-catalogo .glee-catalogo-data__row {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--glee-line);
}

.glee-catalogo .glee-catalogo-data__row:last-child {
	border-bottom: 1px solid var(--glee-line);
}

.glee-catalogo .glee-catalogo-data__label,
.glee-catalogo .glee-catalogo-data__value {
	margin: 0;
	font-size: 14px;
}

.glee-catalogo .glee-catalogo-data__label {
	color: var(--glee-ink-muted);
	font-weight: 400;
}

/* Compartir. */
.glee-catalogo .glee-catalogo-share {
	padding-top: 24px;
}

.glee-catalogo .glee-catalogo-share__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: var(--glee-control-height);
	padding: 0 20px;
	border: 2px solid var(--glee-primary);
	border-radius: 0;
	background: transparent;
	color: var(--glee-primary);
	font-family: inherit;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.glee-catalogo .glee-catalogo-share__button:hover {
	background: var(--glee-primary-soft);
}

.glee-catalogo .glee-catalogo-share__button[hidden] {
	display: none;
}

.glee-catalogo .glee-catalogo-share__button .glee-catalogo-icon {
	width: 20px;
	height: 20px;
}

/*
 * Resumen junto a la compra. En celular solo se ven los bloques de envío de glee-envios y de
 * retiro de gsr; las filas fijas y el botón de compartir son de escritorio (en celular van al
 * final de la página). Los bloques traen sus propios estilos: acá solo se ubican.
 */
.glee-catalogo-summary .glee-catalogo-quick,
.glee-catalogo-summary .glee-catalogo-share {
	display: none;
}

.glee-catalogo .glee-catalogo-delivery-cost,
.glee-catalogo .glee-catalogo-pickup {
	margin-top: 16px;
}

/* La fila sin costo de un producto variable: se ve como el bloque de glee-envios (línea arriba y abajo, 64 px). */
.glee-catalogo .glee-catalogo-delivery-cost__without-cost {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 8px 0;
	border-top: 1px solid var(--glee-line);
	border-bottom: 1px solid var(--glee-line);
}

.glee-catalogo .glee-catalogo-delivery-cost__without-cost > .glee-catalogo-icon {
	color: var(--glee-ink-muted);
}

.glee-catalogo .glee-catalogo-delivery-cost__title {
	margin: 0;
	font-weight: 700;
	line-height: 1.4;
}

.glee-catalogo .glee-catalogo-delivery-cost__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--glee-ink-muted);
}

/*
 * Un variable que sigue a la variación imprime la fila sin costo y el bloque de glee-envios juntos: el bloque cotiza el padre
 * (sin el peso de ninguna opción) hasta que hay una variación elegida. El JS de variaciones agrega la clase `--variation-chosen`.
 */
.glee-catalogo .glee-catalogo-delivery-cost--by-variation:not(.glee-catalogo-delivery-cost--variation-chosen) > :not(.glee-catalogo-delivery-cost__without-cost),
.glee-catalogo .glee-catalogo-delivery-cost--variation-chosen > .glee-catalogo-delivery-cost__without-cost {
	display: none;
}

/* Las dos filas tienen línea arriba y abajo: la segunda comparte la de la primera en vez de sumar otra. */
.glee-catalogo-summary .glee-catalogo-delivery-cost + .glee-catalogo-pickup {
	margin-top: -1px;
}

.glee-catalogo .glee-catalogo-quick {
	margin: 24px 0 0;
	padding: 0;
	border-top: 1px solid var(--glee-line);
	list-style: none;
}

.glee-catalogo .glee-catalogo-quick__row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--glee-line);
}

.glee-catalogo .glee-catalogo-quick__row > .glee-catalogo-icon {
	margin-top: 2px;
	color: var(--glee-primary);
}

.glee-catalogo .glee-catalogo-quick__title {
	margin: 0;
	font-weight: 700;
	line-height: 1.4;
}

.glee-catalogo .glee-catalogo-quick__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--glee-ink-muted);
}

.glee-catalogo .glee-catalogo-quick__text a {
	color: var(--glee-primary);
}

.glee-catalogo-summary .glee-catalogo-share {
	padding-top: 16px;
}

/*
 * Escritorio: Descripción a la izquierda y Datos a la derecha; debajo, Cómo
 * recibirlo a todo el ancho, en dos columnas abiertas. El botón de compartir
 * sale en el resumen junto a la compra, no al final.
 */
@media (min-width: 1024px) {
	.glee-catalogo-summary .glee-catalogo-quick,
	.glee-catalogo-summary .glee-catalogo-share {
		display: block;
	}

	/* El bloque de envío ocupa el lugar de la primera fila fija, con su misma separación de la compra. */
	.glee-catalogo-summary .glee-catalogo-delivery-cost {
		margin-top: 24px;
	}

	/* Un bloque y una fila fija seguidos comparten la línea gris en vez de sumar otra. */
	.glee-catalogo-summary .glee-catalogo-quick + .glee-catalogo-pickup,
	.glee-catalogo-summary .glee-catalogo-delivery-cost + .glee-catalogo-quick {
		margin-top: -1px;
	}

	.glee-catalogo-single {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		grid-template-areas:
			"description data"
			"receiving receiving";
		column-gap: 48px;
		/* El tema deja 40 px sobre su contenedor: 40 + 24 son los 64 px que separan la línea del bloque de compra en el prototipo. */
		margin-top: 24px;
		border-top: 1px solid var(--glee-line);
	}

	.glee-catalogo .glee-catalogo-section {
		padding-top: 40px;
	}

	.glee-catalogo .glee-catalogo-section--description {
		grid-area: description;
	}

	.glee-catalogo .glee-catalogo-section--data {
		grid-area: data;
	}

	.glee-catalogo .glee-catalogo-section--receiving {
		grid-area: receiving;
		margin-top: 64px;
		border-top: 1px solid var(--glee-line);
	}

	.glee-catalogo-single .glee-catalogo-share {
		display: none;
	}

	/* En el resumen, el botón tiene el ancho de su texto y no el de la columna. */
	.glee-catalogo-summary .glee-catalogo-share__button {
		display: inline-flex;
		width: auto;
	}

	.glee-catalogo .glee-catalogo-section--receiving .glee-catalogo-section__title {
		margin-bottom: 24px;
		font-weight: 700;
		font-size: 24px;
		line-height: 1.15;
	}

	.glee-catalogo .glee-catalogo-receiving {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px;
		align-items: start;
	}

	/* Las filas dejan de ser botones: título, texto y listo (las abre el JS). */
	.glee-catalogo .glee-catalogo-option,
	.glee-catalogo .glee-catalogo-receiving__group:last-child .glee-catalogo-option:last-of-type {
		border: 0;
	}

	.glee-catalogo .glee-catalogo-option__summary {
		min-height: 0;
		margin-bottom: 8px;
		cursor: default;
	}

	.glee-catalogo .glee-catalogo-option__summary > .glee-catalogo-icon {
		display: none;
	}

	.glee-catalogo .glee-catalogo-option__title {
		font-family: var(--glee-font-display);
		font-weight: 600;
		font-size: 18px;
		line-height: 1.3;
	}

	.glee-catalogo .glee-catalogo-option__text {
		margin-bottom: 24px;
		font-size: 16px;
		line-height: 1.6;
	}
}