/* ============================================================================
   Orilogy cart dropdown skin

   Skins the Hub theme's header cart (.ld-module-cart) to match the brand.
   Ported from the Elementor custom CSS so it ships as one cacheable file
   instead of inline page CSS.

   Everything is scoped under .ld-module-cart. The dropdown is a child of it in
   the real markup, and the extra class raises specificity enough to beat the
   theme without a wall of !important. The !important that remain are the ones
   that were genuinely fighting theme rules.

   Colours and type come from the Elementor kit, with the original hard-coded
   values as fallbacks, so changing the kit changes the cart too.
   ========================================================================= */

.ld-module-cart {
	--ocart-ink: var(--e-global-color-primary, #241f20);
	--ocart-cream: var(--e-global-color-secondary, #f2ebde);
	--ocart-sans: var(--e-global-typography-text-font-family, 'FoundersGrotesk-Medium', sans-serif);
	--ocart-line: rgba(255, 255, 255, .28);
	--ocart-dim: rgba(255, 255, 255, .55);
}

/* The trigger has to sit above the panel it opens. */
.ld-module-cart .ld-module-trigger {
	position: relative;
	z-index: 2;
}

/* .ld-cart-head carries the theme's .h2 class, which is what this recolours. */
.ld-module-cart .h2 {
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Panel
   ------------------------------------------------------------------------ */

.ld-module-cart .ld-module-dropdown,
.ld-module-cart .ld-module-dropdown * {
	box-sizing: border-box;
}

.ld-module-cart .ld-module-dropdown {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	left: auto;
	transform: none;

	width: 340px;
	max-width: calc(100vw - 32px); /* never runs off a phone */
	padding: 15px;

	background: var(--ocart-ink);
	border: none;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
	overflow: visible;
}

.ld-module-cart .ld-cart-contents,
.ld-module-cart .header-quickcart,
.ld-module-cart .ld-cart-products,
.ld-module-cart .ld-cart-foot {
	width: 100%;
	border: none;
	overflow: visible;
}

.ld-module-cart .ld-cart-contents,
.ld-module-cart .header-quickcart {
	color: #fff;
}

.ld-module-cart .ld-cart-contents {
	padding-top: 25px !important;
}

/* ---------------------------------------------------------------------------
   Head
   ------------------------------------------------------------------------ */

.ld-module-cart .ld-cart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: auto;
	padding: 0 0 20px;
	border: none;
	font-size: 15px;
	font-weight: 400;
	color: #fff;
}

.ld-module-cart .ld-cart-head .ld-module-trigger-count {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	color: #000;
	font-size: 12px;
	font-weight: 600;
}

/* Empty cart - this had no styling at all before, so it inherited whatever the
   theme happened to apply. */
.ld-module-cart .ld-cart-products .empty h3 {
	margin: 0;
	padding: 6px 0 14px;
	font-family: var(--ocart-sans);
	font-size: 16px;
	font-weight: 400;
	color: var(--ocart-dim);
}

/* ---------------------------------------------------------------------------
   Product row
   ------------------------------------------------------------------------ */

.ld-module-cart .ld-cart-product {
	position: relative;
	padding: 10px 0 20px;
	border: none;
}

.ld-module-cart .ld-cart-product-info {
	gap: 14px;
}

.ld-module-cart .ld-cart-product-info figure {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
}

.ld-module-cart .ld-cart-product-info img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ld-module-cart .ld-cart-product-details {
	gap: 6px;
}

.ld-module-cart .ld-cart-product-name {
	margin: 0;
	padding-bottom: 10px;
	font-family: var(--ocart-sans);
	font-size: 15px !important;
	font-weight: 500 !important;
	color: #fff;
}

.ld-module-cart .ld-cart-product-price {
	order: 3;
	font-size: 15px;
	color: #fff;
}

/* Remove button. This was spread over four blocks that fought each other -
   one set right:0, a later one set left:95% without clearing it, so the link
   was being stretched between both edges. Pinned to the right instead. */
.ld-module-cart a.remove.ld-cart-product-remove {
	position: absolute;
	top: 7px;
	right: 0;
	left: auto;
	border: none;
	background: none !important;
	color: var(--ocart-dim);
}

.ld-module-cart a.remove.ld-cart-product-remove::before {
	background: none !important;
	color: inherit !important;
}

.ld-module-cart .ld-cart-product-remove,
.ld-module-cart .ld-cart-product-remove svg {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.ld-module-cart .ld-cart-product-remove svg {
	width: 14px;
	height: 14px;
	color: currentColor;
	fill: currentColor;
}

.ld-module-cart a.remove.ld-cart-product-remove:hover {
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Quantity
   ------------------------------------------------------------------------ */

.ld-module-cart .ld-cart-product-price-qty {
	margin-top: -10px;
}

.ld-module-cart .ld-cart-product-price-qty::before {
	content: "Quantity";
	margin-right: 4px;
	font-size: 18px;
	font-weight: 400;
	color: #fff;
}

.ld-module-cart .ld-cart-product-price-qty span {
	color: #fff !important;
}

/* Merged from three overlapping blocks: the white border won on !important,
   the grey one never applied. */
.ld-module-cart .ld-cart-product-price-qty-update {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 1px solid #fff !important;
	border-radius: 50%;
	color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Foot
   ------------------------------------------------------------------------ */

.ld-module-cart .ld-cart-foot {
	margin: 80px 0 0;
	padding: 0;
	border-top: none;
}

.ld-module-cart .ld-cart-total {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 0 10px;
}

.ld-module-cart .ld-cart-total-label,
.ld-module-cart .ld-cart-total-price,
.ld-module-cart .ld-cart-total-price .woocommerce-Price-amount {
	font-family: var(--ocart-sans);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #fff !important;
}

.ld-module-cart .ld-cart-total-price,
.ld-module-cart .ld-cart-total-price .woocommerce-Price-amount {
	flex-shrink: 0;
	text-align: right;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Checkout button
   ------------------------------------------------------------------------ */

.ld-module-cart .ld-cart-button {
	width: 100%;
	gap: 10px;
}

.ld-module-cart .ld-cart-button .btn-solid {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	padding: 10px 0;
	border: none;
	border-radius: 50px;
	background: var(--ocart-cream);
	color: var(--ocart-ink);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* Arrow icon and the "View cart" link are both hidden by design. */
.ld-module-cart .ld-cart-button .btn-solid .btn-icon,
.ld-module-cart .ld-cart-button .btn-naked {
	display: none;
}

/* ---------------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------------ */

@media (max-width: 700px) {
	.ld-module-cart .ld-module-dropdown {
		width: 280px;
		padding: 12px;
		border-radius: 16px;
	}

	.ld-module-cart .ld-module-dropdown.is-active {
		top: 7px !important;
		right: 15% !important;
	}

	.ld-module-cart .ld-cart-contents {
		padding-top: 18px !important;
	}

	.ld-module-cart .ld-cart-head {
		padding: 0 0 14px;
		font-size: 13px;
	}

	.ld-module-cart .ld-cart-head .ld-module-trigger-count {
		width: 18px;
		height: 18px;
		font-size: 11px;
	}

	.ld-module-cart .ld-cart-product-info figure {
		width: 60px;
		height: 60px;
		border-radius: 10px;
	}

	.ld-module-cart .ld-cart-product-name {
		font-size: 14px !important;
	}

	.ld-module-cart .ld-cart-product-price {
		font-size: 13px;
	}

	.ld-module-cart .ld-cart-product-price-qty::before {
		font-size: 15px;
	}

	.ld-module-cart .ld-cart-product-price-qty-update {
		width: 22px;
		height: 22px;
	}

	.ld-module-cart .ld-cart-foot {
		margin-top: 50px;
	}

	.ld-module-cart .ld-cart-total-label,
	.ld-module-cart .ld-cart-total-price,
	.ld-module-cart .ld-cart-total-price .woocommerce-Price-amount {
		font-size: 16px;
	}

	.ld-module-cart .ld-cart-button .btn-solid {
		font-size: 16px;
		padding: 8px 0;
	}
}

/* ===========================================================================
   Sticky footer: only the product list scrolls.

   The theme puts the scroll on the whole panel -
     .ld-module-cart .ld-module-dropdown.in { overflow-y: auto }
   - so the head, the products and the subtotal/checkout footer all scroll
   together and the footer slides out of sight exactly when a full cart makes
   it matter most. The panel becomes a flex column instead: head and footer
   fixed, the product list taking the remaining space and scrolling alone.

   Scoped to .in on purpose. The dropdown is a Bootstrap .collapse, which is
   display:none when shut - declaring display:flex on the base class would
   override that and pin the cart permanently open.
   ======================================================================== */

.ld-module-cart .ld-module-dropdown.in {
	display: flex;
	flex-direction: column;
	max-height: min(85vh, 760px);
	/* beats the theme's overflow-y:auto on this same element */
	overflow: hidden !important;
}

/* min-height:0 at every level, or a flex child refuses to shrink below its
   content and the inner scroll never engages. */
.ld-module-cart .ld-module-dropdown.in .ld-cart-contents,
.ld-module-cart .ld-module-dropdown.in .header-quickcart {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.ld-module-cart .ld-module-dropdown.in .ld-cart-head,
.ld-module-cart .ld-module-dropdown.in .ld-cart-message {
	flex: 0 0 auto;
}

.ld-module-cart .ld-module-dropdown.in .ld-cart-products {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	/* stop the page behind from scrolling once the list hits its end */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-right: 6px;
}

.ld-module-cart .ld-module-dropdown.in .ld-cart-foot {
	flex: 0 0 auto;
	/* the old 80px margin was doing the spacing job; the footer is pinned now */
	margin-top: 0 !important;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

/* --- the scrollbar itself ------------------------------------------------
   Default chrome renders a wide light track that reads as a seam down the
   middle of a dark panel. Thin, translucent, and on the panel's own colour. */

.ld-module-cart .ld-module-dropdown.in .ld-cart-products {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

.ld-module-cart .ld-module-dropdown.in .ld-cart-products::-webkit-scrollbar {
	width: 5px;
}

.ld-module-cart .ld-module-dropdown.in .ld-cart-products::-webkit-scrollbar-track {
	background: transparent;
}

.ld-module-cart .ld-module-dropdown.in .ld-cart-products::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .22);
	border-radius: 999px;
}

.ld-module-cart .ld-module-dropdown.in .ld-cart-products::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, .38);
}

@media (max-width: 782px) {
	.ld-module-cart .ld-module-dropdown.in {
		max-height: min(80vh, 620px);
	}

	.ld-module-cart .ld-module-dropdown.in .ld-cart-foot {
		margin-top: 0 !important;
	}
}

/* ===========================================================================
   Footer pinning, take three - fixing the CAUSE this time.

   The real culprit was one theme rule:  .ld-cart-contents { height: 100% }.
   A flex child pinned to full height cannot shrink below its content, so the
   list overflowed the panel and rendered THROUGH the footer - which is why a
   product row kept appearing below the Checkout button, and why every flex
   attempt before this silently did nothing.

   position:sticky was a band-aid over that, and caused the artifact itself:
   it pinned the footer part-way down while rows carried on underneath. It is
   gone. With height:100% neutralised the flex column works on its own, which
   is the honest fix - head and footer fixed, list scrolling between them.
   ======================================================================== */

.ld-module-cart .ld-module-dropdown.in,
.ld-module-cart .ld-module-dropdown.show,
.ld-module-cart .ld-module-dropdown.is-active {
	display: flex !important;
	flex-direction: column !important;
	max-height: min(85vh, 760px) !important;
	overflow: hidden !important;
}

/* height:auto is the load-bearing line here. */
.ld-module-cart .ld-cart-contents,
.ld-module-cart .header-quickcart {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: hidden !important;
}

.ld-module-cart .ld-cart-head,
.ld-module-cart .ld-cart-message {
	flex: 0 0 auto !important;
}

.ld-module-cart .ld-cart-products {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	overscroll-behavior: contain;
	padding-right: 8px;
}

.ld-module-cart .ld-cart-foot {
	flex: 0 0 auto !important;
	position: static !important;   /* the sticky band-aid, removed */
	margin-top: 0 !important;
	padding-top: 16px;
	border-top: 1px solid var(--ocart-line);
	background: var(--ocart-ink);
}

/* --- remove control: was dark-on-dark, and below the 24px touch minimum --- */

.ld-module-cart .ld-cart-product a.remove,
.ld-module-cart a.remove.ld-cart-product-remove,
.ld-module-cart .ld-cart-product-remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: var(--ocart-cream) !important;
	background: transparent !important;
	opacity: .75;
	font-size: 17px;
	line-height: 1;
	border-radius: 50%;
	transition: opacity .2s ease, background-color .2s ease;
}

.ld-module-cart .ld-cart-product a.remove:hover,
.ld-module-cart a.remove.ld-cart-product-remove:hover,
.ld-module-cart .ld-cart-product-remove:hover {
	opacity: 1;
	color: var(--ocart-cream) !important;
	background: rgba(255, 255, 255, .12) !important;
}

/* --- scrollbar: the list is now the only scroller, so this is the one that
       actually shows. Thin and translucent, not the default pale bar. */

.ld-module-cart .ld-cart-products {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

.ld-module-cart .ld-cart-products::-webkit-scrollbar { width: 4px; }
.ld-module-cart .ld-cart-products::-webkit-scrollbar-track { background: transparent; }
.ld-module-cart .ld-cart-products::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .2);
	border-radius: 999px;
}
.ld-module-cart .ld-cart-products::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, .36);
}