/* ==========================================================================
   Components — reusable UI building blocks shared by every page.
   ========================================================================== */

/* ---- Buttons ----------------------------------------------------------- */
.btn,
.button,
button.button,
input[type="submit"].button {
	--btn-h: 48px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: var(--btn-h);
	padding: 0 var(--sp-5);
	border: 1px solid transparent;
	border-radius: var(--r-btn);
	font-family: var(--font-head);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease),
		background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.btn:active { transform: translateY(1px); }
.btn .mst-icon { width: 1.2em; height: 1.2em; }

/* Shine sweep */
.btn--primary::after,
.btn--whatsapp::after {
	content: "";
	position: absolute;
	inset: 0;
	inset-inline-start: -120%;
	width: 60%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: skewX(-20deg);
	transition: inset-inline-start 700ms var(--ease);
	z-index: -1;
	pointer-events: none;
}

.btn--primary:hover::after,
.btn--whatsapp:hover::after {
	inset-inline-start: 140%;
}

.btn--primary,
.button.alt,
.single_add_to_cart_button,
.checkout-button,
#place_order {
	background: var(--gold-gradient);
	background-size: 140% 140%;
	color: var(--text-on-gold) !important;
	box-shadow: 0 6px 20px rgba(var(--gold-rgb), 0.2);
}

.btn--primary:hover,
.button.alt:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover {
	color: var(--text-on-gold);
	background-position: 100% 0;
	box-shadow: var(--glow-md);
}

.btn--primary:active {
	background: var(--gold-700);
}

.btn--outline,
.button {
	background: transparent;
	border-color: rgba(var(--gold-rgb), 0.6);
	color: var(--gold-500);
}

.btn--outline:hover,
.button:hover {
	background: rgba(var(--gold-rgb), 0.08);
	border-color: var(--gold-400);
	color: var(--gold-400);
	box-shadow: var(--glow-sm);
}

.btn--ghost {
	background: var(--black-700);
	border-color: var(--black-600);
	color: var(--text-primary);
}

.btn--ghost:hover {
	border-color: rgba(var(--gold-rgb), 0.5);
	color: var(--gold-400);
}

.btn--whatsapp {
	background: var(--whatsapp);
	color: #04220f;
}

.btn--whatsapp:hover {
	color: #04220f;
	box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.5), 0 12px 32px rgba(37, 211, 102, 0.25);
}

.btn--whatsapp-outline {
	background: transparent;
	border-color: rgba(37, 211, 102, 0.6);
	color: var(--whatsapp);
}

.btn--whatsapp-outline:hover {
	background: rgba(37, 211, 102, 0.08);
	color: var(--whatsapp);
}

.btn--sm { --btn-h: 40px; padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.btn--lg { --btn-h: 56px; padding: 0 var(--sp-6); font-size: var(--fs-lg); }
.btn--block { width: 100%; }

.btn[disabled],
.btn.is-disabled,
.button.disabled {
	opacity: 0.45;
	pointer-events: none;
}

.btn.is-loading {
	color: transparent !important;
	pointer-events: none;
}

.btn.is-loading::before {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-color: var(--text-on-gold) transparent var(--text-on-gold) transparent;
	border-radius: 50%;
	animation: mst-spin 700ms linear infinite;
}

/* Icon-only button (header actions, card actions) */
.icon-btn {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--r-btn);
	background: transparent;
	color: var(--text-primary);
	transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.icon-btn:hover {
	color: var(--gold-400);
	background: rgba(var(--gold-rgb), 0.08);
}

.icon-btn--bordered {
	border-color: var(--black-600);
	background: var(--black-700);
}

.icon-btn--bordered:hover,
.icon-btn.is-active {
	border-color: rgba(var(--gold-rgb), 0.6);
	color: var(--gold-500);
}

.icon-btn .mst-icon {
	width: 22px;
	height: 22px;
}

/* Gold count badge on icons */
.count-badge {
	position: absolute;
	top: 2px;
	inset-inline-end: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--r-pill);
	background: var(--gold-gradient);
	color: var(--text-on-gold);
	font-family: var(--font-en-body);
	font-size: 11px;
	font-weight: var(--fw-bold);
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--black-900);
}

.count-badge:empty,
.count-badge[data-count="0"] {
	display: none;
}

.count-badge.is-bumped {
	animation: mst-bump 500ms var(--ease-out);
}

/* Social icon buttons — gold outline, fill with gold on hover */
.social-btn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(var(--gold-rgb), 0.55);
	border-radius: 50%;
	color: var(--gold-500);
	transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.social-btn:hover {
	background: var(--gold-gradient);
	border-color: transparent;
	color: var(--text-on-gold);
	box-shadow: var(--glow-sm);
}

.social-btn .mst-icon {
	width: 18px;
	height: 18px;
}

.social-btn--sm {
	width: 30px;
	height: 30px;
}

