/* Cenesys — cenesys.ch
   Un solo file di stile, nessuna dipendenza esterna. */

@font-face {
  font-family: "Saira";
  src: url("../fonts/saira-wght.woff2") format("woff2-variations"),
       url("../fonts/saira-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Grigi neutri, come il logo. */
  --stone-1: #c8c8c8;
  --stone-2: #a2a2a4;
  --stone-3: #898989;
  --stone-4: #6d6d6d;
  --snow: #ffffff;
  --ink: #1d1f21;
  --glass: rgba(24, 26, 28, .5);
  --glass-edge: rgba(255, 255, 255, .16);

  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  background: var(--ink) url("../img/bg/rock-02-s.webp") center / cover no-repeat;
  color: var(--snow);
  font-family: "Saira", system-ui, sans-serif;
  font-weight: 350;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.js body { background-image: none; }

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

a { color: inherit; }
:focus-visible { outline: 2px solid var(--snow); outline-offset: 4px; border-radius: 2px; }

/* ---------- La parete ---------- */

.wall {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--ink);
}

.wall-layer {
  position: absolute;
  inset: -2%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s var(--ease), filter 1.6s var(--ease);
  will-change: opacity, transform;
}
.wall-layer.is-on { opacity: 1; }
.wall-layer.is-blur { filter: blur(24px) saturate(1.1); }
.wall-layer.is-on:not(.is-blur) { animation: drift 48s ease-out forwards; }

@keyframes drift {
  from { transform: scale(1.06); }
  to   { transform: scale(1.0); }
}

/* Il velo: tiene leggibile il testo su qualsiasi roccia, chiara o scura. */
.wall-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 45% at 50% 42%, rgba(0,0,0,.26), rgba(0,0,0,0) 100%),
    radial-gradient(120% 80% at 50% 40%, rgba(0,0,0,.1), rgba(0,0,0,.42)),
    linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(0,0,0,.62) 100%);
  transition: background .8s var(--ease);
}
/* Foto chiara dietro al logo: la testata non si scurisce, altrimenti il logo navy perde contrasto. */
.tone-light .wall-shade {
  background:
    radial-gradient(70% 45% at 50% 42%, rgba(0,0,0,.26), rgba(0,0,0,0) 100%),
    radial-gradient(120% 80% at 50% 40%, rgba(0,0,0,0), rgba(0,0,0,.3)),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.62) 100%);
}

/* ---------- Testata ---------- */

.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: calc(var(--gutter) * .75) var(--gutter) 0;
}

/* Il logo e, sotto la scritta CENESYS, il payoff: testo vero, tradotto, allineato ai bordi della
   scritta come nel logo originale. Le misure sono frazioni della larghezza del logo (cqw):
   il payoff scala insieme al disegno. */
.brand {
  position: relative;
  display: block;
  width: clamp(300px, 33vw, 560px);
  container-type: inline-size;
  text-decoration: none;
  filter: drop-shadow(0 1px 12px rgba(0,0,0,.35));
}
.logo { display: block; width: 100%; height: auto; transition: opacity .8s var(--ease); }
/* Due versioni del logo, una sopra l'altra: si vede quella che contrasta con la foto dietro
   (classe tone-light su <html>, decisa da js/site.js in base alla parete). */
.logo-on-light { position: absolute; inset: 0; opacity: 0; }
.tone-light .logo-on-light { opacity: 1; }
.tone-light .logo-on-dark { opacity: 0; }
.tone-light .brand { filter: none; }

