/* ============================================================
   ART STONE × LUNA — Design System "Quiet Luxury Industrial"
   Matte black caldo · accent bronzo ArtStone · Geist · radius
   generosi · hover sobri · noise fractal. Struttura invariata.
   ============================================================ */
:root{
  /* canvas matte (near-black caldo, no nero puro) */
  --bg:#0c0b08;
  --bone:#F2F0EA;

  /* single accent — bronzo ArtStone (dosato, ~10% della UI) */
  --accent:#d2832f;          /* bronzo-amber su nero */
  --accent-bright:#e8a14e;   /* hover / focus / KPI */
  --accent-deep:#9c5512;
  --gold:#e0a44e;            /* highlight caldo (step corrente) */

  /* surface layering — warm white alpha, niente bg solido */
  --surface-1:rgba(255,249,240,0.030);
  --surface-2:rgba(255,249,240,0.055);
  --surface-3:rgba(255,249,240,0.085);
  --popover:#16140f;         /* superfici solide: drawer/modal/menu */

  /* text hierarchy 95 / 65 / 45 */
  --ink:rgba(242,240,234,0.95);
  --muted:#A7A299;
  --faint:#6B665E;

  /* border neutro (warm white 7%), accent solo on hover */
  --line:rgba(255,249,240,0.08);
  --line-strong:rgba(255,249,240,0.15);

  /* alias legacy usati nel codice */
  --paper:var(--bg);
  --card:var(--surface-1);
  --accent-d:var(--accent-deep);
  --bar:#15140f;

  --shadow:0 10px 34px rgba(0,0,0,.45);
  /* topbar = barra sticky translucida (tokenizzata per il tema chiaro) */
  --topbar-bg:rgba(12,11,8,.72);
  --r:18px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --font:"Geist",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

/* ============================================================
   TEMA CHIARO (light) — override SOLO dei token, niente regole
   per-componente. Bg bone, ink near-black caldo, surface bianco
   caldo con bordi sottili scuri. ACCENT BRONZO INVARIATO.
   Preview prodotto + riepilogo/PDF erano già chiari → intatti.
   ============================================================ */
[data-theme="light"]{
  --bg:#F2F0EA;                 /* bone (warm white) */

  /* surface layering — ink caldo a bassa alpha su bone */
  --surface-1:rgba(26,23,18,0.032);
  --surface-2:rgba(26,23,18,0.058);
  --surface-3:rgba(26,23,18,0.092);
  --popover:#FBFAF6;            /* superfici solide: drawer/modal/menu */

  /* text hierarchy near-black caldo (92% / muted / faint), tutti opachi e leggibili su bone */
  --ink:rgba(26,23,18,0.92);
  --muted:#6E685E;
  /* faint: #938C80 rendeva solo ~2.6-2.9:1 su bone/surface (testo piccolo illeggibile: char-count,
     intestazioni preset, eyebrow .wip). Scurito a #787268 (~3.7-4.2:1) restando comunque più chiaro
     di --muted → gerarchia ink>muted>faint preservata, ma leggibile anche in chiaro. */
  --faint:#787268;

  /* border scuro sottile ~8/16% */
  --line:rgba(26,23,18,0.10);
  --line-strong:rgba(26,23,18,0.18);

  /* alias legacy */
  --bar:#FBFAF6;

  /* ombre molto leggere in chiaro */
  --shadow:0 8px 28px rgba(40,33,22,.12);
  --topbar-bg:rgba(242,240,234,.78);
}
/* Logo su sfondo chiaro: il file è bone → in dark lo si rende bianco (brightness0 invert1);
   in light va reso SCURO (solo brightness0, niente invert) così resta visibile. Unica eccezione
   per-selettore consentita dal brief (logo), non duplica layout. La preview/recap restano a colori. */
[data-theme="light"] .bar-logo,
[data-theme="light"] .drawer-logo,
[data-theme="light"] .login-logo{filter:brightness(0) opacity(.82)}
/* In chiaro l'input è chiaro → il glifo nativo del calendario va lasciato SCURO (niente invert,
   che lo schiarirebbe rendendolo poco visibile). Stesso ragionamento per la × dei campi search. */
[data-theme="light"] input[type=date]::-webkit-calendar-picker-indicator{filter:none;opacity:.6}
[data-theme="light"] input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:.95}
/* Bronzo come TESTO in chiaro: il bright (#e8a14e) su bone rende ~1.9:1 (illeggibile). Sul fondo
   chiaro il bronzo-testo passa al DEEP (#9c5512 ≈ 4.95:1, AA) — stesso identico hue del brand, solo
   più scuro per leggere su bone. I bronzi come RIEMPIMENTO (bottoni/chip/cartpill/step corrente) NON
   sono toccati: restano bright e mantengono il "pop". Eccezione brief: recap/preview restano a colori. */
[data-theme="light"] a,
[data-theme="light"] .login .reg a,
[data-theme="light"] .char-count.near,
[data-theme="light"] .search-results .sr .p,
[data-theme="light"] .hl,
[data-theme="light"] .tile .pr,
[data-theme="light"] .browse-link,
[data-theme="light"] .prow .pp,
[data-theme="light"] .prod-card .pc-price,
[data-theme="light"] .dl-link:hover,
[data-theme="light"] .order .ot,
[data-theme="light"] .draft .ot,
[data-theme="light"] .stepper .st.done,
[data-theme="light"] .qchip:hover,
[data-theme="light"] .dedica-presets .dp.active,
[data-theme="light"] .cart .tot b,
[data-theme="light"] .result .ok,
[data-theme="light"] .rrow.big b,
[data-theme="light"] .result .dl a,
[data-theme="light"] .drawer .dh,
[data-theme="light"] .drawer .di.active,
[data-theme="light"] .stat-n,
[data-theme="light"] .kit-tot b,
[data-theme="light"] .search-results .sr-all,
[data-theme="light"] .search-results .sr-all .sr-all-arrow,
[data-theme="light"] .pd-pr-row.pd-pr-tot b,
[data-theme="light"] .badge{color:var(--accent-deep)}
/* Testo "distruttivo" (rimuovi articolo, svuota, esci): il salmone #e08a7a rende solo ~2.2:1 su bone.
   In chiaro passa a un rosso-mattone più scuro (#a8483a ≈ 5:1, AA) — caldo e sobrio, non allarmante,
   coerente col tono rispettoso. In dark resta il salmone originale. */
