/*
 * Shop: product cards (also used on the home page), category/shop archives and the single product page.
 * WooCommerce's own layout CSS is not loaded on these templates (inc/assets.php), so everything the
 * product form needs is styled here.
 */

/* ============================================================ archive */
.shop-wrap {
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.woocommerce-products-header {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 4px 0 24px;
}

.woocommerce-products-header__title {
	max-width: 18ch;
}

.term-description,
.page-description {
	max-width: 620px;
	color: #3c342f;
	font-size: 16px;
}

.term-description p + p {
	margin-top: 0.8em;
}

@media (min-width: 900px) {
	.woocommerce-products-header {
		padding: 12px 0 28px;
	}

	.term-description {
		font-size: 17px;
	}
}

.woocommerce-products-header .chips {
	margin-top: 10px;
}

.shop-toolbar {
	display: flex;
	flex-wrap: wrap; /* Narrow phones: the 16px sort menu drops under the count instead of overflowing. */
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 8px 0 20px;
}

.woocommerce-ordering {
	min-width: 0;
	max-width: 100%;
}

.woocommerce-ordering select {
	max-width: 100%;
}

.woocommerce-result-count {
	margin: 0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--muted);
}

.woocommerce-ordering select {
	width: auto;
	min-height: 44px;
	padding: 0 38px 0 14px;
	background-color: transparent;
	font-size: 13px;
	letter-spacing: 0.04em;
}

/* ============================================================ product grid and cards */
ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 44px 12px;
	}

	ul.products.columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

ul.products::before,
ul.products::after {
	content: none;
}

ul.products li.product {
	position: relative;
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
}

.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	color: var(--ink);
}

.woocommerce-loop-product__link:hover {
	color: var(--ink);
}

.card-tile {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	overflow: clip; /* Crops like hidden but isn't a scroll container, so scroll timelines inside see the page. */
	background: var(--sand);
}

.tint-olive .card-tile {
	background: var(--tint-olive);
}

.tint-violet .card-tile {
	background: var(--tint-violet);
}

.tint-clear .card-tile {
	background: var(--tint-clear);
}

.tint-rapid .card-tile {
	background: var(--tan);
}

.tint-sand .card-tile {
	background: var(--sand);
}

.product_cat-retail .card-tile {
	background: var(--blush);
}

.product_cat-label-design-print .card-tile {
	background: var(--caramel);
}

.card-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 10% 6%;
	mix-blend-mode: multiply; /* white product shots take the tile color */
	transition: transform 0.5s var(--ease);
}

.woocommerce-loop-product__link:hover .card-tile:not(.is-depth) img {
	transform: scale(1.03);
}

