/* =========================================================================
   WOOCOMMERCE — shop archive, single product, cart, checkout, account,
   notices, pagination. Loaded only on WooCommerce pages. Tokens only.
   ========================================================================= */

/* Hide default WooCommerce theming we replace */
.woocommerce-products-header { text-align: center; margin-bottom: var(--space-lg); }
.woocommerce-products-header__title { font-size: clamp(2rem, 5vw, var(--fs-xl)); }
.term-description { color: var(--color-ink-soft); max-width: 60ch; margin-inline: auto; }

/* Shop toolbar */
.woocommerce-result-count { color: var(--color-ink-soft); font-size: var(--fs-sm); }
.woocommerce-ordering select {
	padding: 0.6em 1em; border: 1px solid var(--color-line);
	border-radius: var(--radius); font-family: var(--font-base); background: var(--surface);
}

/* Custom brand dropdown (JS-enhanced) — replaces the native select/iOS picker.
   The native <select> is kept in the form (hidden) for value + submit. */
.cs-select { position: relative; display: inline-block; min-width: 220px; font-family: var(--font-base); }
.cs-select__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); }
.cs-select__btn {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); width: 100%;
	padding: 0.7em 1em; border: 1px solid var(--color-line); border-radius: var(--radius);
	background: var(--surface); color: var(--color-ink); font-size: var(--fs-sm); letter-spacing: .02em; cursor: pointer;
	transition: border-color var(--transition);
}
.cs-select__btn:hover, .cs-select.open .cs-select__btn { border-color: var(--gold); }
.cs-select__caret { font-size: 1em; color: var(--color-ink-soft); transition: transform .3s ease; }
.cs-select.open .cs-select__caret { transform: rotate(180deg); }
.cs-select__list {
	position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: .4rem; list-style: none;
	background: var(--surface); border: 1px solid var(--color-line); border-radius: var(--radius);
	box-shadow: 0 18px 40px -18px rgba(60,48,22,.45);
	opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease, visibility .25s;
	max-height: 320px; overflow-y: auto;
}
.cs-select.open .cs-select__list { opacity: 1; visibility: visible; transform: translateY(0); }
.cs-select__opt { padding: .65rem .8rem; border-radius: calc(var(--radius) - 2px); font-size: var(--fs-sm); color: var(--color-ink-soft); cursor: pointer; transition: background .2s ease, color .2s ease; }
.cs-select__opt:hover { background: var(--color-surface); color: var(--color-ink); }
.cs-select__opt[aria-selected="true"] { color: var(--gold); font-weight: 500; }
@media (max-width: 600px) { .cs-select { width: 100%; min-width: 0; } }

.shop-toolbar {
	display: flex; justify-content: space-between; align-items: center;
	gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md);
}
/* The empty WooCommerce notices wrapper took the toolbar's first flex slot and
   pushed the result count to the centre — collapse it so the count sits at the
   left, with the sort control at the right. */
.shop-toolbar .woocommerce-notices-wrapper:empty { display: none; }
.shop-toolbar .woocommerce-result-count { margin: 0; }
@media (max-width: 600px) {
	/* Stack on phones: count on its own line (top-left), sort full-width below. */
	.shop-toolbar .woocommerce-result-count { order: -1; width: 100%; font-size: var(--fs-xs); }
	.shop-toolbar .woocommerce-ordering { width: 100%; }
}

