/* =============================================================
   OIDA DESKTOP CSS v9 — additivo, attivo solo >= 1024px

   Basato sull'analisi di main.css originale. Selettori VERI:
   - body:not(.no_small){max-width:480px}      → sbloccato
   - .navigation_bar fixed top:0 max-width:480 → full-width
   - .navigation_bar_2 fixed top:44 (sub-bar pagine interne) → static
   - .bottom_sheet_backdrop, .menu_backdrop    → nascosti
   - .tab_bar position:fixed bottom            → diventa dock sinistro
   - .fascia, .fascia_, #new_payment width:100vw → centrati e ridotti
   - .card_produttore.verticale .img height:105px fissi → 1:1 grande
   - .main border:1px solid #da121a (bordo rosso pacchiano) → tolto
   ============================================================= */

@media (min-width: 1024px) {

	/* ==== Sblocco body e tutti gli elementi che main.css cappa a 480px ==== */
	html { background: #f4f7f8 !important; }
	body, body:not(.no_small) {
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #f4f7f8 !important;
	}
	.navigation_bar,
	.tab_bar,
	button.fascia,
	.fascia_,
	.navigation_bar_2,
	.introduzione,
	#new_payment {
		max-width: none !important;
	}

	/* ==== HEADER fixed top, full-width 100% ==== */
	.navigation_bar {
		width: 100% !important;
		max-width: none !important;
		left: 0 !important;
		right: 0 !important;
		padding: 10px 32px !important;
		height: 60px !important;
		max-height: 60px !important;
		z-index: 200 !important;
		background: #fff !important;
	}

	/* ==== SUB-HEADER pagine interne (Ajuda, cart, ecc.): NON più fixed ==== */
	.navigation_bar_2 {
		position: static !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		min-height: 60px;
		padding: 16px 32px !important;
		box-shadow: none !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
	}
	.navigation_bar_2 h1 {
		font-size: 1.25rem !important;
		text-align: left !important;
		max-width: 1280px;
		margin: 0 auto !important;
		width: 100%;
		padding-left: 50px; /* spazio per il back-arrow */
	}
	.navigation_bar_2 img {
		left: 32px !important;
		padding: 0 !important;
		width: 24px !important;
		height: 24px !important;
	}

	/* ==== Body padding-top per compensare navigation_bar fixed (60px) ==== */
	main, main.home {
		padding-top: 60px !important;
		padding-left: 120px !important; /* spazio per dock sinistra */
		padding-right: 32px !important;
		padding-bottom: 60px !important;
		max-width: none !important;
		margin: 0 !important;
		width: auto !important;
	}

	/* ==== KILL VELO GRIGIO carrello/menu su desktop ==== */
	.bottom_sheet_backdrop,
	.menu_backdrop {
		display: none !important;
	}

	/* ==== BOTTOM SHEET (popup dal basso): su desktop diventa modal centrato ==== */
	#bottom_sheet {
		max-width: 600px !important;
		margin: 0 auto !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		border-radius: 18px !important;
	}
	#bottom_sheet.aperto {
		bottom: 30px !important;
	}

	/* ==== BOTTONI fixed-bottom (WhatsApp carrello, Fascia gialla, ecc.) ==== */
	/* Su mobile sono width:100vw fissi in basso. Su desktop centrati 600px. */
	button.fascia,
	.fascia_,
	#new_payment {
		width: 100% !important;
		max-width: 600px !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		bottom: 30px !important;
		border-radius: 12px !important;
		z-index: 50 !important;
	}

	/* ==== DOCK SINISTRA: 4 bottoni rotondi flottanti ==== */
	.tab_bar {
		display: block !important;
		position: fixed !important;
		top: 50% !important;
		left: 24px !important;
		bottom: auto !important;
		transform: translateY(-50%) !important;
		height: auto !important;
		width: auto !important;
		max-width: none !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin: 0 !important;
		z-index: 60 !important;
	}
	.tab_bar > div {
		display: none !important; /* condició d'us link mobile */
	}
	.tab_bar > ul {
		display: flex !important;
		flex-direction: column !important;
		gap: 14px !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		justify-content: flex-start !important;
		background: transparent !important;
		border: none !important;
		height: auto !important;
	}
	.tab_bar > ul > a {
		text-decoration: none !important;
		display: block !important;
		position: relative !important;
		padding: 0 !important;
	}
	.tab_bar li {
		width: 56px !important;
		height: 56px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		background: #fff !important;
		border-radius: 50% !important;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
		font-size: 0 !important;
		color: transparent !important;
		cursor: pointer !important;
		list-style: none !important;
		transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
		position: relative !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
	}
	.tab_bar li:hover {
		transform: scale(1.08);
		box-shadow: 0 8px 24px rgba(218, 18, 26, 0.25) !important;
		background: #da121a !important;
	}
	.tab_bar li.active {
		background: #da121a !important;
		box-shadow: 0 4px 16px rgba(218, 18, 26, 0.25) !important;
	}
	.tab_bar a:nth-of-type(1) li::before { content: "\f015"; }
	.tab_bar a:nth-of-type(2) li::before { content: "\f54e"; }
	.tab_bar a:nth-of-type(3) li::before { content: "\f03a"; }
	.tab_bar a:nth-of-type(4) li::before { content: "\f128"; }
	.tab_bar li::before {
		font-family: "Font Awesome 5 Free", "FontAwesome" !important;
		font-weight: 900 !important;
		font-size: 22px !important;
		color: #4c4d4e !important;
		transition: color 0.2s !important;
		line-height: 1 !important;
	}
	.tab_bar li:hover::before,
	.tab_bar li.active::before {
		color: #fff !important;
	}
	.tab_bar a:nth-of-type(1) li::after { content: "Inici"; }
	.tab_bar a:nth-of-type(2) li::after { content: "Productors"; }
	.tab_bar a:nth-of-type(3) li::after { content: "Llistes"; }
	.tab_bar a:nth-of-type(4) li::after { content: "Ajuda"; }
	.tab_bar li::after {
		position: absolute !important;
		left: 70px !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		background: #2c3e50 !important;
		color: #fff !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		padding: 6px 12px !important;
		border-radius: 8px !important;
		white-space: nowrap !important;
		opacity: 0 !important;
		pointer-events: none !important;
		transition: opacity 0.2s, left 0.2s !important;
		font-family: "Manrope", system-ui, sans-serif !important;
	}
	.tab_bar li:hover::after {
		opacity: 1 !important;
		left: 74px !important;
	}


	/* ==========================================================
	   HOME / PRODUTTORI: search GRANDE sopra hero
	   - .ricerca_wrapper diventa flex column-reverse
	     così la search appare PRIMA dell'hero senza toccare l'HTML
	   - search bar 80px alto, font 1.25rem, full-width container
	   - hero ridotto a 320px sotto, immagini ricette restano belle
	   ========================================================== */
	.home .ricerca_outerwrapper,
	.produttori_pagina .ricerca_outerwrapper {
		max-width: none !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 32px 0 0 !important;
		position: relative !important;
	}

	/* CHIAVE: column-reverse → search prima, hero dopo */
	.home .ricerca_outerwrapper .ricerca_wrapper,
	.produttori_pagina .ricerca_outerwrapper .ricerca_wrapper {
		display: flex !important;
		flex-direction: column-reverse !important;
		flex-wrap: nowrap !important;
		gap: 24px !important;
		margin: 0 !important;
		max-width: none !important;
		position: relative !important;
		min-height: 0 !important;
	}

	/* SEARCH BAR GRANDE in alto */
	.home .ricerca_outerwrapper .ricerca_wrapper .ricerca,
	.produttori_pagina .ricerca_outerwrapper .ricerca_wrapper .ricerca {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 80px !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;
		background: transparent !important;
		transform: none !important;
		flex: 0 0 auto !important;
	}

	/* Bottone rosso GRANDE */
	.ricerca > button.t3 {
		width: 100% !important;
		height: 80px !important;
		max-height: 80px !important;
		font-size: 1.25rem !important;
		font-weight: 600 !important;
		padding: 0 32px !important;
		border-radius: 20px !important;
		box-shadow: 0 8px 32px rgba(218, 18, 26, 0.20) !important;
		cursor: text !important;
		transition: box-shadow 0.2s ease, transform 0.1s ease !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
	}
	.ricerca > button.t3:hover {
		box-shadow: 0 12px 40px rgba(218, 18, 26, 0.28) !important;
	}
	.ricerca > button.t3:active {
		transform: translateY(1px);
	}
	.ricerca > button.t3 img {
		width: 30px !important;
		height: 30px !important;
		margin-left: auto !important;
	}

	/* Input dentro la search: bianco, posizionato bene */
	.home .ricerca_outerwrapper .ricerca_wrapper .ricerca input,
	.produttori_pagina .ricerca_outerwrapper .ricerca_wrapper .ricerca input,
	.ricerca input[name="cerca"] {
		position: absolute !important;
		left: 32px !important;
		top: 0 !important;
		bottom: 0 !important;
		right: 80px !important;
		width: auto !important;
		margin: auto 0 !important;
		font-size: 1.25rem !important;
		font-weight: 600 !important;
		color: #fff !important;
		background: transparent !important;
		border: 0 !important;
		padding: 0 !important;
		z-index: 2 !important;
	}
	.ricerca input[name="cerca"]::placeholder,
	.ricerca input[name="cerca"]::-webkit-input-placeholder {
		color: rgba(255, 255, 255, 0.85) !important;
		font-size: 1.25rem !important;
		font-weight: 600 !important;
	}


	/* HERO: 1 slide alla volta a 100% larghezza, alto 540px */
	#header_image {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		height: 540px !important;
		border-radius: 20px !important;
		overflow: hidden !important;
		position: relative !important;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
		flex: 0 0 auto !important;
	}
	#header_image .swiper-container,
	#hp-slider {
		width: 100% !important;
		height: 100% !important;
	}

	/* Lascio swiper gestire la width (33.3% per slide → 3 visibili).
	   Tocco SOLO l'altezza per renderle imponenti. */
	#hp-slider .swiper-wrapper {
		height: 100% !important;
	}
	#hp-slider .swiper-slide {
		height: 540px !important;
		min-height: 540px !important;
		background-size: cover !important;
		background-position: center !important;
	}

	/* Caption testo dentro le slide: leggibile, gradient scuro */
	#hp-slider .swiper-slide > div {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		padding: 32px 48px !important;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)) !important;
		color: #fff !important;
	}
	#hp-slider .swiper-slide > div p,
	#hp-slider .swiper-slide > div p a {
		color: #fff !important;
		font-size: 1.05rem !important;
		font-weight: 500 !important;
		line-height: 1.5 !important;
		text-decoration: none !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 4 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
		max-width: 720px;
	}

	/* Pulsanti next/prev navigazione hero più visibili */
	#hp-slider .swiper-button-prev,
	#hp-slider .swiper-button-next {
		width: 48px !important;
		height: 48px !important;
		background: rgba(255, 255, 255, 0.95) !important;
		border-radius: 50% !important;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
		margin-top: -24px !important;
		transition: transform 0.15s ease !important;
	}
	#hp-slider .swiper-button-prev:hover,
	#hp-slider .swiper-button-next:hover {
		transform: scale(1.08);
	}
	#hp-slider .swiper-button-prev::after,
	#hp-slider .swiper-button-next::after {
		font-size: 18px !important;
		color: #4c4d4e !important;
		font-weight: 700 !important;
	}


	/* Indirizzo La Garriga: compatto e centrato */
	.home_address,
	.home_address_edit {
		width: auto !important;
		max-width: max-content !important;
		flex: 0 0 auto !important;
		display: inline-flex !important;
		padding: 12px 24px !important;
		font-size: 15px !important;
	}
	section.container-fluid > .d-flex.mb-4 {
		justify-content: center !important;
		gap: 12px !important;
		margin: 16px 0 32px !important;
	}

	/* ==== Container generici ==== */
	.container-fluid {
		max-width: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* ==== Label sezioni ==== */
	.filtro_popolari {
		max-width: none !important;
		margin: 32px 0 16px !important;
	}
	.filtro_popolari .t2,
	label.t2 {
		font-size: 22px !important;
		font-weight: 700 !important;
		margin: 0 !important;
		display: block;
		color: #2c3e50;
	}

	/* ==== Carosello prodotti: griglia 5 col con altezze uguali ==== */
	section.carosello_prodotti,
	.carosello.piu_popolari {
		max-width: none !important;
		margin: 16px 0 0 !important;
		min-width: 0 !important;
	}
	.carosello_prodotti .swiper-container,
	.carosello.piu_popolari .swiper-container {
		height: auto !important;
		overflow: visible !important;
		min-width: 0 !important;
		width: 100% !important;
	}
	.carosello_prodotti .swiper-wrapper,
	.carosello.piu_popolari .swiper-wrapper {
		display: grid !important;
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
		grid-auto-rows: 1fr !important;
		gap: 24px !important;
		transform: none !important;
		width: 100% !important;
	}
	.carosello_prodotti .swiper-slide,
	.carosello_prodotti .swiper-slide.card_produttore.verticale,
	.carosello.piu_popolari .swiper-slide,
	.carosello.piu_popolari .swiper-slide.card_produttore.verticale {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		flex: none !important;
		height: auto !important;
		transform: none !important;
		display: flex !important;
		flex-direction: column !important;
	}

	/* ==== Card prodotto verticale: override main.css ==== */
	.card_produttore.verticale {
		background: #fff !important;
		border-radius: 16px !important;
		overflow: hidden !important;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
		border: none !important;
		display: flex !important;
		flex-direction: column !important;
		height: 100% !important;
	}
	.card_produttore.verticale:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
	}
	.card_produttore.verticale > a {
		display: flex !important;
		flex-direction: column !important;
		text-decoration: none !important;
		color: inherit !important;
		width: 100% !important;
		height: 100% !important;
	}
	/* OVERRIDE delle altezze 105px fisse di main.css */
	.card_produttore.verticale .img {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: 1 / 1 !important;
		width: 100% !important;
		background-size: cover !important;
		background-position: center !important;
		position: relative !important;
		border: none !important;
		flex: 0 0 auto !important;
		padding: 0 !important;
		display: block !important;
	}
	.card_produttore.verticale .img img {
		position: absolute !important;
		bottom: 10px !important;
		left: 10px !important;
		width: 56px !important;
		height: 56px !important;
		border-radius: 50% !important;
		border: 2px solid #fff !important;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		background: #fff;
		object-fit: cover;
	}
	/* OVERRIDE: tolgo il bordo rosso pacchiano */
	.card_produttore.verticale .main,
	.card_produttore .main {
		padding: 14px 16px 18px !important;
		border: none !important;
		border-top: none !important;
		min-height: 0 !important;
		flex: 1 1 auto !important;
		display: flex !important;
		flex-direction: column !important;
	}
	.card_produttore.verticale .main h6,
	.card_produttore .main h6 {
		font-size: 11px !important;
		color: #da121a !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.05em !important;
		margin: 0 0 6px !important;
	}
	.card_produttore.verticale .main h4,
	.card_produttore .main h4 {
		font-size: 15px !important;
		font-weight: 600 !important;
		line-height: 1.35 !important;
		margin: 0 0 6px !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #2c3e50 !important;
		flex: 1 1 auto;
	}
	.card_produttore.verticale .main span,
	.card_produttore .main span {
		font-size: 13px !important;
		color: #6c757d !important;
		display: block !important;
		font-weight: 500 !important;
		margin-top: auto !important;
	}

	/* ==== "Qui busca troba": grid 3 col altezze uguali ==== */
	.filtro_popolari + section.container-fluid.mt-10.mb-4 {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		grid-auto-rows: 1fr !important;
		gap: 24px !important;
		max-width: none !important;
		margin: 0 0 32px !important;
		padding: 0 !important;
	}
	.filtro_popolari + section.container-fluid.mt-10.mb-4 .card_produttore.orizzontale {
		min-height: 160px !important;
		height: 100% !important;
		margin: 0 !important;
	}

	/* ==== Elenco produttori: 3 col ==== */
	.elenco_produttori {
		max-width: none !important;
		margin: 32px 0 0 !important;
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		grid-auto-rows: 1fr !important;
		gap: 16px !important;
		padding: 0 !important;
	}
	.elenco_produttori > label.t2 {
		display: block !important;
		grid-column: 1 / -1 !important;
		margin: 0 0 16px !important;
	}
	.elenco_produttori .card_produttore.orizzontale {
		display: flex !important;
		width: 100% !important;
		margin: 0 !important;
		min-height: 140px !important;
		height: 100% !important;
	}

	/* ==== Card orizzontale: override main.css ==== */
	.card_produttore.orizzontale {
		background: #fff !important;
		border-radius: 14px !important;
		overflow: hidden !important;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
		margin-bottom: 0 !important;
		border: none !important;
	}
	.card_produttore.orizzontale:hover {
		transform: translateY(-3px);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10) !important;
	}
	.card_produttore.orizzontale > a {
		display: flex !important;
		align-items: stretch !important;
		text-decoration: none !important;
		color: inherit !important;
		width: 100% !important;
		height: 100% !important;
		margin-top: 0 !important;
	}
	.card_produttore.orizzontale .img {
		flex: 0 0 140px !important;
		min-width: 140px !important;
		min-height: 100% !important;
		background-size: cover !important;
		background-position: center !important;
		position: relative !important;
		border: none !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	.card_produttore.orizzontale .img img {
		max-width: 56px !important;
		width: 56px !important;
		height: 56px !important;
		object-fit: cover !important;
		border-radius: 50% !important;
		border: 2px solid #fff !important;
	}
	.card_produttore.orizzontale .main {
		flex: 1 1 auto !important;
		padding: 14px 18px !important;
		min-width: 0 !important;
		border: none !important;
		border-top: none !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
	}

	/* ==== Pulizia ==== */
	#bottom_sheet:not(.aperto) {
		display: none !important;
	}

	/* =================================================
	   v15 FIX BLOCK — risolve i 10 problemi visti
	   ================================================= */

	/* FIX 1 — HERO altezza: forzo 540px su tutti i layer Swiper
	   Lo Swiper imposta height inline via JS; il !important esterno batte. */
	#header_image,
	#header_image > div,
	#header_image .swiper-container,
	#header_image #hp-slider,
	#hp-slider .swiper-wrapper,
	#hp-slider .swiper-slide {
		height: 540px !important;
		min-height: 540px !important;
		max-height: 540px !important;
	}
	#hp-slider .swiper-slide {
		max-height: none !important; /* la slide stessa lascio fluida nel cross-axis */
	}

	/* FIX 2+4 — Buco bianco e "card unica" sotto la search:
	   il wrapper hero non deve avere background né altezza extra. */
	.home .ricerca_outerwrapper,
	.produttori_pagina .ricerca_outerwrapper,
	.home .ricerca_outerwrapper .ricerca_wrapper,
	.produttori_pagina .ricerca_outerwrapper .ricerca_wrapper,
	.home > main > section.container-fluid:first-of-type,
	.produttori_pagina > main > section.container-fluid:first-of-type {
		background: transparent !important;
		background-color: transparent !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		padding-bottom: 0 !important;
		margin-bottom: 32px !important;
	}

	/* FIX 3 — Caption testi sopra le slide hero: gradient nero, leggibile */
	#hp-slider .swiper-slide > div {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		padding: 80px 32px 32px !important;
		background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.85) 100%) !important;
		color: #fff !important;
		z-index: 2 !important;
	}
	#hp-slider .swiper-slide > div p,
	#hp-slider .swiper-slide > div p a {
		color: #fff !important;
		font-size: 0.95rem !important;
		font-weight: 500 !important;
		line-height: 1.5 !important;
		text-decoration: none !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 4 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
		margin: 0 !important;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	}

	/* FIX 5 — Spazio sopra "La Garriga": l'indirizzo deve essere centrato e contestuale */
	main > section.container-fluid > .d-flex,
	main > section.container-fluid > .d-flex.mb-4 {
		justify-content: center !important;
		gap: 12px !important;
		margin: 24px 0 32px !important;
	}

	/* FIX 6 — Card prodotti altezze uguali: regole più aggressive */
	.carosello_prodotti .swiper-wrapper,
	.carosello.piu_popolari .swiper-wrapper {
		align-items: stretch !important;
	}
	.carosello_prodotti .swiper-slide,
	.carosello_prodotti .swiper-slide > .card_produttore.verticale,
	.carosello.piu_popolari .swiper-slide,
	.carosello.piu_popolari .swiper-slide > .card_produttore.verticale {
		height: 100% !important;
		align-self: stretch !important;
		display: flex !important;
		flex-direction: column !important;
	}
	.card_produttore.verticale > a {
		height: 100% !important;
		flex: 1 1 auto !important;
	}

	/* FIX 7 — Bordi rossi card prodotti: rimossi anche se inline */
	.card_produttore .main,
	.card_produttore.verticale .main,
	.card_produttore.orizzontale .main,
	.card_produttore .main[style],
	.card_produttore .img,
	.card_produttore .img[style] {
		border: none !important;
		border-top: none !important;
		border-bottom: none !important;
		border-left: none !important;
		border-right: none !important;
	}

	/* FIX 8 — Testo "Oidà! L'eCommerce..." in colonna centrata */
	main.home > div:not([class]),
	main.home > p,
	main.home > section:not(.container-fluid):not(.elenco_produttori):not(.carosello_prodotti):not(.carosello),
	main > .container-fluid > p,
	main > .container-fluid > div:not([class]),
	.home > main > p,
	.home > main > div:not([class]) {
		max-width: 900px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
		font-size: 1rem !important;
		line-height: 1.6 !important;
		padding: 0 16px !important;
	}

	/* FIX 9 — Header alto e visibile: forza con specificità extra */
	body nav.navigation_bar,
	body > nav.navigation_bar,
	html body .navigation_bar {
		height: 76px !important;
		min-height: 76px !important;
		max-height: 76px !important;
		padding: 0 40px !important;
	}
	/* dock non più troppo a sinistra (evita di tagliarsi su finestre strette) */
	.tab_bar {
		left: 16px !important;
	}

	/* FIX 10 — Tooltip dock visibili: niente overflow:hidden sul parente */
	.tab_bar,
	.tab_bar > ul,
	.tab_bar > ul > a,
	.tab_bar li {
		overflow: visible !important;
	}
	/* tooltip un filo più vicino al cerchio per non finire fuori schermo */
	.tab_bar li::after {
		left: 64px !important;
	}
	.tab_bar li:hover::after {
		left: 68px !important;
	}

}

