/*
	Theme Name: Scentury
	Theme URI: https://mediamines.ca
	Description: Custom child theme of Hello Elementor for Scentury, with hand-coded WooCommerce template overrides matching the approved Scentury design system.
	Author: Media Mines LLC
	Author URI: https://mediamines.ca
	Template: hello-elementor
	Version: 1.0.0
	Text Domain: hello-elementor-child
*/

/* ==========================================================================
   1. Local fonts (self-hosted, no external requests)
   Variable fonts — one file covers the full weight range used in the design.
   ========================================================================== */
@font-face {
	font-family: 'Big Shoulders Display';
	font-style: normal;
	font-weight: 500 900;
	font-display: swap;
	src: url('assets/fonts/big-shoulders-display.woff2') format('woff2');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/manrope.woff2') format('woff2');
}

/* ==========================================================================
   2. Design tokens — exact values from the approved Scentury design
   (Cart.dc.html / Checkout.dc.html / Header.dc.html)
   ========================================================================== */
:root {
	--hc-navy: #1B2353;
	--hc-cyan: #00F0FF;
	--hc-cream: #f6f4ef;
	--hc-bg-alt: #f3f2ee;
	--hc-bg-alt-2: #e9e7df;
	--hc-white: #ffffff;
	--hc-error: #e0455f;
	--hc-success: #16a34a;

	--hc-navy-40: rgba(27, 35, 83, 0.4);
	--hc-navy-45: rgba(27, 35, 83, 0.45);
	--hc-navy-50: rgba(27, 35, 83, 0.5);
	--hc-navy-55: rgba(27, 35, 83, 0.55);
	--hc-navy-60: rgba(27, 35, 83, 0.6);
	--hc-navy-65: rgba(27, 35, 83, 0.65);
	--hc-navy-68: rgba(27, 35, 83, 0.68);
	--hc-navy-08: rgba(27, 35, 83, 0.08);
	--hc-navy-10: rgba(27, 35, 83, 0.1);
	--hc-navy-12: rgba(27, 35, 83, 0.12);
	--hc-navy-15: rgba(27, 35, 83, 0.15);
	--hc-navy-30: rgba(27, 35, 83, 0.3);
	--hc-cyan-10: rgba(0, 240, 255, 0.1);
	--hc-cyan-30: rgba(0, 240, 255, 0.3);
	--hc-cyan-35: rgba(0, 240, 255, 0.35);

	--hc-font-display: 'Big Shoulders Display', sans-serif;
	--hc-font-body: 'Manrope', sans-serif;

	/*
		Height of the primary add-to-cart control, and of the quantity stepper
		sitting beside it. Derived from the design's button: 18px padding top
		and bottom around a 16px label (Product.dc.html) = 56px. Shared so the
		two controls can never drift apart.
	*/
	--hc-atc-height: 56px;

	--hc-radius-pill: 999px;
	--hc-radius-card: 16px;
	--hc-radius-card-lg: 20px;
	--hc-radius-input: 10px;
	--hc-radius-input-lg: 12px;

	--hc-space-xs: 8px;
	--hc-space-sm: 16px;
	--hc-space-md: 24px;
	--hc-space-lg: 40px;
	--hc-space-xl: 64px;

	--hc-content-width: 1280px;
	--hc-checkout-width: 1100px;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

/*
	Hello Elementor narrows `.site-main` on every page it did not build itself
	— 1140px on desktop, and as little as 500px below 768px — plus a 10px
	inline padding:

		body:not([class*=elementor-page-]) .site-main { max-width: 1140px }

	Our WooCommerce templates set their own widths, and the shop hero is
	full-bleed by design, so that has to go here. Equal specificity to the
	parent rule (0,2,1); this stylesheet is enqueued with the parent's handles
	as dependencies, so it prints afterwards and wins.
*/
body.woocommerce-page .site-main,
body.hc-track-order-page .site-main {
	max-width: none;
	padding-inline: 0;
}

.hc-woocommerce-wrap {
	font-family: var(--hc-font-body);
	background: var(--hc-white);
}

.hc-woocommerce-wrap * {
	box-sizing: border-box;
}

.hc-woocommerce-wrap a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

/*
	Headings inside this theme's markup — the single biggest source of
	"our CSS is losing".

	Elementor's global kit stylesheet sets every heading element site-wide:

	    .elementor-kit-7 h1 { font-family:"Big Shoulders Display";
	                          font-size:64px; font-weight:800;
	                          text-transform:uppercase }
	    .elementor-kit-7 h2 { … font-size:52px … }   (and h3–h6, plus
	                                                  breakpoint overrides)

	Two things make that beat almost every heading rule in this theme:

	  1. It is (0,1,1) — a class plus an element — while our headings are
	     written as a single class, (0,1,0). Class-only rules lose outright.
	  2. uploads/elementor/css/post-7.css is enqueued *after* this stylesheet
	     (position 14 vs 7-11 on the cart page), so even an exact tie would
	     lose on source order. Ours has to be strictly higher, not equal.

	This rule gives every heading in our markup a floor to stand on: the body
	font and normal casing, at (0,2,1), which clears Elementor's (0,1,1).
	Component rules below then only need to reach (0,2,1) themselves — written
	as `.hc-woocommerce-wrap h2.hc-summary__title` — and being later in the
	cascade they win the tie.

	A blanket `font: inherit` or `revert` was the obvious shortcut and is
	wrong: both are author-origin like Elementor's, so they would also wipe
	out this theme's own heading rules and leave browser defaults.

	Scoped to .hc-woocommerce-wrap and .hc-cart-drawer so Elementor-built
	pages (Home, About, Journal) keep their kit typography untouched.
*/
[class*="elementor-kit-"] .hc-woocommerce-wrap :is(h1, h2, h3, h4, h5, h6),
[class*="elementor-kit-"] .hc-cart-drawer :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--hc-font-body);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

@keyframes hc-fade-up {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes hc-pop-in {
	from {
		opacity: 0;
		transform: scale(0.94);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Thin, theme-colored scrollbar for any custom-scrolling panel (dropdowns, drawer). */
.hc-thin-scroll {
	scrollbar-width: thin;
	scrollbar-color: var(--hc-navy-15) transparent;
}

.hc-thin-scroll::-webkit-scrollbar {
	width: 6px;
}

.hc-thin-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.hc-thin-scroll::-webkit-scrollbar-thumb {
	background-color: var(--hc-navy-15);
	border-radius: 999px;
}

.hc-thin-scroll::-webkit-scrollbar-thumb:hover {
	background-color: var(--hc-navy-30);
}

/* ==========================================================================
   4. Common classes shared across 2+ WooCommerce page types
   Page-unique classes belong in assets/css/pages/{page}.css instead.
   ========================================================================== */

/*
	Hello Elementor's theme.css underlines links inside the post content
	area (`.page-content a { text-decoration: underline }`). The design
	has no underlined links inside the WooCommerce pages except a couple
	of explicit ones, so reset it here — scoped through .page-content too,
	so this wins on specificity regardless of stylesheet load order.
*/
.page-content .hc-woocommerce-wrap a,
.hc-woocommerce-wrap a,
.hc-cart-drawer a {
	text-decoration: none;
}

/* Links the design does show underlined, opting back in after that reset. */
.page-content .hc-woocommerce-wrap a.hc-line-item__remove,
.page-content .hc-woocommerce-wrap a.hc-coupon-applied__remove,
.hc-woocommerce-wrap a.hc-line-item__remove,
.hc-woocommerce-wrap a.hc-coupon-applied__remove,
.hc-cart-drawer a.hc-line-item__remove,
.hc-cart-drawer a.hc-cart-drawer__view-cart {
	text-decoration: underline;
}

/* Breadcrumb — shop, single product, cart, checkout */
.hc-breadcrumb {
	display: flex;
	gap: var(--hc-space-xs);
	align-items: center;
	color: var(--hc-navy-45);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: var(--hc-space-sm);
}

/*
	The trail's own colour sits on the wrapper, but each step is a link, and
	the kit's `.elementor-kit-7 a` (0,2,0) paints those directly — inheritance
	never reaches a child that has a colour of its own. Doubling the class
	clears the kit without naming it, since its number changes if it is rebuilt.
*/
.hc-breadcrumb.hc-breadcrumb a {
	color: inherit;
}

.hc-breadcrumb.hc-breadcrumb a:hover,
.hc-breadcrumb.hc-breadcrumb a:focus-visible {
	color: var(--hc-navy);
}

.hc-breadcrumb .hc-breadcrumb__current {
	color: var(--hc-navy);
}

/* Page title — cart, checkout, shop, single product */
.hc-woocommerce-wrap h1.hc-page-title,
.hc-page-title {
	font-family: var(--hc-font-display);
	font-weight: 800;
	font-size: clamp(32px, 4.6vw, 52px);
	color: var(--hc-navy);
	text-transform: uppercase;
	margin: 0 0 32px;
}

/* Smaller sub-section heading variant (e.g. "You Might Also Like") */
.hc-page-title--sub {
	font-size: clamp(24px, 3.2vw, 34px);
	margin-bottom: 24px;
}

/*
	Bare-button reset.

	Hello Elementor's reset.css styles every button in the page as a bordered
	pink control:

	    [type=button],[type=submit],button {
	        background-color:transparent; border:1px solid #c36;
	        color:#c36; border-radius:3px; padding:.5rem 1rem;
	    }
	    button:focus, button:hover { background-color:#c36; color:#fff }

	#c36 is #cc3366 — the crimson that appeared behind the review star picker,
	on the quantity stepper and on the active Description tab. Because those
	selectors are bare element selectors carrying a :hover/:focus pseudo-class
	((0,1,1)), any component rule written as a single class ((0,1,0)) loses to
	them on hover no matter how specific it looks.

	Every custom control in this theme is styled from scratch, so the reset is
	neutralised once here rather than fought component by component. Anything
	that wants a background sets its own afterwards; `:where()` keeps this at
	zero specificity so it never competes with the component that follows.
	Buttons Elementor and WooCommerce own are excluded — those are styled by
	their own plugins and must keep their appearance.
*/
button:where(:not(.elementor-button)):where(:not(.wp-block-button__link)),
[type="button"]:where(:not(.elementor-button)),
[type="submit"]:where(:not(.elementor-button)) {
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	text-align: inherit;
	white-space: normal;
}

/*
	The hover/focus half of the same reset.

	The specificity here is deliberate and narrow. The rule has to clear
	`button:hover { background-color:#c36 }` from reset.css, which is (0,1,1),
	while staying *below* the component rules that give individual controls
	their own hover — .hc-review-form__star:hover is (0,2,0), and the ATC button
	is (0,3,1). That leaves exactly one target: (0,1,1).

	  button:not(.elementor-button):hover  -> (0,2,1)  too strong, would kill
	                                                    the star's hover scale
	  :where(button…):hover                -> (0,0,1)  too weak, pink survives
	  button:where(:not(…)):hover          -> (0,1,1)  ties reset.css, and wins
	                                                    on load order

	So the exclusions go inside :where() (contributing nothing) while the
	element and the pseudo-class stay outside it.
*/
button:where(:not(.elementor-button)):where(:not(.wp-block-button__link)):hover,
button:where(:not(.elementor-button)):where(:not(.wp-block-button__link)):focus,
[type="button"]:where(:not(.elementor-button)):hover,
[type="button"]:where(:not(.elementor-button)):focus,
[type="submit"]:where(:not(.elementor-button)):hover,
[type="submit"]:where(:not(.elementor-button)):focus {
	background-color: transparent;
	color: inherit;
}

/*
	Pill buttons — used on shop, single product, cart, checkout, my-account.
	Selectors are written as a.hc-btn / button.hc-btn rather than plain
	.hc-btn: Hello Elementor's theme.css sets `a { text-decoration: underline }`
	on bare element selectors, which would otherwise win over a single
	class and underline every button link.
*/
a.hc-btn,
button.hc-btn,
.hc-btn {
	display: block;
	text-align: center;
	border: none;
	border-radius: var(--hc-radius-pill);
	font-family: var(--hc-font-body);
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease;
}

.page-content a.hc-btn,
.page-content a.hc-btn:hover,
.page-content a.hc-btn:focus,
a.hc-btn:hover,
a.hc-btn:focus,
button.hc-btn:hover,
button.hc-btn:focus {
	text-decoration: none;
}

/*
	`.elementor-kit-7 a` (0,1,1) sets every link navy and loads after this
	stylesheet, tying `a.hc-btn--navy` (0,1,1) on specificity and winning on
	load order — which made the white label invisible against this button's
	own navy background. Repeating the class breaks the tie in our favour
	regardless of enqueue order.
*/
a.hc-btn--navy,
button.hc-btn--navy,
.hc-btn--navy,
a.hc-btn--navy.hc-btn--navy {
	background: var(--hc-navy);
	color: var(--hc-white);
	padding: 16px;
}

a.hc-btn--navy:hover,
a.hc-btn--navy:focus,
button.hc-btn--navy:hover,
.hc-btn--navy:hover,
a.hc-btn--navy.hc-btn--navy:hover,
a.hc-btn--navy.hc-btn--navy:focus {
	background: var(--hc-cyan);
	color: var(--hc-navy);
}

/*
	Doubled class (a.hc-btn--cyan.hc-btn--cyan) for the same reason
	a.hc-btn--navy needed it above: `color` here has to beat
	`.elementor-kit-7 a` (0,1,1), and a single a.hc-btn--cyan only ties that
	on specificity — load order alone isn't something to rely on winning.
*/
a.hc-btn--cyan,
button.hc-btn--cyan,
.hc-btn--cyan,
a.hc-btn--cyan.hc-btn--cyan {
	background: var(--hc-cyan);
	color: var(--hc-navy);
	padding: 15px;
}

/*
	The hover needs doubling too, not just the resting state above: the kit's
	`.elementor-kit-7 a:hover` scores (0,2,1), which a single a.hc-btn--cyan:hover
	only ties — and the kit's stylesheet loads later, so a tie went to it. That
	left the button's text turning cyan on cyan on hover.
*/
a.hc-btn--cyan:hover,
a.hc-btn--cyan:focus,
button.hc-btn--cyan:hover,
.hc-btn--cyan:hover,
a.hc-btn--cyan.hc-btn--cyan:hover,
a.hc-btn--cyan.hc-btn--cyan:focus {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px var(--hc-cyan-35);
	background: var(--hc-cyan);
	color: var(--hc-navy);
}

/* Inline (non-full-width) variant of .hc-btn, e.g. empty-state CTAs */
a.hc-btn--inline,
button.hc-btn--inline,
.hc-btn--inline {
	display: inline-block;
	padding: 14px 30px;
}

/*
	Outlined/transparent variant — Cancel (form-edit-address.php), Back To
	Log In (page-auth.php). Same doubled-class guard as --navy/--cyan above:
	`border-color` and `color` both need to beat `.elementor-kit-7 a` (0,1,1).
*/
a.hc-btn--ghost,
button.hc-btn--ghost,
.hc-btn--ghost,
a.hc-btn--ghost.hc-btn--ghost {
	background: transparent;
	color: var(--hc-navy);
	border: 1.5px solid var(--hc-navy-15);
	padding: 12px 26px;
}

a.hc-btn--ghost:hover,
a.hc-btn--ghost:focus,
button.hc-btn--ghost:hover,
.hc-btn--ghost:hover,
a.hc-btn--ghost.hc-btn--ghost:hover {
	border-color: var(--hc-navy-30);
	background: var(--hc-navy-08);
}

/*
	Order status pill — see hello_child_order_status_pill() in
	inc/woocommerce.php. Shared by My Account's order rows
	(assets/css/pages/my-account.css) and the Track Order result card
	(assets/css/pages/track-order.css).
*/
.hc-status-pill {
	padding: 6px 14px;
	border-radius: var(--hc-radius-pill);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.hc-status-pill--default {
	background: var(--hc-navy-08);
	color: var(--hc-navy-65);
	border: 1px solid var(--hc-navy-15);
}

.hc-status-pill--transit {
	background: var(--hc-cyan-10);
	color: var(--hc-navy);
	border: 1px solid var(--hc-cyan-30);
}

.hc-status-pill--done {
	background: var(--hc-navy);
	color: var(--hc-white);
	border: 1px solid var(--hc-navy);
}

.hc-status-pill--stopped {
	background: rgba(224, 69, 95, 0.1);
	color: var(--hc-error);
	border: 1px solid rgba(224, 69, 95, 0.3);
}

/*
	Order status timeline — see hello_child_order_tracking_steps() in
	inc/track-order.php. Shared by the Track Order result card
	(assets/css/pages/track-order.css) and My Account's single-order view
	(woocommerce/myaccount/view-order.php, styled in
	assets/css/pages/my-account.css).
*/
.hc-track-steps {
	display: flex;
	margin-bottom: 30px;
}

.hc-track-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
}

.hc-track-step:not(:first-child)::before {
	content: '';
	position: absolute;
	top: 15px;
	right: 50%;
	width: 100%;
	height: 2px;
	background: var(--hc-navy-12);
	z-index: 0;
}

.hc-track-step.is-done:not(:first-child)::before,
.hc-track-step.is-current:not(:first-child)::before {
	background: var(--hc-navy);
}

.hc-track-step__circle {
	position: relative;
	z-index: 1;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	background: var(--hc-white);
	border: 2px solid var(--hc-navy-15);
}

.hc-track-step.is-done .hc-track-step__circle {
	background: var(--hc-navy);
	border-color: var(--hc-navy);
}

.hc-track-step.is-current .hc-track-step__circle {
	background: var(--hc-white);
	border: 3px solid var(--hc-cyan);
}

.hc-track-step__label {
	color: var(--hc-navy-40);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.3;
}

.hc-track-step.is-done .hc-track-step__label,
.hc-track-step.is-current .hc-track-step__label {
	color: var(--hc-navy);
	font-weight: 700;
}

@media (max-width: 480px) {
	.hc-track-step__label {
		font-size: 10.5px;
	}
}

/* Empty state — cart, cart drawer */
.hc-empty-state {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.hc-woocommerce-wrap h2.hc-empty-state__title,
.hc-empty-state__title {
	font-family: var(--hc-font-display);
	font-weight: 700;
	font-size: 26px;
	color: var(--hc-navy);
	text-transform: uppercase;
	margin: 0;
}

.hc-empty-state__text {
	color: var(--hc-navy-60);
	font-size: 15px;
	max-width: 340px;
	margin: 0;
	line-height: 1.6;
}

/* Order summary box — cart, checkout */
.hc-summary {
	background: var(--hc-cream);
	border-radius: var(--hc-radius-card-lg);
	padding: 28px;
}

.hc-woocommerce-wrap h2.hc-summary__title,
.hc-summary__title {
	font-family: var(--hc-font-display);
	font-weight: 700;
	font-size: 20px;
	color: var(--hc-navy);
	text-transform: uppercase;
	margin: 0 0 20px;
}

.hc-summary__row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 16px;
	color: var(--hc-navy-65);
	font-size: 14.5px;
}

.hc-summary__row-value {
	color: var(--hc-navy);
	font-weight: 700;
}

.hc-summary__row-value--success {
	color: var(--hc-success);
}

.hc-summary__row-value--cyan {
	color: var(--hc-cyan);
}

.hc-summary__total {
	border-top: 1px solid var(--hc-navy-12);
	padding-top: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hc-summary__total-label {
	color: var(--hc-navy);
	font-weight: 700;
	font-size: 15px;
}

.hc-summary__total-value {
	font-family: var(--hc-font-display);
	font-weight: 800;
	font-size: 26px;
	color: var(--hc-navy);
}

/* Coupon box — cart, checkout */
.hc-coupon-form {
	display: flex;
	gap: var(--hc-space-xs);
}

.hc-coupon-form input {
	flex: 1;
	min-width: 0;
	background: var(--hc-white);
	border: 1.5px solid var(--hc-navy-15);
	border-radius: var(--hc-radius-input);
	padding: 11px 14px;
	font-size: 13.5px;
	font-family: var(--hc-font-body);
	color: var(--hc-navy);
	outline: none;
	transition: all 0.2s ease;
}

.hc-coupon-form input:focus {
	border-color: var(--hc-cyan);
}

.hc-coupon-form button {
	background: var(--hc-navy);
	color: var(--hc-white);
	border: none;
	border-radius: var(--hc-radius-input);
	padding: 0 18px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s ease;
}

.hc-coupon-form button:hover {
	background: var(--hc-cyan);
	color: var(--hc-navy);
}

/* Secondary "Update Cart" button — cart page actions row */
.hc-update-cart-btn {
	background: var(--hc-navy);
	color: var(--hc-white);
	border: none;
	border-radius: var(--hc-radius-input);
	padding: 11px 22px;
	font-weight: 700;
	font-size: 13px;
	font-family: var(--hc-font-body);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.hc-update-cart-btn:hover {
	background: var(--hc-cyan);
	color: var(--hc-navy);
}

.hc-coupon-applied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--hc-cyan-10);
	border: 1px solid var(--hc-cyan-35);
	border-radius: var(--hc-radius-input);
	padding: 10px 14px;
}

.hc-coupon-applied__label {
	display: flex;
	align-items: center;
	gap: var(--hc-space-xs);
	color: var(--hc-navy);
	font-weight: 700;
	font-size: 13px;
}

.hc-coupon-applied__remove {
	background: none;
	border: none;
	color: var(--hc-navy-50);
	cursor: pointer;
	font-size: 12px;
	font-weight: 700;
	text-decoration: underline;
}

.hc-coupon-error {
	color: var(--hc-error);
	font-size: 12.5px;
	margin-top: 6px;
	font-weight: 600;
}

/* Free shipping progress notice — cart, checkout, cart drawer */
.hc-shipping-note {
	background: var(--hc-cyan-10);
	border: 1px solid var(--hc-cyan-30);
	border-radius: 8px;
	padding: 8px 12px;
	color: var(--hc-navy);
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: var(--hc-space-sm);
}

.hc-shipping-free-note {
	color: var(--hc-success);
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: var(--hc-space-sm);
}

/* Cart line item — cart page, cart drawer, checkout summary */
.hc-line-item__name {
	font-family: var(--hc-font-display);
	font-weight: 700;
	color: var(--hc-navy);
	text-transform: uppercase;
}

/*
	The name is usually a link to the product, and a link carries its own
	colour — so the kit's `.elementor-kit-7 a` wins over anything set on this
	wrapper, !important included: that keyword raises a declaration against
	others on the same element, not against a child's own rule. The link has
	to be addressed directly, at a weight above the kit's two classes.
*/
.hc-line-item__name.hc-line-item__name a {
	color: var(--hc-navy);
}

.hc-line-item__meta {
	color: var(--hc-navy-50);
}

.hc-line-item__total {
	font-family: var(--hc-font-display);
	font-weight: 700;
	color: var(--hc-navy);
}

/*
	Remove link — cart page, cart drawer.

	The markup carries WooCommerce's own `remove` class (its cart.js binds the
	AJAX removal to `.product-remove > a` and `a.remove`, so the class has to
	stay), which brings this with it:

	    .woocommerce a.remove {
	        display:block; font-size:1.5em; height:1em; width:1em;
	        border-radius:100%; color:var(--wc-red)!important;
	    }
	    .woocommerce a.remove:hover { color:#fff!important; background:var(--wc-red) }

	That is what rendered "Remove" as oversized red text: the rule is styling a
	round icon button holding a "×", not a text link. The design has a small
	underlined link in navy at 40% that only turns red on hover.

	Two different problems, handled differently:
	  - font-size, display, width/height and radius carry no !important, so a
	    rule at matching specificity wins on load order alone.
	  - colour is !important, and nothing without !important can beat that at
	    any specificity. It is the one place in this stylesheet where matching
	    the flag is the only option.
*/
.woocommerce a.hc-line-item__remove,
.hc-line-item__remove {
	display: inline;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	border: none;
	color: var(--hc-navy-40) !important;
	font-size: 12.5px;
	font-weight: 700;
	line-height: inherit;
	text-align: inherit;
	text-decoration: underline;
	cursor: pointer;
	transition: color 0.2s ease;
}

.woocommerce a.hc-line-item__remove:hover,
.woocommerce a.hc-line-item__remove:focus,
.hc-line-item__remove:hover,
.hc-line-item__remove:focus {
	background: none;
	color: var(--hc-error) !important;
}

/*
	Quantity stepper — cart page.

	Only the cart page renders this today (the drawer has its own markup), but
	the pill and its buttons stay in the shared stylesheet while the
	page-specific parts — flattening WooCommerce's inner .quantity wrapper,
	and out-specifying its width rule on the input — live in cart.css. Any
	other page that needs a stepper then inherits a correct one instead of
	re-deriving it.

	`inline-flex` with `width:auto`, not `flex`: as a block-level flex box this
	stretched to whatever column held it, which left the − and + stranded at
	the far edges of an over-wide pill. Sized to its contents, the pill hugs
	the three parts the way the design draws it.

	The buttons are injected by assets/js/pages/cart.js as
	`.hc-qty-stepper__btn`, and are matched by class as well as element so the
	rule holds regardless of which the script emits. flex-shrink:0 on all
	three children keeps them from collapsing when the row is tight.
*/
.hc-qty-stepper {
	display: inline-flex;
	align-items: center;
	width: auto;
	flex-shrink: 0;
	border: 1.5px solid var(--hc-navy-15);
	border-radius: var(--hc-radius-pill);
	overflow: hidden;
}

.hc-qty-stepper .hc-qty-stepper__btn,
.hc-qty-stepper button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	padding: 0;
	background: none;
	background-color: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--hc-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	color: var(--hc-navy);
	cursor: pointer;
	transition: color 0.2s ease;
}

.hc-qty-stepper .hc-qty-stepper__btn:hover,
.hc-qty-stepper .hc-qty-stepper__btn:focus,
.hc-qty-stepper button:hover,
.hc-qty-stepper button:focus {
	background: none;
	background-color: transparent;
	color: var(--hc-cyan);
}

.hc-qty-stepper span,
.hc-qty-stepper input {
	width: 28px;
	flex-shrink: 0;
	text-align: center;
	font-weight: 700;
	color: var(--hc-navy);
	font-size: 14px;
	line-height: 1;
	border: none;
	background: none;
}

/* Form fields — checkout, my-account */
.hc-field {
	margin-bottom: var(--hc-space-sm);
}

.hc-field label {
	display: block;
	color: var(--hc-navy-50);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.hc-field input,
.hc-field select,
.hc-field textarea {
	width: 100%;
	background: var(--hc-cream);
	border: 1.5px solid transparent;
	border-radius: var(--hc-radius-input-lg);
	padding: 13px 16px;
	font-size: 14px;
	font-family: var(--hc-font-body);
	color: var(--hc-navy);
	outline: none;
	transition: all 0.2s ease;
}

.hc-field textarea {
	resize: vertical;
}

.hc-field input:focus,
.hc-field select:focus,
.hc-field textarea:focus {
	border-color: var(--hc-cyan);
	background: var(--hc-white);
	box-shadow: 0 0 0 4px var(--hc-cyan-10);
}

/* ==========================================================================
   Custom select combobox — checkout (city / province) and shop (sorting)

   The native <select> stays in the DOM, hidden, and remains the source of
   truth: the visible control writes to it and fires a real change event, so
   WooCommerce's own validation and AJAX behave exactly as they would without
   this layer. Built by assets/js/pages/checkout.js and shop.js.
   ========================================================================== */
.hc-select-wrap {
	position: relative;
}

.hc-select-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--hc-cream);
	border: 1.5px solid transparent;
	border-radius: var(--hc-radius-input-lg);
	padding: 13px 16px;
	font-size: 14px;
	font-family: var(--hc-font-body);
	color: var(--hc-navy);
	cursor: pointer;
	text-align: left;
	transition: all 0.2s ease;
}

/*
	WooCommerce Blocks ships its own generic `button:hover { color: #fff }`
	(wc-blocks.css, loaded because block-based checkout/cart are available even
	though we don't use them). A bare tag selector is lower specificity than
	.hc-select-toggle:hover, but neither this rule nor the panel/value rules
	below set color at all, so that rule wins by default with nothing to
	compete against. Setting color explicitly everywhere a WooCommerce Blocks
	pseudo-state could otherwise reach closes that off for good.
*/
.hc-select-toggle:hover {
	background: #f0eee6;
	color: var(--hc-navy);
}

.hc-select-wrap.is-open .hc-select-toggle {
	background: var(--hc-white);
	border-color: var(--hc-cyan);
	box-shadow: 0 0 0 4px var(--hc-cyan-10);
	color: var(--hc-navy);
}

.hc-select-toggle__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--hc-navy);
}

.hc-select-toggle__chevron {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.hc-select-wrap.is-open .hc-select-toggle__chevron {
	transform: rotate(180deg);
	color: var(--hc-navy);
}

.hc-select-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--hc-white);
	border-radius: 14px;
	box-shadow: 0 20px 44px rgba(27, 35, 83, 0.18);
	border: 1px solid var(--hc-navy-08);
	padding: 8px;
	z-index: 40;
	max-height: 260px;
	overflow-y: auto;
	animation: hc-pop-in 0.15s ease both;
}

.hc-select-wrap:not(.is-open) .hc-select-panel {
	display: none;
}

.hc-select-option {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: none;
	border: none;
	border-radius: 9px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: var(--hc-font-body);
	color: var(--hc-navy);
	cursor: pointer;
	text-align: left;
	transition: background 0.15s ease;
}

.hc-select-option:hover,
.hc-select-option:focus-visible {
	background: var(--hc-cream);
	color: var(--hc-navy);
	outline: none;
}

.hc-select-option.is-selected {
	color: var(--hc-navy);
	font-weight: 600;
}

.hc-select-option__check {
	color: var(--hc-cyan);
	flex-shrink: 0;
}

/* The native control is replaced by the button above once JS runs. */
.hc-select-wrap.is-enhanced .hc-native-select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
	Visually hidden, still reachable by screen readers and still submitted with
	its form. Used where a native control is replaced by a custom one that
	writes back into it — the review rating select behind the star picker, for
	one. Kept here rather than in a page stylesheet because a control hidden
	only on the page whose CSS happens to be loaded is a control that shows up
	everywhere else.
*/
.hc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
	Trust badges row (Cash On Delivery, 15 Day Returns, etc.), one line with a
	dot between each — shared by hello_child_render_trust_badges_row()
	(inc/theme-options.php) wherever it's called: the cart page summary, the
	cart drawer footer, and the checkout place-order button. Kept here rather
	than in one page's stylesheet so all three stay visually identical and a
	future fourth placement gets it for free. Page-specific spacing (margin,
	border) is added via the extra class each call site passes in.
*/
.hc-trust-badges-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	color: var(--hc-navy-55);
	font-size: 12.5px;
	font-weight: 600;
}

.hc-trust-badges-row > span {
	white-space: nowrap;
}

.hc-trust-badges-row__dot {
	opacity: 0.4;
}