/**
 * Stonex — cart, drawer and checkout.
 *
 * Mobile-first: the base rules are the single-column phone layout, and the
 * two-column desktop layout is introduced at 900px. Sticky positioning is
 * applied only where there is room for it.
 */

/* ==========================================================================
   Shared primitives
   ========================================================================== */

.skeleton {
	background: linear-gradient(90deg, rgba(0, 0, 0, .06) 25%, rgba(0, 0, 0, .11) 37%, rgba(0, 0, 0, .06) 63%);
	background-size: 400% 100%;
	border-radius: 6px;
	animation: stonex-shimmer 1.4s ease infinite;
}

.skeleton--line { height: 14px; margin-bottom: 10px; }
.skeleton--short { width: 55%; }
.skeleton--block { height: 140px; }
.skeleton--media { width: 72px; height: 72px; border-radius: 8px; flex: 0 0 72px; }

@keyframes stonex-shimmer {
	0%   { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.skeleton { animation: none; }
}

/* Rewards box (PDP) -------------------------------------------------------
 *
 * Sits between the product title and the price. Deliberately compact: on
 * mobile it must earn its vertical space against the price, stock state and
 * buy button, all of which matter more.
 *
 * Sized in fixed units rather than percentages so it occupies exactly the same
 * space whether it renders or not — it is server-rendered and never swapped in
 * later, so there is no shift, but keeping the box height stable also means a
 * points figure changing from 346 to 17,300 does not reflow the column.
 */

.pdp-reward {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0 14px;
	padding: 10px 14px;
	border: 1px solid rgba(201, 162, 39, .34);
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(201, 162, 39, .10), rgba(201, 162, 39, .05));
	font-size: 13.5px;
	line-height: 1.45;
}

.pdp-reward__icon {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	border-radius: 50%;
	background: rgba(201, 162, 39, .18);
	color: #8a6d1f;
}

.pdp-reward__icon svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.9;
}

.pdp-reward__text {
	margin: 0;
	min-width: 0;
	color: #4a3c17;
}

.pdp-reward__points {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: #14100c;
}

.pdp-reward__worth {
	display: inline-block;
	margin-left: 4px;
	opacity: .72;
	font-size: 12.5px;
}

.pdp-reward__badge {
	margin-left: auto;
	flex: 0 0 auto;
	padding: 3px 8px;
	border-radius: 99px;
	background: #14100c;
	color: #e3c765;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* A live promotion earns a slightly stronger edge — the only visual
   difference, so the box never shouts louder than the Add to Cart button. */
.pdp-reward--boosted {
	border-color: rgba(201, 162, 39, .6);
	background: linear-gradient(180deg, rgba(201, 162, 39, .18), rgba(201, 162, 39, .07));
}

@media (max-width: 520px) {
	.pdp-reward {
		gap: 9px;
		padding: 9px 11px;
		font-size: 13px;
		flex-wrap: wrap;
	}

	/* The badge drops to its own line rather than squeezing the message into
	   two or three words per line. */
	.pdp-reward__badge {
		margin-left: 36px;
		order: 3;
	}
}

/* Load More: skeletons and entry animation -------------------------------- */

/**
 * A skeleton card must occupy exactly the space a real card will, or inserting
 * placeholders and then swapping in content becomes its own layout shift. The
 * media block uses the same 1:1 aspect-ratio as the product tile, and the body
 * has the same padding and line count.
 */
.product-card--skeleton { pointer-events: none; }

.skeleton--tile {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 10px;
}

.product-card--skeleton .product-card__body {
	display: grid;
	gap: 9px;
	padding-top: 12px;
}

/**
 * New cards fade and lift in. Only opacity and transform animate — both are
 * composited, so a batch of 12 arriving does not trigger layout or paint work
 * on the main thread and cannot hurt INP.
 */
.product-card.is-entering {
	opacity: 0;
	transform: translateY(8px);
}

.product-card {
	opacity: 1;
	transform: none;
	transition: opacity .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
	.product-card,
	.product-card.is-entering {
		transition: none;
		opacity: 1;
		transform: none;
	}
}

[data-stonex-loadmore-btn].is-loading { opacity: .65; cursor: progress; }

/* Button loading states -------------------------------------------------- */

/**
 * Buttons keep an inline min-width pinned by JS before the first label swap,
 * so "Add to Cart" -> "Adding…" -> "Added ✓" never resizes the button and
 * never reflows the product grid. Nothing here animates a layout property:
 * only transform and opacity, both composited off the main thread.
 */

.stonex-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 7px;
	vertical-align: -2px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: .85;
	animation: stonex-spin .6s linear infinite;
}

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