/* ==== 1500px+: 6 col prodotti ==== */
@media (min-width: 1500px) {
	.carosello_prodotti .swiper-wrapper,
	.carosello.piu_popolari .swiper-wrapper {
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	}
	#header_image,
	#header_image .swiper-container,
	#hp-slider {
		height: 640px !important;
	}
	#hp-slider .swiper-slide {
		min-height: 640px !important;
	}
}

/* ==== 1700px+: 4 col su lista produttori ==== */
@media (min-width: 1700px) {
	.elenco_produttori {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}
/* ==========================================================
   v16: Hero swiper slides, numero responsivo
   1024-1280: 3 slide  |  1280-1500: 4 slide
   1500-1700: 5 slide  |  1700+:    6 slide
   Override del width:33.3% inline che JS Swiper imposta
   ========================================================== */
@media (min-width: 1024px) {
	#hp-slider .swiper-slide {
		width: 33.333% !important;
		min-width: 33.333% !important;
	}
}
@media (min-width: 1280px) {
	#hp-slider .swiper-slide {
		width: 25% !important;
		min-width: 25% !important;
	}
}
@media (min-width: 1500px) {
	#hp-slider .swiper-slide {
		width: 20% !important;
		min-width: 20% !important;
	}
}
@media (min-width: 1700px) {
	#hp-slider .swiper-slide {
		width: 16.666% !important;
		min-width: 16.666% !important;
	}
}

