/* Boutique demo — replica dell'header e componenti condivisi corneliani.com */

/* Font originali Corneliani (dal download del sito): TTNorms per i testi,
   Baskerville per titoli e wordmark — le stesse famiglie dell'originale. */
@font-face {
  font-family: 'Baskerville';
  src: url('/fonts/BaskervilleCom.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TTNorms';
  src: url('/fonts/TTNorms-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TTNorms';
  src: url('/fonts/TTNorms-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TTNorms';
  src: url('/fonts/TTNorms-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TTNorms';
  src: url('/fonts/TTNorms-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --ink: #1a1a1a; --muted: #6f6f6f; --hairline: #e6e6e6;
  --imgbg: #f6f6f6; --white: #ffffff; --sale: #c00016;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'TTNorms', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; letter-spacing: 0.5px; color: var(--ink);
  background: var(--white); -webkit-font-smoothing: antialiased;
}
.serif { font-family: 'Baskerville', "Times New Roman", Times, serif; }
a { color: var(--ink); text-decoration: none; }

/* Icone ufficiali: il livello "secondary" (es. riempimento del cuore)
   resta trasparente, come sul sito originale */
.svg-secondary { color: transparent; }

/* Contenitore header fisso: si nasconde scendendo, ricompare risalendo
   (transizione identica all'originale) */
.sitehead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--white);
  transition: transform 0.3s ease-out;
}
.sitehead.hide { transform: translateY(-100%); }

/* Topbar promo nera */
.topbar {
  background: #000; color: #fff; text-align: center;
  font-size: 11.5px; letter-spacing: 0.03em; padding: 9px 10px;
}
.topbar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Barra utility */
.utilbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 24px; height: 36px; font-size: 11px; letter-spacing: 0.03em;
}
.utilbar .u-left { display: flex; gap: 26px; }
.utilbar .u-right { display: flex; gap: 8px; align-items: center; color: var(--ink); }
.utilbar .u-right svg { width: 15px; height: 15px; }
.utilbar .sep { color: #bbb; }

/* Header: logo + nav + icone */
.shopheader { border-bottom: 1px solid var(--hairline); }
.shoplogo { text-align: center; padding: 18px 0 14px; }
.shoplogo a { display: inline-block; color: var(--ink); }
.shoplogo svg { height: 24px; width: auto; display: block; }
.shopnav { display: flex; align-items: center; padding: 6px 24px 16px; }
.shopnav::before { content: ""; width: 150px; flex: 0 0 auto; }
.shopnav nav { display: flex; gap: 30px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
@media (max-width: 1250px) {
  .shopnav nav { gap: 20px; }
  .shopnav nav a { font-size: 10px; }
  .shopnav::before { width: 120px; }
}
.shopnav nav a {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.shopnav nav a:hover { border-bottom-color: var(--ink); }
.shopnav nav a.sale { color: var(--sale); }
.shopnav nav a.sale:hover { border-bottom-color: var(--sale); }
.hicons {
  width: 150px; flex: 0 0 auto;
  display: flex; gap: 18px; align-items: center; justify-content: flex-end;
}
@media (max-width: 1250px) { .hicons { width: 120px; gap: 14px; } }
.hicons a { position: relative; display: flex; color: var(--ink); }
.hicons svg { width: 19px; height: 19px; }
.hicons .badge {
  position: absolute; top: -6px; right: -8px; min-width: 15px; height: 15px;
  background: var(--ink); color: #fff; border-radius: 50%;
  font-size: 9px; display: none; align-items: center; justify-content: center;
  padding: 0 3px; letter-spacing: 0;
}

/* Footer nero condiviso (il padding extra in basso resta coperto dalla barra demo) */
.sitefooter { background: #111; color: #bbb; padding: 54px 28px 84px; }
.sitefooter .cols {
  max-width: 1400px; margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px;
}
.sitefooter .mark { color: #fff; }
.sitefooter .mark svg { height: 15px; width: auto; display: block; }
.sitefooter .small {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; line-height: 2.2;
}
.sitefooter .legal {
  max-width: 1400px; margin: 40px auto 0; font-size: 10px; color: #777;
  letter-spacing: 0.08em; border-top: 1px solid #2a2a2a; padding-top: 22px;
}

/* Barra demo fissa in basso — nascosta di default, si apre con l'ingranaggio */
.demobar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
  background: #111; color: #cfcfcf; min-height: 40px;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
  gap: 14px; padding: 4px 16px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  white-space: nowrap;
  transform: translateY(100%); transition: transform .25s ease;
}
.demobar.open { transform: translateY(0); }
.demogear {
  position: fixed; right: 14px; bottom: 14px; z-index: 260;
  width: 38px; height: 38px; border-radius: 50%;
  background: #111; color: #fff; border: 1px solid #3a3a3a; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: bottom .25s ease, border-color .15s;
}
.demogear:hover { border-color: #fff; }
.demogear svg { width: 17px; height: 17px; }
.demogear.up { bottom: 54px; }
@media (max-width: 900px) {
  .demogear.up { bottom: 96px; }
}
.demobar .db-left, .demobar .db-center, .demobar .db-right {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.demobar .db-title { color: #fff; white-space: nowrap; }
.demobar select {
  background: #111; color: #fff; border: 1px solid #3a3a3a;
  font-family: inherit; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 5px 8px; outline: none; cursor: pointer;
}
.demobar .db-cost { color: #9a9a9a; white-space: nowrap; }
.demobar label { color: #9a9a9a; }
.demobar input {
  background: #1e1e1e; color: #eee; border: 1px solid #3a3a3a;
  padding: 6px 9px; width: 170px; font-family: monospace;
  font-size: 10px; letter-spacing: 0; outline: none;
}
@media (max-width: 1250px) {
  .demobar { gap: 10px; padding: 0 12px; font-size: 9px; }
  .demobar input { width: 140px; }
  .demobar select { font-size: 9px; }
}
.demobar input:focus { border-color: #777; }
.demobar button {
  background: none; border: 1px solid #3a3a3a; color: #fff;
  padding: 6px 12px; cursor: pointer; font-family: inherit;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
}
.demobar button:hover { border-color: #fff; }
.demobar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.demobar .db-status { white-space: nowrap; }
.demobar .db-status.ok { color: #7fc79a; }
.demobar .db-status.bad { color: #e2988e; }
@media (max-width: 900px) {
  .demobar { flex-wrap: wrap; padding: 8px 14px; }
}

/* Toast feedback */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(10px);
  background: var(--ink); color: #fff; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 13px 26px; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; z-index: 300; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }