/**
 * Lynnify — WooCommerce.
 *
 * Loaded only on shop, product, cart, checkout and account pages.
 * Direction-neutral: no left/right properties anywhere.
 */

/* ==========================================================================
   1. Shop archive header
   ========================================================================== */

.woocommerce-products-header {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.woocommerce-products-header__title {
	margin: 0;
}

.woocommerce-result-count {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.woocommerce-ordering select {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.65em 2.5em 0.65em 1.1em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2326222f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1em center;
	background-size: 12px;
	cursor: pointer;
}

[dir="rtl"] .woocommerce-ordering select {
	padding: 0.65em 1.1em 0.65em 2.5em;
	background-position: left 1em center;
}

.lyn-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin-block-end: var(--wp--preset--spacing--60);
}

/* ==========================================================================
   2. Product grid
   ========================================================================== */

/*
 * WooCommerce lays the catalogue out with floats and clears them with
 * `ul.products::before/::after { content:" "; display:table }`. In a grid
 * container those pseudo-elements become grid ITEMS, so the first one takes
 * cell 1 and pushes every product one slot along — leaving a blank cell at
 * the start of the first row. The same trick breaks .col2-set on checkout.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after {
	display: none !important;
}

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(var(--lyn-cols, 4), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1200px) {
	.woocommerce ul.products,
	ul.products {
		--lyn-cols: 3;
	}
}

@media (max-width: 860px) {
	.woocommerce ul.products,
	ul.products {
		--lyn-cols: 2;
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	}
}

/* WooCommerce ships float-based column classes; the grid supersedes them. */
.woocommerce ul.products li.product,
ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	text-align: start;
	position: relative;
	min-width: 0;
}

/* Card media -------------------------------------------------------------- */

.lyn-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface);
	aspect-ratio: var(--wp--custom--product-aspect, 3 / 4);
	margin-block-end: var(--wp--preset--spacing--30);
}

/*
 * WooCommerce sets `.woocommerce ul.products li.product a img { height:auto;
 * margin:0 0 1em }` at specificity 0,4,1. Anything less specific loses, and
 * the image renders at its natural ratio inside the 3:4 box, leaving a band
 * of empty background beneath it. These selectors match that weight.
 */
.woocommerce ul.products li.product a .lyn-card__media img,
.woocommerce ul.products li.product .lyn-card__media img,
.lyn-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	border-radius: inherit;
	transition: opacity 400ms cubic-bezier(0.2, 0.7, 0.3, 1),
		transform 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Second gallery image, revealed on hover. */
.lyn-card__hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 400ms cubic-bezier(0.2, 0.7, 0.3, 1);
	pointer-events: none;
	z-index: 2;
}

li.product:hover .lyn-card__hover,
li.product:focus-within .lyn-card__hover {
	opacity: 1;
}

li.product:hover .lyn-card__media img:first-of-type,
li.product:focus-within .lyn-card__media img:first-of-type {
	transform: scale(1.04);
}

/* Touch devices have no hover; keep the primary image steady. */
@media (hover: none) {
	.lyn-card__hover {
		display: none;
	}
}

/* Card text --------------------------------------------------------------- */

/*
 * The catalogue uses long, keyword-rich product names ("Elegant Gold-Plated
 * Stainless Steel 2-Layer Necklace - Chic & Durable"). Left to wrap freely
 * they run to four lines, so every card in a row ends at a different height
 * and the Add-to-bag buttons form a ragged line.
 *
 * The card link takes the remaining height and the title is clamped to two
 * lines, which keeps the grid on a rhythm without truncating so hard that
 * products become indistinguishable.
 */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
ul.products li.product > a.woocommerce-LoopProduct-link {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.lyn-card__cat {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
	color: var(--wp--preset--color--muted);
	margin-block-end: 0.35em;
}

.woocommerce ul.products li.product .lyn-card__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .lyn-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.5em;
	padding: 0;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Reserve both lines so single-line titles do not shorten the card. */
	min-height: calc(2 * 1.4em);
}

.woocommerce ul.products li.product .price,
ul.products li.product .price {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	flex-wrap: wrap;
	margin: 0;
	/* Push the price to the bottom of the link, above the button. */
	margin-block-start: auto;
	padding-block-start: 0.15em;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
	opacity: 1;
	text-decoration: line-through;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	background: transparent;
	color: var(--wp--preset--color--sale);
	text-decoration: none;
	font-weight: 600;
}

