/* ==================================================================
   10 - WOOCOMMERCE
   Shop, product, cart, checkout, account.

   Order of contents:
     A. Product card        - used on home, shop and related
     B. Shop archive        - page head, filters, sorting, pagination
     C. Single product      - gallery, summary, buy controls
     D. Sticky buy bar      - mobile only
     E. Tabs                - Details / Usage / Reviews
     F. Reviews
     G. Cart
     H. Checkout
     I. Account & misc
   ================================================================== */


/* ==================================================================
   A. PRODUCT CARD
   ================================================================== */

.wo-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;

	background: var(--wo-grad-surface);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-md);
	overflow: hidden;

	transition:
		border-color var(--wo-transition),
		transform var(--wo-transition),
		box-shadow var(--wo-transition);
}

.wo-product-card:hover {
	border-color: var(--wo-primary-line);
	transform: translateY(-5px);
	box-shadow: var(--wo-shadow-lg);
}

/* ---- Media ---- */

.wo-product-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--wo-grad-card);
	overflow: hidden;
}

.wo-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wo-duration-slow) var(--wo-ease-out);
}

.wo-product-card:hover .wo-product-card__media img {
	transform: scale(1.05);
}

/* Second gallery image revealed on hover. */
.wo-product-card__media-alt {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--wo-duration) var(--wo-ease);
}

.wo-product-card:hover .wo-product-card__media-alt {
	opacity: 1;
}

/* Letter placeholder when a product has no image. */
.wo-product-card__letter {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	font-family: var(--wo-font-display);
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: var(--wo-weight-semibold);
	font-variation-settings: 'opsz' 60, 'WONK' 1;
	color: rgba(255, 255, 255, 0.55);
	user-select: none;
}

/* ---- Overlays ---- */

.wo-product-card__badges {
	position: absolute;
	top: var(--wo-space-4);
	left: var(--wo-space-4);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-2);
	align-items: flex-start;
}

.wo-product-card__wishlist {
	position: absolute;
	top: var(--wo-space-3);
	right: var(--wo-space-3);
	z-index: 2;
}

/* ---- Body ---- */

.wo-product-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-2);
	flex: 1 1 auto;

	/* Less padding on phones so the image and text get more width. */
	padding: clamp(0.75rem, 3vw, 1.25rem);
}

/* Card text scales with the card, not with a fixed token. The vw
   term is deliberately small: these sit in a 2-4 column grid, so a
   card is roughly a quarter of the viewport on desktop and a half on
   a phone - the same vw value would grow far too fast at the wide
   end without the clamp ceiling. */
.wo-product-card__cat {
	font-size: clamp(0.75rem, 0.35vw + 0.66rem, 0.875rem);
	font-weight: var(--wo-weight-semibold);
	letter-spacing: var(--wo-tracking-wider);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wo-gold);
}

.wo-product-card__title {
	font-family: var(--wo-font-display);
	font-size: clamp(1.375rem, 0.95vw + 1.15rem, 1.8125rem);
	font-weight: var(--wo-weight-semibold);
	font-variation-settings: 'opsz' 24, 'WONK' 1;
	line-height: 1.22;
	margin: 0;
}

.wo-product-card__title a {
	color: var(--wo-text);
	text-decoration: none;
}

.wo-product-card__title a:hover {
	color: var(--wo-primary-hover);
}

/* Clamped so uneven descriptions do not stagger the grid. */
.wo-product-card__excerpt {
	font-size: clamp(0.875rem, 0.4vw + 0.78rem, 1rem);
	line-height: 1.55;
	color: var(--wo-text-muted);
	margin: 0;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Pushes the button to the bottom regardless of text length. */
.wo-product-card__footer {
	margin-top: auto;
	padding-top: var(--wo-space-2);
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-4);
}


/* ------------------------------------------------------------------
   PRICE
   ------------------------------------------------------------------ */

.wo-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--wo-space-2);
	font-family: var(--wo-font-body);
	line-height: 1;
}

.wo-price__now,
.wo-price ins {
	font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
	font-weight: var(--wo-weight-bold);
	color: var(--wo-gold);
	text-decoration: none;
	background: none;
}

.wo-price__was,
.wo-price del {
	font-size: clamp(0.875rem, 0.4vw + 0.78rem, 1rem);
	font-weight: var(--wo-weight-normal);
	color: var(--wo-text-dim);
	text-decoration: line-through;
	opacity: 0.85;
}

