/* Katopsis — stili base.
   Struttura minima. Il design definitivo arriverà in una fase successiva. */

:root {
	--kt-bg: #07070f;
	--kt-deep: #0d0d1a;
	--kt-card: #10101e;
	--kt-fg: #f0ead8;
	--kt-accent: #c8a96e;
	--kt-gold-dim: rgba(200, 169, 110, 0.35);
	--kt-gold-faint: rgba(200, 169, 110, 0.1);
	--kt-cream-dim: rgba(240, 234, 216, 0.6);
	--kt-cream-faint: rgba(240, 234, 216, 0.25);
	--kt-terra: #8b5e3c;
	--kt-terra-dim: rgba(139, 94, 60, 0.5);
	--kt-max-width: 72rem;
	--kt-measure: 56rem;
	--kt-space: 1.5rem;
	--kt-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--kt-display: "Cinzel", "Cormorant Garamond", Georgia, serif;
	--kt-mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--kt-bg);
	color: var(--kt-fg);
	font-family: var(--kt-serif);
	font-size: 1.05rem;
	line-height: 1.6;
	overflow-x: hidden;
}

/* Cielo stellato fisso sullo sfondo. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image:
		radial-gradient(1px 1px at 15% 20%, rgba(200, 169, 110, 0.6) 0%, transparent 100%),
		radial-gradient(1px 1px at 45% 8%, rgba(240, 234, 216, 0.4) 0%, transparent 100%),
		radial-gradient(1.5px 1.5px at 72% 15%, rgba(200, 169, 110, 0.5) 0%, transparent 100%),
		radial-gradient(1px 1px at 88% 35%, rgba(240, 234, 216, 0.3) 0%, transparent 100%),
		radial-gradient(1px 1px at 25% 55%, rgba(200, 169, 110, 0.4) 0%, transparent 100%),
		radial-gradient(1px 1px at 60% 45%, rgba(240, 234, 216, 0.3) 0%, transparent 100%),
		radial-gradient(1.5px 1.5px at 8% 75%, rgba(200, 169, 110, 0.5) 0%, transparent 100%),
		radial-gradient(1px 1px at 92% 70%, rgba(240, 234, 216, 0.35) 0%, transparent 100%),
		radial-gradient(1px 1px at 38% 85%, rgba(200, 169, 110, 0.4) 0%, transparent 100%),
		radial-gradient(1px 1px at 78% 90%, rgba(240, 234, 216, 0.3) 0%, transparent 100%),
		radial-gradient(1px 1px at 55% 75%, rgba(200, 169, 110, 0.3) 0%, transparent 100%),
		radial-gradient(1px 1px at 20% 40%, rgba(240, 234, 216, 0.25) 0%, transparent 100%);
	pointer-events: none;
	z-index: 0;
}

/* Il contenuto sta sopra al cielo. */
.site-header,
.site-main,
.site-footer {
	position: relative;
	z-index: 1;
}

a {
	color: var(--kt-accent);
}

h1, h2, h3 {
	font-family: var(--kt-display);
	font-weight: 400;
	letter-spacing: 0.06em;
}

/* Layout wrappers */
.site-header__inner,
.site-footer__inner,
.content-area,
.hero__inner {
	max-width: var(--kt-max-width);
	margin-inline: auto;
	padding-inline: var(--kt-space);
}

/* Header */
.site-header {
	padding-block: var(--kt-space);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kt-space);
}

.site-header__logo {
	display: inline-flex;
	color: var(--kt-accent);
}

.site-nav__list {
	list-style: none;
	display: flex;
	gap: var(--kt-space);
	margin: 0;
	padding: 0;
}

/* Symbol */
.symbol {
	display: block;
}

.symbol-a-link {
	display: inline-flex;
	transition: opacity 0.2s ease;
}

.symbol-a-link:hover {
	opacity: 0.75;
}

/* Main */
.site-main {
	min-height: 50vh;
	padding-block: calc(var(--kt-space) * 2);
}

/* Hero */
.hero {
	padding-block: calc(var(--kt-space) * 3);
	text-align: center;
}

/* Footer */
.site-footer {
	padding-block: calc(var(--kt-space) * 2);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.9rem;
}

.site-footer__list {
	list-style: none;
	display: flex;
	gap: var(--kt-space);
	justify-content: center;
	margin: 0 0 var(--kt-space);
	padding: 0;
}

.site-footer__copy {
	text-align: center;
	opacity: 0.7;
}

/* ==========================================================================
   Homepage — sezioni modulari (ACF Flexible Content)
   ========================================================================== */

.kt-wrap {
	max-width: var(--kt-max-width);
	margin-inline: auto;
	padding-inline: var(--kt-space);
}

.kt-section {
	padding-block: calc(var(--kt-space) * 3);
}

.kt-section + .kt-section {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.kt-kicker {
	font-family: var(--kt-mono);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.62rem;
	color: var(--kt-accent);
	opacity: 0.75;
	margin: 0 0 1rem;
}

.kt-section__title {
	font-weight: 400;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin: 0 0 0.6rem;
}

.kt-section__intro {
	max-width: 56ch;
	color: #b7b3a8;
	margin: 0 0 2rem;
}

/* Bottoni */
.kt-btn {
	display: inline-block;
	padding: 0.85em 1.6em;
	border-radius: 8px;
	font-family: inherit;
	font-size: 1rem;
	text-decoration: none;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.kt-btn:hover {
	transform: translateY(-1px);
}

.kt-btn--primary {
	background: var(--kt-accent);
	color: #0e0e14;
	border: 1px solid var(--kt-accent);
}

.kt-btn--ghost {
	background: transparent;
	color: var(--kt-fg);
	border: 1px solid rgba(184, 160, 106, 0.5);
}

/* Hero */
.kt-hero {
	text-align: center;
	padding-block: calc(var(--kt-space) * 4);
}

.kt-hero__title {
	font-weight: 400;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	line-height: 1.15;
	margin: 0 0 1rem;
}

.kt-hero__subtitle {
	max-width: 52ch;
	margin: 0 auto 2rem;
	color: #cfcbc0;
	font-size: 1.15rem;
}

.kt-hero__actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.kt-hero__note {
	margin: 1.2rem 0 0;
	font-size: 0.85rem;
	color: #8f8b80;
}

/* Come funziona */
.kt-steps {
	list-style: none;
	counter-reset: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--kt-space);
}

.kt-step {
	padding: 1.6rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.02);
}

