/**
 * BPC Design System — Componenti riutilizzabili.
 *
 * Linguaggio "Heritage Modern Institutional": superfici chiare, bordi sottili al
 * posto di ombre pesanti, bordeaux come unico accento interattivo, micro
 * animazioni conservative. Tutto basato sui design token (var(--bpc-*)), quindi
 * segue colori/font del Pannello Tema e resta coerente tra tema e plugin.
 *
 * Convenzione classi: prefisso .bpc-  (BEM: blocco__elemento--modificatore).
 * Componenti interattivi (accordion/tab/modale/alert) usano assets/js/components.js.
 *
 * INDICE
 *  1. Utility di layout (grid, section, divider, eyebrow)
 *  2. Section header
 *  3. Bottoni (varianti)
 *  4. Icone (cerchio)
 *  5. Card (+ varianti)
 *  6. Hero / Banner
 *  7. Badge / Pill
 *  8. CTA banner
 *  9. Stat / KPI
 * 10. Timeline
 * (form, tabelle, alert, box, download, skeleton, spinner, tooltip,
 *  accordion, tab, modale, pagination: sezioni successive nello stesso file)
 */

/* =============================================================
 * 1. Utility di layout
 * ============================================================= */
.bpc-section {
	padding-block: var(--bpc-space-xl);
}
.bpc-section--tight {
	padding-block: var(--bpc-space-lg);
}
.bpc-section--alt {
	background: var(--bpc-surface-container-low);
}
.bpc-section--dark {
	background: var(--bpc-tertiary-container);
	color: var(--bpc-on-tertiary-container);
}

.bpc-grid {
	display: grid;
	gap: var(--bpc-space-lg);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.bpc-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.bpc-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.bpc-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.bpc-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.bpc-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.bpc-divider {
	border: 0;
	border-top: 1px solid var(--bpc-outline-variant);
	margin-block: var(--bpc-space-lg);
}

.bpc-eyebrow {
	font-family: var(--bpc-font-label);
	font-size: var(--bpc-text-label-md);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--bpc-primary-container);
}

/* =============================================================
 * 2. Section header
 * ============================================================= */
.bpc-section-header {
	margin-bottom: var(--bpc-space-xl);
}
.bpc-section-header--center {
	text-align: center;
}
.bpc-section-header__title {
	font-family: var(--bpc-font-headline);
	font-size: var(--bpc-text-headline-lg);
	line-height: var(--bpc-leading-heading);
	color: var(--bpc-primary);
	margin: 0 0 var(--bpc-space-sm);
}
.bpc-section-header__sub {
	color: var(--bpc-on-surface-variant);
	max-width: 42rem;
	margin: 0;
}
.bpc-section-header--center .bpc-section-header__sub {
	margin-inline: auto;
}
.bpc-section-header__rule {
	height: 4px;
	width: 96px;
	background: var(--bpc-primary);
	border-radius: var(--bpc-radius-full);
	margin-top: var(--bpc-space-md);
}
.bpc-section-header--center .bpc-section-header__rule {
	margin-inline: auto;
}
/* Variante con barra verticale a sinistra */
.bpc-section-header--bar {
	border-left: 4px solid var(--bpc-primary);
	padding-left: var(--bpc-space-md);
}

/* =============================================================
 * 3. Bottoni (varianti che estendono .bpc-btn di theme.css)
 * ============================================================= */
.bpc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bpc-space-sm);
	line-height: 1.2;
	border: 1px solid transparent;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.bpc-btn--secondary {
	background: transparent;
	color: var(--bpc-primary);
	border-color: var(--bpc-primary);
}
.bpc-btn--secondary:hover,
.bpc-btn--secondary:focus-visible {
	background: rgb(var(--bpc-primary-rgb) / 0.06);
	color: var(--bpc-primary);
}
.bpc-btn--ghost {
	background: transparent;
	color: var(--bpc-on-surface);
	border-color: var(--bpc-outline-variant);
}
.bpc-btn--ghost:hover,
.bpc-btn--ghost:focus-visible {
	border-color: var(--bpc-primary-container);
	color: var(--bpc-primary);
}
/* Bottone su sfondo scuro / hero */
.bpc-btn--on-dark {
	background: var(--bpc-on-primary);
	color: var(--bpc-primary-container);
	box-shadow: var(--bpc-shadow-md);
}
.bpc-btn--on-dark:hover,
.bpc-btn--on-dark:focus-visible {
	background: var(--bpc-primary-fixed);
}
/* Link con freccia */
.bpc-btn--link {
	background: transparent;
	border: 0;
	padding-inline: 0;
	color: var(--bpc-primary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.bpc-btn--link:hover .bpc-btn__arrow,
.bpc-btn--link:focus-visible .bpc-btn__arrow {
	transform: translateX(4px);
}
.bpc-btn__arrow {
	transition: transform 0.2s ease;
}
/* Dimensioni */
.bpc-btn--sm { padding: 6px 14px; font-size: var(--bpc-text-caption); }
.bpc-btn--lg { padding: 14px 28px; font-size: var(--bpc-text-body-md); }
.bpc-btn--block { display: flex; width: 100%; }

/* =============================================================
 * 4. Icone in cerchio
 * ============================================================= */
.bpc-icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--bpc-radius-full);
	background: rgb(var(--bpc-primary-rgb) / 0.06);
	color: var(--bpc-primary);
	flex: 0 0 auto;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.bpc-icon-circle--lg { width: 72px; height: 72px; }
.bpc-icon-circle--outline {
	background: transparent;
	border: 1px solid var(--bpc-outline-variant);
}
/* Hover se dentro un gruppo interattivo */
.bpc-hover-group:hover .bpc-icon-circle {
	background: var(--bpc-primary);
	color: var(--bpc-on-primary);
}

/* =============================================================
 * 5. Card
 * ============================================================= */
.bpc-card {
	display: flex;
	flex-direction: column;
	background: var(--bpc-card-bg, var(--bpc-surface-container-lowest));
	border: 1px solid var(--bpc-card-border, var(--bpc-outline-variant));
	border-radius: var(--bpc-card-radius, var(--bpc-radius-lg));
	box-shadow: var(--bpc-card-shadow, none);
	overflow: hidden;
}
.bpc-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bpc-surface-variant);
}
.bpc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.bpc-card__body {
	padding: var(--bpc-space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--bpc-space-sm);
	flex: 1;
}
.bpc-card__title {
	font-family: var(--bpc-font-headline);
	font-size: var(--bpc-text-headline-md);
	line-height: var(--bpc-leading-heading);
	color: var(--bpc-primary);
	margin: 0;
}
.bpc-card__text {
	color: var(--bpc-on-surface-variant);
	margin: 0;
}
.bpc-card__footer {
	margin-top: auto;
	padding-top: var(--bpc-space-sm);
}
/* Hover: sollevamento + ombra + zoom immagine */
.bpc-card--hover {
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.bpc-card--hover:hover {
	transform: translateY(var(--bpc-card-hover-lift, -4px));
	box-shadow: var(--bpc-card-hover-shadow, var(--bpc-shadow-lg));
	border-color: var(--bpc-primary-container);
}
.bpc-card--hover:hover .bpc-card__media img {
	transform: scale(1.05);
}
/* Featured: bordo superiore accento */
.bpc-card--featured {
	border-top: 4px solid var(--bpc-primary-container);
}
/* Icona in evidenza */
.bpc-card--icon .bpc-card__body {
	align-items: flex-start;
}
/* Orizzontale (immagine a sinistra) */
@media (min-width: 768px) {
	.bpc-card--horizontal {
		flex-direction: row;
	}
	.bpc-card--horizontal .bpc-card__media {
		aspect-ratio: auto;
		width: 42%;
		flex: 0 0 42%;
	}
}
/* Badge assoluto (es. "Più popolare") */
.bpc-card__badge {
	position: absolute;
	top: var(--bpc-space-md);
	left: var(--bpc-space-md);
	z-index: 2;
}

/* =============================================================
 * 6. Hero / Banner
 * ============================================================= */
.bpc-hero {
	position: relative;
	overflow: hidden;
	background: var(--bpc-surface-container-low);
}
.bpc-hero__inner {
	position: relative;
	z-index: 2;
	padding-block: clamp(2.5rem, 6vw, 5rem);
}
.bpc-hero__eyebrow {
	font-family: var(--bpc-font-label);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--bpc-primary-container);
	font-weight: 600;
	margin: 0 0 var(--bpc-space-sm);
}
.bpc-hero__title {
	font-family: var(--bpc-font-headline);
	font-size: var(--bpc-text-headline-xl);
	line-height: var(--bpc-leading-tight);
	color: var(--bpc-primary);
	margin: 0 0 var(--bpc-space-md);
}
.bpc-hero__text {
	font-size: var(--bpc-text-body-lg);
	color: var(--bpc-on-surface-variant);
	max-width: 40rem;
	margin: 0 0 var(--bpc-space-lg);
}
.bpc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bpc-space-md);
}
/* Split testo + immagine */
.bpc-hero--split .bpc-hero__inner {
	display: grid;
	gap: var(--bpc-space-xl);
	align-items: center;
}
@media (min-width: 1024px) {
	.bpc-hero--split .bpc-hero__inner {
		grid-template-columns: 1fr 1fr;
	}
}
.bpc-hero__media img {
	width: 100%;
	height: auto;
	border-radius: var(--bpc-radius-xl);
	box-shadow: var(--bpc-shadow-lg);
	display: block;
}
/* Full-bleed con immagine di sfondo + overlay scuro */
.bpc-hero--cover {
	color: var(--bpc-on-primary);
}
.bpc-hero--cover .bpc-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
}
.bpc-hero--cover .bpc-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(var(--bpc-on-surface-rgb) / 0.78), rgb(var(--bpc-on-surface-rgb) / 0.30));
}
.bpc-hero--cover .bpc-hero__eyebrow { color: var(--bpc-primary-fixed); }
.bpc-hero--cover .bpc-hero__title { color: var(--bpc-on-primary); }
.bpc-hero--cover .bpc-hero__text { color: rgb(var(--bpc-on-primary-rgb) / 0.9); }
/* Pill/badge glass nella hero */
.bpc-hero__pill {
	display: inline-block;
	padding: 8px 20px;
	border: 1px solid rgb(var(--bpc-on-primary-rgb) / 0.4);
	border-radius: var(--bpc-radius-full);
	backdrop-filter: blur(6px);
	font-family: var(--bpc-font-label);
	font-size: var(--bpc-text-label-md);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--bpc-space-md);
}