.wo-price--lg .wo-price__now,
.wo-price--lg ins {
	font-size: var(--wo-text-2xl);
}

.wo-price--lg .wo-price__was,
.wo-price--lg del {
	font-size: var(--wo-text-md);
}

/* WooCommerce's own price markup */
.woocommerce .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--wo-space-2);
	color: var(--wo-gold);
	font-weight: var(--wo-weight-bold);
}

.woocommerce .price del {
	color: var(--wo-text-dim);
	font-weight: var(--wo-weight-normal);
	opacity: 0.85;
}

.woocommerce .price ins {
	background: none;
	color: var(--wo-gold);
	text-decoration: none;
}


/* ==================================================================
   B. SHOP ARCHIVE
   ================================================================== */

.wo-shop {
	padding-top: calc(var(--wo-header-offset) + var(--wo-space-4));
	padding-bottom: var(--wo-section-y);
}

/* ---- Page head ---- */

.wo-shop__head {
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
	max-width: 640px;
}

.wo-shop__title {
	font-size: var(--wo-text-4xl);
	margin-bottom: var(--wo-space-3);
}

.wo-shop__desc {
	font-size: var(--wo-text-base);
	line-height: var(--wo-leading-normal);
	color: var(--wo-text-muted);
	margin: 0;
}

/* ---- Toolbar: filters + sorting ---- */

.wo-shop__toolbar {
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-4);
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.wo-shop__filters {
	min-width: 0;   /* lets the scroll row shrink inside flex */
}

.wo-shop__sort {
	display: flex;
	align-items: center;
	gap: var(--wo-space-3);
	flex-shrink: 0;
}

.wo-shop__sort-label {
	font-size: var(--wo-text-sm);
	color: var(--wo-text-muted);
	white-space: nowrap;
}

/* Woo prints its own ordering form. */
.woocommerce-ordering {
	margin: 0;
}

.woocommerce-result-count {
	font-size: var(--wo-text-sm);
	color: var(--wo-text-dim);
	margin: 0;
}

/* ---- Grid ---- */

.woocommerce ul.products,
.wo-products {
	display: grid;

	/* Two across on phones. Stated rather than derived, because a
	   268px minimum cannot fit twice on a 360px screen and would
	   collapse to a single column. */
	grid-template-columns: repeat(2, minmax(0, 1fr));

	/* Tighter gap on small screens so the cards stay wide. */
	gap: clamp(0.625rem, 3vw, 1.75rem);

	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;   /* kills Woo's clearfix floats */
}

.woocommerce ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
	display: flex;
}

.woocommerce ul.products li.product > * {
	width: 100%;
}

/* ---- Empty state ---- */

.wo-shop__empty {
	padding: var(--wo-space-16) var(--wo-space-6);
	text-align: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px dashed var(--wo-line-strong);
	border-radius: var(--wo-radius-lg);
}

.wo-shop__empty-title {
	font-size: var(--wo-text-xl);
	margin-bottom: var(--wo-space-3);
}

.wo-shop__empty-text {
	color: var(--wo-text-muted);
	margin-bottom: var(--wo-space-6);
}

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

.woocommerce nav.woocommerce-pagination,
.wo-pagination {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.woocommerce nav.woocommerce-pagination ul,
.wo-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wo-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}

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

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.wo-pagination a,
.wo-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 42px;
	height: 42px;
	padding: 0 var(--wo-space-3);

	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-medium);
	color: var(--wo-text-muted);
	text-decoration: none;

	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-pill);

	transition: background var(--wo-transition), color var(--wo-transition), border-color var(--wo-transition);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.wo-pagination a:hover {
	color: var(--wo-text);
	background: var(--wo-primary-soft);
	border-color: var(--wo-primary-line);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.wo-pagination .current {
	color: var(--wo-text-on-primary);
	background: var(--wo-primary);
	border-color: var(--wo-primary);
}


/* ==================================================================
   C. SINGLE PRODUCT
   ================================================================== */

.wo-product {
	padding-top: calc(var(--wo-header-offset) + var(--wo-space-4));
	padding-bottom: var(--wo-section-y);
}

.wo-product__layout {
	display: grid;
	grid-template-columns: 1fr;   /* splits at 992px */
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

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

.wo-product__gallery {
	position: relative;
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-lg);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.03);
}

.wo-product__gallery-main {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wo-grad-card);
}