.stonex-btn-label { display: inline-block; }

[data-stonex-add].is-loading { cursor: progress; opacity: .9; }

[data-stonex-add].is-added {
	background: #1f7a4d !important;
	border-color: #1f7a4d !important;
	color: #fff !important;
	transition: background .18s ease, color .18s ease;
}

[data-stonex-add]:disabled { cursor: not-allowed; }

/* Cart count bump -------------------------------------------------------- */

[data-stonex-cart-count].is-bumped {
	animation: stonex-bump .42s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes stonex-bump {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.42); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.stonex-spinner { animation-duration: 1.6s; }
	[data-stonex-cart-count].is-bumped { animation: none; }
}

/* Drawer pending --------------------------------------------------------- */

/**
 * While a mutation is in flight the drawer body dims slightly rather than
 * being emptied. Emptying it would collapse the panel height and then expand
 * it again when contents arrive — visible jitter on every add.
 */
.cart-drawer.is-pending .cart-drawer__body { opacity: .55; transition: opacity .14s ease; }
.cart-drawer.is-pending .cart-drawer__foot { opacity: .55; }
.cart-drawer:not(.is-pending) .cart-drawer__body,
.cart-drawer:not(.is-pending) .cart-drawer__foot { opacity: 1; transition: opacity .18s ease; }

/* Notify Me dialog ------------------------------------------------------- */

.stonex-notify {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: grid;
	place-items: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .22s ease, visibility .22s ease;
}

.stonex-notify.is-on {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.stonex-notify__scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 8, 6, .6);
}

.stonex-notify__panel {
	position: relative;
	width: min(100%, 420px);
	padding: 28px 26px 24px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
	transform: translateY(10px) scale(.98);
	transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}

.stonex-notify.is-on .stonex-notify__panel { transform: none; }

.stonex-notify__panel h3 {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.25;
}

.stonex-notify__panel > p {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.5;
	opacity: .72;
}

.stonex-notify__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	opacity: .5;
	transition: opacity .16s ease, background .16s ease;
}

.stonex-notify__close:hover { opacity: 1; background: rgba(0, 0, 0, .06); }

.stonex-notify__form { display: flex; gap: 8px; }

.stonex-notify__form input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	padding: 0 13px;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 9px;
	font-size: 15px; /* >=16px-ish avoids iOS zoom-on-focus */
}

.stonex-notify__form input[type="email"]:focus {
	border-color: #c9a227;
	box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
	outline: none;
}

.stonex-notify__form button {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 20px;
	border: 0;
	border-radius: 9px;
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}

.stonex-notify__form button:disabled { opacity: .55; cursor: wait; }

.stonex-notify__msg {
	margin: 12px 0 0;
	min-height: 1.2em;
	font-size: 13.5px;
	color: #1f7a4d;
}

.stonex-notify__msg.is-error { color: #8d2020; }

@media (prefers-reduced-motion: reduce) {
		.stonex-notify,
	.stonex-notify__panel { transition: none; transform: none; }
}

/* Toast ------------------------------------------------------------------ */

.stonex-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translate(-50%, 20px);
	z-index: 9999;
	max-width: min(92vw, 420px);
	padding: 13px 20px;
	border-radius: 10px;
	background: #14100c;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease;
}

.stonex-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.stonex-toast.is-error { background: #8d2020; }

/* Quantity stepper ------------------------------------------------------- */

.cart-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(0, 0, 0, .16);
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}

.cart-qty__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
	transition: background .16s ease;
}

.cart-qty__btn:hover:not(:disabled) { background: rgba(0, 0, 0, .05); }
.cart-qty__btn:disabled { opacity: .32; cursor: not-allowed; }
.cart-qty__btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

