/* ============================================================
   BARRA FISSA IN ALTO
   ------------------------------------------------------------
   PERCHE ESISTE.
   Il meccanismo del tema (sc_layouts_row_fixed, fixed_blocks_sticky)
   si attiva ma non ancora mai nulla: scorrendo, i marcatori passano
   da _marker_on a _marker_off e la riga prende z-index 100002, ma
   resta position:static. Verificato su home e /shop/: dopo lo
   scorrimento non compare alcuna barra. Questa la sostituisce.

   PERCHE SERVE.
   La home e alta 7.671 px, la griglia negozio 4.453 px su mobile.
   Oltre il primo schermo carrello, ricerca e categorie diventano
   irraggiungibili senza tornare in cima: su un catalogo con 49
   colori e 7 lunghezze, dove si confronta avanti e indietro, e
   attrito su ogni acquisto.

   COLORI, MISURATI.
   Fondo bianco con marchio bordeaux: 13,42 : 1, lo stesso rapporto
   gia in uso sulle pagine interne, quindi la barra e la
   continuazione di come il sito appare gia. Voci rgb(42,30,38) su
   bianco: 15,97 : 1. Bottone Contattaci bianco su #580440: 13,9 : 1.
   NON si usa qui il logo bianco: quello vive solo sopra la
   fotografia dell'hero (header-home.css) e su fondo chiaro
   sparirebbe.

   IMPILAMENTO.
   9000 sta sopra la testata del tema (8000), che comunque scorre
   via, e sotto i pannelli a scomparsa di menu e ricerca
   (100001/100002), che devono poter coprire la barra.
   ============================================================ */

.ch-barra {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9000;

	background: #ffffff;
	box-shadow:
		0 1px 0 rgba(0, 0, 0, 0.06),
		0 8px 24px -14px rgba(0, 0, 0, 0.22);

	/* visibility:hidden la toglie anche dall'ordine di tabulazione:
	   da nascosta non si puo raggiungere col Tab */
	visibility: hidden;
	transform: translateY(-100%);
	transition:
		transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 220ms;
}

.ch-barra.e-visibile {
	visibility: visible;
	transform: translateY(0);
	transition:
		transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.ch-barra,
	.ch-barra.e-visibile {
		transition: none;
	}
}

.ch-barra__interno {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 20px;
	height: 64px;
	display: flex;
	align-items: center;
	gap: 28px;
}

/* --- marchio --- */

.ch-barra__logo {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.ch-barra__logo img {
	display: block;
	width: auto;
	height: 34px;
}

/* --- voci di menu --- */

.ch-barra__nav {
	flex: 1 1 auto;
	min-width: 0;
}

.ch-barra__voci {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 24px;
}

.ch-barra__voci > li {
	position: relative;
	margin: 0;
	padding: 0;
}

.ch-barra__voci a {
	display: block;
	padding: 6px 0;
	color: #2a1e26;
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color 160ms ease-out, border-color 160ms ease-out;
}

.ch-barra__voci a:hover,
.ch-barra__voci a:focus-visible,
.ch-barra__voci .current-menu-item > a,
.ch-barra__voci .current_page_item > a,
.ch-barra__voci .current-menu-ancestor > a {
	color: #580440;
	border-bottom-color: #580440;
}

/* la freccia sulle voci che hanno figli: dice che c'e altro sotto,
   senza doverci passare sopra per scoprirlo */
.ch-barra__voci > .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 7px;
	vertical-align: 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform 160ms ease-out;
}

.ch-barra__voci > .menu-item-has-children:hover > a::after,
.ch-barra__voci > .menu-item-has-children:focus-within > a::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/* --- sottomenu --- */

.ch-barra__voci ul {
	position: absolute;
	top: calc(100% + 11px);
	left: -18px;
	z-index: 1;

	margin: 0;
	padding: 8px 0;
	list-style: none;
	min-width: 268px;

	background: #ffffff;
	border: 1px solid rgba(42, 30, 38, 0.09);
	box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.34);

	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity 160ms ease-out,
		transform 160ms ease-out,
		visibility 0s linear 160ms;
}

.ch-barra__voci > li:hover > ul,
.ch-barra__voci > li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity 160ms ease-out,
		transform 160ms ease-out,
		visibility 0s;
}

/* il ponte invisibile fra voce e tendina: senza, spostando il mouse
   verso il basso si attraversa un vuoto di 11px e la tendina si
   chiude in faccia */
.ch-barra__voci > .menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 12px;
}

.ch-barra__voci ul a {
	padding: 9px 18px;
	font-size: 14px;
	white-space: normal;
	border-bottom: 0;
	border-left: 0;
}

.ch-barra__voci ul a:hover,
.ch-barra__voci ul a:focus-visible {
	background: rgba(88, 4, 64, 0.06);
	border-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ch-barra__voci ul,
	.ch-barra__voci > .menu-item-has-children > a::after {
		transition: none;
	}
}