/* ==========================================================
   v17 — caption visibili + address (La Garriga/Edita) nell'header
   ========================================================== */
@media (min-width: 1024px) {

	/* CAPTION slide hero: padding ridotto, font più piccolo, max metà altezza */
	#hp-slider .swiper-slide > div {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		padding: 16px 14px !important;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0.88) 100%) !important;
		color: #fff !important;
		z-index: 5 !important;
		max-height: 60% !important;
		overflow: hidden !important;
	}
	#hp-slider .swiper-slide > div p,
	#hp-slider .swiper-slide > div p a {
		color: #fff !important;
		font-size: 0.85rem !important;
		font-weight: 500 !important;
		line-height: 1.35 !important;
		margin: 0 !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 3 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
		text-decoration: none !important;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
	}

	/* ============================================
	   ADDRESS nell'header (top, accanto alle icone)
	   ============================================ */

	/* Wrapper originale dell'address: occupa zero spazio,
	   ma figli possono uscire (per position: fixed) */
	main > section.container-fluid > .d-flex.mb-4,
	main > section.container-fluid > .d-flex {
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		display: block !important;
		gap: 0 !important;
	}

	/* La Garriga (address principale) — pillola rossa nell'header */
	.home_address {
		position: fixed !important;
		top: 18px !important;
		right: 290px !important;
		z-index: 250 !important;
		width: auto !important;
		max-width: max-content !important;
		min-width: 0 !important;
		height: 40px !important;
		padding: 0 18px !important;
		margin: 0 !important;
		flex: 0 0 auto !important;
		border-radius: 20px !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 8px !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		line-height: 1 !important;
		background: #da121a !important;
		color: #fff !important;
		box-shadow: 0 2px 8px rgba(218, 18, 26, 0.25) !important;
		cursor: pointer !important;
		text-decoration: none !important;
	}
	.home_address:hover {
		background: #b50f16 !important;
		box-shadow: 0 4px 12px rgba(218, 18, 26, 0.35) !important;
	}
	.home_address img,
	.home_address svg {
		width: 18px !important;
		height: 18px !important;
		filter: brightness(0) invert(1) !important;
	}

	/* Edita — pillola grigia accanto */
	.home_address_edit {
		position: fixed !important;
		top: 18px !important;
		right: 200px !important;
		z-index: 250 !important;
		width: auto !important;
		max-width: max-content !important;
		min-width: 0 !important;
		height: 40px !important;
		padding: 0 16px !important;
		margin: 0 !important;
		flex: 0 0 auto !important;
		border-radius: 20px !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 6px !important;
		font-size: 14px !important;
		font-weight: 500 !important;
		line-height: 1 !important;
		background: #f0f1f3 !important;
		color: #4c4d4e !important;
		box-shadow: none !important;
		cursor: pointer !important;
		text-decoration: none !important;
	}
	.home_address_edit:hover {
		background: #e4e6ea !important;
	}
	.home_address_edit img,
	.home_address_edit svg {
		width: 14px !important;
		height: 14px !important;
		opacity: 0.7 !important;
	}
}