.card-tile .onsale,
.card-tile .card-badge {
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 1;
	padding: 5px 10px;
	background: var(--ink);
	color: var(--bg);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.card-tile .card-badge {
	background: var(--white);
	color: var(--ink);
}

.woocommerce-loop-product__title {
	margin: 2px 0 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.3;
}

.card-price {
	font-size: 13px;
	line-height: 1.4;
}

.card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.card-meta__sizes {
	display: none;
	white-space: pre;
}

@media (min-width: 900px) {
	.card-meta__sizes {
		display: inline;
	}

	.woocommerce-loop-product__title {
		font-size: 15px;
	}

	.card-price {
		font-size: 13.5px;
	}

	.card-meta {
		font-size: 12px;
	}
}

/* Editorial tiles inside the solutions grid */
.tile-editorial {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	padding: 18px;
	background: var(--ink);
	color: var(--bg);
	text-decoration: none;
}

.tile-editorial:hover {
	color: var(--bg);
}

.tile-editorial img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tile-editorial::after {
	content: "";
	position: absolute;
	inset: 40% 0 0;
	background: linear-gradient(180deg, rgb(23 19 17 / 0), rgb(23 19 17 / 0.72));
}

.tile-editorial > :not(img) {
	position: relative;
	z-index: 1;
}

.tile-editorial h2,
.tile-editorial h3 {
	font-size: clamp(20px, 2vw, 28px);
	color: var(--bg);
}

.tile-editorial .text-link {
	align-self: flex-start;
}

.tile-editorial--samples {
	background: var(--sand);
	color: var(--ink);
	justify-content: space-between;
}

.tile-editorial--samples::after {
	content: none;
}

.tile-editorial--samples:hover {
	color: var(--ink);
}

.tile-editorial--samples h2,
.tile-editorial--samples h3 {
	color: var(--ink);
}

.tile-editorial__text {
	margin-top: 10px;
	font-size: 14px;
	color: var(--muted);
}

@media (min-width: 900px) {
	.tile-editorial {
		padding: 24px;
	}

	li.tile-editorial-item--wide {
		grid-column: span 2;
	}

	li.tile-editorial-item--wide .tile-editorial,
	.tile-editorial--samples {
		aspect-ratio: auto;
		height: 100%;
		min-height: 360px;
	}
}

/* Buying guide under the solutions grid */
.buying-guide {
	display: grid;
	gap: 28px;
	margin-top: 88px;
	padding-top: 40px;
	border-top: 1px solid var(--line);
}

.buying-guide h2 {
	margin-top: 12px;
}

.buying-guide__cols {
	display: grid;
	gap: 24px;
}

.buying-guide__cols h3 {
	margin-bottom: 8px;
	font-size: 18px;
}

.buying-guide__cols p {
	color: #3c342f;
	font-size: 16px;
}

@media (min-width: 900px) {
	.buying-guide {
		grid-template-columns: 1fr 2fr;
		gap: 40px;
	}

	.buying-guide__cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.woocommerce-info.woocommerce-no-products-found {
	margin-top: 20px;
}

/* ============================================================ single product */
.single-product .shop-wrap > .breadcrumbs {
	padding-block: 12px;
}

div.product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

div.product > .woocommerce-product-gallery,
div.product > .summary {
	min-width: 0;
}

div.product > .onsale {
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 2;
	padding: 5px 10px;
	background: var(--ink);
	color: var(--bg);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

div.product > .related,
div.product > .upsells,
div.product > .up-sells {
	grid-column: 1 / -1;
}

@media (min-width: 900px) {
	div.product {
		grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
		gap: 0 56px;
		align-items: start;
	}

	/* The buy box runs long (description, accordions); the photos stay in view beside it. The gallery box
	   stretches to the buy box's row and the photos stick inside it, so they stop where the buy box ends.
	   (Sticky on the gallery itself was bounded by div.product, which also holds the related and upsell rows,
	   so the photo slid over them.) */
	div.product > .woocommerce-product-gallery {
		align-self: stretch;
	}

	div.product > .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
		position: sticky;
		top: calc(var(--header-h) + 24px);
	}
}

/* Gallery: stacked tiles on desktop, a swipe row on phones. No slider script. */
.woocommerce-product-gallery {
	position: relative;
	opacity: 1 !important; /* WooCommerce hides it until its slider initialises; there is no slider. */
	margin: 0 calc(-1 * var(--gutter));
}

.woocommerce-product-gallery__trigger {
	display: none;
}

.woocommerce-product-gallery__wrapper {
	display: flex;
	gap: 6px;
	margin: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.woocommerce-product-gallery__wrapper::-webkit-scrollbar {
	display: none;
}

.woocommerce-product-gallery__image {
	position: relative;
	flex: 0 0 100%;
	height: min(100vw, 40svh);
	scroll-snap-align: start;
	background: var(--sand);
}

.woocommerce-product-gallery__wrapper:has(> :nth-child(2)) .woocommerce-product-gallery__image {
	flex-basis: 86%;
}

.tint-olive .woocommerce-product-gallery__image {
	background: var(--tint-olive);
}

.tint-violet .woocommerce-product-gallery__image {
	background: var(--tint-violet);
}

.tint-clear .woocommerce-product-gallery__image {
	background: var(--tint-clear);
}

.tint-rapid .woocommerce-product-gallery__image {
	background: var(--tan);
}

.product_cat-retail .woocommerce-product-gallery__image {
	background: var(--blush);
}

.product_cat-label-design-print .woocommerce-product-gallery__image {
	background: var(--caramel);
}

.woocommerce-product-gallery__image a {
	display: block;
	width: 100%;
	height: 100%;
	cursor: default;
}

.woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6%;
	mix-blend-mode: multiply;
}

.woocommerce-product-gallery__image--placeholder img {
	opacity: 0.35;
}

.flex-control-nav {
	display: none;
}

@media (min-width: 900px) {
	.woocommerce-product-gallery {
		margin: 0;
	}

	.woocommerce-product-gallery__wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		overflow: visible;
	}

	.woocommerce-product-gallery__image,
	.woocommerce-product-gallery__wrapper:has(> :nth-child(2)) .woocommerce-product-gallery__image {
		height: auto;
		aspect-ratio: 3 / 4;
	}

	/* The first image always runs full width; a lone image stays a calm 5:4 block. */
	.woocommerce-product-gallery__image:first-child {
		grid-column: 1 / -1;
		aspect-ratio: 5 / 4;
	}

	.woocommerce-product-gallery__image img {
		padding: 7%;
	}
}

/* Buy box */
.summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 16px;
	align-content: start;
}