.social-btn--sm .mst-icon {
	width: 14px;
	height: 14px;
}

/* ---- Badges & chips ---------------------------------------------------- */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 24px;
	padding: 0 10px;
	border-radius: var(--r-sm);
	font-family: var(--font-head);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: 1;
	white-space: nowrap;
}

.badge--sale { background: var(--gold-gradient); color: var(--text-on-gold); }
.badge--new { background: var(--text-primary); color: var(--black-900); }
.badge--hot { background: var(--danger); color: #fff; }
.badge--out { background: var(--black-600); color: var(--text-secondary); }
.badge--outline { border: var(--border-gold); color: var(--gold-500); }
.badge--success { background: rgba(46, 204, 113, 0.14); color: var(--success); }

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 28px;
	padding: 2px 12px;
	border: var(--border);
	border-radius: var(--r-pill);
	background: var(--black-800);
	color: var(--text-secondary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.chip .mst-icon {
	width: 14px;
	height: 14px;
	color: var(--gold-500);
}

a.chip:hover,
button.chip:hover,
.chip.is-active {
	border-color: rgba(var(--gold-rgb), 0.6);
	color: var(--gold-400);
}

.chip--lg {
	min-height: var(--tap);
	padding: 0 var(--sp-4);
	font-size: var(--fs-sm);
}

/* ---- Section heading --------------------------------------------------- */
.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-block-end: var(--sp-6);
}

.section-head__title {
	margin: 0;
}

.section-head__title em {
	font-style: normal;
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.section-head__sub {
	margin: var(--sp-2) 0 0;
	color: var(--text-secondary);
}

.section-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.section-head--center .eyebrow::after {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--gold-gradient-h);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
}

.link-arrow .mst-icon {
	transition: transform var(--t-base) var(--ease);
}

.link-arrow:hover .mst-icon {
	transform: translateX(4px);
}

[dir="rtl"] .link-arrow:hover .mst-icon {
	transform: scaleX(-1) translateX(4px);
}

/* ---- Cards ------------------------------------------------------------- */
.card {
	position: relative;
	background: var(--black-700);
	border: var(--border);
	border-radius: var(--r-card);
	transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.card--pad {
	padding: var(--sp-5);
}

.card--hover:hover,
.card--hover:focus-within {
	transform: var(--lift);
	border-color: rgba(var(--gold-rgb), 0.5);
	box-shadow: var(--glow-md);
}

.card--gold-edge {
	border-color: transparent;
	background:
		linear-gradient(var(--black-700), var(--black-700)) padding-box,
		linear-gradient(135deg, rgba(248, 224, 142, 0.6), rgba(166, 124, 27, 0.15) 60%, rgba(212, 166, 42, 0.5)) border-box;
}

/* Feature / trust item */
.feature {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
}

.feature__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border: var(--border-gold);
	border-radius: var(--r-md);
	background: radial-gradient(circle at 30% 20%, rgba(var(--gold-rgb), 0.18), transparent 70%);
	color: var(--gold-500);
}

.feature__icon .mst-icon {
	width: 26px;
	height: 26px;
}

.feature__title {
	margin: 0 0 2px;
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
}

.feature__text {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--text-secondary);
	line-height: var(--lh-snug);
}

/* ---- Product card ------------------------------------------------------
   Photo on top (full width), model title + one-line description, spec chips
   with icons, gold price, then [اشتري → checkout] + square cart button.
   The whole card links to the product (stretched title link).
   ------------------------------------------------------------------------ */
.p-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 16px;
	background: linear-gradient(180deg, #121214 0%, #0c0c0d 100%);
	container-type: inline-size;
	transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.p-card:has(.p-card__title a:focus-visible) {
	outline: 2px solid var(--gold-400);
	outline-offset: 3px;
}

@media (hover: hover) and (min-width: 1024px) {
	.p-card:hover {
		transform: translateY(-4px);
		border-color: rgba(var(--gold-rgb), 0.35);
		box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6), 0 0 28px rgba(var(--gold-rgb), 0.08);
	}
}

/* Photo */
.p-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: radial-gradient(circle at 50% 45%, #ffffff 0%, #f1f1f3 58%, #e4e4e8 100%);
}

.p-card__img-link {
	position: absolute;
	inset: 0;
	display: block;
}

.p-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* square studio photos fill the 4:3 frame (only empty background is cropped) */
	transition: opacity var(--t-base) var(--ease), transform 600ms var(--ease);
}

.p-card__media .p-card__img-alt {
	opacity: 0;
}

/* Soft fade from the photo into the dark card body */
.p-card__media::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 28%;
	background: linear-gradient(0deg, rgba(18, 18, 20, 0.22), transparent);
	pointer-events: none;
}

