/*
 * farmashop24.it — header desktop: logo, "Naviga tra le categorie della salute" e ricerca allineati al centro,
 * e "Naviga…" con l'aspetto di un pulsante. Solo header desktop (header.et-desktop, da 1025px): l'header mobile
 * e le tendine del megamenu non vengono toccati. Caricato da functions.php del child (css/sites/<dominio>-tema.css).
 * Lo stile di partenza del pulsante sta in css/templatedue.css (condiviso con pharmaigea): qui lo si sovrascrive.
 */
@media (min-width: 1025px) {
	/* riga con logo, menu e ricerca: un'unica linea centrata. #et-desktop-91351 = header desktop di farmashop24 (id del post header 91351); serve l'id
	   per battere il margin-top del Customizer (nav#header-menu-container-1 { margin-top: 2.3rem !important }) */
	#et-desktop-91351 .wpb_wrapper:has(> .header-logo):has(> .header-menu-container) {
		display: flex;
		align-items: center;
	}
	#et-desktop-91351 .wpb_wrapper:has(> .header-logo) > .header-logo,
	#et-desktop-91351 .wpb_wrapper:has(> .header-logo) > nav.header-menu-container,
	#et-desktop-91351 .wpb_wrapper:has(> .header-logo) > .header-product-search {
		float: none !important;
		margin: 0 !important;
	}
	#et-desktop-91351 .wpb_wrapper:has(> .header-logo) > nav.header-menu-container,
	#et-desktop-91351 .wpb_wrapper:has(> .header-logo) > .header-product-search {
		display: flex !important;
		align-items: center;
		height: auto !important;
		line-height: normal !important;
	}
	/* il disegno del logo sta ~10px sotto il centro della riga (immagine più alta della riga): pulsante e ricerca
	   scendono di altrettanto, così le tre cose sono sulla stessa linea a occhio */
	#et-desktop-91351 .wpb_wrapper:has(> .header-logo) > nav.header-menu-container {
		margin-left: 40px !important;
		position: relative;
		top: 10px;
	}
	#et-desktop-91351 .wpb_wrapper:has(> .header-logo) > .header-product-search {
		margin-left: auto !important;
		position: relative;
		top: 10px;
	}
	/* il tema dà altezza 100% (= 0) a ul e li: il pulsante pendeva sotto la linea centrale */
	#et-desktop-91351 nav.header-menu-container > .nav-menu {
		display: flex !important;
		align-items: center;
		height: auto !important;
	}
	#et-desktop-91351 nav.header-menu-container > .nav-menu > .menu-item.depth-0 {
		float: none !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* zona "ponte" invisibile sotto il pulsante: passando col mouse verso la tendina il menu non si richiude */
	#et-desktop-91351 nav.header-menu-container > .nav-menu > .menu-item.depth-0::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: 40px;
	}
	#et-desktop-91351 nav.header-menu-container > .nav-menu > .menu-item.depth-0 > .mi-link {
		display: flex !important;
		align-items: center;
		height: auto !important;
	}

	/* "Naviga tra le categorie della salute": pulsante pieno, con freccia verso il basso */
	#et-desktop-91351 nav.header-menu-container > .nav-menu > .menu-item.depth-0 > .mi-link > .txt {
		margin: 0 !important;
		padding: 12px 26px !important;
		border: 0 !important;
		border-radius: 100px;
		background-color: var(--primary) !important;
		color: #fff !important;
		font-size: 15px;
		font-weight: 600;
		line-height: 20px;
		gap: 10px;
		align-items: center;
		box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 30%, transparent);
		transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
	}
	#et-desktop-91351 nav.header-menu-container > .nav-menu > .menu-item.depth-0 > .mi-link > .txt::after {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform .2s ease;
	}
	#et-desktop-91351 nav.header-menu-container > .nav-menu > .menu-item.depth-0:hover > .mi-link > .txt,
	#et-desktop-91351 nav.header-menu-container > .nav-menu > .menu-item.depth-0 > .mi-link:focus-visible > .txt {
		background-color: color-mix(in srgb, var(--primary) 82%, #000) !important;
		color: #fff !important;
		box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 35%, transparent);
		transform: translateY(-1px);
	}
	#et-desktop-91351 nav.header-menu-container > .nav-menu > .menu-item.depth-0:hover > .mi-link > .txt::after {
		transform: translateY(1px) rotate(225deg);
	}
	#et-desktop-91351 nav.header-menu-container > .nav-menu > .menu-item.depth-0 > .mi-link:focus-visible {
		outline: none;
	}
	#et-desktop-91351 nav.header-menu-container > .nav-menu > .menu-item.depth-0 > .mi-link:focus-visible > .txt {
		outline: 2px solid color-mix(in srgb, var(--primary) 45%, #fff);
		outline-offset: 3px;
	}
}

/* logo desktop: l'immagine ha lo sfondo bianco puro, l'header è rgb(255,255,250) e si vedeva un riquadro.
   Con multiply il bianco prende il colore sotto; il fondo va messo sul link del logo perché il contenitore del
   tema (z-index) isola l'immagine dallo sfondo della colonna. Su mobile l'header è bianco: non serve. */
header.et-desktop .header-logo a {
	display: inline-block;
	background-color: rgb(255, 255, 250);
}
header.et-desktop .header-logo img {
	mix-blend-mode: multiply;
}

/* header mobile: logo da 70px a 90px (a 390px resta spazio prima delle icone) */
header.et-mobile .header-logo img {
	width: 90px !important;
	max-width: 90px !important;
	height: auto !important;
}
/* tra 1024 e 1279px (header mobile su schermo largo) il tema mostra un distanziatore di 16px sopra logo e icone,
   che uscivano dalla riga di 64px e finivano sulla fascia verde */
@media (min-width: 1024px) and (max-width: 1279px) {
	header.et-mobile .wpb_wrapper > .et-gap:has(~ .header-logo) {
		display: none !important;
	}
}

/* carrello tra 768 e 1279px: tabella e riquadro dei totali affiancati non ci stanno (la tabella non si stringe sotto
   le sue colonne e finiva sotto i totali): i totali vanno sotto la tabella, larghi quanto la pagina */
@media (min-width: 768px) and (max-width: 1279px) {
	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-cart .cart-collaterals {
		float: none !important;
		width: 100% !important;
	}
	.woocommerce-cart .cart-collaterals .cart_totals {
		float: none !important;
		width: 100% !important;
		max-width: 520px;
		margin-left: auto;
	}
}

/* pagina prodotto: la fascia della descrizione era grigia (#f2f2f2, stile in linea del tema) sul fondo del sito
   rgb(255,255,250): stesso colore del resto della pagina */
.single-product-description {
	background-color: rgb(255, 255, 250) !important;
}