.cart-qty__in {
	width: 46px;
	height: 38px;
	border: 0;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	background: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

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

.cart-qty--sm .cart-qty__btn { width: 30px; height: 30px; }
.cart-qty--sm .cart-qty__in { width: 36px; height: 30px; font-size: 13px; }

/* ==========================================================================
   Cart page
   ========================================================================== */

.cart-page {
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px 16px 72px;
}

.cart-page__head { margin-bottom: 20px; }

.cart-page__title {
	font-size: clamp(26px, 4vw, 38px);
	margin: 0 0 4px;
}

.cart-page__count { margin: 0; opacity: .66; font-size: 14px; }

/* The single mobile column needs the same minmax(0, …) as the desktop rule at
   the bottom of this file. Left implicit, the track takes an automatic minimum
   of its content: measured at 320px the container was 288px wide while its own
   column resolved to 332px, so the item list hung 28px past the page. */
.cart-page__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }

/* And the grid item itself must be allowed to shrink to that track — a grid
   item's automatic minimum is its min-content, which is what pushed the track
   wide in the first place. */
.cart-page__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }

/* Line item -------------------------------------------------------------- */

.cart-item {
	display: grid;
	/* minmax(0, 1fr), not 1fr. A bare `1fr` track carries an automatic minimum
	   of its own content, so a long product name refuses to shrink and widens
	   the row past the page. Measured at 320px: the row rendered 332px inside a
	   288px content box and pushed the cart page to 348px. The same construct is
	   already used by .cart-page__grid below. */
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 14px;
	padding: 16px;
	border: 1px solid rgba(0, 0, 0, .09);
	border-radius: 14px;
	background: #fff;
	transition: opacity .22s ease, transform .22s ease, box-shadow .18s ease;
}

.cart-item:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .06); }

.cart-item.is-busy { opacity: .55; pointer-events: none; }

.cart-item.is-removing {
	opacity: 0;
	transform: translateX(-14px);
}

.cart-item--issue { border-color: rgba(160, 40, 40, .38); background: rgba(180, 50, 50, .03); }

.cart-item__media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	object-position: center;
	max-width: 100%;
	max-height: 100%;
	background: #fff;
	border-radius: 10px;
	display: block;
}

.cart-item__name { font-size: 15px; line-height: 1.35; margin: 0 0 4px; }
.cart-item__name a { color: inherit; text-decoration: none; }
.cart-item__name a:hover { text-decoration: underline; }

.cart-item__variant,
.cart-item__sku { font-size: 12.5px; opacity: .6; margin: 0 0 3px; }
.cart-item__variant p { margin: 0; }

/* ---- item meta: label and value on one line ----

   `wc_get_formatted_cart_item_data()` returns a definition list, and a browser
   gives every `<dd>` a 40px start margin. Left alone that reads

       Ring Size:
               10

   — the value orphaned on its own line, indented under nothing.

   This was a two-track grid, `auto` then `1fr`, which is right for a label
   like "Ring Size" and catastrophic for a long one. An engraved key carries
   the label "Engraving On Golden Plaque $30.00:", and `auto` grew that track
   to fit it: inside the 201px the cart drawer gives an item, the value column
   was left 59px, so "Happy 21st Amelia-Rose" came down one word per line and
   three engraving lines made the row 378px tall — taller than the drawer.

   Inline flow instead. A short pair still sits on one line, because that is
   what inline text does; a long one wraps across the full width like a
   sentence rather than into a column six characters wide. The block after
   each value is what keeps one pair per paragraph.

   This is the treatment the checkout summary already uses on the same markup
   (`.co-item__variant` in checkout.css), so the drawer, the cart page and the
   checkout now render item meta the same way — which they should, since it is
   one function's output rendered three times. */
.cart-item__variant .variation,
.drawer-item__variant .variation {
	display: block;
	margin: 0;
}

.cart-item__variant .variation dt,
.drawer-item__variant .variation dt {
	display: inline;
	margin: 0;
	font-weight: 600;
}

/* The label and its value are one phrase; without this they run together. */
.cart-item__variant .variation dt::after,
.drawer-item__variant .variation dt::after {
	content: " ";
}

.cart-item__variant .variation dd,
.drawer-item__variant .variation dd {
	/* The 40px start margin is the UA default, and it is the original bug. */
	display: inline;
	margin: 0;
}

.cart-item__variant .variation dd::after,
.drawer-item__variant .variation dd::after {
	content: "";
	display: block;
	height: 3px;
}

.cart-item__variant .variation dd p,
.drawer-item__variant .variation dd p {
	display: inline;
	margin: 0;
}

.cart-item__unit { font-size: 13px; opacity: .75; margin: 6px 0 0; }

.cart-item__alert {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 8px 0 0;
	font-size: 13px;
	color: #8d2020;
}

