/* Key Interactive Store - stile condiviso. Grafica approvata: sfondo #161616, superfici #1b1f1c, verde #1DB954/#3fd374, font Sora. */

@font-face { font-family: "Sora"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/sora/sora-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("../fonts/sora/sora-latin-600-normal.woff2") format("woff2"); }

:root {
    --bg: #161616;
    --surface: #1b1f1c;
    --surface-2: #232826;
    --footer-bg: #121412;
    --text: #eef3ef;
    --text-2: rgba(238, 243, 239, 0.8);
    --muted: rgba(238, 243, 239, 0.72);
    --line: rgba(238, 243, 239, 0.12);
    --line-strong: rgba(238, 243, 239, 0.28);
    --green: #1db954;
    --green-text: #3fd374;
    --on-green: #0c1a11;
    --warn: #f2a93b;
    --danger: #ff8a7a;
    --accent: #1db954;
    --accent-text: #3fd374;
    --radius: 12px;
    --radius-lg: 20px;
    --gutter: 32px;
    --font: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--green-text); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { max-width: 100%; }

:focus-visible { outline: 2px solid var(--green-text); outline-offset: 3px; border-radius: 8px; }

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

.skip-link { position: absolute; left: 16px; top: -64px; z-index: 100; background: var(--green); color: var(--on-green); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip-link:focus { top: 12px; color: var(--on-green); }

.container { width: 100%; max-width: 1200px; margin: 0 auto; }
.page { flex: 1 0 auto; }
.page-main { padding: 28px var(--gutter) 72px; }

/* ------------------------------------------------------------------ pulsanti */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 46px; padding: 0 22px; border-radius: var(--radius);
    border: 1px solid var(--line-strong); background: transparent; color: var(--text);
    font-weight: 600; font-size: 14px; line-height: 1.2; text-align: center; cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.btn:hover { border-color: var(--text); color: var(--text); }
.btn-primary { background: var(--green); border-color: var(--green); color: var(--on-green); font-weight: 700; }
.btn-primary:hover { background: var(--green-text); border-color: var(--green-text); color: var(--on-green); }
.btn-lg { min-height: 50px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 13px; border-radius: 10px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-link { background: none; border: 0; padding: 8px 0; min-height: 44px; color: var(--muted); text-decoration: underline; font-weight: 600; font-size: 14px; }
.btn-link:hover { color: var(--green-text); }
.link-more { font-size: 14px; font-weight: 600; color: var(--green-text); padding: 8px 0; }
.link-more:hover { text-decoration: underline; }
form.inline { display: contents; margin: 0; }

/* -------------------------------------------------------------------- header */

.site-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); min-height: 72px;
    display: flex; align-items: center; gap: 32px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; }
.brand:hover { color: var(--text); }
/* Logo lockup (K badge + Key Interactive + STORE), margins trimmed: 44px tall in a 72px bar. */
.brand-logo { display: block; height: 44px; width: auto; }
.footer-logo { display: block; height: 35px; width: auto; margin-bottom: 14px; }
.brand-tag { font-weight: 500; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-2); }

.main-nav { display: flex; gap: 26px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.main-nav a { padding: 12px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.main-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--green); }

.header-spacer { flex: 1 1 0; }

.header-search { flex: 0 1 280px; min-width: 0; position: relative; }
.header-search svg { position: absolute; left: 14px; top: 14px; pointer-events: none; }
.header-search input {
    width: 100%; height: 44px; padding: 0 14px 0 40px; border-radius: var(--radius);
    border: 1px solid rgba(238, 243, 239, 0.2); background: var(--surface); font-size: 14px;
}
.header-search input::placeholder { color: var(--muted); }

.icon-btn {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--radius); border: 1px solid rgba(238, 243, 239, 0.2); flex: none;
}
.cart-badge {
    position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--green); color: var(--on-green); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

