/*
Theme Name: Razzi Child
Theme URI: https://demo4.drfuri.com/razzi/
Author: DrFuri
Author URI: http://drfuri.com
Description: Razzi Child Theme.
Version: 1.0
License: GNU General Public License v2+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: razzi
Domain Path: /lang/
Tags: one-column, two-columns, left-sidebar, right-sidebar, full-width-template, post-formats, theme-options, threaded-comments, translation-ready
Template: razzi
*/

/* Brand carousel (homepage): respiro tra i loghi in rotazione */
.razzi-brands-carousel .brand-item {
	padding: 0 20px;
	box-sizing: border-box;
}
.razzi-brands-carousel .brand-item img {
	max-width: 100%;
	height: auto;
}
/* Scheda prodotto: pulsante "Aggiungi al carrello" salmone, più grande (rif. grafica variazioni/pulsante.png) */
.single-product div.product form.cart .product-button-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.single-product div.product form.cart .product-button-wrapper .quantity {
	margin: 0;
}
.single-product div.product form.cart .product-button-wrapper .single_add_to_cart_button {
	flex: 1 1 260px;
	min-width: 0;
	height: 56px;
	line-height: 56px;
	margin: 0;
	padding: 0 24px;
	border: none;
	border-radius: 14px;
	background-color: #f7aea6;
	color: #56112a;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	box-shadow: 0 6px 16px rgba(247, 174, 166, 0.45);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.single-product div.product form.cart .product-button-wrapper .single_add_to_cart_button .razzi-svg-icon {
	color: #56112a;
}
.single-product div.product form.cart .product-button-wrapper .single_add_to_cart_button:hover,
.single-product div.product form.cart .product-button-wrapper .single_add_to_cart_button:focus-visible {
	background-color: #f39a90;
	color: #56112a;
	opacity: 1;
	box-shadow: 0 8px 20px rgba(243, 154, 144, 0.55);
	transform: translateY(-1px);
}
/* Prima di scegliere colore/taglia resta salmone, solo attenuato */
.single-product div.product form.cart .product-button-wrapper .single_add_to_cart_button.disabled {
	background-color: #f7aea6;
	color: #56112a;
	opacity: 0.55;
	box-shadow: none;
	transform: none;
}
.single-product div.product form.cart .product-button-wrapper .rz-wishlist-button {
	margin: 0;
}

/* Scheda prodotto: pulsante PayPal e sezione Scalapay sotto "Aggiungi al carrello" */
.single-product div.product .summary .ppc-button-wrapper {
	margin: 12px 0 0;
}
.single-product div.product .summary .ppc-button-wrapper #ppc-button-ppcp-gateway {
	border-radius: 14px;
	overflow: hidden;
}
.single-product div.product .summary .hobbs-scalapay-anchor + div {
	margin: 16px 0 8px;
	padding: 14px 16px;
	border-radius: 14px;
	background-color: #fdf1ef;
}

/* Griglie prodotto: brand accanto alla categoria ("Categoria - Brand", rif. allegato cliente) */
ul.products li.product .meta-cat,
ul.products.product-loop-layout-1 li.product .meta-cat {
	display: inline-block;
}
ul.products li.product .meta-cat + .meta-brand::before {
	content: "-";
	margin: 0 5px;
	color: var(--rz-text-color-gray);
}

/* Carosello banner (home): con lo zoom di Windows (125/150%) i bordi delle slide cadono
   a mezzo pixel e tra una foto e l'altra traspare una riga bianca. Ogni banner sborda di
   1px sotto la slide successiva, che lo copre: al posto del bianco resta la foto.
   La slide (.banner-item.swiper-slide) non deve tagliare lo sbordo; il carosello sì. */
.razzi-banner-carousel .banner-item.swiper-slide {
	overflow: visible;
}
.razzi-banner-carousel .banner-item .banner-img {
	margin-right: -1px;
}
/* Pulsanti del carosello: il tema tronca il testo con "…" (ellipsis) e, per un
   arrotondamento di mezzo pixel con lo zoom di Windows, al posto della freccia
   comparivano i tre puntini. Il pulsante ha già 26px di margine interno: niente troncamento. */
.razzi-banner-carousel .button-text {
	overflow: visible;
	text-overflow: clip;
}

