/* ==========================================================================
   Single product
   ========================================================================== */

.site-main--shop { max-width: none; padding: 0; }

/* --- Breadcrumb strip ------------------------------------------------------ */

.pdp-crumbs {
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
	padding: 18px 0;
	font-size: 15px;
	color: var(--c-muted);
}

.pdp-crumbs a { color: var(--c-body); }
.pdp-crumbs a:hover { color: var(--c-ink); }
.pdp-crumbs .sep { margin: 0 12px; color: var(--c-muted); }

/* Woo ships `.woocommerce .woocommerce-breadcrumb { margin: 0 0 1em }`, which
   dropped 13.8px of dead space inside this strip and threw its 18px padding out
   of balance. Qualified with the element to clear Woo's (0,2,0) outright rather
   than relying on load order. */
.pdp-crumbs nav.woocommerce-breadcrumb {
	margin: 0;
	padding: 0;
}

/* --- Layout ---------------------------------------------------------------- */

.pdp {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
	gap: 0;
	align-items: start;
	padding-top: 44px;
	padding-bottom: 56px;
}

/* --- Gallery ---------------------------------------------------------------- */

/* The gallery is usually shorter than the summary, so it pins while the
   summary scrolls past, then the whole section moves together. `align-self:
   start` keeps the grid item from stretching, which sticky requires. */
.pdp__gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding-right: 48px;
	position: sticky;
	top: 24px;
	align-self: start;
}

.pdp__gallery--single { grid-template-columns: 1fr; }

.pdp-shot {
	position: relative;
	margin: 0;
	/* 4:5 rather than square: the catalogue photography is 2:3 portrait, so a
	   square frame letterboxed it and the product rendered small. */
	aspect-ratio: 4 / 5;
	background: var(--c-media);
	overflow: hidden;
}

/* The image is positioned against the trigger rather than sized with height:
   100%. A percentage height on a child of a <button> does not resolve — the
   image fell back to its intrinsic 2:3, overflowed the square tile, and was
   clipped by overflow:hidden, which is what threw each shot off centre.
   Anchoring to a definite absolutely-positioned box removes that dependency;
   object-fit then centres the picture inside it. */
.pdp-shot__trigger {
	position: absolute;
	inset: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
}

/* Two classes, not one: WooCommerce ships `.woocommerce img { height: auto }`
   at specificity (0,1,1), which beats a bare `.pdp-shot__img` (0,1,0) however
   late this file loads. Woo does not set width, so only the height was being
   reverted — the image kept its intrinsic 2:3 and spilled out of the square. */
.pdp-shot .pdp-shot__img {
	position: absolute;
	/* Narrow 2% inset so the shot fills as much of the tile as possible; the
	   frame itself supplies the breathing room. */
	top: 2%;
	left: 2%;
	width: 96%;
	height: 96%;
	max-width: none;
	padding: 0;
	object-fit: contain;
}

/* Purely decorative — the trigger button underneath handles the click. */
.pdp-shot__zoom {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--c-ink);
	box-shadow: 0 1px 6px rgba(26, 20, 19, .12);
	pointer-events: none;
}

/* --- Summary ---------------------------------------------------------------- */

.pdp__summary {
	padding-left: 48px;
	border-left: 1px solid var(--c-line);
}

.pdp__title {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(30px, 2.4vw, 42px);
	line-height: 1.1;
	color: var(--c-ink);
}

.pdp__rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-size: 15px;
	color: var(--c-body);
}

.pdp__rating .star-rating { margin: 0; }
.pdp__rating-value { font-weight: 600; color: var(--c-ink); }
.pdp__rating-count { color: var(--c-muted); text-decoration: underline; }

.pdp__excerpt {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--c-body);
}

.pdp__price {
	margin-top: 28px;
	padding-top: 26px;
	border-top: 1px solid var(--c-line);
}

.pdp__price-value {
	margin-top: 6px;
	font-size: 28px;
	font-weight: 700;
	color: var(--c-ink);
}

.pdp__price-value del {
	margin-right: 10px;
	font-weight: 400;
	font-size: 22px;
	color: var(--c-muted);
	text-decoration: line-through;
}
.pdp__price-value ins { text-decoration: none; color: var(--c-sale); }

/* --- Options ---------------------------------------------------------------- */

.pdp-option { margin-top: 26px; }

.pdp-option__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--c-ink);
	margin-bottom: 12px;
}