.kt-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid var(--kt-accent);
	color: var(--kt-accent);
	font-size: 0.95rem;
	margin-bottom: 0.9rem;
}

.kt-step__title {
	font-weight: 400;
	font-size: 1.15rem;
	margin: 0 0 0.4rem;
}

.kt-step__text {
	margin: 0;
	color: #b7b3a8;
}

/* Le letture */
.kt-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--kt-space);
}

.kt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.8rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.02);
}

.kt-card--featured {
	border-color: rgba(184, 160, 106, 0.55);
	background: rgba(184, 160, 106, 0.06);
}

.kt-card__badge {
	position: absolute;
	top: -0.7rem;
	left: 1.8rem;
	background: var(--kt-accent);
	color: #0e0e14;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25em 0.7em;
	border-radius: 999px;
}

.kt-card__name {
	font-weight: 400;
	font-size: 1.3rem;
	margin: 0 0 0.3rem;
}

.kt-card__price {
	color: var(--kt-accent);
	font-size: 1.4rem;
	margin: 0 0 0.9rem;
}

.kt-card__desc {
	color: #b7b3a8;
	margin: 0 0 1.4rem;
	flex: 1;
}

.kt-card .kt-btn {
	align-self: flex-start;
}

/* Approccio */
.kt-approach__inner {
	max-width: 60ch;
}

.kt-approach__text {
	color: #cfcbc0;
	font-size: 1.1rem;
}

.kt-approach__more {
	margin-top: 1.4rem;
}

.kt-approach__more a,
.kt-faq__more a {
	color: var(--kt-accent);
	text-decoration: none;
}

/* Dicono di noi */
.kt-reviews__placeholder {
	color: #8f8b80;
	font-style: italic;
}

/* FAQ */
.kt-faq__list {
	max-width: 62ch;
}

.kt-faq__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding: 1.1rem 0;
}

.kt-faq__q {
	cursor: pointer;
	font-size: 1.1rem;
	list-style: none;
}

.kt-faq__q::-webkit-details-marker {
	display: none;
}

.kt-faq__q::before {
	content: "+";
	color: var(--kt-accent);
	margin-right: 0.6rem;
}

.kt-faq__item[open] .kt-faq__q::before {
	content: "\2013";
}

.kt-faq__a {
	color: #b7b3a8;
	padding-top: 0.7rem;
}

.kt-faq__more {
	margin-top: 1.6rem;
}

/* Pagina Chi siamo (template Chi siamo) */
.kt-about__intro {
	max-width: 62ch;
	color: var(--kt-cream-dim);
	font-size: 1.1rem;
	margin: 0 0 1rem;
}

.kt-about-manifesto {
	text-align: center;
}

.kt-about-quote {
	max-width: 44ch;
	margin: 0 auto;
	padding: 0;
	border: none;
	font-size: clamp(1.3rem, 3vw, 1.8rem);
	font-style: italic;
	font-weight: 300;
	line-height: 1.6;
	color: var(--kt-fg);
}

.kt-about-quote::before,
.kt-about-quote::after {
	content: "\201C";
	color: var(--kt-accent);
}

.kt-about-quote::after {
	content: "\201D";
}

/* Chi siamo — Etica */
.kt-ethics {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
}

.kt-ethics__item {
	position: relative;
	padding-left: 1.1rem;
	color: var(--kt-cream-dim);
	line-height: 1.5;
}

.kt-ethics__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--kt-accent);
}

.kt-ethics__lead {
	color: var(--kt-fg);
}

/* Chi siamo — Privacy (tre schede) */
.kt-privacy {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
}

@media (max-width: 640px) {
	.kt-privacy {
		grid-template-columns: 1fr;
	}
}

.kt-privacy__card {
	background: var(--kt-card);
	border: 1px solid var(--kt-gold-faint);
	border-radius: 12px;
	padding: 1.6rem;
}

.kt-privacy__title {
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 0.04em;
	color: var(--kt-accent);
	margin: 0 0 0.6rem;
}

.kt-privacy__desc {
	color: var(--kt-cream-dim);
	line-height: 1.5;
	margin: 0;
}

/* Pagina FAQ (template FAQ) */
.kt-faqpage__intro {
	max-width: 62ch;
	color: var(--kt-cream-dim);
	margin: 0 0 2.4rem;
}

.kt-faqnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2.6rem;
}

.kt-faqnav__chip {
	display: inline-block;
	padding: 0.4em 0.9em;
	border: 1px solid var(--kt-gold-faint);
	border-radius: 999px;
	background: var(--kt-card);
	color: var(--kt-fg);
	text-decoration: none;
	font-size: 0.9rem;
	transition: border-color 0.15s ease;
}

.kt-faqnav__chip:hover {
	border-color: var(--kt-gold-dim);
}

.kt-faqcat {
	margin-bottom: 2.8rem;
	scroll-margin-top: 1.5rem;
}

.kt-faqcat__title {
	font-weight: 400;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	margin: 0 0 0.4rem;
}

.kt-faqcat__desc {
	max-width: 62ch;
	color: var(--kt-cream-dim);
	margin: 0 0 1.3rem;
}

/* Sezione FAQ in homepage: gruppi per categoria su due colonne (desktop) */
.kt-faq__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.8rem 2.6rem;
	align-items: start;
}

@media (min-width: 768px) {
	.kt-faq__cols {
		grid-template-columns: 1fr 1fr;
	}
}

.kt-faq__group-title {
	font-family: var(--kt-mono);
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-accent);
	opacity: 0.7;
	margin: 0 0 0.7rem;
}

.kt-faq__cols .kt-faq__list {
	max-width: none;
}

/* CTA finale */
.kt-cta {
	text-align: center;
}

.kt-cta__inner {
	max-width: 48ch;
}

.kt-cta__title {
	font-weight: 400;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	margin: 0 0 0.8rem;
}

.kt-cta__text {
	color: #cfcbc0;
	margin: 0 0 1.8rem;
}

/* ==========================================================================
   Prodotti (letture) — presentazione editoriale, senza immagine
   ========================================================================== */