.wo-product__gallery-main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wo-product__thumbs {
	display: flex;
	gap: var(--wo-space-3);
	padding: var(--wo-space-4);
	overflow-x: auto;
	scrollbar-width: none;
}

.wo-product__thumbs::-webkit-scrollbar {
	display: none;
}

.wo-product__thumb {
	flex: 0 0 auto;
	width: 68px;
	height: 68px;
	padding: 0;

	background: var(--wo-grad-card);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-sm);
	overflow: hidden;
	cursor: pointer;

	transition: border-color var(--wo-transition), opacity var(--wo-transition);
	opacity: 0.65;
}

.wo-product__thumb:hover,
.wo-product__thumb.is-active {
	opacity: 1;
	border-color: var(--wo-primary);
}

.wo-product__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Woo's default gallery, if used instead of the custom one. */
.woocommerce div.product div.images {
	width: 100%;
	margin: 0;
	float: none;
}

.woocommerce div.product div.images img {
	border-radius: var(--wo-radius-lg);
}

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

.wo-product__summary {
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-4);
}

.woocommerce div.product div.summary {
	width: 100%;
	margin: 0;
	float: none;
}

.wo-product__cat {
	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-semibold);
	letter-spacing: var(--wo-tracking-wider);
	text-transform: uppercase;
	color: var(--wo-gold);
}

.wo-product__title,
.woocommerce div.product .product_title {
	font-family: var(--wo-font-display);
	font-size: var(--wo-text-3xl);
	font-weight: var(--wo-weight-semibold);
	line-height: var(--wo-leading-tight);
	color: var(--wo-text);
	margin: 0;
}

.wo-product__excerpt,
.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: var(--wo-text-base);
	line-height: var(--wo-leading-normal);
	color: var(--wo-text-muted);
	max-width: 56ch;
}

/* ---- Fragrance notes ---- */

.wo-notes__label {
	display: block;
	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-semibold);
	letter-spacing: var(--wo-tracking-wider);
	text-transform: uppercase;
	color: var(--wo-gold);
	margin-bottom: var(--wo-space-3);
}

.wo-notes__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wo-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wo-notes__item {
	display: inline-flex;
	align-items: center;
	padding: 0.4375rem var(--wo-space-4);

	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-medium);
	color: var(--wo-text);

	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--wo-line-strong);
	border-radius: var(--wo-radius-pill);
}

/* ---- Meta row: burn life, weight ---- */

.wo-product__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wo-space-3) var(--wo-space-6);
}

.wo-product__meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--wo-space-2);
	font-size: var(--wo-text-sm);
	color: var(--wo-text-muted);
}

.wo-product__meta-item svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--wo-gold);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- Buy row ---- */

.wo-product__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wo-space-3);
	margin-top: var(--wo-space-2);
}

/* Add to cart and Buy Now share the remaining width. */
.wo-product__buy .wo-btn--primary,
.wo-product__buy .wo-btn--gold {
	flex: 1 1 180px;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wo-space-3);
	margin: 0;
}

.woocommerce div.product form.cart div.quantity {
	float: none;
	margin: 0;
}

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

.wo-product__assurance {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wo-space-3) var(--wo-space-5);
	margin-top: var(--wo-space-2);
}

.wo-product__assurance-item {
	display: inline-flex;
	align-items: center;
	gap: var(--wo-space-2);
	font-size: var(--wo-text-xs);
	color: var(--wo-text-muted);
}

.wo-product__assurance-item svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--wo-gold);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- Stock ---- */

.woocommerce div.product .stock {
	font-size: var(--wo-text-sm);
	color: var(--wo-success);
	margin: 0;
}

.woocommerce div.product .stock.out-of-stock {
	color: var(--wo-error);
}

/* ---- Variations ---- */

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-bottom: var(--wo-space-4);
	border: none;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	display: block;
	padding: 0 0 var(--wo-space-2);
	border: none;
	text-align: left;
}

.woocommerce div.product form.cart .reset_variations {
	font-size: var(--wo-text-xs);
	color: var(--wo-text-dim);
}


/* ==================================================================
   D. STICKY BUY BAR (mobile)
   Appears once the main buy row scrolls out of view.
   ================================================================== */