/* ---- Load More (next-batch pagination — replaces numbered pages) ---- */
.cs-loadmore { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); margin: var(--space-xl) auto 0; text-align: center; }
.cs-loadmore__status { color: var(--color-ink-soft); font-size: var(--fs-sm); margin: 0; letter-spacing: .02em; }
.cs-loadmore__status b { color: var(--color-ink); font-weight: 600; }
.cs-loadmore__bar { width: min(220px, 60vw); height: 3px; border-radius: 3px; background: var(--color-line); overflow: hidden; }
.cs-loadmore__fill { display: block; height: 100%; background: var(--color-primary); transition: width .5s cubic-bezier(.6,0,.2,1); }
.cs-loadmore__btn {
	display: inline-flex; align-items: center; gap: .6rem; margin-top: var(--space-2xs);
	padding: 0.95em 2.4em; border: 1px solid var(--color-primary); border-radius: 999px;
	background: transparent; color: var(--color-primary); cursor: pointer;
	font-family: var(--font-base); font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.cs-loadmore__btn:hover { background: var(--color-primary); color: #fff; }
.cs-loadmore__btn i { transition: transform .3s ease; }
.cs-loadmore.is-loading .cs-loadmore__btn { opacity: .55; pointer-events: none; }
.cs-loadmore.is-loading .cs-loadmore__btn i { animation: cs-bounce .8s infinite; }
@keyframes cs-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
/* Appended items fade / rise in. */
.product-grid .cs-in, .journal-grid .cs-in { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.product-grid .cs-in.is-in, .journal-grid .cs-in.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.product-grid .cs-in, .journal-grid .cs-in { transition: none; opacity: 1; transform: none; }
	.cs-loadmore__fill { transition: none; }
}

/* The shop grid reuses .product-grid / .product-card from components.css.
   WooCommerce's default ul.products is neutralised in favour of our grid. */
ul.products { list-style: none; margin: 0; padding: 0; }

/* Notices — hide WooCommerce's absolutely-positioned ::before glyph (it overlaps
   the text); we use a gold left-border accent instead. */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.woocommerce-notices-wrapper .wc-block-components-notice-banner {
	border-radius: var(--radius); padding: var(--space-sm) var(--space-md);
	margin-bottom: var(--space-md); font-size: var(--fs-sm);
	border-left: 3px solid var(--color-primary); background: var(--color-surface);
	list-style: none; display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--space-2xs) var(--space-md); justify-content: space-between;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
	display: none !important; content: none !important;
}
.woocommerce-message > .button, .woocommerce-info > .button, .woocommerce-error > .button { margin-left: auto; }
.woocommerce-error { border-left-color: var(--color-error); background: #fbecee; }
.woocommerce-message { border-left-color: var(--color-success); }

/* Pagination styles live in naila-pages.css (global) so the blog uses them too. */

/* =========================================================================
   SINGLE PRODUCT
   The product page is rendered as a custom <section class="pdp"> (styled in
   naila-pages.css). We intentionally do NOT style ".single-product div.product"
   here, because the related-product CARDS are also div.product and would inherit
   it (they must stay as normal boxed cards).
   ========================================================================= */

.product_title { font-size: clamp(1.8rem, 4vw, var(--fs-xl)); margin-bottom: var(--space-2xs); }
.single-product .price { font-size: var(--fs-md); color: var(--color-ink); margin-bottom: var(--space-sm); }
.single-product .price del { color: var(--color-ink-soft); margin-right: 0.5em; }
.single-product .price ins { text-decoration: none; color: var(--color-accent); }
.woocommerce-product-details__short-description { color: var(--color-ink-soft); }

.single_variation_wrap .woocommerce-variation-price { margin-bottom: var(--space-sm); }
table.variations { width: 100%; margin-bottom: var(--space-sm); }
table.variations td, table.variations th { padding: var(--space-2xs) 0; text-align: left; vertical-align: middle; }
table.variations select { padding: 0.6em 1em; border: 1px solid var(--color-line); border-radius: var(--radius); }

/* Quantity + add to cart. NOTE: scoped to the single-product / cart buttons —
   it must NOT restyle the card's .product__bag icon (the design owns that). */
.quantity input.qty {
	width: 64px; padding: 0.7em; text-align: center;
	border: 1px solid var(--color-line); border-radius: var(--radius);
}
.single_add_to_cart_button,
.wc-block-components-button, .wp-element-button {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
	font-family: var(--font-base); font-size: var(--fs-xs);
	letter-spacing: var(--tracking-wide); text-transform: uppercase;
	padding: 0.9em 1.8em; border: 1px solid var(--color-primary);
	border-radius: var(--radius); background: var(--color-primary); color: #fff; cursor: pointer;
	transition: background var(--transition), border-color var(--transition);
}
.single_add_to_cart_button:hover, .wp-element-button:hover {
	background: var(--color-primary-deep); border-color: var(--color-primary-deep); color: #fff;
}
.woocommerce-tabs { margin-top: var(--space-xl); }
.woocommerce-tabs ul.tabs { display: flex; gap: var(--space-md); list-style: none; padding: 0; border-bottom: 1px solid var(--color-line); }
.woocommerce-tabs ul.tabs li { padding-bottom: var(--space-2xs); }
.woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--color-primary); }