/* Add-to-bag sits on the card floor, so buttons align across the row. */
.woocommerce ul.products li.product .button,
ul.products li.product .button {
	margin: var(--wp--preset--spacing--30) 0 0 !important;
	font-size: var(--wp--preset--font-size--x-small);
	padding: 0.8em 1.5em;
	align-self: start;
	max-width: 100%;
}

.woocommerce ul.products li.product .added_to_cart {
	font-size: var(--wp--preset--font-size--x-small);
	margin-block-start: 0.5em;
}

/* Badges ------------------------------------------------------------------ */

.lyn-badge {
	position: absolute;
	top: var(--wp--preset--spacing--30);
	inset-inline-start: var(--wp--preset--spacing--30);
	z-index: 3;
	padding: 0.4em 0.85em;
	border-radius: var(--wp--custom--radius--pill);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.lyn-badge.is-sale {
	background: var(--wp--preset--color--sale);
	color: var(--wp--preset--color--base);
}

.lyn-badge.is-new {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.lyn-badge.is-soldout {
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--muted);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--line);
}

/* ==========================================================================
   3. Single product
   ========================================================================== */

/*
 * WooCommerce lays this page out with floats: `div.images` and `div.summary`
 * are both `width:48%; float:left/right` from woocommerce-layout.css. Turning
 * the parent into a grid does not undo that — the two columns end up at 48%
 * of an already-halved track, which is why the gallery rendered as a small
 * square in a wide empty column. Both children are reset here.
 */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2rem, 4.5vw, 4.5rem);
	align-items: start;
	position: relative;
}

.woocommerce div.product > div.images,
.woocommerce div.product > div.summary,
.woocommerce div.product > .woocommerce-product-gallery {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	min-width: 0;
}

/* Everything below the two columns spans the full width. */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells,
.woocommerce div.product > .woocommerce-product-gallery + .summary ~ *,
.woocommerce div.product > section {
	grid-column: 1 / -1;
}

@media (max-width: 900px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}
}

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

.woocommerce div.product div.images img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--wp--custom--radius--lg);
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	border-radius: var(--wp--custom--radius--sm);
	opacity: 0.65;
	transition: opacity var(--wp--custom--transition--fast);
	cursor: pointer;
}

.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
	opacity: 1;
}

.woocommerce div.product .woocommerce-product-gallery__trigger {
	top: var(--wp--preset--spacing--30);
	inset-inline-end: var(--wp--preset--spacing--30);
	z-index: 4;
}

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

/*
 * theme.json gives h1 the hero display size (up to 5rem). That is right for a
 * landing page and wrong for a product called "Elegant Gold-Plated Stainless
 * Steel 2-Layer Necklace — Chic & Durable", which then ran to six lines and
 * pushed the price below the fold.
 */
.woocommerce div.product .product_title,
.woocommerce div.product h1.product_title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--tight);
	margin-block: 0 var(--wp--preset--spacing--30);
	text-wrap: balance;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--wp--preset--color--taupe);
	font-size: var(--wp--preset--font-size--small);
	max-width: 54ch;
	margin-block-end: var(--wp--preset--spacing--40);
}

.woocommerce div.product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

.woocommerce div.product p.price {
	font-size: var(--wp--preset--font-size--x-large);
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
	margin-block: 0 var(--wp--preset--spacing--30);
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	flex-wrap: wrap;
	line-height: 1.2;
}

.woocommerce div.product .woocommerce-product-rating {
	margin-block-end: var(--wp--preset--spacing--30);
}

.woocommerce div.product .product_meta {
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 1.25em;
}

.woocommerce div.product .product_meta > span {
	display: block;
}

.woocommerce div.product .product_meta a {
	color: var(--wp--preset--color--taupe);
}

/* The badge is positioned against the product wrapper, not the gallery. */
.woocommerce div.product > .lyn-badge {
	top: var(--wp--preset--spacing--30);
	inset-inline-start: var(--wp--preset--spacing--30);
}

/* Sticky summary on tall viewports keeps the buy button reachable. */
@media (min-width: 901px) {
	.woocommerce div.product .summary {
		position: sticky;
		top: 104px;
	}
}

/* Quantity + add to cart --------------------------------------------------- */

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	align-items: stretch;
	margin-block: var(--wp--preset--spacing--40);
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	display: none !important;
}

.woocommerce .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	overflow: hidden;
	background: var(--wp--preset--color--base);
}

.woocommerce .quantity input.qty {
	width: 3.5rem;
	border: 0;
	background: transparent;
	text-align: center;
	font: inherit;
	font-variant-numeric: tabular-nums;
	padding-block: 0.85em;
	color: var(--wp--preset--color--ink);
	-moz-appearance: textfield;
	appearance: textfield;
}

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

