/* =====================================================================
   EXTRAsync — foglio di stile unico per tutto il sito
   ---------------------------------------------------------------------
   Come nel sito Xara, la pagina è disegnata su una tela di 1920 pixel
   (desktop) e di 480 pixel (mobile, sotto i 1200 pixel di finestra) e
   viene scalata in proporzione alla larghezza della finestra.
   Tutte le misure sono in "pixel di progetto": calc(N * var(--u)).
   Esempio: il testo è Roboto 16 su desktop e 14 su mobile, come in Xara.

   Impaginazione (non serve toccarla per aggiornare i contenuti):
   .blk / .col   blocchi posizionati con variabili:
                 --mt  spazio sopra (pixel di progetto)   --ml  rientro sinistro (%)
                 --w   larghezza (%)                      --wpx larghezza fissa (icone)
   .row          riga di colonne affiancate (su mobile si impilano)
   .panel        riquadro grigio      --pt / --pb spazio interno sopra / sotto
   .txt          blocco di testo  (Roboto 16 #212222 di base)
   .ov           composizione sovrapposta (testo/immagini sopra un'immagine)
   ===================================================================== */

/* ---------- FONT (stessi file usati dal sito Xara) ---------- */
@font-face { font-family: "Roboto"; src: local("Roboto"), local("Roboto-Regular"), url("../fonts/roboto-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: local("Roboto Italic"), local("Roboto-Italic"), url("../fonts/roboto-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"), url("../fonts/roboto-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: local("IBM Plex Mono"), local("IBMPlexMono"), url("../fonts/ibmplexmono-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono Medium"; src: local("IBM Plex Mono Medium"), local("IBMPlexMono-Medium"), url("../fonts/ibmplexmono-medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Open Sans"; src: local("Open Sans"), local("OpenSans-Regular"), url("../fonts/opensans-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sans Semibold"; src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url("../fonts/opensans-semibold.woff") format("woff"); font-weight: 600; font-display: swap; }

/* ---------- COLORI E SCALA ---------- */
:root {
  --giallo:     #FAF19C;   /* riquadro logo */
  --grigio-nav: #BABABA;   /* barra menu */
  --grigio-box: #E9EBED;   /* riquadri grigi */
  --testo:      #212222;
  --sb: 0px;               /* larghezza barra di scorrimento (impostata dallo script) */
  /* 1 pixel di progetto: finestra / 1920 (massimo 1.5 come in Xara) */
  --u: min(calc((100vw - var(--sb)) / 1920), 1.5px);
}

* { box-sizing: border-box; --mt: 0; --ml: 0%; --w: auto; --wpx: 0; --pt: 0; --pb: 0; --h: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background: #fff;
  color: var(--testo);
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: calc(16 * var(--u));
  line-height: 1.2;
  font-variant-ligatures: none;   /* come nel sito originale */
  font-kerning: normal;
}
img, video { display: block; max-width: 100%; height: auto; }
img { width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
a:has(img):hover { text-decoration: none; }

.wrap { width: calc(1920 * var(--u)); max-width: 100%; margin: 0 auto; padding: 0 calc(26 * var(--u)); }

/* ---------- HEADER (riquadro giallo 315 x 98.5, barra grigia 1520.5 x 98.5) ---------- */
.site-header { padding-top: calc(16 * var(--u)); background: #fff; position: relative; z-index: 20; }
.header-row { display: flex; justify-content: space-between; height: calc(98.5 * var(--u)); }
.logo-box { flex: none; width: calc(315 * var(--u)); height: calc(98.5 * var(--u)); background: var(--giallo); display: flex; align-items: center; justify-content: center; }
.logo-box img { width: calc(172 * var(--u)); margin-left: calc(-11 * var(--u)); }
.nav-bar { flex: none; width: calc(1520.5 * var(--u)); height: calc(98.5 * var(--u)); background: var(--grigio-nav); display: flex; align-items: center; justify-content: flex-end; padding: 0 calc(27 * var(--u)); position: relative; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: calc(20 * var(--u)); }
.main-nav a { font-size: calc(16 * var(--u)); color: var(--testo); white-space: nowrap; }
.menu-toggle { display: none; }

/* ---------- BLOCCHI DI IMPAGINAZIONE ---------- */
.blk { margin-top: calc(var(--mt) * var(--u)); margin-left: var(--ml); width: var(--w); display: flow-root; }
.blk.fix { width: calc(var(--wpx) * var(--u)); max-width: 100%; }
.blk.fix.center { margin-left: auto; margin-right: auto; }
.blk.fix.right { margin-left: auto; }
.row { display: flex; align-items: stretch; margin-top: calc(var(--mt) * var(--u)); }
.col { margin-left: var(--ml); margin-top: calc(var(--mt) * var(--u)); flex: 0 1 var(--w); min-width: 0; display: flow-root; }
.col.fix { flex: none; width: calc(var(--wpx) * var(--u)); }
.col > .panel:only-child { min-height: 100%; }
.nw { white-space: nowrap; }
.panel { display: flow-root; background: var(--grigio-box); padding: calc(var(--pt) * var(--u)) 0 calc(var(--pb) * var(--u)); }
.panel.empty { height: calc(var(--h) * var(--u)); }
a.panel { color: inherit; }
a.panel:hover { text-decoration: none; }
.shape { width: 100%; }
.video { width: 100%; background: #000; }
.video iframe { display: block; width: 100%; height: 100%; border: 0; }
video { width: 100%; height: auto; background: #000; }

/* composizioni sovrapposte (scalano con l'immagine) */
.ov { position: relative; width: 100%; container-type: inline-size; overflow: hidden; }
.ov .ab { position: absolute; margin: 0; }
.ov img.ab { max-width: none; }
.ov .otx { white-space: pre; }
.ov .otx p { margin: 0; }
.ov form { margin: 0; }

.ov-m { display: none; }

/* ---------- TESTO ---------- */
.txt { font-size: calc(16 * var(--u)); line-height: 1.2; overflow-wrap: break-word; }
.txt p { margin: 0; }
.txt > :is(p, ul) + :is(p, ul) { margin-top: 1lh; }
.txt[style*="--pg"] > :is(p, ul) + :is(p, ul) { margin-top: calc(var(--pg) * var(--u)); }
.txt > [style*="--pmt"] { margin-top: calc(var(--pmt) * var(--u)) !important; }
.txt a { color: inherit; }
.txt a:hover { text-decoration: underline; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }
.spaced { letter-spacing: .25em; word-spacing: .25em; }
.ff-plex .spaced, .ff-plex-m .spaced { letter-spacing: .6em; word-spacing: .6em; }
.ff-arial .spaced { letter-spacing: .28em; word-spacing: .28em; }
ul.dots { list-style: none; margin: 0; padding: 0; }
ul.dots li { position: relative; padding-left: 1.6em; }
ul.dots.gap li + li { margin-top: 1lh; }
.txt[style*="--pg"] ul.dots.gap li + li { margin-top: calc(var(--pg) * var(--u)); }
ul.dots li::before { content: "\2022"; position: absolute; left: 0; }

/* famiglie */
.ff-roboto  { font-family: "Roboto", Arial, sans-serif; }
.ff-arial   { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; }
.ff-plex    { font-family: "IBM Plex Mono", monospace; }
.ff-plex-m  { font-family: "IBM Plex Mono Medium", "IBM Plex Mono", monospace; font-weight: 500; }
.ff-open    { font-family: "Open Sans", Arial, sans-serif; }
.ff-open-sb { font-family: "Open Sans Semibold", "Open Sans", Arial, sans-serif; font-weight: 600; }
.ff-calibri { font-family: Calibri, Carlito, Arial, sans-serif; }
.ff-verdana { font-family: Verdana, Geneva, sans-serif; }
.ff-times   { font-family: "Times New Roman", Times, serif; }

/* dimensioni */
.fs-11 { font-size: calc(11 * var(--u)); }
.fs-13 { font-size: calc(13 * var(--u)); }
.fs-15-06 { font-size: calc(15.06 * var(--u)); }
.fs-16-16 { font-size: calc(16.16 * var(--u)); }
.fs-16-6 { font-size: calc(16.6 * var(--u)); }
.fs-18-67 { font-size: calc(18.67 * var(--u)); }
.fs-18-71 { font-size: calc(18.71 * var(--u)); }
.fs-22-77 { font-size: calc(22.77 * var(--u)); }
.fs-25-62 { font-size: calc(25.62 * var(--u)); }
.fs-16 { font-size: calc(16 * var(--u)); }

/* colori */
.c-000000 { color: #000000; }
.c-010101 { color: #010101; }
.c-212222 { color: #212222; }
.c-505050 { color: #505050; }
.c-50555d { color: #50555D; }
.c-797979 { color: #797979; }
.c-9a371e { color: #9A371E; }
.c-9b9b9b { color: #9B9B9B; }
.c-bc0000 { color: #BC0000; }
.c-bfbfbf { color: #BFBFBF; }
.c-c4c4c4 { color: #C4C4C4; }
.c-c90000 { color: #C90000; }
.c-d9d9d9 { color: #D9D9D9; }
.c-e03828 { color: #E03828; }
.c-e4dcd5 { color: #E4DCD5; }
.c-ffffff { color: #FFFFFF; }
.c-212222 { color: #212222; }

/* ---------- IMMAGINE DI TESTA DELLA HOME (desktop / mobile) ---------- */
.hero-m { display: none; }
.hero-d img, .hero-m img { display: block; width: 100%; }

/* ---------- NEWS DAL PANNELLO (admin/) ---------- */
.news-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(31 * var(--u)); row-gap: calc(34 * var(--u)); margin-top: calc(34 * var(--u)); }
.ncard { display: flex; flex-direction: column; background: var(--grigio-box); padding: calc(26 * var(--u)) calc(23 * var(--u)) calc(30 * var(--u)) calc(23 * var(--u)); min-height: calc(750 * var(--u)); }
.ncard.full { grid-column: 1 / -1; min-height: 0; padding-left: calc(24 * var(--u)); }
.ncard-head { display: flex; align-items: center; gap: calc(32 * var(--u)); height: calc(44 * var(--u)); font-size: calc(16 * var(--u)); }
.ncard-head img { width: calc(42 * var(--u)); flex: none; }
.ncard-img { margin-top: calc(22 * var(--u)); overflow: hidden; }
.ncard-img a { display: block; }
.ncard-img img { display: block; }
.ncard.half .ncard-img img { aspect-ratio: 874 / 523; object-fit: cover; }
.ncard-txt { margin-top: calc(14 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.75; }
.ncard-txt p { margin: 0; }
.ncard a:hover { text-decoration: underline; }

/* ---------- FOOTER ---------- */
.site-footer { text-align: center; margin-top: calc(var(--mt) * var(--u)); padding-bottom: calc(120 * var(--u)); }
.site-footer img { width: calc(92 * var(--u)); margin: 0 auto calc(16 * var(--u)); }
.site-footer .copy { margin: 0 0 calc(6 * var(--u)); font-size: calc(13.93 * var(--u)); color: #7B8088; }
.site-footer .privacy { margin: 0; font-size: calc(10.53 * var(--u)); color: #858E99; }

/* ---------- SHOP ---------- */
.shop-sep .panel.sep { height: calc(200 * var(--u)); display: flex; align-items: center; justify-content: center; }
.logo-tag { display: inline-flex; align-items: center; justify-content: center; width: calc(86 * var(--u)); height: calc(32 * var(--u)); background: var(--giallo); flex: none; }
.logo-tag img { width: calc(56 * var(--u)); }
.logo-tag.big { width: calc(258 * var(--u)); height: calc(81 * var(--u)); }
.logo-tag.big img { width: calc(141 * var(--u)); }
.sync-logo { position: relative; display: inline-block; width: calc(54 * var(--u)); flex: none; color: #000; }
.sync-logo img { width: 100%; }
.sync-logo span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; font-size: calc(7 * var(--u)); }
.sync-logo.big { width: calc(124 * var(--u)); }
.sync-logo.big span { font-size: calc(16.58 * var(--u)); }
.sync-logo:hover { text-decoration: none; }
.panel.info { display: flex; flex-direction: column; min-height: calc(922 * var(--u)); padding: calc(26 * var(--u)) calc(20 * var(--u)) calc(46 * var(--u)) calc(20 * var(--u)); }
.p-head { display: flex; align-items: flex-start; }
.p-head > a { margin-top: calc(-4 * var(--u)); }
.p-head h2 { margin: 0 0 0 auto; width: calc(100% - calc(116 * var(--u))); font-size: calc(16 * var(--u)); font-weight: 400; line-height: 1.2; padding-top: calc(6 * var(--u)); }
.p-head .logo-tag + h2 { width: calc(100% - calc(119 * var(--u))); }
.p-body { margin: calc(115 * var(--u)) 0 0 calc(119 * var(--u)); max-width: calc(345 * var(--u)); }
.p-body p { margin: 0; line-height: 1.17; }
.p-body p.gap { margin-top: 1.4em; }
.specs { margin: calc(160 * var(--u)) 0 0 calc(133 * var(--u)); border-collapse: collapse; font-size: calc(16 * var(--u)); }
.specs th, .specs td { padding: 0; text-align: left; font-weight: 400; vertical-align: top; line-height: calc(27.8 * var(--u)); }
.specs th { padding-right: calc(8 * var(--u)); white-space: nowrap; width: calc(94 * var(--u)); }
.specs .feat { font-family: Arial, Helvetica, sans-serif; font-size: calc(13.92 * var(--u)); line-height: 1.25; padding: calc(6 * var(--u)) 0 0; }
.specs tr.gap > * { padding-top: calc(27.8 * var(--u)); }
.p-buy { margin-top: auto; padding-left: calc(117 * var(--u)); display: flex; align-items: center; margin-bottom: calc(var(--pbm, 0) * var(--u)); }
.p-buy .bc { width: calc(53 * var(--u)); margin-left: calc(51 * var(--u)); }
.panel.pic { padding: calc(39 * var(--u)) calc(41 * var(--u)); min-height: 100%; }
.buy { display: flex; align-items: center; justify-content: space-between; width: calc(310 * var(--u)); max-width: 100%; height: calc(96 * var(--u));
       padding: 0 calc(32 * var(--u)) 0 calc(15 * var(--u)); border: 1px solid #000; background: transparent; font: inherit; font-size: calc(16 * var(--u)); color: inherit; cursor: pointer; }
.buy img { width: calc(39 * var(--u)); }
button.buy:hover { background: #fff; }
.buy.soldout { justify-content: center; cursor: default; padding: 0; }
form.paypal { margin: 0; }

/* =====================================================================
   MOBILE (finestra sotto 1200 pixel, come in Xara): tela di 480 pixel
   ===================================================================== */
@media (max-width: 1199px) {
  :root { --u: calc((100vw - var(--sb)) / 480); }
  body, .txt { font-size: calc(14 * var(--u)); }
  .wrap { width: calc(480 * var(--u)); padding: 0 calc(15 * var(--u)); }

  .site-header { padding-top: calc(22 * var(--u)); }
  .header-row { height: calc(40 * var(--u)); }
  .logo-box { width: calc(126 * var(--u)); height: calc(40 * var(--u)); }
  .logo-box img { width: calc(70 * var(--u)); margin-left: calc(-6 * var(--u)); }
  .nav-bar { width: calc(311 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(10 * var(--u)); background: var(--grigio-box); }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: calc(4 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u));
                 padding: calc(6 * var(--u)); border: 0; background: none; cursor: pointer; }
  .menu-toggle span { display: block; height: calc(3 * var(--u)); background: #6E7378; border-radius: 2px; }
  .main-nav { display: none; position: absolute; top: 100%; right: 0; left: 0; background: #fff;
              box-shadow: 0 6px 14px rgba(0,0,0,.18); }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav a { display: block; padding: calc(13 * var(--u)) calc(18 * var(--u)); font-size: calc(15 * var(--u)); border-bottom: 1px solid var(--grigio-box); }

  .blk { margin-left: 0; width: auto; margin-top: calc(min(var(--mt), 20) * var(--u)); }
  .row { display: block; margin-top: calc(min(var(--mt), 20) * var(--u)); }
  .nw { white-space: normal; }
  .row > .col { width: auto; margin-left: 0; margin-top: 0; }
  .row > .col + .col { margin-top: calc(15 * var(--u)); }
  .row.keep { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--u)) calc(14 * var(--u)); }
  .row.keep > .col { flex: 0 1 auto; width: auto; margin: 0; }
  .row.keep.spread { justify-content: space-around; }
  .panel { padding: calc(12 * var(--u)) 0; }
  .panel .txt, .panel .row.keep { padding-left: calc(12 * var(--u)); padding-right: calc(12 * var(--u)); }
  .panel .ov .txt { padding: 0; }
  .panel .blk.fix { margin-left: calc(12 * var(--u)); }
  .panel .blk.fix.center { margin-left: auto; }
  .panel .panel { margin-left: calc(12 * var(--u)); margin-right: calc(12 * var(--u)); }
  .blk.fix, .row.keep > .col.fix { width: calc(var(--wpx) * var(--u) * .55); }
  .blk.fix:has(> .txt) { width: auto; }
  .panel.empty { height: auto; min-height: calc(30 * var(--u)); }
  .txt { text-align: left; }
  .txt.mj { text-align: justify; }
  .row.imgrow { display: flex; padding: 0 calc(12 * var(--u)); }
  .row.imgrow > .col { flex: 0 1 var(--w); margin-left: var(--ml); }
  .row.imgrow > .col:first-child { margin-left: 0; }
  .row.imgrow > .col + .col { margin-top: 0; }
  .row.wrapm { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); padding: 0 calc(12 * var(--u)); }
  .row.wrapm > .col { flex: 1 1 100%; margin: 0; }
  .row.wrapm > .col.nimg { flex: 1 1 calc(50% - calc(6 * var(--u))); }
  .hero-d { display: none; }
  .hero-m { display: block; }
  .news-grid { grid-template-columns: 1fr; row-gap: calc(20 * var(--u)); margin-top: calc(20 * var(--u)); }
  .ncard, .ncard.full { min-height: 0; padding: calc(12 * var(--u)) 0 calc(14 * var(--u)); }
  .ncard-head { padding: 0 calc(12 * var(--u)); gap: 0; height: calc(30 * var(--u)); font-size: calc(14 * var(--u)); }
  .ncard-head img { width: calc(23 * var(--u)); }
  .ncard-head span { flex: 1; text-align: center; padding-right: calc(23 * var(--u)); }
  .ncard-img { margin-top: calc(12 * var(--u)); }
  .ncard-txt { padding: 0 calc(12 * var(--u)); text-align: center; font-size: calc(14 * var(--u)); }
  .ov-d { display: none; }
  .ov-m { display: block; }
  .txt.center, .txt.mc, .blk.mcenter .txt { text-align: center; }
  .row.keep > .col:not(.fix) { flex: 1 1 0; }
  .txt > [style*="--pmt"] { margin-top: 1lh !important; }
  .fs-11 { font-size: calc(9.35 * var(--u)); }
  .fs-13 { font-size: calc(11.05 * var(--u)); }
  .fs-15-06 { font-size: calc(14 * var(--u)); }
  .fs-16-16 { font-size: calc(14 * var(--u)); }
  .fs-16-6 { font-size: calc(14 * var(--u)); }
  .fs-18-67 { font-size: calc(15.87 * var(--u)); }
  .fs-18-71 { font-size: calc(15.9 * var(--u)); }
  .fs-22-77 { font-size: calc(19.35 * var(--u)); }
  .fs-25-62 { font-size: calc(21.78 * var(--u)); }
  .fs-16 { font-size: calc(14 * var(--u)); }
  .site-footer { margin-top: calc(50 * var(--u)); padding-bottom: calc(50 * var(--u)); }
  .shop-sep .panel.sep { height: calc(110 * var(--u)); }
  .shop-sep > .col + .col { display: none; }
  .panel.info { min-height: 0; padding: calc(15 * var(--u)); }
  .p-body, .specs { margin: calc(25 * var(--u)) 0 0 0; }
  .specs th { width: calc(90 * var(--u)); }
  .p-buy { margin-top: calc(25 * var(--u)); padding-left: 0; margin-bottom: 0; }
  .p-buy .bc { margin-left: auto; }
  .buy { height: calc(60 * var(--u)); }
  .panel.pic { padding: calc(15 * var(--u)); }
}