/* C21: palette finale 2JNJE, tipografia C e marchio largo dell'app KNTRL.
   Provenienza degli asset locali in assets/c21/provenienza.json. */
:root{
  --bg:#0a0a0b;--surface:#111114;--surface2:#18181d;--surface3:#1d1d24;
  --border:#24242b;--border2:#30303b;--ctl:#6b6b80;
  --text:#f0f0f5;--text2:#a3a3b8;--text3:#8a8aa2;
  --accent:#4ade80;--accent2:#22c55e;--accent-alpha:rgba(74,222,128,.1);
  --warn:#fbbf24;--danger:#f87171;--purple:#c084fc;--info:#60a5fa;
  --font:"Manrope","Noto Sans Baht",system-ui,sans-serif;
  --font-head:"Roboto Condensed","Noto Sans Baht",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --r:8px;--r2:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);font-size:14px;line-height:1.55;background:var(--bg);color:var(--text);min-height:100vh;font-variant-numeric:tabular-nums lining-nums;-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit}
button{touch-action:manipulation}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.brand-wide{display:block;width:159px;height:auto;max-width:100%;flex-shrink:0}
.brand .brand-wide{width:210px;margin:0 auto}
.section-title,.gen-nome,.cart-panel-title,.error-title,.confirm-title{font-family:var(--font-head);font-weight:600;line-height:1.3;letter-spacing:.01em}
.tier-price,.tier-price-eur,.qty-input,.cart-summary-total,.cart-item-sub,.cart-item-price,.cart-total-price,.cart-total-eur,.order-total{font-family:var(--font-head);font-variant-numeric:tabular-nums lining-nums}
.tier-price,.tier-price-eur,.cart-item-price,.cart-total-price,.cart-total-eur{display:inline-block;white-space:nowrap;overflow-wrap:normal;word-break:normal}
.confirm-id,.order-code{font-family:var(--font-mono);font-weight:400}
.order-date{font-family:var(--font-head);font-variant-numeric:tabular-nums}

/* Loading and access errors */
#loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);z-index:100;gap:16px;padding:24px}
.loading-sub{font-size:12px;color:var(--text2);letter-spacing:.04em;margin-top:-8px}
.dots{display:flex;gap:6px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.2s infinite}
.dot:nth-child(2){animation-delay:.2s;background:var(--accent2)}
.dot:nth-child(3){animation-delay:.4s;background:var(--ctl)}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
#error-page{display:none;min-height:100vh;align-items:center;justify-content:center;padding:24px 16px;text-align:center}
.error-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:32px 28px;width:100%;max-width:440px;min-width:0}
.error-icon{font-size:40px;margin-bottom:16px}
.error-title{font-size:26px;margin-bottom:10px}
.error-sub{font-size:13.5px;color:var(--text2);line-height:1.65;overflow-wrap:break-word}

/* Header: the client can wrap onto a full row without losing its name. */
#app{display:none;flex-direction:column;min-height:100vh}
.header{background:var(--surface);border-bottom:1px solid var(--border);padding:8px 32px;min-height:64px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;position:sticky;top:0;z-index:10}
.header-left{display:flex;align-items:center;gap:16px;min-width:0}
.header-brand{line-height:1;flex-shrink:0}
.header-sub{font-size:12px;color:var(--text2);white-space:nowrap}
.header-right{display:flex;align-items:center;justify-content:flex-end;flex:1 1 180px;min-width:0;max-width:100%}
.client-chip{display:flex;align-items:center;gap:8px;max-width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r);padding:7px 12px;font-size:12.5px;font-weight:500;min-width:0}
.client-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
#client-name{min-width:0;overflow-wrap:break-word}