.woocommerce div.product form.cart .button {
	flex: 1 1 12rem;
}

/* Variation swatches ------------------------------------------------------ */

.woocommerce div.product form.cart .variations {
	width: 100%;
	border: 0;
	margin-block-end: var(--wp--preset--spacing--30);
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	border: 0;
	padding: 0.35em 0;
	text-align: start;
	vertical-align: middle;
}

.woocommerce div.product form.cart .variations label {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	margin: 0;
}

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

.woocommerce div.product .related,
.woocommerce div.product .upsells {
	margin-block-start: var(--wp--preset--spacing--80);
	padding-block-start: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--line);
}

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-block-end: var(--wp--preset--spacing--50);
}

/* Reassurance strip ------------------------------------------------------- */

.lyn-reassure {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: var(--wp--preset--spacing--40) 0 0;
	border-top: 1px solid var(--wp--preset--color--line);
	display: grid;
	gap: 0.75em;
}

.lyn-reassure__item {
	display: flex;
	align-items: center;
	gap: 0.75em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--taupe);
}

.lyn-reassure__icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.85;
}

.lyn-reassure__icon[data-icon="truck"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a5950' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h13v13H1z'/%3E%3Cpath d='M14 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2'/%3E%3Ccircle cx='17.5' cy='18.5' r='2'/%3E%3C/svg%3E");
}

.lyn-reassure__icon[data-icon="return"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a5950' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a9 9 0 1 1 2 5.6'/%3E%3Cpath d='M3 4v6h6'/%3E%3C/svg%3E");
}

.lyn-reassure__icon[data-icon="shield"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a5950' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

.lyn-stock-low,
.woocommerce div.product .stock {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
	color: var(--wp--preset--color--sale);
	margin: 0;
}

.woocommerce div.product .stock.in-stock {
	color: var(--wp--preset--color--success);
}

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

.woocommerce div.product .woocommerce-tabs {
	margin-block-start: var(--wp--preset--spacing--80);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0 0 var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--line);
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wp--preset--color--ink);
}

/* ==========================================================================
   4. Cart
   ========================================================================== */

.woocommerce table.shop_table {
	border: 0;
	border-collapse: collapse;
	width: 100%;
}

.woocommerce table.shop_table th {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	text-align: start;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--30);
}

.woocommerce table.shop_table td {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--40);
	vertical-align: middle;
}

.woocommerce table.cart img {
	width: 72px;
	border-radius: var(--wp--custom--radius--sm);
}

.woocommerce a.remove {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
	line-height: 1;
}

.woocommerce a.remove:hover {
	background: transparent;
	color: var(--wp--preset--color--sale);
}

.cart_totals h2,
.cross-sells h2 {
	font-size: var(--wp--preset--font-size--large);
}

/* Free-delivery progress -------------------------------------------------- */

.lyn-shipping-bar {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--50);
}

.lyn-shipping-bar p {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
}

.lyn-shipping-bar.is-complete p {
	margin-bottom: 0;
	color: var(--wp--preset--color--success);
	font-weight: 600;
}

.lyn-shipping-bar__track {
	height: 4px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--sand);
	overflow: hidden;
}

.lyn-shipping-bar__fill {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--ink);
	border-radius: inherit;
	transition: width 500ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ==========================================================================
   5. Checkout & account
   ========================================================================== */

.woocommerce form .form-row {
	margin-block-end: var(--wp--preset--spacing--30);
	padding: 0;
}

.woocommerce form .form-row label {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	margin-block-end: 0.4em;
	display: block;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
	width: 100%;
	padding: 0.85em 1.1em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--wp--preset--color--taupe);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--sand) 60%, transparent);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: var(--wp--preset--color--sale);
}

.woocommerce .col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--wp--preset--spacing--60);
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
	width: auto;
	float: none;
}

#order_review,
.woocommerce-checkout-review-order {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--50);
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	border: 0;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.woocommerce-checkout #payment ul.payment_methods li {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--base);
	list-style: none;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--wp--preset--color--surface-alt);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--taupe);
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
	width: 100%;
}

/* ==========================================================================
   6. Notices
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 0;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}

.woocommerce-message {
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--success) 35%, transparent);
}

.woocommerce-error {
	background: color-mix(in srgb, var(--wp--preset--color--sale) 8%, var(--wp--preset--color--base));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--sale) 30%, transparent);
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-inline-start: auto;
}

/* ==========================================================================
   7. Pagination
   ========================================================================== */

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	gap: 0.35em;
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--70);
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--taupe);
	padding: 0;
	font-variant-numeric: tabular-nums;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

