/*
Theme Name: Ciocca
Description: Tema a blocchi per il negozio online di un salone di parrucchieri. Scelta dei prodotti per tipo di capello tramite una mazzetta di ciocche.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
Author: MyDigitalTools
Text Domain: ciocca
*/

/* ---------- Base ---------- */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--tonalizzante);
	outline-offset: 3px;
}
body { -webkit-font-smoothing: antialiased; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--inchiostro);
	border: 1.5px solid currentColor;
	padding: calc(0.85rem - 1.5px) calc(1.4rem - 1.5px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--inchiostro);
	color: var(--wp--preset--color--specchio);
}

/* ---------- Testata ---------- */
.ciocca-avviso p { margin: 0; letter-spacing: 0.01em; }
.ciocca-testata { border-bottom: 1px solid var(--wp--preset--color--velo); background: var(--wp--preset--color--specchio); }
.ciocca-testata .wp-block-navigation { margin-left: auto; }
@media (min-width: 600px) { .ciocca-testata .wp-block-navigation { margin-left: 0; } }
.ciocca-testata .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.ciocca-testata__azioni .wc-block-mini-cart__button,
.ciocca-testata__azioni .wc-block-customer-account a { color: var(--wp--preset--color--inchiostro); }

/* ---------- Mazzetta di ciocche ---------- */
.mazzetta {
	--altezza: clamp(15rem, 34vw, 23rem);
	position: relative;
	max-width: 30rem;
	margin-inline: auto;
	padding-top: 0;
}
/* La barretta metallica che tiene insieme i cartellini, come nella cartella colori. */
.mazzetta__anello {
	position: absolute;
	/* Passa attraverso i fori dei cartellini. */
	inset: 0.3rem 3% auto;
	height: 0.7rem;
	border-radius: 999px;
	background: linear-gradient(180deg, #CFCAD6 0%, #8E8798 45%, #5B5463 100%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 4px rgba(34, 26, 38, 0.25);
	z-index: 2;
}
.mazzetta__ciocche {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.5rem;
}
.ciocca {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: var(--wp--preset--color--inchiostro);
	transform-origin: 50% 0;
	transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.ciocca__cartellino {
	position: relative;
	z-index: 1;
	width: 100%;
	min-height: 3.6rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 1.2rem 0.3rem 0.55rem;
	background: var(--wp--preset--color--bianco);
	border: 1px solid var(--wp--preset--color--velo);
	border-radius: 2px 2px 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	hyphens: auto;
}
/* Il foro del cartellino, dove passa la barretta. */
.ciocca__cartellino::before {
	content: "";
	position: absolute;
	top: 0.15rem;
	left: 50%;
	width: 0.95rem;
	height: 0.95rem;
	margin-left: -0.475rem;
	border-radius: 50%;
	background: var(--wp--preset--color--specchio);
	box-shadow: inset 0 1px 2px rgba(34, 26, 38, 0.35);
}
.ciocca__fili {
	display: block;
	width: 68%;
	height: calc(var(--altezza) * var(--lunghezza) / 100);
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.13) 0 1px, transparent 1px 5px, rgba(0, 0, 0, 0.06) 5px 6px, transparent 6px 8px),
		linear-gradient(90deg,
			color-mix(in srgb, var(--tono) 70%, #000) 0%,
			var(--tono) 22%,
			color-mix(in srgb, var(--tono) 72%, #fff) 48%,
			var(--tono) 70%,
			color-mix(in srgb, var(--tono) 65%, #000) 100%);
	/* Punte sfilate e sfumate. */
	clip-path: polygon(0 0, 100% 0, 100% 88%, 86% 97%, 70% 91%, 55% 100%, 38% 93%, 22% 99%, 8% 90%, 0 94%);
	-webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.ciocca:hover,
.ciocca:focus-visible { transform: rotate(-4deg); }
.ciocca:hover .ciocca__cartellino,
.ciocca:focus-visible .ciocca__cartellino {
	border-color: var(--wp--preset--color--tonalizzante);
	color: var(--wp--preset--color--tonalizzante);
}
.ciocca:focus-visible { outline: none; }
.ciocca:focus-visible .ciocca__cartellino { outline: 2px solid var(--wp--preset--color--tonalizzante); outline-offset: 2px; }

/* ---------- Vetrina e schede prodotto ---------- */
.wc-block-product-template .wc-block-components-product-image img,
.wc-block-components-product-image img {
	border-radius: 2px;
	background: var(--wp--preset--color--velo);
}
.wc-block-product-template .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--ramato);
	color: #fff;
	border: 0;
	border-radius: 2px;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
}
.wc-block-components-product-price del { color: var(--wp--preset--color--grafite); font-weight: 400; }
.wc-block-components-product-price ins { text-decoration: none; color: var(--wp--preset--color--ramato); }
.wc-block-product-template .wp-block-post-title {
	font-family: var(--wp--preset--font-family--figtree);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.35;
	letter-spacing: 0;
}
.wp-block-woocommerce-product-button.wc-block-components-product-button { align-items: flex-start; margin-top: 0.75rem; }
.wp-block-woocommerce-product-button .wp-block-button__link.wc-block-components-product-button__button {
	background: transparent;
	color: var(--wp--preset--color--tonalizzante);
	border: 1.5px solid var(--wp--preset--color--tonalizzante);
	border-radius: 3px;
	padding: 0.55rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	min-height: 0;
	width: auto;
}
.wp-block-woocommerce-product-button .wp-block-button__link.wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--tonalizzante);
	color: #fff;
}
.wc-block-product-template .wc-block-components-product-price { text-align: left; }

/* ---------- Consulenza ---------- */
.ciocca-consulenza__foto img { border-radius: 2px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/* ---------- Reparti ---------- */
.reparti {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
	column-gap: var(--wp--preset--spacing--40);
}
.reparti a {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0.15rem 1rem;
	padding: 1.25rem 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--inchiostro) 18%, transparent);
	color: var(--wp--preset--color--inchiostro);
	text-decoration: none;
}
.reparti__nome {
	font-family: var(--wp--preset--font-family--bodoni);
	font-size: var(--wp--preset--font-size--grande);
	line-height: 1.1;
}
.reparti__conta { font-size: var(--wp--preset--font-size--piccolo); color: var(--wp--preset--color--grafite); }
.reparti__descrizione { grid-column: 1 / -1; color: var(--wp--preset--color--grafite); }
.reparti a:hover .reparti__nome { color: var(--wp--preset--color--tonalizzante); font-style: italic; }