/* =============================================================
 * 7. Badge / Pill
 * ============================================================= */
.bpc-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: var(--bpc-badge-radius, var(--bpc-radius-full));
	font-family: var(--bpc-font-label);
	font-size: var(--bpc-text-caption);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.4;
	background: var(--bpc-surface-variant);
	color: var(--bpc-on-surface);
}
.bpc-badge--primary { background: var(--bpc-primary-container); color: var(--bpc-on-primary); }
.bpc-badge--soft { background: rgb(var(--bpc-primary-rgb) / 0.08); color: var(--bpc-primary); }
.bpc-badge--success { background: #e6f4ea; color: #15702e; }
.bpc-badge--warning { background: #fff4e5; color: #9a5b00; }
.bpc-badge--error { background: var(--bpc-error-container); color: var(--bpc-on-error-container); }
.bpc-badge--outline { background: transparent; border: 1px solid var(--bpc-outline-variant); color: var(--bpc-on-surface-variant); }

/* =============================================================
 * 8. CTA banner (full-width)
 * ============================================================= */
.bpc-cta-banner {
	position: relative;
	overflow: hidden;
	border-radius: var(--bpc-radius-xl);
	padding: clamp(2rem, 5vw, 4rem);
	background: var(--bpc-primary);
	color: var(--bpc-on-primary);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bpc-space-lg);
}
.bpc-cta-banner__title {
	font-family: var(--bpc-font-headline);
	font-size: var(--bpc-text-headline-lg);
	color: var(--bpc-on-primary);
	margin: 0 0 var(--bpc-space-xs);
}
.bpc-cta-banner__text {
	margin: 0;
	color: rgb(var(--bpc-on-primary-rgb) / 0.9);
	max-width: 46rem;
}

/* =============================================================
 * 9. Stat / KPI
 * ============================================================= */
.bpc-stat {
	text-align: center;
}
.bpc-stat__value {
	font-family: var(--bpc-font-headline);
	font-size: var(--bpc-text-headline-lg);
	font-weight: 700;
	color: var(--bpc-primary);
	line-height: 1.1;
}
.bpc-stat__label {
	font-family: var(--bpc-font-label);
	font-size: var(--bpc-text-label-md);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bpc-secondary);
	margin-top: var(--bpc-space-xs);
}

/* =============================================================
 * 10. Timeline
 * ============================================================= */
.bpc-timeline {
	position: relative;
	padding-left: 32px;
}
.bpc-timeline::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 4px;
	bottom: 4px;
	width: 2px;
	background: linear-gradient(to bottom, var(--bpc-primary-container), rgb(var(--bpc-primary-container-rgb) / 0.2));
}
.bpc-timeline__item {
	position: relative;
	padding-bottom: var(--bpc-space-xl);
}
.bpc-timeline__item:last-child {
	padding-bottom: 0;
}
.bpc-timeline__dot {
	position: absolute;
	left: -32px;
	top: 2px;
	width: 16px;
	height: 16px;
	border-radius: var(--bpc-radius-full);
	background: var(--bpc-primary-container);
	box-shadow: 0 0 0 4px var(--bpc-surface-container-lowest);
}
.bpc-timeline__date {
	font-family: var(--bpc-font-label);
	font-weight: 700;
	color: var(--bpc-primary-container);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--bpc-text-label-md);
	margin-bottom: var(--bpc-space-xs);
}
.bpc-timeline__card {
	background: var(--bpc-surface-container-lowest);
	border: 1px solid var(--bpc-outline-variant);
	border-radius: var(--bpc-radius-lg);
	padding: var(--bpc-space-lg);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bpc-timeline__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--bpc-shadow-md);
}

/* =============================================================
 * 11. Form (input, select, textarea, checkbox, radio, search)
 * ============================================================= */
.bpc-field {
	margin-bottom: var(--bpc-space-md);
}
.bpc-label {
	display: block;
	font-family: var(--bpc-font-label);
	font-size: var(--bpc-text-label-md);
	font-weight: 600;
	color: var(--bpc-secondary);
	margin-bottom: 6px;
}
.bpc-label__req {
	color: var(--bpc-error);
}
.bpc-help {
	font-size: var(--bpc-text-caption);
	color: var(--bpc-secondary);
	margin-top: 4px;
}
.bpc-field--error .bpc-help {
	color: var(--bpc-error);
}

