/*
 * ATHINAÏS Gallery
 * Dark jewellery gallery: still-life photography on deep olive, warm off-white type,
 * antique gold on the brand mark and a few details. Colours come from theme.json.
 */

:root {
	--ag-olive: var(--wp--preset--color--olive);
	--ag-olive-deep: var(--wp--preset--color--olive-deep);
	--ag-dark: var(--wp--preset--color--neutral-dark);
	--ag-offwhite: var(--wp--preset--color--offwhite);
	--ag-stone: var(--wp--preset--color--stone);
	--ag-muted: var(--wp--preset--color--muted);
	--ag-gold: var(--wp--preset--color--gold);
	--ag-gold-bright: var(--wp--preset--color--gold-bright);
	--ag-hairline: color-mix(in srgb, var(--ag-offwhite) 14%, transparent);
	--ag-gold-line: color-mix(in srgb, var(--ag-gold) 45%, transparent);
	--ag-header-h: 80px;
	--ag-gutter: 12px;
	/* Left edge of the wide column, for full-bleed sections. */
	--ag-edge: max(var(--wp--style--root--padding-left, 24px), calc((100vw - var(--wp--style--global--wide-size, 1360px)) / 2));
	--ag-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 60' fill='%23A6854F'%3E%3Ccircle cx='12' cy='2' r='1.3'/%3E%3Ccircle cx='12' cy='58' r='1.3'/%3E%3Cpath d='M12 8l1.3 20.2L24 30l-10.7 1.8L12 52l-1.3-20.2L0 30l10.7-1.8z'/%3E%3C/svg%3E");
}

html { overflow-x: clip; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Page frame: footer at the bottom on short pages ---------- */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}
.wp-site-blocks > footer.wp-block-template-part { margin-top: auto; }

/* ---------- Wordmark ---------- */

.ag-wordmark { align-items: center; }
.ag-wordmark .wp-block-site-title a { padding-inline-start: 0.3em; } /* balance the tracking */
.ag-wordmark__tagline {
	margin: 0;
	padding-inline-start: 0.55em;
	font-size: 0.5625rem;
	font-weight: 500;
	letter-spacing: 0.55em;
	line-height: 1;
	color: var(--ag-stone);
}

/* ---------- Header: brand left, links + cart right, one row ---------- */

.ag-header {
	background: var(--ag-olive);
	border-bottom: 1px solid var(--ag-gold-line);
}
.ag-header__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-height: var(--ag-header-h);
	padding-block: 14px;
}
.ag-header__inner > * { margin-block: 0; }
.ag-header__inner > .wp-block-navigation { margin-inline-start: auto; }
.ag-header__inner > .wp-block-woocommerce-mini-cart {
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 1px solid var(--ag-hairline);
}

.ag-header .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--ag-offwhite) 88%, transparent);
}
.ag-header .wp-block-navigation-item__content:hover { color: var(--ag-gold-bright); }
.ag-header .wp-block-navigation .current-menu-item > a {
	color: var(--ag-offwhite);
	text-decoration: underline;
	text-decoration-color: var(--ag-gold);
	text-underline-offset: 0.8em;
}

.ag-header .wc-block-mini-cart__button { color: var(--ag-offwhite); }
.ag-header .wc-block-mini-cart__badge {
	background: var(--ag-gold);
	border-color: var(--ag-olive);
	color: var(--ag-olive-deep);
}

/* Mobile menu (overlay). */
.ag-header .wp-block-navigation__responsive-container-open,
.ag-header .wp-block-navigation__responsive-container-close { color: var(--ag-offwhite); }
.ag-header .wp-block-navigation__responsive-container-open { padding: 10px; }
.ag-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: var(--wp--preset--spacing--30); }
.ag-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--literata);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	letter-spacing: 0.18em;
}

/* Below 1024px the links move into the menu; core only does that below 600px. */
@media (min-width: 600px) and (max-width: 1023px) {
	.ag-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.ag-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 1023px) {
	:root { --ag-header-h: 68px; }
	.ag-header__inner { gap: var(--wp--preset--spacing--30); }
	.ag-header__inner > .wp-block-woocommerce-mini-cart { padding-inline-start: var(--wp--preset--spacing--30); }
}

/* ---------- Home ---------- */

main.ag-home > * { margin-block: 0; }