.account-menu { position: relative; flex: none; }
.account-menu summary {
    list-style: none; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 6px; border-radius: 999px;
    border: 1px solid rgba(238, 243, 239, 0.2); font-size: 13px; font-weight: 500; cursor: pointer;
}
.account-menu summary::-webkit-details-marker { display: none; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--green-text); flex: none; }
.account-panel {
    position: absolute; right: 0; top: 52px; z-index: 30; min-width: 220px; padding: 8px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.account-panel .who { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.account-panel .who strong { display: block; color: var(--text); font-size: 14px; }
.account-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.account-panel a:hover { background: var(--surface-2); }

.dev-banner { background: #3a2c10; color: #ffd98a; font-size: 12px; text-align: center; padding: 6px var(--gutter); border-bottom: 1px solid #5a4416; }

/* -------------------------------------------------------------------- footer */

.site-footer { background: var(--footer-bg); border-top: 1px solid var(--line); color: var(--text-2); font-size: 13px; line-height: 1.6; padding: 40px var(--gutter) 32px; margin-top: auto; }
.footer-top { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 32px 64px; justify-content: space-between; }
.footer-about { flex: 1 1 280px; max-width: 360px; }
.footer-about strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 8px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 24px 56px; }
.footer-col { display: flex; flex-direction: column; gap: 2px; }
.footer-col > span { color: var(--text); font-weight: 600; margin-bottom: 4px; }
.footer-col a { padding: 5px 0; }
.footer-bottom { max-width: 1200px; margin: 28px auto 0; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 12px; }

/* ----------------------------------------------------------------- tipografia */

.eyebrow { font-size: 13px; font-weight: 600; color: var(--green-text); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }
.h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.h3 { font-size: 20px; font-weight: 700; }
.lead { font-size: 18px; line-height: 1.6; color: var(--text-2); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.xsmall { font-size: 12px; }

.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--text-2); }
.breadcrumb a:hover { color: var(--green-text); }
.breadcrumb span[aria-current] { color: var(--text); }

/* ----------------------------------------------------------------- messaggi */

.notice { padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line-strong); font-size: 14px; line-height: 1.6; color: var(--text-2); }
.notice strong { color: var(--text); }
.notice-ok { border-color: rgba(63, 211, 116, .5); background: rgba(29, 185, 84, .1); }
.notice-warn { border-color: rgba(242, 169, 59, .6); background: rgba(242, 169, 59, .1); }
.notice-error { border-color: rgba(255, 138, 122, .6); background: rgba(255, 138, 122, .1); }
.notice a { text-decoration: underline; color: var(--text); font-weight: 600; }

.ki-store-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200; max-width: calc(100vw - 32px);
    padding: 12px 20px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-strong); font-size: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}

/* --------------------------------------------------------------- hero (home) */