/* =========================================================================
   CART  (WC default cart stylesheet is dequeued, so this owns the whole page:
   the items table, the actions/coupon row, shipping, totals, and the
   responsive collapse that WC's shop_table_responsive normally provides.)
   ========================================================================= */
/* Fixed layout: column widths are honoured exactly (auto layout was dumping all
   slack into the remove column and collapsing the thumbnail). */
.woocommerce-cart-form table.cart { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: var(--space-lg); }
.woocommerce-cart-form table.cart thead th {
	text-align: left; font-family: var(--font-base); font-weight: 600;
	font-size: var(--fs-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
	color: var(--color-ink-soft); padding: 0 var(--space-sm) var(--space-sm);
	border-bottom: 1px solid var(--color-line);
}
/* Column track widths (defined on the header row, applied by table-layout:fixed).
   product-name has no width and absorbs the remaining space. */
.woocommerce-cart-form table.cart thead .product-remove { width: 44px; }
.woocommerce-cart-form table.cart thead .product-thumbnail { width: 108px; }
.woocommerce-cart-form table.cart thead .product-price { width: 15%; }
.woocommerce-cart-form table.cart thead .product-quantity { width: 140px; }
.woocommerce-cart-form table.cart thead .product-subtotal { width: 16%; }
.woocommerce-cart-form table.cart td {
	padding: var(--space-sm); border-bottom: 1px solid var(--color-line);
	vertical-align: middle; font-size: var(--fs-sm);
}
/* Numbers in the base font at a normal size (the serif display read oversized here). */
.woocommerce-cart-form table.cart .product-price { font-family: var(--font-base); font-size: var(--fs-sm); color: var(--color-ink-soft); }
.woocommerce-cart-form table.cart .product-subtotal { font-family: var(--font-base); font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink); }
/* Column alignment: price left · quantity centred · subtotal right (headers match the cells). */
.woocommerce-cart-form table.cart thead .product-quantity,
.woocommerce-cart-form table.cart td.product-quantity { text-align: center; }
.woocommerce-cart-form table.cart thead .product-subtotal,
.woocommerce-cart-form table.cart td.product-subtotal { text-align: right; }

/* Thumbnail — fixed square box (the img carries width/height=600 attrs; without
   an explicit height it stretches into a tall strip). */
.woocommerce-cart-form .product-thumbnail img {
	width: 84px; height: 84px; max-width: none; object-fit: cover; border-radius: var(--radius);
	border: 1px solid var(--color-line); display: block;
}
.woocommerce-cart-form .product-name a { font-family: var(--font-display); font-size: var(--fs-base); color: var(--color-ink); }
.woocommerce-cart-form .product-name a:hover { color: var(--color-primary); }

/* Quantity stepper — −  [n]  +  pill. JS injects the buttons; with JS off it
   degrades to a plain centred number field. Themed via tokens (works dark + light). */
.woocommerce-cart-form td.product-quantity .quantity {
	display: inline-flex; align-items: center; width: 118px; max-width: 100%; margin: 0 auto;
	border: 1px solid var(--color-line); border-radius: 999px;
	background: var(--color-surface); overflow: hidden;
}
.woocommerce-cart-form .quantity .qty-btn {
	flex: 0 0 36px; height: 40px; display: grid; place-items: center; padding: 0;
	border: 0; background: transparent; cursor: pointer;
	color: var(--color-ink-soft); font-size: 1.2rem; line-height: 1;
	transition: color var(--transition), background var(--transition);
}
.woocommerce-cart-form .quantity .qty-btn:hover:not(:disabled) { color: var(--color-primary); }
.woocommerce-cart-form .quantity .qty-btn:disabled { opacity: .3; cursor: default; }
.woocommerce-cart-form .quantity .qty-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -3px; border-radius: 50%; }
.woocommerce-cart-form td.product-quantity .quantity input.qty {
	flex: 1 1 auto; width: 100%; min-width: 0; height: 40px; padding: 0;
	border: 0; background: transparent; text-align: center;
	color: var(--color-ink); font-family: var(--font-base); font-size: var(--fs-sm);
	-moz-appearance: textfield; appearance: textfield;
}
.woocommerce-cart-form td.product-quantity .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart-form td.product-quantity .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Remove (×) as a small round button. */
.woocommerce-cart-form .product-remove { width: 36px; }
.woocommerce-cart-form a.remove {
	display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	color: var(--color-ink-soft); font-size: 1.2rem; line-height: 1; text-decoration: none;
	border: 1px solid var(--color-line); transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.woocommerce-cart-form a.remove:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }

/* Actions row: coupon group left, "update cart" right. */
.woocommerce-cart-form .actions { padding: var(--space-md) 0 0; border: 0; }
.woocommerce-cart-form .actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; justify-content: space-between; }
.woocommerce-cart-form .actions .coupon { display: flex; gap: var(--space-2xs); align-items: center; }
.woocommerce-cart-form .actions .coupon input#coupon_code {
	min-height: 48px; padding: 0.7em 1em; border: 1px solid var(--color-line);
	border-radius: var(--radius); font-family: var(--font-base); font-size: var(--fs-sm); width: 200px; max-width: 100%;
	background: var(--color-surface); color: var(--color-ink);
}
.woocommerce-cart-form .actions .coupon input#coupon_code::placeholder { color: var(--color-ink-soft); }
.woocommerce-cart-form .actions button[name="update_cart"]:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Cart collaterals (totals) ---- */
.cart-collaterals { margin-top: var(--space-xl); }
.cart_totals {
	background: var(--color-surface); border: 1px solid var(--color-line);
	border-radius: var(--radius-lg); padding: var(--space-lg);
}
.cart_totals > h2 { font-family: var(--font-display); font-size: var(--fs-lg); margin: 0 0 var(--space-md); }
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals th, .cart_totals td { padding: var(--space-xs) 0; text-align: left; vertical-align: top; font-size: var(--fs-sm); border-bottom: 1px solid var(--color-line); }
.cart_totals td { text-align: right; }
.cart_totals .order-total th, .cart_totals .order-total td { border-bottom: 0; padding-top: var(--space-sm); font-family: var(--font-display); font-size: var(--fs-md); }
.cart_totals .order-total td strong { font-weight: 400; color: var(--color-primary); }

/* Shipping method list inside totals. */
.cart_totals #shipping_method { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.cart_totals #shipping_method li { display: flex; align-items: center; gap: var(--space-2xs); }
.cart_totals #shipping_method label { margin: 0; }
.woocommerce-shipping-destination { color: var(--color-ink-soft); font-size: var(--fs-xs); margin-top: var(--space-2xs); }
.shipping-calculator-button { color: var(--color-primary); font-size: var(--fs-xs); }
.woocommerce-shipping-calculator { margin-top: var(--space-2xs); }
.woocommerce-shipping-calculator .form-row { margin-bottom: var(--space-2xs); }
.woocommerce-shipping-calculator input.input-text,
.woocommerce-shipping-calculator select { width: 100%; min-height: 44px; padding: 0.6em 0.9em; border: 1px solid var(--color-line); border-radius: var(--radius); font-size: var(--fs-sm); box-sizing: border-box; }

/* Proceed to checkout — primary CTA. */
.wc-proceed-to-checkout { margin-top: var(--space-md); padding: 0; }
.wc-proceed-to-checkout .checkout-button { display: flex; width: 100%; justify-content: center; padding: 1.05em; font-size: var(--fs-sm); }

/* Two-column on desktop: items table | sticky totals card. */
@media (min-width: 900px) {
	.woocommerce-cart .woocommerce {
		display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
		gap: var(--space-xl); align-items: start;
	}
	.woocommerce-cart .woocommerce-notices-wrapper,
	.woocommerce-cart form.woocommerce-cart-form { grid-column: 1; }
	.woocommerce-cart .cart-collaterals { grid-column: 2; margin-top: 0; position: sticky; top: calc(var(--header-h) + 16px); }
	.cart-collaterals, .cart_totals { width: 100%; }
}

