/**
 * Gia Product Card — "D3" layout, price-on-tag-line variant.
 *
 * Top row: collection eyebrow (left) + price (right), same size, both Jost.
 * Name sits below on full width. A small script equalises name height across
 * the row so one long name pushes every card to the same height.
 */

ul.products li.product.wc-gia-product {
	--gia-charcoal: #23211e;
	--gia-muted: #8c8475;
	--gia-line: rgba(35, 33, 30, 0.14);
	--gia-gold: #a68a5b;
	list-style: none;
	padding: 0 !important;
	margin: 0;
	background: none !important;
	border: none !important;
}

.wc-gia-card {
	background: #fff;
	border-radius: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wc-gia-card:hover {
	/* no shadow, no lift */
}

.wc-gia-card__imglink {
	display: block;
	line-height: 0;
	position: relative;
}

.wc-gia-card__img,
.wc-gia-card__imglink img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 !important;
	border-radius: 0 !important;
}

/* Hover crossfade: the base image flows and sets the box height; the gallery
   overlay is layered on top and fades its opacity in on hover. No hard cut. */
.wc-gia-card__img--hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.wc-gia-card__imglink.is-hovering .wc-gia-card__img--hover {
	opacity: 1;
}

.wc-gia-card__body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Top row: eyebrow left, price right — same size, both Jost */
.wc-gia-card__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 18px;
}

.wc-gia-card__eyebrow {
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #6b6b6b;
	line-height: 1.2;
}

.wc-gia-card__price {
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--gia-charcoal);
	white-space: nowrap;
	flex-shrink: 0;
	text-align: right;
	line-height: 1.2;
}

.wc-gia-card__price del { opacity: .5; }
.wc-gia-card__price ins { text-decoration: none; }
.wc-gia-card__price .amount { font-family: 'Jost', sans-serif; font-weight: 500; }

/* Name on full width below the top row */
.wc-gia-card__title {
	font-family: 'EB Garamond', serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.22;
	color: var(--gia-charcoal);
	text-decoration: none;
	transition: color 0.2s ease;
	margin-bottom: 16px;
	display: block;
	/* JS will set a min-height equal to the tallest name in the row.
	   Cap very long names at 3 lines so nothing runs away. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wc-gia-card__title:hover {
	color: #1F1F1F;
}

/* Full-width button, no radius */
.wc-gia-add {
	margin-top: auto;
	border: none;
	background: var(--gia-charcoal);
	border-radius: 0;
	padding: 12px 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: background 0.25s ease;
	text-decoration: none;
	width: 100%;
}

.wc-gia-add:hover {
	background: #000;
}

.wc-gia-add svg {
	width: 18px;
	height: 18px;
	display: block;
	color: #fff;
	flex-shrink: 0;
}

.wc-gia-add__label {
	color: #fff;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
}

/* Icon + label swap */
.wc-gia-add .wc-gia-ico-cart { display: block; }
.wc-gia-add .wc-gia-ico-check { display: none; }
.wc-gia-add__label-added { display: none; }

.wc-gia-add.is-added { background: var(--gia-gold); }
.wc-gia-add.is-added:hover { background: #97794f; }
.wc-gia-add.is-added .wc-gia-ico-cart { display: none; }
.wc-gia-add.is-added .wc-gia-ico-check { display: block; }
.wc-gia-add.is-added .wc-gia-add__label-default { display: none; }
.wc-gia-add.is-added .wc-gia-add__label-added { display: inline; }

.wc-gia-add.is-loading { opacity: 0.7; pointer-events: none; }

/* ---- Single product breadcrumb: TIENDA / COLLECTION / PRODUCT (uppercase) ---- */
.wc-gia-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
}

.wc-gia-breadcrumb__link {
	color: var(--gia-muted, #8c8475);
	text-decoration: none;
	transition: color 0.2s ease;
}

.wc-gia-breadcrumb__link:hover {
	color: #1F1F1F;
}

.wc-gia-breadcrumb__sep {
	color: rgba(35, 33, 30, 0.3);
}

.wc-gia-breadcrumb__current {
	color: var(--gia-charcoal, #23211e);
}

/* ============================================================
   SINGLE PRODUCT PAGE (our own template — clean markup)
   ============================================================ */

.wc-gia-single-product {
	--gia-charcoal: #23211e;
	--gia-muted: #8c8475;
	--gia-line: rgba(35, 33, 30, 0.14);
	--gia-gold: #a68a5b;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 32px 80px;
}

/* Breadcrumb */
.wc-gia-single-product .wc-gia-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.wc-gia-single-product .wc-gia-breadcrumb__link { color: var(--gia-muted); text-decoration: none; transition: color .2s; }
.wc-gia-single-product .wc-gia-breadcrumb__link:hover { color: #1F1F1F; }
.wc-gia-single-product .wc-gia-breadcrumb__sep { color: rgba(35,33,30,.3); }
.wc-gia-single-product .wc-gia-breadcrumb__current { color: var(--gia-charcoal); }

/* Two-column grid */
.wc-gia-single__grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 15px;
	align-items: stretch;
}
@media (max-width: 900px) {
	.wc-gia-single__grid { grid-template-columns: 1fr; gap: 28px; }
	/* 10px side padding on the product page for phones (the shop grid is
	   handled separately by the theme). */
	.wc-gia-single-product { padding: 0 10px 60px; }
	/* Variation placeholders (ELIGE FRAGANCIA / ELIGE COLOR) read too faint at
	   phone size — darken to near-black. */
	.wc-gia-vselect__select:not(.has-selection) .wc-gia-select__value { color: #23211e; }
}

/* LEFT: gallery grid, 4:5 forced */
.wc-gia-single__gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.wc-gia-single__cell {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #f4efe6;
}
.wc-gia-single__cell.is-hero {
	grid-column: 1 / -1;   /* first image full width */
}
.wc-gia-single__cell img,
.wc-gia-single__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* RIGHT: sticky summary */
.wc-gia-single__summary {
	position: sticky;
	top: 120px;
	align-self: start;
}

.wc-gia-single__title {
	font-family: 'EB Garamond', serif;
	font-weight: 400;
	font-size: clamp(30px, 4vw, 40px);
	line-height: 1.1;
	color: var(--gia-charcoal);
	margin: 0 0 16px;
}

.wc-gia-single__tag {
	display: inline-block;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #6b6b6b;
	margin-bottom: 2px;
}

.wc-gia-single__desc {
	font-size: 15px;
	line-height: 1.7;
	color: #4a463f;
	margin-bottom: 28px;
}
.wc-gia-single__desc p { margin: 0 0 10px; }

/* Accordions */
.wc-gia-acc-group { border-top: 1px solid var(--gia-line); margin-bottom: 0px; }
/* Each accordion is a bordered box (like the variation dropdowns) */
.wc-gia-acc {
	border: 1px solid #e6e6e6;
	background: #fff;
	margin-top: 10px;
}
.wc-gia-acc:first-child { margin-top: 16px; }
.wc-gia-acc__head {
	width: 100%; display: flex; justify-content: space-between; align-items: center;
	gap: 16px; padding: 0 16px; height: 40px; background: none; border: none; cursor: pointer;
	font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--gia-charcoal); text-align: left;
}
.wc-gia-acc__icon { width: 16px; height: 16px; position: relative; flex-shrink: 0; }
.wc-gia-acc__icon::before, .wc-gia-acc__icon::after {
	content: ""; position: absolute; background: var(--gia-charcoal);
	transition: transform .3s, opacity .3s;
}
.wc-gia-acc__icon::before { top: 7px; left: 0; width: 16px; height: 1.5px; }
.wc-gia-acc__icon::after { top: 0; left: 7px; width: 1.5px; height: 16px; }
.wc-gia-acc.is-open .wc-gia-acc__icon::after { opacity: 0; transform: rotate(90deg); }
.wc-gia-acc__body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.wc-gia-acc.is-open .wc-gia-acc__body { max-height: 600px; }
.wc-gia-acc__inner { padding: 4px 16px 12px; font-size: 14px; line-height: 1.7; color: #4a463f; }
.wc-gia-acc__inner p { margin: 0 0 8px; }
.wc-gia-acc__inner ul { margin: 0; padding-left: 18px; }

/* Variation dropdowns: inline LABEL | value */
.wc-gia-single__buy table.variations {
	margin: 0 0 22px; border: none; width: 100%;
}
.wc-gia-single__buy table.variations tr { display: block; margin-bottom: 12px; position: relative; }
.wc-gia-single__buy table.variations th,
.wc-gia-single__buy table.variations td { display: block; padding: 0; }
.wc-gia-single__buy table.variations th.label { display: none; }
.wc-gia-single__buy table.variations tr::before {
	content: attr(data-attr-label);
	position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
	font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--gia-muted); z-index: 1;
	pointer-events: none; padding-right: 14px;
	border-right: 1px solid var(--gia-line);
}
.wc-gia-single__buy table.variations select {
	width: 100%; font-family: 'Jost', sans-serif; font-size: 14px;
	color: var(--gia-charcoal); padding: 15px 16px 15px 120px;
	background-color: #fff; border: 1px solid var(--gia-line); border-radius: 0;
	cursor: pointer; -webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath fill='none' stroke='%2323211e' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center;
}
.wc-gia-single__buy .reset_variations { font-size: 11px; color: var(--gia-muted); display: inline-block; margin: 4px 0; }

/* Price */
.wc-gia-single__buy .price {
	font-family: 'EB Garamond', serif !important;
	font-size: 28px !important; color: var(--gia-charcoal) !important;
	margin: 0 0 16px !important; display: block;
}
.wc-gia-single__buy .woocommerce-variation-price .price { margin-bottom: 16px !important; }

/* ===== Buy area: dropdowns -> price (top) -> OUR card button (full width) ===== */

.wc-gia-single__buy { display: block; }

/* Hide quantity */
.wc-gia-single-product .wc-gia-single__buy .quantity { display: none !important; }

/* Hide WooCommerce's NATIVE button + its price echoes — we render our own.
   Keep the variations table (dropdowns) and the hidden variation_id input. */
.wc-gia-single__buy .woocommerce-variation-price { display: none !important; }
.wc-gia-single__buy button.single_add_to_cart_button,
.wc-gia-single__buy input.single_add_to_cart_button,
.wc-gia-single__buy .woocommerce-variation-add-to-cart .button {
	display: none !important;
}

/* Dropdowns on top */
.wc-gia-single__buy table.variations { margin: 0 0 20px; border: none; width: 100%; }

/* Price on top of the button */
.wc-gia-single__price {
	display: block;
	font-family: 'EB Garamond', serif;
	font-size: 28px;
	color: var(--gia-charcoal);
	margin: 0 0 16px;
	line-height: 1;
}
.wc-gia-single__price .amount { font-family: 'EB Garamond', serif; }
.wc-gia-single__price del { opacity: .5; font-size: .8em; }
.wc-gia-single__price ins { text-decoration: none; }

/* OUR button on the single page = the card button, full width.
   It inherits ALL .wc-gia-add styles already defined above (background,
   hover, icon swap, is-added gold, label swap). We only set width + a touch
   more padding for the larger context. NO transform/translate on hover. */
.wc-gia-single__add.wc-gia-add {
	width: 100%;
	padding: 16px 0;
	margin-top: 0;
}

/* Kill blue focus everywhere in single product */
.wc-gia-single-product *:focus,
.wc-gia-single-product *:focus-visible { outline: none !important; box-shadow: none !important; }
.wc-gia-single-product select:focus { border-color: var(--gia-charcoal) !important; }

/* Font sizes 16px */
.wc-gia-single__desc { font-size: 16px; }
.wc-gia-acc__inner { font-size: 16px; }
.wc-gia-single-product .wc-gia-single__buy table.variations select { font-size: 16px; }

/* ===== Variation dropdowns: SIDE BY SIDE (50/50), forced over theme (v1.9.4) ===== */

/* The variations table becomes a flex row so options sit side by side */
body .wc-gia-single-product .wc-gia-single__buy table.variations,
.wc-gia-single-product .wc-gia-single__buy .variations {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin: 0 0 20px !important;
	border: none !important;
	width: 100% !important;
	background: none !important;
	box-shadow: none !important;
}
body .wc-gia-single-product .wc-gia-single__buy table.variations tbody {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	width: 100% !important;
}
/* Each row = one option, takes ~50% (minus the gap) */
body .wc-gia-single-product .wc-gia-single__buy table.variations tr {
	display: block !important;
	flex: 1 1 calc(50% - 6px) !important;
	min-width: 160px !important;
	border: none !important;
	background: none !important;
	margin: 0 !important;
	position: relative !important;
	box-shadow: none !important;
}
body .wc-gia-single-product .wc-gia-single__buy table.variations th,
body .wc-gia-single-product .wc-gia-single__buy table.variations td {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
}
/* Show the attribute label as a small caption ABOVE each select (clean for
   narrow side-by-side columns; no overlap, stable on variation re-render). */
body .wc-gia-single-product .wc-gia-single__buy table.variations th.label {
	display: block !important;
	width: 100% !important;
}
body .wc-gia-single-product .wc-gia-single__buy table.variations th.label label {
	font-family: 'Jost', sans-serif !important;
	font-size: 10px !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	color: var(--gia-muted, #8c8475) !important;
	margin: 0 0 6px !important;
	display: block !important;
	font-weight: 400 !important;
}
/* The select — narrower left padding since side-by-side is tighter */
body .wc-gia-single-product .wc-gia-single__buy table.variations select,
body .wc-gia-single-product .wc-gia-single__buy .variations select {
	width: 100% !important;
	font-family: 'Jost', sans-serif !important;
	font-size: 14px !important;
	font-weight: 300 !important;
	color: var(--gia-charcoal, #23211e) !important;
	background-color: #fff !important;
	border: 1px solid #e6e6e6 !important;
	border-radius: 0 !important;
	padding: 14px 34px 14px 16px !important;
	height: auto !important;
	min-height: 52px !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath fill='none' stroke='%2323211e' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	box-shadow: none !important;
	margin: 0 !important;
	text-overflow: ellipsis !important;
}
body .wc-gia-single-product .wc-gia-single__buy .reset_variations {
	flex-basis: 100% !important;
	font-size: 11px !important;
	color: var(--gia-muted, #8c8475) !important;
	margin: 0 !important;
}

/* Reduce gap between dropdowns and price (was ~50px). The variations table
   already has 20px bottom; the single_variation_wrap adds more — collapse it. */
body .wc-gia-single-product .wc-gia-single__buy .single_variation_wrap,
body .wc-gia-single-product .wc-gia-single__buy .woocommerce-variation.single_variation,
body .wc-gia-single-product .wc-gia-single__buy .variations_form {
	margin: 0 !important;
}
body .wc-gia-single-product .wc-gia-single__buy .single_variation {
	margin: 0 !important;
	min-height: 0 !important;
}
/* Price sits right under the dropdowns */
.wc-gia-single__price { margin: 0 0 14px !important; }

/* Remove any shadow box around buy area / selects */
.wc-gia-single__buy,
.wc-gia-single__buy *,
.wc-gia-single-product .wc-gia-single__buy table.variations select {
	box-shadow: none !important;
}

/* ============================================================
   SINGLE PRODUCT — custom variation dropdowns + buy area (clean)
   Based on actual Pixfort/WC markup. We HIDE the native select chrome
   and build our own dropdowns via JS (.wc-gia-vselect).
   ============================================================ */

/* Hide the entire native WooCommerce variations table + quantity + native button.
   We render our own controls. The native form stays in DOM (hidden) so it holds
   variation_id and we submit through it. */
.wc-gia-single__buy form.cart table.variations,
.wc-gia-single__buy form.cart .single_variation_wrap .quantity,
.wc-gia-single__buy form.cart .woocommerce-variation-add-to-cart button.single_add_to_cart_button,
.wc-gia-single__buy form.cart .reset_variations,
.wc-gia-single__buy form.cart .reset_variations_alert {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	width: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* Our custom dropdowns container (built by JS, inserted before the form) */
.wc-gia-vselects {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}
@media (max-width: 520px) { .wc-gia-vselects { grid-template-columns: 1fr; } }

.wc-gia-vselect { position: relative; }
.wc-gia-vselect__label {
	display: block;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gia-muted, #8c8475);
	margin-bottom: 8px;
}
.wc-gia-vselect__field {
	width: 100%;
	font-family: 'Jost', sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: var(--gia-charcoal, #23211e);
	background-color: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 0;
	padding: 0 40px 0 16px;
	height: 52px;
	line-height: 52px;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-shadow: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath fill='none' stroke='%2323211e' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	outline: none !important;
}
.wc-gia-vselect__field:focus { border-color: var(--gia-charcoal, #23211e) !important; }

/* Buy area: dropdowns -> full-width button with price inside */
.wc-gia-single__buy { display: block; }
.wc-gia-single__buy form.cart { margin: 0 !important; }

/* Full-width button: label + price inside, icon on the RIGHT */
.wc-gia-single__add--full {
	width: 100% !important;
	margin-top: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
/* Icon to the right: push it after the label/price */
.wc-gia-single__add--full .wc-gia-ico-cart,
.wc-gia-single__add--full .wc-gia-ico-check {
	order: 3;
	margin-left: 2px;
}
.wc-gia-single__add--full .wc-gia-add__label { order: 1; }
.wc-gia-single__btnprice {
	order: 2;
	display: inline-block;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: .06em;
	color: #fff !important;
	opacity: 1;
	white-space: nowrap;
	line-height: 1;
}
.wc-gia-single__btnprice,
.wc-gia-single__btnprice * { color: #fff !important; }
/* Force ALL inner price markup (WooCommerce injects .woocommerce-Price-amount
   etc. via variation.price_html, styled large for the main price display) down
   to the button's own size, so the selected-variation price and its parens
   don't render oversized. */
.wc-gia-single__btnprice .amount,
.wc-gia-single__btnprice .woocommerce-Price-amount,
.wc-gia-single__btnprice .woocommerce-Price-currencySymbol,
.wc-gia-single__btnprice ins,
.wc-gia-single__btnprice del,
.wc-gia-single__btnprice bdi {
	font-family: 'Jost', sans-serif !important;
	color: #fff !important;
	font-size: 11px !important;
	line-height: 1 !important;
	text-decoration: none !important;
	display: inline !important;
	white-space: nowrap !important;
}

/* When the product is in the cart, the button reads "EN TU CARRITO" alone —
   hide the price so it isn't "EN TU CARRITO (₲ 360.000)". Price shows only in
   the default (not-yet-added) state, where it's useful. */
.wc-gia-single__add.is-added .wc-gia-single__btnprice {
	display: none !important;
}

/* The variable-product range from get_price_html() includes a visually-hidden
   accessibility sentence ("Rango de precios: desde X hasta Y"). Hide it inside
   the button so it doesn't show on the initial PHP render (before JS strips it). */
.wc-gia-single__btnprice .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* Main (hero) image square; gallery thumbs stay 4:5 Instagram format */
.wc-gia-single__cell.is-hero { aspect-ratio: 1 / 1 !important; }
.wc-gia-single__cell:not(.is-hero) { aspect-ratio: 4 / 5 !important; }

/* Uppercase collection filter labels */
.wc-gia-select__value,
.wc-gia-select__option { text-transform: uppercase; letter-spacing: .04em; }

/* Sold out button state */
.wc-gia-single__add.is-soldout {
	background: #b8b2a8 !important;
	cursor: not-allowed !important;
	pointer-events: none;
	opacity: 1;
}
.wc-gia-single__add.is-soldout:hover { background: #b8b2a8 !important; }
.wc-gia-single__add .wc-gia-add__label-soldout { display: none; }
.wc-gia-single__add.is-soldout .wc-gia-add__label-default,
.wc-gia-single__add.is-soldout .wc-gia-add__label-added,
.wc-gia-single__add.is-soldout .wc-gia-ico-cart,
.wc-gia-single__add.is-soldout .wc-gia-ico-check { display: none !important; }
.wc-gia-single__add.is-soldout .wc-gia-add__label-soldout { display: inline; }

/* ============================================================
   WIDTH + TOP SPACING — targeted to ACTUAL Pixfort DOM
   Chain: #content.pt-5 > .container > .row > .col-12 > #main > .wc-gia-single-product
   ============================================================ */

/* The Bootstrap .container (~1140px) is what constrains width. Widen it ONLY
   on single product pages. */
body.single-product #content > .container {
	max-width: 1300px !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* Remove the col padding so we use the full 1300 */
body.single-product #content .col-12 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* Our product fills it */
body.single-product .wc-gia-single-product {
	max-width: 1300px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 5px 80px !important;
	box-sizing: border-box;
}

/* MOBILE: the desktop rules above zero out the container/col padding to use the
   full 1300px width. On phones that leaves content touching both screen edges
   (no gutter). Restore a comfortable side gutter below the tablet breakpoint. */
@media (max-width: 782px) {
	body.single-product #content > .container {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
	body.single-product #content .col-12 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	body.single-product .wc-gia-single-product {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.wc-gia-single__summary {
		padding: 24px 18px !important;
	}
}

/* TOP SPACE: scope to the PRODUCT PAGE ONLY by targeting the product element
   itself (not #content, which affects all pages). 50px gap below header. */
.pix-main-intro-placeholder {
	display: none !important;
	height: 0 !important;
}
/* Push the product down. This only exists on single product pages, so it's safe. */
#main > .wc-gia-single-product,
.wc-gia-single-product {
	margin-top: 50px !important;
}
.wc-gia-single-product .wc-gia-breadcrumb {
	margin: 0 0 12px !important;
	padding-top: 0 !important;
}

/* Sticky summary offset: fixed header is ~66px. Clear it with a little gap. */
.wc-gia-single__summary {
	top: 100px !important;
	background-color: #ffffff;
	padding: 40px;
}

/* Uppercase collection filter labels */
.wc-gia-select__value,
.wc-gia-select__option { text-transform: uppercase; letter-spacing: .04em; }

/* ============================================================
   VARIATION DROPDOWNS — fancy custom select (matches collection filter)
   Self-contained so it works on the single product page (no filter.css).
   ============================================================ */
.wc-gia-vselects {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 18px;
}
@media (max-width: 520px) { .wc-gia-vselects { grid-template-columns: 1fr; } }

.wc-gia-vselect__select { position: relative; width: 100%; }

.wc-gia-vselect__select .wc-gia-select__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 12px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 0;
	padding: 0 16px;
	height: 40px;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	letter-spacing: .04em;
	color: #1F1F1F;
	cursor: pointer;
	transition: border-color .2s;
	text-align: left;
}
.wc-gia-vselect__select .wc-gia-select__trigger:hover { border-color: #1F1F1F; }
.wc-gia-vselect__select:not(.has-selection) .wc-gia-select__value { color: #23211e; }
.wc-gia-vselect__select.has-selection .wc-gia-select__value { color: #1F1F1F; }
.wc-gia-vselect__select .wc-gia-select__value {
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	text-transform: uppercase; letter-spacing: .06em; font-size: 12px;
}
.wc-gia-vselect__select .wc-gia-select__arrow {
	flex-shrink: 0; display: inline-flex; color: #8a8a8a;
	transition: transform .25s ease;
}
.wc-gia-vselect__select[data-open='true'] .wc-gia-select__arrow { transform: rotate(180deg); }

.wc-gia-vselect__select .wc-gia-select__list {
	position: absolute;
	top: calc(100% + 4px); left: 0; right: 0;
	background: #fff;
	border: 1px solid #e6e6e6;
	list-style: none; margin: 0; padding: 0;
	z-index: 50;
	max-height: 260px; overflow-y: auto;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	box-shadow: 0 18px 40px rgba(35,33,30,.12);
}
.wc-gia-vselect__select[data-open='true'] .wc-gia-select__list {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.wc-gia-vselect__select .wc-gia-select__option {
	padding: 9px 16px;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	color: #1F1F1F;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.wc-gia-vselect__select .wc-gia-select__option:hover { background: #f3f3f3; color: #1F1F1F; }
.wc-gia-vselect__select .wc-gia-select__option.is-selected {
	color: #1F1F1F;
	font-weight: 600;
	background: #f0f0f0;
}

/* Kill the space WooCommerce creates when a variation is selected.
   The .single_variation div gets populated/shown on selection -> hide it hard,
   plus its wrapper, leaving zero height. */
.wc-gia-single__buy form.cart .single_variation_wrap,
.wc-gia-single__buy form.cart .single_variation_wrap *,
.wc-gia-single__buy form.cart .woocommerce-variation,
.wc-gia-single__buy form.cart .single_variation {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
}
/* But the form itself must stay (holds variation_id) — just collapse its height */
.wc-gia-single__buy form.cart {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	line-height: 0 !important;
}
/* Re-show our own button (it's outside the form, but ensure no inherited collapse) */
.wc-gia-single__add--full { line-height: 1 !important; }

/* Remove the cart/check icon from buttons (card grid + product page) */
.wc-gia-add .wc-gia-ico-cart,
.wc-gia-add .wc-gia-ico-check,
.wc-gia-single__add .wc-gia-ico-cart,
.wc-gia-single__add .wc-gia-ico-check,
.wc-gia-add--link .wc-gia-ico-view {
	display: none !important;
}

/* Link cards (all products now): show the "view" icon by default, swap to the
   check icon when the product is already in the cart ("En Tu Carrito"). This
   overrides the blanket hide above for the link variant specifically. */
.wc-gia-add--link .wc-gia-ico-view {
	display: block !important;
}
.wc-gia-add--link.is-added .wc-gia-ico-view {
	display: none !important;
}
.wc-gia-add--link .wc-gia-ico-check {
	display: none !important;
}
.wc-gia-add--link.is-added .wc-gia-ico-check {
	display: block !important;
}

/* ---- Variation validation flash (triggered on add-to-cart with missing choices).
   Muted earthy red so it signals error without breaking the monochrome palette.
   No red on load — only when .is-invalid is added by JS, cleared on selection. ---- */
.wc-gia-vselect__select.is-invalid .wc-gia-select__trigger {
	border-color: #a0472f !important;
	animation: wc-gia-shake 0.3s ease;
}
.wc-gia-vselect__select.is-invalid .wc-gia-select__value {
	color: #a0472f;
}
@keyframes wc-gia-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

/* ---- [gia_featured] shortcode grid --------------------------------------
   The shop archive gets its column layout from the theme's ul.products grid,
   which this shortcode can't rely on off-archive. So we set the grid here,
   driven by --gia-featured-cols (from the shortcode's columns="" attribute).
   Reuses the exact .wc-gia-card markup, so cards are identical to the shop. */
.wc-gia-featured {
	width: 100%;
}

.wc-gia-featured__title {
	font-family: 'EB Garamond', serif;
	font-weight: 400;
	font-size: clamp(24px, 3vw, 34px);
	letter-spacing: 0.005em;
	color: #23211e;
	text-align: center;
	margin: 0 0 28px;
}

.wc-gia-featured ul.products {
	display: grid !important;
	grid-template-columns: repeat(var(--gia-featured-cols, 4), minmax(0, 1fr));
	gap: 28px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

/* Featured cards live outside ul.products, where the palette variables are
   scoped — so --gia-gold etc. are undefined here and the is-added button falls
   back to black. Re-declare the palette on the featured wrapper. */
.wc-gia-featured {
	--gia-charcoal: #23211e;
	--gia-muted: #8c8475;
	--gia-line: rgba(35, 33, 30, 0.14);
	--gia-gold: #a68a5b;
}

/* Featured wrapper must re-assert the card icon/button sizing. In the shop
   archive the theme's ul.products context constrains the SVG, but inside
   .wc-gia-featured that context is absent, so the dimensionless <svg> (only a
   viewBox, no width/height) balloons to fill the card. Pin it explicitly. */
.wc-gia-featured .wc-gia-add {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 12px 0;
	background: var(--gia-charcoal, #23211e);
	text-decoration: none;
}
/* is-added inside featured: the charcoal rule above (equal specificity, earlier
   in source) was overriding the brown. Re-assert brown at higher specificity. */
.wc-gia-featured .wc-gia-add.is-added {
	background: var(--gia-gold, #a68a5b);
}
.wc-gia-featured .wc-gia-add.is-added:hover {
	background: #97794f;
}
.wc-gia-featured .wc-gia-add svg,
.wc-gia-featured .wc-gia-ico-view {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0;
	display: block;
	color: #fff;
}
.wc-gia-featured .wc-gia-add__label {
	color: #fff;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
}

.wc-gia-featured ul.products::before,
.wc-gia-featured ul.products::after {
	content: none !important;
	display: none !important;
}

.wc-gia-featured ul.products li.product.wc-gia-product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

@media (max-width: 1024px) {
	.wc-gia-featured ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.wc-gia-featured ul.products {
		grid-template-columns: 1fr;
	}
}

/* ---- Variation validation flash on the product page (replaces the browser
   alert). Muted earthy red matching the Forminator error treatment, so it
   signals the missing choice without breaking the palette. ---- */
.wc-gia-vselect__select.wc-gia-invalid .wc-gia-select__trigger {
	border-color: #a03030 !important;
	box-shadow: inset 0 0 0 1px #a03030 !important;
	animation: wc-gia-vshake 0.3s ease;
}
.wc-gia-vselect__select.wc-gia-invalid .wc-gia-select__value {
	color: #a03030;
}
@keyframes wc-gia-vshake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

/* ---- Cart page: product thumbnail as a 4:5 (Instagram portrait) crop.
   This cart is the WooCommerce Cart BLOCK (Gutenberg), so the image carries
   hard-coded width/height="80" attributes and the block caps the cell at 80px.
   We override both: widen the cell and force the 4:5 ratio with object-fit. ---- */
.wc-block-cart-item__image {
	width: 88px !important;
	max-width: 88px !important;
	padding-right: 16px;
}
.wc-block-cart-item__image a,
.wc-block-cart-item__image img {
	display: block;
	width: 88px !important;
	height: auto !important;
	max-width: none !important;
}
.wc-block-cart-item__image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
}

/* Legacy/classic cart fallback (kept in case the theme ever switches back). */
.woocommerce-cart-form .product-thumbnail img,
.woocommerce table.cart .product-thumbnail img {
	width: 88px !important;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	border-radius: 0;
	max-width: none;
}

/* Variation options impossible for the current other-attribute selection are
   hidden entirely (not grayed) — selecting a color shows only the fragrances
   that exist in that color, and vice versa. */
.wc-gia-select__option.is-unavailable {
	display: none !important;
}