.cart-item__alert svg { width: 15px; height: 15px; flex: 0 0 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.cart-item__controls {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.cart-item__remove {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 13px;
	opacity: .6;
	padding: 6px 2px;
	transition: opacity .16s ease, color .16s ease;
}

.cart-item__remove:hover { opacity: 1; color: #8d2020; }
.cart-item__remove svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

.cart-item__total {
	grid-column: 2;
	font-weight: 700;
	font-size: 16px;
	text-align: right;
}

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

.cart-empty, .drawer-empty {
	text-align: center;
	padding: 56px 20px;
}

.cart-empty__icon, .drawer-empty__icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .05);
}

.cart-empty__icon svg, .drawer-empty__icon svg {
	width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.5;
}

.cart-empty__title { margin: 0 0 8px; font-size: 22px; }
.cart-empty__text { margin: 0 0 22px; opacity: .68; }

/* ==========================================================================
   Order summary
   ========================================================================== */

.summary {
	padding: 22px;
	border: 1px solid rgba(0, 0, 0, .09);
	border-radius: 14px;
	background: #fff;
}

.summary__title { margin: 0 0 16px; font-size: 19px; }

.summary__lines { margin: 0 0 18px; }

.summary__line, .review__line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 8px 0;
	font-size: 14px;
}

.summary__line dt, .review__line dt { margin: 0; opacity: .78; }
.summary__line dd, .review__line dd { margin: 0; font-weight: 600; text-align: right; }

.summary__line--coupon dd, .review__line--coupon dd { color: #1f7a4d; }

.summary__line--total, .review__line--total {
	border-top: 1px solid rgba(0, 0, 0, .1);
	margin-top: 6px;
	padding-top: 14px;
	font-size: 18px;
}

.summary__line--total dt, .review__line--total dt { opacity: 1; font-weight: 700; }
.summary__line--total dd, .review__line--total dd { font-weight: 800; }

.summary__coupon-remove {
	border: 0;
	background: none;
	cursor: pointer;
	padding: 2px;
	opacity: .5;
	vertical-align: middle;
}

.summary__coupon-remove:hover { opacity: 1; color: #8d2020; }
.summary__coupon-remove svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.4; }

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

.summary__coupon { margin-bottom: 16px; }

.summary__coupon-row { display: flex; gap: 8px; }

.summary__coupon-in {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 13px;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 9px;
	/* 15px minimum: iOS zooms the whole page when a focused field is
	   smaller, and on checkout that zoom is very hard to recover from. */
	font-size: 15px;
	text-transform: uppercase;
}

.summary__coupon-in:focus { outline: 2px solid #c9a227; outline-offset: 1px; }

.summary__coupon-btn {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 18px;
	border: 1px solid rgba(0, 0, 0, .82);
	border-radius: 9px;
	background: none;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .16s ease, color .16s ease;
}

.summary__coupon-btn:hover:not(:disabled) { background: #14100c; color: #fff; }
.summary__coupon-btn:disabled { opacity: .45; cursor: wait; }

.summary__coupon-msg { margin: 8px 0 0; font-size: 13px; color: #1f7a4d; min-height: 1em; }
.summary__coupon-msg.is-error { color: #8d2020; }

.summary__checkout,
.cart-drawer__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 15px 20px;
	border-radius: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: 14px;
	text-decoration: none;
}

.summary__checkout svg,
.cart-drawer__checkout svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

.summary__trust {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.summary__trust li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	opacity: .72;
}

.summary__trust svg { width: 15px; height: 15px; flex: 0 0 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.cart-page__continue { margin-top: 26px; }

.cart-page__continue a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	text-decoration: none;
	color: inherit;
	opacity: .75;
}

.cart-page__continue a:hover { opacity: 1; }
.cart-page__continue svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.cart-page__continue .is-flipped { transform: scaleX(-1); }

/* ==========================================================================
   Cart drawer
   ========================================================================== */

.cart-drawer { position: fixed; inset: 0; z-index: 1000; }
.cart-drawer[hidden] { display: none; }

.cart-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .46);
	opacity: 0;
	transition: opacity .3s ease;
}

.cart-drawer.is-on .cart-drawer__scrim { opacity: 1; }

.cart-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(94vw, 420px);
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: -14px 0 44px rgba(0, 0, 0, .18);
	transform: translateX(100%);
	transition: transform .32s cubic-bezier(.32, .72, 0, 1);
}

.cart-drawer.is-on .cart-drawer__panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
	.cart-drawer__panel, .cart-drawer__scrim { transition: none; }
}