/* Griglia negozio */
.woocommerce ul.products,
ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--kt-space);
}

.woocommerce ul.products li.product,
ul.products li.kt-product-card {
	margin: 0;
	width: auto;
	float: none;
}

/* Card */
.kt-product-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.9rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.02);
	color: var(--kt-fg);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.kt-product-card__link:hover {
	border-color: rgba(184, 160, 106, 0.5);
	transform: translateY(-2px);
}

.kt-product-card__name {
	font-weight: 400;
	font-size: 1.5rem;
	margin: 0 0 0.5rem;
}

.kt-product-card__essence {
	color: #b7b3a8;
	margin: 0 0 1.1rem;
}

.kt-product-card__list {
	list-style: none;
	margin: 0 0 1.3rem;
	padding: 0;
	color: #cfcbc0;
	font-size: 0.95rem;
}

.kt-product-card__list li {
	padding-left: 1.2rem;
	position: relative;
	margin-bottom: 0.35rem;
}

.kt-product-card__list li::before {
	content: "\2726";
	position: absolute;
	left: 0;
	color: var(--kt-accent);
	font-size: 0.8rem;
}

.kt-product-card__price {
	color: var(--kt-accent);
	font-size: 1.4rem;
	margin: auto 0 1.2rem;
}

.kt-product-card__cta {
	align-self: flex-start;
}

/* Pagina singola prodotto */
.kt-product__inner {
	padding-block: calc(var(--kt-space) * 3);
}

.kt-product__head {
	max-width: 60ch;
	margin-bottom: 1.8rem;
}

.kt-product__main {
	min-width: 0;
}

.kt-product__title {
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 2.8rem);
	margin: 0 0 0.8rem;
}

.kt-product__essence {
	color: #cfcbc0;
	font-size: 1.2rem;
}

.kt-product__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--kt-space) * 2);
	align-items: start;
}

@media (min-width: 820px) {
	.kt-product__body {
		grid-template-columns: 1.6fr 1fr;
	}
}

.kt-product__desc {
	color: #cfcbc0;
	line-height: 1.75;
}

.kt-product__desc h2,
.kt-product__desc h3 {
	font-weight: 400;
	color: var(--kt-fg);
}

.kt-product__buy {
	padding: 1.8rem;
	border: 1px solid rgba(184, 160, 106, 0.28);
	border-radius: 12px;
	background: rgba(184, 160, 106, 0.05);
	position: sticky;
	top: 1.5rem;
}

.kt-product__price {
	color: var(--kt-accent);
	font-size: 2rem;
	margin: 0 0 1.2rem;
}

.kt-product__buy .button,
.kt-product__buy button {
	display: inline-block;
	width: 100%;
	padding: 0.9em 1.6em;
	border: 1px solid var(--kt-accent);
	border-radius: 8px;
	background: var(--kt-accent);
	color: #0e0e14;
	font-family: inherit;
	font-size: 1rem;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}

.kt-product__buy .quantity {
	margin-bottom: 0.8rem;
}

.kt-product__panel {
	margin-top: 1.6rem;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kt-product__panel-title {
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kt-accent);
	margin: 0 0 0.7rem;
}

.kt-product__panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
	color: #cfcbc0;
}

.kt-product__panel li {
	padding-left: 1.2rem;
	position: relative;
	margin-bottom: 0.4rem;
}

.kt-product__panel li::before {
	content: "\2726";
	position: absolute;
	left: 0;
	color: var(--kt-accent);
	font-size: 0.8rem;
}

/* Nota guida alla scelta */
.kt-guidance {
	margin-top: calc(var(--kt-space) * 2);
	padding: 1.4rem 1.6rem;
	border: 1px dashed rgba(184, 160, 106, 0.4);
	border-radius: 12px;
	background: rgba(184, 160, 106, 0.04);
	color: #cfcbc0;
	text-align: center;
}

.kt-guidance p {
	margin: 0;
}

/* ==========================================================================
   Skin "Katopsis notturno" — rifiniture coerenti col mockup
   ========================================================================== */

/* Hero */
.kt-hero__title {
	font-family: var(--kt-display);
	letter-spacing: 0.14em;
	line-height: 1.05;
}

.kt-hero__subtitle {
	font-style: italic;
	color: var(--kt-cream-dim);
}

/* Superfici card coerenti (fondo notte + bordo oro tenue) */
.kt-step,
.kt-card,
.kt-product-card__link {
	background: var(--kt-card);
	border-color: var(--kt-gold-faint);
}

.kt-card--featured {
	border-color: var(--kt-gold-dim);
	background: #13132a;
}

.kt-product__buy {
	background: var(--kt-card);
	border-color: var(--kt-gold-dim);
}

/* Etichetta di sezione monospace con filetto (label del mockup) */
.kt-section-label {
	font-family: var(--kt-mono);
	font-size: 0.62rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--kt-accent);
	opacity: 0.6;
	margin: 0 0 2.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.kt-section-label::after {
	content: "";
	flex: 1;
	height: 1px;
	max-width: 220px;
	background: var(--kt-gold-faint);
}

/* ---- Perché è diverso (pillars) ---- */
.kt-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 3rem 4rem;
}

.kt-pillar__num {
	font-family: var(--kt-display);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	color: var(--kt-accent);
	opacity: 0.4;
	margin: 0 0 0.8rem;
}

.kt-pillar__title {
	font-family: var(--kt-display);
	font-size: 1rem;
	letter-spacing: 0.08em;
	color: var(--kt-fg);
	margin: 0 0 0.8rem;
}

.kt-pillar__text {
	font-size: 1.01rem;
	font-weight: 300;
	line-height: 1.8;
	color: var(--kt-cream-dim);
	margin: 0;
}

.kt-pillar__text em {
	color: var(--kt-fg);
	font-style: italic;
}

/* ---- Il fondatore ---- */
.kt-founder {
	background: var(--kt-card);
	border-top: 1px solid var(--kt-gold-faint);
	padding: 3rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
}

@media (max-width: 640px) {
	.kt-founder {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding: 2rem;
	}
}

.kt-founder__col-title {
	font-family: var(--kt-display);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-accent);
	opacity: 0.7;
	margin: 0 0 1.5rem;
}

