/* ==========================================================================
   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;
}


/* --------------------------------------------------------------------------
   Shop Toolbar — sort dropdown (.woocommerce-ordering + result count)
   WooCommerce core usa float-right senza background né z-index: il
   <select> appare "trasparente" e le sue options cadono sotto le card
   prodotto. Qui forziamo layout sfondo solido, contrasto testo e
   z-index alto così la tendina è sempre sopra il resto.

   Specificità volutamente alta: html body.woocommerce form... — vince
   su Enfold dynamic-css e sui .avia_select JS wrapper.
   -------------------------------------------------------------------------- */

html body.woocommerce .woocommerce-notices-wrapper,
html body.woocommerce-page .woocommerce-notices-wrapper {
	position: relative !important;
	z-index: 50 !important;
	margin-bottom: 16px !important;
}

/* Result count "Mostra X-Y di N prodotti" */
html body.woocommerce .woocommerce-result-count,
html body.woocommerce-page .woocommerce-result-count {
	float: none !important;
	display: inline-block !important;
	margin: 0 16px 12px 0 !important;
	padding: 0 !important;
	color: #555 !important;
	font-size: 0.875rem !important;
	line-height: 38px !important;
}

html body.woocommerce form.woocommerce-ordering,
html body.woocommerce-page form.woocommerce-ordering {
	position: relative !important;
	z-index: 60 !important;
	float: none !important;
	display: inline-block !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
	background-color: #ffffff !important;
	background: #ffffff !important;
	border: 1px solid #d9c8b0 !important;
	border-radius: 4px !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
	min-width: 220px !important;
}

/* Freccia dropdown custom */
html body.woocommerce form.woocommerce-ordering::after,
html body.woocommerce-page form.woocommerce-ordering::after {
	content: '\25BE' !important; /* ▾ */
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: #7b2c2d !important;
	font-size: 0.85rem !important;
	pointer-events: none !important;
}

html body.woocommerce form.woocommerce-ordering select,
html body.woocommerce-page form.woocommerce-ordering select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background: transparent !important;
	background-color: transparent !important;
	color: #1a1a1a !important;
	font-size: 0.875rem !important;
	font-family: inherit !important;
	line-height: 1.2 !important;
	padding: 10px 36px 10px 14px !important;
	margin: 0 !important;
	border: none !important;
	cursor: pointer !important;
	min-width: 220px !important;
	min-height: 38px !important;
	outline: none !important;
}

html body.woocommerce form.woocommerce-ordering select:focus,
html body.woocommerce-page form.woocommerce-ordering select:focus {
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.4) !important;
	border-radius: 4px !important;
}

/* <option> nei menu aperti (Safari/FF rispettano, Chrome meno) */
html body.woocommerce form.woocommerce-ordering option,
html body.woocommerce-page form.woocommerce-ordering option {
	background-color: #ffffff !important;
	color: #1a1a1a !important;
}

/* --------------------------------------------------------------------------
   Plugin-style dropdown — UL-based sort/filter
   WooCommerce 8+ / 11+ usa <ul class="sort-param sort-param-order">
   anche senza plugin custom (catalog block-based). Markup tipico:

     <form ...><button>trigger</button><ul class="sort-param">
       <li><a>Default sorting</a></li>
       <li class="active"><a>Sort by popularity</a></li></ul></form>

   Nota sul display: NON forziamo display:block sui <li> perché il
   plugin alterna visibility via JS (display:none inline). Forzandolo
   si rompe il toggle. Stiliamo solo ciò che è già visibile e
   aggiungiamo :hover/:focus-within per garantire l'apertura se il
   JS si rompe.
   -------------------------------------------------------------------------- */

html body.woocommerce ul.sort-param,
html body.woocommerce-page ul.sort-param,
html body.woocommerce ul.sort-param-order,
html body.woocommerce-page ul.sort-param-order,
html body.woocommerce ul.sort-param-perpage,
html body.woocommerce-page ul.sort-param-perpage {
	position: relative !important;
	z-index: 60 !important;
	float: none !important;
	display: inline-block !important;
	margin: 0 8px 24px 0 !important;
	padding: 0 !important;
	background-color: #ffffff !important;
	background: #ffffff !important;
	color: #1a1a1a !important;
	border: 1px solid #d9c8b0 !important;
	border-radius: 4px !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
	min-width: 220px !important;
	list-style: none !important;
	font-size: 0.875rem !important;
	font-family: inherit !important;
	text-align: left !important;
}