/* I campi usano variabili "field" sovrascrivibili dal modulo Form (pannello). */
.bpc-input,
.bpc-select,
.bpc-textarea {
	width: 100%;
	padding: var(--bpc-field-pad-y, 11px) var(--bpc-field-pad-x, 14px);
	font-family: var(--bpc-font-body);
	font-size: var(--bpc-text-body-md);
	color: var(--bpc-field-fg, var(--bpc-on-surface));
	background: var(--bpc-field-bg, var(--bpc-surface-container-lowest));
	border: 1px solid var(--bpc-field-border, #767676);
	border-radius: var(--bpc-field-radius, var(--bpc-radius-lg));
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bpc-input::placeholder,
.bpc-textarea::placeholder {
	color: var(--bpc-secondary);
	opacity: 0.7;
}
.bpc-input:focus,
.bpc-select:focus,
.bpc-textarea:focus {
	outline: none;
	border-color: var(--bpc-field-focus, var(--bpc-primary-container));
	box-shadow: 0 0 0 3px var(--bpc-field-focus-ring, rgb(var(--bpc-primary-container-rgb) / 0.15));
}

/* --- Campi nativi (ricerca, commenti, form plugin): stesso look --- */
.bpc-entry input[type="text"],
.bpc-entry input[type="email"],
.bpc-entry input[type="url"],
.bpc-entry input[type="tel"],
.bpc-entry input[type="number"],
.bpc-entry input[type="password"],
.bpc-entry input[type="search"],
.bpc-entry textarea,
.bpc-entry select,
.bpc-header-search__form input[type="search"],
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.search-form input[type="search"],
.wp-block-search__input {
	font-family: var(--bpc-font-body);
	font-size: var(--bpc-text-body-md);
	color: var(--bpc-field-fg, var(--bpc-on-surface));
	background: var(--bpc-field-bg, var(--bpc-surface-container-lowest));
	border: 1px solid var(--bpc-field-border, #767676);
	border-radius: var(--bpc-field-radius, var(--bpc-radius-lg));
	padding: var(--bpc-field-pad-y, 11px) var(--bpc-field-pad-x, 14px);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bpc-entry input:focus,
.bpc-entry textarea:focus,
.bpc-entry select:focus,
.bpc-header-search__form input[type="search"]:focus,
.comment-form input:focus,
.comment-form textarea:focus,
.search-form input[type="search"]:focus,
.wp-block-search__input:focus {
	outline: none;
	border-color: var(--bpc-field-focus, var(--bpc-primary-container));
	box-shadow: 0 0 0 3px var(--bpc-field-focus-ring, rgb(var(--bpc-primary-container-rgb) / 0.15));
}
.bpc-textarea {
	min-height: 120px;
	resize: vertical;
}
.bpc-field--error .bpc-input,
.bpc-field--error .bpc-select,
.bpc-field--error .bpc-textarea {
	border-color: var(--bpc-error);
}
.bpc-field--error .bpc-input:focus,
.bpc-field--error .bpc-select:focus,
.bpc-field--error .bpc-textarea:focus {
	box-shadow: 0 0 0 3px rgb(186 26 26 / 0.15);
}
/* Select: freccia custom */
.bpc-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5e63' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
	padding-right: 40px;
}

/* Checkbox / Radio */
.bpc-check {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: var(--bpc-text-body-md);
	color: var(--bpc-on-surface);
	margin-bottom: 8px;
}
.bpc-check input[type="checkbox"],
.bpc-check input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	flex: 0 0 auto;
	border: 2px solid var(--bpc-outline);
	background: var(--bpc-surface-container-lowest);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	position: relative;
}
.bpc-check input[type="checkbox"] { border-radius: var(--bpc-radius); }
.bpc-check input[type="radio"] { border-radius: var(--bpc-radius-full); }
.bpc-check input:focus-visible {
	outline: 3px solid var(--bpc-primary-container);
	outline-offset: 2px;
}
.bpc-check input:checked {
	background: var(--bpc-primary-container);
	border-color: var(--bpc-primary-container);
}
.bpc-check input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border: solid var(--bpc-on-primary);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.bpc-check input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: var(--bpc-radius-full);
	background: var(--bpc-on-primary);
}

/* Search input con icona */
.bpc-search {
	position: relative;
}
.bpc-search .bpc-input,
.bpc-search input[type="search"],
.bpc-search input[type="text"] {
	padding-left: 44px;
}
.bpc-search__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--bpc-secondary);
	pointer-events: none;
	display: inline-flex;
}

/* Pill filter (gruppo di filtri a pillola) */
.bpc-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bpc-space-sm);
}
.bpc-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: var(--bpc-radius-full);
	border: 1px solid var(--bpc-outline-variant);
	background: var(--bpc-surface-container-lowest);
	color: var(--bpc-on-surface-variant);
	font-family: var(--bpc-font-label);
	font-size: var(--bpc-text-label-md);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
}
.bpc-filter-pill:hover {
	border-color: var(--bpc-primary-container);
	color: var(--bpc-primary);
}
.bpc-filter-pill.is-active {
	background: var(--bpc-primary-container);
	border-color: var(--bpc-primary-container);
	color: var(--bpc-on-primary);
}

/* =============================================================
 * 12. Tabelle responsive / comparative
 * ============================================================= */
.bpc-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--bpc-outline-variant);
	border-radius: var(--bpc-radius-lg);
	-webkit-overflow-scrolling: touch;
}
.bpc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--bpc-text-body-md);
}
.bpc-table th,
.bpc-table td {
	padding: 14px 18px;
	text-align: left;
	vertical-align: top;
}
.bpc-table thead th {
	background: var(--bpc-surface-container-low);
	font-family: var(--bpc-font-label);
	font-size: var(--bpc-text-label-md);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bpc-primary);
	border-bottom: 1px solid var(--bpc-outline-variant);
	white-space: nowrap;
}
.bpc-table tbody tr + tr td {
	border-top: 1px solid var(--bpc-outline-variant);
}
.bpc-table--striped tbody tr:nth-child(even) td {
	background: var(--bpc-surface-container-low);
}
.bpc-table--hover tbody tr:hover td {
	background: rgb(var(--bpc-primary-rgb) / 0.03);
}
.bpc-table__yes { color: #15702e; font-weight: 700; }
.bpc-table__no { color: var(--bpc-secondary); }
/* Colonna evidenziata (comparativa) */
.bpc-table__col-highlight {
	background: rgb(var(--bpc-primary-rgb) / 0.04);
}
/* Tabella "stacked" su mobile: usa data-label sulle celle */
@media (max-width: 640px) {
	.bpc-table--stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.bpc-table--stack tbody tr {
		display: block;
		border-bottom: 2px solid var(--bpc-outline-variant);
		padding: var(--bpc-space-sm) 0;
	}
	.bpc-table--stack tbody td {
		display: flex;
		justify-content: space-between;
		gap: var(--bpc-space-md);
		border: 0;
		padding: 8px 16px;
	}
	.bpc-table--stack tbody td::before {
		content: attr(data-label);
		font-family: var(--bpc-font-label);
		font-weight: 700;
		color: var(--bpc-primary);
		text-transform: uppercase;
		font-size: var(--bpc-text-caption);
	}
}

/* =============================================================
 * 13. Alert / Notifiche
 * ============================================================= */
.bpc-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--bpc-space-md);
	padding: var(--bpc-space-md) var(--bpc-space-lg);
	border: 1px solid var(--bpc-outline-variant);
	border-left-width: 4px;
	border-radius: var(--bpc-alert-radius, var(--bpc-radius-lg));
	background: var(--bpc-surface-container-low);
	color: var(--bpc-on-surface);
}
.bpc-alert__icon { flex: 0 0 auto; color: var(--bpc-secondary); display: inline-flex; }
.bpc-alert__body { flex: 1; }
.bpc-alert__title { font-weight: 700; margin: 0 0 2px; }
.bpc-alert__text { margin: 0; color: var(--bpc-on-surface-variant); }
.bpc-alert__link { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--bpc-primary); text-decoration: underline; }
.bpc-alert__link:hover { text-decoration: none; }
.bpc-alert__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	background: transparent;
	border: 0;
	border-radius: var(--bpc-radius);
	cursor: pointer;
	color: var(--bpc-secondary);
	font-size: 20px;
	line-height: 1;
	padding: 0 4px;
}
.bpc-alert--info { border-left-color: var(--bpc-primary-container); }
.bpc-alert--info .bpc-alert__icon { color: var(--bpc-primary-container); }
.bpc-alert--success { border-left-color: #15702e; background: #f0f9f2; }
.bpc-alert--success .bpc-alert__icon { color: #15702e; }
.bpc-alert--warning { border-left-color: #9a5b00; background: #fff8ef; }
.bpc-alert--warning .bpc-alert__icon { color: #9a5b00; }
.bpc-alert--error { border-left-color: var(--bpc-error); background: var(--bpc-error-container); }
.bpc-alert--error .bpc-alert__icon { color: var(--bpc-error); }
.bpc-alert[hidden] { display: none; }

/* =============================================================
 * 14. Box informativo / Disclaimer / Lead
 * ============================================================= */
.bpc-infobox {
	padding: var(--bpc-space-lg);
	background: var(--bpc-surface-container-low);
	border-left: 4px solid var(--bpc-primary);
	border-radius: 0 var(--bpc-radius-lg) var(--bpc-radius-lg) 0;
}
.bpc-infobox--quote {
	font-style: italic;
	color: var(--bpc-on-surface-variant);
}
.bpc-lead {
	font-size: var(--bpc-text-body-lg);
	font-weight: 600;
	color: var(--bpc-primary);
	border-left: 4px solid var(--bpc-primary);
	padding-left: var(--bpc-space-md);
	margin-block: var(--bpc-space-lg);
}
.bpc-disclaimer {
	font-size: var(--bpc-text-caption);
	line-height: 1.6;
	color: var(--bpc-secondary);
	background: var(--bpc-surface-container-low);
	border-radius: var(--bpc-radius-lg);
	padding: var(--bpc-space-md) var(--bpc-space-lg);
}

/* =============================================================
 * 15. Lista documenti / Download
 * ============================================================= */
.bpc-doc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--bpc-space-sm);
}
.bpc-doc {
	display: flex;
	align-items: center;
	gap: var(--bpc-space-md);
	padding: var(--bpc-space-md);
	border: 1px solid var(--bpc-outline-variant);
	border-radius: var(--bpc-radius-lg);
	text-decoration: none;
	color: var(--bpc-on-surface);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.bpc-doc:hover {
	border-color: var(--bpc-primary);
	box-shadow: var(--bpc-shadow-sm);
}
.bpc-doc__icon {
	flex: 0 0 auto;
	color: var(--bpc-primary);
	font-size: 2rem;
	display: inline-flex;
}
.bpc-doc__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bpc-doc__label { font-weight: 700; line-height: 1.3; }
.bpc-doc__meta {
	font-size: var(--bpc-text-caption);
	color: var(--bpc-secondary);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.bpc-doc__dl {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--bpc-radius);
	background: var(--bpc-primary);
	color: var(--bpc-on-primary);
}

/* =============================================================
 * 16. Skeleton loader
 * ============================================================= */
.bpc-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--bpc-surface-variant);
	border-radius: var(--bpc-radius);
}
.bpc-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.55), transparent);
	animation: bpc-shimmer 1.4s infinite;
}
.bpc-skeleton--text { height: 0.9em; margin-bottom: 0.5em; }
.bpc-skeleton--title { height: 1.4em; width: 60%; margin-bottom: 0.75em; }
.bpc-skeleton--line-short { width: 40%; }
.bpc-skeleton--block { height: 160px; }
.bpc-skeleton--circle { width: 56px; height: 56px; border-radius: var(--bpc-radius-full); }
@keyframes bpc-shimmer {
	100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
	.bpc-skeleton::after { animation: none; }
}