.kt-founder__text {
	font-size: 1.01rem;
	font-weight: 300;
	line-height: 1.85;
	color: var(--kt-cream-dim);
}

.kt-founder__text em {
	color: var(--kt-fg);
	font-style: italic;
}

.kt-founder__detail {
	font-family: var(--kt-mono);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	color: var(--kt-accent);
	opacity: 0.55;
	padding: 0.3rem 0;
	border-bottom: 1px solid var(--kt-gold-faint);
	margin-bottom: 0.6rem;
}

.kt-founder__note {
	margin-top: 1.4rem;
	font-style: italic;
	font-size: 1.01rem;
	font-weight: 300;
	line-height: 1.8;
	color: var(--kt-cream-dim);
}

/* ==========================================================================
   WooCommerce — pulsanti armonizzati col tema (via il viola di default)
   ========================================================================== */

body.woocommerce .button,
body.woocommerce a.button,
body.woocommerce button.button,
body.woocommerce input.button,
body.woocommerce #respond input#submit,
body.woocommerce .button.alt,
body.woocommerce a.button.alt,
body.woocommerce button.button.alt,
body.woocommerce input.button.alt,
body.woocommerce #respond input#submit.alt,
body.woocommerce .single_add_to_cart_button {
	background: var(--kt-accent);
	color: #07070f;
	border: 1px solid var(--kt-accent);
	border-radius: 8px;
	font-family: var(--kt-serif);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	padding: 0.85em 1.6em;
	text-decoration: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

body.woocommerce .button:hover,
body.woocommerce a.button:hover,
body.woocommerce button.button:hover,
body.woocommerce input.button:hover,
body.woocommerce #respond input#submit:hover,
body.woocommerce .button.alt:hover,
body.woocommerce a.button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce input.button.alt:hover,
body.woocommerce .single_add_to_cart_button:hover {
	background: var(--kt-accent);
	color: #07070f;
	opacity: 0.9;
	transform: translateY(-1px);
}

/* Varianti secondarie (es. "Continua lo shopping", link tenui) */
body.woocommerce a.button.wc-backward,
body.woocommerce .button.wc-backward {
	background: transparent;
	color: var(--kt-fg);
	border-color: var(--kt-gold-dim);
}

/* ==========================================================================
   Carrello & Checkout (shortcode classico) — skin coerente col tema
   Ottimizzato per l'uso tipico: una sola lettura nel carrello.
   ========================================================================== */

/* Tabelle (carrello + riepilogo ordine) come card scura */
.woocommerce table.shop_table {
	border: 1px solid var(--kt-gold-faint);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--kt-card);
	font-size: 1.08rem;
	color: var(--kt-fg);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-top: 1px solid var(--kt-gold-faint);
	padding: 1.1rem 1rem;
	vertical-align: middle;
}

.woocommerce table.shop_table thead th,
.woocommerce table.shop_table tfoot th {
	font-family: var(--kt-mono);
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-accent);
}

.woocommerce table.shop_table thead th {
	border-top: none;
}

/* Niente colonna miniatura (non usiamo immagini) */
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce-cart table.cart th.product-thumbnail {
	display: none;
}

.woocommerce table.cart .product-name a {
	color: var(--kt-fg);
	text-decoration: none;
}

.woocommerce table.cart .product-name a:hover {
	color: var(--kt-accent);
}

/* Quantità */
.woocommerce .quantity input.qty {
	background: var(--kt-bg);
	border: 1px solid var(--kt-gold-dim);
	color: var(--kt-fg);
	border-radius: 6px;
	padding: 0.5em;
	width: 4.5em;
	font-family: var(--kt-serif);
	text-align: center;
}

/* Link rimozione (×) */
.woocommerce a.remove {
	color: var(--kt-accent) !important;
	border: 1px solid var(--kt-gold-dim);
}

.woocommerce a.remove:hover {
	background: var(--kt-accent) !important;
	color: #07070f !important;
}

/* Totali carrello + coupon */
.cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	font-family: var(--kt-display);
	letter-spacing: 0.06em;
}

/* Campi form (coupon, billing, checkout) */
.woocommerce .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce select,
.woocommerce textarea,
.woocommerce .select2-container .select2-selection {
	background: var(--kt-card);
	border: 1px solid var(--kt-gold-dim);
	color: var(--kt-fg);
	border-radius: 8px;
	padding: 0.7em 0.8em;
	font-family: var(--kt-serif);
	font-size: 1rem;
	line-height: 1.4;
}

.woocommerce .input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
	border-color: var(--kt-accent);
	outline: none;
}

.woocommerce form .form-row label {
	color: var(--kt-cream-dim);
}

/* Box pagamento (checkout) — via il grigio chiaro di default */
.woocommerce-checkout #payment,
.woocommerce #payment {
	background: var(--kt-card);
	border: 1px solid var(--kt-gold-faint);
	border-radius: 12px;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--kt-gold-faint);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--kt-deep);
	color: var(--kt-cream-dim);
	font-size: 1.01rem;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--kt-deep) !important;
}

/* Avvisi WooCommerce (messaggi, info, errori) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--kt-card);
	border-top: 3px solid var(--kt-accent);
	color: var(--kt-fg);
}

.woocommerce-error {
	border-top-color: var(--kt-terra);
}

/* Link "Modifica il carrello" nel checkout */
.kt-cart-edit {
	margin-top: 0.9rem;
	text-align: right;
	font-size: 0.9rem;
}

.kt-cart-edit a {
	color: var(--kt-cream-dim);
	font-size: 1.01rem;
	text-decoration: none;
}

.kt-cart-edit a:hover {
	color: var(--kt-accent);
}

/* Checkout a due colonne su schermo largo.
   Sinistra: dati di fatturazione. Destra: riepilogo + pagamento. */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	float: none;
	width: 100%;
}

@media (min-width: 900px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: 1.3fr 1fr;
		grid-template-areas:
			"customer heading"
			"customer review"
			"customer edit";
		column-gap: 3rem;
		align-items: start;
	}

	.woocommerce-checkout form.checkout #customer_details {
		grid-area: customer;
	}

	.woocommerce-checkout form.checkout #order_review_heading {
		grid-area: heading;
		margin-top: 0;
	}

	.woocommerce-checkout form.checkout #order_review {
		grid-area: review;
	}

	.woocommerce-checkout form.checkout .kt-cart-edit {
		grid-area: edit;
	}
}