.summary > * {
	grid-column: 1 / -1;
	margin: 0;
}

.product-eyebrow {
	grid-row: 1;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--muted);
}

.summary > .product_title {
	grid-column: 1;
	grid-row: 2;
	font-size: clamp(30px, 2.6vw, 38px);
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.summary > p.price {
	grid-column: 2;
	grid-row: 2;
	align-self: baseline;
	font-size: 18px;
	font-weight: 500;
	white-space: nowrap;
}

@media (min-width: 900px) {
	.summary > p.price {
		font-size: 20px;
	}
}

.price del,
.sticky-atc__price del {
	color: var(--muted);
	font-weight: 400;
	margin-right: 6px;
}

.price ins,
.sticky-atc__price ins {
	text-decoration: none;
}

.summary > .woocommerce-product-rating {
	margin-top: 6px;
	font-size: 13px;
}

.unit-line {
	margin-top: 6px;
	font-size: 14px;
	color: var(--muted);
}

.unit-line:empty {
	display: none;
}

.shade-facts {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
}

.shade-facts .depth-dots {
	margin: 0 0 0 4px;
}

/* BNPL and other plugin lines that print right under the price keep a quiet style. */
.summary .afterpay-payment-info,
.summary afterpay-placement,
.summary square-placement,
.summary .sezzle-shopify-info-button,
.summary .sezzle-checkout-button-wrapper,
.summary [class*="sezzle"] {
	margin-top: 8px;
	font-size: 13px;
	color: var(--muted);
}

/* Add-to-cart form */
.summary form.cart {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 22px;
}

.summary form.cart:not(.variations_form) {
	flex-direction: row;
	flex-wrap: wrap;
}

table.variations {
	width: 100%;
	border-collapse: collapse;
}

table.variations th,
table.variations td {
	display: block;
	padding: 0;
	text-align: left;
}

table.variations th {
	margin-bottom: 10px;
}

table.variations label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

/* product.js swaps a select for buttons; the select stays in the form for WooCommerce. Only selects that got
   buttons are hidden, so an attribute left as a plain select (long lists) stays usable. */
.has-size-buttons table.variations select.has-buttons {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.has-size-buttons table.variations tr.has-buttons th.label {
	display: none;
}

/* Single-attribute products: buttons only choose, so "Clear" adds nothing. With two or more attributes,
   WooCommerce narrows the others and "Clear" is the way out of a dead end, so it stays. */
form.variations_form:not(.is-multi-attribute) .reset_variations {
	display: none !important;
}

.size-buttons {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.size-buttons legend {
	margin-bottom: 10px;
	padding: 0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.size-buttons__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
	gap: 6px;
}

.size-button {
	min-height: 48px;
	padding: 0 4px;
	border: 1px solid var(--line-strong);
	background: transparent;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.1;
}

.size-button:hover {
	border-color: var(--ink);
}

.size-button[aria-pressed="true"] {
	border: 1.5px solid var(--ink);
	background: var(--white);
}

.size-button:disabled {
	color: var(--muted);
	text-decoration: line-through;
	cursor: not-allowed;
}

/* Sold-out size (product.js): still choosable, so its back-in-stock form can be reached. A diagonal rule marks it. */
.size-button.is-sold-out {
	color: var(--muted);
	background-image: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--line-strong) calc(50% - 0.5px), var(--line-strong) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

.single_variation_wrap {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.woocommerce-variation {
	font-size: 14px;
}

/* The chosen option's price moves up into the main price (product.js adds .has-live-price, with or without
   size buttons); keep its stock text and back-in-stock form. */
.has-live-price .woocommerce-variation-price {
	display: none;
}

.woocommerce-variation-description p {
	font-size: 14px;
	color: var(--muted);
}

.stock {
	margin: 0;
	font-size: 13px;
}

.stock.out-of-stock {
	color: var(--error);
}

.woocommerce-variation-add-to-cart,
.summary form.cart:not(.variations_form) {
	display: flex;
	gap: 8px;
}

/* Quantity stepper */
.quantity {
	display: inline-flex;
	align-items: stretch;
	flex: 0 0 auto;
	border: 1px solid var(--line-control);
	background: var(--white);
}

.quantity .qty {
	width: 52px;
	min-height: 52px;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 15px;
	-moz-appearance: textfield;
	appearance: textfield;
}

.quantity .qty::-webkit-inner-spin-button,
.quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.quantity .qty:focus {
	outline: 0;
}

.quantity:focus-within {
	outline: 2px solid var(--ink);
	outline-offset: 1px;
}

.qty-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	border: 0;
	background: none;
}

.quantity.hidden,
.quantity:has(input[type="hidden"]) {
	display: none;
}

.single_add_to_cart_button {
	flex: 1 1 auto;
	min-height: 54px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--ink);
	color: var(--bg);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background-color 0.2s var(--ease);
}

.single_add_to_cart_button:hover {
	background: #3a322d;
}

.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.single_add_to_cart_button.loading {
	opacity: 0.7;
}

/* Info lines, excerpt, meta */
.info-lines {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 22px 0 0;
	padding: 16px 0;
	list-style: none;
	border-block: 1px solid var(--line);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #3c342f;
}

.summary > .woocommerce-product-details__short-description {
	margin-top: 22px;
	font-size: 16px;
	line-height: 1.6;
}

.woocommerce-product-details__short-description ul {
	margin: 12px 0 0;
	padding-left: 1.1em;
}

.woocommerce-product-details__short-description li + li {
	margin-top: 4px;
}

.woocommerce-product-details__short-description table {
	display: none; /* PRODUCT_PAGE_SPEC: no tables in the short description; old copy still has some. */
}

.product_meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin-top: 18px;
	font-size: 12px;
	color: var(--muted);
}

.product_meta a {
	color: var(--muted);
}

.summary > .woocommerce-tabs {
	margin-top: 22px;
}

.accordion__body.entry-content > h2:first-child,
.accordion__body .woocommerce-Reviews-title {
	display: none; /* Tab callbacks repeat the tab title as an H2 (the reviews one sits inside #comments). */
}

.accordion__body h2 {
	font-size: 18px;
}

.accordion__body h3 {
	margin-top: 18px;
	font-size: 16px;
}

.accordion__body p,
.accordion__body ul,
.accordion__body ol {
	margin: 0 0 12px;
}

.accordion__body ul,
.accordion__body ol {
	padding-left: 1.2em;
}

.accordion__body img {
	margin-block: 12px;
}

.accordion__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.accordion__body th,
.accordion__body td {
	padding: 8px 8px 8px 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.specs {
	display: grid;
	grid-template-columns: 120px 1fr;
	row-gap: 10px;
	font-size: 14px;
}

.specs dt {
	color: var(--muted);
}

.faq h3 {
	margin: 16px 0 6px;
	font-size: 15px;
	font-weight: 500;
}

.faq h3:first-child {
	margin-top: 0;
}

/* Additional information table */
.woocommerce-product-attributes {
	width: 100%;
}

/* Reviews */
#reviews .commentlist {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

#reviews .comment_container {
	display: flex;
	gap: 12px;
}

#reviews .avatar {
	display: none;
}