@media (hover: hover) and (min-width: 1024px) {
	.p-card:hover .p-card__img-main {
		transform: scale(1.06);
	}
	.p-card:hover .p-card__img-alt {
		opacity: 1;
	}
	.p-card:hover .p-card__img-main:has(+ .p-card__img-alt) {
		opacity: 0;
	}
}

/* Badges (start corner) and wishlist (end corner) */
.p-card__badges {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	pointer-events: none;
}

.p-badge {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 10px;
	border-radius: 8px;
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: var(--fw-black);
	line-height: 1;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.p-badge--new {
	background: var(--gold-gradient);
	color: var(--text-on-gold);
}

.p-badge--sale {
	background: #e5383b;
	color: #fff;
	font-family: var(--font-en-head);
}

.p-badge--out {
	background: #27272a;
	color: #d4d4d8;
}

.p-card__wish {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(12, 12, 13, 0.55);
	color: #ffffff;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.p-card__wish:hover {
	background: rgba(12, 12, 13, 0.8);
	transform: scale(1.08);
}

.p-card__wish .mst-icon {
	width: 20px;
	height: 20px;
}

.p-card__wish.is-active {
	color: #ff4d6d;
}

.p-card__wish.is-active .mst-icon {
	fill: currentColor;
}

/* Body */
.p-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 16px 16px 16px;
}

.p-card__title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-family: var(--font-en-head);
	font-size: 17px;
	font-weight: var(--fw-bold);
	line-height: 1.3;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-align: start;
}

.p-card__title a {
	color: #ffffff;
	outline: none;
}

/* Full-card click target */
.p-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.p-card__sub {
	display: -webkit-box;
	margin: -2px 0 0;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.5;
	color: #a1a1aa;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

/* Spec chips with icons: one row, as many as fit */
.p-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-height: 30px;
	margin: 4px 0 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
}

.p-card__specs li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 30px;
	padding: 0 9px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	font-size: 11.5px;
	font-weight: var(--fw-semibold);
	color: #d4d4d8;
	white-space: nowrap;
}

.p-card__specs .mst-icon {
	width: 14px;
	height: 14px;
	color: #a1a1aa;
}

/* Price */
.p-card__foot {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: auto;
	padding-top: 6px;
}

.p-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	min-height: 34px;
}