/* ==========================================================================
   My Account — navigazione a pulsanti (desktop) + menu a tendina (mobile)
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

.kt-account-nav {
	margin-bottom: 2.2rem;
}

.kt-account-nav__group {
	margin-bottom: 1.1rem;
}

.kt-account-nav__group-title {
	display: block;
	font-family: var(--kt-mono);
	font-size: 0.6rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--kt-accent);
	opacity: 0.6;
	margin-bottom: 0.6rem;
}

.kt-account-nav__row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.35rem;
}

.kt-account-nav__btn {
	display: block;
	padding: 0.65em 1em;
	border: 1px solid var(--kt-gold-faint);
	border-radius: 8px;
	background: var(--kt-card);
	color: var(--kt-fg);
	text-decoration: none;
	font-size: 0.98rem;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.kt-account-nav__btn:hover {
	border-color: var(--kt-gold-dim);
}

.kt-account-nav__btn.is-active {
	background: var(--kt-accent);
	color: #07070f;
	border-color: var(--kt-accent);
}

/* Gruppo "Cancella account": separato e in terracotta */
.kt-account-nav__group--danger {
	margin-top: 1.6rem;
	padding-top: 1.3rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kt-account-nav__group--danger .kt-account-nav__btn {
	background: transparent;
	color: var(--kt-terra);
	border-color: var(--kt-terra-dim);
}

.kt-account-nav__group--danger .kt-account-nav__btn:hover,
.kt-account-nav__group--danger .kt-account-nav__btn.is-active {
	background: var(--kt-terra);
	color: var(--kt-fg);
	border-color: var(--kt-terra);
}

.kt-account-nav__mobile {
	display: none;
}

.kt-account-nav__select {
	width: 100%;
	background: var(--kt-card);
	border: 1px solid var(--kt-gold-dim);
	color: var(--kt-fg);
	border-radius: 8px;
	padding: 0.8em;
	font-family: var(--kt-serif);
	font-size: 1rem;
}

@media (max-width: 899px) {
	.kt-account-nav__buttons {
		display: none;
	}

	.kt-account-nav__mobile {
		display: block;
	}
}

/* ==========================================================================
   My Account — dashboard con sidebar sticky a bordo schermo (desktop)
   ========================================================================== */

@media (min-width: 900px) {
	/* Esce dal contenitore centrato: layout a piena larghezza */
	body.woocommerce-account .site-main {
		padding-block: 0;
	}

	body.woocommerce-account .content-area {
		max-width: none;
		margin: 0;
		padding: 0;
	}

	body.woocommerce-account article.page {
		margin: 0;
	}

	body.woocommerce-account .page__header {
		display: none;
	}

	/* Chiusura dei float del contenitore */
	body.woocommerce-account .woocommerce::after {
		content: "";
		display: block;
		clear: both;
	}

	/* Sidebar: float a sinistra, a bordo schermo, sticky a tutta altezza */
	body.woocommerce-account .woocommerce-MyAccount-navigation {
		float: left;
		width: 260px;
		box-sizing: border-box;
		position: sticky;
		top: 0;
		height: 100vh;
		overflow-y: auto;
		margin: 0;
		padding: 2.2rem 1.4rem;
		background: var(--kt-deep);
		border-right: 1px solid var(--kt-gold-faint);
	}

	body.woocommerce-account .kt-account-nav {
		margin-bottom: 0;
	}

	/* Contenuto centrale, accanto alla sidebar */
	body.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: auto;
		margin-left: 260px;
		padding: 2.6rem 2.8rem;
		max-width: 900px;
		box-sizing: border-box;
	}

	/* Eventuali note WooCommerce: a piena larghezza sopra le colonne */
	body.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
		float: none;
		width: 100%;
		clear: both;
	}
}

/* ==========================================================================
   Correzioni QA (suite S1) — navigazione mobile, griglia negozio,
   pagina prodotto su mobile, leggibilità, pulsanti WooCommerce
   ========================================================================== */

/* Testo per soli screen reader (etichetta del pulsante menu). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Link "Salta al contenuto": nascosto finché non riceve il focus da tastiera. */
.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 10000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.6em 1.1em;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--kt-accent);
	color: var(--kt-bg);
	font-family: var(--kt-serif);
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	outline: 2px solid var(--kt-fg);
	outline-offset: 2px;
}

/* ---- Pagina di accesso (woocommerce/myaccount/form-login.php) ---- */
.kat-login-purchase {
	max-width: 560px;
	margin: 0 auto 1em;
	text-align: center;
	color: var(--kt-accent);
	font-weight: 600;
}

.kat-login-social {
	max-width: 420px;
	margin: 0 auto 1.2em;
	text-align: center;
}

/* "body" in testa: lo stile di Nextend arriva dopo main.css con selettori di pari peso. */
body .kat-login-social div.nsl-container {
	margin: 0 auto;
	text-align: center;
}

/* Centra i pulsanti anche con un solo provider (il wrapper Nextend è flex e di default allinea a sinistra). */
body .kat-login-social div.nsl-container .nsl-container-buttons {
	justify-content: center;
}

/* 780px: con le due colonne al 48% e il padding del modulo restano circa
   330px utili, abbastanza per il widget di Cloudflare Turnstile (300px fissi). */
.kat-manual {
	max-width: 780px;
	margin: 1em auto;
	text-align: center;
}