.wo-sticky-buy {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--wo-z-sticky);

	display: flex;
	align-items: center;
	gap: var(--wo-space-3);

	padding: var(--wo-space-3) var(--wo-gutter);
	padding-bottom: calc(var(--wo-space-3) + env(safe-area-inset-bottom));

	background: rgba(22, 15, 48, 0.96);
	border-top: 1px solid var(--wo-line-strong);
	box-shadow: 0 -8px 30px rgba(8, 4, 22, 0.5);

	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);

	transform: translateY(100%);
	visibility: hidden;
	transition: transform var(--wo-transition), visibility var(--wo-transition);
}

.wo-sticky-buy.is-visible {
	transform: translateY(0);
	visibility: visible;
}

.wo-sticky-buy__info {
	flex: 1 1 auto;
	min-width: 0;
}

.wo-sticky-buy__name {
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wo-sticky-buy__price {
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-bold);
	color: var(--wo-gold);
}

.wo-sticky-buy .wo-btn {
	flex: 0 0 auto;
}


/* ==================================================================
   E. TABS
   ================================================================== */

.wo-tabs {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	background: var(--wo-grad-surface);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-lg);
	overflow: hidden;
}

.wo-tabs__nav {
	display: flex;
	gap: var(--wo-space-2);
	padding: var(--wo-space-4) var(--wo-space-4) 0;

	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid var(--wo-line);
}

.wo-tabs__nav::-webkit-scrollbar {
	display: none;
}

.wo-tabs__nav .wo-pill {
	flex: 0 0 auto;
	margin-bottom: var(--wo-space-4);
}

.wo-tabs__panel {
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.wo-tabs__panel[hidden] {
	display: none;
}

/* Woo's default tab markup, restyled to match. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--wo-space-2);
	padding: var(--wo-space-4) var(--wo-space-4) 0;
	margin: 0;
	overflow-x: auto;
	border-bottom: 1px solid var(--wo-line);
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0 0 var(--wo-space-4);
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--wo-radius-pill);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem var(--wo-space-6);
	min-height: 36px;

	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-medium);
	color: var(--wo-text-muted);

	border-radius: var(--wo-radius-pill);
	transition: background var(--wo-transition), color var(--wo-transition);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wo-text);
	background: rgba(255, 255, 255, 0.06);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wo-text-on-primary);
	background: var(--wo-primary);
	font-weight: var(--wo-weight-semibold);
}

.woocommerce div.product .woocommerce-tabs .panel {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	display: none;   /* the tab label already says it */
}


/* ==================================================================
   F. REVIEWS
   ================================================================== */

.wo-reviews {
	display: grid;
	grid-template-columns: 1fr;   /* two columns at 992px */
	gap: clamp(2rem, 4vw, 3rem);
}

.wo-reviews__empty {
	font-size: var(--wo-text-sm);
	color: var(--wo-text-muted);
}

.wo-reviews__list,
.woocommerce #reviews #comments ol.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-5);
}

.woocommerce #reviews #comments ol.commentlist li {
	margin: 0;
	padding: 0;
}

.woocommerce #reviews #comments ol.commentlist li .comment_container {
	display: flex;
	gap: var(--wo-space-4);
	padding: var(--wo-space-5);
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-md);
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
	position: static;
	width: 42px;
	height: 42px;
	padding: 0;
	margin: 0;
	background: var(--wo-surface-2);
	border: none;
	border-radius: var(--wo-radius-circle);
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	flex: 1 1 auto;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
	font-size: var(--wo-text-sm);
	color: var(--wo-text);
	margin-bottom: var(--wo-space-2);
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta time {
	color: var(--wo-text-dim);
	font-size: var(--wo-text-xs);
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .description {
	color: var(--wo-text-muted);
	font-size: var(--wo-text-base);
}

/* Star display */
.woocommerce .star-rating {
	float: none;
	font-size: var(--wo-text-sm);
	color: var(--wo-star);
	letter-spacing: 0.1em;
	margin-bottom: var(--wo-space-2);
}

.woocommerce .star-rating::before {
	color: var(--wo-line-strong);
}

.woocommerce .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--wo-space-3);
	margin: 0;
}

.woocommerce .woocommerce-review-link {
	font-size: var(--wo-text-sm);
	color: var(--wo-text-dim);
}

#review_form_wrapper {
	min-width: 0;
}


/* ==================================================================
   G. CART
   ================================================================== */

.wo-cart {
	padding-top: calc(var(--wo-header-offset) + var(--wo-space-4));
	padding-bottom: var(--wo-section-y);
}

.woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.03);
	margin-bottom: var(--wo-space-8);
}