.cart-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid rgba(0, 0, 0, .09);
}

.cart-drawer__title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 17px;
}

.cart-drawer__title svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.cart-drawer__count {
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #14100c;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: grid;
	place-items: center;
}

.cart-drawer__close {
	border: 0;
	background: none;
	cursor: pointer;
	padding: 8px;
	border-radius: 8px;
	line-height: 0;
}

.cart-drawer__close:hover { background: rgba(0, 0, 0, .06); }
.cart-drawer__close svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }

.cart-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 20px;
}

.drawer-item {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .06);
	animation: stonex-fade-in .28s ease both;
}

@keyframes stonex-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.drawer-item.is-busy { opacity: .5; pointer-events: none; }
.drawer-item.is-removing { opacity: 0; transform: translateX(-12px); transition: all .2s ease; }

.drawer-item__media img {
	width: 72px;
	aspect-ratio: 1;
	object-fit: contain;
	object-position: center;
	max-width: 100%;
	max-height: 100%;
	background: #fff;
	border-radius: 8px;
	display: block;
}

.drawer-item__name { margin: 0 0 4px; font-size: 13.5px; line-height: 1.35; font-weight: 600; }
.drawer-item__name a { color: inherit; text-decoration: none; }
.drawer-item__variant { font-size: 12px; opacity: .6; margin-bottom: 6px; }
.drawer-item__variant p { margin: 0; }

.drawer-item__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.drawer-item__total { font-weight: 700; font-size: 14px; }

.drawer-item__remove {
	border: 0;
	background: none;
	cursor: pointer;
	padding: 4px;
	opacity: .4;
	align-self: start;
	line-height: 0;
}

.drawer-item__remove:hover { opacity: 1; color: #8d2020; }
.drawer-item__remove svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; }

.cart-drawer__foot {
	flex: 0 0 auto;
	padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(0, 0, 0, .09);
	background: #fff;
}

.cart-drawer__subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 16px;
	margin-bottom: 4px;
}

.cart-drawer__subtotal strong { font-size: 19px; }
.cart-drawer__note { margin: 0 0 14px; font-size: 12px; opacity: .6; }

.cart-drawer__continue {
	display: block;
	width: 100%;
	margin-top: 10px;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 13.5px;
	opacity: .68;
	padding: 6px;
}

.cart-drawer__continue:hover { opacity: 1; }

body.stonex-noscroll { overflow: hidden; }

/* ==========================================================================
   Checkout
   ========================================================================== */

.stonex-checkout { max-width: 1280px; margin: 0 auto; padding: 8px 16px 96px; }

.checkout__grid { display: grid; gap: 28px; }

.checkout__step {
	padding: 20px;
	border: 1px solid rgba(0, 0, 0, .09);
	border-radius: 14px;
	background: #fff;
	margin-bottom: 16px;
}

.checkout__step-title {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 16px;
	font-size: 17px;
}

.checkout__step-num {
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background: #14100c;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	flex: 0 0 27px;
}

.checkout__delivery.is-busy, .checkout__summary.is-busy { position: relative; opacity: .55; pointer-events: none; }

.checkout__delivery-note { font-size: 13.5px; opacity: .66; margin: 0; }

/* WooCommerce field styling ---------------------------------------------- */

.stonex-checkout .form-row { margin: 0 0 14px; display: flex; flex-direction: column; }
.stonex-checkout .form-row label { font-size: 13px; font-weight: 600; margin-bottom: 6px; }