/* ---------- Servizio e piede ---------- */
.ciocca-servizio { border-top: 1px solid var(--wp--preset--color--velo); }
.ciocca-servizio h3 { font-family: var(--wp--preset--font-family--figtree); font-weight: 650; font-size: var(--wp--preset--font-size--base); }
.ciocca-piede a { text-decoration: none; }
.ciocca-piede a:hover { text-decoration: underline; }
.ciocca-piede .wp-block-site-title { margin-bottom: 1rem; }
.ciocca-piede__legale { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 1.25rem; opacity: 0.8; }
.ciocca-piede__legale p { margin: 0; }

/* ---------- Catalogo ---------- */
.ciocca-intro { max-width: 40rem; margin-top: 0.5rem; }
.ciocca-intro p { margin: 0; }
.filtro-esigenze ul,
.filtro-esigenze__lista {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.filtro-esigenze a,
.filtro-esigenze__lista a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.9rem 0.45rem 0.7rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--inchiostro) 22%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--inchiostro);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	background: var(--wp--preset--color--bianco);
}
.filtro-esigenze a:hover,
.filtro-esigenze__lista a:hover { border-color: var(--wp--preset--color--tonalizzante); color: var(--wp--preset--color--tonalizzante); }
.filtro-esigenze a[aria-current="page"] {
	background: var(--wp--preset--color--inchiostro);
	border-color: var(--wp--preset--color--inchiostro);
	color: var(--wp--preset--color--specchio);
}
/* Una mini ciocca al posto del pallino. */
.filtro-esigenze__ciocca {
	width: 0.45rem;
	height: 1.1rem;
	border-radius: 1px 1px 40% 40%;
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0 1px, transparent 1px 2px),
		var(--tono);
}
.ciocca-barra-catalogo { margin-top: var(--wp--preset--spacing--40); color: var(--wp--preset--color--grafite); font-size: var(--wp--preset--font-size--piccolo); }
.ciocca-barra-catalogo p { margin: 0; }
.woocommerce-ordering select,
.wc-block-catalog-sorting select {
	font: inherit;
	padding: 0.45rem 2rem 0.45rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--inchiostro) 22%, transparent);
	border-radius: 3px;
	background-color: var(--wp--preset--color--bianco);
}
.wp-block-query-pagination { margin-top: var(--wp--preset--spacing--40); }

/* ---------- Scheda prodotto ---------- */
.ciocca-scheda .wp-block-post-title { margin-top: 0; }
.ciocca-scheda .wc-block-components-product-price { font-weight: 600; }
.ciocca-scheda .wp-block-post-excerpt { color: var(--wp--preset--color--grafite); }
.consigliato-per p { margin: 0; font-size: var(--wp--preset--font-size--piccolo); color: var(--wp--preset--color--grafite); }
.consigliato-per .filtro-esigenze__lista { margin-top: 0.5rem; }
.ciocca-scheda .wp-block-add-to-cart-form { margin-top: var(--wp--preset--spacing--30); }
.ciocca-scheda .wp-block-add-to-cart-form .quantity input {
	font: inherit;
	height: 3rem;
	width: 4rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--inchiostro) 22%, transparent);
	border-radius: 3px;
	text-align: center;
}
.ciocca-scheda .single_add_to_cart_button { min-height: 3rem; }
.ciocca-scheda table.variations select {
	font: inherit;
	line-height: 1.4;
	height: auto;
	min-height: 2.9rem;
	min-width: 11rem;
	padding: 0.55rem 2rem 0.55rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--inchiostro) 22%, transparent);
	border-radius: 3px;
	background-color: var(--wp--preset--color--bianco);
}
.ciocca-rassicura { border-top: 1px solid var(--wp--preset--color--velo); padding-top: 1rem; margin-top: var(--wp--preset--spacing--30); }
.woocommerce-product-gallery img { border-radius: 2px; }
.ciocca-scheda .wp-block-woocommerce-product-image-gallery { max-width: none; }
.ciocca-scheda .woocommerce-product-gallery { width: 100% !important; float: none !important; }

@media (max-width: 781px) {
	.ciocca-apertura .wp-block-columns { gap: var(--wp--preset--spacing--40); }
	.mazzetta { --altezza: 15rem; }
	.ciocca__cartellino { font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
	.ciocca { transition: none; }
	.ciocca:hover, .ciocca:focus-visible { transform: none; }
}