.kat-manual > summary {
	cursor: pointer;
	list-style: none;
	display: inline-block;
	padding: 0.55em 1.2em;
	border: 1px solid var(--kt-gold-dim);
	border-radius: 22px;
	color: var(--kt-fg);
	background: var(--kt-card);
	font-size: 0.95em;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.kat-manual > summary::-webkit-details-marker {
	display: none;
}

.kat-manual > summary::before {
	content: "✉ ";
}

.kat-manual > summary:hover,
.kat-manual > summary:focus-visible {
	background: var(--kt-gold-faint);
	border-color: var(--kt-accent);
}

.kat-manual-body {
	text-align: left;
	margin-top: 1.4em;
}

/* Niente pulsanti social duplicati dentro le form manuali. */
.kat-manual-body .nsl-container {
	display: none;
}

/* Telefoni stretti (colonne una sotto l'altra): meno padding laterale nei
   moduli Accedi/Registrati, così il widget Turnstile non esce dal riquadro. */
@media (max-width: 420px) {
	body .woocommerce form.login,
	body .woocommerce form.register {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* ---- Passkey (plugin Rapls Passkey; riquadro reso da Katopsis Core) ---- */
.kat-login-passkey {
	box-sizing: border-box;
	max-width: 420px;
	margin: 1.6em auto 0;
	padding: 1.3em 1.4em 1.1em;
	background: var(--kt-card);
	border: 1px solid var(--kt-gold-dim);
	border-radius: 14px;
	text-align: left;
}

.kat-login-passkey__title {
	margin: 0 0 0.3em;
	font-family: var(--kt-display);
	font-weight: 400;
	line-height: inherit;
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kt-accent);
	text-align: center;
}

.kat-login-passkey__lead {
	margin: 0 0 1.1em;
	color: var(--kt-cream-dim);
	font-size: 1.01rem;
	line-height: 1.5;
	text-align: center;
}

.kat-login-passkey .rapls-pk-fe {
	margin: 0;
	font-size: 1rem;
}

.kat-login-passkey .rapls-pk-fe-field {
	margin: 0 0 0.9em;
}

.kat-login-passkey .rapls-pk-fe-label {
	margin: 0 0 0.35em;
	color: var(--kt-cream-dim);
	font-size: 1.01rem;
}

.kat-login-passkey .rapls-pk-fe-login input.rapls-pk-fe-username {
	box-sizing: border-box;
	width: 100%;
	padding: 0.7em 0.8em;
	background: var(--kt-bg);
	border: 1px solid var(--kt-gold-dim);
	border-radius: 8px;
	color: var(--kt-fg);
	font-family: var(--kt-serif);
	font-size: 1rem;
	line-height: 1.4;
}

.kat-login-passkey .rapls-pk-fe-login input.rapls-pk-fe-username:focus {
	border-color: var(--kt-accent);
	outline: none;
	box-shadow: 0 0 0 2px var(--kt-gold-faint);
}

/* Pulsante del plugin (accesso e pagina «Passkey» dell'account): come i
   pulsanti principali del tema. "body" in testa: il CSS del plugin può
   arrivare dopo main.css. */
body .rapls-pk-fe-btn {
	display: inline-block;
	padding: 0.85em 1.6em;
	background: var(--kt-accent);
	border: 1px solid var(--kt-accent);
	border-radius: 8px;
	color: #07070f;
	font-family: var(--kt-serif);
	font-size: 1rem;
	letter-spacing: 0.02em;
	line-height: 1.2;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

body .rapls-pk-fe-btn:hover {
	background: var(--kt-accent);
	opacity: 0.9;
	transform: translateY(-1px);
}

body .rapls-pk-fe-btn:focus-visible {
	outline: 2px solid var(--kt-accent);
	outline-offset: 2px;
}

body .rapls-pk-fe-btn:disabled {
	background: transparent;
	border-color: var(--kt-gold-faint);
	color: var(--kt-cream-dim);
	opacity: 1;
	cursor: default;
	transform: none;
}

.kat-login-passkey .rapls-pk-fe-btn {
	width: 100%;
}

body .rapls-pk-fe-status {
	color: var(--kt-cream-dim);
	font-size: 1.01rem;
}

.kat-login-passkey .rapls-pk-fe-status {
	margin: 0.6em 0 0;
	text-align: center;
}

/* Vuoto: senza margine, ma presente (è la regione live letta dai lettori di schermo). */
.kat-login-passkey .rapls-pk-fe-status:empty {
	margin: 0;
}

/* «Che cos'è una passkey?» */
body .rapls-pk-help {
	color: var(--kt-cream-dim);
	font-size: 1.01rem;
}

.kat-login-passkey .rapls-pk-help {
	text-align: center;
}

body .rapls-pk-help > summary {
	color: var(--kt-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body .rapls-pk-help > p {
	line-height: 1.5;
	text-align: left;
}

body .rapls-pk-help a {
	color: var(--kt-accent);
}

/* Pagina «Passkey» dell'account: tabella e azioni di riga in tinta. */
body .rapls-pk-fe-table th,
body .rapls-pk-fe-table td {
	border-bottom: 1px solid var(--kt-gold-faint);
	color: var(--kt-fg);
}

body .rapls-pk-fe-table th {
	color: var(--kt-cream-dim);
	font-weight: 400;
}

body .rapls-pk-fe-rename,
body .rapls-pk-fe-toggle {
	padding: 0;
	border: 0;
	background: none;
	color: var(--kt-accent);
	font-family: var(--kt-serif);
	font-size: 0.95rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

body .rapls-pk-fe-delete {
	color: #e0a08f;
	font-family: var(--kt-serif);
	font-size: 0.95rem;
	text-underline-offset: 3px;
}

/* ---- Menu principale ---- */
.site-nav__list a {
	color: var(--kt-fg);
	text-decoration: none;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a {
	color: var(--kt-accent);
}

/* ---- Barra in fondo allo schermo (mobile) ----
   Sotto i 900px logo e menu lasciano la testata e scendono in una barra
   fissa a tre posti: logo, Menu, Merlino. Il menu sale dalla barra come
   pannello. Contratto con i plugin: --kt-bottom-offset dice quanto spazio
   occupa la barra (così Merlino e il tester non ci finiscono sotto). */
.kt-mobilebar {
	display: none;
}

.site-nav__toggle-bars,
.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
}

.site-nav__toggle-bars {
	position: relative;
}

.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
	transition: transform 0.2s ease, top 0.2s ease;
}

.site-nav__toggle-bars::before {
	top: -6px;
}

.site-nav__toggle-bars::after {
	top: 6px;
}

@media (max-width: 899px) {
	:root {
		--kt-mobilebar-h: 64px;
		--kt-bottom-offset: calc(var(--kt-mobilebar-h) + env(safe-area-inset-bottom, 0px));
	}

	body {
		padding-bottom: var(--kt-bottom-offset);
	}

	/* La testata resta solo come contenitore del pannello menu. Sopra al
	   contenuto: a pari z-index il main, che viene dopo, la coprirebbe. */
	.site-header {
		padding: 0;
		border-bottom: none;
		z-index: 800;
	}

	.site-header__inner {
		display: block;
		padding: 0;
	}

	.site-header__brand {
		display: none;
	}

	.kt-mobilebar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		align-items: stretch;
		height: var(--kt-bottom-offset);
		padding: 0 max(8px, env(safe-area-inset-left, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-right, 0px));
		background: rgba(10, 10, 20, 0.94);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border-top: 1px solid var(--kt-gold-dim);
		box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
		transition: transform 0.22s ease;
	}

	.kt-mobilebar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-width: 0;
		height: var(--kt-mobilebar-h);
		padding: 0;
		background: none;
		border: none;
		color: var(--kt-cream-dim);
		font-family: var(--kt-serif);
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.kt-mobilebar__item--home { grid-column: 1; }
	.kt-mobilebar__item--menu { grid-column: 2; }
	.kt-mobilebar__item--merlino { grid-column: 3; }

	.kt-mobilebar__item[hidden] {
		display: none;
	}

	.kt-mobilebar__item:hover,
	.kt-mobilebar__item:focus-visible,
	.kt-mobilebar__item[aria-expanded="true"] {
		color: var(--kt-accent);
	}

	.kt-mobilebar__item:focus-visible {
		outline: 1px solid var(--kt-gold-dim);
		outline-offset: -6px;
		border-radius: 10px;
	}

	.kt-mobilebar__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		font-size: 22px;
		line-height: 1;
		color: var(--kt-accent);
	}

	/* Il simbolo ha tratti sottili e trasparenti: sotto i 36px sparisce. */
	.kt-mobilebar__icon--logo {
		width: 38px;
		height: 38px;
		margin: -6px 0 -4px;
	}

	.kt-mobilebar__icon--logo svg {
		width: 38px;
		height: 38px;
	}

	.kt-mobilebar__label {
		font-family: var(--kt-mono);
		font-size: 0.66rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		line-height: 1;
	}

	/* Menu aperto: le tre linee diventano una X. */
	body.nav-open .kt-mobilebar__item--menu .site-nav__toggle-bars {
		background: transparent;
	}

	body.nav-open .kt-mobilebar__item--menu .site-nav__toggle-bars::before {
		top: 0;
		transform: rotate(45deg);
	}

	body.nav-open .kt-mobilebar__item--menu .site-nav__toggle-bars::after {
		top: 0;
		transform: rotate(-45deg);
	}

	/* Mentre si scrive (tastiera aperta) e con Merlino aperto la barra esce
	   dallo schermo: coprirebbe il campo o il pannello. */
	body.kt-typing .kt-mobilebar,
	body.katcon-open .kt-mobilebar {
		transform: translateY(110%);
	}

	/* Pannello del menu: sale dalla barra. */
	.site-nav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--kt-bottom-offset);
		max-height: calc(100vh - var(--kt-bottom-offset) - 48px);
		overflow-y: auto;
		padding: 0.6rem var(--kt-space) 0.8rem;
		background: var(--kt-deep);
		border-top: 1px solid var(--kt-gold-dim);
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.5);
		transform: translateY(calc(100% + var(--kt-bottom-offset)));
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}

	body.nav-open .site-nav {
		transform: translateY(0);
		visibility: visible;
		transition: transform 0.25s ease, visibility 0s;
	}

	.site-nav__list {
		flex-direction: column;
		gap: 0;
		margin: 0;
	}

	.site-nav__list li + li {
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}

	.site-nav__list a {
		display: block;
		padding: 0.9em 0.2em;
		font-size: 1.1rem;
	}

	/* Footer: voci una sotto l'altra, area di tocco adeguata. */
	.site-footer__list {
		flex-direction: column;
		align-items: center;
		gap: 0.2rem;
	}

	.site-footer__list a {
		display: inline-block;
		padding: 0.5em 0.2em;
	}
}

