/*
Theme Name: VIBE Tema Negozio
Theme URI: https://usethevibe.com
Author: VIBE
Author URI: https://usethevibe.com
Description: Il tema dei negozi VIBE: home con la Vetrina (banner e prodotti in evidenza), catalogo, scheda prodotto, carrello e cassa di WooCommerce. Logo e colori del cliente con wp vibe-kit stile.
Version: 0.2.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vibe-tema
Tags: e-commerce, block-patterns, full-site-editing, wide-blocks
*/

/*
 * Quello che theme.json non sa fare. Colori e caratteri vengono sempre dalle variabili di theme.json
 * (--wp--preset--*), così le varianti e i colori del cliente valgono anche qui.
 */

:root {
	--vibe-radius: 14px;
	--vibe-radius-small: 8px;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:where(img) {
	height: auto;
}

/* Collegamenti: sottolineatura discreta, che compare più netta al passaggio. */
:where(.wp-site-blocks) a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

:where(.wp-site-blocks) :focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-2);
	outline-offset: 2px;
}

/* ─────────── Testata ─────────── */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.vibe-avviso p {
	margin: 0;
	letter-spacing: 0.01em;
}

.vibe-testata {
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
}

.vibe-testata .wp-block-site-logo img {
	max-height: 56px;
	width: auto;
}

.vibe-testata .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
}

.vibe-testata .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.4em;
}

.vibe-testata .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.vibe-testata .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
	box-shadow: inset 0 -2px 0 currentColor;
}

.vibe-azioni {
	gap: 0.25rem !important;
}

.vibe-azioni .wp-block-search__button,
.vibe-azioni .wc-block-customer-account__account-icon,
.vibe-azioni .wc-block-mini-cart__button {
	color: var(--wp--preset--color--contrast);
}

.vibe-azioni .wp-block-search__button {
	border: 0;
	background: none;
	padding: 0.5rem;
}

.vibe-azioni .wp-block-search__button svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.vibe-azioni .wp-block-search.wp-block-search__searchfield-hidden .wp-block-search__input {
	border: 0;
}

.vibe-azioni .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding-inline: 1rem;
}

.vibe-azioni .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

/* Su telefono: logo più piccolo, menu a scomparsa a sinistra. */
@media (max-width: 781px) {
	.vibe-testata .wp-block-site-logo img {
		max-height: 40px;
	}

	.vibe-testata__riga {
		gap: 0.5rem !important;
	}

	.vibe-testata__riga > .wp-block-navigation {
		order: -1;
	}
}

/* ─────────── Sezioni della home ─────────── */

.vibe-sezione__testa {
	gap: var(--wp--preset--spacing--30);
}

.vibe-sezione__testa h2 {
	margin: 0;
}

.vibe-sezione__testa a {
	font-family: var(--wp--preset--font-family--titoli);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.vibe-sezione__testa a:hover {
	text-decoration: underline;
}

/* Nella home lo spazio tra le sezioni lo dà il gruppo (blockGap): niente margini in più. */
.vibe-home > .vibe-banner,
.vibe-home > .vibe-sezione {
	margin-bottom: 0;
}

.vibe-sezione__titolo {
	font-size: var(--wp--preset--font-size--x-large);
}

.vibe-vantaggi {
	border-block: 1px solid var(--wp--preset--color--line);
}

.vibe-vantaggi svg {
	width: 28px;
	height: 28px;
	color: var(--wp--preset--color--accent);
}

.vibe-vantaggi h3 {
	margin-block: 0.5rem 0.25rem;
	font-size: var(--wp--preset--font-size--medium);
}

.vibe-vantaggi p {
	margin: 0;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}

/* ─────────── Schede prodotto: stesse in tutte le griglie ───────────
 * Le griglie a blocchi (catalogo, correlati) e quelle classiche degli shortcode (Vetrina, Novità)
 * devono sembrare la stessa cosa.
 */

.wc-block-product-template .wc-block-product,
.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: left;
}

.wc-block-product-template .wc-block-components-product-image,
.woocommerce ul.products li.product a img {
	overflow: hidden;
	margin: 0 0 0.9rem !important;
	border-radius: var(--vibe-radius);
	background: var(--wp--preset--color--base-2);
}

.wc-block-product-template .wc-block-components-product-image img,
.woocommerce ul.products li.product a img {
	aspect-ratio: 1;
	width: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.wc-block-product-template .wc-block-components-product-image img {
	margin: 0;
}

.wc-block-product-template .wc-block-product:hover .wc-block-components-product-image img,
.woocommerce ul.products li.product:hover a img {
	transform: scale(1.03);
}

.wc-block-product-template .wp-block-post-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 0.25rem;
	padding: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--titoli);
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
}

.wc-block-product-template .wp-block-post-title a {
	text-decoration: none;
}

.wc-block-product-template .wc-block-components-product-price,
.woocommerce ul.products li.product .price {
	margin: 0 0 0.9rem !important;
	color: var(--wp--preset--color--contrast) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 700;
	text-align: left !important;
}

.wc-block-components-product-price del,
.woocommerce ul.products li.product .price del {
	margin-right: 0.35em;
	color: var(--wp--preset--color--contrast-2);
	font-weight: 400;
	opacity: 1;
}

.wc-block-components-product-price ins,
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

/* Pulsante della scheda: contorno, si riempie al passaggio. In fondo alla scheda, allineato tra le colonne. */
.wc-block-product-template .wp-block-woocommerce-product-button,
.woocommerce ul.products li.product .button {
	margin-top: auto !important;
}