.p-card__price .price,
.p-card__price > .amount,
.p-card__price ins,
.p-card__price > .woocommerce-Price-amount {
	font-family: var(--font-en-head);
	font-size: 24px;
	font-weight: var(--fw-black);
	line-height: 1.2;
	color: var(--gold-400);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.p-card__price ins {
	order: -1;
}

.p-card__price del {
	font-family: var(--font-en-head);
	font-size: 13px;
	font-weight: var(--fw-semibold);
	color: #71717a;
}

.p-card__price del .amount {
	color: #71717a;
}

.p-card__price .woocommerce-Price-currencySymbol {
	font-size: 0.62em;
	margin-inline: 3px;
}

.p-card__ask {
	font-size: 18px;
	font-weight: var(--fw-black);
	color: var(--gold-400);
}

/* Actions: [اشتري] + square cart */
.p-card__actions {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 58px;
	gap: 10px;
}

.p-card__buy,
.p-card__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	overflow: hidden;
	border-radius: 10px;
	font-family: var(--font-head);
	font-weight: var(--fw-black);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.p-card__buy {
	padding: 0 14px;
	border: 0;
	background: linear-gradient(180deg, #f7d469 0%, #e6b53a 55%, #d4a12a 100%);
	color: #17130a;
	font-size: 17px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 20px rgba(var(--gold-rgb), 0.22);
}

.p-card__buy:hover {
	color: #17130a;
	background: linear-gradient(180deg, #fbe08a 0%, #edc04b 55%, #dcab33 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 26px rgba(var(--gold-rgb), 0.38);
}

.p-card__buy .mst-icon {
	width: 21px;
	height: 21px;
	stroke-width: 1.9;
}

.p-card__buy--wide {
	grid-column: 1 / -1;
}

.p-card__buy.is-disabled {
	background: #27272a;
	color: #a1a1aa;
	box-shadow: none;
	cursor: not-allowed;
}

.p-card__cart {
	border: 1.5px solid rgba(var(--gold-rgb), 0.75);
	background: rgba(var(--gold-rgb), 0.04);
	color: var(--gold-400);
}

.p-card__cart:hover {
	border-color: var(--gold-400);
	background: rgba(var(--gold-rgb), 0.14);
	color: var(--gold-300);
}

.p-card__cart .mst-icon {
	width: 22px;
	height: 22px;
	stroke-width: 1.8;
}

.p-card__buy:active,
.p-card__cart:active {
	transform: translateY(1px);
}

.p-card__buy:focus-visible,
.p-card__cart:focus-visible {
	outline: 2px solid var(--gold-300);
	outline-offset: 2px;
}

/* Loading / success states */
.p-card__buy.loading,
.p-card__cart.loading,
.p-card__cart.is-success {
	color: transparent !important;
	pointer-events: none;
}

.p-card__buy.loading::before,
.p-card__cart.loading::before {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	border: 2px solid;
	border-color: #17130a transparent #17130a transparent;
	border-radius: 50%;
	animation: mst-spin 700ms linear infinite;
}

.p-card__cart.loading::before {
	border-color: var(--gold-400) transparent var(--gold-400) transparent;
}

.p-card__cart.is-success {
	border-color: var(--success);
	background: rgba(46, 204, 113, 0.15);
}

.p-card__cart.is-success::before {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	background: var(--success);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	animation: mst-pop var(--t-base) var(--ease-out);
}

/* Narrow cards (2 per row on phones) */
@container (max-width: 240px) {
	.p-card__body {
		gap: 6px;
		padding: 12px 10px 10px;
	}
	.p-card__title {
		font-size: 14px;
		-webkit-line-clamp: 2;
		min-height: 2.6em;
	}
	.p-card__sub {
		font-size: 12px;
	}
	.p-card__specs {
		gap: 4px;
		max-height: 26px;
	}
	.p-card__specs li {
		height: 26px;
		padding: 0 6px;
		font-size: 10.5px;
	}
	.p-card__specs .mst-icon {
		display: none;
	}
	.p-card__price .price,
	.p-card__price > .amount,
	.p-card__price ins,
	.p-card__price > .woocommerce-Price-amount {
		font-size: 18px;
	}
	.p-card__price {
		min-height: 28px;
		gap: 0 6px;
	}
	.p-card__ask {
		font-size: 14px;
	}
	.p-card__actions {
		grid-template-columns: 1fr 42px;
		gap: 6px;
	}
	.p-card__buy,
	.p-card__cart {
		height: 40px;
	}
	.p-card__buy {
		padding: 0 8px;
		gap: 5px;
		font-size: 14px;
	}
	.p-card__buy .mst-icon {
		width: 17px;
		height: 17px;
	}
	.p-card__cart .mst-icon {
		width: 19px;
		height: 19px;
	}
	.p-card__badges {
		top: 8px;
		inset-inline-start: 8px;
	}
	.p-badge {
		min-height: 20px;
		padding: 0 7px;
		font-size: 10.5px;
	}
	.p-card__wish {
		top: 6px;
		inset-inline-end: 6px;
		width: 32px;
		height: 32px;
	}
	.p-card__wish .mst-icon {
		width: 17px;
		height: 17px;
	}
}

/* List view (shop toggle, ≥768px) */
.products.is-list .p-card {
	flex-direction: row;
}

.products.is-list .p-card__media {
	width: min(34%, 260px);
	flex-shrink: 0;
	aspect-ratio: auto;
}

.products.is-list .p-card__foot {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.products.is-list .p-card__actions {
	min-width: 260px;
}

/* ---- Price ------------------------------------------------------------- */
.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	margin: 0;
	font-family: var(--font-en-head);
	font-weight: var(--fw-black);
	font-size: var(--fs-lg);
	line-height: 1.2;
	color: var(--gold-500);
}

.price ins {
	order: -1;
	text-decoration: none;
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.price del {
	font-size: 0.78em;
	font-weight: var(--fw-semibold);
	color: var(--text-muted);
	-webkit-text-fill-color: var(--text-muted);
}

.price .woocommerce-Price-currencySymbol {
	font-size: 0.72em;
	font-weight: var(--fw-bold);
	margin-inline: 2px;
}

.price--lg {
	font-size: var(--fs-h2);
}

/* ---- Rating stars ------------------------------------------------------ */
.stars {
	--rating: 0;
	--star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E");
	position: relative;
	display: inline-block;
	width: calc(5 * 16px);
	height: 16px;
	background: var(--black-600);
	-webkit-mask: var(--star) 0 0 / 16px 16px repeat-x;
	mask: var(--star) 0 0 / 16px 16px repeat-x;
	vertical-align: middle;
}

.stars::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: calc(var(--rating) / 5 * 100%);
	background: var(--gold-gradient);
}

.rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-xs);
	color: var(--text-secondary);
}

/* ---- Forms ------------------------------------------------------------- */
.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.field label,
.form-row label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}

.field .required,
.form-row .required {
	color: var(--gold-500);
	text-decoration: none;
}

.input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
select,
textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: var(--border);
	border-radius: var(--r-btn);
	background-color: var(--black-800);
	color: var(--text-primary);
	font-size: var(--fs-base);
	line-height: 1.4;
	transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
	appearance: none;
}

textarea {
	min-height: 120px;
	resize: vertical;
}

input::placeholder,
textarea::placeholder {
	color: var(--text-muted);
	opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
	border-color: var(--black-500);
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--gold-500);
	box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.18);
}

select {
	padding-inline-end: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4A62A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 18px;
	background-position: right 14px center;
}

[dir="rtl"] select {
	background-position: left 14px center;
}

.field.has-error input,
.woocommerce-invalid input {
	border-color: var(--danger);
}

.field__error {
	font-size: var(--fs-xs);
	color: var(--danger-text);
}

/* Checkbox & radio */
input[type="checkbox"],
input[type="radio"] {
	appearance: none;
	display: inline-grid;
	place-content: center;
	width: 20px;
	height: 20px;
	margin: 0;
	flex-shrink: 0;
	border: 1px solid var(--black-500);
	border-radius: 5px;
	background: var(--black-800);
	vertical-align: middle;
	cursor: pointer;
	transition: border-color var(--t-fast), background var(--t-fast);
}

input[type="radio"] {
	border-radius: 50%;
}

input[type="checkbox"]::before {
	content: "";
	width: 11px;
	height: 11px;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	background: var(--text-on-gold);
	transform: scale(0);
	transition: transform var(--t-fast) var(--ease);
}

input[type="radio"]::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--text-on-gold);
	transform: scale(0);
	transition: transform var(--t-fast) var(--ease);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	border-color: var(--gold-500);
	background: var(--gold-gradient);
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
	transform: scale(1);
}

.check {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 32px;
	font-size: var(--fs-sm);
	color: var(--text-secondary);
	cursor: pointer;
}

.check:hover {
	color: var(--text-primary);
}

/* Range slider (price filter) */
input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	padding: 0;
	min-height: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: linear-gradient(90deg, var(--gold-500) var(--fill, 50%), var(--black-600) var(--fill, 50%));
	box-shadow: none;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border: 3px solid var(--black-900);
	border-radius: 50%;
	background: var(--gold-gradient);
	box-shadow: 0 0 0 1px var(--gold-500), 0 0 12px rgba(var(--gold-rgb), 0.5);
	cursor: grab;
}

input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 3px solid var(--black-900);
	border-radius: 50%;
	background: var(--gold-500);
	box-shadow: 0 0 0 1px var(--gold-500), 0 0 12px rgba(var(--gold-rgb), 0.5);
	cursor: grab;
}

/* Input with trailing button (newsletter, coupon) */
.input-group {
	display: flex;
	align-items: stretch;
	gap: 0;
	border: var(--border);
	border-radius: var(--r-btn);
	background: var(--black-800);
	padding: 4px;
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.input-group:focus-within {
	border-color: var(--gold-500);
	box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.18);
}

.input-group input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	box-shadow: none !important;
	min-height: 44px;
}

.input-group .btn {
	--btn-h: 44px;
	border-radius: calc(var(--r-btn) - 3px);
}

/* Quantity stepper */
.qty-stepper {
	display: inline-flex;
	align-items: center;
	height: 48px;
	border: var(--border);
	border-radius: var(--r-btn);
	background: var(--black-800);
	overflow: hidden;
}

.qty-stepper button {
	display: grid;
	place-items: center;
	width: 44px;
	height: 100%;
	border: 0;
	background: transparent;
	color: var(--text-secondary);
	font-size: 1.25rem;
	transition: color var(--t-fast), background var(--t-fast);
}

.qty-stepper button:hover {
	color: var(--gold-500);
	background: rgba(var(--gold-rgb), 0.08);
}

.qty-stepper input {
	width: 48px;
	min-height: 0;
	height: 100%;
	padding: 0;
	border: 0;
	border-inline: var(--border);
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-family: var(--font-en-body);
	font-weight: var(--fw-bold);
	-moz-appearance: textfield;
	box-shadow: none !important;
}

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

/* Variation swatches */
.swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: var(--tap);
	min-height: var(--tap);
	padding: 0 var(--sp-4);
	border: var(--border);
	border-radius: var(--r-btn);
	background: var(--black-800);
	color: var(--text-primary);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition: border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}

.swatch:hover {
	border-color: rgba(var(--gold-rgb), 0.5);
}

.swatch.is-selected,
.swatch[aria-pressed="true"] {
	border-color: var(--gold-500);
	color: var(--gold-400);
	box-shadow: inset 0 0 0 1px var(--gold-500), 0 0 14px rgba(var(--gold-rgb), 0.2);
}

.swatch--color {
	width: var(--tap);
	padding: 0;
	border-radius: 50%;
}

.swatch--color span {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--swatch);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.swatch.is-unavailable {
	opacity: 0.35;
	text-decoration: line-through;
}

/* ---- Tabs -------------------------------------------------------------- */
.tabs__list {
	display: flex;
	gap: var(--sp-2);
	padding: 4px;
	border: var(--border);
	border-radius: var(--r-pill);
	background: var(--black-800);
	overflow-x: auto;
	scrollbar-width: none;
	width: max-content;
	max-width: 100%;
}

.tabs__list::-webkit-scrollbar {
	display: none;
}