#reviews .comment-text {
	flex: 1;
}

#reviews .meta {
	font-size: 13px;
	color: var(--muted);
}

#review_form .comment-reply-title {
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 500;
}

#review_form p {
	margin-bottom: 12px;
}

#review_form .form-submit input,
#review_form .submit {
	min-height: 48px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--ink);
	color: var(--bg);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.star-rating {
	position: relative;
	display: inline-block;
	width: 5.4em;
	height: 1em;
	overflow: hidden;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.1em;
	vertical-align: -1px;
}

.star-rating::before {
	content: "★★★★★";
	position: absolute;
	inset: 0;
	color: var(--line-strong);
}

.star-rating span {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	padding-top: 1.5em;
}

.star-rating span::before {
	content: "★★★★★";
	position: absolute;
	inset: 0;
	color: var(--ink);
}

p.stars a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	overflow: hidden;
	text-indent: -999px;
	position: relative;
}

p.stars a::before {
	content: "★";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-indent: 0;
	font-size: 22px;
	color: var(--line-strong);
}

p.stars:hover a::before,
p.stars.selected a.active::before,
p.stars.selected a:not(.active)::before {
	color: var(--ink);
}

p.stars a:hover ~ a::before,
p.stars.selected a.active ~ a::before {
	color: var(--line-strong);
}