.hero { padding: 72px var(--gutter) 56px; background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); }
.hero-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; justify-content: space-between; }
.hero-copy { flex: 1 1 520px; max-width: 720px; }
.hero h1 { font-size: 48px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
.hero .lead { margin-top: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-points { flex: 0 1 340px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: var(--text-2); }
.hero-points li { display: flex; gap: 12px; align-items: flex-start; }
.check-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(29, 185, 84, .16); color: var(--green-text); display: flex; align-items: center; justify-content: center; }

.section { padding: 24px var(--gutter) 56px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.section-alt { padding: 56px var(--gutter) 80px; background: var(--surface); border-top: 1px solid var(--line); }

/* -------------------------------------------------------------- card prodotto */

.grid-featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.grid-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; }

.card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; min-width: 0; transition: border-color .15s; }
.card:hover { border-color: var(--line-strong); }
.card:has(.card-link:focus-visible) { outline: 2px solid var(--green-text); outline-offset: 3px; }
/* Link sul nome esteso a tutta la card: clic ovunque apre il prodotto. Pulsanti e form dell'area azioni stanno sopra. */
.card-link { color: inherit; }
.card-link:hover { color: inherit; }
.card-link:focus-visible { outline: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.card:not(.card-soon) { cursor: pointer; }
.card-actions { position: relative; z-index: 1; }
.card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.card-compact { border-radius: 18px; }
.card-compact .card-body { padding: 18px 20px 20px; gap: 10px; }
.card-compact .product-art { height: 130px; }
.card-compact .product-art .art-name { font-size: 26px; }
.card-compact .card-body p { font-size: 13px; }
.card-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.card-actions > * { flex: 1 1 120px; }
.card .spacer { flex-grow: 1; }
.card h3 { font-size: 20px; font-weight: 700; }
/* identità del prodotto (card e scheda): icona grande, a destra nome in grande e sotto una riga più leggera che dice cos'è */
.pid { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pid-icon { flex: none; width: 64px; height: 64px; border-radius: 16px; }
.pid-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pid-name { font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.card .pid-sub, .pid-sub { font-size: 14px; line-height: 1.4; font-weight: 400; color: var(--muted); margin: 0; }
.card-compact .pid { gap: 14px; }
.card-compact .pid-icon { width: 52px; height: 52px; border-radius: 13px; }
.card-compact .pid-name { font-size: 21px; }
.pid-page { gap: 22px; }
.pid-page .pid-icon { width: 96px; height: 96px; border-radius: 22px; }
.pid-page .pid-sub { font-size: 18px; margin-top: 4px; }
.card-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.card p { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.card-cat { font-size: 12px; color: var(--muted); }

.price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.price { font-size: 24px; font-weight: 700; }
.card-compact .price { font-size: 18px; }
.price-note { font-size: 13px; color: var(--muted); }

.product-art {
    position: relative; height: 200px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px; overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 32%, #101010) 0%, var(--surface) 100%);
}
.product-art .art-name { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; }
.product-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* con un'immagine la copertina segue il suo formato (16:9): si vede tutta, senza tagli */
.product-art.art-image { height: auto; aspect-ratio: 16 / 9; padding: 0; background: #0e0e0e; }
.product-art .art-badge { position: absolute; left: 16px; top: 16px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: rgba(22, 22, 22, .86); border: 1px solid var(--line-strong); backdrop-filter: blur(6px); color: var(--accent-text); }
.card-compact .art-badge { left: 12px; top: 12px; font-size: 11px; padding: 4px 10px; color: var(--text); }
.product-art .art-placeholder { position: absolute; right: 16px; bottom: 12px; font-size: 11px; color: var(--muted); }

.card-soon { background: transparent; border: 1px dashed rgba(238, 243, 239, .24); min-height: 360px; align-items: center; justify-content: center; text-align: center; padding: 32px; gap: 14px; }
.card-soon p { max-width: 260px; }

.grid-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.cat-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.cat-card:hover { border-color: var(--line-strong); color: var(--text); }
.cat-card strong { font-size: 17px; }
.cat-card span { font-size: 13px; color: var(--text-2); }
.cat-card-all { background: transparent; border-style: dashed; border-color: var(--line-strong); }
.cat-card-all span { color: var(--green-text); font-weight: 600; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.steps li { display: flex; flex-direction: column; gap: 10px; }
.steps .num { font-size: 13px; font-weight: 700; color: var(--green-text); }
.steps .t { font-size: 18px; font-weight: 600; }
.steps .d { font-size: 14px; line-height: 1.6; color: var(--text-2); }

/* ------------------------------------------------------------------ catalogo */

.catalog-head { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.catalog-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; flex: 1 1 380px; justify-content: flex-end; }
.field-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.field-search svg { position: absolute; left: 14px; top: 15px; pointer-events: none; }
.field-search input { width: 100%; height: 46px; padding: 0 14px 0 40px; border-radius: var(--radius); border: 1px solid rgba(238, 243, 239, .3); background: var(--surface); font-size: 14px; }
.field-search input::placeholder { color: var(--muted); }
.select { height: 46px; padding: 0 14px; border-radius: var(--radius); border: 1px solid rgba(238, 243, 239, .3); background: var(--surface); font-size: 14px; max-width: 100%; }

.catalog-layout { display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; }
.filters { flex: 0 1 250px; min-width: 220px; }
.filters > summary { list-style: none; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); padding: 8px 0 16px; cursor: pointer; }
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.filters > summary::after { content: "\25BE"; font-size: 14px; transition: transform .15s; }
.filters[open] > summary::after { transform: rotate(180deg); }
.filters-body { display: flex; flex-direction: column; gap: 28px; }
.filter-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.filter-group legend { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); padding: 0; margin-bottom: 12px; }
.filter-options { display: flex; flex-direction: column; gap: 8px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.check-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 10px; font-size: 14px; border: 1px solid rgba(238, 243, 239, .2); cursor: pointer; }
.check-row input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.check-row .box { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(238, 243, 239, .55); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--on-green); }
.check-row.radio .box { border-radius: 50%; }
.check-row .label { flex-grow: 1; }
.check-row .count { font-size: 12px; color: var(--muted); }
.check-row:has(input:checked) { background: rgba(29, 185, 84, .12); border-color: var(--green); }
.check-row:has(input:checked) .box { background: var(--green); border-color: var(--green); }
.check-row:has(input:checked) .box::after { content: "\2713"; }
.check-row.radio:has(input:checked) .box::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-green); }
.check-row:has(input:focus-visible) { outline: 2px solid var(--green-text); outline-offset: 3px; }

.chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(238, 243, 239, .3); font-size: 13px; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip:has(input:checked) { background: rgba(29, 185, 84, .14); border-color: var(--green); color: var(--text); font-weight: 600; }
.chip:has(input:focus-visible) { outline: 2px solid var(--green-text); outline-offset: 3px; }

.filters-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.js .filters-apply { display: none; }
.results { flex: 999 1 560px; min-width: 0; }
.empty-box { border: 1px dashed rgba(238, 243, 239, .28); border-radius: 18px; padding: 56px 24px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.empty-box .t { font-size: 18px; font-weight: 600; }

/* ----------------------------------------------------------- scheda prodotto */

.product-layout { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.product-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.product-kind { font-size: 12px; font-weight: 600; color: var(--accent-text); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.product-title { font-size: 44px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.product-desc { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 620px; }
.product-hero-art { height: 360px; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.product-hero-art .art-name { font-size: 48px; }
.product-main h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.product-main section > p { font-size: 14px; line-height: 1.6; color: var(--text-2); margin-bottom: 18px; }
.product-main h3 { font-size: 16px; font-weight: 700; }

.highlights { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-size: 14px; color: var(--text-2); }
.highlights li { display: flex; align-items: center; gap: 10px; }
.product-art img { object-position: top center; }

/* contenuti editoriali della scheda (punti chiave, come funziona, funzioni, requisiti, domande) */
.kp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin-top: 16px; }
.kp { padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.kp p { font-size: 14px; line-height: 1.6; color: var(--text-2); }

.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; margin-top: 16px; }
.flow-step { display: flex; flex-direction: column; gap: 8px; }
.flow-step .num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; background: rgba(29, 185, 84, .16); color: var(--green-text); }
.flow-step p { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.product-main .flow-note { margin-top: 20px; margin-bottom: 0; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }

.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 16px; }
.feat { padding: 20px 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.feat ul { display: flex; flex-direction: column; gap: 10px; }
.feat li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.feat li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--green-text); }

.req { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 16px; }
.req > div { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 14px 18px; font-size: 14px; line-height: 1.55; }
.req > div + div { border-top: 1px solid var(--line); }
.req dt { flex: 0 0 120px; font-weight: 600; }
.req dd { flex: 1 1 280px; color: var(--text-2); }

.faq { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 18px; font-size: 15px; font-weight: 600; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; color: var(--green-text); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 2px solid var(--green-text); outline-offset: -2px; }
.product-main .faq p { padding: 0 18px 16px; margin: 0; }

/* carosello immagini: niente scorrimento automatico; frecce e miniature solo con JavaScript e da 2 immagini in su */
.gallery { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gallery-stage { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: #0e0e0e; }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { outline: 2px solid var(--green-text); outline-offset: -2px; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; }
.gallery-slide img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
.gallery-nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(22, 22, 22, .82); color: var(--text); align-items: center; justify-content: center; }
.gallery-nav:hover:not(:disabled) { border-color: var(--green-text); color: var(--green-text); }
.gallery-nav:disabled { opacity: .35; cursor: default; }
.gallery-nav:focus-visible { outline: 2px solid var(--green-text); outline-offset: 2px; }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
.js .gallery-nav { display: flex; }
.gallery-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 20px; }
.gallery-caption { font-size: 13px; color: var(--muted); }
.gallery-count { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gallery-thumbs { display: none; flex-wrap: wrap; gap: 10px; }
.js .gallery-thumbs { display: flex; }
.gallery-thumb { flex: none; width: 96px; aspect-ratio: 16 / 9; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: #0e0e0e; opacity: .65; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb[aria-current="true"] { border-color: var(--green); opacity: 1; }
.gallery-thumb:focus-visible { outline: 2px solid var(--green-text); outline-offset: 2px; }
.gallery-zoom { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: zoom-in; }
.gallery-zoom:focus-visible { outline: 2px solid var(--green-text); outline-offset: -4px; }

/* immagine a schermo intero (creata da store-ui.js) */
body.lightbox-open { overflow: hidden; }
.lightbox { border: 0; padding: 0; margin: 0; max-width: none; max-height: none; width: 100vw; height: 100vh; height: 100dvh; background: #000; color: var(--text); }
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox::backdrop { background: #000; }
.lb-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 64px 80px 8px; }
.lb-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; }
.lb-bar { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 44px; padding: 8px 24px 16px; font-size: 14px; }
.lb-caption { color: var(--text-2); }
.lb-count { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-btn { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(22, 22, 22, .85); color: var(--text); display: flex; align-items: center; justify-content: center; z-index: 1; }
.lb-btn[hidden] { display: none; }
.lb-btn:hover:not(:disabled) { border-color: var(--green-text); color: var(--green-text); }
.lb-btn:disabled { opacity: .3; cursor: default; }
.lb-btn:focus-visible { outline: 2px solid var(--green-text); outline-offset: 2px; }
.lb-close { top: 14px; right: 14px; }
.lb-full { top: 14px; right: 68px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 720px) {
    .lb-stage { padding: 64px 12px 8px; }
    .lb-prev, .lb-next { top: auto; bottom: 14px; transform: none; }
    .lb-prev { left: 14px; }
    .lb-next { right: 14px; }
    .lb-bar { padding: 8px 76px 20px; justify-content: center; text-align: center; flex-wrap: wrap; }
}

.table-box { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; overflow-x: auto; font-size: 14px; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.cmp-table th, .cmp-table td { text-align: left; padding: 14px 20px; border-top: 1px solid var(--line); color: var(--text-2); }
.cmp-table thead th { background: var(--surface); color: var(--text); font-weight: 600; border-top: 0; }

.pass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.pass-card { border: 1px solid rgba(238, 243, 239, .16); border-radius: 16px; padding: 20px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.pass-card .name { font-weight: 600; }
.pass-card .dur { font-size: 13px; color: var(--muted); }
.pass-card .amount { font-size: 20px; font-weight: 700; margin: 8px 0 12px; }
.pass-card form { margin-top: auto; }

.download-list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.download-list li { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 14px 18px; font-size: 14px; }
.download-list li + li { border-top: 1px solid var(--line); }
.download-list .size { color: var(--muted); }

.buybox { flex: 1 1 380px; max-width: 460px; position: sticky; top: 24px; border: 1px solid rgba(238, 243, 239, .18); border-radius: var(--radius-lg); background: var(--surface); padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.buybox h2 { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); gap: 4px; }
.seg button { min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font-size: 14px; font-weight: 600; }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.seg a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.seg a[aria-current="true"] { background: var(--text); color: var(--bg); }
.js .seg a { display: none; }
.seg button { display: none; }
.js .seg button { display: block; }

.plan-list { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.plan-list legend { padding: 0; }
.plan { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 14px 18px; border-radius: 14px; background: var(--bg); border: 1px solid rgba(238, 243, 239, .22); cursor: pointer; }
.plan input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.plan .name { font-size: 16px; font-weight: 700; display: block; }
.plan .blurb { font-size: 13px; color: var(--text-2); font-weight: 400; display: block; }
.plan .amount { font-size: 16px; font-weight: 700; white-space: nowrap; }
.plan:has(input:checked) { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); border: 2px solid var(--accent); padding: 13px 17px; }
.plan:has(input:focus-visible) { outline: 2px solid var(--green-text); outline-offset: 3px; }
.plan:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.buybox[data-billing="month"] [data-interval="year"],
.buybox[data-billing="year"] [data-interval="month"] { display: none; }

.buy-summary { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.buy-summary .row { display: flex; justify-content: space-between; gap: 12px; }
.buy-summary .row strong { font-weight: 700; white-space: nowrap; }
.buy-actions { display: flex; flex-direction: column; gap: 10px; }
.buy-points { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ carrello */

.cart-layout { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.cart-items { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cart-line { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.cart-info { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-info .t { font-size: 15px; font-weight: 600; margin-top: 8px; }
.pid-cart .pid-icon { width: 56px; height: 56px; border-radius: 14px; }
.pid-cart .pid-name { font-size: 20px; }
.pid-cart .pid-name a { color: inherit; }
.pid-cart .pid-name a:hover { color: var(--green-text); }
.pid-icon-fallback { display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, #101010) 0%, var(--surface-2) 100%); }
.cart-continue { display: inline-block; margin-bottom: 24px; }
.cart-info .d { font-size: 13px; color: var(--text-2); }
.cart-info .n { font-size: 12px; color: var(--muted); }
.cart-end { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.cart-end .amount { font-size: 18px; font-weight: 700; white-space: nowrap; }
.trash { min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid rgba(238, 243, 239, .25); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.trash:hover { border-color: var(--text); color: var(--text); }

.summary { flex: 1 1 340px; max-width: 420px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid rgba(238, 243, 239, .18); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.summary h2 { font-size: 18px; font-weight: 700; }
.summary-lines { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--text-2); }
.summary-lines .row, .summary-total .row { display: flex; justify-content: space-between; gap: 12px; }
.summary-total { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.summary-total .row { align-items: baseline; }
.summary-total .label { font-size: 15px; font-weight: 600; }
.summary-total .total { font-size: 26px; font-weight: 700; }
.who-box { padding: 14px 16px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; gap: 12px; font-size: 13px; }
.who-box .avatar { width: 34px; height: 34px; }
.who-box a { color: var(--muted); font-size: 12px; text-decoration: underline; }

.empty-cart { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 48px 0; }

/* ------------------------------------------------------ account / ordine ecc. */

.account-main { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.panel { border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.panel-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.panel-title .thumb { flex: none; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 32%, #101010) 0%, var(--surface-2) 100%); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; text-align: center; padding: 2px; overflow: hidden; overflow-wrap: anywhere; }
.panel-title h2 { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.panel-title .sub { font-size: 13px; color: var(--text-2); }

.status { font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
.status-ok { background: rgba(29, 185, 84, .14); color: var(--green-text); }
.status-wait { background: rgba(242, 169, 59, .14); color: var(--warn); }
.status-bad { background: rgba(255, 138, 122, .14); color: var(--danger); }
.status-off { background: rgba(238, 243, 239, .1); color: var(--text-2); }

.license-box label, .license-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
/* The code is one line of text with the Copy button beside it: no box. The line is cut with an ellipsis when it does not fit, but the
   button copies all of it (the whole text is in the element), and a click on the line selects it all. */
.license-copy { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.license-line { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--text-2); }
.license-copy .btn { flex: none; }
.license-text { width: 100%; resize: none; padding: 14px 16px; border-radius: var(--radius); border: 1px solid rgba(238, 243, 239, .25); background: var(--bg); color: var(--text); font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.6; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.btn-row.flush { margin-top: 0; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; font-size: 14px; }
.facts .k { font-size: 12px; color: var(--muted); display: block; margin-bottom: 4px; }
.facts .v { font-weight: 600; }

.orders-table { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; font-size: 14px; }
.orders-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 130px 140px; gap: 12px; padding: 14px 20px; color: var(--text-2); align-items: center; }
.orders-row + .orders-row { border-top: 1px solid var(--line); }
.orders-row.head { background: var(--surface); font-weight: 600; font-size: 13px; color: var(--text); }
.orders-row .st-ok { color: var(--green-text); }
.orders-row .st-wait { color: var(--warn); }
.orders-row .st-bad { color: var(--danger); }
.orders-row .st-off { color: var(--muted); }

.status-block { display: flex; align-items: flex-start; gap: 16px; }
.status-block h2 { font-size: 20px; font-weight: 700; }
.status-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(29, 185, 84, .16); color: var(--green-text); }
.status-block.is-problem .status-icon { background: rgba(255, 138, 122, .16); color: var(--danger); }
.spinner { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(238, 243, 239, .2); border-top-color: var(--green-text); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.sim-banner { padding: 10px 16px; border-radius: 10px; background: #3a2c10; border: 1px solid #5a4416; color: #ffd98a; font-size: 13px; font-weight: 600; }

/* ----------------------------------------------------------------- responsive */

@media (max-width: 1020px) {
    .site-header-inner { flex-wrap: wrap; gap: 12px 16px; padding-top: 12px; padding-bottom: 12px; }
    .header-spacer { display: none; }
    .brand { order: 1; margin-right: auto; }
    .brand-logo { height: 38px; }
    .cart-link { order: 2; }
    .account-menu, .login-link { order: 3; }
    .main-nav { order: 4; flex: 1 1 100%; gap: 22px; overflow-x: auto; }
    .header-search { order: 5; flex: 1 1 100%; }
}

@media (max-width: 720px) {
    :root { --gutter: 16px; }
    .hero { padding: 40px var(--gutter) 40px; }
    .hero h1 { font-size: 32px; }
    .lead { font-size: 16px; }
    .page-main { padding-top: 20px; padding-bottom: 48px; }
    .h1 { font-size: 28px; }
    .h2 { font-size: 22px; }
    .product-title { font-size: 32px; }
    .pid-page { gap: 16px; }
    .pid-page .pid-icon { width: 64px; height: 64px; border-radius: 16px; }
    .pid-page .pid-sub { font-size: 15px; }
    .product-hero-art { height: 220px; }
    .product-hero-art .art-name { font-size: 34px; }
    .product-layout, .catalog-layout, .cart-layout { gap: 28px; }
    .buybox, .summary, .panel { padding: 20px; }
    .brand-tag { display: none; }
    .catalog-tools { justify-content: stretch; }
    .field-search { max-width: none; }
    .filters { flex: 1 1 100%; }
    .cart-end { margin-left: 0; width: 100%; justify-content: space-between; }
    .cart-line { padding: 16px; gap: 12px 16px; }
    .cart-info { flex-basis: 100%; }
    .pid-cart .pid-icon { width: 48px; height: 48px; border-radius: 12px; }
    .orders-row { grid-template-columns: 1fr; gap: 2px; padding: 14px 16px; }
    .orders-row.head { display: none; }
    .orders-row > span:nth-child(1)::before { content: "Ordine n. "; color: var(--muted); }
    .section-alt { padding: 40px var(--gutter) 56px; }
    .account-panel { right: auto; left: auto; }
}

@media (max-width: 400px) {
    .account-menu summary .name { display: none; }
    .account-menu summary { padding: 0 6px; }
    .login-link { padding: 0 14px; }
}

/* ---- language switcher (header): a <details> with real links to the same page in the other languages ---- */
.lang-menu { position: relative; flex: none; }
.lang-menu summary {
    list-style: none; display: flex; align-items: center; justify-content: center; height: 44px; min-width: 44px; padding: 0 12px; border-radius: 999px;
    border: 1px solid rgba(238, 243, 239, 0.2); font-size: 13px; font-weight: 600; letter-spacing: .04em; cursor: pointer;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu[open] summary, .lang-menu summary:hover { background: var(--surface-2); }
.lang-list {
    position: absolute; right: 0; top: 52px; z-index: 30; min-width: 170px; margin: 0; padding: 8px; list-style: none; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.lang-list a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.lang-list a:hover { background: var(--surface-2); }
.lang-list a[aria-current="true"] { color: var(--green-text); font-weight: 600; }
@media (max-width: 720px) {
    .lang-menu { order: 3; }
}

/* avviso "aggiunto al carrello" in alto a destra (creato da store-ui.js) */
.toast-stack { position: fixed; top: 16px; right: 16px; z-index: 300; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 14px; background: var(--surface-2, #232823); border: 1px solid var(--line-strong); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); animation: toast-in .18s ease-out; }
.toast-ok { border-color: rgba(63, 211, 116, .55); }
.toast-warn { border-color: rgba(242, 169, 59, .6); }
.toast-mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--green); color: var(--on-green); }
.toast-warn .toast-mark { background: var(--warn); color: #1a1200; }
.toast-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.toast-msg { font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.toast-link { font-size: 13px; font-weight: 600; color: var(--green-text); text-decoration: underline; align-self: flex-start; }
.toast-close { flex: none; width: 28px; height: 28px; margin: -4px -4px 0 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.toast-close:hover { color: var(--text); background: var(--line); }
.toast-close:focus-visible, .toast-link:focus-visible { outline: 2px solid var(--green-text); outline-offset: 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* articolo già nel carrello: il pulsante diventa uno stato che porta al carrello */
.btn.is-in-cart { background: rgba(29, 185, 84, .12); border-color: var(--green); color: var(--green-text); }
.btn.is-in-cart::before { content: "\2713\00a0"; font-weight: 700; }
.btn.is-in-cart:hover { background: rgba(29, 185, 84, .2); color: var(--green-text); }
.pass-card .is-in-cart { margin-top: auto; }

/* ------------------------------------------------------------------ quantita (licenze a pagamento unico) */

/* carrello: - e + sulla riga, prezzo totale con sotto "unitario x quantita" */
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid rgba(238, 243, 239, .25); border-radius: 10px; overflow: hidden; }
.qty-stepper form { display: flex; }
.qty-btn { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
.qty-btn:hover:not(:disabled) { background: var(--line); }
.qty-btn:disabled { color: var(--muted); opacity: .45; cursor: not-allowed; }
.qty-btn:focus-visible { outline: 2px solid var(--green-text); outline-offset: -2px; }
.qty-value { min-width: 40px; padding: 0 6px; text-align: center; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.amount-box { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.unit-price { white-space: nowrap; }

/* scheda e card: con una quantita il pulsante resta e accanto compare "N nel carrello" (link al carrello) */
.in-cart-count { display: inline-flex; align-items: center; align-self: center; min-height: 44px; padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--green-text); text-decoration: underline; text-underline-offset: 3px; }
.in-cart-count:hover { color: var(--text); }
.in-cart-count:focus-visible { outline: 2px solid var(--green-text); outline-offset: 2px; border-radius: 6px; }
.card-actions > .in-cart-count { flex: 0 0 auto; }
.buybox .in-cart-count { justify-content: center; }

/* ordine e I miei prodotti: una licenza per unita, in un elenco compatto (con 50 licenze solo le prime sono aperte) */
.license-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.license-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.license-item summary { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 16px; cursor: pointer; font-size: 14px; font-weight: 600; }
.license-item summary::-webkit-details-marker { display: none; }
.license-item summary::before { content: "\25B8"; color: var(--muted); font-size: 12px; }
.license-item[open] summary::before { content: "\25BE"; }
.license-item summary code { font-size: 12px; font-weight: 400; color: var(--muted); }
.license-item summary:focus-visible { outline: 2px solid var(--green-text); outline-offset: -2px; border-radius: var(--radius); }
.license-item-body { padding: 0 16px 16px; }

@media (max-width: 640px) {
    .amount-box { align-items: flex-start; }
    .cart-end .qty-stepper { margin-right: auto; }
}

/* pagina contatti */
.contact-main { max-width: 720px; }
.contact-main .lead { margin-top: 12px; }
.contact-card { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.contact-label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.contact-email { font-size: 28px; font-weight: 700; color: var(--green-text); overflow-wrap: anywhere; }
.contact-email:hover { text-decoration: underline; }
@media (max-width: 720px) { .contact-email { font-size: 22px; } }

/* pagine legali (testo Markdown in Content/legal) */
.legal { max-width: 820px; }
.legal-doc h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 14px; overflow-wrap: anywhere; }
.legal-doc h2 { font-size: 22px; font-weight: 700; margin: 40px 0 12px; scroll-margin-top: 24px; }
.legal-doc h3 { font-size: 17px; font-weight: 700; margin: 28px 0 8px; scroll-margin-top: 24px; }
.legal-doc p, .legal-doc li { font-size: 15px; line-height: 1.75; color: var(--text-2); overflow-wrap: anywhere; }
.legal-doc p { margin: 0 0 14px; }
.legal-doc strong { color: var(--text); }
.legal-doc ul, .legal-doc ol { margin: 0 0 14px; padding-left: 24px; }
.legal-doc ul { list-style: disc; }
.legal-doc ol { list-style: decimal; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc li > ul, .legal-doc li > ol { margin: 6px 0 0; }
.legal-doc a { color: var(--green-text); text-decoration: underline; }
.legal-doc hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.legal-doc blockquote { margin: 0 0 14px; padding: 4px 0 4px 18px; border-left: 3px solid var(--line-strong); }
.legal-doc .table-box { margin: 18px 0 22px; }
.legal-doc .legal-table { min-width: 560px; }
.legal-doc .legal-table th, .legal-doc .legal-table td { font-size: 14px; line-height: 1.55; vertical-align: top; }
@media (max-width: 720px) { .legal-doc h1 { font-size: 28px; } .legal-doc h2 { font-size: 20px; } }

/* ------------------------------------------------------------------ contesto: persona o azienda */

/* header: azienda scelta accanto al nome, e il selettore nel menu account */
.ctx-chip { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 11px; font-weight: 600; color: var(--green-text); }
.ctx-label { padding: 6px 12px 4px; font-size: 12px; color: var(--muted); }
.account-panel .ctx-picker { padding: 0 6px 8px; }

.ctx-picker { display: flex; flex-direction: column; gap: 6px; }
.ctx-picker form { display: block; }
.ctx-option { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.ctx-option:hover { background: var(--surface-2); }
.ctx-option[aria-pressed="true"] { border-color: var(--green); background: rgba(29, 185, 84, .12); color: var(--green-text); }
.ctx-option:focus-visible { outline: 2px solid var(--green-text); outline-offset: 2px; }
.ctx-name { overflow-wrap: anywhere; }
.ctx-role { flex: none; font-size: 11px; font-weight: 600; color: var(--muted); }

/* carrello: "Stai acquistando come" e consenso al recesso */
.ctx-box { padding: 14px 16px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ctx-change summary { cursor: pointer; font-size: 13px; color: var(--green-text); text-decoration: underline; text-underline-offset: 3px; }
.ctx-change[open] summary { margin-bottom: 10px; }
.consent { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.consent input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--green); }

/* libreria e ordine: di chi e' quello che si vede */
.ctx-library { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ctx-library-text, .ctx-order { font-size: 14px; }
.ctx-library .ctx-picker { flex-direction: row; flex-wrap: wrap; }
.ctx-library .ctx-option { width: auto; }
.ctx-notice { max-width: 1200px; margin: 16px auto 0; }

/* download raggruppati (Server / Telecomando) e i passi di attivazione */
.dl-group + .dl-group { margin-top: 14px; }
.dl-group-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.activate-steps { list-style: decimal; padding-left: 22px; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.activate-steps li { font-size: 14px; line-height: 1.6; color: var(--text-2); }

/* "I miei prodotti": stesso blocco identità della scheda prodotto */
.pid-lib { gap: 18px; }
.pid-lib .pid-icon { width: 64px; height: 64px; border-radius: 16px; }
.pid-lib .pid-name { font-size: 22px; }
.pid-lib .pid-name a { color: inherit; }
.pid-lib .pid-name a:hover { color: var(--green-text); }
.pid-lib .sub { margin-top: 6px; }
@media (max-width: 720px) { .pid-lib .pid-icon { width: 52px; height: 52px; border-radius: 13px; } .pid-lib .pid-name { font-size: 19px; } }

/* download dietro un vedi/nascondi (details nativo) */
.dl-details { border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.dl-details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 18px; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 14px; }
.dl-details > summary::-webkit-details-marker { display: none; }
.dl-details > summary::after { content: "\25BE"; font-size: 14px; color: var(--green-text); transition: transform .15s; }
.dl-details[open] > summary::after { transform: rotate(180deg); }
.dl-details > summary:focus-visible { outline: 2px solid var(--green-text); outline-offset: 2px; }
.dl-details-body { padding: 4px 18px 18px; }
.dl-details-body .download-list { background: var(--surface); }

/* --------------------------------------------- scheda prodotto su schermi stretti: la card di acquisto subito dopo le immagini */

/* Sul desktop la card di acquisto sta a destra (sticky). Quando la pagina va a una colonna (tablet e telefono) non deve finire in fondo:
   il contenuto di .product-main diventa figlio diretto di .product-layout (display: contents) e si riordina con order:
   intestazione, immagini, CARD DI ACQUISTO, poi tutto il resto. L'ordine nel HTML non cambia (lettori di schermo e senza CSS: invariato). */
@media (max-width: 1020px) {
    .product-layout { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 32px; }
    .product-main { display: contents; }
    .product-main > * { order: 10; }
    .product-main > :first-child { order: 0; }
    .product-main > .gallery, .product-main > .product-hero-art { order: 1; }
    .buybox { order: 2; position: static; flex: none; max-width: none; width: 100%; }
}

/* ------------------------------------------------------------------------------------------------ pagina Aiuto e FAQ */

.help-main { max-width: 860px; }
.help-section { margin-top: 48px; }
.help-section .h2 { margin-bottom: 24px; }
.help-group { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 28px 0 10px; }
.help-main .faq { margin-top: 0; }
.help-main .faq p { padding: 0 18px 16px; margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.help-main .faq p.faq-link { padding-top: 0; margin-top: -6px; }
.help-main .faq .faq-link a { color: var(--green-text); font-weight: 600; }
.help-more { margin-top: 48px; }
.steps-more { margin-top: 24px; font-size: 14px; }
.steps-more a { color: var(--green-text); font-weight: 600; }

/* ------------------------------------------------------------------------- computer di una licenza (I miei prodotti) */

.machines { margin-top: 12px; }
.machine-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.machine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.machine:first-child { border-top: 0; }
.machine-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.machine-info strong { overflow-wrap: anywhere; font-size: 14px; }
.machine-info .status { align-self: flex-start; margin-top: 4px; }