/**
 * VICH — WooCommerce: catalogue, product, cart, checkout, order, account.
 */

/* ==========================================================================
   0. Overrides for woocommerce-general
   --------------------------------------------------------------------------
   That sheet is kept for the star-rating icon font, but its default purple
   buttons and green sale bubble have to give way to the brand palette. The
   selectors below deliberately mirror WooCommerce's own specificity.
   ========================================================================== */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 52px;
	padding: 0.9rem 1.85rem;
	background: var(--navy);
	color: var(--cream);
	border: 1px solid var(--navy);
	border-radius: var(--radius-xs);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.2;
	text-decoration: none;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--navy-700);
	border-color: var(--navy-700);
	color: var(--cream);
}

.woocommerce a.button.btn--outline,
.woocommerce button.button.btn--outline {
	background: transparent;
	color: var(--navy);
	border-color: var(--line-strong);
}

.woocommerce a.button.btn--outline:hover,
.woocommerce button.button.btn--outline:hover {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--cream);
}

.woocommerce a.button.btn--sm,
.woocommerce button.button.btn--sm,
.woocommerce input.button.btn--sm {
	min-height: 44px;
	padding: 0.6rem 1.2rem;
	font-size: 0.68rem;
}

.woocommerce a.button.btn--ghost,
.woocommerce button.button.btn--ghost {
	min-height: 0;
	padding: 0.4rem 0;
	background: transparent;
	border-color: transparent;
	color: var(--navy);
}

.woocommerce a.button.btn--ghost:hover,
.woocommerce button.button.btn--ghost:hover {
	background: transparent;
	border-color: transparent;
	color: var(--gold-600);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce input.button:disabled {
	opacity: 0.45;
	padding: 0.9rem 1.85rem;
}

/* Sale flash: a square gold chip, not WooCommerce's green bubble. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	position: static;
	top: auto;
	right: auto;
	left: auto;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0.35rem 0.7rem;
	line-height: 1;
	border-radius: var(--radius-xs);
	background: var(--gold);
	color: var(--navy-900);
	font-family: var(--font-body);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Ratings keep WooCommerce's icon font, recoloured. */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--gold); }
.woocommerce .star-rating::before { color: var(--gold-200); }

/* --------------------------------------------------------------------------
   Loop card typography.

   WooCommerce shrinks the price to .857em, drops it to weight 400 and paints
   it olive (#958e09), and forces card headings to 1em. Those rules only match
   on pages carrying the .woocommerce body class, so the identical cards looked
   different on the shop page and on the homepage. The selectors below are
   deliberately one class heavier than WooCommerce's, and are paired with a
   plain version for the homepage where its rules never apply.
   -------------------------------------------------------------------------- */

.product-card__title,
.woocommerce ul.products li.product h3.product-card__title {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	font-weight: 500;
	line-height: 1.25;
}

.product-card__foot .price,
.woocommerce ul.products li.product .product-card__foot .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.55rem;
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--navy);
}

.product-card__foot .price ins,
.woocommerce ul.products li.product .product-card__foot .price ins {
	order: -1;
	text-decoration: none;
	font-weight: 600;
	color: var(--navy);
}

.product-card__foot .price del,
.woocommerce ul.products li.product .product-card__foot .price del {
	font-size: 0.6em;
	font-weight: 400;
	color: var(--text-muted);
	opacity: 1;
}

.product-card__foot .price .woocommerce-Price-currencySymbol,
.woocommerce ul.products li.product .product-card__foot .price .woocommerce-Price-currencySymbol {
	font-size: 0.62em;
	font-weight: 500;
	margin-right: 0.12em;
}

/* Single product: same olive/1.25em treatment, same remedy. */
.product-summary .price,
.woocommerce div.product .product-summary .price {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	font-weight: 600;
	color: var(--navy);
}

.woocommerce div.product .product-summary .price ins { color: var(--navy); text-decoration: none; }
.woocommerce div.product .product-summary .price del { color: var(--text-muted); font-size: 0.55em; font-weight: 400; }

.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product .woocommerce-tabs {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce .quantity .qty { width: 54px; }

/* woocommerce-general pins cart thumbnails to 32px. */
.woocommerce table.cart img,
.woocommerce table.shop_table td.product-thumbnail img,
.woocommerce #content table.cart img {
	width: 92px;
	height: 110px;
	object-fit: contain;
	box-shadow: none;
}

/* Our summary panel already has a heading. */
.cart_totals > h2,
.cross-sells > h2 + h2 {
	display: none;
}

/* WooCommerce clears floats with `display: table` pseudo-elements. Inside a
   grid or flex container those become real items and push everything along by
   a cell, so they are switched off on the containers we lay out ourselves. */
.woocommerce ul.order_details::before,
.woocommerce ul.order_details::after,
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce form.checkout::before,
.woocommerce form.checkout::after,
.woocommerce form.checkout_coupon::before,
.woocommerce form.checkout_coupon::after,
.woocommerce .cart-collaterals::before,
.woocommerce .cart-collaterals::after {
	content: none;
	display: none;
}

/* ==========================================================================
   1. Notices
   ========================================================================== */

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.wc-block-components-notice-banner {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	list-style: none;
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 3px solid var(--navy);
	border-radius: var(--radius-xs);
	font-size: var(--fs-sm);
	color: var(--text);
}

.woocommerce-message { border-left-color: var(--success); }
.woocommerce-error { border-left-color: var(--danger); }

/* woocommerce-general prefixes notices with a glyph from its own icon font;
   our notices carry no such font, so the character renders as tofu. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::after,
.woocommerce-error::after,
.woocommerce-info::after {
	content: none;
	display: none;
}
.woocommerce-info { border-left-color: var(--gold); }

.woocommerce-error li { margin: 0 0 0.35rem; }
.woocommerce-error li:last-child { margin-bottom: 0; }

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
	flex: none;
	min-height: 40px;
	padding: 0.5rem 1.1rem;
	font-size: 0.7rem;
}

/* ==========================================================================
   2. Shop toolbar
   ========================================================================== */

.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1.25rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--line);
}

