/* =====================================================================
CURABOOTS — Design System / Theme layer (Fase 3)
Sovrascrive Bootstrap + style.css. Stile: premium medico-sportivo.
Palette: navy fiducia + oro premium. Font: Lora (titoli) / Poppins (testo).
Caricato DOPO style.css in header.php per avere la precedenza.
===================================================================== */
/* ---------- Design tokens ---------- */
:root {
/* ===================================================================
3 COLORI UFFICIALI DEL SITO
1) BLU AZZURRO --cb-primary (brand: nav, footer, box, bottoni)
2) GRIGIO SCURO --cb-ink (testi del sito, hover link)
3) BIANCO #fff (testi sul blu)
=================================================================== */
--cb-primary: #2563EB; /* 1. BLU AZZURRO */
--cb-primary-700: #1D4ED8; /* blu scuro (hover) */
--cb-ink: #333A45; /* 2. GRIGIO SCURO (testi/hover) */
/* Neutri di servizio derivati dai 3 ufficiali (non nuovi colori "brand") */
--cb-secondary: #3B82F6; /* blu chiaro per il gradiente dell'hero */
--cb-surface: #FFFFFF; /* superfici/card */
--cb-bg: #F5F7FA; /* sfondo pagina (grigio chiarissimo) */
--cb-muted: #EEF1F5; /* superfici tenui */
--cb-border: #E4E8EE; /* bordi */
--cb-fg: var(--cb-ink); /* testo principale = grigio scuro */
--cb-fg-muted: #6B7280; /* testo secondario = grigio medio */
/* "accent" ricondotto al blu: NIENTE oro/rosa nel sito */
--cb-accent: var(--cb-primary);
--cb-accent-600: var(--cb-primary-700);
/* Tipografia (moderna, sans-serif) */
--cb-font-head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--cb-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Raggi */
--cb-radius-sm: 10px;
--cb-radius: 16px;
--cb-radius-lg: 24px;
--cb-radius-pill: 999px;
/* Spaziatura (scala 8px) */
--cb-space-1: .5rem;
--cb-space-2: 1rem;
--cb-space-3: 1.5rem;
--cb-space-4: 2rem;
--cb-space-6: 3rem;
/* Ombre */
--cb-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
--cb-shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.06);
--cb-shadow-lg: 0 18px 40px rgba(15,23,42,.14);
/* Transizioni */
--cb-transition: 220ms cubic-bezier(.2,.7,.2,1);
}
/* ---------- Base ---------- */
body {
font-family: var(--cb-font-body);
color: var(--cb-fg);
background-color: var(--cb-bg);
font-size: 1rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.content-title {
font-family: var(--cb-font-head);
color: var(--cb-ink);
font-weight: 700;
line-height: 1.15;
letter-spacing: -.02em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
p { color: var(--cb-fg); }
.lead { font-weight: 400; }
small { color: var(--cb-fg-muted); }
a { color: var(--cb-primary); transition: color var(--cb-transition); }
a:hover { color: var(--cb-ink); } /* mouse over dei link -> grigio scuro */
/* Larghezza contenuto coerente su desktop */
@media (min-width: 1400px) {
.container { max-width: 1240px; }
}
/* ---------- Immagini: border-radius + ombra (requisito) ---------- */
article img,
.entry-content img,
.footer-widget img,
.property-item img,
.value-section img,
img.img-fluid,
.seventy-five-percent-bg img {
border-radius: var(--cb-radius);
max-width: 100%;
height: auto;
box-shadow: 0 14px 32px rgba(51, 58, 69, .28);
}
/* Icone/swatch inline (dentro i paragrafi) e immagini decorative: niente ombra/raggio */
article p img,
.navbar img,
.site-footer .footer-nav img,
img.no-shadow { box-shadow: none; }
.navbar img, .site-footer .footer-nav img, img.no-radius { border-radius: 0; }
/* ---------- Bottoni ---------- */
.btn {
font-family: var(--cb-font-body);
font-weight: 600;
letter-spacing: .01em;
border-radius: var(--cb-radius-pill) !important;
padding: .7rem 1.6rem;
transition: transform var(--cb-transition), box-shadow var(--cb-transition),
background-color var(--cb-transition), border-color var(--cb-transition);
will-change: transform;
/* TUTTI i pulsanti a piena larghezza del contenitore, testo centrato */
display: block;
width: 100%;
text-align: center;
}
/* L'anchor che avvolge un qualsiasi bottone diventa block */
a:has(> .btn) { display: block; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* CTA primaria (classe usata in tutto il sito per "Acquista") -> azzurro/blu,
a piena larghezza del contenitore */
.btn-cornflower-blue {
background-color: var(--cb-primary);
border-color: var(--cb-primary);
color: #fff;
box-shadow: var(--cb-shadow-sm);
}
.btn-cornflower-blue:hover,
.btn-cornflower-blue:focus {
background-color: var(--cb-primary-700);
border-color: var(--cb-primary-700);
color: #fff;
box-shadow: var(--cb-shadow-md);
}
/* CTA su fondo blu (sezione cta.php): bottone bianco con testo blu */
.btn-white { background-color: #fff; border-color: #fff; }
.btn-white:hover, .btn-white:focus { background-color: var(--cb-muted); }
.text-cornflower-blue { color: var(--cb-primary) !important; }
/* Rimappa le vecchie classi colore Bootstrap ai 3 colori ufficiali
(eliminano i grigi/rosa fuori palette che comparivano qua e là) */
.text-ebony-clay, .text-abbey { color: var(--cb-ink) !important; }
.text-silver-chalice { color: var(--cb-fg-muted) !important; }
.text-black { color: var(--cb-ink) !important; }
/* CTA secondaria -> outline navy su fondo chiaro */
.btn-athens-gray {
background-color: transparent;
border: 2px solid var(--cb-primary);
color: var(--cb-primary) !important;
}
.btn-athens-gray:hover,
.btn-athens-gray:focus {
background-color: var(--cb-primary);
color: #fff !important;
}
/* ---------- Box blu condiviso (nav + footer) ---------- */
.bg-cornflower-blue {
background: linear-gradient(135deg, var(--cb-primary-700) 0%, var(--cb-primary) 100%) !important;
border-radius: var(--cb-radius-lg);
box-shadow: var(--cb-shadow-md);
}
/* ---------- Navbar (boxed, navbar-dark, FIXED in scroll) ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 1030;
background: var(--cb-bg);
padding-bottom: .5rem;
}
.site-header .navbar { padding-top: 1.15rem; padding-bottom: 1.15rem; }
.navbar-dark .nav-link,
.navbar .nav-link.text-white {
font-weight: 500;
color: #fff !important;
padding: .7rem .95rem !important;
border-radius: var(--cb-radius-sm);
position: relative;
transition: color var(--cb-transition), background var(--cb-transition);
}
.navbar-dark .nav-link:hover,
.navbar .nav-link.text-white:hover { color: #fff !important; background: var(--cb-ink); }
/* Sottolineatura animata bianca */
.navbar-dark .nav-item > .nav-link::after {
content: "";
position: absolute;
left: .95rem; right: .95rem; bottom: .28rem;
height: 2px;
background: #fff;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--cb-transition);
}
.navbar-dark .nav-item > .nav-link:hover::after { transform: scaleX(1); }
.navbar-dark .navbar-toggler { border-color: rgba(255,255,255,.4); }
/* Dropdown su fondo bianco */
.dropdown-menu {
border: 1px solid var(--cb-border);
border-radius: var(--cb-radius-sm);
box-shadow: var(--cb-shadow-md);
padding: .4rem;
}
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; font-weight: 500; color: var(--cb-fg); }
.dropdown-item:hover { background: var(--cb-muted); color: var(--cb-primary-700); }
/* ---------- Card "punti di forza": azzurre con testo bianco ---------- */
.bg-athens-gray {
background-color: var(--cb-primary) !important;
border: none;
border-radius: var(--cb-radius);
box-shadow: var(--cb-shadow-md);
transition: transform var(--cb-transition), box-shadow var(--cb-transition);
height: 100%;
}
.bg-athens-gray,
.bg-athens-gray h1, .bg-athens-gray h2, .bg-athens-gray h3,
.bg-athens-gray h4, .bg-athens-gray h5, .bg-athens-gray h6,
.bg-athens-gray p, .bg-athens-gray li, .bg-athens-gray b { color: #fff !important; }
.bg-athens-gray a { color: #fff; text-decoration: underline; }
.bg-athens-gray:hover {
transform: translateY(-4px);
box-shadow: var(--cb-shadow-lg);
}
/* ---------- Hero ---------- */
.seventy-five-percent-bg {
background: linear-gradient(135deg, var(--cb-primary-700) 0%, var(--cb-secondary) 100%);
color: #fff;
border-radius: 0 0 var(--cb-radius-lg) var(--cb-radius-lg);
}
.seventy-five-percent-bg h1,
.seventy-five-percent-bg h2 { color: #fff; }
.seventy-five-percent-bg .lead,
.seventy-five-percent-bg p { color: rgba(255,255,255,.9); }
/* ---------- Footer: value bianca full-width + box blu con i link ---------- */
.site-footer { background: #fff; padding-bottom: 2rem; }
/* La sezione valori inglobata: bianca, full-width, testo scuro (diversa dal resto) */
.value-section { background: #fff; width: 100%; }
.value-section h2, .value-section h4, .value-section p { color: var(--cb-ink); }
/* Box blu del footer: testo bianco */
.site-footer .footer-widgets { padding-top: 2.5rem; padding-bottom: 1rem; }
.site-footer .bg-cornflower-blue h2,
.site-footer .bg-cornflower-blue p,
.site-footer .bg-cornflower-blue li,
.site-footer .bg-cornflower-blue small { color: #fff !important; }
.site-footer .footer-widget ul { list-style: none; padding-left: 0; margin: 0; }
.site-footer .footer-widget li { margin-bottom: .5rem; }
/* Link footer bianchi: batte le regole di style.css (grigio #555C62 e hover rosa #F06399) */
.site-footer .bg-cornflower-blue a,
.site-footer .footer-widgets .footer-widget a,
.site-footer .footer-bottom-area a { color: #fff !important; text-decoration: none; transition: opacity var(--cb-transition); }
.site-footer .bg-cornflower-blue a:hover,
.site-footer .footer-widgets .footer-widget a:hover,
.site-footer .footer-bottom-area a:hover { color: #fff !important; opacity: .8; text-decoration: underline; }
.footer-bottom-area {
border-top: 1px solid rgba(255,255,255,.2);
padding-top: 1.25rem;
padding-bottom: 1.25rem;
margin-top: .5rem;
}
/* ---------- Accessibilità: focus visibile ---------- */
a:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
outline: 3px solid var(--cb-accent);
outline-offset: 2px;
border-radius: var(--cb-radius-sm);
}
/* ---------- Cursor pointer sugli elementi interattivi ---------- */
.btn, .nav-link, .dropdown-toggle, a[role="button"] { cursor: pointer; }
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.btn:hover, .bg-athens-gray:hover { transform: none; }
}
/* =====================================================================
RESPONSIVE & ACCESSIBILITÀ (Fase 4)
===================================================================== */
/* Nessuno scroll orizzontale (clip non rompe la navbar sticky) */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
/* Media sempre entro il contenitore */
img, svg, video, iframe, table { max-width: 100%; }
img { height: auto; }
/* Contrasto testo secondario coerente (AA) */
.text-abbey, .lead small, p small { color: var(--cb-fg-muted); }
/* Touch target minimi (>=44px) su elementi interattivi */
.btn, .nav-link, .dropdown-item, .footer-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.dropdown-item, .footer-widget a { min-height: 40px; }
/* Navbar toggler visibile e ben stilizzato */
.navbar-toggler { border: 1px solid var(--cb-border); border-radius: var(--cb-radius-sm); padding: .4rem .6rem; }
.navbar-toggler:focus-visible { outline: 3px solid var(--cb-accent); }
/* Mobile: riduce padding custom eccessivi e stacka le liste "inline" */
@media (max-width: 767.98px) {
[class*="pr-"] { padding-right: 1rem !important; }
[class*="pl-"] { padding-left: 1rem !important; }
.list-inlinetrue .list-inline-item,
ul.list-unstyled .list-inline-item { display: block; margin-right: 0; }
h1 { font-size: 1.9rem; }
.seventy-five-percent-bg { border-radius: 0 0 var(--cb-radius) var(--cb-radius); }
/* Il gutter lg non deve creare margini negativi non compensati su mobile */
.row.gx-lg-5 { --bs-gutter-x: 1.5rem; }
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1023.98px) {
[class*="pr-lg-"] { padding-right: 2rem !important; }
}
/* Immagini "grandi" di contenuto a piena larghezza colonna (icone/swatch esclusi).
Le swatch colori stanno in assets/images/icons/ come piccoli ![]()
inline. */
.entry-content .row > [class*="col-"] > img:only-child { width: 100%; }
@media (max-width: 991.98px) {
.entry-content .row > [class*="col-"] { margin-bottom: 1rem; }
}
/* =====================================================================
SHOP — percorso d'acquisto (panoramica, categorie, schede) 09/10/2026
===================================================================== */
.cb-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--cb-space-3);
}
@media (min-width: 768px) { .cb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .cb-grid { grid-template-columns: repeat(3, 1fr); } }
.cb-card {
display: flex;
flex-direction: column;
height: 100%;
background: var(--cb-surface);
border: 1px solid var(--cb-border);
border-radius: var(--cb-radius);
box-shadow: var(--cb-shadow-sm);
overflow: hidden;
transition: box-shadow var(--cb-transition), transform var(--cb-transition);
}
.cb-card:hover { box-shadow: var(--cb-shadow-md); transform: translateY(-2px); }
.cb-card__media { display: block; background: #fff; padding: var(--cb-space-2); }
.cb-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.cb-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--cb-space-3);
border-top: 1px solid var(--cb-border);
}
.cb-card__title { font-size: 1.15rem; margin-bottom: var(--cb-space-1); }
.cb-card__title a { color: var(--cb-ink); text-decoration: none; }
.cb-card__title a:hover { color: var(--cb-primary); }
.cb-card__text { color: var(--cb-fg-muted); margin-bottom: var(--cb-space-2); }
.cb-card__price { font-weight: 600; color: var(--cb-ink); margin-top: auto; margin-bottom: var(--cb-space-2); }
.cb-badge {
display: inline-block;
align-self: flex-start;
padding: .2rem .7rem;
margin: 0 .4rem var(--cb-space-1) 0;
border-radius: var(--cb-radius-pill);
background: var(--cb-primary);
color: #fff;
font-size: .75rem;
font-weight: 600;
}
.cb-badge--muted { background: var(--cb-muted); color: var(--cb-ink); }
.cb-swatches { display: flex; gap: .35rem; margin-bottom: var(--cb-space-2); }
img.cb-swatch, .cb-swatches img {
width: 20px; height: 20px;
border-radius: 50%;
box-shadow: none;
border: 1px solid var(--cb-border);
}
.cb-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.cb-breadcrumb li + li::before { content: "›"; margin-right: .4rem; color: var(--cb-fg-muted); }
.cb-breadcrumb a { color: var(--cb-primary); }
.cb-breadcrumb [aria-current] { color: var(--cb-fg-muted); }
.cb-price { font-size: 1.6rem; font-weight: 700; color: var(--cb-ink); }
.cb-colors { border: 0; padding: 0; margin: 0; }
.cb-colors legend { font-size: 1rem; margin-bottom: var(--cb-space-1); }
.cb-color { position: relative; display: inline-block; margin: 0 .5rem .5rem 0; cursor: pointer; }
.cb-color input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cb-color img.cb-swatch { width: 40px; height: 40px; border: 2px solid var(--cb-border); }
.cb-color input:checked + img.cb-swatch { border-color: var(--cb-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
.cb-color input:focus-visible + img.cb-swatch { outline: 3px solid var(--cb-primary); outline-offset: 2px; }
.cb-sr {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.cb-features li { margin-bottom: .6rem; }
.cb-cta .btn { margin-bottom: .5rem; }
.cb-note { font-size: .85rem; color: var(--cb-fg-muted); margin-bottom: var(--cb-space-3); }
.cb-guide__item {
background: var(--cb-muted);
border-radius: var(--cb-radius);
padding: var(--cb-space-3);
}
.cb-guide__item p { margin: 0; color: var(--cb-fg); }
@media (prefers-reduced-motion: reduce) {
.cb-card, .cb-card:hover { transition: none; transform: none; }
}
/* L'ancora "Completa il tuo kit" (menu e footer) non deve finire sotto la navbar sticky */
#completa { scroll-margin-top: 140px; }
/* ---------- Scheda prodotto: galleria quadrata + popup (09/10/2026) ---------- */
.cb-gallery img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
background: #fff;
}
.cb-gallery__main { display: block; cursor: zoom-in; }
.cb-gallery__thumbs {
list-style: none;
padding: 0;
margin: var(--cb-space-2) 0 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: .5rem;
}
.cb-gallery__thumbs button {
display: block;
width: 100%;
padding: 0;
background: #fff;
border: 2px solid var(--cb-border);
border-radius: var(--cb-radius-sm);
overflow: hidden;
cursor: pointer;
}
.cb-gallery__thumbs button.is-active { border-color: var(--cb-primary); }
.cb-gallery__thumbs button:focus-visible { outline: 3px solid var(--cb-primary); outline-offset: 2px; }
.cb-gallery__thumbs img { border-radius: 0; box-shadow: none; }
.cb-subtitle { font-size: 1rem; margin-bottom: var(--cb-space-2); }
.cb-excluded { color: var(--cb-fg-muted); }
.cb-card .cb-badges { margin-bottom: 0; }
/* ---------- CTA unica: box blu, testi bianchi, respiro sotto (09/10/2026) ---------- */
.cb-cta-box {
padding: var(--cb-space-6) var(--cb-space-3);
}
@media (min-width: 992px) {
.cb-cta-box { padding: 4.5rem var(--cb-space-6); }
}
.cb-cta-box .btn { display: inline-block; width: auto; }
/* ---------- Ordine con bonifico (09/10/2026) ---------- */
.cb-steps__list { counter-reset: passo; list-style: none; padding: 0; display: grid; gap: var(--cb-space-2); }
@media (min-width: 992px) { .cb-steps__list { grid-template-columns: repeat(4, 1fr); } }
.cb-steps__list li { counter-increment: passo; background: var(--cb-surface); border: 1px solid var(--cb-border); border-radius: var(--cb-radius); padding: var(--cb-space-3); }
.cb-steps__list li::before { content: counter(passo); display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-bottom: var(--cb-space-1); border-radius: 50%; background: var(--cb-primary); color: #fff; font-weight: 700; }
.cb-order { margin-top: var(--cb-space-6); background: var(--cb-surface); border: 1px solid var(--cb-border); border-radius: var(--cb-radius); padding: var(--cb-space-4) var(--cb-space-3); }
@media (min-width: 992px) { .cb-order { padding: var(--cb-space-6); } }
.cb-fieldset { border: 0; padding: 0; margin: 0 0 var(--cb-space-4); }
.cb-fieldset legend { font-size: 1.1rem; font-weight: 600; margin-bottom: var(--cb-space-2); float: none; }
.cb-grid-form { display: grid; grid-template-columns: 1fr; gap: 0 var(--cb-space-3); }
@media (min-width: 768px) { .cb-grid-form { grid-template-columns: 1fr 1fr; } }
.cb-field { margin-bottom: var(--cb-space-2); }
.cb-field label { display: block; font-weight: 500; margin-bottom: .3rem; }
.cb-field .form-control { width: 100%; min-height: 44px; border: 1px solid var(--cb-border); border-radius: var(--cb-radius-sm); padding: .5rem .75rem; }
.cb-field .form-control:focus { outline: 3px solid rgba(37, 99, 235, .35); border-color: var(--cb-primary); }
.cb-field--short { max-width: 10rem; }
.cb-field-error { color: #B91C1C; font-size: .9rem; margin: .3rem 0 0; }
.cb-field [aria-invalid="true"] { border-color: #B91C1C; }
.cb-check { display: flex; gap: .6rem; align-items: flex-start; flex-wrap: wrap; }
.cb-check input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; }
.cb-check label { flex: 1; font-weight: 400; }
.cb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cb-alert { background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: var(--cb-radius-sm); padding: var(--cb-space-2) var(--cb-space-3); margin-bottom: var(--cb-space-3); }
.cb-alert p { margin: 0; }
.cb-order-number { font-size: 1.4rem; }
.cb-paybox { background: linear-gradient(135deg, var(--cb-primary), var(--cb-secondary)); border-radius: var(--cb-radius); padding: var(--cb-space-4); }
.cb-copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 0; border-top: 1px solid rgba(255, 255, 255, .25); color: #fff; }
.cb-copy-label { width: 100%; font-size: .85rem; opacity: .85; }
.cb-copy-value { flex: 1; font-weight: 600; word-break: break-word; }
.cb-copy-btn { border: 1px solid #fff; background: transparent; color: #fff; border-radius: var(--cb-radius-pill); padding: .3rem .9rem; cursor: pointer; }
.cb-copy-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Modulo su telefono: più spazio utile per i campi e per il widget Turnstile */
@media (max-width: 575.98px) { .cb-order { padding: var(--cb-space-3) var(--cb-space-2); } }
.cb-alert ul { margin: .5rem 0 0; padding-left: 1.2rem; }
/* ---------- Banner cookie (include/cookie-banner.php, 09/10/2026) ----------
Piccolo, in basso a sinistra, sopra al contenuto. I tre bottoni hanno lo
stesso stile: rifiutare deve essere facile quanto accettare (Garante 2021). */
.cb-consent {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 1050;
max-width: 420px;
padding: var(--cb-space-3);
background: var(--cb-surface);
color: var(--cb-fg);
border: 1px solid var(--cb-border);
border-radius: var(--cb-radius);
box-shadow: var(--cb-shadow-lg);
font-size: .875rem;
line-height: 1.5;
}
.cb-consent[hidden] { display: none; }
.cb-consent__title { font-weight: 600; font-size: 1rem; margin: 0 0 .25rem; color: var(--cb-ink); }
.cb-consent__text { margin: 0 0 var(--cb-space-2); }
.cb-consent__text a { color: var(--cb-primary); text-decoration: underline; }
.cb-consent__details { margin: 0 0 var(--cb-space-2); }
.cb-consent__details[hidden] { display: none; }
.cb-consent__opt { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 .6rem; cursor: pointer; }
.cb-consent__opt input { margin-top: .3rem; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; accent-color: var(--cb-primary); }
.cb-consent__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.cb-consent__btn {
flex: 1 1 0;
min-width: 6.5rem;
padding: .55rem .9rem;
font: inherit;
font-weight: 600;
color: #fff;
background: var(--cb-primary);
border: 0;
border-radius: var(--cb-radius-pill);
cursor: pointer;
transition: background var(--cb-transition);
}
.cb-consent__btn[hidden] { display: none; }
.cb-consent__btn:hover,
.cb-consent__btn:focus { background: var(--cb-primary-700); }
.cb-consent__btn:focus-visible,
.cb-consent__opt input:focus-visible { outline: 3px solid var(--cb-ink); outline-offset: 2px; }
@media (min-width: 576px) {
.cb-consent { left: 24px; right: auto; bottom: 24px; }
}
/* ---------- Popup Fieracavalli 2026 (include/fiera-popup.php) ---------- */
.cb-fiera {
width: min(560px, calc(100% - 32px));
max-height: calc(100% - 32px);
padding: 0;
border: 0;
border-radius: var(--cb-radius);
background: var(--cb-surface);
color: var(--cb-fg);
box-shadow: var(--cb-shadow-lg);
overflow: auto;
}
.cb-fiera:not([open]) { display: none; } /* browser senza