/* Related, upsells */
.related,
.upsells {
	margin-top: 88px;
	padding-top: 0;
}

.related > h2,
.upsells > h2 {
	margin-bottom: 24px;
	font-size: clamp(26px, 2.6vw, 36px);
}

@media (min-width: 900px) {
	.related,
	.upsells {
		margin-top: 120px;
	}

	.related > h2,
	.upsells > h2 {
		margin-bottom: 32px;
	}
}

/* Sticky add-to-bag bar (phones only) */
.sticky-atc {
	position: fixed;
	inset: auto 0 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
	background: var(--white);
	border-top: 1px solid var(--line-header);
	box-shadow: 0 -6px 24px rgb(23 19 17 / 0.06);
	transform: translateY(0);
	transition: transform 0.25s var(--ease);
}

.sticky-atc.is-hidden {
	visibility: hidden;
	transition: transform 0.25s var(--ease), visibility 0s linear 0.25s;
	transform: translateY(110%);
}

.sticky-atc__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}

.sticky-atc__info .label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 10.5px;
}

.sticky-atc__price {
	font-size: 15px;
	font-weight: 500;
}

.sticky-atc .button {
	flex: 0 0 auto;
	min-height: 48px;
	padding-inline: 24px;
}

@media (min-width: 900px) {
	.sticky-atc {
		display: none !important;
	}
}

.card-tile .duo {
	position: absolute;
	inset: 0;
}

/* Samples tile: label, staggered-bottles image, then the copy. */
.tile-editorial--samples {
	gap: 14px;
}

.tile-editorial--samples .tile-editorial__media {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-height: 180px;
}

.tile-editorial--samples .tile-editorial__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 899px) {
	/* Full width on phones so the image and copy have room. */
	li.tile-editorial-item--samples {
		grid-column: 1 / -1;
	}

	li.tile-editorial-item--samples .tile-editorial {
		aspect-ratio: auto;
	}

	.tile-editorial--samples .tile-editorial__media {
		min-height: 220px;
	}
}

/* Labels & Printing category (taxonomy-product_cat-label-design-print.php): one product as a feature. */
.label-feature {
	display: grid;
	gap: 24px;
	padding-bottom: 56px;
}

.label-feature__media {
	display: block;
	aspect-ratio: 5 / 4;
	margin-inline: calc(-1 * var(--gutter));
	background: var(--caramel);
}

.label-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 7%;
	mix-blend-mode: multiply;
}

.label-feature__title {
	font-size: clamp(34px, 3.4vw, 52px);
	line-height: 1.02;
	letter-spacing: -0.025em;
}

.label-feature__price {
	margin-top: 14px;
	font-size: 17px;
	font-weight: 500;
}

.label-feature__price .muted {
	font-size: 14px;
	font-weight: 400;
}

.label-feature__desc {
	margin-top: 18px;
	font-size: 16px;
	line-height: 1.6;
}

.label-feature__desc ul {
	margin: 12px 0 0;
	padding-left: 1.1em;
}

.label-feature__desc li + li {
	margin-top: 4px;
}

.label-feature__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.label-feature__ctas .button {
	flex: 1 1 180px;
	min-height: 52px;
}

.label-feature__note {
	margin-top: 16px;
	font-size: 13.5px;
}

@media (min-width: 900px) {
	.label-feature {
		grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
		gap: 56px;
		align-items: center;
		padding-bottom: 96px;
	}

	.label-feature__media {
		margin-inline: 0;
	}
}

/* ---------------------------------------------------------------- 2.5D product photos (Mike, 2026-09-26)
   Layers (swl_duo_wrap): original (multiplied) · shadow plate (multiplied, hidden at rest) · cut-out.
   Desktop: nav.js sets --dx/--dy (-1..1) and --lift (0..1) while the pointer is over a photo. The bottle lifts
   and turns toward the pointer, its shadow spreads and softens, and a light sheen masked to the bottle follows
   the pointer. Phones: each bottle settles onto its shadow as it scrolls into view.
   Transforms stay on the layers: one on .duo would isolate the multiply blend and lose the tile tint.
   --pad mirrors each context's image padding so the sheen's mask lines up with the bottle. */
