/**
 * WooCommerce-native markup, restyled to the Chroma Aromatics system.
 *
 * The static site rendered its own cart and account markup. Inside WordPress
 * those screens are generated by WooCommerce, so this file maps the design
 * tokens in style.css onto Woo's real class names: cart, checkout, my-account,
 * notices, buttons and the add-to-cart form.
 */

/* -------------------------------------------------------------------------
 * Buttons — make every Woo button read as .btn
 * ---------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-form-login button,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1;
	padding: 15px 28px;
	border: 1px solid var(--ink);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: background .35s ease, color .35s ease, border-color .35s ease;
	text-decoration: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover {
	background: var(--ink);
	color: var(--white);
	border-color: var(--ink);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.single_add_to_cart_button,
.woocommerce .checkout-button,
.wc-block-components-checkout-place-order-button {
	background: var(--ink);
	color: var(--white);
	border-color: var(--ink);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--dusk);
	border-color: var(--dusk);
	color: var(--white);
}

.woocommerce .button.disabled,
.woocommerce .button:disabled,
.woocommerce button.button:disabled[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

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

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.6;
	list-style: none;
	background: var(--paper-alt);
	border: 1px solid var(--line);
	border-left: 3px solid var(--dawn);
	border-radius: 2px;
	color: var(--ink);
	padding: 16px 20px;
	margin: 0 0 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.woocommerce-error {
	border-left-color: #a8342b;
}

/* WooCommerce prefixes every notice with a ::before glyph from its own icon
   font. That font is not loading here, so each notice rendered with a
   missing-glyph box in front of the text ("▯Returning customer?"). This design
   signals notice type with the left border colour instead, so the glyph is
   redundant either way. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before {
	display: none;
	content: none;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
	padding: 11px 22px;
	font-size: 11px;
}

.woocommerce-error li {
	list-style: none;
}

/* -------------------------------------------------------------------------
 * Add-to-cart form on the PDP
 * ---------------------------------------------------------------------- */
.pdp-info form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
}

.pdp-info form.cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--line);
	border-radius: 0;
	overflow: hidden;
}

.woocommerce .quantity input.qty {
	width: 74px;
	height: 52px;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--sans);
	font-size: 15px;
	color: var(--ink);
	-moz-appearance: textfield;
}

.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
	opacity: .4;
}

.pdp-info .stock.in-stock {
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dawn);
	margin: 0 0 18px;
}

.pdp-info .stock.out-of-stock {
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 18px;
}

.pdp-info .price {
	font-family: var(--display);
	font-size: 30px;
	color: var(--ink);
}

.pdp-info .price del {
	color: var(--muted);
	margin-right: 10px;
}

/* -------------------------------------------------------------------------
 * Cart
 * ---------------------------------------------------------------------- */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	margin: 0 0 40px;
	font-family: var(--sans);
	font-size: 15px;
	color: var(--ink);
}

.woocommerce table.shop_table th {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: left;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--line);
}

.woocommerce table.shop_table td {
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}

.woocommerce table.shop_table td.product-thumbnail img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 2px;
	display: block;
}

.woocommerce table.shop_table td.product-name a {
	font-family: var(--display);
	font-size: 19px;
	color: var(--ink);
	text-decoration: none;
}

.woocommerce table.shop_table td.product-name a:hover {
	color: var(--dawn);
}

.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	color: var(--muted);
	text-decoration: none;
	transition: color .25s ease, background .25s ease;
}

.woocommerce a.remove:hover {
	background: var(--paper-alt);
	color: var(--ink);
}

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

.woocommerce-cart .cart_totals h2 {
	font-family: var(--display);
	font-size: 24px;
	margin: 0 0 18px;
}

.woocommerce-cart .cart_totals table.shop_table {
	margin-bottom: 24px;
}

.woocommerce-cart .cart_totals table.shop_table th {
	border-bottom: 1px solid var(--line);
	padding: 18px 0;
}

.woocommerce-cart .wc-proceed-to-checkout {
	display: flex;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	width: 100%;
}

.woocommerce .coupon {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

/* -------------------------------------------------------------------------
 * Forms — checkout, login, register, contact
 * ---------------------------------------------------------------------- */
.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	margin: 0 0 18px;
	padding: 0;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 8px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.wc-block-components-text-input input {
	width: 100%;
	font-family: var(--sans);
	font-size: 15px;
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 2px;
	padding: 14px 16px;
	transition: border-color .25s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--ink);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: #a8342b;
}

.woocommerce .select2-container .select2-selection--single {
	height: auto;
	display: flex;
	align-items: center;
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	font-family: var(--display);
	font-size: 24px;
	margin: 0 0 20px;
	padding-top: 8px;
}

.woocommerce-checkout #customer_details {
	margin-bottom: 40px;
}

.woocommerce-checkout #payment {
	background: var(--paper-alt);
	border: 1px solid var(--line);
	border-radius: 2px;
	padding: 24px;
}

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