/* Responsive collapse (replaces WC's shop_table_responsive). */
@media (max-width: 720px) {
	.woocommerce-cart-form table.cart thead { display: none; }
	.woocommerce-cart-form table.cart,
	.woocommerce-cart-form table.cart tbody { display: block; width: 100%; }
	.woocommerce-cart-form table.cart tr.cart_item {
		display: grid; grid-template-columns: 84px 1fr auto; grid-template-areas:
			"thumb name remove" "thumb price price" "thumb qty subtotal";
		gap: .4rem var(--space-sm); align-items: center;
		padding: var(--space-md) 0; border-bottom: 1px solid var(--color-line);
	}
	.woocommerce-cart-form table.cart tr.cart_item td { display: block; padding: 0; border: 0; }
	.woocommerce-cart-form tr.cart_item .product-thumbnail { grid-area: thumb; width: 84px; }
	.woocommerce-cart-form tr.cart_item .product-name { grid-area: name; }
	.woocommerce-cart-form tr.cart_item .product-price { grid-area: price; }
	.woocommerce-cart-form tr.cart_item .product-quantity { grid-area: qty; }
	.woocommerce-cart-form tr.cart_item .product-subtotal { grid-area: subtotal; text-align: right; font-family: var(--font-display); }
	.woocommerce-cart-form tr.cart_item .product-remove { grid-area: remove; justify-self: end; }
	.woocommerce-cart-form tr.cart_item .product-price::before,
	.woocommerce-cart-form tr.cart_item .product-subtotal::before {
		content: attr(data-title) ": "; color: var(--color-ink-soft); font-family: var(--font-base); font-size: var(--fs-xs);
	}
	.woocommerce-cart-form tr:not(.cart_item) td.actions { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md) 0 0; }
	.woocommerce-cart-form .actions .coupon { display: flex; gap: var(--space-2xs); flex: 1 1 100%; width: 100%; }
	.woocommerce-cart-form .actions .coupon input#coupon_code { flex: 1; width: auto; }
	.woocommerce-cart-form .actions button[name="update_cart"] { width: 100%; }
}

/* =========================================================================
   CHECKOUT (classic shortcode checkout) — two-column on desktop
   ========================================================================= */
.checkout-layout { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }

/* Single column on mobile; two columns (form | sticky summary) on desktop. */
form.checkout.woocommerce-checkout { display: grid; grid-template-columns: 1fr; gap: var(--space-lg) var(--space-xl); align-items: start; }
@media (min-width: 900px) {
	form.checkout.woocommerce-checkout { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
	#customer_details { grid-column: 1; }
	.checkout__review { grid-column: 2; position: sticky; top: calc(var(--header-h) + 16px); }
}
/* Coupon notice / form spans full width above the columns. */
form.checkout > .woocommerce-form-coupon-toggle,
form.checkout > .woocommerce-form-coupon,
form.checkout > .woocommerce-NoticeGroup-checkout { grid-column: 1 / -1; }

/* Stack billing, "ship to different address", and order notes full width. */
#customer_details, #customer_details .col2-set { display: block; width: 100%; }
#customer_details .col-1, #customer_details .col-2 { width: 100%; max-width: none; float: none; }
#customer_details .col-2 { margin-top: var(--space-lg); }

.woocommerce-checkout h3 {
	font-size: var(--fs-lg); margin: 0 0 var(--space-md);
	padding-bottom: var(--space-2xs); border-bottom: 1px solid var(--color-line);
}

/* Fields: first/last name side-by-side, everything else full width. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-sm);
}
.woocommerce form .form-row { margin-bottom: var(--space-sm); float: none !important; width: auto !important; padding: 0; }
.woocommerce form .form-row-wide, .woocommerce form .form-row-id, .woocommerce form .notes { grid-column: 1 / -1; }
.woocommerce form .form-row-first { grid-column: 1; }
.woocommerce form .form-row-last { grid-column: 2; }
.woocommerce form .form-row label { display: block; font-size: var(--fs-sm); margin-bottom: var(--space-3xs); color: var(--color-ink-soft); }
.woocommerce form .form-row .required { color: var(--color-accent); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row .select2-container,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%; min-height: 48px; padding: 0.8em 1em;
	border: 1px solid var(--color-line); border-radius: var(--radius);
	font-family: var(--font-base); font-size: var(--fs-sm); background: var(--surface); color: var(--color-ink); box-sizing: border-box;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.6; padding: 0; color: var(--color-ink); }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { top: 12px; right: 8px; }

/* Visible placeholders + a gold focus ring (both themes use the same tokens). */
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder { color: var(--color-ink-faint); opacity: 1; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--gold) !important; outline: none; }