.payoff {
  position: absolute;
  left: 34.7%;
  right: .75%;
  top: 20.9cqw;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.55;
}
.pl { display: block; width: max-content; }
.pl { transition: color .8s var(--ease); }
.pl1 { font-size: 2.55cqw; font-weight: 500; color: #eceef0; }
.pl2 { font-size: 2.55cqw; font-weight: 400; color: #eceef0; }
.pl .sep { color: #8e9297; font-weight: 300; margin: 0 .6em; transition: color .8s var(--ease); }
.pl .gap { margin: 0 .6em; }
.tone-light .pl1 { color: #23272c; }
.tone-light .pl2 { color: #23272c; }
.tone-light .pl .sep { color: #454a51; }

/* Selettore della lingua */
.langs {
  display: inline-flex;
  flex: none;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--glass-edge);
  border-radius: 8px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.langs button {
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: rgba(255,255,255,.78);
  font: 500 .8rem/1 "Saira", system-ui, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
}
.langs button:hover { color: var(--snow); background: rgba(255,255,255,.12); }
.langs button[aria-pressed="true"] { background: rgba(255,255,255,.9); color: var(--ink); }

/* Negli angoli: a sinistra il pulsante del menu (il menu si apre da quel lato), a destra le
   lingue. Il logo resta dov'e', staccato dal bordo. */
.top { position: relative; }
.top-left { display: flex; align-items: flex-start; min-width: 0; }
.top-right { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 8px; }
.menu-btn { position: absolute; top: 12px; left: 12px; z-index: 21; }

.menu-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--glass-edge);
  border-radius: 8px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--snow);
  cursor: pointer;
}
.menu-btn:hover { background: rgba(255,255,255,.14); }
.menu-btn svg, .menu-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* Menu a comparsa: lo stesso vetro delle card, entra da sinistra.
   Apertura: corsa rapida che frena morbida (curva "expo out"), le voci arrivano in cascata.
   Chiusura: piu' breve e in accelerazione, esce senza trascinarsi. */
.menu-veil {
  position: fixed;
  inset: 0;
  z-index: 19;
  background: rgba(0,0,0,.3);
  opacity: 0;
  transition: opacity .2s cubic-bezier(.4,0,1,1);
}
.menu {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  bottom: 12px;
  /* Largo quanto lo spazio libero a sinistra delle card dei prodotti (larghe al massimo 1240px):
     aperto non le copre. Mai meno di 220px, mai piu' di 340px. */
  width: clamp(220px, calc((100vw - 1240px) / 2 - 24px), 340px);
  display: flex;
  flex-direction: column;
  padding: 64px 0 24px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  opacity: 0;
  transform: translateX(-36px) scale(.98);
  transform-origin: left center;
  transition: transform .2s cubic-bezier(.4,0,1,1), opacity .18s cubic-bezier(.4,0,1,1);
  will-change: transform, opacity;
}
.menu-open .menu {
  opacity: 1;
  transform: none;
  transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .22s ease-out;
}
.menu[hidden], .menu-veil[hidden] { display: none; }
.menu-open .menu-veil { opacity: 1; transition: opacity .3s ease-out; }

.menu li, .menu .menu-langs {
  opacity: 0;
  transform: translateX(-14px);
  transition: transform .15s ease-in, opacity .12s ease-in;
}
.menu-open .menu li, .menu-open .menu .menu-langs {
  opacity: 1;
  transform: none;
  transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .3s ease-out;
}
.menu-open .menu li:nth-child(1) { transition-delay: .06s; }
.menu-open .menu li:nth-child(2) { transition-delay: .10s; }
.menu-open .menu li:nth-child(3) { transition-delay: .14s; }
.menu-open .menu li:nth-child(4) { transition-delay: .18s; }
.menu-open .menu .menu-langs { transition-delay: .22s; }

.menu-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--snow);
  cursor: pointer;
}
.menu-close:hover { background: rgba(255,255,255,.12); }

.menu ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--glass-edge); }
.menu li { border-bottom: 1px solid var(--glass-edge); }
.menu a {
  display: block;
  padding: 14px 22px;
  color: var(--snow);
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.25;
}
.menu a:hover { background: rgba(255,255,255,.07); }
.menu a:focus-visible { outline-offset: -4px; }
/* Le lingue nel menu servono solo sul telefono, dove in testata non c'e' posto. */
.menu-langs { display: none; align-self: flex-start; margin: 24px 22px 0; }

/* ---------- Scena centrale ---------- */

.stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 8vh, 96px);
  padding: clamp(32px, 6vh, 72px) var(--gutter);
}

.claim {
  margin: 0;
  max-width: 34em;
  font-size: clamp(1.1rem, .95rem + 1.3vw, 2.35rem);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -.005em;
  text-align: justify;
  text-align-last: center;
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: pretty;
  text-shadow: 0 1px 2px rgba(0,0,0,.25), 0 2px 28px rgba(0,0,0,.45);
}

/* ---------- Prodotti ---------- */

.products { width: min(100%, 1240px); }

.products ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--glass-edge);
  border-radius: 10px;
  overflow: hidden;
}

.products li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.2vw, 30px);
}
.products li + li { border-left: 1px solid var(--glass-edge); }

.products h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 560;
  letter-spacing: .01em;
  line-height: 1.2;
}

.products p {
  margin: 0;
  font-size: .98rem;
  line-height: 1.45;
  color: rgba(255,255,255,.8);
}