.woocommerce-result-count {
	margin: 0;
	font-size: var(--fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.woocommerce-ordering { margin: 0; }

.woocommerce-ordering select {
	min-height: 44px;
	padding-block: 0.5rem;
	border-color: var(--line);
	background-color: transparent;
	font-size: var(--fs-sm);
}

/* ==========================================================================
   3. Product grid
   ========================================================================== */

ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.15rem, 2.5vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

ul.products li.product {
	margin: 0;
	position: relative;
	display: flex;
	flex-direction: column;
}

.product-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	margin-bottom: 1.15rem;
	aspect-ratio: 4 / 5;
	background: linear-gradient(165deg, var(--white), var(--cream-200));
	border: 1px solid var(--line);
}

.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: clamp(0.75rem, 2vw, 1.5rem);
	transition: transform var(--dur-slow) var(--ease);
}

li.product:hover .product-card__media img { transform: scale(1.045); }

.product-card__badges {
	position: absolute;
	left: 0.85rem;
	top: 0.85rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	align-items: flex-start;
}

.product-card__body { display: flex; flex-direction: column; flex: 1; }

.product-card__cat {
	margin: 0 0 0.4rem;
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.product-card__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	line-height: 1.25;
}

.product-card__title a { color: inherit; text-decoration: none; }
.product-card__title a:hover { color: var(--gold-600); }

.product-card__excerpt {
	margin: 0 0 0.85rem;
	font-size: var(--fs-sm);
	color: var(--text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem;
	margin-top: auto;
	padding-top: 0.85rem;
	border-top: 1px solid var(--line);
}

/* Two-up cards on a phone are too narrow to hold price and button on one row. */
@media (max-width: 639px) {
	.product-card__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 0.65rem;
	}

	.product-card__actions,
	.product-card__actions .btn { width: 100%; }
}

ul.products .price { margin: 0; }

ul.products .button,
ul.products .added_to_cart {
	min-height: 44px;
	padding: 0.6rem 1.2rem;
	font-size: 0.68rem;
}

ul.products .added_to_cart {
	display: none;
}

.product-card__actions { display: flex; gap: 0.5rem; }

/* Price */
.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
	font-weight: 600;
	color: var(--navy);
	line-height: 1.2;
}

.price del {
	font-size: 0.72em;
	font-weight: 400;
	color: var(--text-muted);
	text-decoration-thickness: 1px;
}

.price ins {
	text-decoration: none;
	color: var(--navy);
}

.price .woocommerce-Price-currencySymbol {
	font-size: 0.68em;
	font-weight: 500;
	margin-right: 0.1em;
}

/* Badges */
span.onsale,
.product-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.7rem;
	background: var(--gold);
	color: var(--navy-900);
	font-family: var(--font-body);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	border-radius: var(--radius-xs);
}

.product-badge--sold-out { background: var(--navy); color: var(--cream); }
.product-badge--new { background: var(--navy); color: var(--cream); }

/* Star rating */
.star-rating,
.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.rating-inline {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

/* ==========================================================================
   4. Single product
   ========================================================================== */

.product-main {
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
	padding-block: clamp(1.5rem, 3vw, 3rem) clamp(3rem, 5vw, 4.5rem);
}

@media (min-width: 900px) {
	.product-main { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; }
}

/* Gallery */
.product-gallery { position: relative; }

@media (min-width: 900px) {
	.product-gallery { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

.product-gallery__stage {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: linear-gradient(165deg, var(--white), var(--cream-200));
	border: 1px solid var(--line);
}

.product-gallery__stage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: clamp(1rem, 3vw, 2.5rem);
	transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}

.product-gallery__stage:hover img { transform: scale(1.04); }
.product-gallery__stage img.is-swapping { opacity: 0; }

.product-gallery__badges {
	position: absolute;
	left: 1rem;
	top: 1rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	align-items: flex-start;
}

.product-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 0.6rem;
	margin-top: 0.6rem;
	padding: 0;
	list-style: none;
}

.product-gallery__thumb {
	margin: 0;
	padding: 0;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--white);
	border: 1px solid var(--line);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease);
}

.product-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0.35rem;
}

.product-gallery__thumb.is-active,
.product-gallery__thumb:hover { border-color: var(--gold); }

/* Summary */
.product-summary__cat {
	margin: 0 0 0.5rem;
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold-600);
}

.product-summary .product_title {
	margin-bottom: 0.75rem;
	font-size: var(--fs-h2);
	line-height: 1.1;
}

.product-summary__rating {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.15rem;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

.product-summary__rating a { color: var(--text-muted); }

.product-summary .price {
	margin-bottom: 0.4rem;
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}

.product-summary__pricenote {
	margin: 0 0 1.5rem;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

.woocommerce-product-details__short-description {
	margin-bottom: 1.75rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-lead);
	line-height: 1.75;
	color: var(--text);
}

.woocommerce-product-details__short-description ul {
	margin-top: 1rem;
	padding-left: 1.1rem;
}

.woocommerce-product-details__short-description li::marker { color: var(--gold); }

/* Highlight chips */
.product-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
	padding: 0;
	list-style: none;
}

.product-highlights li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0.5rem 0.9rem;
	background: var(--cream-200);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	color: var(--navy);
}

.product-highlights .vich-icon { color: var(--gold); }

/* Cart form */
form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

form.cart .quantity { flex: none; }

form.cart .single_add_to_cart_button {
	flex: 1 1 12rem;
	min-height: 56px;
}

form.cart .variations { width: 100%; }

.stock { margin: 0 0 1rem; font-size: var(--fs-sm); }
.stock.in-stock { color: var(--success); }
.stock.out-of-stock { color: var(--danger); }

/* Quantity stepper */
.quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--line);
	border-radius: var(--radius-xs);
	background: var(--white);
	overflow: hidden;
}