/* ---- Griglia negozio: neutralizza il layout float di WooCommerce ----
   WooCommerce aggiunge un clearfix (::before/::after) che dentro un
   contenitore grid diventa una cella vuota, e sotto i 768px riporta le card
   a width:48%/float:left con un selettore più specifico del nostro. */
body.woocommerce ul.products::before,
body.woocommerce ul.products::after,
body.woocommerce-page ul.products::before,
body.woocommerce-page ul.products::after {
	content: none;
	display: none;
}

body.woocommerce ul.products[class*="columns-"] li.product,
body.woocommerce-page ul.products[class*="columns-"] li.product,
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product {
	width: auto;
	float: none;
	clear: none;
	margin: 0;
}

/* ---- Pagina prodotto su mobile: prezzo e "Acquista" subito sotto al titolo ----
   display:contents scioglie la colonna sinistra, così testata, riquadro
   d'acquisto e descrizione si possono ordinare liberamente. */
@media (max-width: 819px) {
	.kt-product__main {
		display: contents;
	}

	.kt-product__head {
		order: 1;
	}

	.kt-product__buy {
		order: 2;
		position: static;
	}

	.kt-product__desc {
		order: 3;
	}
}

/* ---- Leggibilità: nessuna etichetta sotto i 12px su schermo piccolo ---- */
@media (max-width: 899px) {
	.kt-section-label {
		font-size: 0.75rem;
		letter-spacing: 0.22em;
		margin-bottom: 1.8rem;
	}

	.kt-pillar__num,
	.kt-founder__col-title,
	.kt-founder__detail,
	.kt-account-nav__group-title,
	.woocommerce table.shop_table thead th,
	.woocommerce table.shop_table tfoot th {
		font-size: 0.75rem;
	}

	.kt-founder__detail {
		letter-spacing: 0.06em;
	}
}

/* ---- Pulsanti WooCommerce su carrello, checkout e account ----
   Su queste pagine WooCommerce NON aggiunge la classe body "woocommerce"
   (solo woocommerce-cart / -checkout / -account + woocommerce-page): senza
   questi selettori le regole del tema non si applicano e riaffiora il viola. */
