/*
	Product card.
	Loaded sitewide (cards appear on shop, single product, cart and any
	Elementor-built page) — see inc/enqueue.php.

	Exact match source: ProductCard.dc.html
	Every value below was read from that file, not approximated.

	Grid layout (columns, gaps) is deliberately NOT here: it belongs to
	whatever renders the loop, so Elementor's own column controls keep working.
*/

/*
	Clear WooCommerce's float clearfix from every product list.

	woocommerce-general.css still carries the clearfix from its old float
	layout:

	    .woocommerce ul.products::before,
	    .woocommerce ul.products::after { content:" "; display:table }

	That stylesheet is kept deliberately (see inc/woocommerce.php) for star
	ratings, notices and form fields. Harmless while the list floats — but
	every list in this theme is a CSS grid, and a grid container makes a grid
	item out of *every* child box, pseudo-elements included. The ::before takes
	the first cell and pushes every card one column right, leaving an empty
	slot; the ::after claims another at the end.

	This lives here, in the sitewide card stylesheet, rather than being
	repeated per page: shop, related, up-sells, the bundle page's two grids and
	anything Elementor renders all use the same `ul.products` markup, and
	fixing it per-grid meant each new one arrived with the bug (which is how
	the bundle page's "Explore What's Inside" and "More Bundles" shipped
	broken). Grid layout itself stays with whatever renders the loop.
*/
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce .products ul::before,
.woocommerce .products ul::after,
ul.products::before,
ul.products::after {
	content: none;
	display: none;
}

/*
	WooCommerce prints <li class="product ..."> — reset its list styling.

	woocommerce.css carries several tag/class selectors of its own against the
	same loop markup — `ul.products li.product`, `...li.product h3`,
	`...li.product .button`, `...li.product a img` — each more specific (two
	classes plus one or more tags) than a single class here, and immune to
	load order since they belong to the stylesheet we keep for star ratings
	and notices. margin is `!important` in WooCommerce's own rule too, so nothing
	weaker overrides it.
*/
.hc-card {
	position: relative;
	background: var(--hc-white);
	border-radius: 16px;
	border: 1px solid var(--hc-navy-08);
	overflow: hidden;
	font-family: var(--hc-font-body);
	display: flex;
	flex-direction: column;
	height: 100%;
	box-shadow: 0 1px 3px rgba(27, 35, 83, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	list-style: none;
	margin: 0 !important;
	padding: 0;
}

.hc-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 40px rgba(27, 35, 83, 0.16);
}

@media (prefers-reduced-motion: reduce) {
	.hc-card {
		transition: none;
	}

	.hc-card:hover {
		transform: none;
	}
}

.hc-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: var(--hc-cyan);
	color: var(--hc-navy);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: var(--hc-radius-pill);
}

/* The card is one big link down to the footer, which sits outside it. */
.page-content .hc-card__link,
.hc-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: inherit;
	text-decoration: none;
}

.hc-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	background: var(--hc-bg-alt);
}

/* `ul.products li.product a img` (0,2,4) beats a single class; hits margin/box-shadow. */
.hc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0 !important;
	box-shadow: none;
}

.hc-card__body {
	padding: 18px 20px 6px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.hc-card__category {
	color: var(--hc-cyan);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/*
	This is an <h3>, and `.woocommerce ul.products li.product h3` (0,2,2) sets
	font-size:1em, padding and margin — all of which would otherwise beat
	every rule below on specificity alone.
*/
.hc-woocommerce-wrap h3.hc-card__name,
.hc-card__name {
	font-family: var(--hc-font-display);
	font-size: 23px !important;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--hc-navy);
	line-height: 1.1;
	margin: 0 !important;
	padding: 0 !important;
}

.hc-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hc-card__stars {
	display: flex;
	gap: 1px;
}

.hc-card__rating-value {
	font-size: 12px;
	font-weight: 700;
	color: var(--hc-navy);
}

.hc-card__rating-count {
	font-size: 11.5px;
	color: var(--hc-navy-45);
}

/*
	Clamped to two lines with a reserved min-height, so cards in a row keep
	their footers aligned whether the tagline runs one line or two.
*/
.hc-card__tagline {
	font-size: 13.5px;
	color: var(--hc-navy-60);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.9em;
	margin: 0;
}

.hc-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	color: var(--hc-navy-55);
	font-size: 12px;
	font-weight: 700;
}

.hc-card__meta-dot {
	opacity: 0.4;
}

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

.hc-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px 20px;
}