.quantity__btn {
	display: grid;
	place-items: center;
	width: 46px;
	background: none;
	border: 0;
	color: var(--navy);
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.quantity__btn:hover { background: var(--cream-200); color: var(--gold-600); }
.quantity__btn:disabled { opacity: 0.35; cursor: not-allowed; }

.quantity input.qty {
	width: 54px;
	min-height: 54px;
	padding: 0;
	border: 0;
	border-inline: 1px solid var(--line);
	border-radius: 0;
	text-align: center;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	background: transparent;
	-moz-appearance: textfield;
}

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

.quantity input.qty:focus { box-shadow: none; }

/* Assurances under the buy button */
.product-assurances {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 1.75rem;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.product-assurances li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

.product-assurances .vich-icon { color: var(--gold); flex: none; }

.product_meta {
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	font-size: var(--fs-xs);
	color: var(--text-muted);
	letter-spacing: 0.04em;
}

.product_meta > span { display: block; margin-bottom: 0.4rem; }
.product_meta a { color: var(--navy); }

/* Sticky add-to-cart (mobile) */
.sticky-atc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem var(--gutter);
	padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
	background: rgba(251, 248, 242, 0.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--line);
	transform: translateY(110%);
	transition: transform var(--dur-slow) var(--ease);
}

.sticky-atc.is-visible { transform: translateY(0); }

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

.sticky-atc__info { flex: 1; min-width: 0; }

.sticky-atc__title {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sticky-atc__price {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--navy);
}

.sticky-atc__price .price { font-size: inherit; }
.sticky-atc .btn { flex: none; }

/* Tabs */
.product-tabs {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--line);
}

.product-tabs__nav {
	display: flex;
	gap: clamp(1rem, 3vw, 2.5rem);
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding: 0 0 0.25rem;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid var(--line);
}

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

/* On a phone, wrap the tabs rather than hiding "Ulasan" off the right edge
   behind a horizontal swipe most people never try. */
@media (max-width: 560px) {
	.product-tabs__nav {
		flex-wrap: wrap;
		overflow-x: visible;
		gap: 0 1.25rem;
	}

	.product-tabs__nav a { padding-bottom: 0.75rem; }
}

.product-tabs__nav li { margin: 0; flex: none; }

.product-tabs__nav a {
	position: relative;
	display: block;
	padding: 0.75rem 0 1rem;
	color: var(--text-muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.product-tabs__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	background: var(--gold);
	transform: scaleX(0);
	transition: transform var(--dur) var(--ease);
}

.product-tabs__nav li.is-active a { color: var(--navy); }
.product-tabs__nav li.is-active a::after { transform: scaleX(1); }

.product-tabs__panel { display: none; }
.product-tabs__panel.is-active { display: block; animation: vich-fade var(--dur-slow) var(--ease); }

@keyframes vich-fade {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.product-tabs__panel > h2:first-child { display: none; }

/* Related products */
.related.products,
.up-sells.products,
.cross-sells {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--line);
}

.related.products > h2,
.up-sells.products > h2,
.cross-sells > h2 {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
	font-size: var(--fs-h3);
	text-align: center;
}

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

#reviews .commentlist li { margin-bottom: 1.5rem; }

#reviews .comment_container {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	padding: 1.5rem;
	background: var(--white);
	border: 1px solid var(--line);
}

#reviews .comment_container img.avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

#reviews .comment-text .meta {
	margin-bottom: 0.5rem;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

#reviews .comment-text .meta strong { color: var(--navy); font-size: var(--fs-sm); }

#review_form_wrapper {
	max-width: 42rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--cream-50);
	border: 1px solid var(--line);
}

.comment-form-rating .stars a {
	color: var(--gold);
	text-decoration: none;
}

.woocommerce-noreviews {
	padding: 1.25rem;
	background: var(--cream-200);
	border-left: 2px solid var(--gold);
	font-size: var(--fs-sm);
}

/* ==========================================================================
   5. Cart
   ========================================================================== */

/* minmax(0, …) even in the single-column case: a table inside either column
   would otherwise push the whole track wider than the page. */
.cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
	align-items: start;
}

@media (min-width: 1024px) {
	.cart-layout { grid-template-columns: minmax(0, 1fr) 380px; }
}

.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--white);
	border: 1px solid var(--line);
}

.shop_table th {
	padding: 1rem 1.15rem;
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted);
	text-align: left;
	border-bottom: 1px solid var(--line);
}

.shop_table td {
	padding: 1.15rem;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
	font-size: var(--fs-sm);
}

.shop_table tr:last-child td { border-bottom: 0; }

.cart_item .product-thumbnail { width: 92px; }

.cart_item .product-thumbnail img {
	width: 92px;
	height: 110px;
	object-fit: contain;
	background: var(--cream-50);
	border: 1px solid var(--line);
	padding: 0.3rem;
}

.cart_item .product-name a {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
}

.cart_item .product-name a:hover { color: var(--gold-600); }

.cart-item__meta {
	margin: 0.25rem 0 0;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

.cart_item .product-price,
.cart_item .product-subtotal {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--navy);
	white-space: nowrap;
}

.cart_item .product-remove { width: 44px; text-align: right; }

.cart_item .remove {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: var(--text-muted);
	border-radius: 50%;
	text-decoration: none;
	transition: all var(--dur) var(--ease);
}

.cart_item .remove:hover { background: rgba(176, 64, 47, 0.1); color: var(--danger); }

.cart-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
}

.coupon {
	display: flex;
	gap: 0.5rem;
	flex: 1 1 20rem;
}

.coupon input { flex: 1; min-height: 48px; }

/* Cart totals / order review panel */
.cart-summary,
.order-summary {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--white);
	border: 1px solid var(--line);
}

@media (min-width: 1024px) {
	.cart-summary,
	.checkout-review {
		position: sticky;
		top: calc(var(--header-h) + 1.5rem);
	}
}

.cart-summary__title,
.order-summary__title {
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--line);
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--navy);
}

.cart_totals table,
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

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

.cart_totals th {
	font-family: var(--font-body);
	font-weight: 500;
	color: var(--text-muted);
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--fs-sm);
}

.cart_totals td { text-align: right; color: var(--navy); font-weight: 500; }

.cart_totals .order-total th,
.cart_totals .order-total td {
	border-bottom: 0;
	padding-top: 1rem;
	font-size: var(--fs-body);
	color: var(--navy);
	font-weight: 600;
}