/* Chi siamo e Contattaci, hero Slider Revolution "chi-siamo-hero" / "contattaci-hero": velatura
   noce sopra le foto (anche durante il Ken Burns) e sotto il titolo, così si legge su ogni slide. */
sr7-module[data-alias="chi-siamo-hero"] sr7-bg::after,
sr7-module[data-alias="contattaci-hero"] sr7-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2; /* il canvas del Ken Burns ha z-index 1: la velatura deve stargli sopra */
	background-color: rgba(61, 42, 31, 0.28);
	pointer-events: none;
}
/* Ombra grigia scura sul titolo: lo slider scrive la sua ombra in linea, serve !important. */
sr7-module[data-alias="chi-siamo-hero"] sr7-txt,
sr7-module[data-alias="chi-siamo-hero"] h2,
sr7-module[data-alias="contattaci-hero"] sr7-txt,
sr7-module[data-alias="contattaci-hero"] h2 {
	text-shadow: 0 2px 4px rgba(30, 30, 30, 0.45), 0 0 20px rgba(30, 30, 30, 0.55) !important;
}

/* Chi siamo: foto "Il negozio", "Una piccola famiglia" e le 4 della galleria con lo stesso zoom
   al passaggio del mouse dei banner categoria in home (tema: scale 1.05, transizione .3s). */
.elementor-element-19a047b,
.elementor-element-e7bc62e,
.elementor-element-c7e9ad8,
.elementor-element-5b4a736,
.elementor-element-fcb8f3b,
.elementor-element-25d36d8 {
	overflow: hidden;
}
.elementor-element-19a047b img,
.elementor-element-e7bc62e img,
.elementor-element-c7e9ad8 img,
.elementor-element-5b4a736 img,
.elementor-element-fcb8f3b img,
.elementor-element-25d36d8 img {
	display: block;
	transform: scale(1.01);
	transition: transform .3s;
}
.elementor-element-19a047b:hover img,
.elementor-element-e7bc62e:hover img,
.elementor-element-c7e9ad8:hover img,
.elementor-element-5b4a736:hover img,
.elementor-element-fcb8f3b:hover img,
.elementor-element-25d36d8:hover img {
	transform: scale(1.05);
}

/* Banner di categoria (home): ombra morbida su titolo e "Scopri di più", in aggiunta alla
   velatura noce impostata nel widget, per leggerli anche sulle zone chiare delle foto. */
