/* ==========================================================================
   ARFA KHUSHBOO — 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 */

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

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

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

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

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

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

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

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

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

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

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

.ak-shop__empty {
	padding-block: 2.5rem;
	text-align: center;
	color: var(--ak-muted);
}

/* 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(--ak-line);
	border-radius: var(--ak-radius);
	font-size: var(--ak-fs-sm);
	font-weight: 600;
}
.woocommerce-pagination .page-numbers .current,
.woocommerce-pagination .page-numbers a:hover {
	background: var(--ak-black);
	border-color: var(--ak-black);
	color: var(--ak-white);
}

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

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

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

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

/* The image leads: roughly 55/45, the split the reference uses. */
@media (min-width: 900px) {
	.ak-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. */
	.ak-pdp__media { position: sticky; top: calc(var(--ak-header-h) + 1rem); }
}

@media (min-width: 1200px) {
	.ak-pdp__media { --ak-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.
 */
.ak-gallery { position: relative; }

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

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

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

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

/*
 * 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.
 */
.ak-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ak-thumb-gap, .6rem);
	margin: var(--ak-thumb-gap, .6rem) 0 0;
	padding: 0;
	list-style: none;
}
.ak-gallery .flex-control-thumbs li { margin: 0; list-style: none; }
.ak-gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	cursor: pointer;
	background: var(--ak-cream);
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
	opacity: .6;
	transition: opacity .2s var(--ak-ease), border-color .2s var(--ak-ease);
}
.ak-gallery .flex-control-thumbs img:hover { opacity: 1; }
.ak-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--ak-black);
}

/*
 * Wide screens: the strip stands to the left of the image. `ak-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) {
	.ak-gallery--multi {
		display: grid;
		grid-template-columns: var(--ak-thumb, 76px) minmax(0, 1fr);
		column-gap: var(--ak-thumb-gap, .6rem);
		align-items: start;
	}
	.ak-gallery--multi > .flex-control-thumbs {
		grid-column: 1;
		grid-row: 1;
		grid-template-columns: minmax(0, 1fr);
		margin: 0;
	}
	.ak-gallery--multi > .flex-viewport,
	.ak-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. */
	.ak-pdp__media:has(.ak-gallery--multi) .ak-badge {
		inset-inline-start: calc(var(--ak-thumb, 76px) + var(--ak-thumb-gap, .6rem) + .6rem);
	}
}

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

.ak-pdp__summary { display: block; }

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

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

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

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

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

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

.ak-pdp__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin-top: .6rem;
}
.ak-pdp__wa svg { width: 18px; height: 18px; color: var(--ak-black); }
.ak-pdp__wa:hover svg { color: var(--ak-white); }

/* ------------------------------------------- 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 this is the copy that sells the scent.
 */
.ak-panel {
	margin-top: 1.25rem;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
	overflow: hidden;
	background: var(--ak-white);
}

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

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

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

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

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

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

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

.ak-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(--ak-white);
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
	color: var(--ak-black);
	text-align: center;
	transition: border-color .2s var(--ak-ease), background .2s var(--ak-ease), color .2s var(--ak-ease);
}
.ak-pill:hover { border-color: var(--ak-black); }
.ak-pill:focus-visible { outline: 2px solid var(--ak-black); outline-offset: 2px; }

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

.ak-pill[aria-pressed="true"] {
	border-color: var(--ak-black);
	background: var(--ak-black);
	color: var(--ak-white);
}
.ak-pill[aria-pressed="true"] .ak-pill__price { color: var(--ak-gold-soft); }

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

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

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

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

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

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

.ak-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(--ak-line);
	border-radius: 0;
	background: var(--ak-white);
	font: inherit;
	font-size: var(--ak-fs-base);
	font-weight: 600;
	-moz-appearance: textfield;
	appearance: textfield;
}
.ak-atc .quantity .qty::-webkit-outer-spin-button,
.ak-atc .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ak-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(--ak-black);
	border-radius: var(--ak-radius);
	background: var(--ak-black);
	color: var(--ak-white);
	font-size: var(--ak-fs-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	transition: background .2s var(--ak-ease), border-color .2s var(--ak-ease);
}
.ak-atc .single_add_to_cart_button:hover {
	background: var(--ak-gold);
	border-color: var(--ak-gold);
}
.ak-atc .single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--ak-black);
	outline-offset: 2px;
}
.ak-atc .single_add_to_cart_button.disabled,
.ak-atc .single_add_to_cart_button:disabled {
	opacity: .4;
	cursor: not-allowed;
}

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

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

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

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

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

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

.ak-acc__item { border-bottom: 1px solid var(--ak-line); }

.ak-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(--ak-fs-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.ak-acc__head::-webkit-details-marker { display: none; }
.ak-acc__head:focus-visible { outline: 2px solid var(--ak-black); outline-offset: -2px; }
.ak-acc__head::after {
	content: '+';
	font-size: var(--ak-fs-md);
	font-weight: 400;
	color: var(--ak-muted);
}
.ak-acc__item[open] > .ak-acc__head::after { content: '\2013'; }

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

/* Scent notes */
.ak-notes {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ak-notes__item {
	padding: .3rem .7rem;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
	background: var(--ak-cream);
	font-size: var(--ak-fs-sm);
	color: var(--ak-ink);
}

/*
 * 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 */

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

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

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

/* The bar covers the end of the page and the floating WhatsApp button. */
@media (max-width: 899px) {
	body.single-product .ak-footer { padding-bottom: 5rem; }
	body.single-product .ak-wa { inset-block-end: 5.25rem; }
}

/* -------------------------------------------------------- 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(--ak-line);
	border-inline-start: 3px solid var(--ak-gold);
	border-radius: var(--ak-radius);
	background: var(--ak-cream);
	font-size: var(--ak-fs-sm);
}
.woocommerce-notices-wrapper .woocommerce-error { border-inline-start-color: var(--ak-sale); }
.woocommerce-notices-wrapper .button {
	float: inline-end;
	font-weight: 700;
	text-decoration: underline;
}

/* The floating WhatsApp button and the sticky buy bar both live in the
   bottom-right on mobile, and they collided. Lift the button clear of the
   bar on product pages only; everywhere else it keeps its normal position. */
@media (max-width: 899px) {
	.single-product .ak-wa {
		inset-block-end: calc(var(--ak-stickybuy-h, 68px) + 0.75rem);
	}
}

/* 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. */
.ak-pdp__media .ak-gallery,
.woocommerce div.product .ak-pdp__media div.images {
	float: none;
	width: 100%;
	margin-bottom: 0;
}

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

/* The "Inspired by …" reference on the product page. Same role as on the card:
   quieter than the scent line, because the house name is the product. */
.ak-pdp__inspired {
	margin: .3rem 0 0;
	font-size: var(--ak-fs-sm);
	line-height: 1.5;
	color: var(--ak-muted);
}


/* ------------------------------------------------- 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. */
.ak-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(--ak-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' 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");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	box-shadow: 0 1px 2px rgba(17,17,17,.14), 0 6px 18px rgba(17,17,17,.16);
	font-size: 0;
	line-height: 0;
	text-indent: 0;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .18s var(--ak-ease), transform .18s var(--ak-ease), background-color .18s var(--ak-ease);
}

/* The emoji itself. */
.ak-gallery .woocommerce-product-gallery__trigger > span,
.ak-gallery .woocommerce-product-gallery__trigger img { display: none; }

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

.ak-gallery .woocommerce-product-gallery__trigger:hover { background-color: var(--ak-cream); }

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

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

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

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