.pdp-swatches { display: flex; flex-wrap: wrap; gap: 12px; }

.pdp-swatch { cursor: pointer; line-height: 0; }
.pdp-swatch input { position: absolute; opacity: 0; pointer-events: none; }

.pdp-swatch__dot {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(26, 20, 19, .18);
	transition: box-shadow .18s ease;
}

.pdp-swatch input:checked + .pdp-swatch__dot {
	box-shadow: inset 0 0 0 1px rgba(26, 20, 19, .18), 0 0 0 2px #fff, 0 0 0 4px var(--c-primary);
}
.pdp-swatch input:focus-visible + .pdp-swatch__dot { outline: 2px solid var(--c-ink); outline-offset: 4px; }

.pdp-sizes { display: flex; flex-wrap: wrap; gap: 10px; }

.pdp-size { cursor: pointer; }
.pdp-size input { position: absolute; opacity: 0; pointer-events: none; }

.pdp-size span {
	display: grid;
	place-items: center;
	min-width: 54px;
	height: 46px;
	padding: 0 12px;
	border: 1px solid var(--c-line);
	font-size: 15px;
	color: var(--c-ink);
	transition: border-color .18s ease, background .18s ease;
}
.pdp-size:hover span { border-color: var(--c-ink); }
.pdp-size input:checked + span { border-color: var(--c-primary); background: var(--c-primary); color: #fff; }
.pdp-size input:focus-visible + span { outline: 2px solid var(--c-ink); outline-offset: 2px; }

/* --- Add to cart ------------------------------------------------------------- */

.pdp form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin-top: 30px;
}

.pdp form.cart .pdp-option { flex: 1 0 100%; margin-top: 0; }
.pdp form.cart .pdp-option:first-child { margin-top: 4px; }

.pdp form.cart .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--c-line);
}

.pdp form.cart .quantity input[type="number"] {
	width: 54px;
	height: 54px;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 16px;
	color: var(--c-ink);
	-moz-appearance: textfield;
	appearance: textfield;
}
.pdp form.cart .quantity input::-webkit-outer-spin-button,
.pdp form.cart .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.qty-step {
	display: grid;
	place-items: center;
	width: 46px;
	height: 54px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--c-ink);
	transition: opacity .2s ease;
}
.qty-step:hover { opacity: .55; }

.pdp form.cart .single_add_to_cart_button {
	flex: 1;
	min-width: 0;
	height: 54px;
	padding: 0 24px;
	border: 1px solid var(--c-primary);
	border-radius: 0;
	background: var(--c-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .1em;
	white-space: nowrap;
	transition: background .2s ease;
}
.pdp form.cart .single_add_to_cart_button:hover { background: var(--c-primary-hover); }

/* --- Service panels ---------------------------------------------------------- */

.pdp-panels { margin-top: 40px; }

.pdp-panel { border-top: 1px solid var(--c-line); }
.pdp-panel:last-child { border-bottom: 1px solid var(--c-line); }

.pdp-panel__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 0;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	color: var(--c-ink);
	list-style: none;
}
.pdp-panel__head::-webkit-details-marker { display: none; }
.pdp-panel__head > span { flex: 1; }
.pdp-panel__head .ico--chev-d { transition: transform .25s ease; }
.pdp-panel[open] .pdp-panel__head .ico--chev-d { transform: rotate(180deg); }

.pdp-panel__text {
	padding: 0 0 20px 32px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--c-body);
}

/* --- Tabs --------------------------------------------------------------------- */

.woocommerce-tabs { padding: 20px 0 40px; }

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--c-line);
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 16px;
	border-bottom: 2px solid transparent;
	font-size: 16px;
	font-weight: 500;
	color: var(--c-muted);
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover { color: var(--c-ink); }
.woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--c-ink); }

.woocommerce-tabs .panel > h2 { display: none; }

.woocommerce-tabs .panel p {
	max-width: 90ch;
	margin-bottom: 16px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--c-body);
}

/* --- Related ------------------------------------------------------------------- */

.related > h2,
.upsells > h2 {
	margin-bottom: 20px;
	font-size: clamp(23px, 1.7vw, 32px);
	font-weight: 700;
	color: var(--c-ink);
}

.related ul.products,
.upsells ul.products,
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(var(--wc-cols, 5), minmax(0, 1fr));
	gap: var(--grid-gap);
	margin: 0 0 44px;
	padding: 0;
	list-style: none;
}