.razzi-banner .razzi-banner-content__title,
.razzi-banner .razzi-banner-content__button {
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

/* Contattaci, modulo Contact Form 7 (id 598, markup .hobbs-cf): campi crema con bordo caldo,
   email e telefono affiancati, privacy su una riga, pulsante bordeaux. Il tema Razzi dà a ogni
   input width 100% e margin-bottom 30px (anche alla casella privacy): qui si azzera. */
.razzi-contact-form-7 .hobbs-cf {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* gli input hanno size="40": senza minmax la griglia non li stringe */
	gap: 22px;
	padding: 36px 40px 40px;
	background-color: #fbf8f6;
	border: 1px solid #ece4e0;
	border-radius: 10px;
}
.razzi-contact-form-7 .hobbs-cf p {
	margin: 0;
}
.razzi-contact-form-7 .hobbs-cf__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 22px;
}
.razzi-contact-form-7 .hobbs-cf__field label {
	display: block;
	margin-bottom: 8px;
	color: #3d2a1f;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.razzi-contact-form-7 .hobbs-cf__req {
	color: #5e2c2a;
}
.razzi-contact-form-7 .hobbs-cf__opt {
	color: #8a7b74;
	font-weight: 400;
}
.razzi-contact-form-7 .hobbs-cf input:not([type="submit"]):not([type="checkbox"]),
.razzi-contact-form-7 .hobbs-cf select,
.razzi-contact-form-7 .hobbs-cf textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 16px;
	height: 50px;
	border: 1px solid #ddd2cc;
	border-radius: 6px;
	background-color: #fff;
	color: #3d2a1f;
	font-size: 15px;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.razzi-contact-form-7 .hobbs-cf textarea {
	height: auto;
	min-height: 150px;
	padding: 14px 16px;
	line-height: 1.6;
	resize: vertical;
}
.razzi-contact-form-7 .hobbs-cf select {
	padding-right: 44px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235e2c2a' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	cursor: pointer;
}
.razzi-contact-form-7 .hobbs-cf ::placeholder {
	color: #a89a93;
	opacity: 1;
}
.razzi-contact-form-7 .hobbs-cf input:not([type="submit"]):not([type="checkbox"]):focus,
.razzi-contact-form-7 .hobbs-cf select:focus,
.razzi-contact-form-7 .hobbs-cf textarea:focus {
	border-color: #5e2c2a;
	box-shadow: 0 0 0 3px rgba(94, 44, 42, 0.12);
	outline: none;
}
.razzi-contact-form-7 .hobbs-cf .wpcf7-not-valid {
	border-color: #b3261e !important;
}
.razzi-contact-form-7 .hobbs-cf .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #b3261e;
	font-size: 13px;
}
/* privacy: casella e testo sulla stessa riga */
.razzi-contact-form-7 .hobbs-cf__privacy .wpcf7-list-item {
	margin: 0;
}
.razzi-contact-form-7 .hobbs-cf__privacy label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: #5b4a42;
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}
.razzi-contact-form-7 .hobbs-cf__privacy input[type="checkbox"] {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: #5e2c2a;
	cursor: pointer;
}
.razzi-contact-form-7 .hobbs-cf__privacy a {
	color: #5e2c2a;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.razzi-contact-form-7 .hobbs-cf__submit p {
	display: flex;
	align-items: center;
	gap: 12px;
}
.razzi-contact-form-7 .hobbs-cf .wpcf7-submit {
	height: 52px;
	padding: 0 36px;
	border: none;
	border-radius: 6px;
	background-color: #5e2c2a;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.razzi-contact-form-7 .hobbs-cf .wpcf7-submit:hover,
.razzi-contact-form-7 .hobbs-cf .wpcf7-submit:focus-visible {
	background-color: #3d2a1f;
	transform: translateY(-1px);
}
.razzi-contact-form-7 .hobbs-cf .wpcf7-submit:disabled {
	opacity: 0.6;
	transform: none;
}
.razzi-contact-form-7 .wpcf7-response-output {
	margin: 16px 0 0 !important;
	padding: 12px 16px !important;
	border-radius: 6px;
	font-size: 14px;
}
@media (max-width: 767px) {
	.razzi-contact-form-7 .hobbs-cf {
		gap: 18px;
		padding: 24px 20px 26px;
	}
	.razzi-contact-form-7 .hobbs-cf__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
	.razzi-contact-form-7 .hobbs-cf__submit p {
		display: block;
	}
	.razzi-contact-form-7 .hobbs-cf .wpcf7-submit {
		width: 100%;
	}
}

/* Contattaci, colonna recapiti: le intestazioni (widget Razzi Icon Box) non hanno icona,
   ma il tema lascia il contenitore vuoto e il titolo rientra; recapiti con icona bordeaux. */
.elementor-widget-razzi-icon-box.hobbs-recapiti-titolo .razzi-icon-box__icon {
	display: none; /* il tema lo forza a inline-flex con .elementor-position-left */
}
.hobbs-recapiti-titolo .razzi-icon-box__content {
	padding: 0;
	margin: 0;
}
.hobbs-recapito .elementor-icon-list-icon {
	flex: 0 0 18px;
	justify-content: center;
}
.hobbs-recapito .elementor-icon-list-icon svg {
	width: 16px;
	height: 16px;
}
.hobbs-recapito .elementor-icon-list-item > a,
.hobbs-recapito .elementor-icon-list-item {
	align-items: center;
}
.hobbs-recapito .elementor-icon-list-text {
	line-height: 1.6;
}

/* Carosello banner (home) su laptop, tablet e mobile: le foto sono 1920×800, quindi le slide
   diventano basse (150–210px) e il tema, che tira il titolo di 44px sopra il pulsante con
   margin-bottom:-114px, li sovrappone. Sotto i 1366px la slide prende un formato più alto
   (la foto viene ritagliata al centro) e titolo e pulsante si impilano in basso. */
@media (max-width: 1366px) {
	.razzi-banner-carousel .banner-item .banner-img img {
		aspect-ratio: 16 / 10;
		height: auto;
		object-fit: cover;
	}
	.razzi-banner-carousel .banner-item .banner-content {
		justify-content: flex-end;
		gap: 16px;
		padding: 0 20px 28px;
	}
	.razzi-banner-carousel .banner-item .banner-title {
		margin: 0;
		padding: 0;
		font-size: 34px;
	}
	.razzi-banner-carousel .banner-item .button-link {
		margin: 0;
		padding: 0;
	}
	.razzi-banner-carousel .banner-item .button-text {
		line-height: 48px;
		min-width: 0;
	}
}
@media (max-width: 767px) {
	.razzi-banner-carousel .banner-item .banner-img img {
		aspect-ratio: 4 / 3;
	}
	.razzi-banner-carousel .banner-item .banner-content {
		gap: 12px;
		padding-bottom: 22px;
	}
	.razzi-banner-carousel .banner-item .banner-title {
		font-size: 28px;
	}
	.razzi-banner-carousel .banner-item .button-text {
		line-height: 44px;
		padding: 0 20px;
	}
}

/* Home, slider mobile (slider-1-mobile): ombra più marcata sui titoli delle slide con foto,
   che su telefono stanno anche su sfondi chiari (divano bianco). La slide video (data-key 11) resta com'è. */
sr7-module[data-alias="slider-1-mobile"] sr7-slide:not([data-key="11"]) h2 {
	text-shadow: 0 2px 4px rgba(30, 30, 30, 0.45), 0 0 20px rgba(30, 30, 30, 0.55) !important;
}

/* Instagram: griglia statica finché il feed Smash Balloon non ha un account (vedi functions.php,
   hobbs_ig_live); poi feed vivo al suo posto, con lo zoom al passaggio del mouse dei banner. */
body:not(.hobbs-ig-live) .hobbs-ig-feed,
body.hobbs-ig-live .hobbs-ig-static {
	display: none;
}
.hobbs-ig-feed #sb_instagram {
	padding-bottom: 0 !important;
}
.hobbs-ig-feed #sb_instagram .sbi_photo_wrap {
	overflow: hidden;
}
.hobbs-ig-feed #sb_instagram .sbi_photo img {
	transform: scale(1.01);
	transition: transform .3s;
}
.hobbs-ig-feed #sb_instagram .sbi_item:hover .sbi_photo img {
	transform: scale(1.05);
}

