/* ==========================================================================
   Alice Academy — shop archive and product detail page.

   Loaded on top of theme.css wherever a WooCommerce template renders. Only
   the pieces the shop needs live here; anything reusable belongs in
   theme.css. No new colour or spacing values — tokens only.
   ========================================================================== */

/* ------------------------------------------------------------- breadcrumbs */

.aa-crumbs {
	font-size: var(--aa-fs-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--aa-muted);
	padding-block: 1rem .25rem;
}
.aa-crumbs a { color: var(--aa-muted); }
.aa-crumbs a:hover { color: var(--aa-rose); }
.aa-crumbs__sep { margin-inline: .45em; color: var(--aa-hairline); }

/* ------------------------------------------------------------ shop archive */

.aa-shop { padding-block: 0 var(--aa-section); }

.aa-shop__head { padding-block: .25rem 1.25rem; }

/* Eyebrow — "The beauty wardrobe", rose, Archivo, tracked. */
.aa-shop__eyebrow {
	margin: .25rem 0 .55rem;
	font-size: var(--aa-fs-xs);
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--aa-rose);
}

.aa-shop__title {
	margin: 0;
	font-size: var(--aa-fs-lg);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-weight: 800;
}
@media (min-width: 900px) {
	.aa-shop__title { font-size: var(--aa-fs-xl); }
}

.aa-shop__intro { max-width: var(--aa-max-text); margin-top: .5rem; color: var(--aa-muted); }
.aa-shop__intro p:last-child { margin-bottom: 0; }

/* Category CMS banner: the head copy sits over a dark image when the term has
   a banner, otherwise it renders plain on the page ground. Scrim is a tint of
   the campaign base so imagery stays legible. */
.aa-shop__hero--banner {
	position: relative;
	margin-top: .5rem;
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
	border-radius: var(--aa-radius-card, .75rem);
	overflow: hidden;
	background-color: var(--aa-dark);
	background-image:
		linear-gradient(180deg, rgba(22,18,26,.35), rgba(22,18,26,.78)),
		var(--aa-shop-banner);
	background-size: cover;
	background-position: center;
	color: var(--aa-surface);
}
.aa-shop__hero--banner .aa-shop__eyebrow { color: var(--aa-rose-light); }
.aa-shop__hero--banner .aa-shop__title,
.aa-shop__hero--banner .aa-shop__intro { color: var(--aa-surface); }

/* Category filter row — horizontally scrollable on a phone. */
.aa-cats {
	border-block: 1px solid var(--aa-hairline);
	margin-bottom: 1.25rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.aa-cats::-webkit-scrollbar { display: none; }

.aa-cats__list {
	display: flex;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.aa-cats__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: .9rem;
	font-size: var(--aa-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--aa-muted);
	border-bottom: 2px solid transparent;
}
.aa-cats__link:hover { color: var(--aa-rose); }
.aa-cats__link.is-current {
	color: var(--aa-ink);
	border-bottom-color: var(--aa-rose);
}

/* Result count + ordering. */
.aa-shop__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: 1.25rem;
	font-size: var(--aa-fs-sm);
	color: var(--aa-muted);
}
.aa-shop__bar .woocommerce-result-count { margin: 0; }
.aa-shop__bar .woocommerce-ordering { margin: 0; }

.aa-shop__bar select,
.woocommerce-ordering select {
	min-height: 44px;
	padding: .5rem 2rem .5rem .75rem;
	border: 1px solid var(--aa-hairline);
	border-radius: var(--aa-radius);
	background: var(--aa-surface);
	color: var(--aa-ink);
	font: inherit;
	font-size: var(--aa-fs-sm);
}

.aa-shop__empty {
	padding-block: 2.5rem;
	text-align: center;
	color: var(--aa-muted);
}
.aa-shop__empty-msg {
	margin: 0 0 1.25rem;
	font-size: var(--aa-fs-lg);
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--aa-ink);
}

/* Pagination. */
.woocommerce-pagination { margin-top: 2.5rem; }
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce-pagination .page-numbers li { display: block; }
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: .5rem;
	border: 1px solid var(--aa-hairline);
	border-radius: var(--aa-radius);
	font-size: var(--aa-fs-sm);
	font-weight: 600;
}
.woocommerce-pagination .page-numbers .current,
.woocommerce-pagination .page-numbers a:hover {
	background: var(--aa-ink);
	border-color: var(--aa-ink);
	color: var(--aa-surface);
}