[data-theme="light"] .clear-cart:hover,
[data-theme="light"] .citem .cp .x,
[data-theme="light"] .drawer .di.exit,
[data-theme="light"] .acc-exit{color:#a8483a}
*{box-sizing:border-box}
/* transizione sobria al cambio tema (no flash); rispettata da prefers-reduced-motion sotto */
html,body{transition:background-color .3s var(--ease,ease),color .3s var(--ease,ease)}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--font);color:var(--ink);line-height:1.5;
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 12% -5%, rgba(210,131,47,.07) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 88% 105%, rgba(210,131,47,.05) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:cover,cover,300px 300px;
  background-attachment:fixed,fixed,fixed;
  background-repeat:no-repeat,no-repeat,repeat;
}
h1,h2,h3{font-family:var(--font);font-weight:500;letter-spacing:-.01em;margin:0}
button{font-family:inherit}
a{color:var(--accent-bright)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
.boot{display:grid;place-items:center;height:100vh;color:var(--muted)}
.hidden{display:none !important}
.muted{color:var(--muted)}

/* scrollbar sottile, thumb bronzo */
*{scrollbar-width:thin;scrollbar-color:rgba(210,131,47,.28) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(210,131,47,.24);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(210,131,47,.42)}

/* selezione testo on-brand (niente colore forzato → ok su dark e su card chiare) */
::selection{background:rgba(210,131,47,.30)}
::-moz-selection{background:rgba(210,131,47,.30)}

/* ---------- LOGIN ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:radial-gradient(1200px 540px at 50% -12%, rgba(210,131,47,.10) 0%, transparent 62%)}
.login-box{width:min(440px,92vw);text-align:center;padding:8px}
.login .logo{font-size:40px;color:var(--accent)}
.login-logo{display:block;width:230px;max-width:74%;margin:0 auto 16px;filter:brightness(0) invert(1) opacity(.92)}
.login h1{font-size:30px;margin:6px 0 2px}
.login .sub{color:var(--muted);margin-bottom:26px}
.login .panel{background:var(--surface-1);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(8px);padding:24px;text-align:left}
.login label{font-size:11px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.14em}
/* lente nella ricerca agenzia del login (coerente con la ricerca home) */
#lq{padding-left:46px;background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7A299' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 17px center;background-size:18px 18px}
.login-results{list-style:none;margin:10px 0 0;padding:0;border:1px solid var(--line);border-radius:14px;max-height:240px;overflow:auto;background:var(--surface-1)}
.login-results li{padding:11px 13px;cursor:pointer;border-bottom:1px solid var(--line);font-size:14px;transition:background .2s var(--ease)}
.login-results li:last-child{border-bottom:none}
.login-results li:hover{background:var(--surface-2)}
.login .reg{margin-top:16px;text-align:center;font-size:13px;color:var(--muted)}
.login .reg a{color:var(--accent-bright);cursor:pointer;font-weight:500}
/* Login P.IVA+password (modalità demo/auth). Riusa .field + .cfg-add (token-driven → due temi). */
.login-form .field{margin-bottom:14px}
.login-form .field:first-of-type{margin-top:2px}
.login-form .login-btn{margin-top:8px}
.login-form .login-btn:disabled{opacity:.6;cursor:default}
.login-err{margin:2px 0 10px;padding:10px 13px;border-radius:12px;font-size:13px;
  color:var(--accent-deep);background:rgba(210,131,47,.10);border:1px solid rgba(210,131,47,.38)}
[data-theme="light"] .login-err{color:var(--accent-deep)}

input,select,textarea{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:14px;font-size:14.5px;background:var(--surface-2);color:var(--ink);font-family:inherit;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(210,131,47,.16)}
textarea{resize:vertical;min-height:64px}
select option{background:var(--popover);color:var(--ink)}
/* icona calendario nativa dei campi data: schiarita per essere visibile su input scuri */
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(.85);opacity:.55;cursor:pointer}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:.9}
/* pulsante × di cancellazione dei campi search: × chiaro visibile su input scuri */
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;height:15px;width:15px;margin-left:8px;cursor:pointer;opacity:.55;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23A7A299' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5l10 10M15 5l-10 10'/%3E%3C/svg%3E")}
input[type=search]::-webkit-search-cancel-button:hover{opacity:1}
/* select: chevron custom coerente col tema (niente arrow nativo dell'OS) */
select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7A299' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center;
  background-size:16px 16px}
.char-count{font-size:12px;color:var(--faint);text-align:right;margin-top:4px}
.char-count.near{color:var(--accent-bright)}

/* ---------- TOPBAR ---------- */
.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;position:sticky;top:0;z-index:20;
  background:var(--topbar-bg);backdrop-filter:blur(12px) saturate(120%);border-bottom:1px solid var(--line)}
.topbar .bar-logo{height:30px;width:auto;flex-shrink:0;cursor:pointer;filter:brightness(0) invert(1) opacity(.92)}
.iconbtn{background:var(--surface-2);border:1px solid var(--line);color:var(--ink);width:40px;height:40px;border-radius:12px;font-size:18px;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease)}
.iconbtn:hover{background:var(--surface-3);border-color:var(--line-strong)}
.topbar .who{font-size:13.5px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.topbar .who b{color:var(--ink);font-weight:500}
.topbar .cartpill{background:var(--accent);color:#1a1206;border:none;border-radius:999px;padding:9px 16px;font-weight:600;cursor:pointer;font-size:13px;transition:background .2s var(--ease)}
.topbar .cartpill:hover{background:var(--accent-bright)}
.iconbtn.bell{position:relative;flex-shrink:0}
.bell-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--accent);color:#1a1206;font-size:10px;font-weight:600;line-height:17px;text-align:center;border:1.5px solid var(--topbar-bg);box-sizing:border-box}

/* ---------- HOME ---------- */
.home{max-width:1060px;margin:0 auto;padding:10px 20px 60px}
.hero{text-align:center;padding:46px 0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-weight:500;margin-bottom:14px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--accent)}
.hero h2{font-size:29px;letter-spacing:-.02em}
.hero p{color:var(--muted);margin:10px 0 24px}
.search-wrap{position:relative;max-width:680px;margin:0 auto}
.search-wrap input{padding:17px 19px 17px 52px;font-size:17px;border-radius:18px;border:1px solid var(--line-strong);
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7A299' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 19px center;
  background-size:20px 20px}
.search-results{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--popover);border:1px solid var(--line-strong);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;z-index:15;max-height:60vh;overflow-y:auto}
.search-results .sr{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;border-bottom:1px solid var(--line);transition:background .18s var(--ease)}
.search-results .sr:last-child{border-bottom:none}
.search-results .sr:hover,.search-results .sr.active{background:var(--surface-2)}
.search-results .sr.active{box-shadow:inset 2px 0 0 var(--accent)}
.search-results .sr .l b{font-size:14.5px}
.search-results .sr .l small{color:var(--muted)}
.search-results .sr .p{color:var(--accent-bright);font-weight:600;white-space:nowrap}
.hl{color:var(--accent-bright);background:rgba(210,131,47,.12);border-radius:3px}
.search-results .cat-h{padding:9px 16px;background:var(--surface-1);font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
.search-results .sr-more{justify-content:center;cursor:default;font-size:12px;background:var(--surface-1)}
.search-results .sr-more:hover{background:var(--surface-1)}

.section{margin-top:38px}
.section h3{font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:.16em;font-weight:500;color:var(--muted)}
.section h3::before{content:"";flex:0 0 auto;width:24px;height:1px;background:var(--accent)}
.section h3 .wip{font-size:9.5px;background:var(--surface-2);color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-weight:500;letter-spacing:.1em}
.tilerow{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:14px}
.tile{background:var(--surface-1);border:1px solid var(--line);border-radius:18px;padding:16px;cursor:pointer;transition:background .28s var(--ease),border-color .28s var(--ease)}
.tile:hover{background:var(--surface-2);border-color:rgba(210,131,47,.42)}
.tile .ic{font-size:22px}
.tile .t{font-weight:500;margin-top:10px;font-size:14px;color:var(--ink)}
.tile .s{color:var(--muted);font-size:12px}
.tile .pr{color:var(--accent-bright);font-weight:600;margin-top:6px;font-size:14px}
.kit{opacity:.7}
.empty{color:var(--muted);font-size:13.5px;background:var(--surface-1);border:1px dashed var(--line-strong);border-radius:18px;padding:18px}
.browse-link{color:var(--accent-bright);cursor:pointer;font-weight:500;font-size:14px}
.browse-link:hover{text-decoration:underline}
.prow{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--surface-1);border:1px solid var(--line);border-radius:16px;padding:13px 16px;margin-bottom:8px;cursor:pointer;transition:background .28s var(--ease),border-color .28s var(--ease)}
.prow:hover{background:var(--surface-2);border-color:rgba(210,131,47,.42)}
.prow .pl b{font-size:14px;display:block;line-height:1.3;color:var(--ink)}
.prow .pl small{color:var(--muted);font-size:12px}
.prow .pp{color:var(--accent-bright);font-weight:600;white-space:nowrap}
.prod-card{aspect-ratio:3/4;border:1px solid var(--line);border-radius:18px;background:var(--surface-1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center}
.prod-card .pc-ic{font-size:48px}
.prod-card .pc-name{font-size:16px;font-weight:500}
.prod-card .pc-price{color:var(--accent-bright);font-weight:600;font-size:18px}
.subfilter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}