.card-tile {
	--pad: 10% 6%;
}

.woocommerce-product-gallery__image {
	--pad: 6%;
}

.label-feature__media {
	--pad: 7%;
}

@media (min-width: 900px) {
	.woocommerce-product-gallery__image {
		--pad: 7%;
	}
}

.duo__plate {
	opacity: 0;
	mix-blend-mode: multiply;
}

.duo--depth::after {
	content: '';
	position: absolute;
	inset: 0;
	padding: var(--pad, 0);
	opacity: 0;
	pointer-events: none;
	background: radial-gradient(34% 26% at calc(50% + var(--dx, 0) * 32%) calc(36% + var(--dy, 0) * 26%), rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 72%) content-box;
	mix-blend-mode: screen;
}

.duo--depth > .duo__top,
.duo--depth > .duo__plate,
.duo--depth::after {
	transition: transform 0.45s var(--ease), filter 0.45s var(--ease), opacity 0.3s var(--ease);
}

.is-depth .duo--depth {
	--bottle: perspective(1000px) translate3d(calc(var(--dx, 0) * 8px), calc(var(--dy, 0) * 5px - var(--lift, 0) * 7px), 0) rotateY(calc(var(--dx, 0) * 7deg)) rotateX(calc(var(--dy, 0) * -4deg)) scale(calc(1 + var(--lift, 0) * 0.02));
}

.is-depth .duo--depth > img[data-duo='base'] {
	opacity: 0;
}

.is-depth .duo--depth > .duo__top {
	transform: var(--bottle);
}

.is-depth .duo--depth > .duo__plate {
	opacity: calc(1 - var(--lift, 0) * 0.3);
	transform: translate3d(calc(var(--dx, 0) * -4px), 0, 0) scale(calc(1 + var(--lift, 0) * 0.06), calc(1 + var(--lift, 0) * 0.02));
	transform-origin: 50% 90%;
	filter: blur(calc(var(--lift, 0) * 1.5px));
}

.is-depth .duo--depth::after {
	opacity: var(--lift, 0);
	transform: var(--bottle);
	-webkit-mask: var(--cut) center / contain no-repeat content-box;
	mask: var(--cut) center / contain no-repeat content-box;
}

@keyframes swl-bottle-settle {
	from {
		transform: translate3d(0, -12px, 0) scale(1.02);
	}

	to {
		transform: none;
	}
}

@keyframes swl-shadow-settle {
	from {
		opacity: 0.55;
		transform: scale(1.1, 1.03);
		filter: blur(2px);
	}

	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

@supports (animation-timeline: view()) {
	@media (hover: none) and (prefers-reduced-motion: no-preference) {
		.card-tile .duo--depth {
			view-timeline: --swl-duo block;
		}

		.card-tile .duo--depth > img[data-duo='base'] {
			opacity: 0;
		}

		.card-tile .duo--depth > .duo__plate,
		.card-tile .duo--depth > .duo__top {
			animation: swl-shadow-settle both var(--ease);
			animation-timeline: --swl-duo;
			animation-range: entry 20% cover 45%;
		}

		.card-tile .duo--depth > .duo__top {
			animation-name: swl-bottle-settle;
		}
	}
}

/* ---------------------------------------------------------------- tan development slider (Mike, 2026-09-26)
   template-parts/content/tan-dev.php, assets/js/tan-dev.js. Spans the product grid, before upsells. */
div.product > .tan-dev {
	grid-column: 1 / -1;
}

.tan-dev {
	display: grid;
	gap: 28px;
	margin: 48px calc(-1 * var(--gutter)) 0;
	padding: 36px var(--gutter);
	background: var(--sand);
}

.tan-dev[hidden] {
	display: none;
}

.tan-dev h2 {
	margin-top: 10px;
	font-size: clamp(28px, 3vw, 42px);
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.tan-dev__intro {
	margin-top: 12px;
	max-width: 46ch;
	color: #3c342f;
	font-size: 16px;
	line-height: 1.6;
}

.tan-dev__label {
	display: block;
	margin-bottom: 10px;
	padding: 0;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tan-dev__rinse {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
	margin: 24px 0 0;
	padding: 0;
	border: 0;
}

.tan-dev__rinse legend {
	width: 100%;
}

.tan-dev__chip {
	position: relative;
	cursor: pointer;
}

.tan-dev__chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.tan-dev__chip span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid rgb(23 19 17 / 0.2);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
}

.tan-dev__chip input:checked + span {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--bg);
}

.tan-dev__chip input:focus-visible + span {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

.tan-dev__control {
	margin-top: 28px;
}

/* Range: a thin track that fills to the thumb, a 28px thumb (44px touch target via padding). */
.tan-dev__range {
	width: 100%;
	height: 44px;
	margin: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.tan-dev__range::-webkit-slider-runnable-track {
	height: 4px;
	background: linear-gradient(var(--ink), var(--ink)) 0 / var(--fill, 0%) 100% no-repeat, rgb(23 19 17 / 0.15);
}

.tan-dev__range::-moz-range-track {
	height: 4px;
	background: linear-gradient(var(--ink), var(--ink)) 0 / var(--fill, 0%) 100% no-repeat, rgb(23 19 17 / 0.15);
}

.tan-dev__range::-webkit-slider-thumb {
	width: 28px;
	height: 28px;
	margin-top: -12px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--white);
	-webkit-appearance: none;
	appearance: none;
}

.tan-dev__range::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--white);
}

.tan-dev__range:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 4px;
}

.tan-dev__marks {
	position: relative;
	height: 38px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.tan-dev__marks span {
	position: absolute;
	left: var(--at);
	white-space: nowrap;
	transform: translateX(-50%);
	transition: left 0.4s var(--ease);
}

.tan-dev__marks span:first-child {
	transform: none;
}

.tan-dev__marks span:last-child {
	transform: translateX(-100%);
}

/* The rinse mark gets its own line and a tick up to the track, so it never collides with "Spray". */
.tan-dev__marks [data-tan-rinse-mark] {
	top: 18px;
	color: var(--ink);
	font-weight: 500;
}

.tan-dev__marks [data-tan-rinse-mark]::before {
	position: absolute;
	bottom: calc(100% + 2px);
	left: 50%;
	width: 1px;
	height: 26px;
	background: var(--ink);
	content: '';
}

.tan-dev__status {
	min-height: 3em;
	margin-top: 14px;
	font-size: 14.5px;
	font-weight: 500;
}

.tan-dev__note {
	margin-top: 6px;
	font-size: 12.5px;
}

/* Swatches: skin cards lit from the top left, the colour eased between hours. */
.tan-dev__swatches {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	align-self: stretch;
}

.tan-dev__swatch {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.tan-dev__skin {
	display: block;
	flex: 1 1 auto;
	min-height: 180px;
	border-radius: 999px 999px 24px 24px;
	background:
		radial-gradient(120% 70% at 30% 18%, rgb(255 255 255 / 0.35), rgb(255 255 255 / 0) 55%),
		radial-gradient(90% 60% at 70% 95%, rgb(0 0 0 / 0.14), rgb(0 0 0 / 0) 70%),
		var(--c, #d6a480);
	box-shadow: inset 0 -12px 30px -18px rgb(0 0 0 / 0.35);
	transition: background-color 0.25s linear;
}

.tan-dev__swatch figcaption {
	font-size: 12px;
	text-align: center;
	color: var(--muted);
}

@media (min-width: 900px) {
	.tan-dev {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 64px;
		align-items: center;
		margin: 72px 0 0;
		padding: 56px;
	}

	.tan-dev__skin {
		min-height: 320px;
	}
}

/* iOS zooms into fields under 16px: quantity box and category sort. */
.quantity .qty,
.woocommerce-ordering select {
	font-size: 16px;
}

/* A variation with its own photo: WooCommerce swaps only the base image, so the default bottle's cut-out and
   shadow plate step aside and the photo shows plain (product.js). */
.duo-off .duo__top,
.duo-off .duo__plate,
.duo-off .duo::after {
	display: none;
}

.duo-off img[data-duo='base'] {
	mix-blend-mode: normal;
}

/* The variation photo is the base image: never let the 2.5D hover hide it (same specificity as the
   .is-depth rule above, so this must stay after it). */
.duo-off .duo--depth > img[data-duo='base'] {
	opacity: 1;
}

/* Phones: leave room under the footer for the sticky add-to-bag bar so it never covers the legal line. */
@media (max-width: 899px) {
	.single-product .site-footer {
		padding-bottom: calc(96px + env(safe-area-inset-bottom));
	}
}