/* ==========================================================
   v18 — autocomplete search sopra tutto + bottoni address rifiniti
   ========================================================== */
@media (min-width: 1024px) {

	/* AUTOCOMPLETE jQuery UI: full-width sotto la search, design pulito */
	.ui-autocomplete {
		z-index: 9999 !important;
		background: #fff !important;
		border: 1px solid rgba(0, 0, 0, 0.06) !important;
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.04) !important;
		list-style: none !important;
		padding: 8px !important;
		margin-top: 8px !important;
		border-radius: 16px !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		max-height: 480px !important;
		font-family: "Manrope", system-ui, sans-serif !important;
		/* full-width allineato con la search bar visibile (sotto il dock 120px, padding-right 32px) */
		left: 120px !important;
		right: auto !important;
		width: calc(100vw - 152px) !important;
		max-width: none !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}
	.ui-autocomplete .ui-menu-item {
		padding: 0 !important;
		margin: 2px 0 !important;
		border: none !important;
		list-style: none !important;
	}
	.ui-autocomplete .ui-menu-item-wrapper,
	.ui-autocomplete a {
		padding: 14px 20px !important;
		display: flex !important;
		align-items: center !important;
		gap: 12px !important;
		cursor: pointer !important;
		font-size: 15px !important;
		font-weight: 500 !important;
		color: #2c3e50 !important;
		text-decoration: none !important;
		border-radius: 10px !important;
		transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease !important;
		border: none !important;
		background: transparent !important;
		line-height: 1.3 !important;
	}
	/* icona "ricerca" prima di ogni voce */
	.ui-autocomplete .ui-menu-item-wrapper::before,
	.ui-autocomplete a::before {
		content: "\f002"; /* fa-search */
		font-family: "Font Awesome 5 Free" !important;
		font-weight: 900;
		font-size: 13px;
		color: #adb5bd;
		flex: 0 0 auto;
		width: 20px;
		text-align: center;
		transition: color 0.12s ease;
	}
	.ui-autocomplete .ui-menu-item-wrapper:hover,
	.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
	.ui-autocomplete .ui-menu-item-wrapper.ui-state-focus,
	.ui-autocomplete .ui-state-active,
	.ui-autocomplete .ui-state-focus,
	.ui-autocomplete a:hover {
		background: rgba(218, 18, 26, 0.07) !important;
		color: #da121a !important;
		transform: translateX(2px);
	}
	.ui-autocomplete .ui-menu-item-wrapper:hover::before,
	.ui-autocomplete .ui-menu-item-wrapper.ui-state-active::before,
	.ui-autocomplete a:hover::before {
		color: #da121a !important;
	}
	/* highlight (la parte digitata) */
	.ui-autocomplete .ui-state-highlight,
	.ui-autocomplete strong,
	.ui-autocomplete b {
		color: #da121a !important;
		font-weight: 700 !important;
		background: transparent !important;
	}
	/* scrollbar custom */
	.ui-autocomplete::-webkit-scrollbar {
		width: 8px;
	}
	.ui-autocomplete::-webkit-scrollbar-track {
		background: transparent;
	}
	.ui-autocomplete::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.15);
		border-radius: 4px;
	}
	.ui-autocomplete::-webkit-scrollbar-thumb:hover {
		background: rgba(0, 0, 0, 0.25);
	}

	/* ============================================
	   La Garriga + Edita: rifiniti, bilanciati
	   ============================================ */
	.home_address {
		top: 16px !important;
		right: 290px !important;
		height: 44px !important;
		padding: 0 22px !important;
		border-radius: 22px !important;
		font-size: 14.5px !important;
		font-weight: 600 !important;
		gap: 10px !important;
		background: #da121a !important;
		color: #fff !important;
		box-shadow: 0 2px 10px rgba(218, 18, 26, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
		transition: transform 0.12s ease, box-shadow 0.15s ease !important;
		letter-spacing: 0.01em !important;
	}
	.home_address:hover {
		background: #c41119 !important;
		box-shadow: 0 4px 14px rgba(218, 18, 26, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
		transform: translateY(-1px);
	}
	.home_address:active {
		transform: translateY(0);
	}
	.home_address img,
	.home_address svg {
		width: 18px !important;
		height: 18px !important;
		filter: brightness(0) invert(1) !important;
	}

	.home_address_edit {
		top: 16px !important;
		right: 200px !important;
		height: 44px !important;
		padding: 0 18px !important;
		border-radius: 22px !important;
		font-size: 14px !important;
		font-weight: 500 !important;
		gap: 8px !important;
		background: #fff !important;
		color: #4c4d4e !important;
		border: 1.5px solid #e0e2e6 !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
		transition: all 0.15s ease !important;
		letter-spacing: 0.01em !important;
	}
	.home_address_edit:hover {
		background: #f8f9fa !important;
		border-color: #c8ccd2 !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
		color: #2c3e50 !important;
	}
	.home_address_edit img,
	.home_address_edit svg {
		width: 14px !important;
		height: 14px !important;
		opacity: 0.55 !important;
	}
	.home_address_edit:hover img,
	.home_address_edit:hover svg {
		opacity: 0.85 !important;
	}
}

/* ==========================================================
   v20 — swiper-scrollbar nascosta su desktop
   ========================================================== */
@media (min-width: 1024px) {
	.swiper-scrollbar,
	.swiper-scrollbar-drag {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
	}
}

/* ==========================================================
   v21 — Force autocomplete width con specificità ALTA
   (jQuery UI mette inline width:1406px che vinceva sul mio CSS)
   ========================================================== */
@media (min-width: 1024px) {
	html body ul.ui-autocomplete,
	html body ul.ui-autocomplete.ui-widget,
	html body ul.ui-autocomplete.ui-front,
	html body ul[class*="ui-autocomplete"] {
		left: 120px !important;
		right: auto !important;
		width: calc(100vw - 152px) !important;
		max-width: none !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}
}

/* ==========================================================
   v22 — Popup geolocalizzazione: nascosto di default su desktop
   Lo script JS (sotto in oida_desktop.js) lo mostra solo prima visita
   ========================================================== */
@media (min-width: 1024px) {
	#modale_geo {
		display: none !important;
	}
	/* override quando body ha la flag della prima visita */
	body.oida-show-geo #modale_geo {
		display: block !important;
	}
	body.oida-show-geo .modal-backdrop {
		display: block !important;
	}
}