.cart_totals .order-total td {
	font-family: var(--font-display);
	font-size: 1.55rem;
}

.cart_totals .order-total .includes_tax {
	display: block;
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 400;
	color: var(--text-muted);
}

.wc-proceed-to-checkout { margin-top: 1.5rem; }
.wc-proceed-to-checkout .checkout-button { width: 100%; }

.shipping-calculator-button {
	font-size: var(--fs-xs);
	color: var(--gold-600);
}

.shipping ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-size: var(--fs-sm);
}

ul#shipping_method li:last-child { margin-bottom: 0; }
ul#shipping_method label { display: inline; margin: 0; font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0; }

.woocommerce-shipping-destination { margin: 0.5rem 0 0; font-size: var(--fs-xs); color: var(--text-muted); }

/* Trust row under the cart */
.cart-trust {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	list-style: none;
	padding-left: 0;
}

.cart-trust li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

.cart-trust .vich-icon { color: var(--gold); flex: none; }

/* Empty cart */
.cart-empty { text-align: center; max-width: 32rem; margin-inline: auto; }
.cart-empty__icon { color: var(--gold-200); margin-bottom: 1.5rem; }

/* Mobile: stacked cart rows */
@media (max-width: 767px) {
	.shop_table.cart thead { display: none; }

	.shop_table.cart,
	.shop_table.cart tbody,
	.shop_table.cart tr,
	.shop_table.cart td {
		display: block;
		width: 100%;
	}

	.shop_table.cart tr.cart_item {
		position: relative;
		display: grid;
		grid-template-columns: 92px 1fr;
		gap: 0 1rem;
		padding: 1.15rem;
		border-bottom: 1px solid var(--line);
	}

	.shop_table.cart tr.cart_item td {
		padding: 0;
		border: 0;
	}

	.cart_item .product-thumbnail { grid-row: span 3; }

	.cart_item .product-price::before,
	.cart_item .product-subtotal::before {
		content: attr(data-title) ": ";
		font-family: var(--font-body);
		font-size: var(--fs-xs);
		font-weight: 400;
		color: var(--text-muted);
	}

	.cart_item .product-price { display: none; }

	.cart_item .product-quantity { margin-top: 0.75rem; }

	.cart_item .product-subtotal {
		margin-top: 0.75rem;
		font-size: 1.05rem;
	}

	.cart_item .product-remove {
		position: absolute;
		top: 0.9rem;
		right: 0.9rem;
		width: auto;
	}

	.shop_table.cart tr:not(.cart_item) td { padding: 1rem 1.15rem; }

	.coupon { flex-direction: column; }
	.coupon .btn { width: 100%; }
}

/* ==========================================================================
   6. Checkout
   ========================================================================== */

.checkout-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem clamp(0.75rem, 3vw, 2rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
	padding: 0;
	list-style: none;
	font-size: var(--fs-xs);
}

.checkout-steps li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--text-muted);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.checkout-steps li::after {
	content: "";
	width: clamp(16px, 4vw, 40px);
	height: 1px;
	background: var(--line);
	margin-left: clamp(0.4rem, 2vw, 1rem);
}

.checkout-steps li:last-child::after { display: none; }

.checkout-steps__no {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	font-size: 0.7rem;
	font-weight: 600;
}

.checkout-steps .is-current { color: var(--navy); font-weight: 600; }
.checkout-steps .is-current .checkout-steps__no {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--cream);
}

.checkout-steps .is-done .checkout-steps__no {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--navy-900);
}

/* Three labelled steps plus connectors do not fit a small screen at full size. */
@media (max-width: 560px) {
	.checkout-steps {
		gap: 0.4rem;
		font-size: 0.62rem;
		letter-spacing: 0.05em;
	}

	.checkout-steps li { letter-spacing: 0.05em; gap: 0.35rem; }
	.checkout-steps li::after { width: 10px; margin-left: 0.3rem; }
	.checkout-steps__no { width: 22px; height: 22px; font-size: 0.6rem; }
}

/* Tiniest phones: drop the connectors, the numbers carry the sequence. */
@media (max-width: 380px) {
	.checkout-steps li::after { display: none; }
	.checkout-steps { gap: 0.35rem 0.75rem; }
}

form.checkout {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	align-items: start;
}

@media (min-width: 1024px) {
	form.checkout { grid-template-columns: minmax(0, 1fr) 420px; }
}

.checkout-fields { min-width: 0; }

.checkout-block {
	margin-bottom: 1.75rem;
	padding: clamp(1.35rem, 3vw, 2rem);
	background: var(--white);
	border: 1px solid var(--line);
}

.checkout-block__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	font-size: var(--fs-h4);
}

.checkout-block__no {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	background: var(--navy);
	color: var(--gold-200);
	border-radius: 50%;
	font-family: var(--font-display);
	font-size: 0.9rem;
	font-weight: 600;
}

/* Woo form rows to a grid */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	gap: 1rem;
}

@media (min-width: 640px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.form-row-wide,
	.form-row.notes { grid-column: 1 / -1; }
}

.form-row { margin: 0; }

.form-row label {
	margin-bottom: 0.45rem;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--navy);
}

.form-row .optional { color: var(--text-muted); font-weight: 400; }

.woocommerce-input-wrapper { display: block; width: 100%; }

/* Cascading address selects replace the text inputs once the script upgrades
   them; the original input stays in the DOM to carry the submitted value.
   display:none keeps it out of layout entirely — a visually-hidden absolute
   box would land at its static position far to the right and inflate the
   page's scroll width. A hidden input still submits its value. */
.vich-address-input--hidden {
	display: none !important;
}

select.vich-address-select {
	width: 100%;
	min-height: 52px;
}

select.vich-address-select:disabled {
	color: var(--text-muted);
	background-color: var(--cream-50);
	cursor: not-allowed;
}

.select2-container .select2-selection--single {
	height: 52px;
	border: 1px solid var(--line);
	border-radius: var(--radius-xs);
	background: var(--white);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 50px;
	padding-left: 1rem;
	color: var(--text);
}

.select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px; }