/* Le <li> quando visibili — non forziamo display:block (romperebbe
   il toggle JS). Stylemole solo padding/bg/colore. */
html body.woocommerce ul.sort-param li,
html body.woocommerce-page ul.sort-param li,
html body.woocommerce ul.sort-param-order li,
html body.woocommerce-page ul.sort-param-order li,
html body.woocommerce ul.sort-param-perpage li,
html body.woocommerce-page ul.sort-param-perpage li {
	margin: 0 !important;
	padding: 0 !important;
	background-color: #ffffff !important;
	color: #1a1a1a !important;
	border: none !important;
	border-bottom: 1px solid #f0e8d8 !important;
	list-style: none !important;
	font-size: 0.875rem !important;
	line-height: 1.3 !important;
	white-space: nowrap !important;
}

/* Rimuovi chevron › / marker che WC 11 prepende alle voci.
   Il core WC usa ::before con content "›" o ">" — lo disattiviamo. */
html body.woocommerce ul.sort-param li::before,
html body.woocommerce-page ul.sort-param li::before,
html body.woocommerce ul.sort-param li::after,
html body.woocommerce-page ul.sort-param li::after,
html body.woocommerce ul.sort-param-order li::before,
html body.woocommerce-page ul.sort-param-order li::before {
	content: none !important;
	display: none !important;
}

html body.woocommerce ul.sort-param li > a,
html body.woocommerce-page ul.sort-param li > a,
html body.woocommerce ul.sort-param-order li > a,
html body.woocommerce-page ul.sort-param-order li > a,
html body.woocommerce ul.sort-param li > button,
html body.woocommerce-page ul.sort-param li > button,
html body.woocommerce ul.sort-param-order li > button,
html body.woocommerce-page ul.sort-param-order li > button {
	display: block !important;
	padding: 10px 14px !important;
	color: #1a1a1a !important;
	background: transparent !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	border: none !important;
	width: 100% !important;
	text-align: left !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}

html body.woocommerce ul.sort-param li > a:hover,
html body.woocommerce-page ul.sort-param li > a:hover,
html body.woocommerce ul.sort-param-order li > a:hover,
html body.woocommerce-page ul.sort-param-order li > a:hover,
html body.woocommerce ul.sort-param li > button:hover,
html body.woocommerce-page ul.sort-param li > button:hover,
html body.woocommerce ul.sort-param-order li > button:hover,
html body.woocommerce-page ul.sort-param-order li > button:hover {
	background-color: #f5f0e8 !important;
	color: #7b2c2d !important;
}

html body.woocommerce ul.sort-param li:last-child,
html body.woocommerce-page ul.sort-param li:last-child,
html body.woocommerce ul.sort-param-order li:last-child,
html body.woocommerce-page ul.sort-param-order li:last-child,
html body.woocommerce ul.sort-param-perpage li:last-child,
html body.woocommerce-page ul.sort-param-perpage li:last-child {
	border-bottom: none !important;
}

html body.woocommerce ul.sort-param li a,
html body.woocommerce-page ul.sort-param li a,
html body.woocommerce ul.sort-param-order li a,
html body.woocommerce-page ul.sort-param-order li a,
html body.woocommerce ul.sort-param li button,
html body.woocommerce-page ul.sort-param li button,
html body.woocommerce ul.sort-param-order li button,
html body.woocommerce-page ul.sort-param-order li button {
	color: #1a1a1a !important;
	text-decoration: none !important;
}

/* (continuazione sotto: blocco attivo/selezionato — vedi più avanti) */

/* Stato attivo/selezionato (più selettori per compatibilità plugin) */
html body.woocommerce ul.sort-param li.active,
html body.woocommerce-page ul.sort-param li.active,
html body.woocommerce ul.sort-param li.current,
html body.woocommerce-page ul.sort-param li.current,
html body.woocommerce ul.sort-param li.selected,
html body.woocommerce-page ul.sort-param li.selected,
html body.woocommerce ul.sort-param-order li.active,
html body.woocommerce-page ul.sort-param-order li.active,
html body.woocommerce ul.sort-param-perpage li.active,
html body.woocommerce-page ul.sort-param-perpage li.active,
html body.woocommerce ul.sort-param li[aria-selected="true"],
html body.woocommerce-page ul.sort-param li[aria-selected="true"] {
	background-color: #f5f0e8 !important;
	color: #7b2c2d !important;
	font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   Trigger + fallback open behavior
   WC 11.1.2 spesso usa un pattern con un <button> trigger e un <ul>
   che viene mostrato con JS (toggle di display / classe .open).
   Se il JS non gira (cache o altro), il dropdown resta "bloccato" in
   stato chiuso. Aggiungiamo fallback :hover / :focus-within per
   garantirne l'apertura visuale.
   ------------------------------------------------------------------------ */

/* Qualsiasi wrapper probabile del trigger */
html body.woocommerce form.woocommerce-ordering button,
html body.woocommerce-page form.woocommerce-ordering button,
html body.woocommerce [class*="sort-picker"] button,
html body.woocommerce-page [class*="sort-picker"] button,
html body.woocommerce .sort-param-button,
html body.woocommerce-page .sort-param-button {
	background-color: #ffffff !important;
	background: #ffffff !important;
	color: #1a1a1a !important;
	font-size: 0.875rem !important;
	font-family: inherit !important;
	padding: 10px 36px 10px 14px !important;
	border: 1px solid #d9c8b0 !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	min-width: 220px !important;
	min-height: 38px !important;
	text-align: left !important;
	position: relative !important;
	z-index: 60 !important;
}

/* Hover/focus sul wrapper ⇒ dropdown espanso (se il <ul> esiste accanto) */
html body.woocommerce .sort-param-order,
html body.woocommerce-page .sort-param-order,
html body.woocommerce .sort-param-perpage,
html body.woocommerce-page .sort-param-perpage,
html body.woocommerce ul.sort-param,
html body.woocommerce-page ul.sort-param {
	overflow: visible !important;
}

/* Se il plugin mette display:none inline sul <ul>, fallback:
   allo :hover/:focus-within dell'antenato probabile, forza visibile. */
html body.woocommerce form.woocommerce-ordering:hover ul,
html body.woocommerce-page form.woocommerce-ordering:hover ul,
html body.woocommerce form.woocommerce-ordering:focus-within ul,
html body.woocommerce-page form.woocommerce-ordering:focus-within ul,
html body.woocommerce [class*="sort-picker"]:hover ul,
html body.woocommerce-page [class*="sort-picker"]:hover ul,
html body.woocommerce [class*="sort-picker"]:focus-within ul,
html body.woocommerce-page [class*="sort-picker"]:focus-within ul {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Posizionamento dropdown aperto come popup sotto il trigger.
   Solo quando .is-open / .open / .active è presente. */
html body.woocommerce .is-open ul.sort-param,
html body.woocommerce-page .is-open ul.sort-param,
html body.woocommerce .open ul.sort-param,
html body.woocommerce-page .open ul.sort-param,
html body.woocommerce ul.sort-param.open,
html body.woocommerce-page ul.sort-param.open,
html body.woocommerce form.woocommerce-ordering:hover ul.sort-param,
html body.woocommerce-page form.woocommerce-ordering:hover ul.sort-param {
	position: absolute !important;
	top: calc(100% + 4px) !important;
	left: 0 !important;
	right: auto !important;
	width: 100% !important;
	min-width: 240px !important;
	background-color: #ffffff !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15) !important;
	z-index: 80 !important;
	border-radius: 4px !important;
}

/* Difesa contro eventuali wrapper JS aggiunti da Enfold (avia_select,
   select_container) — applichiamo lo stesso trattamento se presenti. */
html body.woocommerce .avia_select,
html body.woocommerce-page .avia_select,
html body.woocommerce .select_container,
html body.woocommerce-page .select_container {
	background-color: #ffffff !important;
	background: #ffffff !important;
	color: #1a1a1a !important;
	border: 1px solid #d9c8b0 !important;
	border-radius: 4px !important;
	z-index: 60 !important;
}

/* Qualsiasi altro <select> nel contesto shop — search, filtri, ecc. */
html body.woocommerce select,
html body.woocommerce-page select {
	background-color: #ffffff !important;
	color: #1a1a1a !important;
	border: 1px solid #d9c8b0 !important;
	border-radius: 4px !important;
	font-family: inherit !important;
}

/* Filtri widget (layered nav — "Filter by attribute" ecc.) */
html body.woocommerce .widget_layered_nav,
html body.woocommerce-page .widget_layered_nav {
	background-color: #ffffff !important;
	color: #1a1a1a !important;
	border: 1px solid #d9c8b0 !important;
	border-radius: 4px !important;
	padding: 12px 16px !important;
	margin-bottom: 16px !important;
	z-index: 50 !important;
	position: relative !important;
}

/* Wrapper flex opzionale per la toolbar — utile se in futuro si wrappano
   count + ordering in un unico <div class="karmati-shop__toolbar"> */
html body.woocommerce .karmati-shop__toolbar,
html body.woocommerce-page .karmati-shop__toolbar {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px 16px !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Category picker — label + indentazione sottocategorie
   -------------------------------------------------------------------------- */

/* Regole di sicurezza anti-override: forziamo visibility del contenuto
   testo (in alcuni casi Enfold o altri plugin mettono visibility:hidden
   o opacity:0 sui link interni ad ul con classi "sort-*" — debug suo:). */
html body.woocommerce ul.sort-param-cat li,
html body.woocommerce-page ul.sort-param-cat li {
	visibility: visible !important;
	opacity: 1 !important;
	overflow: visible !important;
}

html body.woocommerce ul.sort-param-cat li > a,
html body.woocommerce-page ul.sort-param-cat li > a,
html body.woocommerce ul.sort-param-cat li > span,
html body.woocommerce-page ul.sort-param-cat li > span {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	color: #1a1a1a !important;
	font-size: 0.875rem !important;
	line-height: 1.3 !important;
	text-indent: 0 !important;
	width: 100% !important;
	background: transparent !important;
	padding: 10px 14px !important;
	text-decoration: none !important;
	border: none !important;
	min-height: 38px !important;
	box-sizing: border-box !important;
}

html body.woocommerce ul.sort-param-cat li.karmati-cat-picker__label > span,
html body.woocommerce-page ul.sort-param-cat li.karmati-cat-picker__label > span {
	font-weight: 700 !important;
	color: #7b2c2d !important;
	letter-spacing: 0.02em !important;
	padding-right: 8px !important;
	cursor: default !important;
}

/* Sottocategoria: testo leggermente indentato + colore più tenue */
html body.woocommerce ul.sort-param-cat li.karmati-cat-picker__child > a,
html body.woocommerce-page ul.sort-param-cat li.karmati-cat-picker__child > a {
	padding-left: 28px !important;
	color: #555555 !important;
	font-style: italic !important;
}

html body.woocommerce ul.sort-param-cat li.karmati-cat-picker__child.active > a,
html body.woocommerce-page ul.sort-param-cat li.karmati-cat-picker__child.active > a {
	color: #7b2c2d !important;
}

/* ------------------------------------------------------------------ */
/* Raggruppamento prodotti "quasi identici" — swatch e mini-pallini.  */
/* Regole qui sotto usano specificità alta (body.woocommerce ...) per */
/* battere lo stile Enfold dinamico.                                   */
/* ------------------------------------------------------------------ */

/* Swatch nella scheda prodotto singola (sotto il titolo) */
body.woocommerce.single-product div.product .karmati-design-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0.5rem 0 1.25rem;
  padding: 0;
}
body.woocommerce.single-product div.product .karmati-design-swatches__item {
  display: inline-block;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: none;
  background-clip: padding-box;
  position: relative;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
body.woocommerce.single-product div.product .karmati-design-swatches__item:hover,
body.woocommerce.single-product div.product .karmati-design-swatches__item:focus-visible {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
  outline: none;
}
body.woocommerce.single-product div.product .karmati-design-swatches__item.is-active {
  box-shadow: 0 0 0 2px #111;
  cursor: default;
  transform: none;
}
body.woocommerce.single-product div.product .karmati-design-swatches__item.is-active:hover,
body.woocommerce.single-product div.product .karmati-design-swatches__item.is-active:focus-visible {
  transform: none;
}

/* Mini-pallini decorativi dentro la card (NON cliccabili) */
body.woocommerce.archive ul.products li.product .karmati-card-mini-swatches,
body.woocommerce ul.products li.product .karmati-card-mini-swatches {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 0 0 0.6rem;
  margin: 0;
}
body.woocommerce.archive ul.products li.product .karmati-card-mini-swatches__dot,
body.woocommerce ul.products li.product .karmati-card-mini-swatches__dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #ccc;
  flex: 0 0 auto;
}
body.woocommerce.archive ul.products li.product .karmati-card-mini-swatches__dot.is-current,
body.woocommerce ul.products li.product .karmati-card-mini-swatches__dot.is-current {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* Admin: color picker input per swatch_hex */
body.taxonomy-pa_colore .karmati-pg-color-input,
body.wp-admin .karmati-pg-color-input {
  width: 60px;
  height: 32px;
  padding: 2px;
  border: 1px solid #8c8f94;
  border-radius: 4px;
}