body.woocommerce-page .button,
body.woocommerce-page a.button,
body.woocommerce-page button.button,
body.woocommerce-page input.button,
body.woocommerce-page .button.alt,
body.woocommerce-page a.button.alt,
body.woocommerce-page button.button.alt,
body.woocommerce-page input.button.alt,
body.woocommerce-page a.checkout-button,
body.woocommerce-page #place_order {
	background: var(--kt-accent);
	color: #07070f;
	border: 1px solid var(--kt-accent);
	border-radius: 8px;
	font-family: var(--kt-serif);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	padding: 0.85em 1.6em;
	text-decoration: none;
	text-shadow: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

body.woocommerce-page .button:hover,
body.woocommerce-page a.button:hover,
body.woocommerce-page button.button:hover,
body.woocommerce-page input.button:hover,
body.woocommerce-page a.checkout-button:hover,
body.woocommerce-page #place_order:hover {
	background: var(--kt-accent);
	color: #07070f;
	opacity: 0.9;
}

/* Pulsanti secondari (Aggiorna carrello, Continua lo shopping, Applica coupon):
   contorno d'oro su fondo scuro invece del grigio chiaro illeggibile. */
body.woocommerce-page button[name="update_cart"],
body.woocommerce-page input[name="update_cart"],
body.woocommerce-page button[name="apply_coupon"],
body.woocommerce-page .button.wc-backward,
body.woocommerce-page a.button.wc-backward,
body.woocommerce .button.wc-backward,
body.woocommerce a.button.wc-backward {
	background: transparent;
	color: var(--kt-fg);
	border-color: var(--kt-gold-dim);
}

/* Stato disabilitato (es. "Aggiorna carrello" finché non cambi nulla):
   leggibile, senza il fondo grigio di WooCommerce. */
body.woocommerce-page .button:disabled,
body.woocommerce-page .button.disabled,
body.woocommerce-page button.button:disabled,
body.woocommerce-page button.button:disabled[disabled],
body.woocommerce .button:disabled,
body.woocommerce .button.disabled,
body.woocommerce button.button:disabled,
body.woocommerce button.button:disabled[disabled] {
	background: transparent;
	color: var(--kt-cream-dim);
	border-color: var(--kt-gold-faint);
	opacity: 1;
	cursor: not-allowed;
}

body.woocommerce-page .button:disabled:hover,
body.woocommerce-page button.button:disabled:hover,
body.woocommerce .button:disabled:hover,
body.woocommerce button.button:disabled:hover {
	background: transparent;
	color: var(--kt-cream-dim);
	transform: none;
}

/* Il coupon nel carrello: campo e pulsante in tinta, non schiacciati. */
body.woocommerce-page .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

body.woocommerce-page .coupon .input-text {
	flex: 1 1 12rem;
	min-width: 0;
}

/* ==========================================================================
   Correzioni QA (suite S3-S6) — variabili WooCommerce in palette
   ========================================================================== */

/* WooCommerce definisce i propri colori come variabili CSS e le usa con
   selettori più specifici dei nostri (`.woocommerce form .form-row .input-text`
   vinceva su `.woocommerce .input-text`, lasciando i campi del checkout bianchi
   su testo nero). Riscrivere le variabili è il modo pulito: vale per form,
   avvisi e pulsanti, e il gateway Stripe ne ricava da solo l'aspetto dei
   propri campi carta. */
body.woocommerce,
body.woocommerce-page,
.woocommerce {
	--wc-primary: var(--kt-accent);
	--wc-primary-text: #07070f;
	--wc-secondary: var(--kt-card);
	--wc-secondary-text: var(--kt-fg);
	--wc-highlight: var(--kt-accent);
	--wc-highligh-text: #07070f;
	--wc-content-bg: var(--kt-card);
	--wc-subtext: var(--kt-cream-dim);
	--wc-form-color-background: var(--kt-card);
	--wc-form-color-text: var(--kt-fg);
	--wc-form-border-color: var(--kt-gold-dim);
	--wc-form-border-radius: 8px;
	--wc-form-border-width: 1px;
	--wc-card-border-radius: 12px;
}

/* Rinforzo esplicito sui campi del checkout, per i casi in cui le variabili
   non bastano (select2, campi iniettati dai gateway). */
body.woocommerce-page form .form-row .input-text,
body.woocommerce-page form .form-row select,
body.woocommerce-page form .form-row textarea {
	background-color: var(--kt-card);
	color: var(--kt-fg);
	border-color: var(--kt-gold-dim);
}

body.woocommerce-page form .form-row .input-text::placeholder {
	color: rgba(240, 234, 216, 0.4);
}

/* L'autofill del browser reimpone il fondo bianco: si neutralizza con
   un'ombra interna, unico modo supportato. */
body.woocommerce-page input:-webkit-autofill,
body.woocommerce-page input:-webkit-autofill:hover,
body.woocommerce-page input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--kt-fg);
	-webkit-box-shadow: 0 0 0 1000px var(--kt-card) inset;
	caret-color: var(--kt-fg);
}

/* Pagina "ordine ricevuto": la ricevuta resta sotto i prossimi passi, piegata. */
.kt-receipt {
	max-width: 640px;
	margin: 0 auto 2rem;
	padding: 0 1.25rem;
	border: 1px solid var(--kt-gold-faint);
	border-radius: 12px;
}

.kt-receipt__summary {
	padding: 1rem 0;
	cursor: pointer;
	color: var(--kt-cream-dim);
	font-size: 1.01rem;
}

.kt-receipt[open] .kt-receipt__summary {
	border-bottom: 1px solid var(--kt-gold-faint);
	margin-bottom: 1rem;
}

/* Il titolo ("Grazie per l'acquisto") si allinea al blocco dei prossimi passi. */
body.woocommerce-order-received .page__title {
	text-align: center;
}

/* Prodotti con varianti (es. Dialogo): finché non si sceglie il pacchetto
   WooCommerce disabilita "Acquista" col suo viola, più specifico delle regole sopra. */
body.woocommerce button.button.alt.disabled,
body.woocommerce button.button.alt:disabled,
body.woocommerce .single_add_to_cart_button.disabled,
body.woocommerce .single_add_to_cart_button.disabled:hover {
	background: transparent;
	color: var(--kt-cream-dim);
	border-color: var(--kt-gold-dim);
	opacity: 1;
	transform: none;
}