/* ==========================================================================
   Shop — karmatistore.com
   Usato su: /shop/, categorie prodotto, tag prodotto, singolo prodotto
   (inclusi i "Prodotti correlati" nella pagina singolo prodotto)

   NOTA specificità: !important è necessario dove Enfold (layout.min.css,
   dynamic-css.php) sovrascrive il layout con regole ad alta specificità
   o stili inline generati lato server.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Layout pagina archivio (/shop/)
   -------------------------------------------------------------------------- */

body .karmati-shop-page {
	width: 100% !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 0 1rem !important;
	box-sizing: border-box !important;
}

body .karmati-shop__grid {
	display: grid !important;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) ) !important;
	gap: 2rem !important;
	width: 100% !important;
	box-sizing: border-box !important;
}


/* --------------------------------------------------------------------------
   Grid prodotti correlati (pagina singolo prodotto)

   STRUTTURA REALE (da DevTools):
     section.related.products
       ul.products.columns-4
         article.karmati-product-card   ← grid item diretto, NO <li>

   WooCommerce applica regole proprie su .related ul e .related ul.products
   che vanno esplicitamente sovrascritte.
   align-items: start è cruciale: senza, le card si allungano a riempire
   la riga del grid (stretch) invece di avere altezza naturale.
   -------------------------------------------------------------------------- */

.related ul.products,
body.woocommerce .related ul.products,
body.woocommerce-page .related ul.products {
	display: grid !important;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) ) !important;
	gap: 2rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	width: 100% !important;
}

/* article = grid item diretto */
.related ul.products article.karmati-product-card,
body.woocommerce .related ul.products article.karmati-product-card,
body.woocommerce-page .related ul.products article.karmati-product-card {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}


/* --------------------------------------------------------------------------
   Card prodotto (.karmati-product-card)
   -------------------------------------------------------------------------- */

body .karmati-product-card {
	display: flex !important;
	flex-direction: column !important;
	border-radius: 8px !important;
	overflow: visible !important;
	background: #fff !important;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.07 ) !important;
	transition: box-shadow 0.3s !important;
	padding: 0 !important;
	margin: 0 !important;
}

body .karmati-product-card:hover {
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.13 ) !important;
}


/* --------------------------------------------------------------------------
   Slideshow — struttura
   -------------------------------------------------------------------------- */

body .kpc-slideshow {
	position: relative !important;
}

body .kpc-track {
	position: relative !important;
	width: 100% !important;
	/* padding-top 100% = quadrato garantito anche con figli position:absolute.
	   aspect-ratio non funziona quando tutti i figli sono absolute (nessun
	   figlio in-flow = altezza intrinseca zero). */
	padding-top: 100% !important;
	height: 0 !important;
	overflow: hidden !important;
	background: #f5f5f5 !important;
	display: block !important;
	border-radius: 8px 8px 0 0 !important;
}

/* Tutte le slide: assolute e invisibili */
body .kpc-slide {
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	opacity: 0 !important;
	transition: opacity 0.45s ease !important;
	pointer-events: none !important;
}

/* Solo la slide attiva è visibile */
body .kpc-slide.active {
	opacity: 1 !important;
	pointer-events: auto !important;
}

body .kpc-slide img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important; /* contain per non tagliare le magliette */
	display: block !important;
	padding: 8px !important;
	box-sizing: border-box !important;
}

body .kpc-no-img {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 3rem !important;
	color: #ccc !important;
}


/* --------------------------------------------------------------------------
   Frecce navigazione slideshow
   -------------------------------------------------------------------------- */

body .kpc-arrow {
	position: absolute !important;
	top: 50% !important;
	transform: translateY( -50% ) !important;
	z-index: 20 !important;
	background: rgba( 255, 255, 255, 0.85 ) !important;
	border: none !important;
	border-radius: 50% !important;
	width: 32px !important;
	height: 32px !important;
	font-size: 14px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	opacity: 0 !important;
	transition: opacity 0.2s, background 0.2s !important;
}

body .karmati-product-card:hover .kpc-arrow {
	opacity: 1 !important;
}

body .kpc-arrow:hover {
	background: #fff !important;
}

body .kpc-prev { left: 8px !important; }
body .kpc-next { right: 8px !important; }


/* --------------------------------------------------------------------------
   Dots navigazione slideshow
   -------------------------------------------------------------------------- */

body .kpc-dots {
	display: flex !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 8px 0 4px !important;
}

body .kpc-dot {
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	border: none !important;
	background: #ccc !important;
	cursor: pointer !important;
	padding: 0 !important;
	transition: background 0.3s !important;
}

body .kpc-dot.active {
	background: #333 !important;
}


/* --------------------------------------------------------------------------
   Info prodotto (sotto la slide)
   -------------------------------------------------------------------------- */

body .kpc-info {
	padding: 1rem 1.25rem 1.5rem !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.4rem !important;
	flex: 1 !important;
}

body .kpc-title {
	font-size: 1rem !important;
	font-weight: 600 !important;
	margin: 0 !important;
}

body .kpc-title a {
	color: inherit !important;
	text-decoration: none !important;
}

body .kpc-title a:hover {
	text-decoration: underline !important;
}

body .kpc-price {
	font-size: 0.95rem !important;
	color: #555 !important;
}

body .kpc-desc {
	font-size: 0.85rem !important;
	color: #777 !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}

body .kpc-btn {
	display: inline-block !important;
	margin-top: auto !important;
	padding-top: 0.75rem !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: #333 !important;
	text-decoration: none !important;
}

body .kpc-btn:hover {
	text-decoration: underline !important;
}


/* --------------------------------------------------------------------------
   Fix Enfold: layout.min.css imposta border-right su .content
   -------------------------------------------------------------------------- */

body.woocommerce .content,
body.woocommerce-page .content {
	border-right: none !important;
	margin-right: 0 !important;
}