/* =============================================================
 * 17. Spinner
 * ============================================================= */
.bpc-spinner {
	display: inline-block;
	width: 28px;
	height: 28px;
	border: 3px solid var(--bpc-outline-variant);
	border-top-color: var(--bpc-primary);
	border-radius: var(--bpc-radius-full);
	animation: bpc-spin 0.8s linear infinite;
}
.bpc-spinner--sm { width: 18px; height: 18px; border-width: 2px; }
.bpc-spinner--lg { width: 44px; height: 44px; border-width: 4px; }
@keyframes bpc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.bpc-spinner { animation-duration: 2s; }
}

/* =============================================================
 * 18. Tooltip (CSS, via attributo data-bpc-tooltip)
 * ============================================================= */
.bpc-tooltip {
	position: relative;
}
.bpc-tooltip::after {
	content: attr(data-bpc-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--bpc-inverse-surface);
	color: var(--bpc-inverse-on-surface);
	padding: 6px 10px;
	border-radius: var(--bpc-radius);
	font-size: var(--bpc-text-caption);
	white-space: nowrap;
	max-width: 240px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 50;
}
.bpc-tooltip:hover::after,
.bpc-tooltip:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
/* Chiuso con Escape: nasconde il tooltip visivo finché non si ri-attiva. */
.bpc-tooltip.bpc-tooltip-dismissed::after {
	opacity: 0 !important;
	visibility: hidden !important;
}

/* =============================================================
 * 19. Paginazione numerica
 * ============================================================= */
.bpc-pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--bpc-space-xl);
}
.bpc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	margin: 0 4px;
	border: 1px solid var(--bpc-outline-variant);
	border-radius: var(--bpc-radius-lg);
	color: var(--bpc-on-surface);
	text-decoration: none;
	font-family: var(--bpc-font-label);
	transition: all 0.2s ease;
}
.bpc-pagination .page-numbers:hover {
	border-color: var(--bpc-primary-container);
	color: var(--bpc-primary);
}
.bpc-pagination .page-numbers.current {
	background: var(--bpc-primary-container);
	border-color: var(--bpc-primary-container);
	color: var(--bpc-on-primary);
}
.bpc-pagination .page-numbers.dots {
	border-color: transparent;
}

/* =============================================================
 * 20. Sticky subnav / anchor nav
 * ============================================================= */
.bpc-subnav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgb(var(--bpc-surface-container-lowest-rgb) / 0.95);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--bpc-outline-variant);
}
.bpc-subnav__list {
	display: flex;
	gap: var(--bpc-space-lg);
	overflow-x: auto;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bpc-subnav__link {
	display: block;
	padding: var(--bpc-space-md) 2px;
	white-space: nowrap;
	color: var(--bpc-secondary);
	text-decoration: none;
	font-family: var(--bpc-font-label);
	font-size: var(--bpc-text-label-md);
	border-bottom: 3px solid transparent;
}
.bpc-subnav__link:hover,
.bpc-subnav__link.is-active {
	color: var(--bpc-primary-container);
	border-bottom-color: var(--bpc-primary-container);
}

/* =============================================================
 * 21. Accordion / FAQ (JS: .bpc-accordion__trigger[aria-expanded])
 * ============================================================= */
.bpc-accordion {
	border: 1px solid var(--bpc-outline-variant);
	border-radius: var(--bpc-radius-lg);
	overflow: hidden;
	background: var(--bpc-surface-container-lowest);
}
.bpc-accordion__item + .bpc-accordion__item {
	border-top: 1px solid var(--bpc-outline-variant);
}
.bpc-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bpc-space-md);
	padding: var(--bpc-space-md) var(--bpc-space-lg);
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--bpc-font-headline);
	font-size: var(--bpc-text-body-lg);
	font-weight: 600;
	color: var(--bpc-primary);
	transition: background 0.2s ease;
}
.bpc-accordion__trigger:hover {
	background: var(--bpc-surface-container-low);
}
.bpc-accordion__icon {
	flex: 0 0 auto;
	transition: transform 0.3s ease;
	color: var(--bpc-primary-container);
	display: inline-flex;
}
.bpc-accordion__trigger[aria-expanded="true"] .bpc-accordion__icon {
	transform: rotate(180deg);
}
.bpc-accordion__panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}
.bpc-accordion__panel-inner {
	padding: 0 var(--bpc-space-lg) var(--bpc-space-lg);
	color: var(--bpc-on-surface-variant);
}
@media (prefers-reduced-motion: reduce) {
	.bpc-accordion__panel { transition: none; }
}

/* =============================================================
 * 22. Tab (JS: [role="tab"][aria-selected], [role="tabpanel"])
 * ============================================================= */
.bpc-tabs__list {
	display: flex;
	gap: var(--bpc-space-lg);
	overflow-x: auto;
	border-bottom: 1px solid var(--bpc-outline-variant);
	margin-bottom: var(--bpc-space-lg);
}
.bpc-tabs__tab {
	background: transparent;
	border: 0;
	border-bottom: 4px solid transparent;
	padding: var(--bpc-space-md) 2px;
	margin-bottom: -1px;
	cursor: pointer;
	white-space: nowrap;
	font-family: var(--bpc-font-label);
	font-size: var(--bpc-text-label-md);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bpc-secondary);
	transition: color 0.2s ease, border-color 0.2s ease;
}
.bpc-tabs__tab:hover {
	color: var(--bpc-primary);
}
.bpc-tabs__tab[aria-selected="true"] {
	color: var(--bpc-primary-container);
	border-bottom-color: var(--bpc-primary-container);
}
.bpc-tabs__panel[hidden] { display: none; }

/* =============================================================
 * 23. Modale / Dialog (JS: apre/chiude .is-open)
 * ============================================================= */