/* ------------------------------------------------------------- PDP layout */

.aa-pdp { padding-block: 0 var(--aa-section); }

.aa-pdp__layout {
	display: grid;
	gap: 1.25rem;
	align-items: start;
	padding-top: .5rem;
}
.aa-pdp__media {
	position: relative;

	/* Shared by the thumbnail strip and by the badge that has to clear it. */
	--aa-thumb: 76px;
	--aa-thumb-gap: .6rem;
}

/* The image leads: roughly 55/45, the split the reference uses. */
@media (min-width: 900px) {
	.aa-pdp__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(1.5rem, 3.4vw, 3rem);
	}

	/* Declared after the base rule above, or `position: relative` wins and the
	   image scrolls away from the buying column. */
	.aa-pdp__media { position: sticky; top: calc(var(--aa-header-h) + 1rem); }
}

@media (min-width: 1200px) {
	.aa-pdp__media { --aa-thumb: 88px; }
}

/*
 * The main image fills its column at its own aspect ratio. It used to sit in
 * a forced square with object-fit: contain, which letterboxed every portrait
 * bottle shot and left the picture looking small inside a lot of empty grey.
 * Only the placeholder keeps a square, because there is nothing to letterbox.
 */
.aa-gallery { position: relative; }

.aa-gallery > .flex-viewport,
.aa-gallery > .woocommerce-product-gallery__wrapper {
	border-radius: var(--aa-radius);
	overflow: hidden;
	background: var(--aa-surface-muted);
}

.aa-gallery .woocommerce-product-gallery__image > a,
.aa-gallery .woocommerce-product-gallery__image--placeholder { display: block; }

.aa-gallery img { width: 100%; height: auto; }

.aa-gallery .woocommerce-product-gallery__image--placeholder img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--aa-surface-muted);
}

/*
 * Thumbnail strip. Flexslider builds it, and only when the product has more
 * than one image — a single-image product gets no strip at all, so there is
 * nothing to hide.
 */
.aa-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--aa-thumb-gap, .6rem);
	margin: var(--aa-thumb-gap, .6rem) 0 0;
	padding: 0;
	list-style: none;
}
.aa-gallery .flex-control-thumbs li { margin: 0; list-style: none; }
.aa-gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	cursor: pointer;
	background: var(--aa-surface-muted);
	border: 1px solid var(--aa-hairline);
	border-radius: var(--aa-radius);
	opacity: .6;
	transition: opacity .2s var(--aa-ease), border-color .2s var(--aa-ease);
}
.aa-gallery .flex-control-thumbs img:hover { opacity: 1; }
.aa-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--aa-rose);
}

/*
 * Wide screens: the strip stands to the left of the image. `aa-gallery--multi`
 * is set server-side from the gallery image count, so the column is reserved
 * before flexslider builds the strip and nothing jumps on load. Products with
 * one image never get the class and the image takes the whole column.
 */
@media (min-width: 1000px) {
	.aa-gallery--multi {
		display: grid;
		grid-template-columns: var(--aa-thumb, 76px) minmax(0, 1fr);
		column-gap: var(--aa-thumb-gap, .6rem);
		align-items: start;
	}
	.aa-gallery--multi > .flex-control-thumbs {
		grid-column: 1;
		grid-row: 1;
		grid-template-columns: minmax(0, 1fr);
		margin: 0;
	}
	.aa-gallery--multi > .flex-viewport,
	.aa-gallery--multi > .woocommerce-product-gallery__wrapper {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
	}

	/* Keep the sale / sold-out badge over the image, not over the strip. */
	.aa-pdp__media:has(.aa-gallery--multi) .aa-badge {
		inset-inline-start: calc(var(--aa-thumb, 76px) + var(--aa-thumb-gap, .6rem) + .6rem);
	}
}

/* ------------------------------------------------------- PDP right column */

.aa-pdp__summary { display: block; }

/* Category eyebrow above the title — rose, Archivo, tracked. */
.aa-pdp__eyebrow {
	display: block;
	margin: 0 0 .55rem;
	font-size: var(--aa-fs-xs);
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--aa-rose);
}

.aa-pdp__title {
	margin: 0 0 .2rem;
	font-size: var(--aa-fs-lg);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: .01em;
	text-transform: uppercase;
}
@media (min-width: 900px) {
	.aa-pdp__title { font-size: var(--aa-fs-xl); }
}