.select2-dropdown {
	border-color: var(--line);
	border-radius: var(--radius-xs);
}

.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: var(--fs-sm);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--text);
	cursor: pointer;
}

.woocommerce-form__label-for-checkbox input { margin-top: 0.2em; }

/* woocommerce-general floats this heading, which drags the order-notes field
   up beside it and off the right edge on narrow screens. */
.woocommerce-checkout #ship-to-different-address,
#ship-to-different-address {
	float: none;
	clear: both;
	width: auto;
	margin: 0 0 1rem;
	font-size: var(--fs-h4);
	font-family: var(--font-display);
}

.woocommerce-shipping-fields,
.woocommerce-additional-fields {
	clear: both;
}

.woocommerce-shipping-fields { margin-bottom: 1.75rem; }

#ship-to-different-address label {
	font-size: inherit;
	font-family: inherit;
	letter-spacing: 0;
	text-transform: none;
	color: var(--navy);
}

/* Review order panel */
.checkout-review { min-width: 0; }

.woocommerce-checkout-review-order-table {
	margin-bottom: 1.25rem;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-size: var(--fs-sm);
}

.woocommerce-checkout-review-order-table td { text-align: right; color: var(--navy); font-weight: 500; }

.woocommerce-checkout-review-order-table thead th {
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 600;
}

.woocommerce-checkout-review-order-table .cart_item td:first-child { text-align: left; }

/* Let the totals column shrink to its content so product names get the room. */
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table thead th:last-child {
	width: 1%;
	white-space: nowrap;
	padding-left: 0.75rem;
}

.review-item {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 0.85rem;
	align-items: center;
}

.review-item__thumb {
	position: relative;
	width: 56px;
	height: 66px;
	object-fit: contain;
	background: var(--cream-50);
	border: 1px solid var(--line);
	padding: 0.2rem;
}

.review-item > div {
	min-width: 0;
	overflow-wrap: anywhere;
}

.review-item__name {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--navy);
	line-height: 1.3;
}

.review-item__qty {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	color: var(--text-muted);
	font-weight: 400;
}

.woocommerce-checkout-review-order-table tfoot th {
	font-weight: 500;
	color: var(--text-muted);
	font-size: var(--fs-sm);
	letter-spacing: 0;
	text-transform: none;
}

.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
	border-bottom: 0;
	padding-top: 1rem;
	color: var(--navy);
	font-weight: 600;
}

.woocommerce-checkout-review-order-table tfoot .order-total td {
	font-family: var(--font-display);
	font-size: 1.55rem;
}

/* The review table has little room on a phone — shrink the thumbnail and let
   the product name use the width it frees up. */
@media (max-width: 520px) {
	.review-item {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 0.65rem;
	}

	.review-item__thumb { width: 44px; height: 52px; }
	.review-item__name { font-size: 0.95rem; }

	.woocommerce-checkout-review-order-table th,
	.woocommerce-checkout-review-order-table td { padding: 0.6rem 0; }

	.woocommerce-checkout-review-order-table .shipping th,
	.woocommerce-checkout-review-order-table .shipping td {
		display: block;
		width: 100%;
		text-align: left;
	}

	.woocommerce-checkout-review-order-table .shipping th { padding-bottom: 0.25rem; border-bottom: 0; }
}

/* Very narrow phones: claw back every bit of horizontal room. */
@media (max-width: 400px) {
	.cart-summary,
	.order-summary,
	.checkout-block {
		padding: 1.1rem;
	}

	.review-item {
		grid-template-columns: 38px minmax(0, 1fr);
		gap: 0.5rem;
	}

	.review-item__thumb { width: 38px; height: 46px; }

	.woocommerce-checkout-review-order-table .product-total,
	.woocommerce-checkout-review-order-table thead th:last-child { padding-left: 0.4rem; }

	.shop_table.cart tr.cart_item {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 0 0.75rem;
		padding: 1rem;
	}

	.cart_item .product-thumbnail img { width: 72px; height: 86px; }
	.cart_item .product-name a { font-size: 1.05rem; }

	/* The stepper is a fixed 146px otherwise — too much of a 320px screen. */
	.quantity__btn { width: 40px; }
	.quantity input.qty { width: 46px; min-height: 48px; }

	/* An <input> carries an intrinsic width from its size attribute; without
	   this the coupon field sets the whole cart column's minimum. */
	.coupon { flex-basis: 100%; }
	.coupon input { min-width: 0; }

	/* Stack the totals rows. Two columns cannot fit "Pengiriman" beside a
	   rupiah figure here, and dropping the cells out of table layout also
	   removes the intrinsic minimum width that no ancestor can override. */
	/* The table itself has to leave table layout too, otherwise the browser
	   rebuilds anonymous cells around the block rows and column sizing wins. */
	.cart_totals table,
	.cart_totals tbody {
		display: block;
		width: 100%;
	}

	.cart_totals tr {
		display: block;
		padding-block: 0.55rem;
		border-bottom: 1px solid var(--line);
	}

	.cart_totals tr:last-child { border-bottom: 0; }

	.cart_totals th,
	.cart_totals td {
		display: block;
		width: 100%;
		padding: 0;
		border-bottom: 0;
		text-align: left;
	}

	/* woocommerce-general pins this column with a three-class selector
	   (`.woocommerce-cart .cart-collaterals .cart_totals table th { width:35% }`),
	   so the override has to match that specificity to take effect. */
	.woocommerce-cart .cart-collaterals .cart_totals table th,
	.woocommerce-cart .cart-collaterals .cart_totals table td,
	.woocommerce-checkout .cart-collaterals .cart_totals table th,
	.woocommerce-checkout .cart-collaterals .cart_totals table td {
		width: 100%;
	}

	.cart_totals th { margin-bottom: 0.15rem; }
	.cart_totals .order-total td { font-size: 1.35rem; }

	.woocommerce-checkout-review-order,
	.woocommerce-cart-form { overflow-x: auto; }

	.cart-layout,
	.cart-items,
	.checkout-fields,
	.checkout-review { min-width: 0; }
}

/* Payment */
#payment { margin-top: 1.5rem; }

#payment .wc_payment_methods {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