.tabs__tab {
	min-height: 40px;
	padding: 0 var(--sp-5);
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--text-secondary);
	font-family: var(--font-head);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	white-space: nowrap;
	transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.tabs__tab:hover {
	color: var(--text-primary);
}

.tabs__tab[aria-selected="true"] {
	background: var(--gold-gradient);
	color: var(--text-on-gold);
}

.tabs__panel[hidden] {
	display: none;
}

/* Underline variant (product page tabs) */
.tabs--line .tabs__list {
	width: 100%;
	padding: 0;
	border: 0;
	border-bottom: var(--border);
	border-radius: 0;
	background: none;
	gap: var(--sp-6);
}

.tabs--line .tabs__tab {
	position: relative;
	padding: 0;
	min-height: 52px;
	border-radius: 0;
	font-size: var(--fs-base);
}

.tabs--line .tabs__tab[aria-selected="true"] {
	background: none;
	color: var(--gold-500);
}

.tabs--line .tabs__tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 2px;
	background: var(--gold-gradient-h);
}

/* ---- Accordion --------------------------------------------------------- */
.accordion {
	border: var(--border);
	border-radius: var(--r-card);
	background: var(--black-700);
	overflow: hidden;
}

.accordion details + details {
	border-top: var(--border);
}

.accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: 60px;
	padding: var(--sp-3) var(--sp-5);
	font-weight: var(--fw-bold);
	cursor: pointer;
	list-style: none;
	transition: color var(--t-fast);
}

.accordion summary::-webkit-details-marker {
	display: none;
}

.accordion summary::after {
	content: "";
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	border-inline-end: 2px solid var(--gold-500);
	border-bottom: 2px solid var(--gold-500);
	transform: rotate(45deg) translateY(-3px);
	transition: transform var(--t-base) var(--ease);
}

.accordion details[open] summary {
	color: var(--gold-500);
}

.accordion details[open] summary::after {
	transform: rotate(-135deg) translateY(-3px);
}

.accordion__body {
	padding: 0 var(--sp-5) var(--sp-5);
	color: var(--text-secondary);
}

/* ---- Countdown --------------------------------------------------------- */
.countdown {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	direction: ltr;
}

.countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 60px;
	padding: var(--sp-2) var(--sp-2);
	border: var(--border-gold);
	border-radius: var(--r-md);
	background: linear-gradient(180deg, #1a1a1a, var(--black-800));
}

.countdown__num {
	font-family: var(--font-en-head);
	font-size: 1.5rem;
	font-weight: var(--fw-black);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.countdown__label {
	font-size: 10px;
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-secondary);
}

.countdown__sep {
	font-family: var(--font-en-head);
	font-weight: var(--fw-black);
	color: var(--gold-700);
}

/* ---- Notices / alerts -------------------------------------------------- */
.notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-5);
	padding: var(--sp-4) var(--sp-5);
	border: var(--border);
	border-inline-start: 3px solid var(--gold-500);
	border-radius: var(--r-md);
	background: var(--black-700);
	color: var(--text-primary);
	list-style: none;
}

.notice--success,
.woocommerce-message {
	border-inline-start-color: var(--success);
}

.notice--error,
.woocommerce-error {
	border-inline-start-color: var(--danger);
}

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

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

/* ---- Tooltip ----------------------------------------------------------- */
[data-tip] {
	position: relative;
}

[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 10px);
	inset-inline-end: 0;
	padding: 6px 12px;
	border: var(--border);
	border-radius: var(--r-sm);
	background: var(--black-700);
	color: var(--text-primary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
	transition: opacity var(--t-fast), transform var(--t-fast);
	box-shadow: var(--shadow-sm);
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
	opacity: 1;
	transform: none;
}

/* ---- Breadcrumbs ------------------------------------------------------- */
.breadcrumbs,
.woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-sm);
	color: var(--text-secondary);
}

.breadcrumbs a,
.woocommerce-breadcrumb a {
	color: var(--text-secondary);
}

.breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
	color: var(--gold-400);
}

.breadcrumbs .sep {
	color: var(--gold-700);
}

.breadcrumbs [aria-current] {
	color: var(--gold-500);
}

/* ---- Pagination -------------------------------------------------------- */
.pagination,
.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin: var(--sp-8) 0 0;
	padding: 0;
	list-style: none;
	border: 0 !important;
}

.woocommerce-pagination ul li {
	border: 0 !important;
}

.page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: var(--tap);
	height: var(--tap);
	padding: 0 var(--sp-3);
	border: var(--border);
	border-radius: var(--r-btn);
	background: var(--black-700);
	color: var(--text-primary);
	font-family: var(--font-en-body);
	font-weight: var(--fw-semibold);
	transition: border-color var(--t-fast), color var(--t-fast);
}

a.page-numbers:hover {
	border-color: rgba(var(--gold-rgb), 0.6);
	color: var(--gold-400);
}

