/* ==========================================================================
   Sci Club Monviso — archivio categoria + dettaglio esperienza.
   Mobile-first. Token (colori/fonti/raggi) in chrome.css (:root);
   griglia card condivisa: la card .scm-pcard vive in chrome.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Breadcrumb (condiviso archivi + dettaglio)
   -------------------------------------------------------------------------- */
.scm-breadcrumbs ol {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
	list-style: none; margin: 0 0 18px; padding: 0;
	font-size: 14px; color: var(--scm-muted);
}
.scm-breadcrumbs li { display: inline-flex; align-items: center; gap: 4px; }
.scm-breadcrumbs a { color: var(--scm-muted); text-decoration: none; }
.scm-breadcrumbs a:hover { color: var(--scm-blue); }
.scm-breadcrumbs [aria-current="page"] { color: var(--scm-ink); font-weight: 700; }
.scm-breadcrumbs__sep { display: inline-flex; color: var(--scm-muted); }
.scm-breadcrumbs__sep .scm-ico { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   2. Header categoria
   -------------------------------------------------------------------------- */
/* Scala verticale uniforme alla home (vedi home.css): header→contenuto
   ~40 su desktop, ~60% su mobile; paginazione/fondo pagina 40/64. */
.scm-cat-head {
	position: relative; overflow: hidden;
	border-bottom: 1px solid var(--scm-border);
	padding: 24px 0 22px;
}
.scm-cat-head > .container { position: relative; z-index: 1; }
/*
 * Watermark low-poly a destra della testata categoria.
 * NOTA DI AGGIORNAMENTO (fix 30/09/2026 "immagine card differente"):
 * il vettore è ora il low-poly ESATTO del frame Figma "Categoria" (nodo
 * 27:3042 "Frame 76": 24 facce a fill pieno palette
 * #83D0F5/#006787/#102757/#9BA2A7/#536EA3 + patch bianche, con
 * "Modalità_Isolamento" a opacity 0.1 — le facce NON sono tinte chiare:
 * è il contenitore a essere al 10%).
 * MISURE FIGMA: Frame 76 = 750×211, parte 66px SOPRA il bordo superiore
 * dell'header (top -66) e sfora di 15px oltre il bordo destro pagina
 * (right -15). Il lowpoly interno (750×305 viewBox ratio) scende fino
 * a fondo header.
 */
.scm-cat-head__watermark {
	position: absolute; right: -15px; top: -66px; z-index: 0;
	width: 750px; pointer-events: none; opacity: .1;
}
.scm-cat-head__watermark .scm-lowpoly { width: 100%; height: auto; }

.scm-cat-head__title {
	margin: 0; font: 600 clamp(30px, 4.6vw, 40px)/1.08 var(--scm-font-display);
	color: var(--scm-ink);
}
.scm-cat-head__sub { margin: 8px 0 0; color: var(--scm-muted); font-size: 14px; }

/* Figma: select "Ordina" in basso a destra dell'intestazione (sotto i tab). */
.scm-cat-head__order { display: flex; justify-content: flex-end; margin-top: 18px; }

.scm-cat-head__top { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* Dropdown "Ordina" */
.scm-cat-order {
	display: inline-flex; align-items: center; gap: 10px;
	background: #fff; border: 1px solid var(--scm-border);
	border-radius: 8px; padding: 9px 12px;
	box-shadow: 0 1px 2px rgba(24, 49, 89, .05);
}
.scm-cat-order__label { font-size: 14px; color: var(--scm-muted); }
.scm-cat-order__select { position: relative; display: inline-flex; align-items: center; }
.scm-cat-order select {
	appearance: none; -webkit-appearance: none;
	border: 0; outline: 0; background: transparent; cursor: pointer;
	font: 700 14px var(--scm-font-body); color: var(--scm-ink);
	padding: 2px 26px 2px 2px;
}
.scm-cat-order__chev { display: inline-flex; pointer-events: none; position: absolute; right: 2px; color: var(--scm-ink); }
.scm-cat-order__chev .scm-ico { width: 16px; height: 16px; }
.scm-ico--down { transform: rotate(90deg); }

/* Pill-tab categoria */
.scm-cat-tabs ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 18px 0 0; padding: 0; }
.scm-cat-tabs__tab {
	display: inline-flex; align-items: center; gap: 8px;
	font: 700 12.5px/1 var(--scm-font-body);
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--scm-ink); text-decoration: none;
	background: #eef1f5; border: 1px solid transparent;
	border-radius: 8px; padding: 11px 15px;
	transition: background .15s ease, border-color .15s ease;
}
.scm-cat-tabs__tab:hover { background: #e3e8ef; text-decoration: none; }
.scm-cat-tabs__tab .scm-ico { width: 16px; height: 16px; }
.scm-cat-tabs__tab--active {
	background: var(--scm-gite-bg); /* tutte le tab attive: tint menta del frame */
	border-color: rgba(91, 189, 175, .4);
}

/* --------------------------------------------------------------------------
   3. Layout archivio (sidebar + results)
   -------------------------------------------------------------------------- */
.scm-cat-body { padding: 26px 0 64px; }
.scm-cat-layout { display: grid; grid-template-columns: 1fr; gap: 26px; }

/* --- Sidebar filtri: drawer collassato su mobile, statica su desktop --- */
.scm-cat-filters__toggle {
	display: inline-flex; align-items: center; gap: 8px;
	font: 700 14px/1 var(--scm-font-body); color: var(--scm-ink);
	background: #fff; border: 1px solid var(--scm-border);
	border-radius: 8px; padding: 11px 15px; cursor: pointer;
}
.scm-cat-filters__toggle .scm-ico { width: 16px; height: 16px; color: var(--scm-blue); }
.scm-cat-filters__panel { display: none; margin-top: 14px; }
.scm-cat-filters--open .scm-cat-filters__panel { display: block; }

.scm-cat-filters__group { border: 0; margin: 0 0 6px; padding: 0 0 16px; border-bottom: 1px solid var(--scm-border); }
.scm-cat-filters__legend {
	display: block; margin-bottom: 12px;
	font: 700 12.5px/1 var(--scm-font-body);
	letter-spacing: .09em; text-transform: uppercase;
	color: var(--scm-slate-label);
}

/* Checkbox disciplina */
.scm-cat-check {
	display: flex; align-items: center; gap: 10px;
	padding: 7px 0; cursor: pointer; font-size: 14px; color: var(--scm-ink);
}
.scm-cat-check input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	width: 18px; height: 18px; flex: none; margin: 0;
	border: 1.5px solid #c9d2dc; border-radius: 6px;
	background: #fff; cursor: pointer; position: relative;
	transition: background .12s ease, border-color .12s ease;
}
.scm-cat-check input[type="checkbox"]:checked { background: var(--scm-blue); border-color: var(--scm-blue); }
.scm-cat-check input[type="checkbox"]:checked::after {
	content: ""; position: absolute; left: 5px; top: 1.5px;
	width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.scm-cat-check__count { margin-left: auto; color: var(--scm-muted); font-size: 14px; }

/* Chip mese */
.scm-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.scm-cat-chip {
	font: 600 14px/1 var(--scm-font-body); color: var(--scm-ink);
	background: #eef1f5; border: 1px solid transparent;
	border-radius: 8px; padding: 8px 12px; text-decoration: none;
}
.scm-cat-chip:hover { background: #e3e8ef; text-decoration: none; }
.scm-cat-chip--active { background: var(--scm-slate-label); color: #fff; }
.scm-cat-chip--active:hover { background: var(--scm-slate-label); }

/* Toggle trasporto */
.scm-cat-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 14px; }
.scm-cat-switch input { position: absolute; opacity: 0; pointer-events: none; }
.scm-cat-switch__track {
	position: relative; width: 40px; height: 22px; flex: none;
	background: #d7dde5; border-radius: 999px; transition: background .15s ease;
}
.scm-cat-switch__track::after {
	content: ""; position: absolute; top: 3px; left: 3px;
	width: 16px; height: 16px; border-radius: 50%;
	background: #fff; box-shadow: 0 1px 3px rgba(18, 35, 57, .3);
	transition: transform .15s ease;
}
.scm-cat-switch input:checked + .scm-cat-switch__track { background: var(--scm-blue); }
.scm-cat-switch input:checked + .scm-cat-switch__track::after { transform: translateX(18px); }
.scm-cat-switch input:focus-visible + .scm-cat-switch__track { outline: 2px solid var(--scm-blue); outline-offset: 2px; }

.scm-cat-filters__apply { margin-top: 14px; }
.scm-cat-filters__reset {
	display: block; margin-top: 16px; text-align: center;
	color: var(--scm-blue); font-weight: 700; font-size: 14px; text-decoration: none;
}
.scm-cat-filters__reset:hover { text-decoration: underline; }

/* --- Toolbar risultati --- */
.scm-cat-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.scm-cat-toolbar__count { margin: 0; color: var(--scm-muted); font-size: 14px; }
.scm-cat-toolbar__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.scm-cat-active-chip {
	display: inline-flex; align-items: center; gap: 6px;
	background: #eef1f5; border: 1px solid #e2e7ee; border-radius: 999px;
	padding: 6px 11px; font-size: 13px; font-weight: 600; color: var(--scm-ink);
	text-decoration: none;
}
.scm-cat-active-chip:hover { background: #e3e8ef; text-decoration: none; }
.scm-cat-active-chip__x { display: inline-flex; color: var(--scm-muted); }
.scm-cat-active-chip__x .scm-ico { width: 12px; height: 12px; }

/* --- Griglia card (1 → 2 → 3 colonne) --- */
.scm-cat-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.scm-cat-empty { color: var(--scm-muted); font-size: 15px; }
.scm-cat-empty a { color: var(--scm-blue); font-weight: 600; }

/* Paginazione Woo/core: gap dai risultati coerente con la scala ~40. */
.scm-cat-main .navigation.pagination { margin-top: 40px; }
.scm-cat-main .pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 10px; margin-right: 6px;
	border: 1px solid var(--scm-border); border-radius: 8px;
	color: var(--scm-ink); text-decoration: none; font-weight: 600; font-size: 14px;
}
.scm-cat-main .pagination .page-numbers.current { background: var(--scm-navy); border-color: var(--scm-navy); color: #fff; }
.scm-cat-main .pagination .page-numbers:hover { background: #eef1f5; }
.scm-cat-main .pagination .page-numbers.current:hover { background: var(--scm-navy); }

/* Notices Woo (add-to-cart riusando il link card) */
.scm-cat-main .woocommerce-message,
.scm-prod-buy .woocommerce-message {
	border: 1px solid var(--scm-lime); border-left-width: 4px; border-radius: 8px;
	background: var(--scm-lime-soft); color: var(--scm-ink);
	padding: 12px 14px; margin: 0 0 16px; font-size: 14px;
}
/* Icona ::before nascosta (con il padding ridotto finirebbe sopra il testo). */
.scm-cat-main .woocommerce-message::before,
.scm-prod-buy .woocommerce-message::before { display: none; }

/* --------------------------------------------------------------------------
   4. Dettaglio esperienza
   -------------------------------------------------------------------------- */
.scm-prod { padding: 28px 0 64px; }
.scm-prod__layout { display: grid; grid-template-columns: 1fr; gap: 30px; }

.scm-prod__hero {
	width: 100%; border-radius: var(--scm-radius-card);
	aspect-ratio: 4 / 3; object-fit: cover; display: block;
	background: var(--scm-bg-soft);
}
.scm-prod__h2 { margin: 32px 0 14px; font: 600 clamp(22px, 3vw, 27px)/1.15 var(--scm-font-display); color: var(--scm-ink); }
.scm-prod__text { color: var(--scm-muted); font-size: 15.5px; line-height: 1.7; }
.scm-prod__text p { margin: 0 0 12px; }

.scm-prod__includes {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: 1fr; gap: 12px 26px;
}
.scm-prod__includes li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--scm-ink); }
.scm-prod__includes .scm-ico { width: 17px; height: 17px; margin-top: 2px; color: var(--scm-lime); }

.scm-prod__notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.scm-prod__notes li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--scm-ink); }
.scm-prod__notes .scm-ico { width: 18px; height: 18px; margin-top: 1px; color: var(--scm-lime); }