.aa-pdp__sub {
	margin: 0 0 .5rem;
	color: var(--aa-muted);
	font-size: var(--aa-fs-sm);
	line-height: 1.4;
}

/* Price row: struck-through compare-at price first, live price larger. */
.aa-pdp__price,
.aa-atc .woocommerce-variation-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 .75rem;
	font-size: var(--aa-fs-md);
	font-weight: 700;
	color: var(--aa-ink);
}
.aa-pdp__price del,
.aa-atc .woocommerce-variation-price del {
	order: -1;
	font-size: var(--aa-fs-base);
	font-weight: 400;
	color: var(--aa-muted);
	text-decoration: line-through;
	opacity: 1;
}
.aa-pdp__price ins,
.aa-atc .woocommerce-variation-price ins {
	background: none;
	font-weight: 700;
	text-decoration: none;
	color: var(--aa-ink);
}
.aa-pdp__price .aa-price__from,
.aa-card__price .aa-price__from {
	font-size: var(--aa-fs-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--aa-muted);
}

/* Once a size is chosen the variation price is the live one, so the range
   above it steps aside rather than competing with it. Browsers without :has()
   simply keep both, which is Woo's own default. */
.aa-pdp__summary:has(.woocommerce-variation-add-to-cart-enabled) .aa-pdp__price { display: none; }

.aa-pdp__excerpt {
	color: var(--aa-muted);
	font-size: var(--aa-fs-base);
	line-height: 1.6;
	max-width: 52ch;
}
.aa-pdp__excerpt p { margin: 0 0 .75rem; }

/* Stock pill — rose dot + "ships in 24h" line, between price and add-to-cart.
   Dot goes subtle when the product is out of stock. */
.aa-pdp__stock {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .9rem;
	padding: .4rem .9rem;
	border-radius: var(--aa-radius-pill, 999px);
	background: var(--aa-surface-muted);
	font-size: var(--aa-fs-sm);
	font-weight: 500;
	color: var(--aa-ink);
}
.aa-pdp__stock-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--aa-rose);
}
.aa-pdp__stock.is-out .aa-pdp__stock-dot { background: var(--aa-subtle); }

.aa-pdp__buy { margin-block: .75rem 0; }

.aa-pdp__tax {
	margin: 0;
	color: var(--aa-muted);
	font-size: var(--aa-fs-xs);
	line-height: 1.5;
}

/* ------------------------------------------- description panel, right column */

/*
 * A bordered box with a grey header bar, sitting in the buying column right
 * under the button. A native <details> so it opens and closes without any
 * JavaScript; open on load, because the product description is the copy that
 * sells the product.
 */
.aa-panel {
	margin-top: 1.25rem;
	border: 1px solid var(--aa-hairline);
	border-radius: var(--aa-radius);
	overflow: hidden;
	background: var(--aa-surface);
}

.aa-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 44px;
	padding: .75rem 1rem;
	background: var(--aa-surface-muted);
	color: var(--aa-ink);
	cursor: pointer;
	list-style: none;
	font-size: var(--aa-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background .2s var(--aa-ease);
}
.aa-panel__head::-webkit-details-marker { display: none; }
.aa-panel__head:hover { background: var(--aa-surface-strong); color: var(--aa-rose); }
.aa-panel__head:focus-visible { outline: 2px solid var(--aa-ink); outline-offset: -2px; }
.aa-panel__head::after {
	content: '+';
	font-size: var(--aa-fs-md);
	font-weight: 400;
	line-height: 1;
	color: var(--aa-muted);
}
.aa-panel[open] > .aa-panel__head::after { content: '\2013'; }

.aa-panel__body { padding: 1rem; }
.aa-panel__body > :last-child { margin-bottom: 0; }

.aa-panel__label {
	margin: 1rem 0 .5rem;
	font-size: var(--aa-fs-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--aa-muted);
}
.aa-panel__body > .aa-panel__label:first-child { margin-top: 0; }

/* ------------------------------------------------------------- size pills */

.aa-sizes { margin-bottom: .75rem; }

.aa-sizes__label {
	display: block;
	margin-bottom: .4rem;
	font-size: var(--aa-fs-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--aa-muted);
}