.woocommerce table.shop_table th {
	padding: var(--wo-space-4) var(--wo-space-5);
	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-semibold);
	letter-spacing: var(--wo-tracking-wide);
	text-transform: uppercase;
	color: var(--wo-text-dim);
	text-align: left;
	border-bottom: 1px solid var(--wo-line);
}

.woocommerce table.shop_table td {
	padding: var(--wo-space-5);
	font-size: var(--wo-text-sm);
	color: var(--wo-text-muted);
	border-top: 1px solid var(--wo-line-faint);
	vertical-align: middle;
}

.woocommerce table.shop_table tbody tr:first-child td {
	border-top: none;
}

.woocommerce table.cart img {
	width: 62px;
	border-radius: var(--wo-radius-sm);
}

.woocommerce table.cart .product-name a {
	color: var(--wo-text);
	font-weight: var(--wo-weight-medium);
}

.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	font-size: 18px;
	line-height: 1;
	color: var(--wo-text-dim);
	background: transparent;
	border-radius: var(--wo-radius-circle);
	transition: color var(--wo-transition), background var(--wo-transition);
}

.woocommerce a.remove:hover {
	color: var(--wo-error);
	background: rgba(255, 107, 107, 0.14);
}

.woocommerce .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
}

.woocommerce-cart .cart_totals h2 {
	font-size: var(--wo-text-xl);
	margin-bottom: var(--wo-space-5);
}

.woocommerce-cart .cart_totals table.shop_table {
	margin-bottom: var(--wo-space-5);
}

.woocommerce .cart_totals .order-total .amount {
	font-size: var(--wo-text-lg);
	color: var(--wo-gold);
}

.woocommerce .coupon {
	display: flex;
	gap: var(--wo-space-2);
	flex-wrap: wrap;
	margin-bottom: var(--wo-space-5);
}

.woocommerce .coupon .input-text {
	flex: 1 1 180px;
	width: auto;
}

/* Empty cart */
.wo-cart-empty {
	padding: var(--wo-space-16) var(--wo-space-6);
	text-align: center;
}

.wo-cart-empty__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto var(--wo-space-5);
	color: var(--wo-text-dim);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
}


/* ==================================================================
   H. CHECKOUT
   ================================================================== */

.wo-checkout {
	padding-top: calc(var(--wo-header-offset) + var(--wo-space-4));
	padding-bottom: var(--wo-section-y);
}

.woocommerce .col2-set,
.woocommerce-page .col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--wo-gap);
	width: 100%;
}

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

.woocommerce-checkout h3 {
	font-size: var(--wo-text-xl);
	margin-bottom: var(--wo-space-5);
	padding-bottom: var(--wo-space-4);
	border-bottom: 1px solid var(--wo-line);
}

#order_review,
#order_review_heading {
	width: 100%;
	float: none;
}

.woocommerce-checkout #payment {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-lg);
	padding: var(--wo-space-5);
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border-bottom: 1px solid var(--wo-line);
	margin-bottom: var(--wo-space-5);
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wo-space-3);
	padding: var(--wo-space-4) 0;
	color: var(--wo-text);
	font-size: var(--wo-text-sm);
}

.woocommerce-checkout #payment ul.payment_methods li label {
	margin: 0;
	cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
	flex: 1 0 100%;
	padding: var(--wo-space-4);
	margin: var(--wo-space-2) 0 0;
	font-size: var(--wo-text-xs);
	color: var(--wo-text-muted);
	background: rgba(0, 0, 0, 0.22);
	border-radius: var(--wo-radius-sm);
}

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

.woocommerce #payment #place_order,
.woocommerce-checkout #place_order {
	width: 100%;
	min-height: 54px;
	font-size: var(--wo-text-md);
	background: var(--wo-grad-gold);
	color: var(--wo-text-on-gold);
	box-shadow: var(--wo-glow-gold);
}

.woocommerce #payment #place_order:hover {
	background: linear-gradient(135deg, #FFDE7A 0%, var(--wo-gold-hover) 100%);
	color: var(--wo-text-on-gold);
}

/* Order received */
.woocommerce-order .woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
	gap: var(--wo-gap);
	list-style: none;
	padding: var(--wo-space-6);
	margin: 0 0 var(--wo-space-8);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-lg);
}

