/*
	Cart Drawer (slide-out mini bag).
	Loaded sitewide (drawer is available from any page via the header cart icon).
	Selectors reference: inc/woocommerce-reference.md — mini-cart section.
	Exact match source: Header.dc.html (cartOpen block)
*/

.hc-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 1300;
	visibility: hidden;
	pointer-events: none;
}

.hc-cart-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.hc-cart-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 14, 35, 0.6);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.hc-cart-drawer.is-open .hc-cart-drawer__overlay {
	opacity: 1;
}

.hc-cart-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100vw);
	background: var(--hc-white);
	box-shadow: -20px 0 60px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	padding: 28px;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

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

.hc-cart-drawer__content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.hc-cart-drawer__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

/*
	This markup serves two drawers: the theme's own, and Elementor's Menu Cart
	widget, which fills itself from woocommerce/cart/mini-cart.php. Elementor
	draws a close button of its own above the content, which would make two on
	screen — so its one goes and ours stays, since ours sits on the same line as
	the title where the design puts it.
*/
/*
	Elementor's own close icon is switched off in the widget's panel (Content →
	Cart → Close Icon), which is what takes it out of the layout: left on, its
	25px height and 20px margin sat above the title and pushed the whole drawer
	down. Ours takes its place, on the same line as "Your Bag" where the design
	has it, and cart-drawer.js closes the widget when it is clicked.
*/

.hc-cart-drawer__title {
	font-family: var(--hc-font-display);
	font-size: 24px;
	font-weight: 700;
	color: var(--hc-navy);
	text-transform: uppercase;
}

.hc-cart-drawer__close {
	background: none;
	border: none;
	color: var(--hc-navy);
	padding: 6px;
	cursor: pointer;
	display: flex;
	border-radius: 999px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.hc-cart-drawer__close:hover,
.hc-cart-drawer__close:focus-visible {
	color: var(--hc-cyan);
	background-color: var(--hc-navy-08, rgba(27, 35, 83, 0.06));
}

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

.hc-cart-drawer__lines {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 12px 0 16px;
}

.hc-cart-drawer__line {
	display: flex;
	gap: 14px;
	align-items: center;
}

.hc-cart-drawer__thumb {
	width: 56px;
	height: 70px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--hc-bg-alt);
	flex-shrink: 0;
}

.hc-cart-drawer__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hc-cart-drawer__info {
	flex: 1;
	min-width: 0;
}

.hc-cart-drawer__name {
	font-size: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
	The kit sets `.elementor-kit-7 a { color: … }` at (0,2,0) and its stylesheet
	loads after this one, so `.hc-cart-drawer__name a` — the same weight — lost
	on order alone. An !important on the parent does not help either: the link
	has a colour of its own, and inheritance never overrides that.

	Doubling the class puts this above the kit without naming it, since the
	kit's number changes if it is ever rebuilt.
*/
.hc-cart-drawer__name.hc-cart-drawer__name a {
	color: var(--hc-navy);
}

.hc-cart-drawer__qty {
	font-size: 12.5px;
	margin-top: 2px;
}

.hc-cart-drawer__price-col {
	text-align: right;
	flex-shrink: 0;
}

.hc-cart-drawer__line-total {
	font-size: 14px;
	margin-bottom: 6px;
}

.hc-cart-drawer__footer {
	border-top: 1px solid var(--hc-navy-10);
	padding-top: 18px;
}

.hc-cart-drawer__subtotal-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.hc-cart-drawer__subtotal-label {
	color: var(--hc-navy-60);
	font-size: 14px;
	font-weight: 600;
}

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

/*
	Checkout stays the primary, full-width-feeling action; the bag icon is a
	secondary shortcut that only needs its label while being looked at or
	touched, so it starts as a small round icon button and grows to reveal
	"View Bag" rather than sitting on its own full-width line permanently.
*/
.hc-cart-drawer__actions {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 10px;
}

.hc-cart-drawer__checkout.hc-cart-drawer__checkout {
	flex: 1;
	margin: 0;
}

.hc-cart-drawer__view-cart.hc-cart-drawer__view-cart {
	/*
	 * No fixed height: .hc-cart-drawer__actions has align-items: stretch, so
	 * this button always matches Checkout's actual rendered height (whatever
	 * its own font-size/padding happen to be) instead of a hardcoded number
	 * that only matches it by coincidence today.
	 */
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 54px;
	border-radius: 999px;
	border: 1.5px solid var(--hc-navy);
	background: transparent;
	color: var(--hc-navy);
	text-decoration: none;
	white-space: nowrap;
	transition: width 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

/*
	Doubled for the same reason .hc-cart-drawer__name.hc-cart-drawer__name a
	needs it above: the kit's `.elementor-kit-7 a` (0,2,0) loads after this
	file and otherwise beats a plain .hc-cart-drawer__view-cart-label (0,1,0)
	on specificity alone, underlining "View Bag" despite the rule below it.
*/
.hc-cart-drawer__view-cart.hc-cart-drawer__view-cart,
.hc-cart-drawer__view-cart.hc-cart-drawer__view-cart:hover,
.hc-cart-drawer__view-cart.hc-cart-drawer__view-cart:focus,
.hc-cart-drawer__view-cart-label.hc-cart-drawer__view-cart-label {
	text-decoration: none;
}

.hc-cart-drawer__view-cart.hc-cart-drawer__view-cart:hover,
.hc-cart-drawer__view-cart.hc-cart-drawer__view-cart.is-expanded {
	width: 142px;
	background: var(--hc-navy);
	color: var(--hc-white);
}

.hc-cart-drawer__view-cart-icon {
	flex: 0 0 auto;
	width: 54px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hc-cart-drawer__view-cart-icon svg {
	width: 26px;
	height: 26px;
}

.hc-cart-drawer__view-cart-label {
	font-weight: 700;
	font-size: 13px;
	padding-right: 16px;
	text-decoration: none;
	/*
	 * Fades in only once the button is wide enough to show it without
	 * wrapping — see the width in the hover/.is-expanded rule above.
	 */
	opacity: 0;
	transition: opacity 0.15s ease;
}

.hc-cart-drawer__view-cart.hc-cart-drawer__view-cart:hover .hc-cart-drawer__view-cart-label,
.hc-cart-drawer__view-cart.hc-cart-drawer__view-cart.is-expanded .hc-cart-drawer__view-cart-label {
	opacity: 1;
	transition-delay: 0.1s;
}

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

	.hc-cart-drawer__view-cart-label {
		transition: none;
	}
}

/* Base look: .hc-trust-badges-row in style.css. */
.hc-cart-drawer__trust-badges {
	justify-content: center;
	margin-top: 14px;
}

.hc-cart-drawer__empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 16px;
	color: var(--hc-navy);
}

.hc-cart-drawer__empty svg {
	opacity: 0.35;
}

.hc-cart-drawer__empty-title {
	font-size: 16px;
	font-weight: 700;
}

.hc-cart-drawer__empty-text {
	font-size: 14px;
	color: var(--hc-navy-60);
	max-width: 260px;
	line-height: 1.5;
}

/* Doubled to clear the kit's `.elementor-kit-7 a`, which loads later. */
.hc-cart-drawer__browse.hc-cart-drawer__browse {
	margin-top: 8px;
	background: var(--hc-navy);
	color: var(--hc-white);
	padding: 13px 26px;
	border-radius: var(--hc-radius-pill);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hc-cart-drawer__browse.hc-cart-drawer__browse:hover,
.hc-cart-drawer__browse.hc-cart-drawer__browse:focus-visible {
	background: var(--hc-cyan);
	color: var(--hc-navy);
}

/* Cart icon item-count badge (placed inside the Elementor header's cart icon button) */
.hc-cart-count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--hc-cyan);
	color: var(--hc-navy);
	font-size: 10px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

@media (max-width: 480px) {
	.hc-cart-drawer__panel {
		padding: 22px;
	}
}

/* ==========================================================================
   Toast
   ==========================================================================
   Shown after an item is added, in place of WooCommerce's default full-width
   grey notice (removed in inc/cart-drawer.php). Sits above the drawer, which
   is z-index 1300, because both appear at the same moment.

   Colours and radius are the design's own tokens: navy panel, cyan rule.
   ========================================================================== */
.hc-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 1400;
	transform: translate(-50%, 16px);
	max-width: min(90vw, 420px);
	padding: 14px 22px;
	border-radius: var(--hc-radius-pill);
	border-bottom: 2px solid var(--hc-cyan);
	background: var(--hc-navy);
	color: var(--hc-white);
	font-family: var(--hc-font-body);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	box-shadow: 0 16px 40px rgba(27, 35, 83, 0.28);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.hc-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/*
	The sticky add-to-cart bar occupies the bottom of the product page, so the
	toast is lifted clear of it there rather than overlapping the price.
*/
.single-product .hc-toast {
	bottom: 96px;
}

@media (prefers-reduced-motion: reduce) {
	.hc-toast {
		transition: opacity 0.25s ease;
		transform: translate(-50%, 0);
	}
}

/*
	Toast variants. Success keeps the navy panel with the cyan rule; errors
	swap the rule for the design's error red so the two are distinguishable
	without relying on the wording alone.
*/
.hc-toast--error {
	border-bottom-color: var(--hc-error);
}

/*
	Server-rendered notices (woocommerce/notices/*.php).

	Hidden by default because cart-drawer.js reads their text, shows a toast
	and removes them. Without JavaScript that never happens, so the <noscript>
	rule below puts them back — an error a customer cannot see would be worse
	than an unstyled one.
*/
.hc-notice-data {
	display: none;
}