/* --- Card acquisto --- */
.scm-prod-buy {
	position: relative; isolation: isolate;
	background: #fff; border: 1px solid var(--scm-border);
	border-radius: var(--scm-radius-card);
	padding: 22px 20px;
	box-shadow: var(--scm-shadow-card);
	overflow: hidden;
}
.scm-prod-buy > * { position: relative; z-index: 1; }
/*
 * Watermark montagna box acquisto.
 * NOTA DI AGGIORNAMENTO (fix 30/09/2026, "icona montagna" segnalata dal
 * cliente + allineamento misure): il vettore è la montagna del frame
 * Figma "Dettaglio esperienza" (scm_mountain_watermark_svg), fill unico
 * blu accent al 5%, dimensioni 194×184.
 * MISURE FIGMA (nodo 32:343 dentro card Frame 80 480×680): offset
 * left 352 / top 21 → SFORA di 66px oltre il bordo destro (clippato da
 * overflow:hidden), parte 21px sotto il bordo superiore della card.
 */
.scm-prod-buy__watermark {
	position: absolute; right: -66px; top: 21px; z-index: 0 !important;
	width: 194px; pointer-events: none;
}
.scm-prod-buy__watermark path {
	fill: #0063C1; fill-opacity: .05;
}

.scm-prod-buy__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.scm-prod-buy__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.scm-prod-chip {
	font: 600 12.5px/1 var(--scm-font-body);
	background: #eef1f5; color: var(--scm-ink);
	border-radius: 999px; padding: 7px 11px;
}
.scm-prod-chip--spots { background: var(--scm-lime-soft); color: var(--scm-lime-text); }
.scm-prod-buy__deadline { color: var(--scm-muted); font-size: 13px; }

