/* =============================================================
   European BUDS Market — foglio di stile
   ============================================================= */

/* ---------- token ---------- */
:root {
  --ink:        #10161a;
  --ink-soft:   #46545c;
  --ink-faint:  #7d8b93;
  --paper:      #f6f4ef;
  --paper-2:    #fffefb;
  --line:       #e2ded4;
  --line-2:     #cdc7b8;

  --forest:     #123b2e;
  --forest-2:   #1b5442;
  --forest-ink: #0b241c;
  --gold:       #b98f2c;
  --gold-soft:  #e8c86a;
  --wa:         #25d366;
  --wa-dark:    #128c4a;

  --ok:         #1b7a4b;
  --wait:       #9a6b12;
  --ask:        #4a5b8a;

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;

  --shadow:    0 1px 2px rgba(16,22,26,.05), 0 8px 24px -12px rgba(16,22,26,.18);
  --shadow-lg: 0 24px 70px -24px rgba(16,22,26,.42);

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1260px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.02em; font-weight: 650; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--forest); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head__in {
  display: flex; align-items: center; gap: 24px;
  min-height: 68px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
/* Il logo è un tondo che contiene già il nome scritto, ma a 38px è
   illeggibile: accanto resta il nome in caratteri. */
.brand__mark { height: 38px; width: 38px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-size: 15px; letter-spacing: -.01em; }
.brand__text em {
  font-style: normal; font-size: 11px; color: var(--ink-faint);
  letter-spacing: .04em; text-transform: uppercase;
}
.site-nav { display: flex; gap: 22px; margin-left: auto; font-size: 14.5px; }
.site-nav a { text-decoration: none; color: var(--ink-soft); padding: 6px 0; border-bottom: 1.5px solid transparent; }
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.site-head__tools { display: flex; align-items: center; gap: 12px; }

.langs { display: flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.lang-btn {
  background: none; border: 0; cursor: pointer;
  padding: 5px 11px; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: var(--ink-faint);
}
.lang-btn.is-active { background: var(--forest); color: #fff; }

/* ---------- bottoni ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: none; }
.btn--sm { padding: 8px 14px; font-size: 13px; }
.btn--lg { padding: 15px 30px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--solid { --btn-bg: var(--forest); --btn-fg: #fff; --btn-bd: var(--forest); }
.btn--wa    { --btn-bg: var(--wa); --btn-fg: #04240f; --btn-bd: var(--wa); }
.btn--wa:hover { --btn-bg: #1fbb5b; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink-soft); }
.btn--ghost:hover { --btn-fg: var(--ink); --btn-bd: var(--ink-faint); }

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(1100px 460px at 12% -10%, rgba(27,84,66,.55), transparent 62%),
    radial-gradient(760px 380px at 92% 8%, rgba(185,143,44,.20), transparent 60%),
    var(--forest-ink);
  color: #eef2ef;
  /* Il catalogo è il prodotto: la copertina non deve occupare
     tutta la prima schermata a ogni visita. */
  padding: clamp(38px, 5vw, 64px) 0 clamp(30px, 3.5vw, 44px);
  border-bottom: 1px solid var(--forest-2);
}
.hero__kicker {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 18px;
}
.hero__kicker { margin-bottom: 14px; }
.hero__title {
  font-size: clamp(28px, 4vw, 46px);
  max-width: 26ch; font-weight: 680; text-wrap: balance;
}
.hero__lead {
  margin-top: 15px; max-width: 58ch;
  font-size: clamp(14.5px, 1.3vw, 16.5px);
  color: #c4d2cb;
}
.hero__actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero .btn--solid { --btn-bg: var(--gold-soft); --btn-fg: #241c05; --btn-bd: var(--gold-soft); }

.stats {
  margin-top: clamp(26px, 3vw, 38px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--r);
  overflow: hidden;
}
.stat { background: var(--forest-ink); padding: 15px 18px; }
.stat__n {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; color: var(--gold-soft);
  line-height: 1;
}
.stat dd { margin-top: 5px; font-size: 12px; color: #a9bcb2; letter-spacing: .01em; }

/* ---------- menu Catalogo (tendina a cascata) ---------- */
.navmenu { position: relative; }
.navmenu__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font-size: 14.5px; color: var(--ink-soft);
  padding: 6px 0; border-bottom: 1.5px solid transparent;
}
.navmenu__trigger:hover,
.navmenu.is-open .navmenu__trigger { color: var(--ink); border-bottom-color: var(--gold); }
.navmenu__trigger svg { transition: transform .18s ease; }
.navmenu.is-open .navmenu__trigger svg { transform: rotate(180deg); }

.navmenu__panel {
  position: absolute; top: calc(100% + 10px); left: -14px; z-index: 50;
  background: var(--paper-2); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 6px; min-width: 268px;
}
.navmenu__panel[hidden] { display: none; }
.navmenu__list { display: grid; gap: 1px; }
.navmenu__item { position: relative; }

.navmenu__link {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 8px 11px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--ink);
}
.navmenu__link span { flex: 1; }
.navmenu__link em {
  font-style: normal; font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.navmenu__link:hover, .navmenu__item:hover > .navmenu__link { background: var(--paper); }
.navmenu__link.is-current { background: color-mix(in srgb, var(--forest) 10%, transparent); font-weight: 600; }
.navmenu__link.is-current em { color: var(--forest); }
.navmenu__link--soft { color: var(--ink-soft); }
.navmenu__arrow { color: var(--ink-faint); flex: 0 0 auto; }
.navmenu__sep { height: 1px; background: var(--line); margin: 5px 4px; }

.navmenu__sub {
  position: absolute; left: calc(100% + 5px); top: -6px;
  background: var(--paper-2); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 6px; min-width: 232px; display: none; z-index: 2;
}
.navmenu__item.has-sub:hover > .navmenu__sub,
.navmenu__item.has-sub:focus-within > .navmenu__sub { display: grid; gap: 1px; }

/* ---------- impaginazione catalogo ---------- */
.catalog { padding: clamp(26px, 3.5vw, 42px) 0 clamp(50px, 6vw, 80px); }
.catalog__in {
  display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 34px;
  align-items: start;
}

.crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-faint); margin-bottom: 10px;
}
.crumbs__link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-faint); }
.crumbs__link:hover { color: var(--ink); text-decoration: underline; }
.crumbs__sep { color: var(--line-2); }

.cathead { font-size: clamp(23px, 2.8vw, 32px); }
.cathead__desc {
  margin-top: 9px; max-width: 74ch; color: var(--ink-soft); font-size: 14.5px;
}
.cathead__desc[hidden] { display: none; }

/* ---------- piastrelle delle categorie ----------
   Le divisioni del catalogo devono vedersi in pagina, non solo nel menu. */