.page-numbers.current {
	border-color: transparent;
	background: var(--gold-gradient);
	color: var(--text-on-gold);
}

/* ---- Skeleton loaders -------------------------------------------------- */
.skeleton {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-sm);
	background: var(--black-600);
}

.skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.08), transparent);
	animation: mst-shimmer 1.4s infinite;
}

.skeleton--line { height: 12px; margin-block: 8px; }
.skeleton--line.is-short { width: 60%; }
.skeleton--media { aspect-ratio: 1; border-radius: var(--r-card) var(--r-card) 0 0; }

/* ---- Toast ------------------------------------------------------------- */
.toast-region {
	position: fixed;
	inset-inline: var(--sp-4);
	bottom: calc(var(--sp-4) + var(--bottom-nav-h));
	z-index: var(--z-toast);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-2);
	pointer-events: none;
}

@media (min-width: 1024px) {
	.toast-region {
		bottom: var(--sp-6);
	}
}

.toast {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	max-width: 420px;
	padding: var(--sp-3) var(--sp-5);
	border: var(--border-gold);
	border-radius: var(--r-md);
	background: var(--black-700);
	box-shadow: var(--shadow-lg);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	pointer-events: auto;
	animation: mst-toast-in var(--t-base) var(--ease-out);
}

.toast .mst-icon {
	color: var(--gold-500);
}

/* ---- Stat counter ------------------------------------------------------ */
.stat__num {
	display: block;
	font-family: var(--font-en-head);
	font-size: var(--fs-h1);
	font-weight: var(--fw-black);
	line-height: 1;
	background: var(--gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.stat__label {
	display: block;
	margin-top: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--text-secondary);
}

/* ---- Scroll reveal ----------------------------------------------------- */
.js .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Failsafe: if scripts never run, reveal content anyway. */
.js:not(.js-ready) .reveal {
	animation: mst-reveal-failsafe 0s 2.5s forwards;
}

@keyframes mst-reveal-failsafe {
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.js .reveal {
		opacity: 1;
		transform: none;
	}
}

/* ---- Keyframes --------------------------------------------------------- */
@keyframes mst-spin {
	to { transform: rotate(360deg); }
}

@keyframes mst-shimmer {
	to { transform: translateX(100%); }
}

@keyframes mst-bump {
	0% { transform: scale(1); }
	35% { transform: scale(1.45); }
	70% { transform: scale(0.9); }
	100% { transform: scale(1); }
}

@keyframes mst-toast-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@keyframes mst-pulse {
	0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
	70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@keyframes mst-glow {
	0%, 100% { filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.25)); }
	50% { filter: drop-shadow(0 0 18px rgba(var(--gold-rgb), 0.55)); }
}

/* ==========================================================================
   Purchase flow — shared pieces (buttons, chips, mini cart, toasts)
   ========================================================================== */

/* "Buy now": high-contrast white button next to the gold "Add to cart". */
.btn--buy-now {
	background: var(--text-primary);
	border-color: var(--text-primary);
	color: var(--black-900);
}

.btn--buy-now:hover {
	background: #ffffff;
	color: var(--black-900);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 10px 28px rgba(255, 255, 255, 0.12);
}

.btn--buy-now.is-loading::before {
	border-color: var(--black-900) transparent var(--black-900) transparent;
}

/* Loading (theme + WooCommerce's ".loading") and success states. */
.add_to_cart_button.loading,
.single_add_to_cart_button.is-loading {
	color: transparent !important;
	pointer-events: none;
}

.add_to_cart_button.loading::before {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid;
	border-color: var(--text-on-gold) transparent var(--text-on-gold) transparent;
	border-radius: 50%;
	animation: mst-spin 700ms linear infinite;
}

.btn.is-success,
.add_to_cart_button.added.is-success {
	color: transparent !important;
}

.btn.is-success::before {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	background: var(--text-on-gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	animation: mst-pop var(--t-base) var(--ease-out);
}

@keyframes mst-pop {
	from { transform: scale(0.4); opacity: 0; }
}

/* WooCommerce's "View cart" link after an AJAX add — the mini cart opens instead. */
a.added_to_cart.wc-forward {
	display: none !important;
}

/* Directional icons flip in right-to-left pages. */
[dir="rtl"] .flip-rtl {
	transform: scaleX(-1);
}

.price--xl {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	font-variant-numeric: tabular-nums;
}

.price {
	font-variant-numeric: tabular-nums;
}

/* Brand pill, stock chip, saving badge */
.brand-pill {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 var(--sp-3);
	border: var(--border-gold);
	border-radius: var(--r-pill);
	font-family: var(--font-en-head);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.06em;
	color: var(--gold-400);
	text-transform: uppercase;
}

a.brand-pill:hover {
	background: rgba(var(--gold-rgb), 0.1);
	color: var(--gold-300);
}

.stock-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 28px;
	padding: 0 var(--sp-3);
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	background: rgba(46, 204, 113, 0.12);
	color: var(--success);
}