.hc-card__price {
	font-family: var(--hc-font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--hc-navy);
}

/* WooCommerce wraps sale prices in <del>/<ins>. */
.hc-card__price del {
	opacity: 0.45;
	font-size: 0.8em;
	margin-right: 4px;
}

.hc-card__price ins {
	text-decoration: none;
}

/*
	WooCommerce's add-to-cart link, restyled as the design's round button.

	Two of WooCommerce's own rules outrank a plain ".hc-card__add":
	`.products li.product .button` (0,3,0) sets display:inline-block and
	margin-top, and `.woocommerce a.button` (0,2,1) sets the grey background,
	3px radius and pill padding. Both need beating on specificity alone, not
	load order, since a WooCommerce update could re-enqueue its stylesheet at
	a different priority at any time. !important is the only thing that holds
	against `.products li.product .button` regardless of how specific a
	class-only selector gets. Text is hidden visually but kept for screen
	readers.
*/
.hc-card__add {
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	background: var(--hc-navy) !important;
	border: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	flex-shrink: 0;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden;
	text-indent: -9999px;
	position: relative;
	text-decoration: none;
	transition: background 0.2s ease;
}

.hc-card__add:hover {
	background: #2a3570 !important;
}

/*
	Three real icons (woocommerce/loop/add-to-cart.php), not CSS shapes —
	idle (plus), loading, added (check). Only one is ever visible at a time;
	which one is controlled purely by display, switched by the button's own
	.loading/.added classes (WooCommerce's add-to-cart.js) and .hc-is-added
	(assets/js/pages/product-card.js). No transform-based redrawing of one
	shape into another, which is what previously broke both the spin (two
	CSS bars rotated into one overlapping dash) and the tick (the same bars
	force-angled into an approximation of a check).
*/
.hc-card__add-icon {
	display: none;
	color: var(--hc-cyan);
	line-height: 0;
}

.hc-card__add-icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

.hc-card__add-icon--idle {
	display: block;
}

.hc-card__add.loading .hc-card__add-icon--idle,
.hc-card__add.hc-is-added .hc-card__add-icon--idle {
	display: none;
}

.hc-card__add.loading .hc-card__add-icon--loading {
	display: block;
	animation: hc-card-add-spin 0.9s linear infinite;
}

.hc-card__add.hc-is-added .hc-card__add-icon--added {
	display: block;
}

@keyframes hc-card-add-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/*
	WooCommerce appends its own "View cart" link right after the add-to-cart
	button on a successful AJAX add (add-to-cart.js,
	AddToCartHandler.prototype.updateButton -> $button.after(anchor), classed
	just "added_to_cart wc-forward") — the cart drawer opens instead, so this
	isn't needed, and its presence next to the round button was breaking the
	card's footer layout.

	`.woocommerce a.added_to_cart` (0,2,1: two classes + the `a` element) is
	WooCommerce's own rule setting `display: inline-block` — a plain
	`.hc-card .added_to_cart` (0,2,0) loses that fight on specificity alone,
	regardless of load order, which is exactly why it kept showing.
	!important is the only thing guaranteed to win regardless of how
	WooCommerce's own selector for this is later restructured.
*/
.hc-card .added_to_cart {
	display: none !important;
}

/*
	Loading state from WooCommerce's own add-to-cart script.

	`.woocommerce a.button.loading` (0,3,1) also sets `padding-right: 2.618em`,
	which would widen the button and shift its icon off-centre while the
	request is in flight.

	Core also draws its own spinner glyph on `.loading::after` (font-family:
	WooCommerce; content: "\e01c") — not used here since the loading icon
	above already covers it; content: none removes just the glyph (at
	matching specificity, so it doesn't depend on load order) rather than
	leaving it to render behind/alongside the real icon.
*/
.hc-card__add.loading {
	opacity: 0.65;
	pointer-events: none;
	padding-right: 0 !important;
}

.woocommerce a.button.loading.hc-card__add::after {
	content: none;
}

/*
	WooCommerce also draws its own glyph on the *added* state
	(.button.added::after — font-family: WooCommerce; content:"\e017";
	margin-left:.53em) the same way it does for .loading — an invisible
	(font not loaded here) but still space-taking character sitting right
	after our own check icon inside the same flex-centered button, whose
	margin-left pushed our check off-centre to the left. Same fix as the
	loading glyph: remove just the content at matching specificity.
*/
.woocommerce a.button.added.hc-card__add::after {
	content: none;
	margin-left: 0;
}