.woocommerce-order .woocommerce-order-overview li {
	border: none;
	font-size: var(--wo-text-xs);
	letter-spacing: var(--wo-tracking-wide);
	text-transform: uppercase;
	color: var(--wo-text-dim);
}

.woocommerce-order .woocommerce-order-overview li strong {
	display: block;
	margin-top: var(--wo-space-2);
	font-size: var(--wo-text-md);
	letter-spacing: 0;
	text-transform: none;
	color: var(--wo-text);
}


/* ==================================================================
   I. ACCOUNT & MISC

   The logged-in account page now renders the custom Account Dashboard
   again (Profile / Orders tabs) - see inc/account-dashboard.php and
   woocommerce/myaccount/dashboard.php. Its own layout lives in
   20-account-dashboard.css, loaded only there. What is left here is
   only the handful of fixes that apply no matter what markup sits
   inside the WooCommerce wrapper on this one page.

   WooCommerce's own account sidebar menu (woocommerce_account_
   navigation) is turned off by inc/account-dashboard.php, so there is
   deliberately no .woocommerce-MyAccount-navigation styling below -
   that markup no longer prints.
   ================================================================== */

/*
 * My Account is a normal page holding the [woocommerce_my_account]
 * shortcode, so it renders through page.php into .wo-entry-content,
 * which is capped at 72ch (~610px) for reading prose. That is far too
 * narrow for the dashboard, so the cap is lifted here - on the account
 * page only, leaving the prose measure intact everywhere else.
 */
.woocommerce-account .wo-page > .wo-container,
.woocommerce-account .wo-entry-content,
.woocommerce-account .wo-page__content {
	max-width: min(100%, calc(var(--wo-container) + (var(--wo-gutter) * 2)));
	width: 100%;
}

.woocommerce-account .wo-page article {
	max-width: none;
	width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
}

/* Fields size to their container - without border-box the padding and
   border are added on top of the width and push inputs past the edge. */
.woocommerce-account .woocommerce-MyAccount-content input,
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
	box-sizing: border-box;
	max-width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-content table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-account .woocommerce-MyAccount-content table th,
.woocommerce-account .woocommerce-MyAccount-content table td {
	padding: var(--wo-space-3);
	font-size: var(--wo-text-sm);
	text-align: left;
	color: var(--wo-text);
	border-bottom: 1px solid var(--wo-line-faint);
}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
	margin-bottom: var(--wo-space-5);
	font-size: var(--wo-text-xs);
	color: var(--wo-text-dim);
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--wo-text-muted);
}

.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--wo-primary-hover);
}

/* Related / upsells
   WooCommerce prints these with its own .related / .upsells classes,
   so the spacing has to target those as well as ours - otherwise the
   block sits flush against the tabs panel above it. */
.wo-related,
.woocommerce .related.products,
.woocommerce .upsells.products,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
	margin-top: clamp(2.5rem, 6vw, 5rem);
	clear: both;
}

/* Breathing room under the tabs panel on every screen size. */
.wo-tabs,
.woocommerce div.product .woocommerce-tabs {
	margin-bottom: clamp(1rem, 3vw, 2rem);
}

.wo-related__title,
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	font-family: var(--wo-font-display);
	font-size: var(--wo-text-2xl);
	margin-bottom: var(--wo-space-6);
}

/* Sale flash on Woo's own markup */
.woocommerce span.onsale {
	position: absolute;
	top: var(--wo-space-4);
	left: var(--wo-space-4);
	right: auto;
	min-height: 0;
	min-width: 0;
	padding: 0.3125rem var(--wo-space-3);
	margin: 0;
	line-height: 1;
	font-size: 11px;
	font-weight: var(--wo-weight-bold);
	color: var(--wo-text-on-gold);
	background: var(--wo-gold);
	border-radius: var(--wo-radius-pill);
}

/* Kill Woo's default block sidebar padding */
.woocommerce .woocommerce-products-header {
	margin: 0;
}


/* ==================================================================
   PRODUCT CARD TEXT - SITE WIDE
   Every product grid on the site renders the same partial
   (template-parts/content/product-card.php), so these rules cover
   the home carousel, shop archive, related products, upsells and the
   wishlist at once. There is no need to scope them per section.

   The vw coefficients are deliberately small. A card is roughly a
   quarter of the viewport at 1200px+ but half of it on a phone, so a
   normal vw term would overshoot badly at the wide end; the clamp
   ceilings hold it.
   ================================================================== */

/* The Add to cart button was the last card element still reading a
   fixed token. Scoped to the card so other buttons are unaffected. */