/* ==========================================================================
   8. Reviews
   ========================================================================== */

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--40);
	margin: 0;
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	padding: 0;
	background: transparent;
	width: 48px;
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
	color: var(--wp--preset--color--sand-deep);
}

/* ==========================================================================
   9. Tab panel and review headings
   WooCommerce prints <h2>Description</h2> inside the tab panel. theme.json
   sizes h2 for page sections (up to 3rem), which dwarfs the body copy
   directly beneath it.
   ========================================================================== */

.woocommerce div.product .woocommerce-Tabs-panel > h2,
.woocommerce div.product .woocommerce-Tabs-panel > h3,
.woocommerce #reviews > h2,
.woocommerce #reviews #comments > h2,
.woocommerce div.product .woocommerce-Tabs-panel h2:first-child {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	margin-block: 0 var(--wp--preset--spacing--40);
}

.woocommerce div.product .woocommerce-Tabs-panel {
	max-width: 72ch;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--taupe);
}

.woocommerce div.product .woocommerce-Tabs-panel ul {
	padding-inline-start: 1.25em;
}

.woocommerce div.product .woocommerce-Tabs-panel li {
	margin-block-end: 0.4em;
}

/* The Specifications table is a plain data table, not a layout. */
.woocommerce div.product .shop_attributes {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce div.product .shop_attributes th,
.woocommerce div.product .shop_attributes td {
	padding: 0.7em 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: start;
}

.woocommerce div.product .shop_attributes th {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	width: 34%;
}

.woocommerce div.product .shop_attributes p {
	margin: 0;
}

/* ==========================================================================
   10. Shop and utility page titles
   theme.json gives h1 the hero display size, which is right for a landing
   page and absurd for a page whose title is the single word "Cart".
   ========================================================================== */

.woocommerce-cart .lyn-main > .wp-block-post-title,
.woocommerce-checkout .lyn-main > .wp-block-post-title,
.woocommerce-account .lyn-main > .wp-block-post-title,
.woocommerce-products-header__title,
.woocommerce-products-header .wp-block-post-title,
body.post-type-archive-product .lyn-main h1,
body.tax-product_cat .lyn-main h1,
body.tax-product_tag .lyn-main h1 {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.1;
	margin-block: 0 var(--wp--preset--spacing--50);
}

/* Archive description sits under the title, not beside it. */
.woocommerce-products-header .term-description {
	max-width: 62ch;
	color: var(--wp--preset--color--taupe);
	font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   11. Cart layout
   ========================================================================== */

/*
 * WooCommerce floats `.cart-collaterals` right at 48%, leaving a wide empty
 * gutter beside the totals. A two-column grid puts the shipping calculator
 * and cross-sells in that space instead.
 */
.woocommerce .cart-collaterals {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
	width: 100%;
	margin-block-start: var(--wp--preset--spacing--60);
}

.woocommerce .cart-collaterals::before,
.woocommerce .cart-collaterals::after {
	display: none !important;
}

.woocommerce .cart-collaterals > * {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.woocommerce .cart-collaterals .cross-sells {
	grid-column: 1;
}

.woocommerce .cart-collaterals .cart_totals {
	grid-column: 2;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--50);
}

@media (max-width: 900px) {
	.woocommerce .cart-collaterals {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce .cart-collaterals .cross-sells,
	.woocommerce .cart-collaterals .cart_totals {
		grid-column: 1;
	}
}

.woocommerce .cart_totals h2 {
	font-size: var(--wp--preset--font-size--large);
	margin-block: 0 var(--wp--preset--spacing--30);
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	padding-block: 0.75em;
}

.woocommerce .wc-proceed-to-checkout {
	padding: 0;
	margin-block-start: var(--wp--preset--spacing--40);
}

.woocommerce .wc-proceed-to-checkout .button {
	width: 100%;
	text-align: center;
}

/* Coupon row -------------------------------------------------------------- */

.woocommerce table.cart td.actions {
	padding-block: var(--wp--preset--spacing--40);
}

.woocommerce table.cart td.actions .coupon {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	flex-wrap: wrap;
	float: none;
}

.woocommerce table.cart td.actions .coupon input.input-text {
	width: auto;
	min-width: 12rem;
	padding: 0.8em 1.2em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--small);
}

/* Cart item media --------------------------------------------------------- */

.woocommerce table.cart img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
}

.woocommerce table.cart .product-name a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 500;
}

.woocommerce table.cart .product-name a:hover {
	text-decoration: underline;
}