.woocommerce-checkout #payment ul.payment_methods li {
	font-family: var(--sans);
	font-size: 15px;
	margin-bottom: 10px;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--white);
	border-radius: 2px;
	font-size: 14px;
	color: var(--ink-soft);
	padding: 14px 16px;
	margin-top: 10px;
}

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

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	font-size: 13px;
	color: var(--ink-soft);
	margin-bottom: 18px;
}

/* -------------------------------------------------------------------------
 * Checkout layout
 *
 * Two columns on desktop: the form on the left, the order summary sticky on the
 * right. Previously everything stacked full-width, so the page ran to ~2800px
 * and the customer scrolled past an empty right-hand column to reach payment.
 *
 * An earlier attempt put `display:grid` on `.col2-set` itself and broke, because
 * the Elementor wrapper added an extra child to the grid. The page no longer
 * runs through Elementor (see template-checkout.php), and the grid here is on
 * `form.checkout` rather than on Woo's own float columns, so the two do not
 * fight.
 * ---------------------------------------------------------------------- */
.chroma-checkout .checkout-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.chroma-checkout .checkout-head h1 {
	font-family: var(--display);
	font-size: clamp(30px, 4vw, 46px);
	margin-top: 8px;
}

.chroma-checkout .checkout-head .link {
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 3px;
}

.chroma-checkout .checkout-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	counter-reset: step;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--muted);
}

.chroma-checkout .checkout-steps li {
	counter-increment: step;
	display: flex;
	align-items: center;
	gap: 8px;
}

.chroma-checkout .checkout-steps li::before {
	content: counter(step, decimal-leading-zero);
	font-family: var(--display);
	font-style: italic;
	font-size: 15px;
	letter-spacing: 0;
	color: var(--line);
}

.chroma-checkout .checkout-steps li.done { color: var(--ink-soft); }
.chroma-checkout .checkout-steps li.done::before { color: var(--dawn); }
.chroma-checkout .checkout-steps li.current { color: var(--ink); }
.chroma-checkout .checkout-steps li.current::before { color: var(--dawn); }

/* The page content is only the [woocommerce_checkout] shortcode — no prose
   measure, and no top margin fighting the section padding. */
.chroma-checkout .entry-content { max-width: none; }
.chroma-checkout .entry-content > * + * { margin-top: 0; }

@media (min-width: 1000px) {
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
		grid-template-areas:
			"details review"
			"details payment";
		align-content: start;
		column-gap: 56px;
	}

	.woocommerce-checkout form.checkout #customer_details { grid-area: details; margin-bottom: 0; }
	.woocommerce-checkout form.checkout #order_review_heading { grid-area: review; }
	.woocommerce-checkout form.checkout #order_review {
		grid-area: payment;
		position: sticky;
		top: 104px;
		align-self: start;
	}

	/* Billing and shipping stack inside the left column instead of sitting side
	   by side with a mostly-empty second column. */
	.woocommerce-checkout #customer_details .col2-set,
	.woocommerce-checkout #customer_details .col-1,
	.woocommerce-checkout #customer_details .col-2 {
		width: 100%;
		float: none;
	}

	.woocommerce-checkout #customer_details .col-2 { margin-top: 12px; }

	/* Two fields per row where Woo already marks them as halves. */
	.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout #customer_details .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 18px;
	}

	.woocommerce-checkout #customer_details .form-row-wide,
	.woocommerce-checkout #customer_details .form-row.notes { grid-column: 1 / -1; }
}

.woocommerce-checkout #order_review_heading {
	font-family: var(--display);
	font-size: 22px;
	margin: 0 0 16px;
}

.woocommerce-checkout #order_review {
	border: 1px solid var(--line);
	background: var(--white);
	padding: 26px;
}

.woocommerce-checkout #order_review table.shop_table { margin-bottom: 22px; font-size: 14px; }
.woocommerce-checkout #order_review table.shop_table td { padding: 14px 0; }
.woocommerce-checkout #order_review table.shop_table td.product-name { line-height: 1.4; }
.woocommerce-checkout #order_review .product-total,
.woocommerce-checkout #order_review td:last-child,
.woocommerce-checkout #order_review th:last-child { text-align: right; }

/* Payment box sits inside the summary card, so it should not repeat the card. */
.woocommerce-checkout #order_review #payment {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--line);
	border-radius: 0;
	padding: 20px 0 0;
}

.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.woocommerce-checkout #payment ul.payment_methods li img,
.woocommerce-checkout #payment ul.payment_methods li .payment-methods--logos img {
	max-height: 20px;
	width: auto;
	margin: 0 2px;
	display: inline-block;
	border-radius: 2px;
}

.woocommerce-checkout #payment .payment-methods--logos-count { font-size: 11px; color: var(--muted); }

.woocommerce-checkout #payment .place-order { padding: 4px 0 0; }
.woocommerce-checkout #payment .place-order .button.alt { width: 100%; }

/* Express-checkout wallets: one tidy row above the form rather than a floating
   button and an orphaned "— OR —" rule sitting between two columns. */
.wcpay-express-checkout-wrapper,
.wc-block-components-express-payment {
	max-width: 460px;
	margin: 0 0 8px;
}