.wo-product-card .wo-btn {
	font-size: clamp(0.875rem, 0.35vw + 0.79rem, 1rem);
	min-height: 46px;
}

/* Sale and Sold out flags looked undersized once everything around
   them grew. */
.wo-product-card .wo-badge {
	font-size: clamp(0.6875rem, 0.3vw + 0.62rem, 0.8125rem);
	padding: 0.375rem var(--wo-space-3);
}

/* Related and upsell sections sit inside WooCommerce's own wrappers.
   These restate the same values at a higher specificity purely as a
   guarantee against a plugin rule landing under .related. */
.woocommerce .related .wo-product-card__title,
.woocommerce .upsells .wo-product-card__title,
.wo-related .wo-product-card__title {
	font-size: clamp(1.375rem, 0.95vw + 1.15rem, 1.8125rem);
	line-height: 1.22;
}

.woocommerce .related .wo-product-card__cat,
.woocommerce .upsells .wo-product-card__cat,
.wo-related .wo-product-card__cat {
	font-size: clamp(0.75rem, 0.35vw + 0.66rem, 0.875rem);
}

.woocommerce .related .wo-product-card__excerpt,
.woocommerce .upsells .wo-product-card__excerpt,
.wo-related .wo-product-card__excerpt {
	font-size: clamp(0.875rem, 0.4vw + 0.78rem, 1rem);
	line-height: 1.55;
}

.woocommerce .related .wo-price__now,
.woocommerce .related .wo-price ins,
.woocommerce .upsells .wo-price__now,
.woocommerce .upsells .wo-price ins {
	font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
}

.woocommerce .related .wo-price__was,
.woocommerce .related .wo-price del,
.woocommerce .upsells .wo-price__was,
.woocommerce .upsells .wo-price del {
	font-size: clamp(0.875rem, 0.4vw + 0.78rem, 1rem);
}

/* ==================================================================
   RELATED PRODUCT NAME
   Only the name resisted the earlier rules, which means it is being
   rendered as Woo's own heading markup rather than the theme
   partial's .wo-product-card__title. Woo prints it as an h2, and the
   heading sizes in 03-typography.css were outranking the card rule.

   Both class names are targeted, and the doubled parent raises
   specificity above any h2 rule. !important is used on the size
   alone - it is the one property with a genuine conflict, and
   scoping it this tightly keeps the blast radius to this section.
   ================================================================== */

.woocommerce .related ul.products li.product .woocommerce-loop-product__title,
.woocommerce .upsells ul.products li.product .woocommerce-loop-product__title,
.woocommerce .related ul.products li.product h2,
.woocommerce .related ul.products li.product h3,
.woocommerce .upsells ul.products li.product h2,
.woocommerce .upsells ul.products li.product h3,
.woocommerce .related .wo-product-card .wo-product-card__title,
.woocommerce .related .wo-product-card .wo-product-card__title a,
.woocommerce .upsells .wo-product-card .wo-product-card__title,
.woocommerce .upsells .wo-product-card .wo-product-card__title a,
.wo-related .wo-product-card__title,
.wo-related .wo-product-card__title a {
	font-family: var(--wo-font-display);
	font-size: clamp(1.375rem, 0.95vw + 1.15rem, 1.8125rem) !important;
	font-weight: var(--wo-weight-semibold);
	font-variation-settings: 'opsz' 24, 'WONK' 1;
	line-height: 1.28;
	letter-spacing: var(--wo-tracking-tight);
}

/* ==================================================================
   WHOLE-CARD CLICK TARGET
   The product title carries .wo-stretch-link (12-utilities.css),
   whose ::after covers the whole card. Anything that must stay
   independently clickable has to sit above that overlay - otherwise
   the click lands on the link underneath and navigates instead.
   ================================================================== */

.wo-product-card {
	position: relative;
	cursor: pointer;
}

/* z-index only. The heart and the badges are already positioned
   absolutely over the image, and overwriting that with relative
   dropped them into normal flow - which is what moved the heart
   below the picture. z-index works on any positioned element, so
   they need nothing but the stacking value. */
.wo-product-card__wishlist,
.wo-product-card__badges {
	z-index: 2;
}

/* These sit in normal flow, so they do need a position value before
   z-index has any effect. */
.wo-product-card .wo-btn,
.wo-product-card .add_to_cart_button,
.wo-product-card__title {
	position: relative;
	z-index: 2;
}