.scm-prod-buy__title {
	margin: 14px 0 0; font: 600 clamp(26px, 3vw, 32px)/1.1 var(--scm-font-display);
	color: var(--scm-ink);
}
.scm-prod-buy__rows { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.scm-prod-buy__row { display: flex; align-items: center; gap: 11px; color: var(--scm-muted); font-size: 14px; }
.scm-prod-buy__row .scm-ico { width: 17px; height: 17px; }

.scm-prod-buy__divider { border: 0; border-top: 1px solid var(--scm-border); margin: 20px 0; }

.scm-prod-buy__price-label {
	margin: 0; font: 700 12px/1 var(--scm-font-body);
	letter-spacing: .09em; text-transform: uppercase; color: var(--scm-muted);
}
.scm-prod-buy__price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 8px; }
.scm-prod-buy__price { font: 700 clamp(38px, 5vw, 46px)/1 var(--scm-font-display); color: var(--scm-ink); }
.scm-prod-buy__price .amount { font: inherit; } /* neutralizza markup Woo */
.scm-prod-buy__price-per { color: var(--scm-muted); font-size: 13px; padding-bottom: 5px; }

/* Progress bar posti */
.scm-prod-spots { margin-top: 14px; }
.scm-prod-spots__bar {
	display: block; height: 6px; border-radius: 999px;
	background: #e8ecf1; overflow: hidden;
}
.scm-prod-spots__fill { display: block; height: 100%; border-radius: 999px; background: var(--scm-lime); }
.scm-prod-spots__label { margin: 9px 0 0; color: var(--scm-muted); font-size: 14px; }