/* select2 dropdown is appended to <body> — theme it so the country list isn't
   a white box on the dark page. */
.select2-dropdown { background: var(--color-surface); border-color: var(--color-line); }
.select2-container--default .select2-results__option { color: var(--color-ink); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--gold); color: #fff; }
.select2-search--dropdown .select2-search__field { background: var(--surface); color: var(--color-ink); border: 1px solid var(--color-line); }

/* Tint the native radios / checkboxes (ship-to, terms, shipping, payment) gold. */
.woocommerce-checkout input[type="radio"], .woocommerce-checkout input[type="checkbox"] { accent-color: var(--gold); }

/* Coupon toggle as a slim notice. */
.woocommerce-form-coupon-toggle .woocommerce-info {
	background: var(--color-surface); border-left: 3px solid var(--color-primary);
	padding: var(--space-2xs) var(--space-md); border-radius: var(--radius); font-size: var(--fs-sm);
}

/* Right column: order summary card. */
.checkout__review #order_review {
	background: var(--color-surface); border: 1px solid var(--color-line);
	border-radius: var(--radius-lg); padding: var(--space-md);
}
table.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-md); }
table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td { padding: var(--space-2xs) 0; border-bottom: 1px solid var(--color-line); text-align: left; font-size: var(--fs-sm); }
table.woocommerce-checkout-review-order-table td { text-align: right; }
table.woocommerce-checkout-review-order-table .product-name { text-align: left; }
table.woocommerce-checkout-review-order-table tfoot th { font-family: var(--font-display); }
table.woocommerce-checkout-review-order-table .order-total th,
table.woocommerce-checkout-review-order-table .order-total td { border-bottom: 0; font-size: var(--fs-md); padding-top: var(--space-sm); }
/* Shipping options inside the order review — no list bullets, left-aligned radio + label. */
.woocommerce-checkout .woocommerce-shipping-totals td { text-align: left; }
.woocommerce-checkout #shipping_method { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.woocommerce-checkout #shipping_method li { display: flex; align-items: center; gap: var(--space-2xs); }
.woocommerce-checkout #shipping_method label { margin: 0; font-size: var(--fs-sm); }
.woocommerce-checkout #shipping_method .amount { margin-left: auto; font-family: var(--font-base); }

#payment { background: transparent; padding: var(--space-md) 0 0; margin-top: var(--space-md); border-top: 1px solid var(--color-line); }
#payment ul.payment_methods { list-style: none; margin: 0 0 var(--space-sm); padding: 0; border: 0; }
#payment ul.payment_methods li { padding: var(--space-2xs) 0; }
#payment div.payment_box { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-sm); font-size: var(--fs-xs); color: var(--color-ink-soft); }
#payment .woocommerce-privacy-policy-text { font-size: var(--fs-xs); color: var(--color-ink-soft); }
#payment .place-order .button, #place_order {
	width: 100%; justify-content: center; margin-top: var(--space-sm);
	background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary);
	border-radius: var(--radius); padding: 1.05em; font-size: var(--fs-sm);
	letter-spacing: var(--tracking-wide); text-transform: uppercase; cursor: pointer; float: none;
}
#place_order:hover { background: var(--color-primary-deep); border-color: var(--color-primary-deep); }

/* =========================================================================
   MY ACCOUNT
   ========================================================================= */
/* Full-width account wrapper (no sidebar grid — the dashboard cards are the nav). */
.woocommerce-account .woocommerce { display: block; }
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; }

/* Order confirmation */
.woocommerce-order { max-width: 720px; margin-inline: auto; }
.woocommerce-thankyou-order-received { font-family: var(--font-display); font-size: var(--fs-lg); text-align: center; }
ul.woocommerce-order-overview {
	display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, 1fr);
	list-style: none; padding: var(--space-md); margin: var(--space-md) 0;
	background: var(--color-surface); border-radius: var(--radius-lg); text-align: center;
}
@media (min-width: 600px) { ul.woocommerce-order-overview { grid-template-columns: repeat(4, 1fr); } }
ul.woocommerce-order-overview li strong { display: block; font-family: var(--font-display); }