/* --- azioni a destra --- */

.ch-barra__azioni {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 2px;
}

.ch-barra__azione {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* 44x44: sopra il minimo di 24px per il tocco, con margine */
	width: 44px;
	height: 44px;
	padding: 0;

	color: #2a1e26;
	background: none;
	border: 0;
	border-radius: 50%;
	text-decoration: none;
	cursor: pointer;
	transition: color 160ms ease-out, background-color 160ms ease-out;
}

.ch-barra__azione:hover,
.ch-barra__azione:focus-visible {
	color: #580440;
	background-color: rgba(88, 4, 64, 0.07);
}

.ch-barra__azione svg {
	width: 21px;
	height: 21px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* pallino con il numero di articoli */
.ch-barra__conta {
	position: absolute;
	top: 5px;
	right: 4px;

	min-width: 17px;
	height: 17px;
	padding: 0 4px;

	display: flex;
	align-items: center;
	justify-content: center;

	background: #580440;
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	border-radius: 9px;
}

.ch-barra__conta:empty,
.ch-barra__conta.e-vuoto {
	display: none;
}

/* --- mini carrello --- */

.ch-barra__carrello {
	position: relative;
}

.ch-barra__minicarrello {
	position: absolute;
	top: calc(100% + 10px);
	right: -8px;
	z-index: 1;

	width: 320px;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	padding: 18px;

	background: #ffffff;
	border: 1px solid rgba(42, 30, 38, 0.09);
	box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.34);

	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity 160ms ease-out,
		transform 160ms ease-out,
		visibility 0s linear 160ms;
}

.ch-barra__carrello.e-aperto .ch-barra__minicarrello {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity 160ms ease-out,
		transform 160ms ease-out,
		visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.ch-barra__minicarrello {
		transition: none;
	}
}

/* il contenuto arriva da woocommerce_mini_cart(): si allinea al
   resto della barra senza riscriverne la struttura */
.ch-barra__minicarrello .woocommerce-mini-cart__empty-message {
	margin: 0;
	text-align: center;
	color: #6b5c64;
	font-size: 14px;
}

.ch-barra__minicarrello ul.cart_list {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.ch-barra__minicarrello .total {
	margin: 0 0 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(42, 30, 38, 0.12);
	font-size: 14px;
}

.ch-barra__minicarrello .buttons {
	display: flex;
	gap: 8px;
	margin: 0;
}

.ch-barra__minicarrello .buttons .button {
	flex: 1 1 0;
	text-align: center;
	font-size: 13px;
}

/* --- bottone contatti --- */

.ch-barra__contatti {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	margin-left: 14px;
	padding: 0 20px;
	height: 42px;

	background: var(--theme-color-text_link, #5B0643);
	color: #ffffff;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s cubic-bezier(.22, 1, .36, 1);
}

.ch-barra__contatti:hover,
.ch-barra__contatti:focus-visible {
	background: var(--theme-color-text_link_blend, #690D4C);
	color: #ffffff;
}

/* --- pulsante menu --- */

/* da 1200px in su le voci sono in chiaro nella barra: un pulsante
   menu accanto sarebbe una seconda strada per la stessa cosa */
.ch-barra__azione--menu {
	display: none;
}

/* --- schermi stretti --- */

/* sotto i 1200px le voci non entrano accanto alle azioni: spariscono
   e al loro posto compare il pulsante che apre il menu del tema */
@media (max-width: 1199px) {
	.ch-barra__nav {
		display: none;
	}
	.ch-barra__azione--menu {
		display: inline-flex;
	}
	.ch-barra__interno {
		justify-content: space-between;
		gap: 12px;
	}
}

@media (max-width: 767px) {
	.ch-barra__interno {
		height: 56px;
		padding: 0 10px;
		gap: 6px;
	}
	.ch-barra__logo img {
		height: 28px;
	}

	/* cinque azioni a 375px: 5x40 piu il logo stanno in 259px sui 355
	   disponibili. 40px resta sopra il minimo di 24 per il tocco. */
	.ch-barra__azione {
		width: 40px;
		height: 40px;
	}
	.ch-barra__azione svg {
		width: 20px;
		height: 20px;
	}

	/* il bottone contatti e l'unica cosa che si sacrifica: e un
	   invito, non uno strumento, e la pagina resta nel menu.
	   L'icona professionista invece RESTA: e il secondo accesso,
	   e toglierla nasconde proprio la strada moderata. */
	.ch-barra__contatti {
		display: none;
	}

	.ch-barra__minicarrello {
		width: min(300px, calc(100vw - 20px));
		right: -4px;
	}
}

/* sotto i 360px il margine si assottiglia: si stringono le icone
   invece di nasconderne una */
@media (max-width: 359px) {
	.ch-barra__azione {
		width: 36px;
	}
	.ch-barra__azioni {
		gap: 0;
	}
}