.tiles {
  display: grid; gap: 8px; margin-top: 20px;
  grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
}
.tiles[hidden] { display: none; }
.tile__btn {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 100%;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 7px 11px 7px 7px; cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.tile__btn:hover { border-color: var(--line-2); box-shadow: var(--shadow); }

/* categoria in cui sei */
.tile__btn.is-on {
  background: var(--forest); border-color: var(--forest);
}
.tile__btn.is-on .tile__name { color: #fff; }
.tile__btn.is-on .tile__sub { color: #a9bcb2; }
.tile__btn.is-on .tile__n { color: var(--gold-soft); }
.tile__btn.is-on .tile__media { box-shadow: 0 0 0 1px rgba(255,255,255,.22); }

.tile__btn--all .tile__media--all {
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--forest) 10%, transparent);
  color: var(--forest);
}
.tile__btn--all.is-on .tile__media--all {
  background: rgba(255,255,255,.14); color: var(--gold-soft);
}

.tile__media {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 7px;
  overflow: hidden; background: #e9e5db;
}
.tile__media img { width: 100%; height: 100%; object-fit: cover; }
.tile__media.is-empty {
  background: repeating-linear-gradient(135deg, #ece8de 0 8px, #e6e1d5 8px 16px);
}
.tile__body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.tile__name { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.tile__sub {
  font-size: 11px; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile__n {
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}

/* ---------- tipologie della categoria ---------- */
.subtypes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.subtypes[hidden] { display: none; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper-2); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
  font-size: 13.5px; color: var(--ink-soft);
  transition: border-color .14s ease, background-color .14s ease;
}
.pill:hover { border-color: var(--ink-faint); color: var(--ink); }
.pill em {
  font-style: normal; font-family: var(--mono); font-size: 11px;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.pill.is-on {
  background: var(--forest); border-color: var(--forest); color: #fff; font-weight: 600;
}
.pill.is-on em { color: color-mix(in srgb, var(--gold-soft) 90%, #fff); }

/* ---------- filtri attivi ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.chips[hidden] { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--forest) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--forest) 20%, transparent);
  color: var(--forest); border-radius: 999px;
  padding: 5px 11px; font-size: 12.5px; font-weight: 550; cursor: pointer;
}
.chip span { font-size: 15px; line-height: 1; opacity: .55; }
.chip:hover { background: color-mix(in srgb, var(--forest) 15%, transparent); }
.chip:hover span { opacity: 1; }

.listbar {
  position: sticky; top: 68px; z-index: 25;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: blur(10px);
  padding: 16px 0 14px; margin: 18px 0 22px;
  border-bottom: 1px solid var(--line);
}
.toolbar__search {
  display: flex; align-items: center; gap: 10px; flex: 1 1 260px;
  background: var(--paper-2); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 0 14px; color: var(--ink-faint);
  max-width: 400px;
}
.toolbar__search input {
  border: 0; background: none; outline: none; padding: 10px 0; width: 100%;
  color: var(--ink);
}
.listbar__filters { display: none; }
.listbar__badge {
  background: var(--forest); color: #fff; border-radius: 999px;
  font-size: 11px; min-width: 18px; padding: 1px 6px; font-family: var(--mono);
}
.listbar__badge[hidden] { display: none; }
.listbar__count {
  margin-left: auto; font-family: var(--mono); font-size: 12.5px;
  color: var(--ink-faint); letter-spacing: .02em;
}

/* ---------- colonna filtri ---------- */
.facets {
  position: sticky; top: 92px;
  display: grid; gap: 22px; align-content: start;
}
.facets__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.facets__eyebrow {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.facets__close { display: none; }
.facets__scrim { display: none; }
.facets__reset { justify-self: start; }
.facets__reset[hidden] { display: none; }

.facet + .facet { margin-top: 22px; }
.facet__title {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin-bottom: 9px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.facet__list { display: grid; gap: 2px; }
.facet__opt {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; margin: 0 -8px; border-radius: var(--r-sm);
  font-size: 13.5px; cursor: pointer;
}
.facet__opt:hover { background: var(--paper-2); }
.facet__opt span { flex: 1; }
.facet__opt em {
  font-style: normal; font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.facet__opt input { accent-color: var(--forest); width: 15px; height: 15px; flex: 0 0 auto; }
.facet__opt.is-empty { opacity: .38; cursor: default; }
.facet__opt.is-empty:hover { background: none; }
/* Categoria senza filtri utili: via la colonna, la griglia si allarga. */
body.no-facets .catalog__in { grid-template-columns: minmax(0, 1fr); }
body.no-facets .facets,
body.no-facets .listbar__filters { display: none; }

/* ---------- griglia ---------- */
.grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}
.empty {
  grid-column: 1 / -1; text-align: center; padding: 70px 20px;
  color: var(--ink-faint); border: 1px dashed var(--line-2); border-radius: var(--r);
}
.empty strong { color: var(--ink); }

/* ---------- scheda ---------- */
.card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); }

.card__media {
  position: relative; aspect-ratio: 4 / 3; background: #e9e5db;
  overflow: hidden;
}
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card__img { transform: scale(1.035); }
.card__media.is-empty {
  background:
    repeating-linear-gradient(135deg, #ece8de 0 10px, #e6e1d5 10px 20px);
}
.card__count {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(16,22,26,.72); color: #fff;
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  font-family: var(--mono);
}

.card__play {
  position: absolute; left: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(16,22,26,.72); color: #fff;
  font-size: 11px; padding: 3px 8px 3px 6px; border-radius: 999px;
  font-family: var(--mono);
}

.badge {
  position: absolute; left: 10px; top: 10px;
  font-size: 11px; font-weight: 650; letter-spacing: .03em;
  padding: 4px 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line-2);
}
.badge--available  { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 35%, #fff); }
.badge--coming     { color: var(--wait); border-color: color-mix(in srgb, var(--wait) 35%, #fff); }
.badge--onrequest  { color: var(--ask);  border-color: color-mix(in srgb, var(--ask) 35%, #fff); }

.card__body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
  color: var(--forest); background: color-mix(in srgb, var(--forest) 9%, transparent);
  padding: 3px 8px; border-radius: var(--r-sm);
}
.tag--soft { color: var(--ink-soft); background: color-mix(in srgb, var(--ink) 6%, transparent); }

.card__title { font-size: 19px; }

/* Codice e ordine minimo su una riga sola: la descrizione di tipologia
   qui si ripeterebbe identica su tutte le schede sorelle, quindi sta
   solo nella scheda di dettaglio. */
.card__line {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-faint); margin-top: -5px;
}
.card__dot { opacity: .5; }

/* ---------- selettore variante ---------- */
.varsel { display: grid; gap: 5px; }
.varsel__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.varsel__input, .flavsel__input {
  appearance: none; width: 100%;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8b93' d='M6 8.5 1.8 4.3l.9-.9L6 6.7l3.3-3.3.9.9z'/%3E%3C/svg%3E") no-repeat right 11px center/11px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 8px 32px 8px 11px; font-size: 13.5px; cursor: pointer;
}

/* ---------- slider quantità ---------- */
.qtybox {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 13px 9px;
}
.qtybox__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.qtybox__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.qtybox__qty {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 600; color: var(--forest);
}
.qtybox__ends {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
  margin-top: 1px;
}

.qtybox__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; background: transparent; margin: 10px 0 4px; cursor: grab;
}
.qtybox__range:active { cursor: grabbing; }
.qtybox__range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--forest-2), var(--gold-soft));
}
.qtybox__range::-moz-range-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--forest-2), var(--gold-soft));
}
.qtybox__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -8px;
  border-radius: 50%; background: var(--forest);
  border: 3px solid var(--paper-2);
  box-shadow: 0 1px 6px rgba(16,22,26,.34);
  transition: transform .12s ease;
}
.qtybox__range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--forest); border: 3px solid var(--paper-2);
  box-shadow: 0 1px 6px rgba(16,22,26,.34);
}
.qtybox__range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.qtybox__range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- prezzo ---------- */
.price { margin-top: auto; padding-top: 4px; }
.price__total {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 27px; font-weight: 620; letter-spacing: -.02em; line-height: 1.1;
}
.price__unit { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; min-height: 1.2em; }
.price--request .price__total { font-size: 17px; color: var(--ask); font-family: var(--sans); }
.price--big .price__total { font-size: 36px; }

/* Un'azione primaria sola per scheda: il resto è un collegamento. */
.card__actions { display: grid; gap: 7px; justify-items: center; }
.card__actions .btn--wa { width: 100%; }
.card__more {
  background: none; border: 0; padding: 2px; cursor: pointer;
  font-size: 12.5px; color: var(--ink-faint); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line-2);
}
.card__more:hover { color: var(--ink); text-decoration-color: var(--ink-faint); }
.cta-hint { font-size: 11.5px; color: var(--ink-faint); margin-top: 8px; text-align: center; }