.aa-pills {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.aa-pill {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .1rem;
	min-height: 44px;
	min-width: 4.5rem;
	padding: .35rem .8rem;
	background: var(--aa-surface);
	border: 1px solid var(--aa-hairline);
	border-radius: var(--aa-radius);
	color: var(--aa-ink);
	text-align: center;
	transition: border-color .2s var(--aa-ease), background .2s var(--aa-ease), color .2s var(--aa-ease);
}
.aa-pill:hover { border-color: var(--aa-rose); }
.aa-pill:focus-visible { outline: 2px solid var(--aa-ink); outline-offset: 2px; }

.aa-pill__size {
	font-size: var(--aa-fs-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
}
.aa-pill__price {
	font-size: var(--aa-fs-xs);
	line-height: 1.2;
	color: var(--aa-muted);
}

.aa-pill[aria-pressed="true"] {
	border-color: var(--aa-ink);
	background: var(--aa-ink);
	color: var(--aa-surface);
}
.aa-pill[aria-pressed="true"] .aa-pill__price { color: var(--aa-sand); }

.aa-pill--oos,
.aa-pill[disabled] {
	opacity: .45;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* ------------------------------------------------- add-to-cart form chrome */

.aa-atc .woocommerce-variation-availability { font-size: var(--aa-fs-sm); color: var(--aa-muted); }
.aa-atc .woocommerce-variation-description { font-size: var(--aa-fs-sm); color: var(--aa-muted); }
.aa-atc .woocommerce-variation-description p:last-child { margin-bottom: .5rem; }

/* Stacked: quantity, reassurance rows, tax note, then a full-width button. */
.aa-atc .woocommerce-variation-add-to-cart,
.cart.aa-atc .variations_button {
	display: grid;
	gap: .7rem;
	justify-items: stretch;
	margin-top: .25rem;
}

/* Quantity stepper — bordered box, minus / value / plus. */
.aa-atc .quantity {
	display: inline-flex;
	align-items: stretch;
	justify-self: start;
	border: 1px solid var(--aa-hairline);
	border-radius: var(--aa-radius);
	overflow: hidden;
	background: var(--aa-surface);
}

.aa-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: var(--aa-surface);
	color: var(--aa-ink);
	font-size: var(--aa-fs-md);
	line-height: 1;
	transition: background .2s var(--aa-ease);
}
.aa-qty__btn:hover { background: var(--aa-surface-strong); }
.aa-qty__btn:focus-visible { outline: 2px solid var(--aa-ink); outline-offset: -2px; }

.aa-atc .quantity .qty,
.woocommerce div.product form.cart .quantity .qty {
	width: 3.25rem;
	min-height: 44px;
	padding: .5rem .25rem;
	text-align: center;
	border: 0;
	border-inline: 1px solid var(--aa-hairline);
	border-radius: 0;
	background: var(--aa-surface);
	font: inherit;
	font-size: var(--aa-fs-base);
	font-weight: 600;
	-moz-appearance: textfield;
	appearance: textfield;
}
.aa-atc .quantity .qty::-webkit-outer-spin-button,
.aa-atc .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.aa-atc .single_add_to_cart_button,
.single_add_to_cart_button.button {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: .9rem 1.5rem;
	border: 1px solid var(--aa-ink);
	border-radius: var(--aa-radius);
	background: var(--aa-ink);
	color: var(--aa-surface);
	font-size: var(--aa-fs-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	transition: background .2s var(--aa-ease), border-color .2s var(--aa-ease);
}
.aa-atc .single_add_to_cart_button:hover {
	background: var(--aa-rose);
	border-color: var(--aa-rose);
}
.aa-atc .single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--aa-ink);
	outline-offset: 2px;
}
.aa-atc .single_add_to_cart_button.disabled,
.aa-atc .single_add_to_cart_button:disabled {
	opacity: .4;
	cursor: not-allowed;
}

.aa-atc .stock.out-of-stock { color: var(--aa-sale); font-weight: 600; }

/* ------------------------------------------- simple-product add-to-cart
 * Simple products (the bundles) now use the theme's own `simple.php`, so the
 * form carries `aa-atc` and the stepper markup — the shared `.aa-atc`
 * quantity rules above style the control itself. All that is missing is the
 * stacked rhythm, which the variable template gets from its
 * `.variations_button` wrapper; a simple form has no such wrapper, so the
 * form element is the grid.
 */
.woocommerce div.product form.cart.aa-atc:not(.variations_form) {
	display: grid;
	gap: .9rem;
	justify-items: stretch;
	margin-top: .25rem;
}

.woocommerce div.product form.cart.aa-atc:not(.variations_form) .quantity {
	justify-self: start;
}

/* ios-zoom-guard (product page)
   Safari on iOS zooms the whole page when a focused field is smaller than
   16px. The checkout already guards against this; the product-page quantity
   field was left at 15px, so tapping it lurched the page right at the moment
   a customer is trying to buy. Covers both the stepper (variable products)
   and the plain box (simple products). Desktop size is left alone. */
@media (max-width: 899px) {
	.aa-atc .quantity .qty,
	.woocommerce div.product form.cart .quantity .qty,
	.woocommerce div.product form.cart:not(.variations_form) .quantity .qty {
		font-size: 16px;
	}
}

/* ------------------------------------------------------------ benefit rows */

.aa-pdp__trust {
	display: grid;
	gap: .35rem;
	margin: 0;
	padding: .25rem 0 0;
	list-style: none;
	border-top: 1px solid var(--aa-hairline);
	padding-top: .7rem;
}
.aa-pdp__trust-row {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: var(--aa-fs-sm);
	line-height: 1.4;
	color: var(--aa-ink);
}
.aa-pdp__trust-ico {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--aa-ink);
}
.aa-pdp__trust-ico svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------- accordion */

.aa-acc { margin-top: 1.5rem; border-top: 1px solid var(--aa-hairline); }

/* Full-width version under the two columns: each header is a grey bar. */
.aa-acc--wide {
	margin-top: 2.5rem;
	border-top: 0;
	display: grid;
	gap: .5rem;
}
.aa-acc--wide .aa-acc__item {
	border: 1px solid var(--aa-hairline);
	border-radius: var(--aa-radius);
	overflow: hidden;
}
.aa-acc--wide .aa-acc__head {
	padding: 1rem 1.1rem;
	background: var(--aa-surface-muted);
	font-size: var(--aa-fs-sm);
	letter-spacing: 0.08em;
}
.aa-acc--wide .aa-acc__head:hover { background: var(--aa-surface-strong); color: var(--aa-rose); }
.aa-acc--wide .aa-acc__body {
	padding: 1.1rem;
	max-width: var(--aa-max-text);
}

.aa-acc__item { border-bottom: 1px solid var(--aa-hairline); }

.aa-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 48px;
	padding-block: .9rem;
	cursor: pointer;
	list-style: none;
	font-size: var(--aa-fs-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.aa-acc__head::-webkit-details-marker { display: none; }
.aa-acc__head:focus-visible { outline: 2px solid var(--aa-ink); outline-offset: -2px; }
.aa-acc__head::after {
	content: '+';
	font-size: var(--aa-fs-md);
	font-weight: 400;
	color: var(--aa-muted);
}
.aa-acc__item[open] > .aa-acc__head::after { content: '\2013'; }

.aa-acc__body { padding-bottom: 1.1rem; }
.aa-acc__body > :last-child { margin-bottom: 0; }
.aa-acc__body table { width: 100%; border-collapse: collapse; font-size: var(--aa-fs-sm); }
.aa-acc__body table th,
.aa-acc__body table td {
	padding: .5rem 0;
	text-align: start;
	border-bottom: 1px solid var(--aa-hairline);
	vertical-align: top;
}
.aa-acc__body table th { width: 38%; font-weight: 600; }
.aa-acc__body table td { color: var(--aa-muted); }
.aa-acc__body table p { margin: 0; }

/*
 * No .product_meta rules: the SKU / category block is no longer rendered on
 * the PDP. Every variable product in this catalogue reports SKU "N/A" and the
 * category is already in the breadcrumb above the fold.
 */

/* --------------------------------------------------- sticky mobile buy bar */

.aa-stickybuy {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 70;
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .6rem var(--aa-gutter);
	padding-block-end: calc(.6rem + env(safe-area-inset-bottom, 0px));
	background: var(--aa-surface);
	color: var(--aa-ink);
	border-top: 1px solid var(--aa-hairline);
	box-shadow: var(--aa-shadow);
}
@media (min-width: 900px) {
	.aa-stickybuy { display: none; }
}

.aa-stickybuy__info { min-width: 0; flex: 1 1 auto; display: grid; }
.aa-stickybuy__title {
	font-size: var(--aa-fs-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--aa-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.aa-stickybuy__price { font-size: var(--aa-fs-sm); color: var(--aa-muted); }
.aa-stickybuy__price del { display: none; }
.aa-stickybuy__price ins { background: none; text-decoration: none; }

.aa-stickybuy__btn {
	flex: 0 0 auto;
	min-height: 44px;
	padding-inline: 1.25rem;
	white-space: nowrap;
	background: var(--aa-ink);
	border-color: var(--aa-ink);
	color: var(--aa-surface);
}

/* The sticky mobile buy bar covers the end of the page; keep the footer clear. */
@media (max-width: 899px) {
	body.single-product .aa-footer { padding-bottom: 5rem; }
}

/* -------------------------------------------------------- woo notices */

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	margin: 0 0 1rem;
	padding: .85rem 1rem;
	list-style: none;
	border: 1px solid var(--aa-hairline);
	border-inline-start: 3px solid var(--aa-rose);
	border-radius: var(--aa-radius);
	background: var(--aa-surface-muted);
	font-size: var(--aa-fs-sm);
}
.woocommerce-notices-wrapper .woocommerce-error { border-inline-start-color: var(--aa-sale); }
.woocommerce-notices-wrapper .button {
	float: inline-end;
	font-weight: 700;
	text-decoration: underline;
}

/* WooCommerce's layout stylesheet still ships `div.product div.images
   { float: left; width: 48% }`, and the gallery carries the `images` class.
   Inside a CSS grid column that float pinned the image to 48% of its column —
   the "small picture". The grid owns the columns here, so the float and the
   percentage both have to go. */
.aa-pdp__media .aa-gallery,
.woocommerce div.product .aa-pdp__media div.images {
	float: none;
	width: 100%;
	margin-bottom: 0;
}

.aa-pdp__summary,
.woocommerce div.product div.summary.aa-pdp__summary {
	float: none;
	width: 100%;
	max-width: none;
	margin-bottom: 0;
}

/* ------------------------------------------------- gallery zoom affordance */

/* Woo's JS injects the trigger as a bare 🔍 emoji pinned to the top-left of
   the image. It reads as a stray character rather than a control, so the emoji
   is hidden and the anchor is redrawn as a real button.

   It stays out of sight until the shopper hovers the image — the image is the
   thing to look at, and an always-visible chrome element competes with it.
   Keyboard focus and touch devices, which have no hover, always show it. */
.aa-gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	inset-block-start: auto;
	inset-block-end: .75rem;
	inset-inline-end: .75rem;
	inset-inline-start: auto;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	border-radius: 50%;
	background-color: var(--aa-surface);
	box-shadow: 0 1px 2px rgba(22,18,26,.14), 0 6px 18px rgba(22,18,26,.16);
	font-size: 0;
	line-height: 0;
	text-indent: 0;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .18s var(--aa-ease), transform .18s var(--aa-ease), background-color .18s var(--aa-ease);
}

/* Magnifier glyph. Drawn with a mask so its colour comes from the ink token —
   no hex lives in the stylesheet (the mask SVG's own stroke colour is ignored,
   only its alpha is used). */
.aa-gallery .woocommerce-product-gallery__trigger::before {
	content: '';
	width: 20px;
	height: 20px;
	background: var(--aa-ink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6M11 8.4v5.2M8.4 11h5.2'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6M11 8.4v5.2M8.4 11h5.2'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

/* The emoji Woo prints as the trigger's text content. */
.aa-gallery .woocommerce-product-gallery__trigger > span,
.aa-gallery .woocommerce-product-gallery__trigger img { display: none; }

.aa-pdp__media:hover .woocommerce-product-gallery__trigger,
.aa-gallery:hover .woocommerce-product-gallery__trigger,
.aa-gallery .woocommerce-product-gallery__trigger:hover,
.aa-gallery .woocommerce-product-gallery__trigger:focus-visible {
	opacity: 1;
	transform: none;
}

.aa-gallery .woocommerce-product-gallery__trigger:hover { background-color: var(--aa-surface-muted); }

.aa-gallery .woocommerce-product-gallery__trigger:focus-visible {
	outline: 2px solid var(--aa-ink);
	outline-offset: 2px;
}

/* No hover to reveal it on a touch screen, so leave it showing. */
@media (hover: none) {
	.aa-gallery .woocommerce-product-gallery__trigger { opacity: 1; transform: none; }
}

/* Tell the pointer the image opens. */
.aa-gallery .woocommerce-product-gallery__image a,
.aa-gallery .woocommerce-product-gallery__image img { cursor: zoom-in; }

@media (prefers-reduced-motion: reduce) {
	.aa-gallery .woocommerce-product-gallery__trigger { transition: none; }
}