/* =============================================================
   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: hero, search, indirizzo ==== */
	.home .ricerca_outerwrapper,
	.produttori_pagina .ricerca_outerwrapper {
		max-width: 1280px !important;
		margin: 0 auto !important;
		padding: 24px 0 0 !important;
		position: relative !important;
	}
	.home .ricerca_outerwrapper .ricerca_wrapper,
	.produttori_pagina .ricerca_outerwrapper .ricerca_wrapper {
		margin-top: 0 !important;
		margin-bottom: 24px !important;
		max-width: none !important;
		display: block !important;
		position: relative !important;
	}

	/* hero 100% larghezza container, 580px alto */
	#header_image {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		height: 580px !important;
		border-radius: 20px !important;
		overflow: hidden !important;
		position: relative !important;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	}
	#header_image .swiper-container,
	#hp-slider {
		width: 100% !important;
		height: 100% !important;
	}
	#hp-slider .swiper-slide {
		min-height: 580px !important;
		background-size: cover !important;
		background-position: center !important;
	}

	/* search staccata sotto hero, NON più position: absolute */
	.home .ricerca_outerwrapper .ricerca_wrapper .ricerca,
	.produttori_pagina .ricerca_outerwrapper .ricerca_wrapper .ricerca {
		position: static !important;
		left: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: 100% !important;
		max-width: 720px !important;
		margin: 24px auto 0 !important;
		padding: 0 !important;
		display: flex !important;
		gap: 8px;
		align-items: center;
		background: transparent !important;
		transform: none !important;
	}
	.home .ricerca_outerwrapper .ricerca_wrapper .ricerca form,
	.produttori_pagina .ricerca_outerwrapper .ricerca_wrapper .ricerca form {
		flex: 1 1 auto;
		margin: 0 !important;
		position: relative;
	}
	.home .ricerca_outerwrapper .ricerca_wrapper .ricerca input,
	.produttori_pagina .ricerca_outerwrapper .ricerca_wrapper .ricerca input {
		position: static !important;
		width: 100% !important;
		left: auto !important;
		top: auto !important;
		bottom: auto !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;
	}
}

/* ==== 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;
	}
}