.stock-chip__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

.stock-chip--low {
	background: rgba(var(--warning-rgb), 0.14);
	color: var(--warning);
}

.stock-chip--out {
	background: rgba(231, 76, 60, 0.14);
	color: var(--danger-text);
}

.stock-chip--ask {
	background: var(--black-600);
	color: var(--text-secondary);
}

.save-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px var(--sp-3);
	border-radius: var(--r-pill);
	background: rgba(46, 204, 113, 0.14);
	color: var(--success);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

.save-badge .amount {
	font-family: var(--font-en-head);
}

.badge--low {
	background: var(--warning);
	color: var(--black-900);
}

/* Error toast */
.toast--error {
	border-color: rgba(231, 76, 60, 0.6);
}

.toast--error .mst-icon {
	color: var(--danger-text);
}

/* Small quantity stepper (mini cart) */
.qty-stepper--sm {
	height: 36px;
}

.qty-stepper--sm button {
	width: 34px;
}

.qty-stepper--sm button .mst-icon {
	width: 16px;
	height: 16px;
}

.qty-stepper--sm input {
	width: 36px;
	font-size: var(--fs-sm);
}

/* ---- Mini cart drawer -------------------------------------------------- */
#mini-cart .drawer__body {
	display: flex;
	flex-direction: column;
	padding: 0;
}

#mini-cart .widget_shopping_cart_content {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.mini-cart {
	flex: 1;
	margin: 0;
	padding: var(--sp-2) var(--sp-4);
	list-style: none;
	overflow-y: auto;
}

.mini-cart__item {
	position: relative;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	gap: var(--sp-3);
	align-items: start;
	padding: var(--sp-4) 0;
	border-bottom: var(--border);
	transition: opacity var(--t-fast);
}

.mini-cart__item.is-updating {
	opacity: 0.5;
	pointer-events: none;
}

.mini-cart__thumb img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	border-radius: var(--r-md);
	background: var(--well);
	mix-blend-mode: normal;
}

.mini-cart__name {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--text-primary);
}

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

.mini-cart__info dl.variation {
	margin: 4px 0 0;
	font-size: var(--fs-xs);
	color: var(--text-secondary);
}

.mini-cart__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	margin-top: var(--sp-2);
}

.mini-cart__price {
	font-size: var(--fs-base);
}

.mini-cart__remove {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: var(--r-sm);
	background: none;
	color: var(--text-muted);
}

.mini-cart__remove:hover {
	background: rgba(231, 76, 60, 0.12);
	color: var(--danger-text);
}

.mini-cart__remove .mst-icon {
	width: 18px;
	height: 18px;
}

.mini-cart__foot {
	padding: var(--sp-4);
	padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
	border-top: var(--border);
	background: var(--black-800);
}

.mini-cart__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0;
	font-weight: var(--fw-bold);
}

.mini-cart__total b {
	font-family: var(--font-en-head);
	font-size: var(--fs-h4);
	color: var(--gold-400);
}

.mini-cart__note {
	margin: 2px 0 var(--sp-4);
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

.mini-cart__buttons {
	display: grid;
	gap: var(--sp-2);
}

.mini-cart__empty {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	padding: var(--sp-8) var(--sp-4);
	text-align: center;
	color: var(--text-secondary);
}

/* Free-shipping progress */
.ship-progress {
	margin: 0;
	padding: var(--sp-3) var(--sp-4);
	border-bottom: var(--border);
	font-size: var(--fs-sm);
	color: var(--text-secondary);
}

.ship-progress p {
	margin: 0 0 var(--sp-2);
}

.ship-progress b {
	color: var(--gold-400);
}

.ship-progress__bar {
	height: 6px;
	overflow: hidden;
	border-radius: var(--r-pill);
	background: var(--black-600);
}

.ship-progress__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--gold-gradient);
	transition: width var(--t-slow) var(--ease);
}

.ship-progress.is-done .ship-progress__bar span {
	background: var(--success);
}

/* ---- WooCommerce quantity input (product page, cart) ------------------
   Enhanced to a − / + stepper by assets/js/main.js. */
.quantity {
	display: inline-flex;
	align-items: center;
	height: 52px;
	border: 1px solid var(--black-500);
	border-radius: var(--r-btn);
	background: var(--surface-1);
	overflow: hidden;
	flex-shrink: 0;
}

.quantity .qty {
	width: 44px;
	height: 100%;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-family: var(--font-en-body);
	font-weight: var(--fw-bold);
	-moz-appearance: textfield;
	box-shadow: none !important;
}

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

.quantity .qty-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 100%;
	border: 0;
	background: none;
	color: var(--text-secondary);
	font-size: 1.25rem;
}

.quantity .qty-btn:hover {
	color: var(--gold-500);
	background: rgba(var(--gold-rgb), 0.08);
}