.bpc-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--bpc-space-lg);
}
.bpc-modal.is-open {
	display: flex;
}
.bpc-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgb(var(--bpc-on-surface-rgb) / 0.55);
	animation: bpc-fade 0.2s ease;
}
.bpc-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(92vw, 640px);
	max-height: 88vh;
	overflow-y: auto;
	background: var(--bpc-surface-container-lowest);
	border-radius: var(--bpc-radius-xl);
	box-shadow: var(--bpc-shadow-lg);
	animation: bpc-modal-in 0.2s ease;
}
.bpc-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bpc-space-md);
	padding: var(--bpc-space-lg);
	border-bottom: 1px solid var(--bpc-outline-variant);
}
.bpc-modal__title {
	font-family: var(--bpc-font-headline);
	font-size: var(--bpc-text-headline-md);
	color: var(--bpc-primary);
	margin: 0;
}
.bpc-modal__close {
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--bpc-secondary);
	font-size: 26px;
	line-height: 1;
	padding: 0 4px;
}
.bpc-modal__body { padding: var(--bpc-space-lg); }
.bpc-modal__footer {
	padding: var(--bpc-space-lg);
	border-top: 1px solid var(--bpc-outline-variant);
	display: flex;
	justify-content: flex-end;
	gap: var(--bpc-space-sm);
}
body.bpc-modal-open { overflow: hidden; }
@keyframes bpc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bpc-modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
	.bpc-modal__overlay,
	.bpc-modal__dialog { animation: none; }
}

/* =============================================================
 * 24. Reveal on scroll (attivato da components.js)
 * ============================================================= */
.bpc-reveal {
	opacity: 0;
	transform: translateY(var(--bpc-reveal-dist, 20px));
	transition: opacity var(--bpc-reveal-dur, 0.6s) ease, transform var(--bpc-reveal-dur, 0.6s) ease;
	will-change: opacity, transform;
}
.bpc-reveal--zoom {
	transform: scale(0.94);
}
.bpc-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.bpc-reveal { opacity: 1; transform: none; transition: none; }
}

/* =============================================================
 * 26. Gradienti (opzionali, dal pannello Effetti)
 * ============================================================= */
/* Applicati come background-image: se la variabile non e' impostata,
 * "none" lascia intatto il colore di sfondo pieno. */
.bpc-btn--primary { background-image: var(--bpc-btn-gradient, none); }
.bpc-hero { background-image: var(--bpc-hero-gradient, none); }

/* =============================================================
 * 25. Lightbox (self-hosted, GDPR) — vedi assets/js/lightbox.js
 * ============================================================= */
.bpc-lb {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--bpc-space-md);
	padding: clamp(1rem, 4vw, 3rem);
	background: rgb(var(--bpc-on-surface-rgb) / 0.9);
}
.bpc-lb.is-open { display: flex; animation: bpc-fade 0.2s ease; }
body.bpc-lb-open { overflow: hidden; }
.bpc-lb__fig {
	margin: 0;
	max-width: 92vw;
	max-height: 86vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bpc-space-sm);
}
.bpc-lb__img {
	max-width: 92vw;
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--bpc-radius-md);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	background: var(--bpc-surface-container-lowest);
}
.bpc-lb__cap {
	color: rgb(var(--bpc-on-primary-rgb) / 0.92);
	font-size: var(--bpc-text-label-md);
	text-align: center;
	max-width: 60ch;
}
.bpc-lb__close,
.bpc-lb__nav {
	background: rgb(255 255 255 / 0.12);
	color: #fff;
	border: 1px solid rgb(255 255 255 / 0.3);
	cursor: pointer;
	border-radius: var(--bpc-radius-full);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
	flex: 0 0 auto;
}
.bpc-lb__close:hover,
.bpc-lb__nav:hover { background: rgb(255 255 255 / 0.25); }
.bpc-lb__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 46px;
	height: 46px;
	font-size: 28px;
	line-height: 1;
}
.bpc-lb__nav {
	width: 52px;
	height: 52px;
	font-size: 22px;
}
.bpc-lb__count {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	color: rgb(255 255 255 / 0.85);
	font-family: var(--bpc-font-label);
	font-size: var(--bpc-text-caption);
	letter-spacing: 0.05em;
}
@media (max-width: 640px) {
	.bpc-lb__nav { width: 42px; height: 42px; }
}
/* Cursore "ingrandibile" sui link immagine gestiti dal lightbox */
.bpc-entry a[href$=".jpg"] img,
.bpc-entry a[href$=".jpeg"] img,
.bpc-entry a[href$=".png"] img,
.bpc-entry a[href$=".webp"] img { cursor: zoom-in; }

/* =========================================================
 * Scheda Prodotto / Servizio (single-bpc_prodotto.php)
 * ========================================================= */