/* Hover and keyboard focus reflect the whole card, so the feedback
   matches what a click will actually do. */
.wo-product-card:hover .wo-product-card__title a,
.wo-product-card:focus-within .wo-product-card__title a {
	color: var(--wo-primary-hover);
}

.wo-product-card:focus-within {
	outline: 2px solid var(--wo-primary-hover);
	outline-offset: 3px;
	border-radius: var(--wo-radius-md);
}

/* The card outline is the focus indicator; a second one on the link
   itself would double up. */
.wo-product-card .wo-stretch-link:focus-visible {
	outline: none;
}

/* ==================================================================
   SINGLE PRODUCT PAGE TYPOGRAPHY
   The detail page has its own type, separate from the card in the
   grid, so it was untouched by the card work. Same clamp approach:
   continuous scaling with no breakpoint able to pin it.
   ================================================================== */

.wo-product__title,
.woocommerce div.product .product_title {
	font-size: clamp(1.875rem, 2.4vw + 1.3rem, 3rem);
	line-height: 1.08;
}

.wo-product__cat {
	font-size: clamp(0.75rem, 0.35vw + 0.66rem, 0.875rem);
	letter-spacing: var(--wo-tracking-wider);
}

.wo-product__excerpt,
.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: clamp(1rem, 0.45vw + 0.9rem, 1.125rem);
	line-height: 1.65;
}

/* The large price beside the buy buttons. */
.wo-price--lg .wo-price__now,
.wo-price--lg ins,
.woocommerce div.product .summary .price,
.woocommerce div.product .summary .price ins {
	font-size: clamp(1.75rem, 1.4vw + 1.3rem, 2.5rem);
}

.wo-price--lg .wo-price__was,
.wo-price--lg del,
.woocommerce div.product .summary .price del {
	font-size: clamp(1rem, 0.5vw + 0.88rem, 1.25rem);
}

/* Fragrance note chips and the meta row beneath them. */
.wo-notes__label {
	font-size: clamp(0.75rem, 0.35vw + 0.66rem, 0.875rem);
}

.wo-notes__item {
	font-size: clamp(0.875rem, 0.4vw + 0.78rem, 1rem);
	padding: 0.5rem var(--wo-space-4);
}

.wo-product__meta-item,
.wo-product__assurance-item {
	font-size: clamp(0.8125rem, 0.4vw + 0.72rem, 0.9375rem);
}

/* Buy row. */
.wo-product__buy .wo-btn {
	font-size: clamp(0.9375rem, 0.4vw + 0.84rem, 1.0625rem);
}

/* Tab labels and the panel copy inside them. */
.wo-tabs__nav .wo-pill,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-size: clamp(0.875rem, 0.4vw + 0.78rem, 1rem);
}

.wo-tabs__panel,
.woocommerce div.product .woocommerce-tabs .panel {
	font-size: clamp(0.9375rem, 0.4vw + 0.84rem, 1.0625rem);
	line-height: 1.7;
}

/* Related section heading. */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.wo-related__title {
	font-size: clamp(1.625rem, 1.6vw + 1.2rem, 2.25rem);
}

/* ==================================================================
   PRODUCT CARD NAME - FINAL SIZE
   Last in the file and unscoped, so it settles the size for every
   grid: shop archive, category and tag archives, the home carousel,
   related products and the wishlist.

   The page-scoped version this replaces keyed off .wo-shop and a set
   of body classes that do not all match the way the archive actually
   renders, so it never applied on the shop page. One size everywhere
   is simpler and keeps the card consistent between placements.

   !important appears once, and only because the related-products
   rule above already uses it - without matching it here, the related
   name would stay at the old size while every other card grew.
   ================================================================== */

.wo-product-card__title,
.wo-product-card__title a,
.woocommerce ul.products li.product .wo-product-card__title,
.woocommerce ul.products li.product .wo-product-card__title a,
.woocommerce .related .wo-product-card__title,
.woocommerce .upsells .wo-product-card__title,
.wo-related .wo-product-card__title {
	font-family: var(--wo-font-display);
	font-size: clamp(1.375rem, 0.95vw + 1.15rem, 1.8125rem) !important;
	font-weight: var(--wo-weight-semibold);
	font-variation-settings: 'opsz' 24, 'WONK' 1;
	line-height: 1.22;
	letter-spacing: var(--wo-tracking-tight);
}