/* ---------- bande di contenuto ---------- */
.band { padding: clamp(52px, 7vw, 92px) 0; border-top: 1px solid var(--line); }
.band--dark {
  background: var(--forest-ink); color: #e4eae6; border-top: 0;
}
.band--dark h2, .band--dark h4 { color: #fff; }
.band--cta {
  background: linear-gradient(180deg, var(--paper), #efece4);
  text-align: center;
}
.band__in { display: grid; gap: 30px; }
.band__in--center { justify-items: center; max-width: 62ch; margin-inline: auto; }
.band__head h2 { font-size: clamp(24px, 3.2vw, 38px); max-width: 22ch; }
.band__head p { margin-top: 12px; color: var(--ink-soft); max-width: 68ch; }
.band--dark .band__head p { color: #a9bcb2; }
.lead { font-size: 16.5px; max-width: 78ch; color: var(--ink-soft); }
.band--dark .lead { color: #c4d2cb; }

.ticks { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ticks li {
  position: relative; padding-left: 30px; font-size: 15px; color: var(--ink-soft);
  border-left: 2px solid var(--line); padding-block: 4px;
}
.ticks li::before {
  content: ""; position: absolute; left: 12px; top: 12px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}

.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.step {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r); padding: 20px;
}
.step__n { color: var(--gold-soft); font-size: 12px; letter-spacing: .1em; }
.step__t { font-size: 17px; margin: 8px 0 8px; }
.step__d { font-size: 14px; color: #b3c4bb; line-height: 1.62; }

/* ---------- tabelle ---------- */
.tiers { font-size: 14px; }
.tiers th, .tiers td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.tiers th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 600;
}
.tiers td:last-child, .tiers th:last-child { text-align: right; }
.tiers tbody tr:last-child td { border-bottom: 0; }
.tiers--compliance { max-width: 620px; }
.band--dark .tiers th, .band--dark .tiers td { border-color: rgba(255,255,255,.12); }
.band--dark .tiers th { color: #90a79c; }

/* ---------- modale ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: none; }
.modal.is-open { display: block; }
.modal__scrim { position: absolute; inset: 0; background: rgba(10,16,14,.62); backdrop-filter: blur(3px); }
.modal__panel {
  position: relative; z-index: 1;
  width: min(1080px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  margin: 24px auto; overflow: auto;
  background: var(--paper-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.modal__close {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.9);
  font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink-soft);
}
.modal__close:hover { background: #fff; color: var(--ink); }

.sheet { display: grid; grid-template-columns: 1.05fr .95fr; }
.sheet__gallery {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: #e9e5db; align-content: start;
}
.shot { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--lead { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.shot--wide { grid-column: 1 / -1; }
.shot--video {
  background: #0b100e; aspect-ratio: 16 / 10;
  position: relative; padding: 0; border: 0; cursor: pointer; overflow: hidden;
}
.shot--video iframe { width: 100%; height: 100%; border: 0; display: block; }
.shot--video img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s ease; }
.shot--video:hover img { opacity: 1; }
.shot__play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(16,22,26,.62); color: #fff;
  backdrop-filter: blur(2px);
  transition: transform .16s ease, background-color .16s ease;
}
.shot--video:hover .shot__play { transform: scale(1.08); background: var(--forest); }
.shot--empty {
  display: grid; place-items: center; color: var(--ink-faint); font-size: 13.5px;
  background: repeating-linear-gradient(135deg, #ece8de 0 10px, #e6e1d5 10px 20px);
}
.sheet__info { padding: 28px 30px 32px; display: grid; gap: 14px; align-content: start; }
.sheet__title { font-size: clamp(24px, 2.6vw, 32px); }
.sheet__code { font-size: 12.5px; color: var(--ink-faint); }
.sheet__desc { font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); }
.sheet__desc--soft { font-size: 13.5px; color: var(--ink-faint); }
.sheet__notes {
  font-size: 14px; color: var(--ink-soft);
  background: var(--paper); border-left: 2px solid var(--gold);
  padding: 11px 14px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.sheet__sub {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint); margin-top: 8px;
}
.qtybox--wide { padding: 14px 16px 11px; }
.varsel--wide .varsel__input, .varsel--wide .flavsel__input { padding: 10px 32px 10px 12px; }

/* ---------- footer ---------- */
.site-foot {
  background: var(--forest-ink); color: #9fb3a8;
  padding: 46px 0 54px; font-size: 13px;
}
.site-foot__brand { color: #e4eae6; font-size: 15px; margin-bottom: 16px; }
.site-foot__brand span { color: #8ba497; font-size: 13px; font-weight: 400; }
.fine { max-width: 92ch; margin-top: 10px; line-height: 1.62; }
.source {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11.5px;
}
.source::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.source--live    { color: #6fd39a; }
.source--partial { color: #e0a24a; }
.source--local   { color: #c9a94f; }

/* ---------- accesso operatori ---------- */
.gate {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 24px;
  background: var(--forest-ink);
}
.gate[hidden] { display: none; }
.gate__panel {
  max-width: 500px; text-align: center; color: #e4eae6;
}
.gate__brand {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 20px;
}
.gate__panel h2 { font-size: clamp(23px, 3.4vw, 31px); color: #fff; }
.gate__text { margin-top: 14px; color: #a9bcb2; font-size: 15.5px; }
.gate__actions { margin-top: 26px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gate .btn--solid { --btn-bg: var(--gold-soft); --btn-fg: #241c05; --btn-bd: var(--gold-soft); }
.gate .btn--ghost { --btn-fg: #a9bcb2; --btn-bd: rgba(255,255,255,.22); }
.gate__declined { margin-top: 22px; color: var(--gold-soft); font-size: 14.5px; }

/* ---------- caricamento ---------- */
.is-loading .grid::after {
  content: ""; grid-column: 1 / -1; height: 220px; border-radius: var(--r);
  background: linear-gradient(90deg, #eeeae0 25%, #f5f2ea 50%, #eeeae0 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite linear;
}
@keyframes shimmer { to { background-position: -400% 0; } }

/* ---------- responsive ---------- */

/* Fra 900 e 1150 la colonna resta, ma più stretta: sparire su una finestra
   di laptop non massimizzata vorrebbe dire non far vedere i filtri a nessuno. */
@media (max-width: 1150px) {
  .catalog__in { grid-template-columns: 200px minmax(0, 1fr); gap: 26px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); }
}

/* Sotto i 900 la colonna diventa un pannello che entra da sinistra. */
@media (max-width: 900px) {
  .catalog__in { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .listbar__filters { display: inline-flex; }

  .facets {
    position: fixed; inset: 0 auto 0 0; z-index: 70;
    width: min(330px, 88vw);
    background: var(--paper-2); border-right: 1px solid var(--line-2);
    box-shadow: var(--shadow-lg);
    padding: 20px 22px 28px; overflow-y: auto;
    gap: 18px; align-content: start;
    transform: translateX(-101%);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
  }
  body.facets-open .facets { transform: none; }
  body.facets-open { overflow: hidden; }

  .facets__close {
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--line-2); background: var(--paper);
    font-size: 21px; line-height: 1; cursor: pointer; color: var(--ink-soft);
  }
  .facets__scrim {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(10, 16, 14, .5); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  body.facets-open .facets__scrim { opacity: 1; pointer-events: auto; }
}

@media (max-width: 900px) {
  /* Qui e solo qui spariscono i link Qualità/Servizi/Contatti: sotto i 900px
     non ci starebbero accanto a Catalogo, lingua e WhatsApp. Sopra restano. */
  .site-nav a { display: none; }
  .sheet { grid-template-columns: 1fr; }
  .sheet__gallery { grid-template-columns: 1fr 1fr; }
  .listbar { top: 60px; }

  /* col pannello chiuso il tasto è l'unico accesso ai filtri: va visto */
  .listbar__filters {
    --btn-bg: var(--forest); --btn-fg: #fff; --btn-bd: var(--forest);
    font-weight: 600;
  }
  .listbar__badge { background: var(--gold-soft); color: #241c05; }
}

@media (max-width: 640px) {
  .wrap { padding-inline: 16px; }
  .site-head__in { min-height: 60px; gap: 10px; }
  .brand__text em { display: none; }
  .grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .modal__panel { width: 100%; margin: 0; max-height: 100dvh; border-radius: 0; }
  .sheet__info { padding: 22px 18px 28px; }
  .card__actions { flex-direction: column; }

  /* la tendina occupa la larghezza dello schermo e i sottolivelli
     si aprono in linea: a cascata non ci starebbero */
  .navmenu__panel {
    position: fixed; left: 12px; right: 12px; top: 62px;
    min-width: 0; max-height: calc(100dvh - 80px); overflow-y: auto;
  }
  .navmenu__sub {
    position: static; display: grid; gap: 1px;
    border: 0; box-shadow: none; padding: 2px 0 6px 14px;
    border-left: 1px solid var(--line); margin-left: 11px; min-width: 0;
  }
  .navmenu__item.has-sub > .navmenu__link .navmenu__arrow { transform: rotate(90deg); }
  .listbar__count { width: 100%; margin-left: 0; }
}

@media (max-width: 460px) {
  .btn--wa.btn--sm span { display: none; }
  .btn--wa.btn--sm { padding: 8px 11px; }
}

/* =============================================================
   TEMA CBD — direzione "Organic Biophilic" + "Nature Distilled"
   Motion tenuto al livello Subtle: 150-350ms, ease-out, spostamenti
   sotto i 2px sugli hover, stagger 0.025s per voce.
   ============================================================= */

@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-latin.woff2') format('woff2');
  font-weight: 500 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-latin-ext.woff2') format('woff2');
  font-weight: 500 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --leaf: color-mix(in srgb, var(--forest) 26%, transparent);
  /* easing naturale della scheda "Nature Distilled" */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Il serif va solo sui titoli: dati, prezzi e controlli restano
   in sans e tabellare, dove la leggibilità conta più del carattere. */
.hero__title, .cathead, .band__head h2, .sheet__title,
.card__title, .tile__name, .gate__panel h2, .site-foot__brand strong {
  font-family: var(--serif);
  font-weight: 600; letter-spacing: -.005em;
}
.hero__title { font-weight: 600; }
.card__title { font-size: 18.5px; line-height: 1.25; }

/* ---------- grana naturale, appena percettibile ---------- */
.hero::after, .navmenu__panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero { position: relative; overflow: hidden; }

/* foglia in filigrana nella copertina */
.hero__leaf {
  position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  width: min(430px, 38vw); height: auto; color: #fff; opacity: .05;
  pointer-events: none;
}

/* ---------- menu: pannello ---------- */
.navmenu__panel {
  /* niente position qui: la regola base lo mette absolute, e sotto i 640px
     la media query lo vuole fixed a tutta larghezza. Ripeterlo qui la
     annullava e su telefono la tendina usciva larga quanto il bottone. */
  overflow: hidden;
  transform-origin: top left;
  animation: menuIn .2s var(--ease) both;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* foglia in filigrana nell'angolo del pannello */
.navmenu__panel::before {
  content: ""; position: absolute; right: -30px; bottom: -34px;
  width: 96px; height: 96px; pointer-events: none; opacity: .3;
  background: var(--leaf);
  -webkit-mask: var(--leaf-mask) center/contain no-repeat;
  mask: var(--leaf-mask) center/contain no-repeat;
}

/* le voci entrano a scalare: 25ms l'una, come da scheda motion */
.navmenu__list > li {
  animation: itemIn .26s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 25ms);
}
@keyframes itemIn {
  from { opacity: 0; transform: translateX(-5px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- menu: voci ---------- */
.navmenu__link {
  position: relative; min-height: 40px;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.navmenu__link::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 2px; height: 0; border-radius: 2px;
  background: var(--gold); transform: translateY(-50%);
  transition: height .18s var(--ease);
}
.navmenu__link:hover::before,
.navmenu__item:hover > .navmenu__link::before { height: 17px; }
.navmenu__link.is-current::before { height: 22px; background: var(--gold-soft); }
.navmenu__arrow { transition: transform .18s var(--ease); }
.navmenu__item:hover > .navmenu__link .navmenu__arrow,
.navmenu__item.is-open > .navmenu__link .navmenu__arrow { transform: translateX(2px); }

.navmenu__sub { animation: subIn .18s var(--ease) both; }
@keyframes subIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}
/* su touch l'hover non esiste: il sottolivello si apre col tocco */
.navmenu__item.is-open > .navmenu__sub { display: grid; gap: 1px; }

/* ---------- piastrelle ---------- */
.tile__btn { border-radius: 14px; }
.tile__media { border-radius: 10px; transition: transform .22s var(--ease); }
.tile__btn:hover .tile__media { transform: scale(1.06); }
.tile__media img { transition: filter .22s var(--ease); }
.tile__btn:hover .tile__media img { filter: saturate(1.12); }
.tile__leaf { width: 20px; height: 20px; color: var(--forest); }
.tile__btn--all.is-on .tile__leaf { color: var(--gold-soft); }

/* ---------- pillole ---------- */
.pill { transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease); }
.pill.is-on { box-shadow: 0 1px 8px -2px color-mix(in srgb, var(--forest) 55%, transparent); }

/* ---------- rispetto del movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  .navmenu__panel, .navmenu__list > li, .navmenu__sub { animation: none !important; }
}

:root { --leaf-mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='50' cy='42' rx='7' ry='28'/%3E%3Cellipse cx='50' cy='45' rx='6' ry='25' transform='rotate(34 50 70)'/%3E%3Cellipse cx='50' cy='45' rx='6' ry='25' transform='rotate(-34 50 70)'/%3E%3Cellipse cx='50' cy='55' rx='4.8' ry='18' transform='rotate(72 50 70)'/%3E%3Cellipse cx='50' cy='55' rx='4.8' ry='18' transform='rotate(-72 50 70)'/%3E%3Cpath d='M50 65.5 54 70 50 74.5 46 70Z'/%3E%3C/g%3E%3C/svg%3E"); }

/* Il sottolivello non usa più un'animazione a keyframe: partendo da
   display:none l'animazione non riparte in modo affidabile e il pannello
   restava a opacità 0. Con visibility + transizione il comportamento è
   deterministico, e da nascosto resta fuori dalla navigazione da tastiera. */
.navmenu__sub {
  display: grid; gap: 1px; animation: none;
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s;
}
.navmenu__item.has-sub:hover > .navmenu__sub,
.navmenu__item.has-sub:focus-within > .navmenu__sub,
.navmenu__item.is-open > .navmenu__sub {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s;
}

@media (max-width: 640px) {
  /* a schermo stretto i sottolivelli stanno in linea, sempre aperti */
  .navmenu__sub {
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
}

/* ---------- sfondo GPU della copertina ----------
   Il canvas si sovrappone al gradiente CSS senza sostituirlo: se WebGPU
   manca o lo shader fallisce, sotto c'è comunque il fondo di sempre. */
.hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.hero__canvas.is-on { opacity: 1; }
.hero__in { position: relative; z-index: 2; }
.hero__leaf { z-index: 1; }
.hero::after { z-index: 3; }

/* =============================================================
   CAROSELLO della scheda prodotto
   Una sola sequenza scorrevole: foto e poi video. Su telefono si
   trascina col dito (scroll-snap nativo), su desktop ci sono anche
   le frecce. Niente librerie: lo scorrimento è quello del browser.
   ============================================================= */
.carousel { position: relative; background: #e9e5db; min-width: 0; }
.carousel__track {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.slide {
  flex: 0 0 100%; margin: 0; position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: #e9e5db;
  scroll-snap-align: center; scroll-snap-stop: always;
}
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide--empty {
  display: grid; place-items: center; color: var(--ink-faint); font-size: 13.5px;
  background: repeating-linear-gradient(135deg, #ece8de 0 10px, #e6e1d5 10px 20px);
}
.slide__video {
  width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer;
  background: #0b100e; position: relative; display: block;
}
.slide__video img { opacity: .82; transition: opacity .2s var(--ease); }
.slide__video:hover img { opacity: 1; }
.slide__play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(16,22,26,.62); color: #fff; backdrop-filter: blur(2px);
  transition: transform .16s var(--ease), background-color .16s var(--ease);
}
.slide__video:hover .slide__play { transform: scale(1.08); background: var(--forest); }
.slide__frame { width: 100%; height: 100%; border: 0; display: block; background: #0b100e; }

.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.9); border: 1px solid var(--line-2);
  color: var(--ink); box-shadow: var(--shadow);
  transition: background-color .15s var(--ease), opacity .15s var(--ease);
}
.carousel__nav--prev { left: 12px; }
.carousel__nav--next { right: 12px; }
.carousel__nav:hover { background: #fff; }
.carousel__nav[disabled] { opacity: 0; pointer-events: none; }

.carousel__dots {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; gap: 5px; padding: 5px 9px; border-radius: 999px;
  background: rgba(16,22,26,.42); backdrop-filter: blur(3px);
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.5); transition: all .18s var(--ease);
}
.dot.is-on { background: #fff; width: 16px; border-radius: 3px; }

.carousel__count {
  position: absolute; top: 12px; right: 12px;
  background: rgba(16,22,26,.6); color: #fff; font-family: var(--mono);
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
}

/* ---------- l'immagine della scheda apre il dettaglio ---------- */
.card__media[data-open] { cursor: pointer; }
.card__media[data-open]:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* =============================================================
   RESA E ADATTAMENTO
   ============================================================= */

/* Con 190 schede in pagina il browser calcola stile e layout anche per
   quelle fuori schermo. content-visibility gliene risparmia il lavoro
   finché non servono; l'altezza dichiarata evita che la barra di
   scorrimento salti mentre scendi. */
.card {
  content-visibility: auto;
  contain-intrinsic-size: auto 560px;
}

/* Su schermo largo il carosello resta fermo mentre si legge la tabella
   degli scaglioni, che è più alta di lui. */
@media (min-width: 901px) {
  .sheet { align-items: start; }
  .carousel { position: sticky; top: 0; }
}

@media (max-width: 900px) {
  /* scheda prodotto a colonna unica: prima le foto, poi i dati */
  .sheet { grid-template-columns: minmax(0, 1fr); }
  .slide { aspect-ratio: 4 / 3; }
  /* le frecce non servono dove si trascina col dito */
  .carousel__nav { display: none; }
  .carousel__dots { bottom: 10px; }

  .sheet__info { padding: 20px 18px 96px; }

  /* l'ordine deve restare a portata di pollice anche scorrendo i dati */
  .sheet__info .btn--wa {
    position: sticky; bottom: 12px; z-index: 4;
    box-shadow: 0 6px 22px -6px rgba(4, 36, 15, .5);
  }
}

@media (max-width: 640px) {
  .slide { aspect-ratio: 1 / 1; }
  .carousel__count { font-size: 11px; top: 10px; right: 10px; }
  .modal__close { top: 10px; right: 10px; }
  /* aree di tocco: minimo 44px sulle voci di menu */
  .navmenu__link { min-height: 44px; }
  .pill { padding: 9px 15px; }
  .facet__opt { padding: 9px 8px; }
  .tile__btn { padding: 9px 12px 9px 9px; }
}

/* Il carosello si trascina orizzontalmente: su un elemento dentro una
   pagina che scorre in verticale serve dirlo al browser, altrimenti su
   iOS il gesto viene interpretato come scroll di pagina. */
.carousel__track { touch-action: pan-x pinch-zoom; }

/* Chi ha chiesto meno movimento non deve vedere lo scorrimento animato
   del carosello: il salto è immediato. */
@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
}

/* Il carosello è fisso e più basso della colonna dati: senza questo, sotto
   di lui resterebbe un rettangolo bianco che sembra un errore di resa.
   La colonna prende il colore della carta, quella dei dati resta chiara. */
@media (min-width: 901px) {
  .sheet { background: #ece8de; }
  .sheet__info { background: var(--paper-2); }
}

/* =============================================================
   SCHEDA PRODOTTO — impaginazione definitiva
   Misurato prima: il pannello era alto quanto la colonna dati (871px)
   mentre il carosello si fermava a 425px, lasciando 445px di vuoto.
   Qui il dialogo ha un'altezza propria: le foto riempiono la loro
   colonna, i dati scorrono nella loro. Nessuno spazio morto.
   ============================================================= */

.modal__panel { display: flex; overflow: hidden; }
#modal-body { flex: 1; min-width: 0; min-height: 0; display: flex; }
.sheet { flex: 1; min-width: 0; min-height: 0; }

/* la colonna dati scorre per conto suo, non trascina tutto il pannello */
.sheet__info { overflow-y: auto; overscroll-behavior: contain; }

/* il contatore va in basso a sinistra: in alto a destra finiva sotto
   la X di chiusura */
.carousel__count { top: auto; right: auto; bottom: 12px; left: 12px; }

/* la X sta sopra tutto e non deve coprire le etichette */
.modal__close { z-index: 6; }
.sheet__info .card__meta { padding-right: 46px; }

@media (min-width: 901px) {
  .modal__panel { height: min(780px, calc(100dvh - 48px)); }
  .sheet {
    display: grid; grid-template-columns: 1.12fr 1fr;
    align-items: stretch; background: none;
  }
  /* niente più rapporto fisso: la slide prende l'altezza della colonna */
  .carousel, .carousel__track { height: 100%; min-height: 0; }
  .slide { aspect-ratio: auto; height: 100%; }
  .carousel { position: relative; }
  .sheet__info { padding: 26px 28px 30px; }
}

@media (max-width: 900px) {
  .modal__panel { height: 100dvh; max-height: 100dvh; }
  .sheet {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .carousel { position: relative; }
  .slide { aspect-ratio: 4 / 3; height: auto; }
  .sheet__info { padding: 18px 18px 90px; }
}

@media (max-width: 640px) {
  .slide { aspect-ratio: 1 / 1; }
  .sheet__info { padding: 16px 16px 88px; }
}

/* Il pulsante d'ordine resta appiccicato in fondo mentre si scorrono i
   prezzi: senza uno sfondo pieno attorno sembrava galleggiare sopra il
   testo. L'alone dello stesso colore del pannello lo stacca. */
@media (max-width: 900px) {
  .sheet__info .btn--wa {
    position: sticky; bottom: 10px; z-index: 5;
    box-shadow: 0 0 0 10px var(--paper-2),
                0 10px 26px -8px rgba(4, 36, 15, .45);
  }
  /* i comandi del carosello appartengono al carosello, non al pannello */
  .carousel { position: relative; }
  .carousel__count, .carousel__dots { position: absolute; }
}

/* =============================================================
   SCHEDA PRODOTTO — correzioni misurate su telefono
   ============================================================= */

/* .badge è posizionata in assoluto perché nella griglia sta SOPRA la foto.
   Dentro la scheda di dettaglio quel posizionamento la faceva scappare dal
   flusso e incollarsi sopra l'immagine invece di stare in riga con le
   etichette. Qui torna un elemento normale. */
.sheet__info .badge {
  position: static; left: auto; top: auto;
}

/* Prezzo e pulsante formano un blocco unico. Su telefono diventa la barra
   d'azione in fondo alla scheda: il prezzo aggiornato dallo slider e
   l'ordine restano sempre visibili mentre si scorrono gli scaglioni. */
.sheet__action { display: grid; gap: 10px; }

@media (max-width: 900px) {
  .sheet__info { padding: 18px 18px 0; }

  .sheet__action {
    position: sticky; bottom: 0; z-index: 5;
    margin: 4px -18px 0;
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 24px -14px rgba(16, 22, 26, .3);
  }
  /* il pulsante non è più appiccicato per conto suo: lo è la barra */
  .sheet__info .btn--wa { position: static; box-shadow: none; }
  .sheet__action .price--big .price__total { font-size: 28px; }
  .sheet__action .cta-hint { display: none; }

  /* spazio in coda, così l'ultima riga della tabella non finisce
     sotto la barra */
  .tiers { margin-bottom: 8px; }
}

@media (max-width: 640px) {
  .sheet__info { padding: 16px 16px 0; }
  .sheet__action { margin-inline: -16px; padding-inline: 16px; }
}

/* Su telefono la barra prezzo+ordine deve essere l'ULTIMO elemento della
   colonna, altrimenti scorrendo in fondo la tabella degli scaglioni le
   finisce sotto. L'ordine nel DOM resta quello buono per il desktop (CTA
   in alto, tabella sotto come riferimento): qui lo si inverte con `order`,
   senza duplicare niente. */
@media (max-width: 900px) {
  .sheet__info {
    display: flex; flex-direction: column; gap: 14px;
  }
  .sheet__action { order: 99; margin-top: auto; }

  /* il margine serviva a non finire sotto la X: su telefono la X sta
     sopra la foto, quindi qui faceva solo andare a capo l'etichetta */
  .sheet__info .card__meta { padding-right: 0; }
}

/* Telefono in orizzontale: con 740px di larghezza il rapporto 4:3 darebbe
   un carosello alto 555px dentro un pannello di 360. Misurato: sbordava.
   Sotto i 560px di altezza si torna a due colonne, come su desktop. */
@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
  .sheet {
    grid-template-columns: 1.05fr 1fr;
    grid-template-rows: minmax(0, 1fr);
  }
  .carousel, .carousel__track { height: 100%; max-height: none; }
  .slide { aspect-ratio: auto; height: 100%; max-height: none; }
  .sheet__info { padding: 16px 16px 0; }
  .carousel__nav { display: grid; }
}

/* Rete di sicurezza per ogni altro schermo basso: la foto non può
   prendersi più di metà pannello, altrimenti i dati spariscono sotto. */
@media (max-width: 900px) {
  .slide { max-height: 52dvh; }
  .carousel { max-height: 52dvh; overflow: hidden; }
}

/* =============================================================
   TESTATA SU SCHERMI STRETTI
   Misurato: a 320px il contenuto della pagina risultava largo 449px.
   La causa era qui — logo + nome + "Catalogo" + IT/EN + WhatsApp non
   entrano, e la testata allargava l'intero documento, facendo scorrere
   tutta la pagina in orizzontale. Nessun elemento può imporre una
   larghezza minima maggiore dello schermo.
   ============================================================= */
.site-head__in { min-width: 0; flex-wrap: nowrap; }
.brand { flex: 0 1 auto; min-width: 0; }
.brand__text { min-width: 0; }
.brand__text strong {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.site-nav { min-width: 0; flex: 0 0 auto; }
.site-head__tools { flex: 0 0 auto; }

@media (max-width: 620px) {
  .site-head__in { gap: 10px; }
  .brand__text strong { font-size: 13.5px; }
}

/* Sotto i 460px resta il solo marchio: il nome per esteso non entra
   accanto a Catalogo, lingua e WhatsApp, e vince l'accesso al catalogo. */
@media (max-width: 460px) {
  .site-head__in { gap: 8px; }
  .brand__text { display: none; }
  .lang-btn { padding: 5px 9px; }
  .navmenu__trigger { font-size: 14px; }
}

/* Ultima rete: nessuna sezione può superare la larghezza dello schermo.
   Non nasconde un difetto — i difetti sono corretti sopra — ma impedisce
   che uno nuovo faccia scorrere l'intera pagina di lato. */
html, body { max-width: 100%; overflow-x: hidden; }

/* =============================================================
   TELEFONO — la scheda scorre come una colonna sola
   Prima la foto era una riga fissa e scorreva solo la colonna dati:
   restava mezzo schermo per leggere. Qui scorre tutto il pannello, la
   foto esce dall'alto e il testo si prende lo schermo intero. Fissi
   restano solo i due comandi che servono sempre: chiudere e ordinare.
   ============================================================= */
@media (max-width: 900px) {
  .modal__panel {
    display: block; overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  #modal-body { display: block; }
  .sheet { display: block; }

  /* la foto torna a un rapporto pieno: tanto scorre via */
  .carousel { max-height: none; }
  .slide { max-height: none; aspect-ratio: 4 / 3; height: auto; }

  /* la colonna dati non è più un contenitore che scorre per conto suo */
  .sheet__info {
    overflow: visible; display: flex; flex-direction: column; gap: 14px;
    padding: 18px 18px 0;
  }

  /* la X resta raggiungibile anche dopo che la foto è uscita */
  .modal__close {
    position: fixed; top: 12px; right: 12px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 10px -2px rgba(16, 22, 26, .35);
  }

  /* la barra d'ordine resta incollata in basso per tutto lo scorrimento */
  .sheet__action {
    position: sticky; bottom: 0; order: 99; margin: 6px -18px 0;
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--paper-2); border-top: 1px solid var(--line);
    box-shadow: 0 -10px 24px -14px rgba(16, 22, 26, .3);
  }
}

@media (max-width: 640px) {
  .slide { aspect-ratio: 1 / 1; }
  .sheet__info { padding: 16px 16px 0; }
  .sheet__action { margin-inline: -16px; padding-inline: 16px; }
}

/* In orizzontale resta la disposizione a due colonne: lì lo schermo è
   basso e una colonna sola costringerebbe a scorrere per ogni riga. */
@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
  .modal__panel { display: flex; overflow: hidden; }
  #modal-body { display: flex; min-height: 0; }
  .sheet {
    display: grid; grid-template-columns: 1.05fr 1fr;
    grid-template-rows: minmax(0, 1fr); min-height: 0;
  }
  .carousel, .carousel__track { height: 100%; max-height: none; }
  .slide { aspect-ratio: auto; height: 100%; max-height: none; }
  .sheet__info { overflow-y: auto; padding: 16px 16px 0; }
  .modal__close { position: absolute; }
  .carousel__nav { display: grid; }
}

/* =============================================================
   VENDITA — novità, offerte, sconti volume, garanzie
   Le leve usate, e il limite di ognuna: ancoraggio (listino barrato accanto
   al prezzo promo), scarsità dichiarata solo dal foglio (ultimi lotti),
   urgenza solo con una data vera (offerta valida fino al…), e un invito
   concreto a salire di quantità (da 10 kg: prezzo migliore). Niente che i
   dati non dicano davvero.
   ============================================================= */
:root {
  --promo:  #b23a2a;   /* terracotta: l'urgenza, nella palette naturale */
  --scarce: #8a4b12;   /* ultimi lotti */
}

/* ---------- striscia di garanzie sotto la copertina ---------- */
.trust { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.trust__in {
  display: flex; flex-wrap: wrap; gap: 6px 30px;
  padding-block: 11px; font-size: 13px; color: var(--ink-soft);
}
.trust__in li { display: flex; align-items: center; gap: 9px; }
.trust__in li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); flex: 0 0 auto;
}

/* ---------- copertina: seconda azione ---------- */
.hero .btn--ghost { --btn-fg: #eef2ef; --btn-bd: rgba(255,255,255,.34); }
.hero .btn--ghost:hover { --btn-bd: rgba(255,255,255,.7); --btn-fg: #fff; }
#hero-picks[hidden] { display: none; }

/* ---------- sezione in evidenza ---------- */
.picks { padding: clamp(28px, 4vw, 46px) 0 clamp(8px, 1.5vw, 14px); }
.picks[hidden] { display: none; }
.picks__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  margin-bottom: 16px;
}
.picks__intro { min-width: 0; }
.picks__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); font-weight: 650;
}
.picks__spark { width: 13px; height: 13px; color: var(--gold); }
.picks__title {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.005em;
  font-size: clamp(23px, 2.8vw, 32px); margin-top: 5px;
}
.picks__lead { margin-top: 7px; color: var(--ink-soft); font-size: 14.5px; max-width: 62ch; }
.picks__tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.picks__n {
  font-style: normal; font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-left: 2px;
}
.picks__nav {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--paper-2); color: var(--ink);
  transition: background-color .15s var(--ease), opacity .15s var(--ease), box-shadow .15s var(--ease);
}
.picks__nav:hover { background: #fff; box-shadow: var(--shadow); }
.picks__nav[disabled] { opacity: .32; cursor: default; box-shadow: none; }
.picks.no-overflow .picks__nav { display: none; }

/* la fila scorre di lato: col dito su telefono, con le frecce su desktop.
   La mezza scheda che spunta a destra dice da sola che c'è altro. */
.picks__rail {
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding: 4px 4px 16px; margin: 0 -4px; scroll-padding-inline: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
  touch-action: pan-x pan-y pinch-zoom;
}
.picks__rail::-webkit-scrollbar { display: none; }

.pick {
  flex: 0 0 250px; scroll-snap-align: start;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.pick:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.pick__media {
  position: relative; aspect-ratio: 4 / 3; background: #e9e5db; overflow: hidden; cursor: pointer;
}
.pick__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.pick:hover .pick__media img { transform: scale(1.035); }
.pick__media.is-empty { background: repeating-linear-gradient(135deg, #ece8de 0 10px, #e6e1d5 10px 20px); }
.pick__media:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.pick__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.pick__meta {
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.pick__title { font-family: var(--serif); font-size: 16.5px; font-weight: 600; line-height: 1.25; }
.pick__link {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: left;
}
.pick__link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.pick__price {
  margin-top: auto; padding-top: 6px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
}
.pick__was {
  color: var(--ink-faint); font-size: 12.5px; font-family: var(--mono);
  text-decoration-color: var(--promo);
}
.pick__amount {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 620; letter-spacing: -.01em;
}
.pick--coming .pick__amount { font-family: var(--sans); font-size: 14.5px; color: var(--wait); font-weight: 600; }
.pick__sub { font-size: 12px; color: var(--ink-faint); width: 100%; }
.pick__note { font-size: 12px; color: var(--promo); font-weight: 600; }
.pick__cta { margin-top: 8px; width: 100%; }

/* ---------- etichette commerciali sulla foto ---------- */
.ribbon {
  position: absolute; right: 10px; top: 10px; z-index: 1;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; color: #fff; background: var(--forest);
  box-shadow: 0 2px 8px -2px rgba(16,22,26,.4);
  max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ribbon--offer, .ribbon--deal { background: var(--promo); }
.ribbon--limited { background: var(--scarce); }
.ribbon--new { background: var(--forest); }
.ribbon--top { background: var(--gold-soft); color: #241c05; }
.ribbon--coming { background: rgba(16,22,26,.72); }
.ribbon--inline { position: static; box-shadow: none; }

/* ---------- prezzo: listino barrato, sconto, scadenza, sconto volume ---------- */
.price__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.price__off {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: var(--promo); border-radius: 999px; padding: 2px 8px;
}
.price__off:empty, .price__was:empty { display: none; }
.price__was { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.price__was s { text-decoration-color: var(--promo); }
.price__until { font-size: 12px; color: var(--promo); font-weight: 600; margin-top: 4px; }
.price__deal { margin-top: 5px; }
.price__deal--sheet { margin-top: -4px; }
.deal {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0; text-align: left;
  font-size: 12.5px; font-weight: 600; color: var(--forest-2); cursor: pointer;
}
.deal:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.deal svg { flex: 0 0 auto; transition: transform .16s var(--ease); }
.deal:hover svg { transform: translateX(2px); }
.deal--on { color: var(--ok); cursor: default; }
.tiers__was { color: var(--ink-faint); margin-right: 6px; text-decoration-color: var(--promo); }

/* ---------- la vista "Novità e offerte" nel menu e nelle piastrelle ---------- */
.navmenu__spark { width: 14px; height: 14px; color: var(--gold); flex: 0 0 auto; }
.navmenu__link--picks { font-weight: 600; }
.tile__media--picks {
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold);
}
.tile__spark { width: 20px; height: 20px; }
.tile__btn--picks.is-on .tile__media--picks { background: rgba(255,255,255,.14); color: var(--gold-soft); }

@media (max-width: 900px) {
  .picks__nav { display: none; }
  /* nella barra fissa in fondo alla scheda, prezzo al kg e listino barrato
     stanno sulla stessa riga: la barra deve restare bassa */
  .sheet__action .price__unit, .sheet__action .price__was { display: inline; }
  .sheet__action .price__was { margin-left: 8px; }
  .sheet__action .price__was:empty { display: none; }
}
@media (max-width: 640px) {
  .picks__head { flex-direction: column; align-items: stretch; }
  .picks__tools { justify-content: flex-start; }
  .pick { flex-basis: 224px; }
  .trust__in { gap: 4px 18px; font-size: 12.5px; padding-block: 10px; }
}

/* =============================================================
   16 settembre 2026: banner, lingue, barra scorrevole, tendina categorie,
   pagine, garanzie sulla scheda, campioni e quantità personalizzata,
   popup contatti, piè di pagina.
   ============================================================= */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- banner in cima: 3:1, largo quanto la pagina ---------- */
.adbanner { background: var(--forest-ink); }
.adbanner[hidden] { display: none; }
.adbanner__in { max-width: 1920px; margin: 0 auto; }
.adbanner a, .adbanner picture { display: block; }
.adbanner img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover;
  max-height: 46vh;
}

/* ---------- lingua a tendina ---------- */
.langs {
  display: inline-flex; align-items: center; gap: 6px; position: relative;
  border: 1px solid var(--line-2); border-radius: 999px; padding: 0 8px 0 10px;
  color: var(--ink-soft); background: var(--paper-2);
}
.langs select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); padding: 7px 18px 7px 2px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8b93' d='M6 8.5 1.8 4.3l.9-.9L6 6.7l3.3-3.3.9.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; background-size: 10px;
}
.langs select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* ---------- pulsanti dorati, spessi ---------- */
.btn--gold { --btn-bg: var(--gold-soft); --btn-fg: #241c05; --btn-bd: var(--gold-soft); font-weight: 700; }
.btn--gold:hover { --btn-bg: #f2d57a; }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--gold-soft); --btn-bd: var(--gold-soft); }
.btn--outline:hover { --btn-bg: rgba(232,200,106,.14); }
.hero__actions .btn--lg { padding: 16px 30px; font-size: 16.5px; border-width: 2px; }
.listbar__go { border-width: 2px; padding: 9px 18px; font-weight: 700; flex: 0 0 auto; }
.toolbar__search { display: flex; align-items: center; gap: 8px; }
.toolbar__search input { flex: 1 1 auto; min-width: 0; }

/* ---------- barra scorrevole ---------- */
.ticker {
  overflow: hidden; white-space: nowrap;
  background: linear-gradient(90deg, var(--forest) 0%, #1c6a4e 45%, var(--gold) 100%);
  color: #fff; border-bottom: 1px solid var(--forest-2);
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
}
.ticker__track { display: inline-flex; align-items: center; gap: 0; padding-block: 10px; will-change: transform; animation: ticker 52s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display: inline-flex; align-items: center; gap: 12px; padding: 0 22px; }
.ticker__item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-soft); flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(255,255,255,.14); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker { white-space: normal; }
  .ticker__track { animation: none; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
  .ticker__copy { display: none; }
}

/* ---------- tendina categoria + sottocategoria ---------- */
.catpick { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 18px; align-items: flex-end; }
.catpick__field { display: grid; gap: 5px; min-width: 200px; flex: 1 1 220px; max-width: 340px; }
.catpick__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 650; }
.catpick__select {
  appearance: none; -webkit-appearance: none; width: 100%;
  padding: 11px 36px 11px 13px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--paper-2);
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%237d8b93' d='M6 8.5 1.8 4.3l.9-.9L6 6.7l3.3-3.3.9.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
.catpick__select:hover { border-color: var(--ink-faint); }
.catpick__select:disabled { opacity: .55; cursor: default; }

/* ---------- pagine ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 28px; }
.pager[hidden] { display: none; }
.pager__btn {
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px;
  border: 1.5px solid var(--line-2); background: var(--paper-2); color: var(--ink-soft);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums;
}
.pager__btn:hover { border-color: var(--ink-faint); color: var(--ink); }
.pager__btn.is-on { background: var(--forest); border-color: var(--forest); color: #fff; }
.pager__btn:disabled { opacity: .4; cursor: default; }
.pager__gap { color: var(--ink-faint); padding: 0 4px; }
.pager__info { width: 100%; text-align: center; font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }

/* ---------- garanzie sulla scheda ---------- */
.trustline { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 2px 0 4px; }
.trustline__item {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--forest);
  background: color-mix(in srgb, var(--forest) 8%, #fff); border: 1px solid color-mix(in srgb, var(--forest) 22%, #fff);
  border-radius: 999px; padding: 3px 9px 3px 6px;
}
.trustline__item svg { width: 14px; height: 14px; flex: 0 0 auto; }
.trustline--sheet { margin: 6px 0 12px; }
.trustline--sheet .trustline__item { font-size: 13px; padding: 5px 11px 5px 8px; }
.trustline--sheet .trustline__item svg { width: 16px; height: 16px; }

/* ---------- campioni e quantità personalizzata ---------- */
.card__actions { display: grid; gap: 7px; }
.card__actions .btn--wa { width: 100%; }
.card__actions .btn--sample { width: 100%; --btn-fg: var(--forest); --btn-bd: color-mix(in srgb, var(--forest) 45%, #fff); font-weight: 650; }
.card__actions .btn--sample:hover { --btn-bg: color-mix(in srgb, var(--forest) 8%, #fff); }
.card__actions .card__more { justify-self: center; }
/* testata del box quantità: etichetta e valore sulla prima riga, il bottone
   "quantità personalizzata" su una riga tutta sua sopra il cursore, così nelle
   card strette niente va a capo o si sovrappone. Nel modale (largo) sta in mezzo. */
.qtybox__head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 10px; row-gap: 5px; }
.qtybox__qty { white-space: nowrap; }
.qtybox__custom {
  grid-column: 1 / -1; justify-self: start; order: 1;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 12px; font-weight: 650; color: var(--forest); text-decoration: underline; text-underline-offset: 3px;
}
.qtybox__custom:hover { color: var(--forest-ink); }
.qtybox--wide .qtybox__head { grid-template-columns: auto auto 1fr; }
.qtybox--wide .qtybox__custom { grid-column: auto; order: 0; }
.qtybox--wide .qtybox__qty { justify-self: end; }
.custom { display: grid; gap: 8px; padding: 10px 12px; margin-top: 8px; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--paper-2); }
.custom[hidden] { display: none; }
.custom__title { font-size: 13px; font-weight: 650; }
.custom__hint { font-size: 12px; color: var(--ink-soft); }
.custom__row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.custom__row input { flex: 1 1 96px; min-width: 0; width: auto; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; font-size: 14px; }
.custom__row .btn { white-space: nowrap; flex: 1 1 auto; justify-content: center; }
.custom__unit { font-size: 13px; color: var(--ink-soft); }

/* ---------- popup contatti ---------- */
/* il nome è leadpop e non lead: .lead è già il paragrafo introduttivo delle sezioni */
.leadpop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; }
.leadpop[hidden] { display: none; }
.lead__scrim { position: absolute; inset: 0; background: rgba(6, 22, 16, .62); backdrop-filter: blur(3px); }
.lead__panel {
  position: relative; width: min(920px, 100%); max-height: min(92vh, 760px); overflow: auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--paper-2); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.35);
  animation: lead-in .32s ease;
}
@keyframes lead-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.lead__close {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.85); color: var(--ink); font-size: 24px; line-height: 1;
}
.lead__side {
  padding: 34px 30px 30px; color: #eef2ef; position: relative; overflow: hidden;
  background:
    radial-gradient(520px 320px at 20% 0%, rgba(232,200,106,.22), transparent 60%),
    radial-gradient(600px 400px at 100% 100%, rgba(27,84,66,.6), transparent 62%),
    var(--forest-ink);
}
.lead__leaf { position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px; color: rgba(255,255,255,.07); }
.lead__brand { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); font-weight: 650; }
.lead__title { margin-top: 14px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; color: #fff; }
.lead__text { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: #b9c9c0; }
.lead__points { margin-top: 18px; display: grid; gap: 8px; font-size: 13.5px; color: #dfe7e2; }
.lead__points li { display: flex; gap: 9px; align-items: flex-start; }
.lead__points li::before { content: "✓"; color: var(--gold-soft); font-weight: 700; flex: 0 0 auto; }
.lead__form { padding: 34px 30px 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; align-content: start; }
.lead__field { display: grid; gap: 5px; }
.lead__field--wide { grid-column: 1 / -1; }
.lead__label { font-size: 12px; font-weight: 650; color: var(--ink-soft); }
.lead__label em { color: var(--gold); font-style: normal; }
.lead__form input, .lead__form select {
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff;
  font: inherit; font-size: 14.5px; color: var(--ink);
}
.lead__form input:focus, .lead__form select:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.lead__field.is-bad input, .lead__field.is-bad select { border-color: #c0392b; }
.lead__err { font-size: 11.5px; color: #c0392b; min-height: 0; }
.lead__consent { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.lead__consent input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }
.lead__actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.lead__actions .btn--gold { padding: 13px 26px; font-size: 15px; }
.lead__later { background: none; border: 0; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--ink-faint); text-decoration: underline; text-underline-offset: 3px; }
.lead__later:hover { color: var(--ink); }
.lead__done { grid-column: 1 / -1; text-align: center; padding: 30px 10px; }
.lead__done h3 { font-size: 24px; }
.lead__done p { margin-top: 10px; color: var(--ink-soft); }
.lead__fail { grid-column: 1 / -1; font-size: 13px; color: #c0392b; }
@media (max-width: 760px) {
  .leadpop { padding: 10px; align-items: end; }
  .lead__panel { grid-template-columns: 1fr; max-height: 94vh; border-radius: 16px; }
  .lead__side { padding: 26px 22px 20px; }
  .lead__points { display: none; }
  .lead__form { padding: 20px 18px 18px; gap: 10px; }
}

/* ---------- piè di pagina ---------- */
.site-foot__grid { display: grid; grid-template-columns: 1.1fr .8fr 1.6fr; gap: 34px; }
.site-foot__col--wide { min-width: 0; }
.site-foot__tag { font-size: 12.5px; color: #8ba497; margin-top: -8px; }
.site-foot__company { font-style: normal; margin-top: 16px; font-size: 13.5px; line-height: 1.7; color: #c3d0c9; }
.site-foot__company a { color: #e4eae6; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
.site-foot__company a:hover { border-bottom-color: var(--gold-soft); }
.site-foot__company .muted { color: #8ba497; }
.site-foot__h { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); font-weight: 650; margin-bottom: 12px; }
.site-foot__links { display: grid; gap: 8px; font-size: 14px; }
.site-foot__links a { color: #dfe7e2; text-decoration: none; }
.site-foot__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-foot__bottom { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-foot__bottom .fine { margin-top: 0; }
@media (max-width: 860px) {
  .site-foot__grid { grid-template-columns: 1fr 1fr; }
  .site-foot__col--wide { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-foot__grid { grid-template-columns: 1fr; gap: 24px; }
  .hero__actions .btn--lg { width: 100%; }
  .catpick__field { max-width: none; }
}

/* ---------- Signal e Telegram: la coppia sopra il tasto WhatsApp ----------
   Due pulsanti gemelli, stessa forma e stesso peso, in tinta tenue: sono la
   seconda scelta, il verde di WhatsApp resta il tasto principale. Passandoci
   sopra si accendono nel colore del loro servizio. */
.btn-coppia {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  width: 100%; margin-bottom: 8px;
}
.btn-coppia .btn {
  width: 100%; min-width: 0; justify-content: center; gap: 6px;
  padding: 9px 8px; font-size: 13.5px; font-weight: 650; border-radius: 10px;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, color .14s ease, border-color .14s ease;
}
.btn-coppia .btn span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.btn-coppia .btn svg { flex: 0 0 auto; }
.btn--sg { --btn-bg: #eff4fe; --btn-fg: #2a4fb8; --btn-bd: #cfdcfb; }
.btn--sg:hover { --btn-bg: #3a76f0; --btn-fg: #fff; --btn-bd: #3a76f0; }
.btn--tg { --btn-bg: #ecf7fd; --btn-fg: #1a7ba8; --btn-bd: #c6e6f7; }
.btn--tg:hover { --btn-bg: #2aabee; --btn-fg: #fff; --btn-bd: #2aabee; }

/* nella scheda grande i due pulsanti hanno più spazio: stessa forma, più respiro */
.sheet .btn-coppia, .modal .btn-coppia { gap: 10px; margin-bottom: 10px; }
.sheet .btn-coppia .btn, .modal .btn-coppia .btn { padding: 11px 10px; font-size: 14px; }

/* ---------- il tasto WhatsApp: un alone che respira ----------
   L'alone è un'ombra verde sotto al tasto, che si allarga e si stringe piano:
   invita a premere senza rubare l'occhio al resto della scheda. Un alone
   disegnato dietro (pseudo-elemento) non si vedrebbe: finirebbe sotto lo
   sfondo bianco della scheda. Chi ha chiesto meno animazioni lo vede fermo. */
.btn--wa {
  position: relative; overflow: hidden;
  box-shadow: 0 2px 12px rgba(37,211,102,.30);
  animation: wa-alone 4.6s ease-in-out infinite;
}
/* la lucina che ogni tanto attraversa il tasto: una striscia chiara inclinata
   che entra da sinistra, passa e se ne va. Si muove con transform, che il
   browser fa scorrere sulla scheda grafica, e resta dentro al tasto grazie a
   overflow: hidden. */
.btn--wa::before {
  content: ''; position: absolute; top: -60%; left: 0; width: 34%; height: 220%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.78) 45%, rgba(255,255,255,.9) 52%, rgba(255,255,255,0));
  transform: translateX(-180%) skewX(-18deg);
  animation: wa-luce 4.6s ease-in-out infinite;
  pointer-events: none;
}
.btn--wa:hover { box-shadow: 0 8px 26px rgba(37,211,102,.60); }
.btn--wa:active { box-shadow: 0 2px 10px rgba(37,211,102,.45); }
@keyframes wa-alone {
  0%, 100% { box-shadow: 0 2px 10px rgba(37,211,102,.26); }
  45%      { box-shadow: 0 5px 24px rgba(37,211,102,.60); }
}
@keyframes wa-luce {
  0%, 52%   { transform: translateX(-180%) skewX(-18deg); }
  80%, 100% { transform: translateX(430%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--wa { animation: none; box-shadow: 0 3px 16px rgba(37,211,102,.40); }
  .btn--wa::before { display: none; }
}
/* nella fila delle novità i tasti sono piccoli: niente lucina, alone discreto */
.pick__cta.btn--wa { animation: none; box-shadow: 0 2px 10px rgba(37,211,102,.28); }
.pick__cta.btn--wa::before { display: none; }

@media (max-width: 420px) {
  .btn-coppia { gap: 6px; }
  .btn-coppia .btn { font-size: 12.5px; padding: 9px 6px; gap: 5px; }
}

/* =============================================================
   MARCHIO — European BUDS Market e la mascotte Buds Buddy
   Solo aspetto: nessuna di queste regole cambia il funzionamento del
   catalogo. Le immagini stanno in media/brand/ e le prepara, dagli
   originali in build/mascotte/, tools/build-mascotte.py.
   ============================================================= */

/* il verde della parola BUDS nel logo, preso dal file originale */
:root { --buds: #437a16; }

/* il nome nell'intestazione: BUDS in verde, come nel logo */
.brand__buds { color: var(--buds); font-weight: 800; }

/* Nell'intestazione va il logo INTERO: ritagliarne il solo tondo vorrebbe dire
   tagliarlo in mezzo alla scritta, che comincia subito sotto. Non è quadrato,
   quindi qui la larghezza è libera e comanda l'altezza. Il nome resta scritto
   accanto, perché dentro il logo, a questa misura, non si legge. */
.brand__mark { width: auto; height: 52px; }
@media (max-width: 620px) { .brand__mark { height: 42px; } }

/* ---------- copertina ----------
   Buds Buddy sta di fianco al titolo da 900px in su, dove la colonna
   di destra è libera. Sotto, resta un segno piccolo sopra
   l'occhiello: la copertina non deve mangiarsi la prima schermata. */
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__buddy {
  width: 96px; height: auto; margin-bottom: 10px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .34));
}
@media (min-width: 900px) {
  .hero__in { grid-template-columns: minmax(0, 1fr) auto; column-gap: 34px; align-items: end; }
  .hero__copy { grid-column: 1; grid-row: 1; min-width: 0; }
  .hero__buddy {
    grid-column: 2; grid-row: 1; align-self: end;
    width: min(300px, 25vw); margin: 0 0 -8px;
  }
}
@media (max-width: 640px) {
  /* lo spazio che prende la mascotte lo restituisce il margine sopra */
  .hero { padding-top: 26px; }
  .hero__buddy { width: 84px; }
}

/* ---------- fascia "Parliamone" ---------- */
.band__buddy {
  height: clamp(124px, 17vw, 190px); width: auto;
  filter: drop-shadow(0 14px 22px rgba(16, 22, 26, .20));
}

/* ---------- piè di pagina ---------- */
.site-foot__logo { width: 142px; height: auto; margin-bottom: 14px; }

/* ---------- popup contatti ----------
   Da 760px in giù il pannello è già stretto: lì la mascotte sparisce. */
.lead__buddy {
  position: absolute; right: -12px; bottom: -8px; width: 128px; height: auto;
  pointer-events: none; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .34));
}
.lead__points { padding-right: 104px; }
@media (max-width: 760px) {
  .lead__buddy { display: none; }
  .lead__points { padding-right: 0; }
}

/* ---------- catalogo senza risultati ---------- */
.empty__buddy { width: 108px; height: auto; margin: 0 auto 14px; }

/* ---------- porta d'ingresso operatori ---------- */
.gate__logo { width: min(200px, 48vw); height: auto; margin: 0 auto 22px; }