/* Hero: still life on the right, dissolving into deep olive; brand in the clear space on the left. */
.ag-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp(520px, calc(86svh - var(--ag-header-h)), 760px);
	background: var(--ag-olive);
	overflow: hidden;
}
.ag-hero > * { margin: 0; }
.ag-hero__media {
	position: absolute;
	inset: 0 0 0 30%;
	z-index: -1;
}
.ag-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 48% 62%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.12) 8%, rgb(0 0 0 / 0.4) 18%, rgb(0 0 0 / 0.78) 30%, #000 44%);
	mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.12) 8%, rgb(0 0 0 / 0.4) 18%, rgb(0 0 0 / 0.78) 30%, #000 44%);
}

.ag-hero__brand {
	width: min(36%, 520px);
	margin-inline-start: var(--ag-edge) !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.ag-hero__brand > * { margin: 0; }
h1.ag-hero__name {
	padding-inline-start: 0.24em;
	font-size: clamp(2.5rem, 1.1rem + 3.4vw, 4.6rem);
	font-weight: 300;
	letter-spacing: 0.24em;
	line-height: 1;
	color: var(--ag-gold-bright);
}
.ag-hero__jewels {
	margin-top: 1.1rem !important;
	padding-inline-start: 0.62em;
	font-size: clamp(0.72rem, 0.6rem + 0.35vw, 0.95rem);
	font-weight: 500;
	letter-spacing: 0.62em;
	color: var(--ag-stone);
}
/* The star from the logo, once, as the only ornament. */
.ag-hero__jewels::after {
	content: "";
	display: block;
	width: 20px;
	height: 50px;
	margin: 1.6rem auto 0;
	background: var(--ag-star) center / contain no-repeat;
}
.ag-hero__actions { margin-top: 1.8rem !important; justify-content: center; }
.ag-hero .wp-block-button.is-style-outline > .wp-element-button {
	border: 1px solid var(--ag-gold);
	background: transparent;
	color: var(--ag-offwhite);
}
.ag-hero .wp-block-button.is-style-outline > .wp-element-button::after {
	content: "\2192" / "";
	margin-inline-start: 0.9em;
	letter-spacing: 0;
}
.ag-hero .wp-block-button.is-style-outline > .wp-element-button:hover {
	background: var(--ag-gold);
	color: var(--ag-olive-deep);
}

/* Collections: strictly symmetric photo grid. */
.ag-collections {
	padding: var(--ag-gutter) var(--ag-gutter) var(--wp--preset--spacing--60);
	background: var(--ag-olive-deep);
}
.ag-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ag-gutter);
}
.ag-grid > .ag-tile { margin: 0; }

.ag-tile {
	position: relative;
	display: grid;
	overflow: hidden;
	background: var(--ag-dark);
}
.ag-tile > * { grid-area: 1 / 1; margin: 0; }
.ag-tile img {
	display: block;
	width: 100%;
	transition: transform 0.8s ease;
}
/* Scrim so every title sits on the same, readable ground. */
.ag-tile::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 42%;
	background: linear-gradient(to top, rgb(20 23 18 / 0.82), rgb(20 23 18 / 0));
	pointer-events: none;
}
h3.ag-tile__title {
	z-index: 1;
	align-self: end;
	justify-self: center;
	/* padding, not margin: core's flow layout zeroes the last child's bottom margin */
	padding: 0 0 clamp(16px, 2.6vw, 38px) 0.3em;
	font-family: var(--wp--preset--font-family--literata);
	font-size: clamp(0.8rem, 0.55rem + 0.75vw, 1.25rem);
	font-weight: 400;
	letter-spacing: 0.3em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--ag-offwhite);
}
.ag-tile__title a {
	color: inherit;
	text-decoration: none;
}
/* Whole tile is the link target. */
.ag-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}
.ag-tile__title a:focus-visible { outline: none; }
.ag-tile__title a:focus-visible::after {
	outline: 2px solid var(--ag-gold-bright);
	outline-offset: -8px;
}
.ag-tile:hover img { transform: scale(1.04); }
.ag-tile:hover .ag-tile__title { color: var(--ag-gold-bright); }

/* ---------- Footer ---------- */

.ag-footer { border-top: 1px solid var(--ag-gold-line); }
.ag-footer__inner {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "brand nav" "legal legal";
	align-items: center;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}
.ag-footer__inner > * { margin: 0; }
.ag-footer__inner > .ag-wordmark { grid-area: brand; align-items: flex-start; }
.ag-footer__inner > .wp-block-navigation { grid-area: nav; }
.ag-footer .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ag-muted);
}
.ag-footer .wp-block-navigation-item__content:hover { color: var(--ag-gold-bright); }
.ag-footer__legal {
	grid-area: legal;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	color: var(--ag-muted);
}

/* ---------- WooCommerce (identity only; block logic untouched) ---------- */

.wc-block-breadcrumbs,
.woocommerce-breadcrumb {
	font-size: var(--wp--preset--font-size--small);
	color: var(--ag-muted);
}
.wc-block-breadcrumbs a,
.woocommerce-breadcrumb a { color: inherit; }

.wp-block-post-title,
.wc-block-components-product-name { font-family: var(--wp--preset--font-family--literata); }

/* Placeholders read as a quiet dark tile instead of a light grey box. */
.woocommerce-product-gallery__image--placeholder,
.wc-block-components-product-image:has(img.woocommerce-placeholder) { background: var(--ag-olive-deep); }
.woocommerce-product-gallery__image--placeholder img,
img.woocommerce-placeholder { opacity: 0.16; }

/* Form fields on the dark ground. */
.woocommerce .quantity .qty,
.woocommerce div.product form.cart .variations select,
.wc-block-add-to-cart-form select,
.wc-block-add-to-cart-form input[type="number"] {
	background-color: var(--ag-olive-deep);
	border: 1px solid color-mix(in srgb, var(--ag-offwhite) 35%, transparent);
	border-radius: 0;
	color: var(--ag-offwhite);
}
.woocommerce div.product form.cart .variations select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6F1E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td { vertical-align: top; }
.woocommerce div.product form.cart table.variations th label {
	display: block;
	font-weight: 500;
	line-height: calc(var(--wp--preset--font-size--small) * 3);
}
.woocommerce div.product form.cart .reset_variations { color: var(--ag-muted); }

.woocommerce table.shop_attributes {
	border: 0;
	border-top: 1px solid var(--ag-hairline);
	border-collapse: collapse;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border: 0;
	border-bottom: 1px solid var(--ag-hairline);
}
.woocommerce table.shop_attributes th {
	padding-inline: 1rem;
	font-weight: 500;
	text-align: start;
}
.woocommerce table.shop_attributes td { font-style: normal; }
.woocommerce table.shop_attributes tr:nth-child(2n) th,
.woocommerce table.shop_attributes tr:nth-child(2n) td { background: var(--ag-olive-deep); }

.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--ag-muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ag-offwhite); }

/* WooCommerce ships this placeholder with a light #f2f2f2 frame. */
.woocommerce-product-gallery__image--placeholder { border-color: var(--ag-hairline) !important; }

/* Empty-checkout illustration is drawn in black: invert it so it reads on the dark ground. */
.wc-block-checkout-empty .wc-block-checkout-empty__image { filter: invert(0.88) sepia(0.2); }

/* Mini-cart drawer follows the dark identity. */
.wc-block-mini-cart__drawer .wc-block-components-drawer,
.wc-block-mini-cart__drawer .components-modal__content {
	background: var(--ag-olive-deep);
	color: var(--ag-offwhite);
}

/* ---------- Tablet ---------- */

@media (max-width: 1023px) {
	.ag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	h3.ag-tile__title { font-size: clamp(0.8rem, 0.6rem + 1vw, 1.1rem); }
}

/* ---------- Hero stacks below 900px: photo first, brand below ---------- */

@media (max-width: 899px) {
	.ag-hero {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}
	.ag-hero__media {
		position: relative;
		inset: auto;
		z-index: 0;
		aspect-ratio: 4 / 3;
		max-height: 62svh;
		width: 100%;
	}
	.ag-hero__media img {
		object-position: 50% 62%;
		-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
	}
	.ag-hero__brand {
		width: auto;
		margin: 0 !important;
		padding: var(--wp--preset--spacing--40) var(--wp--style--root--padding-right) var(--wp--preset--spacing--50) var(--wp--style--root--padding-left);
	}
	.ag-hero__jewels::after { height: 40px; margin-top: 1.2rem; }
}

/* ---------- Mobile ---------- */

@media (max-width: 599px) {
	:root { --ag-gutter: 8px; }
	.ag-hero__media { aspect-ratio: 4 / 5; }
	.ag-hero__media img { object-position: 48% 60%; }

	.ag-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "brand" "nav" "legal";
		justify-items: center;
		text-align: center;
	}
	.ag-footer__inner > .ag-wordmark { align-items: center; }
	.ag-footer__inner > .wp-block-navigation,
	.ag-footer__inner > .wp-block-navigation .wp-block-navigation__container { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.ag-tile img { transition: none; }
	.ag-tile:hover img { transform: none; }
}