/* Box "Serve la tessera" */
.scm-prod-tessera {
	margin-top: 18px; padding: 16px 16px 14px;
	background: var(--scm-lime-soft);
	border: 1.5px solid var(--scm-lime);
	border-radius: var(--scm-radius-card);
}
.scm-prod-tessera__head { display: flex; align-items: center; gap: 12px; }
.scm-prod-tessera__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 10px; flex: none;
	background: var(--scm-lime-chip); color: var(--scm-lime-text);
}
.scm-prod-tessera__title { font: 600 21px/1.1 var(--scm-font-display); color: var(--scm-ink); }
.scm-prod-tessera__text { margin: 10px 2px 14px; color: var(--scm-ink); font-size: 14px; line-height: 1.55; }
.scm-prod-tessera__cta { width: 100%; justify-content: center; }

/* Bottone aggiungi (attivo e disabilitato) */
.scm-prod-add {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	width: 100%; margin-top: 16px;
	font: 700 15px/1 var(--scm-font-body);
	border-radius: 8px; padding: 15px 18px; cursor: pointer;
	background: #fff; border: 1px solid #d9e0e8; color: var(--scm-ink);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
	text-decoration: none;
}
.scm-prod-add:hover { background: var(--scm-navy); border-color: var(--scm-navy); color: #fff; text-decoration: none; }
.scm-prod-add .scm-ico { width: 17px; height: 17px; }
.scm-prod-add--disabled {
	background: #f1f3f5; border-color: #e5e8ec; color: #98a2ac; cursor: not-allowed;
}
.scm-prod-add--disabled:hover { background: #f1f3f5; border-color: #e5e8ec; color: #98a2ac; }
.scm-prod-add--disabled .scm-ico { color: var(--scm-lime); }

.scm-prod-buy__insurance {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	margin: 16px 0 0; color: var(--scm-muted); font-size: 14px;
}
.scm-prod-buy__insurance .scm-ico { width: 16px; height: 16px; color: var(--scm-lime); }

.scm-prod-soldout { margin: 16px 0 0; font-size: 14px; color: var(--scm-amber-text); }

/* Box WhatsApp */
.scm-prod-wa {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%; margin-top: 16px; padding: 16px 18px;
	background: #fff; border: 1px solid var(--scm-border);
	border-radius: 8px; box-shadow: 0 1px 2px rgba(24, 49, 89, .04);
	color: var(--scm-ink); font: 700 14px/1.2 var(--scm-font-body);
	text-align: center; text-decoration: none;
}
/* Il parent (custom.css) sottolinea a[target="_blank"]: qui il box è un bottone. */
.scm-main a.scm-prod-wa,
.scm-main a.scm-prod-wa:hover,
.scm-main a.scm-prod-wa:focus {
	color: var(--scm-ink); text-decoration: none;
}
.scm-prod-wa:hover { border-color: var(--scm-navy); }
.scm-prod-wa__ico { display: inline-flex; color: #25d366; }
.scm-prod-wa__ico .scm-ico { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   5. Card prodotto: stato "tesserato" (frame "Tessera": blu pieno, ⊕ bianco)
   -------------------------------------------------------------------------- */
.scm-pcard__add--active { background: var(--scm-blue); border-color: var(--scm-blue); color: #fff; }
.scm-pcard__add--active .scm-ico { color: #fff; }
.scm-pcard__add--active:hover { background: var(--scm-navy); border-color: var(--scm-navy); }
.scm-pcard__add--active:hover .scm-ico { color: #fff; }

/* --------------------------------------------------------------------------
   5b. Blocco acquisto mobile (sotto l'hero, sotto 768px)
   -------------------------------------------------------------------------- */
.scm-prod__mobile-buy { display: block; padding: 16px 0 8px; border-bottom: 1px solid var(--scm-border); margin-bottom: 18px; }
.scm-prod__mobile-buy .scm-prod__mobile-title { margin: 0 0 6px; font: 600 24px/1.15 var(--scm-font-display); color: var(--scm-ink); }
.scm-prod__mobile-buy .scm-prod-buy__price { font: 700 30px/1 var(--scm-font-display); color: var(--scm-ink); }
.scm-prod__mobile-cta { display: inline-flex; margin-top: 12px; width: auto; }

@media (min-width: 768px) {
	.scm-prod__mobile-buy { display: none; }
}

/* --------------------------------------------------------------------------
   6. Breakpoint
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
	.scm-prod__includes { grid-template-columns: 1fr 1fr; }
	.scm-cat-grid { grid-template-columns: repeat(2, 1fr); }
	.scm-prod-buy { padding: 26px 24px; }
}

@media (min-width: 1000px) {
	.scm-cat-head { padding: 40px 0 28px; }
	.scm-cat-body { padding-top: 32px; }
	.scm-prod { padding: 40px 0 64px; }
	.scm-cat-head__top { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 24px; }
	.scm-cat-layout { grid-template-columns: 232px 1fr; gap: 44px; }
	/* Sidebar statica: niente toggle, pannello sempre visibile */
	.scm-cat-filters__toggle { display: none; }
	.scm-cat-filters__panel { display: block !important; margin-top: 0; }
	.scm-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
	/* Dettaglio: 60/40 con colonna acquisto allineata in alto */
	.scm-prod__layout { grid-template-columns: 3fr 2fr; gap: 40px; align-items: start; }
	.scm-prod__h2:first-of-type { margin-top: 36px; }
}