/* Card con una pagina propria: tutta la card e' il link. */
.products li { position: relative; transition: background-color .25s; }
.card-link { text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:focus-visible { outline: none; }
.products li:has(.card-link:focus-visible) { outline: 2px solid var(--snow); outline-offset: -4px; border-radius: 8px; }
.has-page:hover { background: rgba(255,255,255,.07); }
.card-go {
  position: absolute;
  top: clamp(20px, 2.3vw, 30px);
  right: clamp(16px, 1.8vw, 24px);
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgba(255,255,255,.6);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s var(--ease), stroke .25s;
}
.has-page:hover .card-go { transform: translateX(3px); stroke: var(--snow); }

/* ---------- Pagina prodotto ---------- */

/* Testo giustificato: paragrafi a blocco, margine destro dritto come quello sinistro. */
.sheet .lead, .sheet p, .features li {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(24px, 5vh, 56px) var(--gutter) clamp(40px, 8vh, 88px);
}

.sheet {
  width: min(100%, 46rem);
  padding: clamp(24px, 4vw, 52px) clamp(22px, 4.5vw, 60px) clamp(28px, 4vw, 52px);
  background: rgba(22, 24, 26, .58);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 clamp(20px, 3vh, 32px) -4px;
  font-size: .9rem;
  color: rgba(255,255,255,.72);
  text-decoration: none;
}
.back:hover { color: var(--snow); }
.back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sheet h1 {
  margin: 0;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.75rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.01em;
}

.sheet .lead {
  margin: .6em 0 1.4em;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  font-weight: 300;
  line-height: 1.4;
  color: var(--snow);
}

.sheet p {
  margin: 0 0 1em;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255,255,255,.86);
}

.sheet h2 {
  margin: 1.8em 0 .7em;
  font-size: 1.2rem;
  font-weight: 560;
  letter-spacing: .01em;
}

.features {
  list-style: none;
  margin: 0 0 1.8em;
  padding: 0;
  border-top: 1px solid var(--glass-edge);
}
.features li {
  position: relative;
  padding: .75em 0 .75em 1.6em;
  border-bottom: 1px solid var(--glass-edge);
  font-size: 1.02rem;
  line-height: 1.5;
  color: rgba(255,255,255,.9);
}
.features li::before {
  content: "";
  position: absolute;
  left: .2em;
  top: 1.35em;
  width: .6em;
  height: 1px;
  background: rgba(255,255,255,.7);
}

.sheet .aside {
  margin: 1.6em 0 0;
  padding-top: 1.2em;
  border-top: 1px solid var(--glass-edge);
  font-size: .98rem;
  color: rgba(255,255,255,.72);
}

/* Icona del modulo davanti al nome: il bordo sinistro dell'icona e' allineato al testo sotto,
   il nome si sposta a destra. */
.products h3, .sheet h1 { display: flex; align-items: center; }
.mod-icon { flex: none; fill: currentColor; }
.products .mod-icon { width: 1.15em; height: 1.15em; margin-right: .45em; }
.sheet h1 .mod-icon { width: .72em; height: .72em; margin-right: .28em; }

/* ---------- Piede ---------- */

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 var(--gutter) calc(var(--gutter) * .6 + env(safe-area-inset-bottom));
  font-size: .8rem;
  color: rgba(255,255,255,.72);
}

.credit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
html:not(.js) .credit { display: none; }

.credit-text {
  margin: 0 4px;
  text-align: right;
  min-width: 0;
  line-height: 1.3;
}
.credit-name { display: block; color: var(--snow); font-weight: 500; }
.credit-src {
  display: block;
  text-decoration: none;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 44ch;
}
.credit-src:hover { color: var(--snow); text-decoration: underline; }

.nav {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--snow);
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.nav:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- L'unico momento animato: l'arrivo ---------- */

.js .top-left, .js .top-right, .js .menu-btn, .js .claim, .js .products, .js .sheet, .js .foot { opacity: 0; }

