/* Layout Diviso: ogni sezione è una pagina divisa in due, testo da una parte e immagine dall'altra.
   In home il catalogo è a righe: per ogni categoria si vedono subito le sottocategorie. */
:root {
  --canvas: #EEE9E1; --surface: #FFFDF9; --soft: #F5F0E8; --ink: #2A211B; --primary: #3A2C22; --on-primary: #FFFFFF; --accent: #C8643A; --on-accent: #FFFFFF;
  --ok: #1F8A4F; --warn: #B7791F; --f-d: Urbanist, "Segoe UI", sans-serif; --f-b: Urbanist, "Segoe UI", sans-serif; --f-i: Urbanist, "Segoe UI", sans-serif;
  --dw: 700; --ls-d: -.03em; --r: 22px; --r-sm: 12px; --r-xl: 30px; --pill: 999px; --shadow: none; --shadow-pop: 0 24px 60px -20px rgb(0 0 0 / .35); --mock-bg: #141414; --mock-fg: #FFFFFF;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --canvas: #14110E; --surface: #1E1A16; --soft: #28231E; --ink: #F1EAE1; --primary: #E9D6C2; --on-primary: #14110E; --mock-bg: #F2F2EF; --mock-fg: #141414; color-scheme: dark; } }
:root[data-theme="dark"] { --canvas: #14110E; --surface: #1E1A16; --soft: #28231E; --ink: #F1EAE1; --primary: #E9D6C2; --on-primary: #14110E; --mock-bg: #F2F2EF; --mock-fg: #141414; color-scheme: dark; }
:root { --muted: color-mix(in oklab, var(--ink) 58%, var(--canvas)); --line: color-mix(in oklab, var(--ink) 13%, var(--canvas)); }
body { font-size: 15px; }
.shell { max-width: 1400px; }
.k { font-size: 12.5px; font-weight: 600; color: var(--acc-t, var(--accent)); letter-spacing: .08em; text-transform: uppercase; }
.card2 { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow); min-width: 0; }

/* testata */
.hd { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in oklab, var(--canvas) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.hd .in { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 14px; align-items: center; height: 72px; }
.logo { font-family: var(--f-d); font-weight: 800; font-size: 24px; letter-spacing: -.04em; display: inline-flex; align-items: center; gap: 10px; }
.logo i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(90deg, var(--primary) 50%, var(--accent) 50%); }
.catb { height: 46px; padding: 0 18px 0 14px; border-radius: var(--pill); background: var(--primary); color: var(--on-primary); display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.sbx { display: flex; align-items: center; gap: 10px; height: 46px; max-width: 620px; width: 100%; padding: 0 18px; border-radius: var(--pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); text-align: left; }
.hd .r { display: flex; gap: 8px; align-items: center; }
.hd .circle { box-shadow: inset 0 0 0 1px var(--line); }
.hd .ct { height: 46px; padding: 0 6px 0 16px; border-radius: var(--pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: inline-flex; gap: 10px; align-items: center; font-weight: 600; }
.hd .ct b { min-width: 34px; height: 34px; border-radius: 17px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.cbar { border-bottom: 1px solid var(--line); }
.cbar .in { display: flex; gap: 28px; height: 48px; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.cbar button { position: relative; font-weight: 600; font-size: 14.5px; color: var(--muted); white-space: nowrap; flex: none; }
.cbar button[aria-current="true"] { color: var(--ink); }
.cbar button[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }

/* metà e metà */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.split .tx { padding: 56px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; }
.split .ph { border-radius: var(--r-xl); overflow: hidden; position: relative; min-height: 420px; background: var(--soft); }
.split .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split h1, .split h2 { margin: 0; line-height: 1; }
.split p { margin: 0; color: var(--muted); max-width: 46ch; font-size: 16.5px; }
.acts { display: flex; gap: 10px; flex-wrap: wrap; }
.hero { margin-top: 20px; }
.hero h1 { font-size: clamp(42px, 5.2vw, 84px); max-width: 12ch; }
.hero .ph { min-height: 560px; }
.ptag { position: absolute; left: 18px; bottom: 18px; z-index: 1; display: grid; gap: 2px; padding: 14px 18px; border-radius: var(--r); background: var(--surface); text-align: left; box-shadow: var(--shadow-pop); }
.ptag b { font-size: 15px; }
.ptag .price { font-size: 20px; }
.ptag .vatx { font-size: 11.5px; }
.sec { margin-top: 72px; }
.sh { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 20px; }
.sh h2 { margin: 0; font-size: clamp(30px, 3.2vw, 48px); line-height: 1; }
.lk { font-weight: 600; color: var(--acc-t, var(--accent)); }

/* catalogo a righe */
.rows { display: grid; gap: 12px; }
.crow { display: grid; grid-template-columns: minmax(200px, .9fr) minmax(0, 2fr) 220px; gap: 24px; align-items: center; padding: 14px 14px 14px 30px; }
.crow .t { text-align: left; display: grid; gap: 4px; }
.crow .t b { font-family: var(--f-d); font-size: 28px; font-weight: var(--dw); letter-spacing: var(--ls-d); line-height: 1.05; }
.crow .t small { color: var(--muted); font-size: 13.5px; }
.crow .l2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; }
.crow .l2 div { display: grid; gap: 4px; align-content: start; }
.crow .l2 button { text-align: left; font-size: 14px; color: var(--muted); }
.crow .l2 button:hover { color: var(--ink); }
.crow .l2 button.h { font-weight: 700; color: var(--ink); font-size: 15px; }
.crow .im { height: 150px; border-radius: var(--r); overflow: hidden; }
.crow .im img { width: 100%; height: 100%; object-fit: cover; }

/* schede prodotto */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pc { position: relative; padding: 10px; display: grid; gap: 10px; align-content: start; }
.pc .im { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--soft); }
.pc .im img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pc:hover .im img { transform: scale(1.04); }
.pc .open { position: absolute; inset: 0; z-index: 1; }
.pc .tag { position: absolute; left: 10px; top: 10px; z-index: 2; height: 26px; padding: 0 10px; border-radius: var(--pill); display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--accent); color: var(--on-accent); }
.pc .fav { position: absolute; right: 10px; top: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); }
.pc .fav svg.i { width: 16px; height: 16px; }
.pc .fav[aria-pressed="true"] { color: var(--acc-t, var(--accent)); }
.pc .fav[aria-pressed="true"] svg.i { fill: currentColor; }
.pc .bd { padding: 0 6px; display: grid; gap: 3px; }
.pc .br { font-size: 12.5px; color: var(--muted); }
.pc .nm { font-weight: 700; font-size: 16px; line-height: 1.25; }
.pc .ft { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 6px 6px; }
.pc .add { position: relative; z-index: 2; width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; }

/* fasce */
.promo { background: var(--primary); color: var(--on-primary); border-radius: var(--r-xl); }
.promo p { color: inherit; opacity: .75; }
.promo .k { color: inherit; opacity: .8; }
.usp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.usp div { padding: 22px; display: grid; gap: 10px; font-size: 13.5px; color: var(--muted); }
.usp b { display: block; color: var(--ink); font-size: 16px; }
.usp svg.i { color: var(--acc-t, var(--accent)); width: 26px; height: 26px; }
.news form { display: flex; gap: 6px; padding: 6px; width: min(480px, 100%); border-radius: var(--pill); background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); }
.news input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding-left: 16px; }
.news .btn { height: 46px; }
.foot { margin-block: 72px 30px; padding-top: 30px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 24px; font-size: 14px; }
.foot p { margin: 10px 0 0; color: var(--muted); max-width: 40ch; }
.foot h4 { margin: 0 0 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot .bot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }

/* categoria */
.crumb { display: flex; gap: 6px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.chd { margin-top: 20px; }
.chd .tx { padding: 40px; gap: 14px; }
.chd h1 { font-size: clamp(38px, 4.4vw, 66px); }
.chd .ph { min-height: 300px; }
.tb { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 26px 0 16px; }
.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); flex-wrap: wrap; }
.seg button { height: 38px; padding: 0 16px; border-radius: var(--pill); font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.sel { height: 46px; padding: 0 16px; border-radius: var(--pill); border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cw { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.side { padding: 6px 22px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 92px); }
.mf { display: none; }
.cg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acts2 { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.acts2 button { height: 32px; padding: 0 12px; border-radius: var(--pill); background: var(--primary); color: var(--on-primary); font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.acts2 svg.i { width: 13px; height: 13px; }
.more { display: flex; justify-content: center; margin-top: 24px; }

/* prodotto */
.pw { margin-top: 20px; align-items: start; }
.gal { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 92px); display: grid; gap: 12px; }
.gal .mainimg { aspect-ratio: 1; border-radius: var(--r-xl); overflow: hidden; background: var(--soft); }
.gal .mainimg img { width: 100%; height: 100%; object-fit: cover; }
.gal .mainimg img.zoom { transform: scale(1.7); transform-origin: 50% 40%; }
.gal .th { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gal .th button { aspect-ratio: 1; border-radius: var(--r); overflow: hidden; opacity: .7; }
.gal .th button img { width: 100%; height: 100%; object-fit: cover; }
.gal .th button.zoom img { transform: scale(1.8); }
.gal .th button[aria-pressed="true"] { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.buy { padding: 40px; display: grid; gap: 18px; }
.buy h1 { margin: 0; font-size: clamp(34px, 3.4vw, 54px); line-height: 1; }
.buy .pr { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.buy .omni { margin: -12px 0 0; font-size: 12.5px; color: var(--muted); }
.buy .l { margin: 0; color: var(--muted); }
.buy .row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.buy .step { box-shadow: inset 0 0 0 1px var(--line); }
.buy .row .btn { height: 56px; width: 100%; min-width: 0; justify-content: space-between; }
.buy .sub { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.buy .lines2 { display: grid; gap: 8px; }
.buy .lines2 div { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border-radius: var(--r); background: var(--soft); font-size: 14px; }
.buy .lines2 svg.i { color: var(--acc-t, var(--accent)); }
.buy .lines2 small { display: block; color: var(--muted); }
.spt { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.spt th, .spt td { text-align: left; padding: 14px 24px; border-top: 1px solid var(--line); }
.spt th { width: 36%; font-weight: 500; color: var(--muted); }
.spt tr:first-child th, .spt tr:first-child td { border-top: 0; }
.kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; padding: 14px; align-items: center; }
.kit .it2 { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; padding: 8px; border-radius: var(--r); background: var(--soft); font-size: 13px; }
.kit .it2 img { width: 64px; height: 64px; border-radius: var(--r-sm); object-fit: cover; }
.kit .it2 b { display: block; font-size: 14px; }
.kit .tot { display: grid; justify-items: end; gap: 6px; padding: 0 10px; }
.kit .tot b { font-size: 28px; letter-spacing: -.02em; }

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crow { grid-template-columns: minmax(0, 1fr) 160px; padding-left: 22px; }
  .crow .l2 { grid-column: 1 / -1; grid-row: 2; padding-bottom: 8px; }
  .crow .im { height: 110px; }
  .cw { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; position: static; }
  .side.open { display: block; }
  .mf { display: inline-flex; }
  .kit { grid-template-columns: minmax(0, 1fr); }
  .kit .tot { justify-items: start; }
  .usp { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hd .in { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; height: 64px; }
  .catb span, .sbx span, .hd .ct .lb { display: none; }
  .catb { width: 46px; padding: 0; justify-content: center; }
  .sbx { width: 46px; padding: 0; justify-content: center; justify-self: end; }
  .hd .ct { padding: 0 6px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split .tx { padding: 30px 24px; }
  .hero .ph, .split .ph { min-height: 320px; }
  .split.rev .ph { order: -1; }
  .gal { position: static; }
  .buy { padding: 24px; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .logo { font-size: 20px; }
  .grid, .cg { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pc .nm { font-size: 14px; }
  .pc .bd .muted { display: none; }
  .crow { grid-template-columns: minmax(0, 1fr) 90px; gap: 14px; padding: 12px 12px 12px 18px; }
  .crow .t b { font-size: 22px; }
  .crow .im { height: 80px; }
  .crow .l2 { grid-template-columns: 1fr 1fr; }
  .usp { grid-template-columns: minmax(0, 1fr); }
  .buy .row .btn .p2 { display: none; }
  .buy .row .btn { justify-content: center; }
  .seg button { padding: 0 11px; font-size: 13px; }
  .sel { display: none; }
}