/* Catalog and prices */
.main{flex:1;max-width:960px;margin:0 auto;width:100%;padding:28px 32px 124px;min-width:0}
.section-title{font-size:26px;margin-bottom:6px}
.section-sub{font-size:13px;color:var(--text2);margin-bottom:16px;line-height:1.6}
#catalog-cambio-info,#cart-cambio-info{font-size:12px}
.genetiche-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:28px}
.gen-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);min-width:0;display:flex;flex-direction:column;transition:border-color .2s}
.gen-card:hover{border-color:var(--border2)}
.gen-card.disabled{opacity:.6;pointer-events:none}
.gen-card-header{padding:20px 20px 14px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px 12px}
.gen-card-header>div{flex:1 1 140px;min-width:0}
.gen-nome{font-size:21px;overflow-wrap:break-word}
.gen-cat{font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px;display:inline-block;margin-top:6px;line-height:1.5;white-space:nowrap}
.cat-top{background:var(--accent-alpha);color:var(--accent)}
.cat-mid{background:rgba(245,158,11,.12);color:var(--warn)}
.cat-low{background:rgba(192,132,252,.1);color:var(--purple)}
.stock-badge{font-size:12px;padding:3px 8px;border-radius:4px;white-space:nowrap;flex-shrink:0}
.stock-ok{background:var(--accent-alpha);color:var(--accent)}
.stock-low{background:rgba(245,158,11,.1);color:var(--warn)}
.stock-zero{background:rgba(239,68,68,.1);color:var(--danger)}
.gen-prezzi{padding:0 20px 16px;flex:1}
.tier-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:9px 0;border-bottom:1px solid var(--border)}
.tier-row:last-child{border-bottom:none}
.tier-label{font-size:13px;color:var(--text2);min-width:0;max-width:100%;overflow-wrap:break-word}
.tier-row>span:last-child{display:flex;align-items:baseline;justify-content:flex-end;flex-wrap:wrap;gap:2px 8px;max-width:100%;margin-left:auto}
.tier-price{font-size:18px;color:var(--accent);font-weight:500}
.tier-price-eur{font-size:15px;color:var(--text2)}
.gen-actions{padding:14px 20px;background:var(--surface2);border-top:1px solid var(--border);border-radius:0 0 var(--r2) var(--r2);display:flex;gap:8px;align-items:center}
.qty-input{flex:1 1 0;width:100%;min-width:0;min-height:44px;background:var(--bg);border:1px solid var(--ctl);border-radius:var(--r);padding:10px 12px;color:var(--text);font-size:16px;line-height:1.4}
.qty-input::placeholder{color:var(--text2);opacity:1}
.qty-input:focus{border-color:var(--accent)}
.btn-add{flex-shrink:0;background:var(--accent);color:var(--bg);border:none;border-radius:var(--r);padding:10px 16px;font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;min-height:44px}
.btn-add:disabled,.btn-order:disabled{background:var(--border2);color:var(--text3);cursor:not-allowed}
.btn-add:hover:not(:disabled),.btn-order:hover:not(:disabled){background:#6ee7a0}

/* Cart summary and expanded panel */
.cart-sticky{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);padding:12px 24px max(12px,env(safe-area-inset-bottom));z-index:20;transition:transform .3s}
.cart-sticky.empty{transform:translateY(100%)}
.cart-summary{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;min-height:44px;max-width:896px;margin:0 auto;cursor:pointer}
.cart-summary-left{display:flex;align-items:center;gap:10px;min-width:0}
.cart-count-badge{background:var(--accent);color:var(--bg);border-radius:50%;min-width:28px;height:28px;padding:0 6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0}
.cart-summary-text{font-size:13.5px;font-weight:500}
.cart-summary-total{font-size:23px;font-weight:500;color:var(--accent);white-space:nowrap;margin-left:auto}
.cart-panel{display:none;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r2) var(--r2) 0 0;position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:720px;z-index:25;max-height:85vh;max-height:85dvh;overflow-y:auto;padding:20px 24px max(20px,env(safe-area-inset-bottom));box-shadow:0 -8px 32px rgba(0,0,0,.5);overscroll-behavior:contain}
.cart-panel.open{display:block}
.cart-panel-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.cart-panel-title{font-size:22px;min-width:0}
.btn-close-cart{background:none;border:1px solid var(--ctl);color:var(--text);border-radius:var(--r);padding:10px 14px;font-size:13px;cursor:pointer;min-height:44px;flex-shrink:0}
.cart-item{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:14px 0;border-bottom:1px solid var(--border);min-width:0}
.cart-item:last-child{border-bottom:none}
.cart-item>:first-child{flex:1 1 180px;min-width:0;max-width:100%;overflow-wrap:break-word}
.cart-item>:last-child{max-width:100%;margin-left:auto;flex-shrink:0}
.cart-item-name{font-size:13.5px;font-weight:500;overflow-wrap:break-word}
.cart-item-sub{font-size:15px;color:var(--text2);margin-top:4px;overflow-wrap:normal;word-break:normal}
.cart-item-price{font-size:20px;color:var(--accent);font-weight:500}
.btn-remove{background:none;border:1px solid transparent;border-radius:var(--r);color:var(--text2);cursor:pointer;font-size:22px;padding:4px 8px;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.btn-remove:hover{color:var(--danger);border-color:var(--border2)}
.cart-total-row{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 16px;font-weight:600;padding-top:16px;margin-top:4px;border-top:1px solid var(--border2);font-size:15px}
.cart-total-row>div{display:flex;justify-content:flex-end;align-items:baseline;flex-wrap:wrap;gap:4px 8px;max-width:100%;margin-left:auto}
.cart-total-price{color:var(--accent);font-size:26px;font-weight:500}
.cart-total-eur{font-size:18px;color:var(--text2);font-weight:400}
#cart-cambio-info{margin-top:8px}
.note-area{width:100%;min-width:0;background:var(--surface2);border:1px solid var(--ctl);border-radius:var(--r);padding:10px 12px;color:var(--text);font-size:14px;resize:vertical;margin-top:10px;min-height:72px}
.note-area::placeholder{color:var(--text2);opacity:1}
.note-area:focus{border-color:var(--accent)}
.btn-order{width:100%;background:var(--accent);color:var(--bg);border:none;border-radius:var(--r);padding:14px 16px;font-weight:600;font-size:14px;cursor:pointer;margin-top:10px;min-height:52px;line-height:1.5}

/* Confirmation and order history */
.confirm-card{background:var(--surface);border:1px solid rgba(74,222,128,.45);border-radius:var(--r2);padding:28px 24px;text-align:center;margin:0 0 20px;min-width:0}
.confirm-icon{font-size:40px;margin-bottom:12px}
.confirm-title{font-size:26px;margin-bottom:10px}
.confirm-sub{font-size:13.5px;color:var(--text2);line-height:1.65}
.confirm-id{color:var(--accent);font-size:14px;margin:10px 0;overflow-wrap:break-word}
.ordini-section{margin-top:32px}
.order-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:20px;margin-bottom:12px;min-width:0}
.order-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px}
.order-id{font-size:11.5px;color:var(--text2);min-width:0;max-width:100%;overflow-wrap:break-word}
.order-status{font-size:11px;font-weight:500;padding:3px 8px;border-radius:4px;white-space:nowrap}
.st-attesa{background:rgba(245,158,11,.15);color:var(--warn)}
.st-conf{background:rgba(59,130,246,.15);color:var(--info)}
.st-sped{background:rgba(34,197,94,.15);color:var(--accent)}
.st-pag{background:var(--accent-alpha);color:var(--accent)}
.st-ann{background:rgba(239,68,68,.15);color:var(--danger)}
.order-items{font-size:13px;color:var(--text2);margin-bottom:10px;line-height:1.65;overflow-wrap:break-word}
.order-total{font-size:22px;font-weight:500;color:var(--accent);overflow-wrap:normal;word-break:normal}
.order-total>span{display:inline-block;white-space:nowrap}