#payment .wc_payment_method {
	margin: 0 0 0.6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-xs);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease);
}

#payment .wc_payment_method:has(input:checked) { border-color: var(--gold); }

#payment .wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 1rem 1.15rem;
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--navy);
	cursor: pointer;
}

#payment .wc_payment_method > label img {
	display: inline-block;
	max-height: 26px;
	width: auto;
	margin-left: auto;
}

.woocommerce-checkout #payment div.payment_box,
#payment .payment_box {
	padding: 1rem 1.15rem 1.15rem;
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--text-muted);
	background: var(--cream-50);
	border-top: 1px solid var(--line);
	border-radius: 0;
}

/* The default skin draws a little pointer triangle above the box. */
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::after {
	content: none;
	display: none;
}

.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
	padding: 0;
	border: 0;
}

.woocommerce-checkout #payment ul.payment_methods li { list-style: none; }

/* Our numbered block heading already labels this section. */
.woocommerce-billing-fields > h3 { display: none; }

#payment .payment_box p:last-child { margin-bottom: 0; }

#payment .woocommerce-privacy-policy-text {
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

#payment .form-row.place-order { margin-top: 1.25rem; }
#payment #place_order { width: 100%; min-height: 58px; }

.woocommerce-terms-and-conditions-wrapper { margin-bottom: 1rem; }

.checkout-secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

.checkout-secure .vich-icon { color: var(--success); }

/* Login / coupon toggles above the form */
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle { margin-bottom: 1rem; }

form.login,
form.checkout_coupon {
	margin-bottom: 1.5rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--white);
	border: 1px solid var(--line);
}

form.checkout_coupon .form-row { margin-bottom: 0.75rem; }

@media (min-width: 640px) {
	form.checkout_coupon {
		display: flex;
		align-items: flex-end;
		gap: 0.75rem;
	}

	form.checkout_coupon p.form-row { flex: 1; margin: 0; }
	form.checkout_coupon p:first-child { flex: 1 1 100%; }
}

/* ==========================================================================
   7. Order received / order details
   ========================================================================== */

.order-hero {
	text-align: center;
	max-width: 42rem;
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}

.order-hero__check {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin: 0 auto 1.5rem;
	border: 1px solid var(--gold);
	border-radius: 50%;
	color: var(--gold-600);
}

.order-hero__title { margin-bottom: 0.75rem; }
.order-hero__text { color: var(--text-muted); margin: 0; }

.woocommerce-order-overview,
.order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}

.woocommerce-order-overview li,
.order-overview li {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 1.25rem 1.15rem;
	background: var(--cream-50);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
	word-break: break-word;
}

.woocommerce-order-overview li strong,
.order-overview li strong {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--navy);
}

.order-details-layout {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	align-items: start;
}

@media (min-width: 1024px) {
	.order-details-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}

.woocommerce-order-details,
.woocommerce-customer-details {
	margin-top: clamp(2rem, 4vw, 3rem);
	margin-bottom: 2rem;
}

.order-next + .woocommerce-order-details { margin-top: clamp(2rem, 4vw, 3rem); }

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2 {
	margin-bottom: 1.25rem;
	font-size: var(--fs-h4);
}

.woocommerce-table--order-details {
	width: 100%;
	background: var(--white);
	border: 1px solid var(--line);
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
	padding: 0.9rem 1.15rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-size: var(--fs-sm);
}

.woocommerce-table--order-details thead th {
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.woocommerce-table--order-details td.woocommerce-table__product-total,
.woocommerce-table--order-details th:last-child,
.woocommerce-table--order-details td:last-child { text-align: right; }

.woocommerce-table--order-details tfoot th { color: var(--text-muted); font-weight: 500; }

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--navy);
}

.woocommerce-table--order-details .product-name a {
	color: var(--navy);
	font-weight: 500;
	text-decoration: none;
}

.wc-item-meta {
	margin: 0.35rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

.wc-item-meta li { display: flex; gap: 0.35rem; margin: 0; }
.wc-item-meta p { margin: 0; }

.addresses {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.addresses { grid-template-columns: repeat(2, 1fr); }
}

.woocommerce-column,
.address-card {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--white);
	border: 1px solid var(--line);
}

.address-card address,
.woocommerce-column address {
	font-style: normal;
	font-size: var(--fs-sm);
	line-height: 1.8;
	color: var(--text);
}

.order-next {
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--navy);
	color: var(--text-on-dark);
}

.order-next h3 { color: var(--cream); margin-bottom: 1rem; font-size: var(--fs-h4); }

.order-next ol {
	margin: 0 0 1.5rem;
	padding-left: 1.15rem;
	font-size: var(--fs-sm);
	color: var(--text-on-dark-muted);
}

.order-next li { margin-bottom: 0.6rem; }
.order-next li::marker { color: var(--gold); }

.woocommerce-bacs-bank-details {
	margin: 0 0 2rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--cream-200);
	border-left: 2px solid var(--gold);
	list-style: none;
}

.woocommerce-bacs-bank-details h2,
.woocommerce-bacs-bank-details h3 { font-size: var(--fs-h5); margin-bottom: 0.75rem; }
.wc-bacs-bank-details li { font-size: var(--fs-sm); margin-bottom: 0.3rem; }

/* ==========================================================================
   8. My account
   ========================================================================== */

.account-layout {
	display: grid;
	/* Single constrained column on mobile: without an explicit track the auto
	   column sizes to the nav chip strip's max-content and stretches the whole
	   layout past the viewport. minmax(0, 1fr) keeps items shrinkable so the
	   nav scrolls internally instead. */
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
	align-items: start;
}

@media (min-width: 900px) {
	.account-layout { grid-template-columns: 260px minmax(0, 1fr); }
	/* Keep the nav in view while the content scrolls. Sits just under the
	   sticky site header. */
	.woocommerce-MyAccount-navigation {
		position: sticky;
		top: calc(var(--header-h) + 1.5rem);
	}
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--white);
	border: 1px solid var(--line);
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--line);
}

.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }

.woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.95rem 1.15rem;
	color: var(--navy);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.acct-nav__icon { flex: none; color: var(--gold); transition: color var(--dur) var(--ease); }

.woocommerce-MyAccount-navigation a:hover { background: var(--cream-50); color: var(--gold-600); }

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--navy);
	color: var(--cream);
	font-weight: 500;
}
.woocommerce-MyAccount-navigation .is-active .acct-nav__icon { color: var(--gold-200); }

/* Mobile: the rail becomes a horizontal scroll strip of chips. */
@media (max-width: 899px) {
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: 0.5rem;
		border: 0;
		background: none;
		overflow-x: auto;
		padding-bottom: 0.35rem;
		scrollbar-width: none;
	}
	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
	.woocommerce-MyAccount-navigation li { border-bottom: 0; flex: none; }
	.woocommerce-MyAccount-navigation a {
		white-space: nowrap;
		padding: 0.6rem 0.95rem;
		border: 1px solid var(--line);
		border-radius: 999px;
		background: var(--white);
		font-size: var(--fs-xs);
	}
}

.woocommerce-MyAccount-content { min-width: 0; }

/* --- Customer dashboard --------------------------------------------------- */
.acct-dash { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }

.acct-greet {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background:
		radial-gradient(90% 130% at 100% 0%, rgba(232, 213, 172, 0.28), transparent 60%),
		var(--navy);
	color: var(--text-on-dark);
	border-radius: var(--radius-sm);
}
.acct-greet__eyebrow {
	margin: 0 0 0.4rem;
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-200);
}
.acct-greet__title { margin: 0 0 0.5rem; color: var(--white); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
.acct-greet__title em { color: var(--gold-200); font-style: italic; }
.acct-greet__text { margin: 0; max-width: 40ch; color: var(--text-on-dark-muted); font-size: var(--fs-sm); }
.acct-greet .btn { flex: none; }
.acct-greet .btn--outline { border-color: rgba(246, 241, 231, 0.35); color: var(--cream); }
.acct-greet .btn--outline:hover { background: rgba(246, 241, 231, 0.1); }

.acct-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(0.75rem, 2vw, 1.25rem);
}
.acct-stat {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: clamp(1.1rem, 2.5vw, 1.6rem);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.acct-stat__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 0.35rem;
	color: var(--gold);
	background: var(--cream-50);
	border: 1px solid var(--line);
	border-radius: 50%;
}
.acct-stat__figure { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); color: var(--navy); line-height: 1.1; }
.acct-stat__label { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }

@media (max-width: 560px) {
	.acct-stats { grid-template-columns: 1fr; }
	.acct-stat { flex-direction: row; align-items: center; gap: 0.9rem; }
	.acct-stat__icon { margin-bottom: 0; }
	.acct-stat__figure { font-size: 1.4rem; }
	.acct-stat__label { margin-left: auto; text-align: right; }
}

.acct-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}
.acct-section__title { margin: 0; font-size: 1.15rem; }
.acct-section__link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-600);
	text-decoration: none;
	white-space: nowrap;
}
.acct-section__link:hover { color: var(--navy); }