/* ---------- SCHEDA PRODOTTO (dettagli categorie a lista) — token-driven, vale in entrambi i temi ---------- */
.pd-info{margin-top:16px}
.pd-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--faint);font-weight:500;margin-bottom:10px}
.pd-specs{margin:0 0 16px;display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface-1)}
.pd-spec{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line)}
.pd-spec:last-child{border-bottom:none}
.pd-spec dt{color:var(--muted);font-size:12.5px}
.pd-spec dd{margin:0;color:var(--ink);font-size:13.5px;text-align:right}
.pd-price{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--surface-1)}
.pd-pr-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:13px;color:var(--ink);padding:3px 0}
.pd-pr-row.pd-pr-faint{color:var(--muted)}
.pd-pr-row.pd-pr-tot{border-top:1px solid var(--line);margin-top:6px;padding-top:9px;font-size:14px}
.pd-pr-row.pd-pr-tot b{color:var(--accent-bright);font-weight:600}
.pd-price.pd-quote{font-size:13px;line-height:1.55;color:var(--muted)}
.pd-price.pd-quote b{color:var(--ink);font-weight:500}
.pd-rel{margin-top:30px}
.pd-rel-list{display:flex;flex-direction:column}
.pd-rel-row .pl b{font-size:13.5px}
.subfilter+.pd-rel,.pd-rel:first-child{margin-top:16px}

/* ---------- RIEPILOGO (documento — resta CHIARO, stampabile) ---------- */
.recap{max-width:680px;margin:0 auto;padding:30px 26px;color:#23211e;background:#f6f4ee;border:1px solid #e2ddd2;border-radius:20px;box-shadow:var(--shadow)}
.recap-head{display:flex;align-items:center;gap:16px;border-bottom:2px solid #e2ddd2;padding-bottom:14px;margin-bottom:16px}
.recap-logo{height:34px}
.recap-h h2{font-size:22px;color:#23211e}
.recap-meta{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:16px;font-size:14px}
/* Blocco "Dettagli ordine" (date/provino/note) sul foglio chiaro: pannello sobrio, da stampare. */
.recap-detail{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0 0 16px;padding:12px 14px;background:#fbfaf6;border:1px solid #e7e2d7;border-radius:12px;font-size:13.5px;color:#4a4843}
.recap-detail b{color:#23211e;font-weight:600}
.recap-detail .recap-fullw{flex-basis:100%}
/* Personalizzazione per articolo sotto il nome nella tabella (dedica/stile/barra/note).
   Colore leggibile (AA) sul foglio chiaro: è contenuto, non un'etichetta accessoria. */
.recap-isub{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:#5f615b}
.recap-tab{width:100%;border-collapse:collapse;font-size:14px}
.recap-tab th{text-align:left;border-bottom:1px solid #e2ddd2;padding:8px 6px;color:#7b7d77;font-weight:600}
.recap-tab td{border-bottom:1px solid #e2ddd2;padding:9px 6px}
.recap-tab th:nth-child(n+2),.recap-tab td:nth-child(n+2){text-align:right;white-space:nowrap}
.recap-tot{margin-top:16px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:14px}
.recap-tot .big{font-size:18px;color:var(--accent-deep);border-top:1px solid #e2ddd2;padding-top:8px;margin-top:4px}
.recap-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px}
.recap .muted{color:#7b7d77}
@media print{.no-print{display:none!important}.topbar{display:none!important}body{background:#fff}.recap{max-width:100%;border:none;box-shadow:none}}

/* toast */
#toast{position:fixed;left:0;right:0;bottom:24px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:60;pointer-events:none}
.toast-msg{background:var(--popover);color:var(--ink);border:1px solid var(--line-strong);padding:12px 18px;border-radius:14px;font-size:14px;box-shadow:var(--shadow);max-width:90vw;text-align:center;opacity:0;transform:translateY(8px);animation:toast-in .28s var(--ease) forwards}
.toast-msg.err{background:#3a1c17;border-color:#7a3a2e;color:#f3d9d2}
.toast-msg.out{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
/* snackbar con azione (es. Annulla): testo + bottone affiancati, cliccabile (il #toast ha pointer-events:none) */
.toast-msg.toast-act{display:inline-flex;align-items:center;gap:14px;text-align:left;pointer-events:auto;padding-right:8px}
.toast-msg.toast-act .toast-text{flex:1}
.toast-action{flex-shrink:0;background:transparent;border:1px solid var(--line-strong);color:var(--accent);font:inherit;font-size:13px;letter-spacing:.02em;padding:6px 12px;border-radius:10px;cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.toast-action:hover{background:var(--surface-2);border-color:var(--accent)}
.toast-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* in chiaro il bronzo bright è troppo poco contrastato sul popover chiaro → bronzo deep (AA), come .badge */
[data-theme="light"] .toast-action{color:var(--accent-deep)}
@keyframes toast-in{to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- SKELETON (stati di caricamento) ----------
   Impalcatura mostrata durante i fetch (ordini/dettaglio/notifiche/account/home). Token-driven → corretta in
   entrambi i temi senza regole per-tema. Lo shimmer scorre sul bordo bronzo molto tenue; sotto
   prefers-reduced-motion l'animazione è già neutralizzata dalla regola globale qui sopra (resta uno stato statico). */
.skeleton{max-width:840px;margin:0 auto;padding:6px 0}
.sk{display:block;border-radius:8px;background:var(--surface-2);position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(210,131,47,.10),transparent);animation:sk-shimmer 1.25s var(--ease) infinite}
.sk-line{height:13px;margin:7px 0}
.sk-block{width:100%;border-radius:14px}
.sk-eyebrow{height:10px;width:34%;margin-bottom:12px}
.sk-title{height:24px;width:56%;margin:0 0 6px}
.sk-amt{width:64px;flex-shrink:0;margin:0}
.sk-card{background:var(--surface-1);border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:12px}
.sk-head{margin:0 0 18px}
.sk-head.sk-center{text-align:center}.sk-head.sk-center .sk-line{margin-left:auto;margin-right:auto}
.sk-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sk-row-in{padding:11px 0;border-bottom:1px solid var(--line)}.sk-row-in:last-child{border-bottom:none}
.sk-list{display:block}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.sk-tilerow{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.sk-tilerow .sk-card{margin-bottom:0}
.sk-hero{padding:8px 0 22px}.sk-hero .sk-block{margin-top:14px}
.sk-sec{margin-top:22px}.sk-sec>.sk-line:first-child{margin-bottom:12px}
@keyframes sk-shimmer{to{transform:translateX(100%)}}

/* ---------- STATO ERRORE DI RETE (con Riprova) ----------
   Card centrata che sostituisce lo skeleton quando un fetch fallisce, con bottone Riprova (rilancia la
   stessa richiesta) e un back opzionale. Token-driven (surface/line/ink/muted/accent) → resa corretta in
   ENTRAMBI i temi senza override per-tema. Icona decorativa (aria-hidden): cerchio bronzo tenue, nessun
   testo bronzo a basso contrasto. .es-inline = variante leggera per i contenitori della home. */
.errstate{max-width:560px;margin:6vh auto 0;padding:6px 0;display:flex;justify-content:center}
.es-card{width:100%;background:var(--surface-1);border:1px solid var(--line);border-radius:20px;padding:30px 26px;text-align:center}
.es-ic{width:46px;height:46px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--surface-2);border:1px solid rgba(210,131,47,.34);color:var(--accent);font-size:20px;line-height:1}
.es-title{font-size:18px;color:var(--ink);margin-bottom:8px}
.es-msg{font-size:14px;color:var(--muted);line-height:1.55;margin:0 auto 20px;max-width:420px}
.es-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.es-cta .cfg-add{width:auto;margin-top:0;padding:12px 26px}
.es-cta .ghost{padding:12px 20px}
.es-inline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--surface-1);border:1px dashed var(--line-strong);border-radius:18px;padding:16px 18px}
.es-inline-t{color:var(--muted);font-size:13.5px}

/* ---------- ORDERS ---------- */
.order{background:var(--surface-1);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:10px}
.order[data-id]{cursor:pointer;transition:background .28s var(--ease),border-color .28s var(--ease)}
.order[data-id]:hover{background:var(--surface-2);border-color:rgba(210,131,47,.42)}
.od-statodesc{font-size:13px;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.od-statodesc::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-bright);flex-shrink:0}
.rrow .od-is{color:var(--muted);font-size:12px;line-height:1.5}
.od-foto{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.od-foto-k{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:500;margin-bottom:8px}
.od-foto-img{width:120px;height:120px;object-fit:cover;border-radius:12px;border:1px solid var(--line-strong);display:block}
.od-istr{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.5}
/* Timeline verticale del ciclo di vita ordine (dettaglio ordine). Token-driven → legge in
   entrambi i temi: i pallini sono RIEMPIMENTI bronzo/linee (non testo) → niente problemi di
   contrasto in chiaro; titoli su --ink, descrizioni/date su --muted; gli step futuri sfumano. */
.od-timeline{list-style:none;margin:2px 0 0;padding:0}
.tl-step{position:relative;display:flex;gap:14px;padding:0 0 18px 0}
.tl-step:last-child{padding-bottom:0}
/* connettore: linea verticale che parte dal nodo verso lo step successivo */
.tl-step::before{content:"";position:absolute;left:6px;top:16px;bottom:-2px;width:2px;background:var(--line-strong)}
.tl-step:last-child::before{display:none}
.tl-step.done::before,.tl-step.cur::before{background:rgba(210,131,47,.35)}
.tl-node{position:relative;z-index:1;flex-shrink:0;width:14px;height:14px;border-radius:50%;margin-top:2px;background:var(--surface-2);border:2px solid var(--line-strong);box-sizing:border-box}
.tl-step.done .tl-node{background:var(--accent);border-color:transparent}
.tl-step.cur .tl-node{background:var(--accent);border-color:transparent;box-shadow:0 0 0 4px rgba(210,131,47,.18)}
.tl-body{display:flex;flex-direction:column;gap:2px;padding-bottom:2px}
.tl-t{font-size:14px;color:var(--ink);line-height:1.3}
.tl-step.cur .tl-t{font-weight:500}
.tl-step.todo .tl-t{color:var(--muted)}
.tl-meta{font-size:11.5px;color:var(--muted)}
.tl-d{font-size:12.5px;color:var(--muted);line-height:1.5}
.tl-next{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.tl-next b{color:var(--ink);font-weight:500}
.od-actions{max-width:680px;margin:16px auto 0;display:flex;justify-content:space-between;align-items:center;gap:12px}
.od-btns{display:flex;gap:10px}
/* Scelta inline del Riordina (Aggiungi vs Sostituisci) — token-driven, vale in entrambi i temi.
   Riusa .cfg-add/.ghost-sm (già tematizzati); .ro-q = --muted su --surface-1. */
.ro-choice{max-width:680px;margin:12px auto 0;display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px;background:var(--surface-1);border:1px solid var(--line);border-radius:14px}
.ro-q{color:var(--muted);font-size:13px;margin-right:2px}
.ro-choice .ro-add{padding:8px 14px}
.dl-link{font-size:12.5px;color:var(--muted)}
.dl-link:hover{color:var(--accent-bright)}
.order .oh{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.order .oh b{font-size:14.5px;color:var(--ink);font-weight:500}
.order .oh .od{color:var(--muted);font-size:12.5px}
.order .ot{color:var(--accent-bright);font-weight:600}
.stepper{display:flex;gap:6px;margin-top:14px}
.stepper .st{flex:1;text-align:center;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:7px 4px;border-radius:10px;background:var(--surface-1);border:1px solid var(--line);position:relative}
.stepper .st.done{background:rgba(210,131,47,.16);color:var(--accent-bright);border-color:rgba(210,131,47,.3)}
.stepper .st.cur{background:var(--accent);color:#1a1206;border-color:transparent;box-shadow:0 0 18px rgba(210,131,47,.28)}

/* ---------- CONFIGURATOR ---------- */
.cfg{max-width:1000px;margin:0 auto;padding:18px 20px 60px}
.backbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.backbar button{background:var(--surface-1);border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:9px 15px;cursor:pointer;transition:background .2s var(--ease)}
.backbar button:hover{background:var(--surface-2)}
.cfg-head h2{font-size:22px}
.cfg-head .meta{color:var(--muted);font-size:13px}
.cfg-grid{display:grid;grid-template-columns:380px 1fr;gap:24px;margin-top:18px;align-items:start}
@media(max-width:820px){.cfg-grid{grid-template-columns:1fr}}

/* live preview — rappresenta il PRODOTTO fisico (carta/ceramica): resta CHIARO */
.preview-pane{position:sticky;top:84px;align-self:start}
.preview-frame{aspect-ratio:3/4;border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow);background:#f7f5f0;border:1px solid var(--line);color:#23211e}
.preview-photo{position:relative;flex:1;overflow:hidden;background:#ece9e3;display:grid;place-items:center;min-height:120px;touch-action:none}
.preview-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;user-select:none;-webkit-user-drag:none}
.preview-photo .ph-hint{display:flex;flex-direction:column;align-items:center;gap:8px;color:#b7b3aa;font-size:13px;z-index:1}
.preview-photo .ph-hint::before{content:"";width:42px;height:42px;opacity:.7;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7b3aa' stroke-width='1.4'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E")}
.preview-photo.oval{border-radius:50%}
.crop-guide{position:absolute;inset:8%;border:1.5px dashed rgba(255,255,255,.85);border-radius:6px;pointer-events:none;z-index:2}
.preview-photo.oval .crop-guide{border-radius:50%}
.img-tools{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.img-tools input[type=range]{flex:1}
.ghost-sm{background:var(--surface-1);border:1px solid var(--line);border-radius:10px;padding:6px 12px;cursor:pointer;font-size:12px;color:var(--ink)}
.preview-cap{padding:14px 14px 18px;text-align:center}
.preview-cap .nome{font-size:18px;font-weight:600;margin-bottom:6px}
.preview-cap .ded{font-size:14px;line-height:1.4;font-style:italic;min-height:20px}
.preview-note{text-align:center;color:var(--muted);font-size:11.5px;margin-top:8px}
.preview-cap .date{font-size:13px;margin:4px 0 8px;letter-spacing:.4px}
.flip-tabs{display:flex;gap:6px;margin-bottom:10px}
.flip-tabs .ft{flex:1;padding:10px;border:1px solid var(--line);background:var(--surface-1);border-radius:12px;cursor:pointer;font-size:12.5px;font-weight:500;color:var(--muted);transition:background .2s var(--ease)}
.flip-tabs .ft.active{background:var(--accent);color:#1a1206;border-color:transparent}

.dates-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* controls */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field>label{font-size:11px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.12em}
/* hint inline di validazione (es. date) — token-driven, sobrio. Tono rispettoso: bronzo, non rosso.
   Si inserisce come ultimo figlio del .field (sotto l'input), gap del flex già lo distanzia. */
.field-hint{display:flex;align-items:flex-start;gap:6px;font-size:12.5px;line-height:1.4;color:var(--accent);margin-top:-1px}
.field-hint::before{content:"!";flex-shrink:0;width:15px;height:15px;margin-top:1px;border-radius:50%;border:1px solid currentColor;font-size:10px;line-height:13px;text-align:center;font-weight:500;opacity:.9}
[data-theme="light"] .field-hint{color:var(--accent-deep)}   /* AA su bone (bronzo bright sarebbe sotto soglia) */
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--accent)}
.field input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(210,131,47,.20)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:9px 15px;border:1px solid var(--line);background:var(--surface-1);border-radius:999px;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);transition:background .2s var(--ease),border-color .2s var(--ease)}
.chip:hover{background:var(--surface-2)}
.chip.active{background:var(--accent);color:#1a1206;border-color:transparent}
.qty{display:flex;align-items:center;gap:10px}
.qty-presets{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 14px}
.qchip{background:var(--surface-1);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.qchip:hover{background:var(--surface-2);color:var(--accent-bright);border-color:rgba(210,131,47,.4)}
.qty input{width:80px;text-align:center}
.cfg-add{width:100%;padding:15px;border:none;border-radius:14px;background:var(--accent);color:#1a1206;font-weight:600;font-size:15px;cursor:pointer;margin-top:6px;transition:background .2s var(--ease)}
.cfg-add:hover{background:var(--accent-bright)}
.dedica-presets{display:flex;flex-direction:column;gap:0;max-height:200px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface-1)}
.dp-cat{padding:8px 12px;background:var(--surface-2);font-size:10.5px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.12em}
.dp{padding:10px 12px;border-top:1px solid var(--line);cursor:pointer;font-size:13.5px;transition:background .18s var(--ease)}
.dp:hover{background:var(--surface-2)}
.dedica-presets .dp.active{background:rgba(210,131,47,.12);color:var(--accent-bright)}

/* ---------- CART ---------- */
.cart{max-width:760px;margin:0 auto;padding:18px 20px 60px}
.cart h2{font-size:22px;margin-bottom:14px}
.cart-head{display:flex;justify-content:space-between;align-items:center}
.cart-head h2{margin-bottom:0}
.clear-cart{font-size:13px;color:var(--muted);cursor:pointer}
.clear-cart:hover{color:#e08a7a}
.citem{display:flex;flex-wrap:wrap;gap:14px;background:var(--surface-1);border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:10px}
.citem .th{width:54px;height:54px;border-radius:12px;background:var(--surface-3) center/cover no-repeat;display:grid;place-items:center;color:var(--muted);font-size:18px;flex-shrink:0}
.citem .cd{flex:1;min-width:0}
.citem .cd b{font-size:14.5px;color:var(--ink);font-weight:500}
.citem .cd small{color:var(--muted);display:block}
.qstep{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.qstep span{font-size:11.5px;color:var(--muted)}
.qstep .qin{width:74px;padding:6px 8px;font-size:13.5px;text-align:center}
/* Promemoria "manca la foto del defunto" su una riga ritratto (ricordino/ceramica) senza foto.
   Tono rispettoso: bronzo (non rosso), sobrio. Cliccabile → apre l'editor sul campo foto. Token-driven. */
.ci-need{display:inline-flex;align-items:center;gap:6px;margin-top:7px;background:none;border:none;padding:0;font:inherit;font-size:12.5px;line-height:1.4;color:var(--accent);cursor:pointer;text-align:left}
.ci-need::before{content:"!";flex-shrink:0;width:15px;height:15px;border-radius:50%;border:1px solid currentColor;font-size:10px;line-height:13px;text-align:center;font-weight:500;opacity:.9}
.ci-need:hover{text-decoration:underline}
.ci-need:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
[data-theme="light"] .ci-need{color:var(--accent-deep)}   /* AA su bone (come .field-hint) */
.ci-edit{margin-left:4px;background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:5px 12px;font-size:12px;cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.ci-edit:hover{background:var(--surface-2);border-color:var(--accent);color:var(--ink)}
.ci-edit[aria-expanded=true]{border-color:var(--accent);color:var(--ink)}
.citem .cp{text-align:right;white-space:nowrap}
.citem .cp .x{color:#e08a7a;cursor:pointer;font-weight:500;font-size:13px}
.ci-editor{flex-basis:100%;width:100%;margin-top:4px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.ci-editor .field{margin:0}
.ci-editor .dedica-presets{max-height:160px}
.ci-ed-foot{display:flex;justify-content:flex-end}
/* foto per-articolo nel carrello: riusa .preview-photo/.crop-guide/.ph-hint/.img-tools (chiari per design,
   come nel configuratore: la preview prodotto resta chiara in entrambi i temi). Box compatto fisso. */
.ci-photo{display:flex;flex-direction:column;gap:8px;max-width:280px}
.ci-photo .preview-photo{flex:none;width:200px;height:200px;min-height:0;border-radius:12px;border:1px solid var(--line)}
.ci-photo .preview-photo.oval{border-radius:50%}
.ci-photo .img-tools{margin-top:0;max-width:200px}
.ci-foto-in{font-size:12.5px;color:var(--muted);max-width:260px}
.ci-foto-in::file-selector-button{font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 12px;margin-right:10px;cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease)}
.ci-foto-in::file-selector-button:hover{border-color:var(--accent);background:var(--surface-3)}
.ci-photo-name{font-size:12px}
.cart .commessa-fields{background:var(--surface-1);border:1px solid var(--line);border-radius:18px;padding:18px;margin:12px 0}
.cart .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.cart .grid2{grid-template-columns:1fr}}
.cart-tot{margin-top:8px}
.cart-tot .rrow{padding:5px 4px;color:var(--muted)}
.cart .tot{display:flex;justify-content:space-between;font-size:18px;padding:14px 4px}
.cart .tot b{color:var(--accent-bright);font-weight:600}
.confirm{width:100%;padding:16px;border:none;border-radius:14px;background:var(--accent);color:#1a1206;font-weight:600;font-size:16px;cursor:pointer;transition:background .2s var(--ease)}
.confirm:hover{background:var(--accent-bright)}
.confirm:disabled{background:var(--surface-3);color:var(--faint);cursor:not-allowed}

/* ---------- CHECKOUT · riepilogo pre-invio (passo 2) ---------- */
.cf-h{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:500;margin:0 0 8px;display:flex;align-items:center;gap:10px}
.cf-h::before{content:"";width:18px;height:1px;background:var(--accent)}
.cf-line{align-items:flex-start;border-bottom:1px solid var(--line)}
.cf-line:last-of-type{border-bottom:none}
.cf-lname{display:flex;flex-direction:column;gap:2px}
.cf-sub{color:var(--muted);font-size:12px;line-height:1.5}
.cf-q{color:var(--faint);font-size:12px}
.cf-faint{color:var(--faint)}
/* Riga "Foto mancanti" del riepilogo: bronzo (non rosso), coerente col promemoria del carrello. */
.cf-warn>span:last-child{color:var(--accent)}
[data-theme="light"] .cf-warn>span:last-child{color:var(--accent-deep)}
.cf-note{font-size:13px;margin:0 0 16px}

/* ---------- RESULT ---------- */
.result{max-width:640px;margin:0 auto;padding:44px 20px;text-align:center}
.result .ok{font-size:48px;color:var(--accent-bright)}
.result h2{font-size:26px;margin:8px 0}
.result .rid{color:var(--muted);margin-bottom:18px}
/* .rbox / .rrow: riusati anche dal dettaglio ordine → generici (non più scoped a .result) */
.rbox{background:var(--surface-1);border:1px solid var(--line);border-radius:20px;padding:22px;text-align:left;margin-bottom:18px}
.rrow{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px}
.rrow.big{font-size:18px;border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.rrow.big b{color:var(--accent-bright)}
.home-btn{padding:14px 28px;border:none;border-radius:14px;background:var(--accent);color:#1a1206;font-weight:600;cursor:pointer;font-size:15px;transition:background .2s var(--ease)}
.home-btn:hover{background:var(--accent-bright)}
.ghost{background:var(--surface-1);border:1px solid var(--line);color:var(--ink);padding:11px 18px;border-radius:12px;cursor:pointer;font-size:14px;transition:background .2s var(--ease),border-color .2s var(--ease)}
.ghost:hover{background:var(--surface-2);border-color:var(--line-strong)}
.result .ghost{padding:13px 22px;border-radius:14px}
/* riepilogo = card chiara → ghost in versione chiara */
.recap-actions .ghost{background:#fff;border:1px solid #d8d3c8;color:#23211e}
.recap-actions .ghost:hover{background:#f0ede6;border-color:#ccc6b8}
.result .dl{display:inline-block;margin-top:14px;font-size:12px;color:var(--muted)}
.result .dl a{color:var(--accent-bright)}

/* ---------- DRAWER ---------- */
.drawer-back{position:fixed;inset:0;background:rgba(6,5,3,.6);z-index:40;backdrop-filter:blur(2px)}
.drawer{position:fixed;top:0;left:0;bottom:0;width:284px;background:var(--popover);z-index:41;box-shadow:var(--shadow);border-right:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:4px}
.drawer .dh{font-size:20px;color:var(--accent-bright);margin-bottom:6px}
.drawer .du{font-size:13px;color:var(--muted);margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:14px}
.drawer-logo{height:40px;width:auto;align-self:flex-start;object-fit:contain;display:block;margin-bottom:14px;filter:brightness(0) invert(1) opacity(.92)}
.drawer .di{padding:12px 12px;border-radius:12px;cursor:pointer;font-size:14.5px;display:flex;gap:10px;align-items:center;border-left:2px solid transparent;color:var(--ink);transition:background .2s var(--ease),border-color .2s var(--ease)}
.drawer .di:hover{background:var(--surface-2);border-left-color:var(--accent)}
.drawer .di.active{background:var(--surface-2);border-left-color:var(--accent);color:var(--accent-bright)}
.drawer .di.exit{margin-top:auto;color:#e08a7a}

/* ---------- MODAL ---------- */
.modal{position:fixed;inset:0;background:rgba(6,5,3,.62);display:grid;place-items:center;z-index:50;padding:20px;backdrop-filter:blur(2px)}
.modal-box{background:var(--popover);border:1px solid var(--line-strong);border-radius:20px;width:min(460px,94vw);padding:26px;box-shadow:var(--shadow)}
.modal-box h3{font-size:20px;margin-bottom:10px}
.modal-box p{color:var(--muted);font-size:14px}
.modal-box .mb{margin-top:18px;text-align:right}
.modal-box .mb button{padding:11px 19px;border:none;border-radius:12px;background:var(--accent);color:#1a1206;font-weight:600;cursor:pointer}

/* ---------- I MIEI ORDINI (pagina) ---------- */
.orders-page{max-width:780px;margin:0 auto;padding:18px 20px 60px}
.op-head{margin-bottom:18px}
.op-head h2{font-size:26px;letter-spacing:-.02em;margin:6px 0 14px}
.op-search{margin-bottom:14px}
/* pagina ricerca: barra filtri+ordinamento, dropdown recenti, voce "vedi tutti" */
.search-bar{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.search-bar .subfilter{margin-bottom:0;flex:1}
.sort-wrap{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.sort-wrap select{font-family:inherit;font-size:13px;color:var(--ink);background:var(--surface-1);border:1px solid var(--line-strong);border-radius:12px;padding:8px 11px;cursor:pointer;transition:border-color .2s var(--ease)}
.sort-wrap select:hover{border-color:rgba(210,131,47,.42)}
.sort-wrap select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.search-results .sr-all{justify-content:space-between;background:var(--surface-1);font-size:13px;color:var(--accent-bright)}
.search-results .sr-all:hover{background:var(--surface-2)}
.search-results .sr-all .sr-all-arrow{color:var(--accent-bright)}
.search-results .sr-recent-h{display:flex;justify-content:space-between;align-items:center;padding:9px 16px;background:var(--surface-1);font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
.search-results .sr-clear{background:none;border:none;color:var(--muted);font-family:inherit;font-size:10.5px;letter-spacing:.06em;cursor:pointer;padding:0}
.search-results .sr-clear:hover{color:var(--ink)}
.search-results .sr-recent .l{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink)}
.search-results .sr-recent .sr-rico{opacity:.6;font-size:13px}

/* ---------- CENTRO NOTIFICHE ---------- */
.ntf-list{display:flex;flex-direction:column;gap:8px}
.ntf{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;background:var(--surface-1);border:1px solid var(--line);border-radius:16px;padding:14px 16px;cursor:pointer;color:var(--ink);font-family:inherit;transition:background .28s var(--ease),border-color .28s var(--ease)}
.ntf:hover{background:var(--surface-2);border-color:rgba(210,131,47,.42)}
.ntf.unread{border-color:rgba(210,131,47,.34);box-shadow:inset 3px 0 0 var(--accent)}
.ntf-ic{font-size:18px;line-height:1.3;flex-shrink:0}
.ntf-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ntf-t{font-size:14px;color:var(--ink)}
.ntf-s{font-size:12.5px;color:var(--muted);line-height:1.45}
.ntf-d{font-size:11.5px;color:var(--faint);margin-top:2px}
.ntf-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:6px;align-self:flex-start}

/* ---------- ONBOARDING (cliente nuovo) ---------- */
.onboard{background:var(--surface-1);border:1px solid var(--line);border-radius:20px;padding:26px}
.onb-title{font-size:21px;font-weight:500;margin:6px 0 8px;color:var(--ink);letter-spacing:-.01em}
.onb-cta{display:flex;gap:10px;flex-wrap:wrap}
.onb-cta .cfg-add{width:auto;margin:0;padding:12px 22px}
.onb-cta .ghost{padding:12px 22px}

/* ---------- PANORAMICA HOME ---------- */
.overview{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:4px 0 10px}
@media(max-width:560px){.overview{grid-template-columns:1fr}}
.stat{text-align:left;background:var(--surface-1);border:1px solid var(--line);border-radius:18px;padding:18px 20px;cursor:pointer;font-family:inherit;transition:background .28s var(--ease),border-color .28s var(--ease)}
.stat:hover{background:var(--surface-2);border-color:rgba(210,131,47,.42)}
.stat-n{font-size:30px;font-weight:500;color:var(--accent-bright);font-family:var(--mono);line-height:1}
.stat-l{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-top:8px;font-weight:500}

/* ---------- FUNERALI GIÀ FATTI (pacchetti) ---------- */
.kits-page{max-width:840px;margin:0 auto;padding:18px 20px 60px}
.kits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px;margin-top:18px}
.kit-card{background:var(--surface-1);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:13px}
.kit-c-head{display:flex;gap:12px;align-items:center}
.kit-ic{font-size:28px;flex-shrink:0}
.kit-c-head b{font-size:15px;font-weight:500}
.kit-lines{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:11px 0;display:flex;flex-direction:column;gap:8px}
.kit-line{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.kit-line span:first-child{color:var(--ink)}
.kit-tot{display:flex;justify-content:space-between;font-size:15px}
.kit-tot b{color:var(--accent-bright);font-weight:600}
/* azioni card preset: personalizza + aggiungi affiancati */
.kit-actions{display:flex;gap:10px;align-items:stretch}
.kit-actions .kit-edit{flex:0 0 auto;border-radius:12px;padding:0 16px}
.kit-actions .kit-add{flex:1 1 auto;margin-top:0}
/* CTA "componi da zero" */
.kit-scratch{display:flex;align-items:center;gap:14px;width:100%;margin-top:18px;padding:18px;text-align:left;
  background:var(--surface-1);border:1px solid var(--line);border-radius:18px;cursor:pointer;font-family:inherit;color:var(--ink);
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.kit-scratch:hover{background:var(--surface-2);border-color:rgba(210,131,47,.42)}
.kit-scratch .ks-ic{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);font-size:22px;color:var(--accent-bright);line-height:1}
.kit-scratch .ks-tx{display:flex;flex-direction:column;gap:2px}
.kit-scratch .ks-tx b{font-size:14.5px;font-weight:500}
.kit-scratch .ks-tx small{font-size:12.5px;color:var(--muted)}
/* ---------- KIT BUILDER ---------- */
.kits-page.kb{max-width:680px}
.kb-rows{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.kb-row{background:var(--surface-1);border:1px solid var(--line);border-radius:16px;padding:15px 16px 13px}
.kb-fields{display:grid;grid-template-columns:1fr 1fr 84px;gap:12px;align-items:end}
.kb-fields .field{margin:0}
.kb-fields .field label{display:block;font-size:11px;color:var(--muted);letter-spacing:.06em;margin-bottom:6px}
.kb-fields select,.kb-fields input{padding:10px 12px;font-size:14px}
.kb-fields .kb-qty input{text-align:center}
.kb-qpresets{display:flex;gap:7px;flex-wrap:wrap;margin:11px 0 0}
.kb-qpresets .qchip{padding:5px 13px;font-size:12.5px}
.kb-row-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.kb-line-tot{font-size:13.5px;color:var(--muted)}
.kb-del{background:none;border:none;color:var(--muted);font-family:inherit;font-size:12.5px;cursor:pointer;padding:2px 4px;transition:color .2s var(--ease)}
.kb-del:hover{color:var(--ink)}
.kb-del:disabled{opacity:.35;cursor:default}
.kb-addrow{width:100%;margin-top:14px;padding:12px;background:var(--surface-1);border:1px dashed var(--line-strong);border-radius:14px;
  color:var(--muted);font-family:inherit;font-size:13.5px;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.kb-addrow:hover{background:var(--surface-2);border-color:rgba(210,131,47,.5);color:var(--ink)}
.kb-addrow span{color:var(--accent-bright);margin-right:5px}
.kb-tot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.kb-cta{display:flex;gap:12px;margin-top:16px}
.kb-cta .ghost{flex:0 0 auto}
.kb-cta .cfg-add{flex:1 1 auto;margin-top:0}
.kb-cta .cfg-add:disabled{opacity:.5;cursor:default}
@media(max-width:520px){.kb-fields{grid-template-columns:1fr 1fr;gap:10px}.kb-fields .kb-qty{grid-column:1/-1}.kb-fields .kb-qty input{text-align:left}}

/* ---------- ACCOUNT & IMPOSTAZIONI ---------- */
.account{max-width:1000px;margin:0 auto;padding:18px 20px 60px}
.acc-head{margin:8px 0 22px}
.acc-head h2{font-size:26px;letter-spacing:-.02em;margin-top:6px}
.acc-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.badge{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:500;padding:5px 11px;border-radius:999px;background:rgba(210,131,47,.14);color:var(--accent-bright);border:1px solid rgba(210,131,47,.3)}
.badge.b-ghost{background:var(--surface-2);color:var(--muted);border-color:var(--line)}
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.acc-grid{grid-template-columns:1fr}}
.acc-card{background:var(--surface-1);border:1px solid var(--line);border-radius:18px;padding:20px}
.acc-card h3{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:500;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.acc-card h3::before{content:"";width:18px;height:1px;background:var(--accent)}
.acc-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.acc-row:last-of-type{border-bottom:none}
.acc-k{color:var(--muted);flex-shrink:0}
.acc-v{color:var(--ink);text-align:right;word-break:break-word}
.acc-note{font-size:12.5px;color:var(--faint);margin:12px 0 0;line-height:1.5}
.acc-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;cursor:pointer;color:var(--ink)}
.acc-toggle input{position:absolute;opacity:0;width:0;height:0}
.acc-toggle .sw{flex-shrink:0;width:42px;height:24px;border-radius:999px;background:var(--surface-3);border:1px solid var(--line);position:relative;transition:background .2s var(--ease)}
.acc-toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .2s var(--ease),background .2s var(--ease)}
.acc-toggle input:checked + .sw{background:rgba(210,131,47,.5);border-color:transparent}
.acc-toggle input:checked + .sw::after{transform:translateX(18px);background:var(--accent-bright)}
.acc-toggle input:focus-visible + .sw{outline:2px solid var(--accent);outline-offset:2px}
.account .acc-card .field{margin-bottom:12px}
.acc-foot{margin-top:22px;text-align:center}
.acc-exit{background:none;border:1px solid var(--line-strong);color:#e08a7a;padding:11px 22px;border-radius:12px;cursor:pointer;font-size:14px;transition:background .2s var(--ease)}
.acc-exit:hover{background:rgba(224,138,122,.08)}

/* ---------- BOZZE ORDINE (ciclo 92) — token-driven, due temi ----------
   Salvare l'ordine in corso come bozza e gestire più ordini in lavorazione. Riusa le primitive
   già tematizzate (.order/.oh/.ot, .ghost/.ghost-sm/.cfg-add, .empty). Niente literal nuovi se non
   neutri (line/surface/muted) che hanno già l'override [data-theme=light]. */
.cart-head-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.draft-save{background:var(--surface-1);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:12px 0 0}
.draft-save label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:8px}
.draft-save-row{display:flex;gap:10px;flex-wrap:wrap}
.draft-save-row input{flex:1 1 220px;min-width:0;background:var(--surface-1);border:1px solid var(--line);color:var(--ink);border-radius:11px;padding:11px 13px;font-size:14px;font-family:inherit}
.draft-save-row input:focus-visible{outline:none;border-color:var(--accent)}
.draft-save-go{width:auto;margin-top:0;padding:11px 20px;flex:0 0 auto}
.draft-save-hint{margin:10px 0 0;font-size:12px;color:var(--faint);line-height:1.5}
/* badge contatore nel drawer accanto a "Bozze ordine" */
.di-count{margin-left:auto;background:var(--surface-3);border:1px solid var(--line);color:var(--muted);border-radius:999px;font-size:11px;min-width:20px;height:20px;line-height:18px;text-align:center;padding:0 6px;flex-shrink:0}
/* sull'item attivo il badge resta su --muted (leggibile in entrambi i temi); solo il bordo si accende
   sottile di bronzo — il testo NON diventa bronzo-bright (su chiaro sarebbe ~1.7:1, illeggibile). */
.drawer .di.active .di-count{border-color:rgba(210,131,47,.45)}
/* riquadro "hai un ordine in corso" in cima alla pagina Bozze */
.draft-cur{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface-1);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:14px}
.draft-cur .od{color:var(--muted);font-size:12.5px;margin-top:2px}
/* card bozza — stesso linguaggio della card ordine ma senza hover-cursor sull'intera card */
.draft{background:var(--surface-1);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:10px}
.draft .oh{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.draft .oh b{font-size:14.5px;color:var(--ink);font-weight:500}
.draft .oh .od{color:var(--muted);font-size:12.5px;margin-top:2px}
.draft .ot{color:var(--accent-bright);font-weight:600}
.draft-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.draft-acts .cfg-add{width:auto;margin-top:0;padding:10px 20px}
.draft-acts .ghost{padding:10px 16px}

/* Schermo stretto: l'anteprima scorre col resto, niente sticky. */
@media(max-width:820px){.preview-pane{position:static}}

/* ============================================================
   PANNELLO AMMINISTRAZIONE (admin demo) — token-driven, due temi
   Il titolare vede/gestisce gli ordini di tutte le agenzie. Riusa le primitive già
   tematizzate (.orders-page/.op-head/.acc-card/.acc-row/.chip/.empty); qui solo la
   tabella ordini, i badge stato (4 colori semantici con override AA in chiaro) e il
   select di cambio stato. Niente layout duplicato del flusso cliente.
   ============================================================ */
/* etichetta ruolo accanto al nome in topbar */
.who-role{margin-left:8px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-bright);border:1px solid rgba(210,131,47,.4);border-radius:999px;padding:2px 8px;vertical-align:middle}
[data-theme="light"] .who-role{color:var(--accent-deep)}
/* tab Ordini/Agenzie: riusa .backbar come contenitore + .chip come pill */
.adm-tabs{display:flex;gap:8px;flex-wrap:wrap}
.orders-page.admin,.account.admin{max-width:1080px}
/* tabella ordini: scroll orizzontale su schermi stretti senza rompere il layout */
.adm-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:18px;background:var(--surface-1)}
.adm-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.adm-table thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:500;padding:13px 14px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.adm-table th.num,.adm-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.adm-table tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink)}
.adm-table tbody tr:last-child td{border-bottom:none}
.adm-table tbody tr.adm-row:hover{background:var(--surface-2)}
.adm-table td b{font-weight:600;display:block;line-height:1.3}
.adm-sub{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.adm-nowrap{white-space:nowrap}
/* badge stato — fill tenue + testo semantico (stesso schema di .stepper .st.done) */
.adm-badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;padding:4px 11px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.adm-s-NO{background:var(--surface-3);color:var(--muted);border-color:var(--line-strong)}
.adm-s-MOD{background:rgba(224,164,78,.16);color:var(--accent-bright);border-color:rgba(224,164,78,.34)}
.adm-s-GOK{background:rgba(120,170,120,.18);color:#7fbe7f;border-color:rgba(120,170,120,.34)}
.adm-s-PROD{background:var(--accent);color:#1a1206;border-color:transparent}
[data-theme="light"] .adm-s-MOD{color:var(--accent-deep)}
[data-theme="light"] .adm-s-GOK{color:#2f7d3f;border-color:rgba(47,125,63,.34)}
/* select cambio stato: compatto, riusa lo styling globale di select (freccia inclusa) */
.adm-sel{display:block;margin:0}
.adm-status{width:auto;min-width:128px;padding:8px 34px 8px 12px;font-size:13px;border-radius:11px}
.adm-status:disabled{opacity:.55;cursor:wait}
.adm-agency h3{text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink);font-weight:600}
.adm-agency h3::before{display:none}
/* utility: nascondi visivamente ma resta per screen reader (label dei select) */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* su mobile la tabella diventa a "schede": ogni cella mostra la sua intestazione (data-th) */
@media(max-width:680px){
  .adm-table,.adm-table thead,.adm-table tbody,.adm-table tr,.adm-table td{display:block;width:100%}
  .adm-table{min-width:0}
  .adm-table thead{position:absolute;left:-9999px}
  .adm-table tbody tr.adm-row{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;padding:4px 2px}
  .adm-table tbody td{display:flex;justify-content:space-between;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding:10px 14px;text-align:right}
  .adm-table tbody tr.adm-row td:last-child{border-bottom:none}
  .adm-table td.num{text-align:right}
  .adm-table td::before{content:attr(data-th);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;text-align:left;flex:0 0 auto}
  .adm-table td b{display:inline-block;text-align:right}
  .adm-sub{text-align:right}
  .adm-status{min-width:140px}
}