/**
 * Happy Days Dairy — WooCommerce side cart.
 *
 * Visual source of truth: the supplied hdd-ecom-side-cart HTML. Values below are
 * copied from it unchanged. Differences from the demo are technical only:
 *
 * - Every rule is scoped under .hdd-ecom-side-cart (two-class specificity) so
 *   theme/Elementor-kit rules for button, input, a, h2, ul, img cannot leak in.
 *   Interactive elements therefore restate properties the demo left to browser
 *   defaults (padding, line-height, box-shadow, …) and restate :focus states.
 * - The demo overlay/drawer styles are applied to Elementor's own drawer
 *   (section 3) instead of a second drawer. The demo trigger button/badge are
 *   not included — Elementor's Menu Cart toggle is the trigger.
 * - Additions that do not exist in the demo: disabled/loading/focus-visible
 *   states, variation meta, inline notice, empty state.
 */

/* ==========================================================================
   1. Tokens + scoped reset
   ========================================================================== */

.hdd-ecom-side-cart,
.hdd-ecom-side-cart *,
.hdd-ecom-side-cart *::before,
.hdd-ecom-side-cart *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.hdd-ecom-side-cart {
	--hdd-navy: #003082;
	--hdd-gold: #ECBD30;
	--hdd-gold-dark: #B58F11;
	--hdd-black: #000000;
	--hdd-white: #FFFFFF;
	--hdd-cream: #F7F4EE;
	--hdd-ease: cubic-bezier(.16, 1, .3, 1);

	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	background: var(--hdd-white);

	font-family: "Figtree", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	color: var(--hdd-black);
}

.hdd-ecom-side-cart a:focus-visible,
.hdd-ecom-side-cart button:focus-visible {
	outline: 2px solid var(--hdd-navy);
	outline-offset: 2px;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   2. Cart component (from the design)
   ========================================================================== */

/* ── Header ── */
.hdd-ecom-side-cart .hdd-ecom-side-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 24px 20px;
	border-bottom: 1px solid rgba(181, 143, 17, 0.14);
	flex-shrink: 0;
}

/* h2 wrapper = the demo's plain <div>; neutralise theme heading styles. */
.hdd-ecom-side-cart .hdd-ecom-side-cart__heading {
	margin: 0;
	padding: 0;
	font-family: "Figtree", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	color: var(--hdd-black);
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__title {
	font-family: "Prata", serif;
	font-weight: 400;
	font-size: 24px;
	color: var(--hdd-black);
	letter-spacing: -0.01em;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__count {
	font-family: "Figtree", sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #6B6B6B;
	margin-left: 6px;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__close,
.hdd-ecom-side-cart .hdd-ecom-side-cart__close:focus {
	width: 34px;
	height: 34px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border-radius: 100px;
	border: none;
	background: var(--hdd-cream);
	color: #6B6B6B;
	box-shadow: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
	transition: background 0.2s ease, color 0.2s ease;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__close:hover,
.hdd-ecom-side-cart .hdd-ecom-side-cart__close:focus-visible {
	background: var(--hdd-gold-dark);
	color: var(--hdd-white);
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__close[hidden] {
	display: none;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__close svg {
	display: block;
	width: 14px;
	height: 14px;
}

/* ── Item list ── */
.hdd-ecom-side-cart .hdd-ecom-side-cart__items {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	margin: 0;
	padding: 8px 24px;
	list-style: none;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__item {
	display: flex;
	gap: 14px;
	padding: 20px 0;
	margin: 0;
	list-style: none;
	border-bottom: 1px solid rgba(181, 143, 17, 0.14);
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__item:last-child {
	border-bottom: none;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__thumb {
	width: 64px;
	height: 64px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--hdd-cream);
	flex-shrink: 0;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__thumb a {
	display: block;
	width: 100%;
	height: 100%;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__info {
	flex: 1;
	min-width: 0;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__name {
	min-width: 0;
	font-family: "Figtree", sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--hdd-black);
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__name a,
.hdd-ecom-side-cart .hdd-ecom-side-cart__name a:visited,
.hdd-ecom-side-cart .hdd-ecom-side-cart__name a:hover,
.hdd-ecom-side-cart .hdd-ecom-side-cart__name a:focus {
	color: inherit;
	font: inherit;
	text-decoration: none;
	box-shadow: none;
}

/* Remove control (an <a> so WooCommerce's native AJAX remove handles it). */
.hdd-ecom-side-cart .hdd-ecom-side-cart__remove,
.hdd-ecom-side-cart .hdd-ecom-side-cart__remove:visited,
.hdd-ecom-side-cart .hdd-ecom-side-cart__remove:focus {
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 100px;
	border: none;
	background: var(--hdd-cream);
	color: #6B6B6B;
	box-shadow: none;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__remove:hover,
.hdd-ecom-side-cart .hdd-ecom-side-cart__remove:focus-visible {
	background: var(--hdd-gold-dark);
	color: var(--hdd-white);
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__remove svg {
	display: block;
	width: 11px;
	height: 11px;
}

/* Variation / item data from wc_get_formatted_cart_item_data(). */
.hdd-ecom-side-cart .hdd-ecom-side-cart__meta {
	margin: -4px 0 8px;
	font-family: "Figtree", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: #6B6B6B;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__meta dl,
.hdd-ecom-side-cart .hdd-ecom-side-cart__meta dt,
.hdd-ecom-side-cart .hdd-ecom-side-cart__meta dd,
.hdd-ecom-side-cart .hdd-ecom-side-cart__meta p {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	font: inherit;
	color: inherit;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__meta dl {
	display: block;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__meta dt {
	font-weight: 600;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__meta dd::after {
	content: "";
	display: block;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__price {
	position: relative;
	font-family: "Prata", serif;
	font-size: 16px;
	color: var(--hdd-navy);
	letter-spacing: -0.01em;
	transition: opacity 0.2s ease;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__price *,
.hdd-ecom-side-cart .hdd-ecom-side-cart__subtotal-value * {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

/* ── Quantity ── */
.hdd-ecom-side-cart .hdd-ecom-side-cart__qty {
	display: inline-flex;
	align-items: center;
	height: 36px;
	border-radius: 999px;
	border: 1.5px solid rgba(0, 48, 130, 0.18);
	overflow: hidden;
	flex-shrink: 0;
	transition: border-color 0.2s ease;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__qty:has(> .hdd-ecom-side-cart__qty-input:focus) {
	border-color: var(--hdd-navy);
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__qty-btn,
.hdd-ecom-side-cart .hdd-ecom-side-cart__qty-btn:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 100%;
	min-width: 0;
	min-height: 0;
	padding: 0 !important;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	font-family: "Figtree", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	color: var(--hdd-navy);
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__qty-btn:hover,
.hdd-ecom-side-cart .hdd-ecom-side-cart__qty-btn:focus-visible {
	background: rgba(0, 48, 130, 0.06);
	color: var(--hdd-navy);
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__qty-btn:focus-visible {
	outline-offset: -2px;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__qty-btn:disabled,
.hdd-ecom-side-cart .hdd-ecom-side-cart__qty-btn:disabled:hover {
	background: none;
	opacity: 0.35;
	cursor: not-allowed;
}

/* Extra specificity: Elementor kit form-field rules reach (0,3,1). */
.hdd-ecom-side-cart .hdd-ecom-side-cart__qty input.hdd-ecom-side-cart__qty-input[data-qty-input],
.hdd-ecom-side-cart .hdd-ecom-side-cart__qty input.hdd-ecom-side-cart__qty-input[data-qty-input]:focus {
	width: 28px;
	height: 100%;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0 !important;
	border: none;
	border-radius: 0;
	background: var(--hdd-white);
	box-shadow: none;
	outline: none;
	text-align: center;
	font-family: "Figtree", sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: normal;
	color: var(--hdd-black);
	-webkit-appearance: none;
	-moz-appearance: textfield;
	appearance: none;
}

/* ── Inline notice (validation messages; not in the demo) ── */
.hdd-ecom-side-cart .hdd-ecom-side-cart__notice {
	margin-top: 8px;
	font-family: "Figtree", sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--hdd-gold-dark);
}

/* ── Footer ── */
.hdd-ecom-side-cart .hdd-ecom-side-cart__foot {
	flex-shrink: 0;
	padding: 20px 24px 24px;
	border-top: 1px solid rgba(181, 143, 17, 0.14);
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__subtotal-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__subtotal-label {
	font-family: "Figtree", sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--hdd-black);
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__subtotal-value {
	font-family: "Prata", serif;
	font-size: 24px;
	color: var(--hdd-navy);
	letter-spacing: -0.01em;
	transition: opacity 0.2s ease;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__subtotal-value small {
	font-family: "Figtree", sans-serif;
	font-size: 12px;
	color: #6B6B6B;
	letter-spacing: normal;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__actions {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 58px;
	margin: 0;
	padding: 0 16px;
	border-radius: 999px;
	font-family: "Figtree", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__btn--ghost,
.hdd-ecom-side-cart .hdd-ecom-side-cart__btn--ghost:visited,
.hdd-ecom-side-cart .hdd-ecom-side-cart__btn--ghost:focus {
	background: var(--hdd-white);
	border: 1.5px solid var(--hdd-gold-dark);
	color: var(--hdd-gold-dark);
	box-shadow: none;
	text-decoration: none;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__btn--ghost:hover {
	background: rgba(181, 143, 17, 0.08);
	color: var(--hdd-gold-dark);
	text-decoration: none;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__btn--solid,
.hdd-ecom-side-cart .hdd-ecom-side-cart__btn--solid:visited,
.hdd-ecom-side-cart .hdd-ecom-side-cart__btn--solid:focus {
	background: var(--hdd-navy);
	border: 1.5px solid var(--hdd-navy);
	color: var(--hdd-white);
	box-shadow: 0 14px 30px rgba(0, 48, 130, 0.32);
	text-decoration: none;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__btn--solid:hover {
	background: #00214f;
	border-color: #00214f;
	color: var(--hdd-white);
	transform: translateY(-1px);
	box-shadow: 0 18px 34px rgba(0, 48, 130, 0.4);
	text-decoration: none;
}

/* ── Empty state (not in the demo; built from its tokens) ── */
.hdd-ecom-side-cart .hdd-ecom-side-cart__empty {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 40px 24px;
	text-align: center;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__empty-text {
	margin: 0;
	padding: 0;
	font-family: "Figtree", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: #6B6B6B;
	text-align: center;
}

.hdd-ecom-side-cart .hdd-ecom-side-cart__empty .hdd-ecom-side-cart__btn {
	flex: 0 0 auto;
	width: 100%;
	max-width: 260px;
}

/* ── Loading (subtle; the layout never changes) ── */
.hdd-ecom-side-cart .hdd-ecom-side-cart__item.is-loading .hdd-ecom-side-cart__price,
.hdd-ecom-side-cart.is-busy .hdd-ecom-side-cart__subtotal-value {
	opacity: 0.45;
}

.hdd-ecom-side-cart.is-busy .hdd-ecom-side-cart__remove {
	opacity: 0.5;
	pointer-events: none;
}

.hdd-ecom-side-cart.is-busy .hdd-ecom-side-cart__btn {
	cursor: progress;
}

/* WooCommerce blockUI (used by its native remove): keep the fade, drop the spinner. */
.hdd-ecom-side-cart .blockUI.blockOverlay::before {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.hdd-ecom-side-cart .hdd-ecom-side-cart__btn--solid:hover {
		transform: none;
	}
}

/* ==========================================================================
   3. Elementor Pro Menu Cart drawer
   --------------------------------------------------------------------------
   The demo's .hdd-ecom-side-cart__overlay / __drawer styles, applied to
   Elementor's own container/drawer so there is only one drawer. Only visual
   properties are set: Elementor keeps control of positioning, open/close
   state and the slide transition.

   Scope (either one):
   a) automatic — a side-cart Menu Cart whose drawer contains this template;
   b) opt-in   — add the CSS class `hdd-ecom-menu-cart` to the Menu Cart widget
                 (Advanced → CSS Classes); styles apply before first render.

   :is() keeps the rule valid even in browsers without :has().
   Leave the widget's Style → Cart container controls at their defaults;
   Elementor's per-widget CSS is more specific than these rules.
   ========================================================================== */

:is(
	.hdd-ecom-menu-cart .elementor-menu-cart__container,
	.elementor-menu-cart--cart-type-side-cart .elementor-menu-cart__container:has(.hdd-ecom-side-cart)
) {
	background-color: rgba(0, 8, 24, 0.5);
	transition-duration: 0.3s;
	transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

:is(
	.hdd-ecom-menu-cart .elementor-menu-cart__main,
	.elementor-menu-cart--cart-type-side-cart .elementor-menu-cart__main:has(.hdd-ecom-side-cart)
) {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: min(440px, 92vw);
	max-width: 100%;
	height: 100vh;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #FFFFFF;
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.16);
	overflow: hidden;
	transition-duration: 0.35s;
	transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

@supports (height: 100dvh) {
	:is(
		.hdd-ecom-menu-cart .elementor-menu-cart__main,
		.elementor-menu-cart--cart-type-side-cart .elementor-menu-cart__main:has(.hdd-ecom-side-cart)
	) {
		height: 100dvh; /* Mobile browser chrome: keeps the footer buttons on screen. */
	}
}

:is(
	.hdd-ecom-menu-cart .elementor-menu-cart__main,
	.elementor-menu-cart__main:has(.hdd-ecom-side-cart)
) > .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
}

/* The template has its own close button (it triggers Elementor's close). */
.elementor-menu-cart__main:has(.hdd-ecom-side-cart) > :is(.elementor-menu-cart__close-button, .elementor-menu-cart__close-button-custom) {
	display: none;
}

/* ==========================================================================
   4. Responsive (the design's single breakpoint)
   ========================================================================== */

@media (max-width: 479px) {
	:is(
		.hdd-ecom-menu-cart .elementor-menu-cart__main,
		.elementor-menu-cart--cart-type-side-cart .elementor-menu-cart__main:has(.hdd-ecom-side-cart)
	) {
		width: 100vw;
	}

	.hdd-ecom-side-cart .hdd-ecom-side-cart__actions {
		flex-direction: column;
	}

	/*
	 * Fix for a bug inherited from the supplied design: in a column, flex: 1
	 * (basis 0) overrides height: 58px and both buttons collapse to ~14px.
	 * Keeps the intended 58px full-width buttons.
	 */
	.hdd-ecom-side-cart .hdd-ecom-side-cart__actions .hdd-ecom-side-cart__btn {
		flex: 0 0 auto;
	}
}