/* ==========================================================================
   Bundle card

   Exact match source: Shop.dc.html (the bundle branch of the product grid).
   Shares .hc-card's frame, media and footer; only the badge, the two text
   lines and the price pair differ, so just those are defined here.
   ========================================================================== */

.hc-bundle-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: #FF6B00;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: var(--hc-radius-pill);
}

.hc-bundle-card__body {
	padding: 18px 15px 6px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.hc-bundle-card__eyebrow {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--hc-cyan);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Also an <h3> — see the note on .hc-card__name for why these need !important. */
.hc-woocommerce-wrap h3.hc-bundle-card__name,
.hc-bundle-card__name {
	font-family: var(--hc-font-display);
	font-size: 21px !important;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--hc-navy);
	line-height: 1.15;
	margin: 0 !important;
	padding: 0 !important;
}

/*
	What the bundle is for, under its name.

	Matches .hc-card__tagline on the perfume cards — same size, colour and
	two-line clamp — so a mixed grid on the shop page reads as one set of
	cards. The fixed min-height keeps names and prices on a common baseline
	when one bundle's line wraps and another's does not.
*/
.hc-bundle-card__tagline {
	font-size: 13.5px;
	color: var(--hc-navy-60);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.9em;
	margin: 0;
	padding: 0;
}

/* Bundle price sits next to what the contents would cost separately. */
.hc-bundle-card__prices {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.hc-bundle-card__price {
	font-family: var(--hc-font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--hc-navy);
}

.hc-bundle-card__was {
	font-size: 13px;
	color: var(--hc-navy-40);
	text-decoration: line-through;
}

/* wc_price() wraps output in .woocommerce-Price-amount; keep it inline. */
.hc-bundle-card__price .woocommerce-Price-amount,
.hc-bundle-card__was .woocommerce-Price-amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* ==========================================================================
   Mobile (2-column grid — see shop.css/bundle explore-grid @767px)
   ========================================================================== */
@media (max-width: 767px) {
	/*
		Add-to-cart button, both cards: 38px read as oversized once the grid
		drops to 2 columns and the card itself is much narrower. The plus/tick
		glyph drawn by ::before/::after is scaled down with it, at the same
		38px:9.3px ratio the full-size button uses, so it stays centred and in
		proportion instead of looking too large for the smaller circle.
	*/
	.hc-card__add {
		width: 24px !important;
		height: 24px !important;
	}

	.hc-card__add::before,
	.hc-card__add::after {
		width: 6px;
		height: 1.6px;
	}

	.hc-card__add::after {
		width: 1.6px;
		height: 6px;
	}

	.hc-card__add.hc-is-added::before {
		width: 4.5px;
		height: 1.6px;
	}

	.hc-card__add.hc-is-added::after {
		width: 1.6px;
		height: 8px;
	}

	/*
		Lasting + mood row: at 2-up card width this no longer fits on one line
		without the mood text getting clipped or forcing the card wider than
		its column. Wrapping lets "6+ HRS • Triumphant Floral" break onto a
		second line instead.
	*/
	.hc-card__meta {
		flex-wrap: wrap;
		row-gap: 2px;
	}

	.hc-card__tagline,
	.hc-bundle-card__tagline {
		font-size: 11px;
	}

	/*
		Desktop's 20px side padding is proportioned for a ~280-300px-wide card
		(≈7% of its width). At 2-up on a small phone the card itself is only
		~150-165px wide, so the same 20px becomes ~25% of it — a quarter of
		the card lost to padding alone, squeezing category/name/tagline/meta
		into a much narrower column than the design intends. 12px keeps the
		same top/bottom rhythm but gives that text room back. The 6px gap
		between body lines (category/name/rating/tagline/meta) is tightened
		to 5px too, for the same reason — proportionally less room at 2-up.
	*/
	.hc-card__body,
	.hc-bundle-card__body {
		padding-left: 12px;
		padding-right: 12px;
		gap: 5px;
	}

	.hc-card__footer {
		padding-left: 12px;
		padding-right: 12px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.hc-card__meta {
		font-size: 10px;
	}

	/* Clock icon in the lasting/mood row, markup's own width/height="13" attributes. */
	.hc-card__meta svg {
		width: 12px;
		height: 12px;
	}

	.hc-card__category,
	.hc-bundle-card__eyebrow {
		font-size: 10px;
	}

	.hc-card__badge,
	.hc-bundle-card__badge {
		font-size: 10px;
		padding: 3px 8px;
	}
}