.stonex-checkout .input-text,
.stonex-checkout select,
.stonex-checkout textarea {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 9px;
	font-size: 15px; /* 16px-ish avoids iOS zoom-on-focus */
	background: #fff;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.stonex-checkout .input-text:focus,
.stonex-checkout select:focus,
.stonex-checkout textarea:focus {
	border-color: #c9a227;
	box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
	outline: none;
}

.stonex-checkout .form-row.has-error .input-text,
.stonex-checkout .form-row.has-error select { border-color: #8d2020; }

.stonex-checkout .form-row.is-valid .input-text { border-color: rgba(31, 122, 77, .5); }

.stonex-field-error { display: block; margin-top: 5px; font-size: 12.5px; color: #8d2020; }

.stonex-checkout .required { color: #8d2020; text-decoration: none; }

/* Rewards hero (checkout) -------------------------------------------------
 *
 * Sits above the checkout grid. Full-width on mobile, and deliberately the
 * first thing under the page title — it is a reason to finish the order, so
 * it must land before the customer starts filling in fields.
 */

.co-rewards {
	position: relative;
	display: grid;
	gap: 12px;
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid rgba(201, 162, 39, .36);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(201, 162, 39, .12), rgba(201, 162, 39, .04));
	transition: opacity .18s ease;
}

.co-rewards.is-busy { opacity: .6; pointer-events: none; }

.co-rewards.is-applied {
	border-color: rgba(31, 122, 77, .45);
	background: linear-gradient(180deg, rgba(31, 122, 77, .12), rgba(31, 122, 77, .04));
}

.co-rewards__main {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.co-rewards__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	background: rgba(201, 162, 39, .2);
	color: #8a6d1f;
}

.co-rewards.is-applied .co-rewards__icon { background: rgba(31, 122, 77, .16); color: #1f7a4d; }
.co-rewards__icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; }

.co-rewards__text { min-width: 0; flex: 1; }
.co-rewards__title { margin: 0 0 3px; font-size: 15px; line-height: 1.35; }
.co-rewards__sub { margin: 0; font-size: 13px; opacity: .72; line-height: 1.4; }

.co-rewards__msg {
	margin: 6px 0 0;
	font-size: 13px;
	color: #1f7a4d;
	min-height: 0;
}

.co-rewards__msg:empty { display: none; }
.co-rewards__msg.is-error { color: #8d2020; }

.co-rewards__info {
	flex: none;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .05);
	cursor: pointer;
	color: inherit;
	opacity: .6;
}

.co-rewards__info:hover { opacity: 1; }
.co-rewards__info svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.co-rewards__info:focus-visible { outline: 2px solid #c9a227; outline-offset: 2px; }

/* Popover: absolutely positioned so opening it never reflows the page. */
.co-rewards__pop {
	position: absolute;
	z-index: 30;
	top: calc(100% - 6px);
	right: 12px;
	left: 12px;
	max-width: 420px;
	margin-left: auto;
	padding: 14px 16px;
	border-radius: 10px;
	background: #14100c;
	color: #f3ede0;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .32);
}

.co-rewards__pop[hidden] { display: none; }

.co-rewards__pop-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
	font-weight: 700;
	font-size: 13.5px;
}

.co-rewards__pop-close {
	border: 0;
	background: none;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: .7;
	padding: 0 2px;
}

.co-rewards__pop-close:hover { opacity: 1; }

.co-rewards__pop-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 7px;
	font-size: 12.5px;
	line-height: 1.5;
	opacity: .9;
}

.co-rewards__pop-list li { padding-left: 14px; position: relative; }
.co-rewards__pop-list li::before { content: "•"; position: absolute; left: 0; color: #c9a227; }

.co-rewards__actions { display: flex; gap: 8px; }

.co-rewards__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	padding: 11px 16px;
	border: 1px solid rgba(0, 0, 0, .8);
	border-radius: 9px;
	background: none;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.co-rewards__btn:hover { background: #14100c; color: #fff; }
.co-rewards__btn:disabled { opacity: .55; cursor: wait; }

.co-rewards__btn--apply.is-applied {
	background: #1f7a4d;
	border-color: #1f7a4d;
	color: #fff;
}

/* The tick only belongs on the applied state. */
.co-rewards__check { display: none; }
.co-rewards__check svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.6; }
.co-rewards__btn--apply.is-applied .co-rewards__check { display: inline-grid; }

@media (min-width: 720px) {
	.co-rewards {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 18px;
		padding: 16px 20px;
	}

	.co-rewards__actions { justify-content: flex-end; }
	.co-rewards__btn { width: auto; min-width: 190px; }
}

/* Order review ----------------------------------------------------------- */

.checkout__summary {
	border: 1px solid rgba(0, 0, 0, .09);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	transition: opacity .2s ease;
}

.checkout__summary-toggle {
	display: none; /* desktop shows the summary expanded */
	width: 100%;
	align-items: center;
	gap: 10px;
	padding: 15px 18px;
	border: 0;
	background: rgba(0, 0, 0, .03);
	cursor: pointer;
	font-size: 14.5px;
	font-weight: 600;
}

.checkout__summary-toggle-label { display: flex; align-items: center; gap: 8px; }
.checkout__summary-toggle-label svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.checkout__summary-toggle-total { margin-left: auto; font-weight: 800; }
.checkout__summary-chev { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .22s ease; }
.checkout__summary-toggle[aria-expanded="true"] .checkout__summary-chev { transform: rotate(180deg); }

.checkout__review { padding: 20px; }
.checkout__review-title { margin: 0 0 16px; font-size: 18px; }

.review__items { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }

.review__item { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: start; }

.review__item-media { position: relative; }

.review__item-media img {
	width: 54px;
	aspect-ratio: 1;
	object-fit: contain;
	object-position: center;
	max-width: 100%;
	max-height: 100%;
	background: #fff;
	border-radius: 8px;
	display: block;
}

.review__item-qty {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 21px;
	height: 21px;
	padding: 0 5px;
	border-radius: 999px;
	background: #14100c;
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	display: grid;
	place-items: center;
}

.review__item-name { display: block; font-size: 13.5px; line-height: 1.35; }
.review__item-variant { display: block; font-size: 12px; opacity: .6; margin-top: 3px; }
.review__item-variant p { margin: 0; }
.review__item-total { font-size: 13.5px; font-weight: 700; white-space: nowrap; }

.review__coupon { margin-bottom: 16px; }
.review__totals { margin: 0; }

/* Shipping method list --------------------------------------------------- */

.woocommerce-shipping-totals ul,
ul#shipping_method { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 15px;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease;
}

ul#shipping_method li:hover { border-color: rgba(0, 0, 0, .3); }
ul#shipping_method li label { margin: 0; cursor: pointer; flex: 1; font-size: 14px; }
ul#shipping_method li input[type="radio"] { accent-color: #c9a227; width: 17px; height: 17px; }

/* Saved addresses -------------------------------------------------------- */

.co-saved { margin: 0 0 18px; }

.co-saved__label {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 9px;
	font-size: 13px;
	font-weight: 600;
	opacity: .78;
}

.co-saved__label svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.co-saved__list { display: grid; gap: 9px; }

.co-saved__card {
	display: grid;
	gap: 5px;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 10px;
	background: #fff;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: border-color .16s ease, background .16s ease;
}

.co-saved__card:hover { border-color: rgba(201, 162, 39, .55); }
.co-saved__card.is-active { border-color: #c9a227; background: rgba(201, 162, 39, .07); }
.co-saved__card:focus-visible { outline: 2px solid #c9a227; outline-offset: 2px; }

.co-saved__type {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	opacity: .6;
}

.co-saved__lines { display: grid; font-size: 13.5px; line-height: 1.45; }
.co-saved__use { font-size: 12.5px; font-weight: 700; color: #8a6d1f; }
.co-saved__card.is-active .co-saved__use::after { content: " ✓"; }

/* Create-account panel (WooCommerce's own fields, restyled) --------------- */

.stonex-checkout .woocommerce-account-fields {
	margin-top: 14px;
	padding: 14px 16px;
	border: 1px dashed rgba(201, 162, 39, .5);
	border-radius: 10px;
	background: rgba(201, 162, 39, .05);
}

.stonex-checkout .woocommerce-account-fields .create-account { margin-top: 12px; }

.stonex-checkout .woocommerce-form-login,
.stonex-checkout .woocommerce-form-coupon {
	padding: 16px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 10px;
	background: #fff;
	margin-bottom: 18px;
}

/* Payment ---------------------------------------------------------------- */

#payment { background: none; }

#payment ul.payment_methods {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	gap: 10px;
	border: 0;
}

/*
 * Cards, not a radio list. The whole tile is the target — a 44px+ hit area
 * rather than a 17px radio, which matters most on the step where a mis-tap
 * costs the sale.
 */
#payment ul.payment_methods li {
	padding: 14px 16px;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 10px;
	transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

#payment ul.payment_methods li:hover { border-color: rgba(0, 0, 0, .3); }

/*
 * :has() styles the selected card from the radio's own state, so the
 * highlight cannot drift out of sync with what is actually submitted — which
 * is exactly what happens when a class is toggled by script instead.
 */
#payment ul.payment_methods li:has(input[type="radio"]:checked) {
	border-color: #c9a227;
	background: rgba(201, 162, 39, .06);
	box-shadow: 0 0 0 1px rgba(201, 162, 39, .35);
}

#payment ul.payment_methods li label {
	font-weight: 600;
	cursor: pointer;
	font-size: 14.5px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

#payment ul.payment_methods li input[type="radio"] { accent-color: #c9a227; margin-right: 9px; width: 18px; height: 18px; }

#payment .payment_box {
	margin-top: 11px;
	padding: 13px;
	border-radius: 9px;
	background: rgba(0, 0, 0, .04);
	font-size: 13.5px;
}

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

#place_order {
	width: 100%;
	padding: 16px 20px;
	border: 0;
	border-radius: 10px;
	background: #c9a227;
	color: #14100c;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	font-size: 14.5px;
	cursor: pointer;
	transition: filter .16s ease;
}

#place_order:hover { filter: brightness(1.06); }
#place_order:disabled { opacity: .6; cursor: wait; }

.woocommerce-terms-and-conditions-wrapper { margin-bottom: 14px; font-size: 13px; }

/* Mobile sticky bar ------------------------------------------------------ */

.checkout__sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: #fff;
	border-top: 1px solid rgba(0, 0, 0, .1);
	box-shadow: 0 -6px 22px rgba(0, 0, 0, .09);
	transform: translateY(110%);
	transition: transform .26s ease;
}