.wcpay-express-checkout-wrapper + .woocommerce-checkout .wcpay-express-checkout__separator,
.wcpay-express-checkout__separator {
	max-width: 460px;
	margin: 14px 0 26px;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Login / coupon prompts: quiet single-line strips, not full-width slabs. */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	padding: 12px 0;
	margin: 0;
	font-size: 13.5px;
	color: var(--ink-soft);
}

.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 26px; }

.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .checkout_coupon {
	border: 1px solid var(--line);
	border-radius: 2px;
	background: var(--white);
	padding: 22px;
	margin: 14px 0 26px;
}

.woocommerce-checkout .checkout_coupon .form-row { margin-bottom: 0; }

/* -------------------------------------------------------------------------
 * My account
 * ---------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 100%;
	float: none;
	margin-bottom: 36px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: inline-block;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	text-decoration: none;
	padding: 12px 16px;
	border-bottom: 2px solid transparent;
	transition: color .25s ease, border-color .25s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--ink);
	border-bottom-color: var(--dawn);
}

.woocommerce-account .woocommerce-MyAccount-content {
	width: 100%;
	float: none;
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-soft);
}

.woocommerce-account .woocommerce-MyAccount-content a {
	color: var(--ink);
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	border: 1px solid var(--line);
	border-radius: 2px;
	padding: 28px;
	background: var(--white);
}

@media (min-width: 900px) {
	.woocommerce-account .u-columns.col2-set {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	.woocommerce-account .u-columns .col-1,
	.woocommerce-account .u-columns .col-2 {
		width: 100%;
		float: none;
	}
}

/* -------------------------------------------------------------------------
 * Misc
 * ---------------------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb {
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 24px;
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	gap: 6px;
	justify-content: center;
	margin-top: 40px;
}

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

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	font-family: var(--sans);
	font-size: 13px;
	color: var(--muted);
	padding: 10px 14px;
	border-radius: 0;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--ink);
	color: var(--white);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 9999;
	width: auto;
	height: auto;
	clip: auto;
	background: var(--ink);
	color: var(--white);
	padding: 12px 20px;
	border-radius: 2px;
	font-family: var(--sans);
	font-size: 13px;
}

/* -------------------------------------------------------------------------
 * Override woocommerce-layout.css
 *
 * WooCommerce ships `.woocommerce img, .woocommerce-page img { height: auto }`
 * at specificity (0,1,1). On every shop, cart, checkout and account page that
 * ties or beats several of the theme's own image rules, and it is enqueued
 * after style.css — so it wins on load order and images lose their intended
 * height. The selectors below simply outrank it, so the theme's sizing holds
 * regardless of which stylesheet loads first.
 *
 * Symptom this fixes: the header logo rendering at its full natural size and
 * pushing the header to ~440px tall on any WooCommerce page.
 * ---------------------------------------------------------------------- */
.wordmark .logo-mark {
	height: 52px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	display: block;
}

.card .card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.split .split-panel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shelf3d .shelf-item .tin img,
.pdp .pdp-gallery .main img,
.editorial .ed-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * Restore the cream paper backdrop
 *
 * Elementor's global kit (.elementor-kit-2885) and its per-page CSS
 * (body.elementor-page-XXXX:not(...)) both set a white body background at a
 * specificity the theme's plain `body` selector cannot beat — and they load
 * after style.css. The result was a white page instead of the cream --paper
 * backdrop the whole palette is designed against, which is the single biggest
 * visual difference from the original Vercel build.
 *
 * !important is deliberate here: Elementor regenerates that CSS with its own
 * ids, so there is no stable selector to outrank. The design is cream
 * throughout, so a blanket body rule is safe.
 * ---------------------------------------------------------------------- */
html body {
	background-color: var(--paper) !important;
}

/* -------------------------------------------------------------------------
 * Checkout clean-up: injected chrome and inherited label styling
 * ---------------------------------------------------------------------- */

/* CommerceKit's distraction-free checkout injects an unclassed <div><img></div>
   logo directly after the notices wrapper. The page already carries the site
   header and its wordmark, so this is a duplicate sitting in ~180px of dead
   space above the form. Targeted structurally because the div has no class. */
.chroma-checkout .woocommerce-notices-wrapper + div:not([class]) {
	display: none;
}

/* Checkbox and radio labels are sentence-case controls, not field captions.
   Without this they inherit the 11px uppercase tracked treatment meant for
   field labels, so "Save payment information to my account for future
   purchases." rendered as three lines of spaced-out capitals. */
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce-checkout #payment label,
.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods label,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label,
.woocommerce-checkout #payment .wc-block-components-checkbox__label {
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-soft);
	margin-bottom: 0;
	line-height: 1.5;
}

.woocommerce-checkout #payment ul.payment_methods > li > label {
	font-size: 14px;
	color: var(--ink);
	font-weight: 500;
}

.woocommerce-checkout #payment div.payment_box {
	padding: 14px 16px;
	line-height: 1.5;
}

.woocommerce-checkout #payment div.payment_box p:empty { display: none; }

/* Reduce the run-up to the form: the title block already carries the section's
   breathing room. */
.chroma-checkout + .chroma-checkout,
.chroma-checkout section + section { padding-top: 40px; }