.bpc-prod { color: var(--bpc-on-surface, #1a1c1c); }
.bpc-prod-wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* Hero */
.bpc-prod-hero { position: relative; background: var(--bpc-primary, #63001b); color: #fff; padding: 72px 24px; overflow: hidden; }
.bpc-prod-hero--image { background-size: cover; background-position: center; }
.bpc-prod-hero--image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,0,11,.35), rgba(40,0,11,.85)); }
.bpc-prod-hero__inner { position: relative; max-width: 1200px; margin: 0 auto; }
.bpc-prod-hero__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); padding: 6px 12px; border-radius: 6px; margin-bottom: 16px; }
.bpc-prod-hero__title { font-family: var(--bpc-font-headline, inherit); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 0 0 12px; color: #fff; }
.bpc-prod-hero__tagline { font-size: clamp(1.05rem, 2vw, 1.35rem); max-width: 620px; margin: 0 0 28px; opacity: .95; }
.bpc-prod-hero__tagline p { margin: 0; }
.bpc-prod-hero__tagline p + p { margin-top: .5em; }
.bpc-prod-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Pulsanti */
.bpc-prod-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.bpc-prod-btn--primary { background: var(--bpc-primary-container, #8c052b); color: #fff; }
.bpc-prod-btn--primary:hover { background: #fff; color: var(--bpc-primary, #63001b); }
.bpc-prod-btn--ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.bpc-prod-btn--ghost:hover { background: rgba(255,255,255,.22); }
.bpc-prod-btn--onprimary { background: #fff; color: var(--bpc-primary, #63001b); }
.bpc-prod-btn--onprimary:hover { background: var(--bpc-primary-fixed, #ffdadb); }
.bpc-prod-btn--outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.bpc-prod-btn--outline-light:hover { background: rgba(255,255,255,.14); }

/* Breadcrumb */
.bpc-prod-crumbs { background: #fff; border-bottom: 1px solid var(--bpc-outline-variant, #e0bfc0); }
.bpc-prod-crumbs__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 14px; padding-bottom: 14px; font-size: 14px; color: var(--bpc-secondary, #5c5e63); }
.bpc-prod-crumbs a { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.bpc-prod-crumbs a:hover { color: var(--bpc-primary-container, #8c052b); }
.bpc-prod-crumbs .material-symbols-outlined { font-size: 18px; }
.bpc-prod-crumbs__sep { opacity: .4; }
.bpc-prod-crumbs__current { color: var(--bpc-on-surface, #1a1c1c); font-weight: 600; }

/* Sezioni */
.bpc-prod-section { padding: 56px 0; }
.bpc-prod-section--alt { background: var(--bpc-surface-container-low, #f4f3f3); }
.bpc-prod-h2 { font-family: var(--bpc-font-headline, inherit); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 28px; color: var(--bpc-primary, #63001b); }

/* Descrizione + vantaggi */
.bpc-prod-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
.bpc-prod-body { font-size: 1.05rem; line-height: 1.7; color: var(--bpc-on-surface-variant, #584142); }
.bpc-prod-body > :first-child { margin-top: 0; }
.bpc-prod-vantaggi { background: #fff; border: 1px solid var(--bpc-outline-variant, #e0bfc0); border-radius: 16px; padding: 28px; }
.bpc-prod-vantaggi__title { font-size: 1.15rem; margin: 0 0 20px; color: var(--bpc-on-surface, #1a1c1c); }
.bpc-prod-vantaggi__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.bpc-prod-vantaggio { display: flex; gap: 14px; align-items: flex-start; }
.bpc-prod-vantaggio__ico { color: var(--bpc-primary, #63001b); font-size: 26px; flex: none; }
.bpc-prod-vantaggio__txt { display: flex; flex-direction: column; gap: 2px; }
.bpc-prod-vantaggio__t { color: var(--bpc-on-surface, #1a1c1c); }
.bpc-prod-vantaggio__d { color: var(--bpc-on-surface-variant, #584142); font-size: .95rem; line-height: 1.5; }

/* Fogli informativi (allegati PDF) */
.bpc-prod-fogli { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bpc-prod-foglio { margin: 0; }
.bpc-prod-foglio__link { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--bpc-outline-variant, #e0bfc0); border-radius: 12px; padding: 16px 20px; text-decoration: none; color: var(--bpc-on-surface, #1a1c1c); transition: border-color .15s ease, box-shadow .15s ease; }
.bpc-prod-foglio__link:hover { border-color: var(--bpc-primary, #63001b); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.bpc-prod-foglio__ico { color: var(--bpc-primary, #63001b); font-size: 26px; flex: 0 0 auto; }
.bpc-prod-foglio__label { flex: 1 1 auto; font-weight: 600; }
.bpc-prod-foglio__dl { color: var(--bpc-secondary, #5c5e63); font-size: 20px; flex: 0 0 auto; }

/* CTA band */
.bpc-prod-ctaband { background: var(--bpc-primary, #63001b); color: #fff; padding: 48px 0; }
.bpc-prod-ctaband__inner { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.bpc-prod-ctaband__title { font-family: var(--bpc-font-headline, inherit); font-size: 1.6rem; margin: 0 0 6px; color: #fff; }
.bpc-prod-ctaband__sub { margin: 0; opacity: .9; }
.bpc-prod-ctaband__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Correlati */
.bpc-prod-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.bpc-prod-card { background: #fff; border: 1px solid var(--bpc-outline-variant, #e0bfc0); border-radius: 14px; transition: box-shadow .15s, transform .15s, border-color .15s; }
.bpc-prod-card:hover { border-color: var(--bpc-primary, #63001b); box-shadow: 0 10px 30px rgba(99,0,27,.10); transform: translateY(-2px); }
.bpc-prod-card__link { display: block; padding: 24px; text-decoration: none; color: inherit; }
.bpc-prod-card__title { margin: 0 0 8px; color: var(--bpc-on-surface, #1a1c1c); font-size: 1.15rem; }
.bpc-prod-card__tag { margin: 0 0 16px; color: var(--bpc-on-surface-variant, #584142); font-size: .95rem; }
.bpc-prod-card__more { display: inline-flex; align-items: center; gap: 4px; color: var(--bpc-primary-container, #8c052b); font-weight: 600; }
.bpc-prod-card__more .material-symbols-outlined { font-size: 18px; }
.bpc-prod-card__media { display: block; margin: 0 0 14px; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bpc-surface-container-low, #f4f3f3); }
.bpc-prod-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) {
	.bpc-prod-grid { grid-template-columns: 1fr; gap: 32px; }
	.bpc-prod-hero { padding: 56px 20px; }
}

/* Variante template Conti: caratteristiche a griglia */
.bpc-prod-body--wide { max-width: 820px; }
.bpc-prod-conti-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.bpc-prod-conti-feature { background: var(--bpc-surface-container-lowest, #fff); border: 1px solid var(--bpc-outline-variant, #e0bfc0); border-radius: 14px; padding: 24px; }
.bpc-prod-conti-feature__ico { color: var(--bpc-primary, #63001b); font-size: 32px; }
.bpc-prod-conti-feature__t { margin: 12px 0 6px; font-size: 1.1rem; color: var(--bpc-on-surface, #1a1c1c); }
.bpc-prod-conti-feature__d { margin: 0; color: var(--bpc-on-surface-variant, #584142); font-size: .95rem; line-height: 1.55; }

/* Bottone outline (usato nei profili non evidenziati) */
.bpc-prod-btn--outline { background: transparent; color: var(--bpc-primary, #63001b); border: 1px solid var(--bpc-primary, #63001b); }
.bpc-prod-btn--outline:hover { background: var(--bpc-primary, #63001b); color: #fff; }

/* Prodotto ESTERNO (partner/compagnia): layout essenziale, logo piccolo a lato */
.bpc-prodext-crumbs { padding: 24px 0 0; }
.bpc-prodext-crumbs .bpc-tipo-hero__eyebrow { margin-bottom: 0; }
.bpc-prodext-section { padding-top: 32px; }
.bpc-prodext { display: grid; grid-template-columns: 1.7fr 1fr; gap: 48px; align-items: start; }
.bpc-prodext__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bpc-primary-container, #8c052b); margin-bottom: 12px; }
.bpc-prodext__title { font-family: var(--bpc-font-headline, inherit); font-size: clamp(1.9rem, 3.5vw, 2.6rem); line-height: 1.12; margin: 0 0 20px; color: var(--bpc-on-surface, #1a1c1c); }
.bpc-prodext__desc { margin: 0 0 28px; }
.bpc-prodext__desc ul, .bpc-prodext__desc ol { margin: .5rem 0 0; padding-left: 1.3rem; }
.bpc-prodext__desc ul { list-style: disc; }
.bpc-prodext__desc ol { list-style: decimal; }
.bpc-prodext__desc li { margin: .2rem 0; }
.bpc-prodext__actions { margin: 0; }
.bpc-prodext__aside { position: sticky; top: 96px; }
.bpc-prodext__logo { background: #fff; border: 1px solid var(--bpc-outline-variant, #e0bfc0); border-radius: 16px; padding: 28px; display: flex; align-items: center; justify-content: center; }
.bpc-prodext__logo img { max-width: 220px; max-height: 140px; width: auto; height: auto; object-fit: contain; display: block; }
@media (max-width: 860px) {
	.bpc-prodext { grid-template-columns: 1fr; gap: 28px; }
	.bpc-prodext__aside { position: static; }
	.bpc-prodext__logo { padding: 22px; justify-content: flex-start; }
	.bpc-prodext__logo img { max-width: 160px; max-height: 100px; }
}

/* Profili / Piani a confronto (adattivo 1-4) */
.bpc-prod-profili { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; }
.bpc-prod-profili--1 { grid-template-columns: 1fr; max-width: 520px; }
.bpc-prod-profili--2 { grid-template-columns: repeat(2, 1fr); }
.bpc-prod-profili--3 { grid-template-columns: repeat(3, 1fr); }
.bpc-prod-profili--4 { grid-template-columns: repeat(4, 1fr); }
.bpc-prod-profilo { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--bpc-surface-container-lowest, #fff); border: 1px solid var(--bpc-outline-variant, #e0bfc0); border-radius: 16px; padding: 28px 24px; }
.bpc-prod-profilo--top { border-color: var(--bpc-primary, #63001b); border-width: 2px; box-shadow: 0 10px 30px rgba(99,0,27,.10); }
.bpc-prod-profilo__badge { position: absolute; top: -12px; left: 24px; background: var(--bpc-primary, #63001b); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
.bpc-prod-profilo__nome { margin: 6px 0 0; font-size: 1.25rem; color: var(--bpc-on-surface, #1a1c1c); }
.bpc-prod-profilo__prezzo { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.bpc-prod-profilo__canone { font-size: 2rem; font-weight: 800; color: var(--bpc-primary, #63001b); line-height: 1; }
.bpc-prod-profilo__periodo { font-size: .95rem; color: var(--bpc-on-surface-variant, #584142); }
.bpc-prod-profilo__riepilogo { margin: 0; color: var(--bpc-on-surface-variant, #584142); font-size: .95rem; line-height: 1.5; }
.bpc-prod-profilo__lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bpc-prod-profilo__lista li { display: flex; align-items: flex-start; gap: 8px; color: var(--bpc-on-surface, #1a1c1c); font-size: .95rem; line-height: 1.4; }
.bpc-prod-profilo__lista .material-symbols-outlined { font-size: 20px; color: var(--bpc-primary, #63001b); flex: 0 0 auto; }
.bpc-prod-profilo__cta { margin-top: auto; }
/* Voce "non inclusa": grigia e barrata, icona neutra. */
.bpc-prod-profilo__lista li.is-off { color: var(--bpc-on-surface-variant, #8a8a8a); }
.bpc-prod-profilo__lista li.is-off span:not(.material-symbols-outlined) { text-decoration: line-through; }
.bpc-prod-profilo__lista li.is-off .material-symbols-outlined { color: var(--bpc-outline, #8c7072); }
@media (max-width: 860px) {
	.bpc-prod-profili, .bpc-prod-profili--2, .bpc-prod-profili--3, .bpc-prod-profili--4 { grid-template-columns: 1fr; }
}

/* Titolo sezione centrato (tabella confronto). */
.bpc-prod-h2--center { text-align: center; }

/* Servizi inclusi in tutti i profili. */
.bpc-prod-common { background: var(--bpc-surface-container-low, #f4f3f3); border: 1px solid var(--bpc-outline-variant, #e0bfc0); border-radius: 16px; padding: 28px; margin-bottom: 40px; }
.bpc-prod-common__t { margin: 0 0 18px; font-size: 1.25rem; color: var(--bpc-on-surface, #1a1c1c); }
.bpc-prod-common__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.bpc-prod-common__item { display: flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 600; color: var(--bpc-on-surface, #1a1c1c); }
.bpc-prod-common__item .material-symbols-outlined { font-size: 22px; color: var(--bpc-primary, #63001b); flex: 0 0 auto; }

/* Tabella comparativa profili (adattiva, scroll orizzontale su mobile). */
.bpc-prod-compare { overflow-x: auto; border: 1px solid var(--bpc-outline-variant, #e0bfc0); border-radius: 16px; }
.bpc-prod-compare__table { width: 100%; border-collapse: collapse; text-align: left; min-width: 520px; }
.bpc-prod-compare__table th, .bpc-prod-compare__table td { padding: 18px 20px; }
.bpc-prod-compare__table thead th { background: var(--bpc-surface-container-low, #f4f3f3); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bpc-primary, #63001b); border-bottom: 1px solid var(--bpc-outline-variant, #e0bfc0); }
.bpc-prod-compare__table thead th:not(:first-child) { text-align: center; }
.bpc-prod-compare__table tbody tr + tr th, .bpc-prod-compare__table tbody tr + tr td { border-top: 1px solid var(--bpc-surface-container-high, #e8e8e8); }
.bpc-prod-compare__table tbody th { font-weight: 600; color: var(--bpc-on-surface, #1a1c1c); }
.bpc-prod-compare__table tbody td { text-align: center; color: var(--bpc-on-surface-variant, #584142); }
.bpc-prod-compare__table tbody td.is-hl { font-weight: 700; color: #16a34a; }
.bpc-prod-compare__table tbody td.is-bold { font-weight: 700; color: var(--bpc-on-surface, #1a1c1c); }

/* =====================================================================
 * HUB AREA (Privati / Business) - template-hub-area.php
 * ===================================================================== */
.bpc-hub-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* Hero split */
.bpc-hub-hero { background: var(--bpc-surface-container-low, #f4f3f3); overflow: hidden; }
.bpc-hub-hero__inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.bpc-hub-hero__text { width: 100%; padding: 48px 24px; z-index: 1; }
.bpc-hub-hero__media { width: 100%; height: 340px; background-size: cover; background-position: center; }
.bpc-hub-hero__media--empty { background: linear-gradient(135deg, var(--bpc-primary, #63001b), var(--bpc-primary-container, #8c052b)); }
.bpc-hub-hero__title { font-size: clamp(32px, 5vw, 48px); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; color: var(--bpc-primary, #63001b); margin: 0 0 16px; }
.bpc-hub-hero__lead { font-size: 18px; line-height: 1.6; color: var(--bpc-on-surface-variant, #584142); margin: 0 0 24px; max-width: 36rem; }
.bpc-hub-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
@media (min-width: 768px) {
	.bpc-hub-hero__inner { flex-direction: row; }
	.bpc-hub-hero__text { width: 50%; padding: 48px; }
	.bpc-hub-hero__media { width: 50%; height: 500px; }
}

/* Bottoni hub */
.bpc-hub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 32px; border-radius: 8px; font-weight: 600; letter-spacing: .03em; text-decoration: none; transition: opacity .2s, background .2s, color .2s, border-color .2s; }
.bpc-hub-btn--primary { background: var(--bpc-primary, #63001b); color: #fff; }
.bpc-hub-btn--primary:hover { opacity: .9; }
.bpc-hub-btn--outline { background: transparent; color: var(--bpc-primary, #63001b); border: 1px solid var(--bpc-primary, #63001b); }
.bpc-hub-btn--outline:hover { background: rgba(99, 0, 27, .06); }
.bpc-hub-btn--container { background: var(--bpc-primary-container, #8c052b); color: #fff; }
.bpc-hub-btn--container:hover { opacity: .9; }

/* Titolo di sezione hub */
.bpc-hub-h2 { font-size: clamp(26px, 3.5vw, 32px); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--bpc-primary, #63001b); margin: 0 0 12px; }

/* Griglia categorie */
.bpc-hub-cats { padding: 64px 0; }
.bpc-hub-cats__head { text-align: center; margin-bottom: 48px; }
.bpc-hub-rule { display: block; height: 4px; width: 96px; background: var(--bpc-primary, #63001b); margin: 0 auto; }
.bpc-hub-cats__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .bpc-hub-cats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bpc-hub-cats__grid { grid-template-columns: repeat(3, 1fr); } }
.bpc-hub-cat { display: flex; flex-direction: column; background: var(--bpc-surface-container-lowest, #fff); border: 1px solid var(--bpc-outline-variant, #e0bfc0); border-top: 4px solid var(--bpc-outline-variant, #e0bfc0); padding: 24px; text-decoration: none; color: inherit; transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s, border-top-color .3s; }
.bpc-hub-cat:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(99, 0, 27, .15); border-top-color: var(--bpc-primary-container, #8c052b); }
.bpc-hub-cat__ico { font-size: 40px; color: var(--bpc-primary, #63001b); margin-bottom: 16px; transition: transform .3s; }
.bpc-hub-cat:hover .bpc-hub-cat__ico { transform: scale(1.1); }
.bpc-hub-cat__title { font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--bpc-primary, #63001b); margin: 0 0 8px; }
.bpc-hub-cat__desc { font-size: 16px; line-height: 1.6; color: var(--bpc-secondary, #5c5e63); margin: 0 0 24px; flex-grow: 1; }
.bpc-hub-cat__more { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; letter-spacing: .03em; color: var(--bpc-primary, #63001b); }
.bpc-hub-cat__more .material-symbols-outlined { font-size: 18px; transition: transform .2s; }
.bpc-hub-cat:hover .bpc-hub-cat__more .material-symbols-outlined { transform: translateX(4px); }
/* Card senza destinazione: non interattiva (nessun link segnaposto). */
.bpc-hub-cat--disabled { cursor: default; }
.bpc-hub-cat--disabled:hover { transform: none; box-shadow: none; border-top-color: var(--bpc-outline-variant, #e0bfc0); }
.bpc-hub-cat--disabled:hover .bpc-hub-cat__ico { transform: none; }

/* Servizi digitali (fondo scuro) */
.bpc-hub-digital { background: var(--bpc-tertiary-container, #3a3a3a); padding: 64px 0; }
.bpc-hub-digital__inner { display: flex; flex-direction: column; gap: 40px; }
.bpc-hub-digital__title { font-size: clamp(26px, 3.5vw, 32px); font-weight: 700; color: #fff; margin: 0 0 16px; }
.bpc-hub-digital__text { color: rgba(255, 255, 255, .78); margin: 0 0 24px; line-height: 1.6; }
.bpc-hub-digital__grid { display: grid; grid-template-columns: 1fr; gap: 16px; flex: 1; }
.bpc-hub-digital__card { display: flex; align-items: flex-start; gap: 16px; background: var(--bpc-surface-container-lowest, #fff); padding: 24px; border-radius: 12px; }
.bpc-hub-digital__ico { font-size: 30px; color: var(--bpc-primary, #63001b); flex: 0 0 auto; }
.bpc-hub-digital__ct { font-size: 20px; font-weight: 600; color: var(--bpc-primary, #63001b); margin: 0 0 4px; }
.bpc-hub-digital__cd { font-size: 13px; color: var(--bpc-secondary, #5c5e63); margin: 0; line-height: 1.5; }
@media (min-width: 640px) {
	.bpc-hub-digital__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.bpc-hub-digital__inner { flex-direction: row; align-items: flex-start; }
	.bpc-hub-digital__intro { width: 33.333%; flex: 0 0 33.333%; }
}

/* Omnicanalita */
.bpc-hub-omni { padding: 64px 0; background: var(--bpc-surface-container-low, #f4f3f3); border-top: 1px solid var(--bpc-outline-variant, #e0bfc0); border-bottom: 1px solid var(--bpc-outline-variant, #e0bfc0); }
.bpc-hub-omni__inner { text-align: center; }
.bpc-hub-omni__text { font-size: 18px; color: var(--bpc-secondary, #5c5e63); max-width: 42rem; margin: 0 auto 48px; line-height: 1.6; }
.bpc-hub-omni__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
.bpc-hub-omni__item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.bpc-hub-omni__circle { width: 64px; height: 64px; border-radius: 9999px; background: var(--bpc-surface-container-lowest, #fff); display: flex; align-items: center; justify-content: center; border: 1px solid var(--bpc-outline-variant, #e0bfc0); transition: background .3s, border-color .3s; }
.bpc-hub-omni__circle .material-symbols-outlined { font-size: 30px; color: var(--bpc-on-surface, #1a1c1c); transition: color .3s; }
.bpc-hub-omni__item:hover .bpc-hub-omni__circle { background: var(--bpc-primary, #63001b); border-color: var(--bpc-primary, #63001b); }
.bpc-hub-omni__item:hover .bpc-hub-omni__circle .material-symbols-outlined { color: #fff; }
.bpc-hub-omni__label { font-weight: 600; letter-spacing: .03em; color: var(--bpc-on-surface, #1a1c1c); }

/* --------------------------------------------------------------------------
 * Zona blocchi (page.php / hub): ospita sezioni istituzionali full-width con
 * wrap interno (servizi digitali, omnicanalita', ...). I container/colonne del
 * builder aggiungerebbero boxing + gutter laterale, lasciando spazi bianchi ai
 * lati: qui li azzeriamo cosi' le sezioni arrivano ai bordi come da design.
 *
 * NB: il reset vale SOLO per i container a piena larghezza (--full). I container
 * "boxed" (es. il Messaggio pubblicitario) devono invece restare confinati alla
 * larghezza-sito con il padding laterale del tema, quindi NON vengono azzerati.
 * -------------------------------------------------------------------------- */
.bpc-page-blocks,
.bpc-page-blocks .bpc-builder-content,
.bpc-page-blocks .bpc-builder-container--full { max-width: none; margin-left: 0; margin-right: 0; }
.bpc-page-blocks .bpc-builder-container--full .bpc-container { max-width: none; padding-left: 0; padding-right: 0; }
.bpc-page-blocks .bpc-builder-container--full .bpc-builder-cols { margin-left: 0; margin-right: 0; }
.bpc-page-blocks .bpc-builder-container--full .bpc-builder-col { padding-left: 0; padding-right: 0; }

/* --------------------------------------------------------------------------
 * Archivio TIPOLOGIA (/{area}/{tipologia}/): hero (eyebrow + titolo + immagine
 * in evidenza) + elenco prodotti (griglia card o righe alternate dal builder).
 * Layout fedele ai mockup "bpc_area_privati_*".
 * -------------------------------------------------------------------------- */
.bpc-tipo-hero { background: var(--bpc-surface-container-lowest, #fff); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.bpc-tipo-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.bpc-tipo-hero__grid--single { grid-template-columns: 1fr; max-width: 44rem; }
.bpc-tipo-hero__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--bpc-on-surface-variant, #584142); }
.bpc-tipo-hero__eyebrow a { color: inherit; text-decoration: none; }
.bpc-tipo-hero__eyebrow a:hover { color: var(--bpc-primary, #63001b); }
.bpc-tipo-hero__eyebrow .material-symbols-outlined { font-size: 16px; color: var(--bpc-on-surface-variant, #584142); opacity: 1; }
.bpc-tipo-hero__current { color: var(--bpc-primary-container, #8c052b); font-weight: 700; }
.bpc-tipo-hero__title { margin: 0 0 1.1rem; font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.1; letter-spacing: -.01em; color: var(--bpc-on-surface, #1a1c1c); }
.bpc-tipo-hero__lead { margin: 0; max-width: 34rem; font-size: 1.1rem; line-height: 1.6; color: var(--bpc-on-surface-variant, #584142); }
.bpc-tipo-hero__media { border-radius: var(--bpc-radius-lg, 16px); overflow: hidden; aspect-ratio: 1 / 1; max-height: 500px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); }
.bpc-tipo-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 800px) {
	.bpc-tipo-hero__grid { grid-template-columns: 1fr; }
	.bpc-tipo-hero__media { aspect-ratio: 16 / 10; max-height: 320px; }
}
.bpc-tipo-list { padding: clamp(3rem, 7vw, 6rem) 0; background: var(--bpc-surface-container-low, #f4f3f3); }
.bpc-tipo-empty { text-align: center; color: var(--bpc-on-surface-variant, #584142); padding: 2rem 0; }
.bpc-tipo-list__head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.bpc-tipo-list__title { margin: 0 0 1rem; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.15; letter-spacing: -.01em; color: var(--bpc-on-surface, #1a1c1c); }
.bpc-tipo-list__rule { display: inline-block; width: 5rem; height: 4px; border-radius: 999px; background: var(--bpc-primary-container, #8c052b); }

/* Archivio tipologia generico: gruppi per area (Privati, Business, ...). */
.bpc-tipo-areagroup { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.bpc-tipo-areagroup:last-child { margin-bottom: 0; }
.bpc-tipo-areagroup__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; padding-bottom: .7rem; border-bottom: 2px solid var(--bpc-outline-variant, #e7dcdc); }
.bpc-tipo-areagroup__title { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.15; color: var(--bpc-primary-container, #8c052b); }
.bpc-tipo-areagroup__link { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--bpc-primary, #63001b); white-space: nowrap; }
.bpc-tipo-areagroup__link:hover { text-decoration: underline; }
.bpc-tipo-areagroup__link .material-symbols-outlined { font-size: 18px; }

/* =============================================================
 * Riduzione movimento — azzera gli spostamenti/zoom DECORATIVI al hover/focus
 * (card, prodotti, hub, icone e frecce). Si attiva sia con la preferenza di
 * sistema "riduci movimento", sia con il widget di accessibilità
 * ("Ferma animazioni" / profilo Epilessia → classe html.yicacc-stopmotion).
 * NON tocca i transform di posizionamento (tooltip, centrature, chevron
 * accordion, animazioni di reveal): quelli restano invariati.
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
	.bpc-btn--link:hover .bpc-btn__arrow,
	.bpc-btn--link:focus-visible .bpc-btn__arrow,
	.bpc-card--hover:hover,
	.bpc-card--hover:hover .bpc-card__media img,
	.bpc-timeline__card:hover,
	.bpc-prod-card:hover,
	.bpc-hub-cat:hover,
	.bpc-hub-cat:hover .bpc-hub-cat__ico,
	.bpc-hub-cat:hover .bpc-hub-cat__more .material-symbols-outlined {
		transform: none !important;
	}
}
html.yicacc-stopmotion .bpc-btn--link:hover .bpc-btn__arrow,
html.yicacc-stopmotion .bpc-btn--link:focus-visible .bpc-btn__arrow,
html.yicacc-stopmotion .bpc-card--hover:hover,
html.yicacc-stopmotion .bpc-card--hover:hover .bpc-card__media img,
html.yicacc-stopmotion .bpc-timeline__card:hover,
html.yicacc-stopmotion .bpc-prod-card:hover,
html.yicacc-stopmotion .bpc-hub-cat:hover,
html.yicacc-stopmotion .bpc-hub-cat:hover .bpc-hub-cat__ico,
html.yicacc-stopmotion .bpc-hub-cat:hover .bpc-hub-cat__more .material-symbols-outlined {
	transform: none !important;
}