.checkout__sticky.is-on { transform: translateY(0); }
.checkout__sticky-info { display: flex; flex-direction: column; line-height: 1.2; }
.checkout__sticky-label { font-size: 11.5px; opacity: .6; text-transform: uppercase; letter-spacing: .05em; }
.checkout__sticky-total { font-size: 18px; }

.checkout__sticky-btn {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 22px;
	border: 0;
	border-radius: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 13.5px;
	cursor: pointer;
}

.checkout__sticky-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (max-width: 899px) {
	/* Collapse the summary behind a toggle so the form is reachable without
	   scrolling past a long item list. */
	.checkout__summary-toggle { display: flex; }
	.checkout__review { display: none; }
	.checkout__summary.is-open .checkout__review { display: block; }

	.cart-item { grid-template-columns: 78px minmax(0, 1fr); }
	.cart-item__total { grid-column: 2; text-align: left; margin-top: 8px; }
}

@media (min-width: 900px) {
	.cart-page__grid { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
	.checkout__grid { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }

	.cart-page__aside, .checkout__aside {
		position: sticky;
		top: 96px; /* clears the sticky site header */
	}

	.cart-item { grid-template-columns: 108px minmax(0, 1fr) auto; }
	.cart-item__total { grid-column: auto; align-self: center; }

	.checkout__sticky { display: none; }

	/* Two-up name/address fields on wider screens. */
	.stonex-checkout .form-row-first,
	.stonex-checkout .form-row-last { display: inline-flex; width: calc(50% - 7px); }
	.stonex-checkout .form-row-first { margin-right: 12px; }
}


/* ---------------------------------------------------------------------
   Touch floor for the cart's quantity steppers.

   Measured at 30x30 in the drawer and on the cart page — the control a
   customer uses most often once something is in the bag, and the one where a
   mis-tap costs money by changing the wrong line. This file loads after
   stonex.css, so the shared 44px block there cannot reach it.

   The buttons grow to 40 and take the rest from a transparent extension, which
   keeps the stepper the same visual width as the price column beside it; the
   field between them grows outright because it is typed into.

   Same scope as the shared block, so the desktop cart is unchanged.
   --------------------------------------------------------------------- */

@media (max-width: 900px), (hover: none) {
	/*
	 * `.cart-qty--sm` is the variant the drawer uses, and it shrinks the
	 * stepper to 30x30 — so raising the base rule alone changed nothing. Both
	 * are stated, the compact one included, because "compact" is a desktop
	 * density choice and a finger is the same size either way.
	 */
	.cart-qty__btn,
	.cart-qty--sm .cart-qty__btn {
		width: 40px;
		height: 40px;
		position: relative;
	}

	.cart-qty__btn::after,
	.cart-qty--sm .cart-qty__btn::after {
		content: "";
		position: absolute;
		inset: -2px;
	}

	.cart-qty__in,
	.cart-qty--sm .cart-qty__in {
		min-width: 44px;
		height: 40px;
		font-size: 16px;
	}
}