.is-in .top-left { animation: rise 1s var(--ease) .1s forwards; }
.is-in .top-right { animation: rise 1s var(--ease) .2s forwards; }
.is-in .menu-btn  { animation: rise 1s var(--ease) .2s forwards; }
.is-in .claim    { animation: rise 1.2s var(--ease) .45s forwards; }
.is-in .products { animation: rise 1.1s var(--ease) .8s forwards; }
.is-in .sheet    { animation: rise 1.1s var(--ease) .35s forwards; }
.is-in .foot     { animation: rise .9s var(--ease) 1.1s forwards; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Schermi stretti ---------- */

@media (max-width: 1100px) {
  .products { width: min(100%, 760px); }
  .products ul { grid-template-columns: repeat(2, 1fr); }
  .products li:nth-child(3) { border-left: 0; }
  .products li:nth-child(n+3) { border-top: 1px solid var(--glass-edge); }
}

@media (max-width: 620px) {
  .products ul { grid-template-columns: 1fr; }
  .products li + li { border-left: 0; border-top: 1px solid var(--glass-edge); }
  .claim { text-align-last: left; }
}

@media (max-width: 560px) {
  .brand { width: clamp(180px, 52vw, 250px); }
  .top-left { padding: 4px 0 0 44px; }   /* lascia l'angolo al pulsante del menu */
  .payoff { display: none; }
  .top-right .langs { display: none; }
  .menu-langs { display: inline-flex; }
  .langs button { min-width: 30px; height: 26px; padding: 0 5px; font-size: .75rem; }
  .foot { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .credit { justify-content: space-between; }
  .credit-text { text-align: center; }
  .credit-src { white-space: normal; }
  .copy { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .wall-layer { transition: opacity .3s linear; transform: none; }
  .menu, .menu-veil, .menu li, .menu .menu-langs { transition: none !important; transform: none !important; }
  .wall-layer.is-on:not(.is-blur) { animation: none; }
  .js .top-left, .js .top-right, .js .menu-btn, .js .claim, .js .products, .js .sheet, .js .foot { opacity: 1; animation: none !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .products ul, .nav { background: rgba(24, 26, 28, .72); }
}

/* ---------- Versione minimale: niente menu ----------
   Sul telefono le lingue stavano nel menu: qui restano in testata, accanto al logo. */
@media (max-width: 560px) {
  .top-left { padding: 4px 0 0 0; }
  .top-right .langs { display: inline-flex; }
  .brand { width: clamp(150px, 46vw, 230px); }
}

/* Card tutte uguali: larghezza (la fila in parti uguali) e altezza le fissa js/site.js, uguali
   in tutte le lingue, cosi' cambiando lingua le card non si muovono. Cinque in fila, oppure due
   per riga con l'ultima larga quanto la riga, oppure una. Il titolo puo' andare a capo; il testo
   sotto non allarga la card (width:0 + min-width:100%). Sostituiscono le media query di sopra. */
.products { width: 100%; max-width: 100%; }
.products ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.products h3 { white-space: normal; }
.products h3 span { min-width: 0; }
.products p { width: 0; min-width: 100%; }
/* Bordi fra le card, per ogni disposizione (vincono sulle regole delle media query di sopra). */
.products li:nth-child(n) { border-left: 0; border-top: 0; }
.products.cols-5 li:nth-child(n+2) { border-left: 1px solid var(--glass-edge); }
.products.cols-2 li:nth-child(even) { border-left: 1px solid var(--glass-edge); }
.products.cols-2 li:nth-child(n+3) { border-top: 1px solid var(--glass-edge); }
.products.cols-2 li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.products.cols-1 ul { grid-template-columns: 1fr; }
.products.cols-1 li:nth-child(n+2) { border-top: 1px solid var(--glass-edge); }

/* Riquadro velato dietro alla frase: larga quanto la fila delle card sotto (la larghezza la
   mette js/site.js), un velo leggero e un po' di sfocatura, perche' il testo bianco si legga
   anche sulle foto chiare. */
.claim-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  max-width: 100%;
  padding: clamp(16px, 2.4vw, 30px) clamp(18px, 2.6vw, 36px);
  background: rgba(18, 20, 22, .16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--glass-edge);
  border-radius: 10px;
}
.claim-card { width: min(100%, 1240px); container-type: inline-size; }
/* Dimensione del testo legata alla larghezza del riquadro (cqw), non della finestra: con il
   riquadro stretto (card su due colonne, telefono) restano abbastanza parole per riga perche'
   la giustificazione non apra buchi. */
.claim-card .claim { margin: 0 auto; font-size: clamp(1.05rem, 3cqw, 2.35rem); }
.js .claim-card { opacity: 0; }
.is-in .claim-card { animation: rise 1.2s var(--ease) .45s forwards; }
.js .claim-card .claim { opacity: 1; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .js .claim-card { opacity: 1; animation: none !important; }
}

/* Contatto, sotto la frase: icona della busta e invito, apre il programma di posta. */
.contact {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .5em 1.1em .5em .9em;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--snow);
  font-size: clamp(.95rem, 1.5cqw, 1.15rem);
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: background-color .2s, border-color .2s;
}
.contact svg { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.contact:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.6); }
.contact:focus-visible { outline: 2px solid var(--snow); outline-offset: 3px; }

/* Riquadro delle lingue piu' compatto e piu' vicino all'angolo (meta' della distanza dal bordo). */
.top-right { top: 6px; right: 6px; }
.langs { padding: 2px; gap: 1px; border-radius: 7px; }
.langs button { min-width: 30px; height: 24px; padding: 0 6px; font-size: .72rem; border-radius: 5px; }
@media (max-width: 560px) {
  .langs button { min-width: 27px; height: 22px; padding: 0 4px; font-size: .68rem; }
}
.products h3 .nowrap { white-space: nowrap; }