/* Doppia classe: WooCommerce toglie il bordo ai pulsanti delle griglie a blocchi con regole più specifiche. */
.wc-block-product-template .wp-block-button__link.wc-block-components-product-button__button,
.wc-block-product-template .wp-block-button__link,
.woocommerce ul.products li.product .button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.65em 1.2em;
	border: 1.5px solid var(--wp--preset--color--accent) !important;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--titoli);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.wc-block-product-template .wp-block-button__link.wc-block-components-product-button__button:hover,
.wc-block-product-template .wp-block-button__link:hover,
.woocommerce ul.products li.product .button:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-text);
}

.woocommerce ul.products li.product .added_to_cart {
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* Etichetta «In offerta». */
.wc-block-components-product-sale-badge,
.woocommerce span.onsale {
	top: 0.75rem !important;
	right: 0.75rem !important;
	left: auto !important;
	min-width: 0;
	min-height: 0;
	margin: 0 !important;
	padding: 0.3em 0.8em !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--wp--preset--color--accent-2) !important;
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--titoli);
	font-size: 0.75rem !important;
	font-weight: 700;
	line-height: 1.4 !important;
	text-transform: none;
}

.woocommerce ul.products li.product .onsale {
	position: absolute;
	z-index: 2;
}

/* Griglia classica degli shortcode: colonne vere, due su telefono. */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(var(--vibe-colonne, 4), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
}

.woocommerce ul.products.columns-2 { --vibe-colonne: 2; }
.woocommerce ul.products.columns-3 { --vibe-colonne: 3; }
.woocommerce ul.products.columns-5 { --vibe-colonne: 5; }
.woocommerce ul.products.columns-6 { --vibe-colonne: 6; }

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none !important;
}

.woocommerce ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

@media (max-width: 781px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	/* Griglie a blocchi (prodotti correlati): due per riga anche su telefono, come le altre. */
	.wc-block-product-template.is-flex-container {
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	.wc-block-product-template.is-flex-container > li {
		width: calc(50% - var(--wp--preset--spacing--30) / 2) !important;
		margin: 0 !important;
	}
}

/* ─────────── Catalogo ─────────── */

.vibe-catalogo__barra {
	padding-block: 0.75rem;
	border-block: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}

.vibe-catalogo__barra .woocommerce-ordering select,
.vibe-catalogo__barra select {
	padding: 0.45rem 2rem 0.45rem 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-woocommerce-breadcrumbs,
.woocommerce .woocommerce-breadcrumb {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-woocommerce-breadcrumbs a {
	color: inherit;
}

.wp-block-query-pagination {
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--titoli);
	font-weight: 600;
}

.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-text);
}

/* ─────────── Scheda prodotto ─────────── */

.vibe-prodotto__galleria .wp-block-woocommerce-product-image-gallery,
.vibe-prodotto__galleria .woocommerce-product-gallery {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
}

.vibe-prodotto__galleria .woocommerce-product-gallery__trigger {
	top: 1rem;
	right: 1rem;
}

.vibe-prodotto__galleria .woocommerce-product-gallery__image img,
.vibe-prodotto__galleria .wc-block-product-gallery-large-image img {
	border-radius: var(--vibe-radius);
}

.vibe-prodotto__galleria .flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.5rem;
	margin-top: 0.5rem !important;
}

.vibe-prodotto__galleria .flex-control-thumbs li {
	width: auto !important;
	margin: 0 !important;
}

.vibe-prodotto__galleria .flex-control-thumbs img {
	border-radius: var(--vibe-radius-small);
}

.vibe-prodotto__info .wc-block-components-product-price {
	font-size: var(--wp--preset--font-size--x-large) !important;
	font-weight: 800;
}

.vibe-prodotto__info .wp-block-add-to-cart-form .quantity .qty,
.vibe-prodotto__info form.cart .quantity .qty {
	height: 3rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
}

.vibe-prodotto__info form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block: var(--wp--preset--spacing--40);
}

.vibe-prodotto__info form.cart .single_add_to_cart_button {
	flex: 1 1 14rem;
	min-height: 3rem;
}

.vibe-prodotto__info form.cart.variations_form {
	display: block;
}

.vibe-prodotto__info .stock {
	font-weight: 600;
}

.vibe-prodotto__info .stock.in-stock {
	color: #1F7A4D;
}

.vibe-prodotto__info .stock.out-of-stock {
	color: #B42318;
}

.vibe-prodotto__meta {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}

.vibe-prodotto__meta a {
	color: inherit;
}

.wp-block-woocommerce-product-details .wc-tabs {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* ─────────── Piè di pagina ─────────── */

.vibe-piede h2 {
	margin-bottom: 0.75rem;
	font-size: var(--wp--preset--font-size--medium);
}

.vibe-piede p,
.vibe-piede li {
	margin-block: 0.35rem;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}

.vibe-piede ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vibe-piede a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.vibe-piede a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.vibe-piede__fondo {
	border-top: 1px solid var(--wp--preset--color--line);
}

.vibe-piede__fondo p {
	margin: 0;
	font-size: 0.8125rem;
}

/* Firma VIBE: sempre a destra, anche quando le note legali vanno a capo (selettore doppio: WordPress
   azzera i margini dei figli dei gruppi in riga con «.is-layout-flex > :is(*, div)»). */
.vibe-piede__fondo > .vibe-firma {
	display: inline-flex;
	margin-left: auto;
	line-height: 0;
}

.vibe-firma svg {
	display: block;
	width: auto;
	height: 22px;
}

.vibe-piede a.vibe-firma:hover,
.vibe-piede a.vibe-firma:focus-visible {
	opacity: 0.8;
}