/* WooCommerce's own grid uses floats + percentage widths, and its clearfix
   pseudo-elements become stray grid items (the empty first cell). Both are
   neutralised here so the CSS grid above governs the layout. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.related ul.products::before,
.related ul.products::after {
	display: none !important;
	content: none !important;
}

.woocommerce ul.products li.product,
.related ul.products li.product,
ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	/* Grid stretches the li to the tallest in its row; the card inside has to
	   be told to fill it, or short cards float with a ragged bottom edge. */
	display: flex;
	flex-direction: column;
}

/* --- Lightbox ------------------------------------------------------------------ */

.pdp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: grid;
	place-items: center;
	padding: 5vh 5vw;
	background: rgba(26, 20, 19, .88);
}
.pdp-lightbox[hidden] { display: none; }

.pdp-lightbox img {
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
	background: var(--c-soft);
}

.pdp-lightbox__close {
	position: absolute;
	top: 24px;
	right: 30px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 34px;
	line-height: 1;
}

.pdp-lightbox__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	transform: translateY(-50%);
	transition: background .2s ease;
}
.pdp-lightbox__arrow:hover { background: rgba(255, 255, 255, .22); }
.pdp-lightbox__arrow--prev { left: clamp(10px, 3vw, 40px); }
.pdp-lightbox__arrow--next { right: clamp(10px, 3vw, 40px); }

.pdp-lightbox__count {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	color: #fff;
	font-size: 13px;
	letter-spacing: .04em;
	text-align: center;
	opacity: .75;
}

/* --- Responsive ------------------------------------------------------------------ */

@media (max-width: 1180px) {
	.pdp { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
	.pdp__gallery { padding-right: 32px; }
	.pdp__summary { padding-left: 32px; }
	.related ul.products, .woocommerce ul.products { --wc-cols: 4; }
}

@media (max-width: 900px) {
	.pdp { grid-template-columns: 1fr; padding-top: 28px; }
	.pdp__gallery { padding-right: 0; position: static; }
	.pdp__summary { margin-top: 34px; padding-left: 0; border-left: 0; }
	.related ul.products, .woocommerce ul.products { --wc-cols: 3; }
}

@media (max-width: 640px) {
	.pdp__gallery { grid-template-columns: 1fr; }
	.related ul.products, .woocommerce ul.products { --wc-cols: 2; }
	.woocommerce-tabs ul.tabs { gap: 22px; }
	.pdp form.cart .single_add_to_cart_button { min-width: 0; }
}

/* --- Shop / archive pages ------------------------------------------------------ */

.wc-page { padding-top: 40px; padding-bottom: 56px; }

.wc-page .woocommerce-products-header__title,
.wc-page .page-title {
	margin-bottom: 8px;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(30px, 2.4vw, 44px);
	color: var(--c-ink);
}

.woocommerce-result-count { font-size: 15px; color: var(--c-muted); margin: 0; }

.woocommerce-ordering select {
	padding: 10px 14px;
	border: 1px solid var(--c-line);
	background: #fff;
	font-size: 15px;
	color: var(--c-ink);
}

/* --- Toolbar: result count + sorting, then the filter row ------------------ */

.shop-toolbar { margin-bottom: 30px; }

.shop-toolbar__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 16px;
}

/* Woo floats these by default, which would break the flex row. */
.shop-toolbar__top .woocommerce-result-count,
.shop-toolbar__top .woocommerce-ordering {
	float: none;
	margin: 0;
}

.shop-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	border: 1px solid var(--c-line);
}

.shop-filters__field {
	position: relative;
	flex: 1 1 160px;
	min-width: 0;
	border-right: 1px solid var(--c-line);
}

/* Chevron drawn in CSS so the selects need no icon markup. */
.shop-filters__field::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 8px;
	height: 8px;
	border-right: 1.4px solid var(--c-body);
	border-bottom: 1.4px solid var(--c-body);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.shop-filters select {
	width: 100%;
	height: 100%;
	padding: 19px 42px 19px 24px;
	border: 0;
	border-radius: 0;
	background: #fff;
	font-size: 16px;
	color: var(--c-body);
	text-overflow: ellipsis;
	-webkit-appearance: none;
	appearance: none;
}
.shop-filters select:focus { outline: 1px solid var(--c-ink); outline-offset: -1px; }

.shop-filters__submit {
	flex: 0 0 auto;
	min-width: 180px;
	padding: 19px 34px;
	border: 0;
	background: var(--c-dark);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	transition: background .2s ease;
}
.shop-filters__submit:hover { background: var(--c-primary-hover); }