.acct-orders { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.acct-order {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.15rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.acct-order__no { margin: 0 0 0.15rem; font-weight: 600; color: var(--navy); }
.acct-order__meta { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.acct-order__dot { margin: 0 0.35rem; }
.acct-order__total { margin: 0; font-weight: 600; color: var(--navy); white-space: nowrap; }
.acct-order__btn { flex: none; }

.order-status {
	display: inline-flex;
	align-items: center;
	padding: 0.28rem 0.7rem;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	background: var(--cream-200);
	color: var(--navy);
	white-space: nowrap;
}
.order-status--processing { background: #e7edf5; color: #23507e; }
.order-status--completed { background: #e6f3ea; color: #1f7a44; }
.order-status--on-hold { background: #fbf0d8; color: #8a6417; }
.order-status--pending { background: #f0ece3; color: #6b6355; }
.order-status--cancelled,
.order-status--failed { background: #f6e4e2; color: #a13b30; }
.order-status--refunded { background: #ece7f2; color: #5a4b86; }

@media (max-width: 640px) {
	.acct-order {
		grid-template-columns: 1fr auto;
		grid-template-areas: "main status" "total btn";
		row-gap: 0.75rem;
	}
	.acct-order__main { grid-area: main; }
	.acct-order .order-status { grid-area: status; justify-self: end; }
	.acct-order__total { grid-area: total; align-self: center; }
	.acct-order__btn { grid-area: btn; justify-self: end; }
}

.acct-empty {
	text-align: center;
	padding: clamp(2rem, 5vw, 3rem) 1.25rem;
	background: var(--cream-50);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.acct-empty__mark {
	display: inline-grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin-bottom: 1rem;
	color: var(--gold);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 50%;
}
.acct-empty__title { margin: 0 0 0.35rem; font-size: 1.1rem; color: var(--navy); font-weight: 600; }
.acct-empty__text { margin: 0 0 1.5rem; color: var(--text-muted); font-size: var(--fs-sm); }

.acct-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 2vw, 1rem); }
.acct-link {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1.1rem 1.2rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.acct-link:hover { border-color: var(--gold-200); box-shadow: var(--shadow); transform: translateY(-1px); }
.acct-link__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--gold);
	background: var(--cream-50);
	border: 1px solid var(--line);
	border-radius: 50%;
}
.acct-link__body { display: block; min-width: 0; }
.acct-link__title { display: block; font-weight: 600; color: var(--navy); }
.acct-link__text { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 0.15rem; }
.acct-link__arrow { flex: none; margin-left: auto; color: var(--text-muted); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.acct-link:hover .acct-link__arrow { color: var(--gold); transform: translateX(3px); }

@media (max-width: 560px) {
	.acct-links { grid-template-columns: 1fr; }
}

/* --- Login / Register ----------------------------------------------------- */
.auth {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	align-items: start;
	max-width: 62rem;
	margin-inline: auto;
}
.auth--single { max-width: 34rem; }

@media (min-width: 768px) {
	.auth--split { grid-template-columns: 1fr 1fr; }
}

.auth__card {
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.auth__card--register {
	background:
		radial-gradient(90% 60% at 100% 0%, rgba(232, 213, 172, 0.22), transparent 60%),
		var(--cream-50);
}

.auth__head { margin-bottom: 1.5rem; }
.auth__icon {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 0.9rem;
	color: var(--gold);
	background: var(--cream-50);
	border: 1px solid var(--line);
	border-radius: 50%;
}
.auth__card--register .auth__icon { background: var(--white); }
.auth__title { margin: 0 0 0.4rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.auth__lead { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }

.auth__form { margin: 0; }
.auth__form .auth-field,
.auth__form .form-row { display: block; margin: 0 0 1.1rem; }

.auth-field label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--navy);
}
.auth-field .required { color: var(--gold-600); border: 0; }
.auth-field input { width: 100%; }

.auth__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
}
.auth__remember {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--text-muted);
	cursor: pointer;
}
.auth__remember input { margin: 0; }
.auth__lost { font-size: var(--fs-sm); color: var(--gold-600); text-decoration: none; }
.auth__lost:hover { color: var(--navy); text-decoration: underline; }

.auth__note {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1rem;
	background: var(--white);
	border: 1px dashed var(--line);
	border-radius: var(--radius-xs);
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

.auth__perks { margin: 0 0 1.5rem; padding: 0; list-style: none; display: grid; gap: 0.65rem; }
.auth__perks li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--fs-sm); color: var(--navy); }
.auth__perks .vich-icon { flex: none; margin-top: 2px; color: var(--gold); }

.woocommerce-account .col2-set {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 900px) {
	.woocommerce-account .col2-set { grid-template-columns: repeat(2, 1fr); }
}

.woocommerce-orders-table__cell-order-actions .button { margin-right: 0.35rem; }

.woocommerce-Message--info,
.woocommerce-MyAccount-content > .woocommerce-message { margin-bottom: 1.5rem; }

/* --- Address overview ----------------------------------------------------- */
.acct-addr-lead { margin: -0.25rem 0 1.5rem; color: var(--text-muted); font-size: var(--fs-sm); }

.addresses-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 700px) {
	.addresses-grid { grid-template-columns: repeat(2, 1fr); }
	.addresses-grid--single { grid-template-columns: minmax(0, 32rem); }
}

.address-card {
	display: flex;
	flex-direction: column;
	padding: clamp(1.35rem, 3vw, 1.85rem);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.address-card__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.address-card__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	color: var(--gold);
	background: var(--cream-50);
	border: 1px solid var(--line);
	border-radius: 50%;
}
.address-card__title { margin: 0; font-size: 1.1rem; }
.address-card__body {
	margin: 0 0 1.5rem;
	font-style: normal;
	color: var(--navy);
	line-height: 1.7;
	font-size: var(--fs-sm);
}
.address-card__empty { color: var(--text-muted); }
.address-card__btn { align-self: flex-start; margin-top: auto; }

/* Tame the big serif title on the edit-address / edit-account forms without
   touching the dashboard's own headings. */
.woocommerce-MyAccount-content form > h2 {
	font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
	margin-bottom: 1.5rem;
}

/* --- Order tracking ------------------------------------------------------- */
.acct-track__title { margin: 0 0 0.5rem; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); }
.acct-track__lead { margin: 0 0 1.75rem; color: var(--text-muted); font-size: var(--fs-sm); max-width: 46ch; }
.acct-track .track_order {
	max-width: 34rem;
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--cream-50);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.acct-track .track_order p { margin: 0 0 1.1rem; }
.acct-track .track_order label { display: block; margin-bottom: 0.4rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
.acct-track .track_order input { width: 100%; }
.acct-track .track_order button { width: 100%; margin-top: 0.25rem; }

/* ==========================================================================
   9. Mini cart drawer
   ========================================================================== */

.mini-cart { display: flex; flex-direction: column; height: 100%; }

.mini-cart__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mini-cart__item {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	gap: 0.9rem;
	margin: 0;
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--line);
}

.mini-cart__item > div {
	min-width: 0;
	overflow-wrap: anywhere;
}

.mini-cart__thumb {
	width: 72px;
	height: 86px;
	object-fit: contain;
	background: var(--white);
	border: 1px solid var(--line);
	padding: 0.25rem;
}

.mini-cart__name {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
	line-height: 1.3;
}

.mini-cart__name:hover { color: var(--gold-600); }

.mini-cart__meta {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

.mini-cart__price {
	margin: 0.35rem 0 0;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--navy);
}

.mini-cart__remove {
	align-self: start;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	color: var(--text-muted);
	border-radius: 50%;
	text-decoration: none;
	transition: all var(--dur) var(--ease);
}

.mini-cart__remove:hover { background: rgba(176, 64, 47, 0.1); color: var(--danger); }

.mini-cart__empty {
	display: grid;
	place-items: center;
	gap: 1rem;
	padding: 3rem 1rem;
	text-align: center;
	color: var(--text-muted);
}

.mini-cart__empty .vich-icon { color: var(--gold-200); }

.mini-cart__totals {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.mini-cart__totals dt {
	font-size: var(--fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0;
}

.mini-cart__totals dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--navy);
}

.mini-cart__actions { display: grid; gap: 0.6rem; }
.mini-cart__note { margin: 0.85rem 0 0; font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }

/* ==========================================================================
   10. Loading states
   ========================================================================== */

.is-loading { position: relative; pointer-events: none; }

.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(251, 248, 242, 0.6);
	backdrop-filter: blur(1px);
}

.btn.is-busy { position: relative; color: transparent !important; }

.btn.is-busy::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	color: var(--cream);
	animation: vich-spin 0.7s linear infinite;
}

@keyframes vich-spin {
	to { transform: rotate(360deg); }
}

.blockUI.blockOverlay { background: rgba(251, 248, 242, 0.65) !important; }

/* WooCommerce password strength */
.woocommerce-password-strength {
	padding: 0.5rem 0;
	font-size: var(--fs-xs);
}

.woocommerce-password-strength.strong { color: var(--success); }
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad { color: var(--danger); }
.woocommerce-password-strength.good { color: var(--warning); }