/* ==========================================================
   v22 — Address SPOSTATO via JS dentro nav.navigation_bar
   Stile pillola inline per mobile + desktop
   ========================================================== */

/* override sia mobile che desktop: tolgo position fixed */
.oida_address_inline {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 auto;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: flex-end;
	padding-right: 12px;
}

/* sblocco width 100% del main.css originale che rendeva l'address full-width */
.navigation_bar .home_address,
.oida_address_inline .home_address {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
	max-width: max-content !important;
	min-width: 0 !important;
	height: 36px !important;
	padding: 0 14px !important;
	margin: 0 !important;
	flex: 0 1 auto !important;
	border-radius: 18px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	background: #da121a !important;
	color: #fff !important;
	box-shadow: 0 2px 6px rgba(218, 18, 26, 0.22) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
.navigation_bar .home_address:hover,
.oida_address_inline .home_address:hover {
	background: #c41119 !important;
}
.navigation_bar .home_address img,
.navigation_bar .home_address svg,
.oida_address_inline .home_address img,
.oida_address_inline .home_address svg {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	filter: brightness(0) invert(1) !important;
	margin: 0 !important;
}

.navigation_bar .home_address_edit,
.oida_address_inline .home_address_edit {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
	max-width: max-content !important;
	min-width: 0 !important;
	height: 36px !important;
	padding: 0 12px !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	border-radius: 18px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	background: #f0f1f3 !important;
	color: #4c4d4e !important;
	border: 1px solid #e0e2e6 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	cursor: pointer !important;
	white-space: nowrap !important;
}
.navigation_bar .home_address_edit:hover,
.oida_address_inline .home_address_edit:hover {
	background: #e4e6ea !important;
}
.navigation_bar .home_address_edit img,
.navigation_bar .home_address_edit svg,
.oida_address_inline .home_address_edit img,
.oida_address_inline .home_address_edit svg {
	width: 13px !important;
	height: 13px !important;
	min-width: 13px !important;
	opacity: 0.6 !important;
	margin: 0 !important;
}

/* DESKTOP ≥1024: pillole un po' più grandi */
@media (min-width: 1024px) {
	.oida_address_inline {
		gap: 8px;
		padding-right: 16px;
	}
	.oida_address_inline .home_address,
	.navigation_bar .home_address {
		height: 42px !important;
		padding: 0 20px !important;
		font-size: 14.5px !important;
		border-radius: 21px !important;
		gap: 8px !important;
	}
	.oida_address_inline .home_address img,
	.oida_address_inline .home_address svg,
	.navigation_bar .home_address img,
	.navigation_bar .home_address svg {
		width: 18px !important;
		height: 18px !important;
		min-width: 18px !important;
	}
	.oida_address_inline .home_address_edit,
	.navigation_bar .home_address_edit {
		height: 42px !important;
		padding: 0 16px !important;
		font-size: 14px !important;
		border-radius: 21px !important;
		gap: 6px !important;
	}
	.oida_address_inline .home_address_edit img,
	.oida_address_inline .home_address_edit svg,
	.navigation_bar .home_address_edit img,
	.navigation_bar .home_address_edit svg {
		width: 14px !important;
		height: 14px !important;
		min-width: 14px !important;
	}
}

/* MOBILE <768px: nascondo "Edita" per spazio, lascio solo La Garriga */
@media (max-width: 767px) {
	.oida_address_inline .home_address_edit,
	.navigation_bar .home_address_edit {
		display: none !important;
	}
	.oida_address_inline .home_address,
	.navigation_bar .home_address {
		max-width: 140px !important;
		font-size: 12px !important;
		padding: 0 12px !important;
		height: 32px !important;
	}
}

/* ==========================================================
   v23 — KILL TUTTI gli overlay/backdrop che bloccano l'interazione
   (mobile + desktop, sempre)
   ========================================================== */
#ajax-overlay,
.bottom_sheet_backdrop,
.menu_backdrop,
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show,
.overlay,
.page_overlay,
[class*="backdrop"]:not(.no-kill) {
	display: none !important;
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

body,
body.modal-open,
html.modal-open {
	overflow: auto !important;
	padding-right: 0 !important;
	margin-right: 0 !important;
}