/* Transient messages remain readable on narrow screens. */
.toast{position:fixed;bottom:calc(92px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(60px);width:max-content;max-width:calc(100vw - 32px);background:var(--surface3);border:1px solid var(--accent);border-radius:var(--r);padding:12px 16px;font-size:13px;font-weight:500;line-height:1.55;z-index:999;pointer-events:none;opacity:0;transition:transform .3s,opacity .3s;overflow-wrap:break-word}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.cart-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:24}
.cart-backdrop.open{display:block}

@media(min-width:600px){.genetiche-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){
  .header{padding:8px 16px;gap:6px 12px}
  .header-left{gap:12px}
  .header-brand .brand-wide{width:126px}
  .header-right{flex-basis:100%;justify-content:flex-start}
  .client-chip{font-size:12px;padding:5px 10px}
  .main{padding:20px 16px 124px}
  .section-title{font-size:24px}
  .gen-card-header{padding:16px 16px 12px}
  .gen-prezzi{padding:0 16px 14px}
  .gen-actions{padding:12px 16px}
  .cart-sticky{padding-left:16px;padding-right:16px}
  .cart-panel{padding-left:16px;padding-right:16px}
  .note-area{font-size:16px}
  .order-card{padding:16px}
}
@media(prefers-reduced-motion:reduce){.dot{animation:none}.gen-card,.cart-sticky,.toast{transition:none}}