/* Sapore Calabria — mobile first. Colori e font vengono da theme.json. */
:root {
	--verde: var(--wp--preset--color--verde, #014c10);
	--verde-2: var(--wp--preset--color--verde-scuro, #012f0a);
	--rosso: var(--wp--preset--color--rosso, #d4000a);
	--giallo: var(--wp--preset--color--giallo, #fbc310);
	--crema: var(--wp--preset--color--crema, #fffaf0);
	--crema-2: var(--wp--preset--color--crema-2, #fdf0cf);
	--testo-2: #4b5a4d;
	--display: var(--wp--preset--font-family--display, Georgia, serif);
	--sistema: var(--wp--preset--font-family--sistema, system-ui, sans-serif);
	--r-card: 1.5rem;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.sc-hero :focus-visible, .sc-footer :focus-visible { outline-color: var(--giallo); }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.sc-wrap { width: min(100% - 2rem, 1200px); margin-inline: auto; }
.sc-sr, .sc-skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sc-skip { position: absolute; left: 1rem; top: 1rem; z-index: 100; padding: .75rem 1rem; border-radius: 999px; background: var(--verde); color: #fff; }
.sc-center { text-align: center; }

/* ---------- Pulsanti ---------- */
.sc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 48px; padding: .75rem 1.5rem; border: 2px solid transparent; border-radius: 999px;
	font: 700 1rem/1.2 var(--sistema); text-decoration: none; cursor: pointer;
	transition: transform .2s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.sc-btn:hover { transform: translateY(-2px); }
.sc-btn--rosso { background: var(--rosso); color: #fff; }
.sc-btn--rosso:hover { background: #b00008; color: #fff; }
.sc-btn--verde { background: var(--verde); color: #fff; }
.sc-btn--verde:hover { background: var(--verde-2); color: #fff; }
.sc-btn--giallo { background: var(--giallo); color: var(--verde-2); }
.sc-btn--giallo:hover { background: #ffd23f; color: var(--verde-2); }
.sc-btn--ghost { border-color: currentColor; color: #fff; }
.sc-btn--ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ---------- Header / footer ---------- */
.sc-header { background: var(--crema); border-bottom: 1px solid rgba(1, 76, 16, .1); }
.sc-header__in { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 68px; padding-block: .5rem; }
.sc-logo img { display: block; height: 52px; width: auto; }
.sc-nav { display: flex; gap: .125rem; }
.sc-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; border-radius: 999px; color: var(--verde); font-weight: 600; text-decoration: none; }
.sc-nav a:hover { background: var(--crema-2); }

.sc-footer { margin-top: 2rem; padding: 3rem 0 6rem; border-radius: 2rem 2rem 0 0; background: var(--verde-2); color: #efe9d4; }
.sc-footer a { color: #fff; text-decoration: none; }
.sc-footer a:hover { color: var(--giallo); }
.sc-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
.sc-footer__grid > :first-child, .sc-footer__grid > :last-child { grid-column: 1 / -1; }
.sc-footer__end span { display: block; }
.sc-footer h2 { margin: 0 0 .5rem; font: 700 1.125rem/1.2 var(--display); color: var(--giallo); }
.sc-footer p { margin: 0 0 1rem; max-width: 34ch; }
.sc-footer ul { display: grid; gap: .125rem; margin: 0; padding: 0; list-style: none; }
.sc-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.sc-footer__logos { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.sc-footer__logo img { display: block; width: 140px; height: auto; }
.sc-footer__acc { display: block; width: 84px; height: auto; padding: .4rem; border-radius: .85rem; background: #fff; } /* logo scuro su fondo bianco, per leggerlo sul verde */
.sc-footer .sc-footer__end { max-width: none; margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .875rem; }

/* ---------- Sezioni ---------- */
.sc-sec { padding: 3rem 0 1rem; }
.sc-sec__head { margin-bottom: 1.5rem; }
.sc-sec h2, .sc-sec h1 { margin: 0; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }
.sc-kicker { display: inline-block; margin: 0 0 .75rem; padding: .3rem .8rem; border-radius: 999px; background: var(--crema-2); color: var(--verde); font: 700 .8125rem/1.2 var(--sistema); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Hero ---------- */
.sc-hero { position: relative; isolation: isolate; display: grid; align-items: end; min-height: calc(100svh - 69px); overflow: hidden; border-radius: 0 0 2rem 2rem; background: var(--verde-2); color: #fff; }
.sc-hero picture, .sc-hero img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.sc-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(1, 47, 10, .45) 0%, rgba(1, 47, 10, .6) 40%, rgba(1, 30, 6, .92) 100%); }
.sc-hero__in { padding-block: 5rem 2.75rem; }
.sc-hero__txt { max-width: 42rem; }
.sc-hero .sc-kicker { background: var(--giallo); color: var(--verde-2); }
.sc-hero h1 { margin: 0 0 1rem; color: #fff; font-size: clamp(2.25rem, 1.5rem + 4vw, 4.25rem); line-height: 1.05; text-wrap: balance; }
.sc-hero__lead { margin: 0 0 1.75rem; max-width: 34rem; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); line-height: 1.5; color: #fff; }
.sc-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.sc-hero__cta .sc-btn { flex: 1 1 13rem; }
@media (max-width: 699px) { .sc-hero__cta { padding-right: 3.75rem; } } /* lascia libera la colonna dei pulsanti fissi */
@media (min-width: 700px) { .sc-hero__cta .sc-btn { flex: 0 0 auto; } }

/* ---------- Hero dello shop: immagine a tutta larghezza su giallo ---------- */
.sc-shop-hero { overflow: hidden; border-radius: 0 0 2rem 2rem; background: var(--giallo); }
.sc-shop-hero img { display: block; width: 100%; height: auto; }
@media (max-width: 699px) { .sc-shop-hero img { height: min(60svh, 420px); object-fit: cover; } }

/* ---------- Griglie e card ---------- */
.sc-grid { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.sc-grid--feat { grid-template-columns: 1fr; gap: 1rem; }
.sc-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .sc-grid--feat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 900px) { .sc-grid--list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1200px) { .sc-grid--list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sc-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-card); background: var(--tint, #fdf0cf); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.sc-card:nth-child(4n+1) { --tint: #fdf0cf; }
.sc-card:nth-child(4n+2) { --tint: #e5efe0; }
.sc-card:nth-child(4n+3) { --tint: #fde5dc; }
.sc-card:nth-child(4n+4) { --tint: #fff6dc; }
.sc-card:hover, .sc-card:focus-within { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(1, 47, 10, .45); }
.sc-card__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; }
.sc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-card__media img.sc-ph, .sc-gal__main img.sc-ph { width: 55%; height: auto; object-fit: contain; }
.sc-tag { position: absolute; top: .75rem; left: .75rem; padding: .25rem .7rem; border-radius: 999px; background: var(--rosso); color: #fff; font: 700 .8125rem/1.2 var(--sistema); }
.sc-card__body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1rem; }
.sc-card__title { margin: 0; font: 700 1.0625rem/1.25 var(--display); }
.sc-card__title a { color: var(--verde); text-decoration: none; }
.sc-card__title a::after { content: ""; position: absolute; inset: 0; }
.sc-card__desc { margin: 0; color: var(--testo-2); font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .5rem; }
.sc-price { color: var(--verde); font-weight: 800; font-size: 1.0625rem; }
.sc-price del { opacity: .6; font-weight: 400; font-size: .85em; }
.sc-price ins { text-decoration: none; }
.sc-add { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--rosso); color: #fff; font: 700 .95rem/1 var(--sistema); text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background-color .2s; }
.sc-add:hover { background: #b00008; transform: scale(1.06); }
.sc-add span { white-space: nowrap; }
.sc-add:has(> span:only-child) { width: auto; padding: 0 1rem; border-radius: 999px; }
.sc-add.is-ok, .sc-btn.is-ok { background: var(--verde); }
.sc-add[aria-busy], .sc-btn[aria-busy] { opacity: .65; }
.sc-soldout { color: var(--testo-2); font-weight: 600; }

.sc-card--big .sc-card__media { aspect-ratio: 4 / 3; }
.sc-card--big .sc-card__body { gap: .625rem; padding: 1.25rem 1.25rem 1.5rem; }
.sc-card--big .sc-card__title { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); }
.sc-card--big .sc-card__desc { font-size: 1rem; -webkit-line-clamp: 3; }
.sc-card--big .sc-price { font-size: 1.25rem; }
.sc-card--big .sc-add { width: auto; padding: 0 1.25rem 0 1rem; border-radius: 999px; }
@media (min-width: 640px) { .sc-card--big .sc-card__body { padding: 1.5rem 1.75rem 1.75rem; } }

.sc-more { min-height: 1px; margin-top: 1.75rem; text-align: center; } /* deve restare nel layout, altrimenti l'IntersectionObserver non lo vede */
.sc-more .sc-btn { display: none; }
.sc-more.is-manual .sc-btn { display: inline-flex; }
.sc-more[aria-busy]::after { content: "Carico altri prodotti…"; color: var(--testo-2); font-size: .9375rem; }
.sc-more[aria-busy] .sc-btn { display: none; }

/* ---------- FAQ e accordion ---------- */
.sc-faq { padding-bottom: 3rem; }
.sc-faq__list, .sc-accs { display: grid; gap: .75rem; }
.sc-faq__list { max-width: 48rem; margin-inline: auto; }
.sc-acc { border-radius: 1.25rem; background: #fff; padding: 0 1.25rem; }
.sc-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: .875rem 0; color: var(--verde); font-weight: 700; cursor: pointer; list-style: none; }
.sc-acc summary::-webkit-details-marker { display: none; }
.sc-acc summary::after { content: ""; flex: none; width: .6rem; height: .6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--ease); }
.sc-acc[open] summary::after { transform: rotate(-135deg); }
.sc-acc__body { padding: 0 0 1.25rem; color: var(--testo-2); }
.sc-acc__body > :first-child { margin-top: 0; }
.sc-acc__body > :last-child { margin-bottom: 0; }
.sc-acc__body table { width: 100%; border-collapse: collapse; }
.sc-acc__body th { padding: .4rem 1rem .4rem 0; text-align: left; color: var(--verde); }
.sc-acc__body td { padding: .4rem 0; }
.sc-acc__body td p { margin: 0; }

/* ---------- Pulsanti fissi ---------- */
.sc-fabs { position: fixed; z-index: 50; right: max(.75rem, env(safe-area-inset-right)); bottom: max(.75rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .75rem; }
.sc-fab { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .45); transition: transform .2s var(--ease); }
.sc-fab:hover { transform: scale(1.06); color: #fff; }
.sc-fab--cart { background: var(--verde); }
.sc-fab--wa { background: #128c7e; }
.sc-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--giallo); color: var(--verde-2); font: 800 .75rem/22px var(--sistema); text-align: center; }
.sc-badge[hidden] { display: none; }
.sc-badge.bump { animation: sc-bump .4s var(--ease); }
@keyframes sc-bump { 50% { transform: scale(1.35); } }

/* ---------- Scheda prodotto ---------- */
.sc-pp { padding-top: 1.25rem; }
.sc-crumb { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; font-size: .9rem; color: var(--testo-2); }
.sc-crumb a { color: var(--verde); }
.sc-pp__grid { display: grid; gap: 1.5rem; }
.sc-gal { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.sc-gal__main { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 1.5rem; background: var(--crema-2); }
.sc-gal__main img { width: 100%; height: 100%; object-fit: cover; }
.sc-gal__thumbs { display: flex; gap: .75rem; }
.sc-thumb { flex: none; width: 72px; height: 72px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 1rem; background: var(--crema-2); cursor: pointer; transition: border-color .2s; }
.sc-thumb[aria-pressed="true"] { border-color: var(--verde); }
.sc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-pp__title { margin: 0 0 .75rem; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.08; }
.sc-pp__lead { color: var(--testo-2); font-size: 1.125rem; line-height: 1.55; }
.sc-pp__lead > :first-child { margin-top: 0; }
.sc-buy { margin: 1.5rem 0; padding-top: 1.25rem; border-top: 1px solid rgba(1, 76, 16, .15); }
.sc-pp__price { margin: 0 0 1rem; font: 700 clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem)/1.1 var(--display); }
.sc-buy__row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.sc-buy__add { flex: 1 1 12rem; }
.sc-qty { display: inline-flex; align-items: center; gap: .25rem; padding: 4px; border-radius: 999px; background: var(--crema-2); }
.sc-qty button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--verde); cursor: pointer; }
.sc-qty button:hover { background: rgba(1, 76, 16, .1); }
.sc-qty input { width: 3.25rem; border: 0; background: transparent; color: var(--verde); font: 700 1.125rem/1 var(--sistema); text-align: center; -moz-appearance: textfield; }
.sc-qty input::-webkit-inner-spin-button, .sc-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sc-pp__rel { padding-top: 3rem; }
.sc-pp__rel h2 { margin: 0 0 1.5rem; }

.sc-sticky { position: fixed; z-index: 40; left: .75rem; right: 5rem; bottom: max(.75rem, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem .625rem .625rem 1.125rem; border-radius: 999px; background: var(--crema); box-shadow: 0 10px 28px -10px rgba(1, 47, 10, .55); transform: translateY(160%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; }
.sc-sticky.is-on { transform: none; visibility: visible; transition: transform .3s var(--ease); }
.sc-sticky__txt { display: grid; min-width: 0; line-height: 1.25; }
.sc-sticky__txt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--verde); font-size: .9375rem; }
.sc-sticky__txt .sc-price { font-size: .9375rem; }
.sc-sticky .sc-btn { flex: none; min-height: 44px; padding: .5rem 1.25rem; }

/* ---------- Pagina Storia ---------- */
.sc-story-hero { padding: 2.5rem 0 .5rem; }
.sc-story-hero__in { display: grid; gap: 2rem; align-items: center; }
.sc-story-hero h1 { margin: 0 0 1rem; font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.75rem); line-height: 1.06; text-wrap: balance; }
.sc-story-lead { margin: 0 0 1.75rem; color: var(--testo-2); font-size: 1.125rem; line-height: 1.6; }
.sc-story-hero__map { display: grid; place-items: center; padding: 1.5rem; border-radius: 2rem; background: var(--crema-2); }
.sc-story-hero__map img { display: block; width: min(100%, 420px); height: auto; }
.sc-pillars { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.sc-pillar { padding: 1.5rem; border-radius: var(--r-card); background: var(--tint, #fdf0cf); }
.sc-pillar:nth-child(2) { --tint: #e5efe0; }
.sc-pillar:nth-child(3) { --tint: #fde5dc; }
.sc-pillar__n { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; border-radius: 50%; background: var(--giallo); color: var(--verde-2); font: 700 1.125rem/1 var(--display); }
.sc-pillar h3 { margin: 0 0 .5rem; font: 700 1.3125rem/1.2 var(--display); color: var(--verde); }
.sc-pillar p { margin: 0; color: var(--testo-2); }
.sc-story-end { padding-bottom: 1rem; }
.sc-contactband { padding: 2.25rem 1.25rem; border-radius: 2rem; background: var(--verde); color: #fff; text-align: center; }
.sc-contactband h2 { margin: 0 0 .75rem; color: #fff; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
.sc-contactband p { max-width: 38rem; margin: 0 auto 1.5rem; }
.sc-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.sc-contacts a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.25rem; border: 2px solid rgba(255, 255, 255, .45); border-radius: 999px; color: #fff; font-weight: 600; text-decoration: none; transition: background-color .2s, border-color .2s; }
.sc-contacts a:hover { border-color: #fff; background: rgba(255, 255, 255, .14); color: #fff; }
.sc-contactband :focus-visible { outline-color: var(--giallo); }
@media (min-width: 900px) {
	.sc-story-hero { padding-top: 4rem; }
	.sc-story-hero__in { grid-template-columns: 1.25fr 1fr; gap: 4rem; }
	.sc-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
	.sc-pillar { padding: 2rem; }
	.sc-contactband { padding: 3.5rem 2rem; }
}

/* ---------- Pagine, carrello, checkout ---------- */
.sc-page, main[data-block-name="woocommerce/page-content-wrapper"] { padding: 2rem 1rem 3rem; } /* il secondo è il template di carrello e checkout di WooCommerce */
.sc-page > h1, main[data-block-name="woocommerce/page-content-wrapper"] > h1 { margin-top: 0; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); text-align: center; }
.wc-block-components-button:not(.is-link), .wp-element-button { border-radius: 999px; font-weight: 700; }
.wc-block-components-button:not(.is-link):not(.outlined) { background: var(--rosso); color: #fff; }

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
	.sc-sec { padding-top: 5rem; }
	.sc-header__in { min-height: 84px; }
	.sc-logo img { height: 64px; }
	.sc-nav a { padding: 0 1.125rem; }
	.sc-hero { min-height: calc(100svh - 85px); }
	.sc-hero__in { padding-block: 6rem 4rem; }
	.sc-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
	.sc-footer__grid > :first-child, .sc-footer__grid > :last-child { grid-column: auto; }
	.sc-footer__end span { display: inline; }
	.sc-footer__end span + span::before { content: " · "; }
	.sc-pp__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
	.sc-pp__info { position: sticky; top: 1.5rem; }
	.sc-sticky { display: none; }
	.sc-card__body { padding: 1.125rem 1.25rem 1.25rem; }
	.sc-card__title { font-size: 1.1875rem; }
}