/* ZOKKU bundles page (BUND, 25 Oct 2026). Loaded after site.css and shop.css by bundles.html only.
   Opening on salvia; ZOKKU All on night with the wall of the eleven interfaces; Beat Kit on paper with the fan of
   its five, each card on its own chapter colour; "Which one?" back on salvia. One lit interface per section is the
   page's moving part (js/bundles.js). The teasers on the home and product pages live in site.css (BUND block). */

/* ---------- Opening ---------- */
.bu-apertura{background:var(--house);color:var(--house-fg);padding:clamp(40px,6vw,96px) 0 clamp(40px,5vw,80px)}
.bu-apertura .griglia{row-gap:32px;align-items:end}
.bu-testa{grid-column:1 / -1}
.bu-testa h1{font-size:clamp(48px,7.4vw,112px);letter-spacing:-.04em;line-height:.94;max-width:11ch;text-wrap:balance}
.bu-testa p{font-size:var(--s-lead);line-height:1.35;max-width:36ch;margin-top:20px}
.bu-salti{grid-column:1 / -1;display:grid;gap:10px}
.bu-salto{display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;min-height:92px;padding:12px 18px 12px 12px;border-radius:var(--r-m);background:color-mix(in srgb,var(--house-fg) 7%,transparent);text-decoration:none;transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}
.bu-salto:active{transform:scale(.98)}
.bu-salto img{width:64px;height:64px}
.bu-salto-t{display:grid;gap:2px;min-width:0}
.bu-salto-t > b{font-size:21px;font-weight:500;letter-spacing:-.01em}
.bu-salto-s{font-weight:500;color:var(--house-2)}
.bu-prezzo{display:inline-flex;align-items:baseline;gap:8px}
.bu-prezzo b{font-weight:500}
.bu-prezzo s{opacity:.62}
.bu-freccia{font-size:20px;line-height:1}
@media (hover:hover) and (pointer:fine){.bu-salto:hover{background:color-mix(in srgb,var(--house-fg) 12%,transparent)}}
@media (min-width:900px){
  .bu-testa{grid-column:1 / span 7}
  .bu-salti{grid-column:8 / span 5}
  .bu-salto img{width:72px;height:72px}
  .bu-salto{grid-template-columns:72px 1fr auto}
}