.shop-filters__reset {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	padding: 0 24px;
	border-left: 1px solid var(--c-line);
	font-size: 14px;
	color: var(--c-muted);
	text-decoration: underline;
}
.shop-filters__reset:hover { color: var(--c-ink); }

/* --- Pagination ------------------------------------------------------------- */

.woocommerce-pagination {
	margin-top: 44px;
	text-align: center;
}

.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; }

.woocommerce-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--c-line);
	background: #fff;
	font-size: 15px;
	color: var(--c-body);
	transition: border-color .2s ease, color .2s ease;
}

/* Woo ships `.woocommerce nav.woocommerce-pagination ul li span.current`
   — specificity (0,3,4), with a lilac fill that beats any bare class no
   matter how late this file loads. The hover/current rules below match
   that shape to win on specificity rather than order. */
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus {
	border-color: var(--c-primary);
	background: var(--c-primary-50);
	color: var(--c-primary);
}

.woocommerce nav.woocommerce-pagination ul li .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
	border-color: var(--c-primary);
	background: var(--c-primary);
	color: #fff;
}

.woocommerce-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
	margin-bottom: 24px;
	padding: 16px 20px;
	border: 1px solid var(--c-line);
	border-left: 3px solid var(--c-ink);
	background: var(--c-soft);
	font-size: 15px;
	list-style: none;
}

/* --- Category archive ----------------------------------------------------- */

/* Breathing room where the standalone category heading used to sit. */
.cat-head { padding-top: 40px; }

.cat-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(360px, 30vw, 560px);
	padding: 60px clamp(24px, 5vw, 90px);
	background-color: #4a463f;
	background-size: cover;
	background-position: center;
	color: #fff;
	text-align: center;
	overflow: hidden;
}

.cat-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26, 20, 19, .1) 30%, rgba(26, 20, 19, .55) 100%);
}

.cat-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 62ch;
	margin-top: auto;
}

.cat-hero__kicker {
	margin-bottom: 10px;
	font-size: clamp(11px, .85vw, 14px);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .38em;
}

.cat-hero__title {
	margin: 0;
	color: #fff;
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(34px, 3.6vw, 68px);
	line-height: 1.05;
}

.cat-hero__text {
	margin-top: 14px;
	font-size: clamp(13px, .9vw, 15.5px);
	line-height: 1.7;
	opacity: .88;
}

/* Row head: subcategory name left, link + arrows right. */
.cat-row__head { align-items: center; }

.cat-row__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
}

.cat-row__all {
	padding-bottom: 2px;
	border-bottom: 1px solid var(--c-ink);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--c-ink);
	transition: opacity .2s ease;
}
.cat-row__all:hover { opacity: .6; }

/* The filter row stacks before the selects get too narrow to read. */
@media (max-width: 900px) {
	.shop-filters { flex-wrap: wrap; }
	.shop-filters__field { flex: 1 1 50%; border-bottom: 1px solid var(--c-line); }
	.shop-filters select { padding: 15px 42px 15px 18px; }
	.shop-filters__submit { flex: 1 1 100%; min-width: 0; padding: 16px 24px; }
	.shop-filters__reset { flex: 1 1 100%; padding: 14px; border-left: 0; }
}

@media (max-width: 640px) {
	.cat-head { padding-top: 24px; }
	.cat-hero { min-height: 320px; padding: 40px 20px; }

	.shop-toolbar__top { flex-direction: column; align-items: flex-start; gap: 12px; }
	.shop-filters__field { flex: 1 1 100%; border-right: 0; }
}

/* PDP colour swatches are links to sibling products, not radio inputs. */
.pdp-option__value {
	margin-left: 8px;
	font-weight: 400;
	color: var(--c-body);
}

a.pdp-swatch { display: block; line-height: 0; }
a.pdp-swatch:hover .pdp-swatch__dot { box-shadow: inset 0 0 0 1px rgba(26, 20, 19, .18), 0 0 0 2px #fff, 0 0 0 3px var(--c-muted); }
a.pdp-swatch.is-current .pdp-swatch__dot {
	box-shadow: inset 0 0 0 1px rgba(26, 20, 19, .18), 0 0 0 2px #fff, 0 0 0 4px var(--c-primary);
}
a.pdp-swatch:focus-visible .pdp-swatch__dot { outline: 2px solid var(--c-ink); outline-offset: 4px; }