/* Contattaci su mobile: meno spazio sopra e sotto il titolo di pagina (il tema mette 50px + 50px,
   più i 30px di Content Top Spacing) e niente linee divisorie fra i blocchi dei recapiti. */
@media (max-width: 767px) {
	.page-id-584 #page-header.page-header--layout-1 .page-header__title {
		padding-top: 18px;
		padding-bottom: 18px;
	}
	.page-id-584 .site-content.custom-top-spacing {
		padding-top: 0;
	}
	/* il bordo è sul widget stesso (.elementor-584 .elementor-element.elementor-element-…) */
	.page-id-584 .elementor-584 .elementor-element.elementor-element-73fee75,
	.page-id-584 .elementor-584 .elementor-element.elementor-element-6c1ee6a {
		border-width: 0;
	}
}

/* Home, griglia banner 2x2 (Borse, Camicie, Abiti, Maglieria): a bandiera su PC/tablet, centrati su mobile */
@media (max-width: 767px) {
	.elementor-15294 .elementor-widget-razzi-banner .razzi-banner-content {
		justify-content: center;
		padding-left: 20px;
		padding-right: 20px;
	}
	.elementor-15294 .elementor-widget-razzi-banner .razzi-banner-content-inner {
		text-align: center;
	}
	.elementor-15294 .elementor-widget-razzi-banner .razzi-banner-button-group {
		justify-content: center;
	}
}

/* Shop, categorie e brand: prodotti più grandi (colonna filtri più stretta: 22% invece di 31%) */
@media (min-width: 1200px) {
	.razzi-catalog-page.sidebar-content .catalog-sidebar,
	.razzi-catalog-page.sidebar-content .primary-sidebar {
		width: 22%;
	}
	.razzi-catalog-page.sidebar-content .content-area {
		width: 78%;
		padding-left: 30px;
	}
}

/* Pulsante "Segui il canale WhatsApp" ([hobbs_wa_channel], footer e Contattaci) */
.hobbs-wa-channel a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	background: #25d366;
	color: #fff !important;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background .2s;
}
.hobbs-wa-channel a:hover {
	background: #1ebe5a;
}