/* ---------- A bundle ---------- */
.bu-sezione{padding:clamp(56px,8vw,128px) 0;scroll-margin-top:68px}
.bu-sezione .griglia{row-gap:28px;align-items:start}
.bu-sezione .griglia > *{grid-column:1 / -1;min-width:0}
.bu-all{background:#121212;color:#F6F6F5;--fg:#F6F6F5;--bg:#121212;--fg-2:#BDBDB6;--tile:#1D1D1C;--btn-bg:#F6F6F5;--btn-fg:#121212;--lg-ink:#F6F6F5}
.bu-all ::selection{background:#F6F6F5;color:#121212}
.bu-kit{background:var(--tile);color:var(--fg)}
.bu-icona{width:64px;height:64px;margin-bottom:20px}
.bu-testa-b h2{font-size:clamp(40px,5.2vw,80px);letter-spacing:-.035em;line-height:.96}
.bu-riga{font-size:var(--s-lead);line-height:1.38;max-width:34ch;margin-top:16px}
.bu-compra{display:grid;gap:16px}
.bu-risparmio{justify-self:start;display:inline-flex;align-items:center;min-height:36px;padding:4px 12px;border-radius:var(--r-s);background:var(--zk-salvia);color:var(--zk-inchiostro);font-weight:500;font-size:17px;line-height:1.25}
.bu-compra .acquista{margin:0}
.bu-prova{font-size:16px;line-height:1.45;color:var(--fg-2)}
.bu-prova .lnk{color:var(--fg);min-height:44px}
.bu-ora{margin-top:14px;font-size:15px;color:var(--fg-2);min-height:1.5em}

/* the wall: eleven interfaces and the mark, twelve cells (3 x 4 on phones, 4 x 3 from 600 px) */
.bu-muro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.bu-cella{position:relative;display:block;aspect-ratio:1000 / 640;border-radius:var(--r-s);overflow:hidden;background:#1D1D1C;opacity:.38;transition:opacity 320ms var(--ease-soft),box-shadow 320ms var(--ease-soft),transform var(--t-press) var(--ease-out);-webkit-tap-highlight-color:transparent}
.bu-cella.acceso{opacity:1;box-shadow:0 0 0 2px #F6F6F5}
.bu-cella:active{transform:scale(.97)}
.bu-cella:focus-visible{outline:3px solid #F6F6F5;outline-offset:3px}
.bu-schermo{position:absolute;inset:0;display:block}
.bu-schermo img,.bu-schermo video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.bu-marchio{opacity:1;display:grid;place-items:center;background:#F6F6F5;color:#121212;--lg-ink:#121212;--lg-acc:#121212}
.bu-marchio svg{height:46%;width:auto}
@media (hover:hover) and (pointer:fine){.bu-cella:not(.bu-marchio):hover{opacity:.82}.bu-cella.acceso:hover{opacity:1}}
@media (min-width:600px){.bu-muro{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}}

/* the fan: the five cards, the lit one in front; --d (-2..2) and --a (its size) come from js/bundles.js */
.bu-ventaglio{position:relative;aspect-ratio:10 / 7.4;margin-inline:auto;max-width:900px}
.bu-carta{position:absolute;left:50%;top:50%;width:76%;display:block;padding:7px 7px 0;border-radius:var(--r-m);background:var(--campo);color:var(--inchiostro);text-align:left;
  transform:translate(calc(-50% + var(--d,0) * 9%),calc(-50% + var(--a,0) * 3%)) rotate(calc(var(--d,0) * 4deg)) scale(calc(1 - var(--a,0) * .09));
  box-shadow:0 26px 44px -26px rgba(18,18,18,.55),0 2px 6px rgba(18,18,18,.14);
  transition:transform 560ms var(--ease-in-out),filter 320ms var(--ease-soft);filter:brightness(calc(1 - var(--a,0) * .1));-webkit-tap-highlight-color:transparent}
.bu-carta .bu-schermo{position:relative;aspect-ratio:1000 / 640;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px color-mix(in srgb,var(--inchiostro) 22%,transparent)}
.bu-carta-n{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 4px 10px}
.bu-carta-n b{font-size:17px;font-weight:500}
.bu-carta-n span{font-size:14px;opacity:.86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bu-carta:focus-visible{outline:3px solid var(--fg);outline-offset:4px}
@media (min-width:600px){
  .bu-carta{width:66%;padding:8px 8px 0;transform:translate(calc(-50% + var(--d,0) * 12%),calc(-50% + var(--a,0) * 3%)) rotate(calc(var(--d,0) * 5deg)) scale(calc(1 - var(--a,0) * .08))}
  .bu-ventaglio{aspect-ratio:10 / 6.6}
}

/* what is in it, and the sum */
.bu-dentro{margin-top:8px}
.bu-dentro h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.015em;margin-bottom:20px}
.bu-gruppi{display:grid;gap:28px}
.bu-gruppo-n{font-size:15px;font-weight:500;color:var(--fg-2);margin:0 8px 6px}
.bu-voci{display:grid;gap:2px}
.bu-voce{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;min-height:56px;padding:6px 10px 6px 6px;border-radius:var(--r-s);text-decoration:none;transition:background-color var(--t-hover) ease}
.bu-voce:focus-visible{background:color-mix(in srgb,var(--fg) 8%,transparent)}
@media (hover:hover) and (pointer:fine){.bu-voce:hover{background:color-mix(in srgb,var(--fg) 7%,transparent)}}
.bu-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-icona);background:var(--campo);color:var(--inchiostro);--lg-ink:var(--inchiostro);--lg-acc:var(--glifo,var(--inchiostro));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--inchiostro) 14%,transparent)}
.bu-ico svg{width:62%;height:auto;overflow:visible}
.bu-voce-t{display:grid;min-width:0}
.bu-voce-t b{font-size:18px;font-weight:500;line-height:1.2}
.bu-voce-t span{font-size:15px;color:var(--fg-2);line-height:1.3}
.bu-voce-p{font-size:15px}
.bu-conto{align-self:start;display:grid;gap:10px;padding:20px 22px;border-radius:var(--r-m);background:color-mix(in srgb,var(--fg) 6%,transparent)}
.bu-conto div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.bu-conto dt{color:var(--fg-2)}
.bu-conto dd{font-size:18px}
.bu-conto-tot{border-top:1px solid color-mix(in srgb,var(--fg) 22%,transparent);padding-top:14px;margin-top:4px}
.bu-conto-tot dt{color:var(--fg);font-weight:500}
.bu-conto-tot b{font-size:30px;font-weight:500}
.bu-conto-tot span{color:var(--fg-2);margin-left:6px}

@media (min-width:900px){
  .bu-gruppi{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(250px,.8fr);column-gap:var(--gap)}
  .bu-gruppi-uno{grid-template-columns:minmax(0,1.4fr) minmax(250px,.8fr)}
}
@media (min-width:1024px){
  .bu-sezione .griglia{row-gap:36px}
  .bu-icona{width:88px;height:88px}
  .bu-all .bu-vista{grid-column:1 / span 7;grid-row:1 / span 2}
  .bu-all .bu-testa-b{grid-column:9 / span 4;grid-row:1}
  .bu-all .bu-compra{grid-column:9 / span 4;grid-row:2}
  .bu-kit .bu-vista{grid-column:7 / span 6;grid-row:1 / span 2;align-self:center}
  .bu-kit .bu-testa-b{grid-column:1 / span 5;grid-row:1}
  .bu-kit .bu-compra{grid-column:1 / span 5;grid-row:2}
  .bu-dentro{grid-row:3;margin-top:32px}
}

/* ---------- Which one ---------- */
.bu-quale{background:var(--house);color:var(--house-fg);padding:clamp(48px,6vw,96px) 0}
.bu-quale .griglia > *{grid-column:1 / -1}
.bu-quale h2{font-size:var(--s-head);margin-bottom:20px}
.bu-quale p{font-size:var(--s-lead);line-height:1.4;max-width:52ch}
.bu-quale p + p{margin-top:12px}
.bu-quale .lnk{min-height:0;font-size:inherit}
.bu-quale .bu-nota{font-size:15px;margin-top:28px;max-width:70ch}
.bu-quale .bu-nota .lnk{min-height:44px}
@media (min-width:900px){.bu-quale .griglia > *{grid-column:1 / span 9}}

@media (prefers-reduced-motion:reduce){
  .bu-carta,.bu-cella,.bu-salto{transition:none}
}