/* ---------- PDP: integrate WooCommerce add-to-cart form into the design ---------- */
#pdp-main-img { transition: opacity .25s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
/* Hover-zoom (magnifier): the main image scales toward the cursor — the zoom-on-
   hover seen on most store PDPs. Pointer-fine only; tap-to-swap still works on touch. */
.pdp-main { cursor: zoom-in; }
.pdp-main.is-zoom #pdp-main-img { transform: scale(2.4); transition: transform .12s ease-out, opacity .25s ease; }
@media (prefers-reduced-motion: reduce) { .pdp-main.is-zoom #pdp-main-img { transition: opacity .25s ease; } }
@media (hover: none), (pointer: coarse) { .pdp-main { cursor: default; } }
.pdp-buy { width: 100%; display: flex; flex-direction: column; gap: 1rem; }
.pdp-buy form.cart { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 0; }
.pdp-buy form.cart .quantity { flex: 0 0 auto; }
.pdp-buy form.cart .quantity input.qty { height: 54px; width: 84px; }
.pdp-buy .single_add_to_cart_button { flex: 1 1 220px; }

/* Add-to-cart = the theme's .btn--solid (override the generic WC button base). */
.woocommerce .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button.button {
	display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
	padding: 1.1rem 2.4rem; min-height: 54px; border: 1px solid var(--gold); border-radius: 0;
	background: var(--gold); color: #fff; font-family: var(--f-body);
	font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; line-height: 1;
	transition: background .4s ease, border-color .4s ease;
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button.button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.pdp-buy form.cart table.variations { flex: 1 1 100%; margin-bottom: .2rem; }
.pdp-buy form.cart .woocommerce-variation-add-to-cart { display: flex; gap: .8rem; align-items: center; flex: 1 1 100%; flex-wrap: wrap; }
.pdp-buy .woocommerce-variation-price { flex: 1 1 100%; font-family: var(--f-display); font-size: 1.4rem; color: var(--gold); }
.pdp-buy .reset_variations { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.pdp-info .pdp-desc p { margin-bottom: .6rem; }
/* attribute table inside Details accordion */
.accordion__body table.shop_attributes { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .86rem; }
.accordion__body table.shop_attributes th { text-align: left; padding: .5rem .8rem .5rem 0; color: var(--ink); font-weight: 600; width: 38%; }
.accordion__body table.shop_attributes td { padding: .5rem 0; color: var(--ink-soft); }

/* The PDP <section> also gets WooCommerce's .product class, which pulls in the
   boxed product-card styles (flex column + border). Override with the .pdp grid. */
.single-product .pdp { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; border: 0; box-shadow: none; background: transparent; }
.single-product .pdp:hover { box-shadow: none; transform: none; }
@media (max-width: 880px) { .single-product .pdp { grid-template-columns: 1fr; } }

/* =========================================================================
   WOOCOMMERCE ELEMENT BASE — replaces the dequeued woocommerce default
   stylesheets so WC components match the design site-wide.
   ========================================================================= */
/* Buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce .button, a.button.wc-forward, .woocommerce #respond input#submit {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .85rem 1.6rem; border: 1px solid var(--gold); border-radius: 8px;
	background: var(--gold); color: #fff; font-family: var(--f-body);
	font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1;
	cursor: pointer; transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce .button:hover, .woocommerce #respond input#submit:hover {
	background: var(--gold-deep); border-color: var(--gold-deep); color: #fff;
}
/* secondary / ghost buttons inside notices */
.woocommerce-info > .button, .woocommerce-message > .button, .woocommerce-error > .button {
	background: transparent; color: var(--gold); padding: .55rem 1.1rem;
}
.woocommerce-info > .button:hover, .woocommerce-message > .button:hover { background: var(--gold); color: #fff; }

/* Quantity stepper */
.woocommerce .quantity { display: inline-flex; align-items: center; }
.woocommerce .quantity input.qty {
	width: 70px; height: 48px; text-align: center; -moz-appearance: textfield;
	border: 1px solid var(--line); border-radius: 8px; font-family: var(--f-body); font-size: .95rem; color: var(--ink);
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Star rating (unicode fallback — WC's star font is gone) */
.star-rating { display: inline-block; position: relative; width: 5.4em; height: 1.2em; line-height: 1.2; overflow: hidden; font-size: .9rem; color: var(--gold); letter-spacing: .1em; }
.star-rating::before { content: "★★★★★"; color: var(--line); position: absolute; left: 0; top: 0; }
.star-rating span { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; }
.star-rating span::before { content: "★★★★★"; color: var(--gold); }

/* select2 arrow + focus (base select2 css stays loaded) */
.woocommerce .select2-container--default .select2-selection--single { border: 1px solid var(--line) !important; border-radius: 8px; height: 50px !important; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 48px; padding-left: 1rem; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; right: 8px; }
.woocommerce .select2-dropdown { border-color: var(--line); }
.woocommerce .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--gold); }

/* =========================================================================
   MINI-CART (the slide-in drawer) — global, since the drawer is in the footer.
   ========================================================================= */
/* padding lives on .widget_shopping_cart_content (not .drawer__items): WooCommerce's
   cart fragment replaces the div and drops the drawer__items class, so its padding
   would be lost after any AJAX add-to-cart. */
.widget_shopping_cart_content { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 1rem 1.8rem; }
.widget_shopping_cart_content > ul.cart_list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.widget_shopping_cart_content .woocommerce-mini-cart-item {
	position: relative; padding: 1.1rem 1.8rem 1.1rem 0; border-bottom: 1px solid var(--line-soft); overflow: hidden;
}
.widget_shopping_cart_content .woocommerce-mini-cart-item img {
	width: 58px !important; height: 58px; object-fit: cover; float: left; margin: 0 1rem 0 0 !important; border: 1px solid var(--line-soft);
}
.widget_shopping_cart_content .woocommerce-mini-cart-item a:not(.remove) { font-family: var(--f-display); font-size: .98rem; color: var(--ink); display: inline; }
.widget_shopping_cart_content .woocommerce-mini-cart-item .quantity { display: block; color: var(--gold); font-size: .85rem; margin-top: .25rem; }
.widget_shopping_cart_content a.remove {
	position: absolute; top: 1.1rem; right: 0; width: 22px; height: 22px; display: grid; place-items: center;
	color: var(--ink-faint); font-size: 1.1rem; line-height: 1; border-radius: 50%; text-decoration: none;
}
.widget_shopping_cart_content a.remove:hover { color: var(--gold); }
.widget_shopping_cart_content .woocommerce-mini-cart__empty-message { color: var(--ink-faint); padding: 2rem 0; text-align: center; }
.widget_shopping_cart_content .woocommerce-mini-cart__total {
	display: flex; justify-content: space-between; align-items: baseline; padding: 1.1rem 0; margin-top: .4rem;
	border-top: 1px solid var(--line); font-size: 1rem;
}
.widget_shopping_cart_content .woocommerce-mini-cart__total strong { font-weight: 400; }
.widget_shopping_cart_content .woocommerce-mini-cart__total .amount, .widget_shopping_cart_content .woocommerce-mini-cart__total .woocommerce-Price-amount { font-family: var(--f-display); font-size: 1.25rem; color: var(--gold); }
.widget_shopping_cart_content .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: .7rem; margin: .4rem 0 0; padding: 1.1rem 0 .4rem; border-top: 1px solid var(--line-soft); }
/* View Cart = outline, Checkout = solid gold. Explicit styling — NOT via
   ".woocommerce a.button", which only matches on WooCommerce pages and flattened
   both buttons to the same look in the (footer-level) cart drawer. */
.widget_shopping_cart_content .woocommerce-mini-cart__buttons .button {
	display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box;
	margin: 0; padding: 1rem 1.4rem; border: 1px solid var(--gold); border-radius: 0;
	background: transparent; color: var(--gold);
	font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.widget_shopping_cart_content .woocommerce-mini-cart__buttons .button:hover { background: var(--gold); color: #fff; }
.widget_shopping_cart_content .woocommerce-mini-cart__buttons .button.checkout { background: var(--gold); color: #fff; border-color: var(--gold); }
.widget_shopping_cart_content .woocommerce-mini-cart__buttons .button.checkout:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }