/**
 * ff-minicart.css — versione consolidata
 * Percorso: wp-content/themes/TUO-TEMA-CHILD/assets/css/ff-minicart.css
 * Token dal file Figma "Rela Ortofrutta" (desktop 512-4821, mobile 521-5430)
 *
 * Desktop: header fisso, scrolla solo l'elenco prodotti in carrello,
 *          consigliati e footer fissi in fondo.
 * Mobile:  scrolla tutto il carrello, footer sticky con ombra,
 *          consigliati in carosello orizzontale con "peek".
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Urbanist:wght@400;500;600&display=swap');

:root {
	/* Brand colors */
	--rela-verde: #005f46;
	--rela-verde-scuro: #003a2b;
	--rela-verde-chiaro: #8bc34a;
	--rela-verde-50: #cfe6b5;
	/* Grays */
	--rela-black-text: #3b3b3b;
	--rela-gray-accessible: #6f6f6f;
	--rela-gray-stroke: #d9d9d9;
	--rela-text-dark: #1a1a18;
	/* Type */
	--rela-font-display: 'Fraunces', Georgia, serif;
	--rela-font-body: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
	/* Layout — valori desktop, ridefiniti nel breakpoint mobile */
	--rela-drawer-width: 581px;
	--rela-pad-x: 24px;
	--rela-thumb: 75px;
	--rela-name-size: 24px;
	--rela-unit-size: 16px;
	--rela-price-size: 24px;
	--rela-price-weight: 500;
	--rela-total-label-size: 24px;
	--rela-total-amount-size: 32px;
	--rela-header-gap: 28px;
}

/* ============================================================
   1. DRAWER (contenitore Elementor) + catena di scroll
   ============================================================ */

.elementor-menu-cart__container .elementor-menu-cart__main {
	width: var(--rela-drawer-width);
	max-width: 100vw;
	height: 100%;
	padding: 0;
	background: #fff;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* niente position: lo gestisce Elementor (fixed, ancorato a destra) */
}

.elementor-menu-cart__container .elementor-menu-cart__main .widget_shopping_cart_content {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.elementor-menu-cart__container .elementor-menu-cart__main .elementor-menu-cart__close-button,
.elementor-menu-cart__container .elementor-menu-cart__main .elementor-menu-cart__close-button-custom {
	display: flex;
	position: absolute;
	top: 24px;
	right: var(--rela-pad-x);
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	align-items: center;
	justify-content: center;
	z-index: 11;
	cursor: pointer;
}

/* ============================================================
   2. STRUTTURA MINICART
   ============================================================ */

.elementor-menu-cart__main .ff-minicart {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	font-family: var(--rela-font-body);
	color: var(--rela-black-text);
}

/* ---------- Header (fisso su desktop) ---------- */

.elementor-menu-cart__main .ff-minicart__header {
	flex-shrink: 0;
	padding: 20px var(--rela-pad-x) var(--rela-header-gap);
}

.elementor-menu-cart__main .ff-minicart__title {
	margin: 0;
	font-family: var(--rela-font-display);
	font-optical-sizing: auto;
	font-variation-settings: 'SOFT' 0, 'WONK' 1;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.96px;
	color: var(--rela-verde);
}

/* ---------- Wrapper centrale: solo struttura, non scrolla ---------- */

.elementor-menu-cart__main .ff-minicart__scroll {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 60px;
	overflow: visible;
}

/* ---------- Lista prodotti: è LEI che scrolla su desktop ---------- */

.elementor-menu-cart__main ul.ff-minicart__items {
	list-style: none;
	margin: 0;
	
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.elementor-menu-cart__main ul.ff-minicart__items::before,
.elementor-menu-cart__main ul.ff-minicart__items::after {
	content: none;
}

.elementor-menu-cart__main li.ff-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0 !important;
	margin: 0;
	border-bottom: 0.5px solid var(--rela-gray-stroke);
	position: static;
	transition: opacity 0.2s ease;
}

.elementor-menu-cart__main li.ff-item--loading {
	opacity: 0.45;
	pointer-events: none;
}

.elementor-menu-cart__main .ff-item__thumb {
	flex: 0 0 var(--rela-thumb);
}

.elementor-menu-cart__main .ff-item__thumb img {
	width: var(--rela-thumb) !important;
	height: var(--rela-thumb) !important;
	max-width: none;
	object-fit: cover;
	border-radius: 6px;
	float: none;
	margin: 0;
	display: block;
}

.elementor-menu-cart__main .ff-item__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.elementor-menu-cart__main .ff-item__nameline {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.elementor-menu-cart__main a.ff-item__name {
	font-family: var(--rela-font-body);
	font-size: var(--rela-name-size);
	font-weight: 400;
	line-height: 1.45;
	color: var(--rela-text-dark);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.elementor-menu-cart__main a.ff-item__name:hover {
	color: var(--rela-verde);
}

.elementor-menu-cart__main .ff-item__unit {
	font-size: var(--rela-unit-size);
	font-weight: 400;
	line-height: 1.4;
	color: var(--rela-gray-accessible);
	flex-shrink: 0;
}

/* Stepper quantità */

.elementor-menu-cart__main .ff-item__qty {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.elementor-menu-cart__main .ff-item__qty button.ff-qty-btn {
	-webkit-appearance: none;
	appearance: none;
	width: 32px;
	height: 32px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rela-verde-50);
	background-image: none;
	box-shadow: none;
	color: var(--rela-black-text);
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
	transition: background 0.15s ease;
}

.elementor-menu-cart__main .ff-item__qty button.ff-qty-btn:hover {
	background: #bfdca0;
	color: var(--rela-black-text);
	border: 0;
}

.elementor-menu-cart__main .ff-item__qty button.ff-qty-btn:focus-visible {
	outline: 2px solid var(--rela-verde);
	outline-offset: 2px;
}

.elementor-menu-cart__main .ff-qty-value {
	font-family: var(--rela-font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--rela-black-text);
	min-width: 14px;
	text-align: center;
}

/* Colonna destra: prezzo + cestino */

.elementor-menu-cart__main .ff-item__side {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
	flex-shrink: 0;
}

.elementor-menu-cart__main .ff-item__price {
	font-family: var(--rela-font-body);
	font-size: var(--rela-price-size);
	font-weight: var(--rela-price-weight);
	line-height: 1.3;
	color: var(--rela-black-text);
	white-space: nowrap;
}

.elementor-menu-cart__main a.ff-item__remove.remove {
	position: static;
	float: none;
	width: 24px;
	height: 24px;
	font-size: 0;
	line-height: 1;
	color: var(--rela-black-text);
	background: none;
	border: 0;
	border-radius: 0;
	top: auto;
	right: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.elementor-menu-cart__main a.ff-item__remove.remove svg {
	width: 20px;
	height: 22px;
}

.elementor-menu-cart__main a.ff-item__remove.remove:hover {
	color: #c0392b!important;
	background: none;
}

/* ---------- Consigliati: blocco fisso sopra il footer (desktop) ---------- */

.elementor-menu-cart__main .ff-minicart__recs {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0 var(--rela-pad-x) 24px;
}

.elementor-menu-cart__main .ff-minicart__recs-title {
	margin: 0;
	font-family: var(--rela-font-display);
	font-optical-sizing: auto;
	font-variation-settings: 'SOFT' 0, 'WONK' 1;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.96px;
	color: var(--rela-black-text);
}

.elementor-menu-cart__main .ff-minicart__recs-grid {
	display: flex;
	gap: 8px;
	align-items: stretch;
	justify-content: space-between;
	padding: 4px 4px 16px;
	margin: -4px -4px 0;
}

/* Card (loop template 77): position+z-index 0 = stacking context,
   così gli z-index interni del template non bucano il footer */
.elementor-menu-cart__main .ff-minicart__rec-card {
	position: relative;
	z-index: 0;
	flex: 0 0 165px;
	max-width: 165px;
	min-width: 0;
	background: #fff;
	border-radius: 10px;
	/*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);*/
	overflow: hidden;
}

.elementor-menu-cart__main .ff-minicart__rec-card .elementor {
	margin: 0;
}

.elementor-menu-cart__main .ff-minicart__rec-card img.e-image-base {
	width: 100%;
	height: 171px;
	object-fit: cover;
	border-radius: 7px;
	display: block;
}

/* Titolo card: il tema nasconde .elementor-page-title / entry-title,
   qui lo riattiviamo e applichiamo la scala Figma */
.elementor-menu-cart__main .ff-minicart__rec-card .elementor-widget-woocommerce-product-title.elementor-page-title {
	display: block;
}

.elementor-menu-cart__main .ff-minicart__rec-card h3.product_title.entry-title.elementor-heading-title {
	display: block;
	color: var(--rela-black-text);
	font-family: var(--rela-font-display);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: -0.54px;
	margin: 0;
	padding: 0 4px;
}

/* Unità (es. 50gr) */
.elementor-menu-cart__main .ff-minicart__rec-card .elementor-77 .elementor-element.elementor-element-5cb7a19 {
	font-size: 14px;
	padding: 0 4px 8px;
}

/* Prezzo */
.woocommerce .elementor-menu-cart__main .ff-minicart__rec-card .elementor-77 .elementor-element.elementor-element-a236266 .price {
	font-size: 18px;
	line-height: 1.3;
}

/* Riga prezzo + bottone */
.elementor-menu-cart__main .ff-minicart__rec-card .elementor-element-b2fe25f > .e-con-inner {
	padding: 0 4px 4px;
}

/* Bottone "+" pillola 61×40 */
.elementor-menu-cart__main .ff-minicart__rec-card .elementor-77 .elementor-element.elementor-element-51ff575 .elementor-button {
	width: 61px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.elementor-menu-cart__main .ff-minicart__rec-card .elementor-button img {
	width: 24px;
	height: 24px;
	display: block;
}

/* ---------- Footer: totale + checkout (fisso su desktop) ---------- */

.elementor-menu-cart__main .ff-minicart__footer {
	flex-shrink: 0;
	padding: 10px var(--rela-pad-x) 20px;
	margin-top: auto;
	border-top: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #fff;
}

.elementor-menu-cart__main .ff-minicart__total {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin: 0;
}

.elementor-menu-cart__main .ff-minicart__total-label span {
	font-family: var(--rela-font-body);
	font-size: var(--rela-total-label-size);
	font-weight: 400;
	line-height: 1.45;
	color: var(--rela-black-text);
}

.elementor-menu-cart__main .ff-minicart__total-label small {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--rela-gray-accessible);
	margin-top: 8px;
}

.elementor-menu-cart__main .ff-minicart__total-amount {
	font-family: var(--rela-font-body);
	font-size: var(--rela-total-amount-size);
	font-weight: 600;
	color: var(--rela-verde);
}

.elementor-menu-cart__main a.ff-minicart__checkout.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	background: var(--rela-verde-chiaro);
	color: var(--rela-verde-scuro);
	font-family: var(--rela-font-body);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.45;
	padding: 8px 16px;
	border: 0;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	transition: background 0.15s ease;
}

.elementor-menu-cart__main a.ff-minicart__checkout.button:hover {
	background: #7db23f;
	color: var(--rela-verde-scuro);
}

/* ---------- Empty state ---------- */

.elementor-menu-cart__main .ff-minicart__empty {
	padding: 40px var(--rela-pad-x);
	text-align: center;
	color: var(--rela-gray-accessible);
	font-family: var(--rela-font-body);
}

/* ============================================================
   3. MOBILE
   ============================================================ */

@media (max-width: 640px) {
	:root {
		--rela-pad-x: 16px;
		--rela-thumb: 65px;
		--rela-name-size: 18px;
		--rela-unit-size: 14px;
		--rela-price-size: 18px;
		--rela-price-weight: 600;
		--rela-total-label-size: 18px;
		--rela-total-amount-size: 28px;
		--rela-header-gap: 24px;
	}

	.elementor-menu-cart__container .elementor-menu-cart__main {
		width: 100vw;
	}

	/* Scrolla tutto il carrello (titolo incluso)... */
	.elementor-menu-cart__main .ff-minicart {
		overflow-y: auto;
	}

	.elementor-menu-cart__main .ff-minicart__scroll {
		flex: none;
		min-height: auto;
		gap: 32px;
	}

	/* La lista non scrolla per conto suo su mobile */
	.elementor-menu-cart__main ul.ff-minicart__items {
		flex: none;
		min-height: auto;
		overflow: visible;
	}

	/* ...tranne il footer, sticky in basso con ombra */
	.elementor-menu-cart__main .ff-minicart__footer {
		position: sticky;
		bottom: 0;
		z-index: 10;
		box-shadow: 0 -3px 6.7px rgba(0, 0, 0, 0.16);
	}

	/* Totale impilato in verticale */
	.elementor-menu-cart__main .ff-minicart__total {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.elementor-menu-cart__main .ff-minicart__total-label {
		display: contents;
	}

	.elementor-menu-cart__main .ff-minicart__total-label small {
		margin-top: 0;
		order: 3;
	}

	.elementor-menu-cart__main .ff-minicart__total-amount {
		order: 2;
		line-height: 22.61px;
	}

	/* Consigliati: carosello full-bleed con "peek" e scrollbar nascosta */
	.elementor-menu-cart__main .ff-minicart__recs {
		padding: 0 0 24px;
	}

	.elementor-menu-cart__main .ff-minicart__recs-title {
		font-size: 18px;
		line-height: 1.45;
		letter-spacing: -0.54px;
		padding: 0 16px;
	}

	.elementor-menu-cart__main .ff-minicart__recs-grid {
		justify-content: flex-start;
		overflow-x: auto;
		padding: 4px 16px 8px;
		margin: -4px 0 0;
		scroll-padding-left: 16px;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.elementor-menu-cart__main .ff-minicart__recs-grid::-webkit-scrollbar {
		display: none;
	}

	.elementor-menu-cart__main .ff-minicart__rec-card {
		scroll-snap-align: start;
	}
}

/* ============================================================
   4. ACCESSIBILITÀ
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.elementor-menu-cart__main li.ff-item,
	.elementor-menu-cart__main .ff-item__qty button.ff-qty-btn,
	.elementor-menu-cart__main a.ff-minicart__checkout.button {
		transition: none;
	}
}