.ma-wrap{
  --ma-ink:#111827;
  --ma-muted:#64748b;
  --ma-accent:#111827;
  --ma-card:#ffffff;
  --ma-border:#e2e8f0;
  --ma-shadow:0 20px 50px rgba(15,23,42,.08);
  padding:20px;
  font-family:"Sora","Manrope","Segoe UI",sans-serif;
  color:var(--ma-ink);
  background:
    radial-gradient(circle at 10% 10%, rgba(15,23,42,.05), transparent 45%),
    radial-gradient(circle at 80% 120%, rgba(15,23,42,.04), transparent 60%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f5 100%);
}
.ma-wrap.ma-wide{
  width:100%;
  max-width:none;
  padding:28px 36px 40px;
  box-sizing:border-box;
}
.ma-wrap.ma-wide .card{ max-width:none; }
.ma-wrap.ma-embedded{
  width:100%;
  max-width:none;
  padding:16px 18px 24px;
  box-sizing:border-box;
  background:transparent;
}
@media (max-width:960px){
  .ma-wrap.ma-wide{ padding:20px; }
  .ma-wrap.ma-embedded{ padding:14px; }
}

.ma-article{
  display:flex;
  flex-direction:column;
  gap:24px;
  animation:ma-page-rise .5s ease;
}

@keyframes ma-page-rise{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

.ma-hero{
  display:grid;
  grid-template-columns:minmax(240px, 340px) minmax(0, 1fr);
  gap:24px;
  padding:22px;
  border-radius:22px;
  background:var(--ma-card);
  border:1px solid var(--ma-border);
  box-shadow:var(--ma-shadow);
  position:relative;
  overflow:hidden;
}
.ma-hero::after{
  content:"";
  position:absolute;
  top:-80px;
  right:-80px;
  width:200px;
  height:200px;
  background:radial-gradient(circle, rgba(15,23,42,.08), transparent 70%);
  pointer-events:none;
}
.ma-hero-media{
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(135deg, #f1f5f9, #e2e8f0);
  min-height:240px;
  border:1px solid rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ma-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ma-hero-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--ma-muted);
  font-size:13px;
}
.ma-hero-placeholder-icon{ font-size:26px; }
.ma-hero-content{ display:flex; flex-direction:column; gap:16px; }
.ma-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
}
.ma-hero-title h2{
  margin:6px 0 0;
  font-size:26px;
  font-weight:700;
}
.ma-hero-code{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ma-muted);
  font-weight:600;
}
.ma-hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.ma-hero-meta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.ma-meta-item{
  padding:10px 12px;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid rgba(148,163,184,.4);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ma-meta-item span{ font-size:11px; color:var(--ma-muted); text-transform:uppercase; letter-spacing:.08em; }
.ma-meta-item strong{ font-size:14px; }
.ma-hero-pricing{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
}
.ma-price-block{
  padding:12px;
  border-radius:14px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ma-price-block span{ font-size:12px; color:var(--ma-muted); }
.ma-price-block strong{ font-size:18px; color:#111827; }
.ma-hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ma-chip{
  padding:6px 12px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-size:12px;
  font-weight:600;
}
.ma-chip-muted{
  background:#e2e8f0;
  color:#334155;
}

.ma-section-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.ma-section-card{
  background:var(--ma-card);
  border:1px solid var(--ma-border);
  border-radius:18px;
  padding:16px;
  box-shadow:0 12px 30px rgba(15,23,42,.06);
  display:flex;
  flex-direction:column;
  gap:12px;
  animation:ma-card-rise .4s ease;
}
.ma-section-card:nth-child(2){ animation-delay:.05s; }
.ma-section-card:nth-child(3){ animation-delay:.1s; }
.ma-section-card:nth-child(4){ animation-delay:.15s; }
.ma-section-card:nth-child(5){ animation-delay:.2s; }
.ma-section-card:nth-child(6){ animation-delay:.25s; }

@keyframes ma-card-rise{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.ma-section-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.ma-section-head h4{
  margin:0 0 4px;
  font-size:16px;
}
.ma-section-head p{
  margin:0;
  color:var(--ma-muted);
  font-size:12px;
}
.ma-section-body{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
}
.ma-kpi{
  padding:10px;
  border-radius:12px;
  border:1px dashed rgba(148,163,184,.6);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ma-kpi span{
  font-size:11px;
  color:var(--ma-muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.ma-kpi strong{ font-size:14px; }
.ma-mini-thumb{
  width:90px;
  height:90px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.5);
}
.ma-mini-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.card{
  background:#fff;
  border:1px solid var(--ma-border);
  border-radius:16px;
  padding:18px;
  box-shadow:0 10px 30px rgba(15,23,42,.04);
}
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.col-2{ grid-column:1 / -1; }
.row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

label{ display:block; font-size:12px; color:#475569; margin-bottom:6px; }
input, select, textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
  outline:none;
  transition:border-color .2s ease, background .2s ease;
}
input:focus, select:focus, textarea:focus{ border-color:#111827; background:#fff; }
textarea{ min-height:80px; resize:vertical; }
.ma-field-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.ma-field-head label{ margin-bottom:0; }
.ma-toggle{ display:inline-flex; align-items:center; gap:4px; padding:4px; border:1px solid #e2e8f0; border-radius:999px; background:#f8fafc; }
.ma-toggle button{
  border:none;
  background:transparent;
  color:#475569;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
}
.ma-toggle button.is-active{
  background:#111827;
  color:#fff;
}

.ma-readonlyField{
  width:100%;
  padding:10px 12px;
  border:1px dashed #cbd5f5;
  border-radius:12px;
  background:#f1f5f9;
  color:#475569;
  font-size:14px;
}

.img-wrap{ margin-top:8px; }
.img-wrap img{ max-width:320px; height:auto; border-radius:12px; border:1px solid #e2e8f0; }
.ma-thumb{ width:200px; max-width:100%; border:1px solid #e2e8f0; border-radius:14px; overflow:hidden; background:#f8fafc; margin-top:6px; }
.ma-thumb img{ width:100%; height:auto; display:block; }

.ma-imglist{ display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.ma-imgitem{ display:flex; flex-direction:column; gap:6px; }
.ma-imgrow{ display:grid; grid-template-columns:32px minmax(0,1fr) 120px; align-items:center; gap:8px; }
.ma-imgindex{ font-weight:600; color:#475569; }
.ma-imgactions{ display:flex; gap:6px; justify-content:flex-end; }
.ma-imgbtn{ width:32px; height:32px; border:1px solid #d1d5db; border-radius:8px; background:#fff; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; }
.ma-imgbtn:disabled{ opacity:.35; cursor:default; }
.ma-imgbtn.danger{ border-color:#d1d5db; color:#111827; }
.ma-imgpreview .img-wrap{ max-width:220px; margin-top:4px; }
.ma-imgpreview .img-wrap img{ width:100%; height:auto; }

.actions{ margin-top:14px; display:flex; gap:12px; flex-wrap:wrap; }
.btn-primary{
  background:#111827;
  color:#fff;
  padding:10px 18px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.02em;
}
.btn-primary:hover{ filter:brightness(.95); }
.btn-outline, .btn{
  border:1px solid #d1d5db;
  background:#fff;
  color:#0f172a;
  padding:9px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
}
.btn-outline:hover, .btn:hover{ background:#f8fafc; }
.btn-ghost{
  border:none;
  background:#111827;
  color:#fff;
  padding:6px 12px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
}
.pill{
  padding:6px 12px;
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
}

.var-toolbar{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.var-toolbar h4{
  margin:0 0 4px;
  font-size:16px;
}
.var-toolbar .hint{
  margin:0;
}
.var-toolbar-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.tbl{ width:100%; border-collapse:collapse; }
.tbl th, .tbl td{ border-bottom:1px solid #f1f5f9; padding:10px; text-align:left; vertical-align:top; }
.tbl thead th{ background:#0f172a; color:#fff; font-weight:600; }
.hint{ margin-top:8px; color:#64748b; font-size:13px; }
.ma-state{ padding:18px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; }
.ma-state.ma-error{ color:#9a3412; border-color:#fed7aa; background:#fff7ed; }

.dot { width:12px; height:12px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.var-left, .var-right { min-width:0; }

.combo-editor h4 { margin: 0 0 8px; }
.combo-input { height: 36px; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0 10px; }
.tag { display: inline-flex; align-items: center; gap: 6px; background: #f4f4f6; border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.ma-tagField{ display:flex; flex-direction:column; gap:8px; }
.ma-tagPills{ display:flex; flex-wrap:wrap; gap:6px; }
.ma-tagPill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  padding:4px 9px;
  border:1px solid #dbe4f0;
  border-radius:999px;
  background:#f8fafc;
  color:#0f172a;
  font-size:12px;
  font-weight:700;
  line-height:1.15;
}
.ma-tagPill button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border:0;
  border-radius:999px;
  background:#e2e8f0;
  color:#475569;
  cursor:pointer;
  font-size:13px;
  line-height:1;
  padding:0;
}
.ma-tagPill button:hover{ background:#cbd5e1; color:#0f172a; }

.combo-editor { overflow-x: auto; }
.combo-editor .tbl { min-width: 960px; }
.tbl td.ta-right input { min-width: 110px; }
.combo-double { display:flex; flex-direction:column; gap:4px; }
.combo-double label { font-size:11px; color:#64748b; display:flex; justify-content:space-between; align-items:center; }
.combo-double label .muted { font-size:11px; }
.combo-double input { padding:6px 8px; border-radius:10px; }
.w100 { min-width:100px; }
.w120 { min-width:120px; }
.w140 { min-width:140px; }
.w160 { min-width:160px; }
.w180 { min-width:180px; }
.w200 { min-width:200px; }

.ta-right { text-align: right; }

.ma-modal-open{ overflow:hidden; }
.ma-modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ma-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(6px);
  animation:ma-backdrop .2s ease;
}
.ma-modal-panel{
  position:relative;
  width:min(1100px, 92vw);
  max-height:86vh;
  background:var(--ma-card);
  border-radius:22px;
  border:1px solid var(--ma-border);
  box-shadow:var(--ma-shadow);
  display:flex;
  flex-direction:column;
  animation:ma-modal-rise .25s ease;
}
.ma-modal-panel.is-wide{
  width:min(1240px, 94vw);
}
.ma-modal-header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  padding:18px 20px;
  border-bottom:1px solid var(--ma-border);
}
.ma-modal-header h3{ margin:0; font-size:20px; }
.ma-modal-header p{ margin:6px 0 0; color:var(--ma-muted); font-size:13px; }

/* ===============================
   Visual Refresh (Modifica Articolo)
   =============================== */
.ma-wrap{
  --ma-accent:#ef4444;
  --ma-accent-ink:#ffffff;
  --ma-soft-bg:#f8fafc;
}

.ma-article{
  max-width:1560px;
  margin:0 auto;
}

.ma-hero{
  padding:24px;
  border-radius:24px;
  box-shadow:0 18px 40px rgba(15,23,42,.08);
}

.ma-hero-title h2{
  line-height:1.2;
  letter-spacing:-.01em;
}

.ma-hero-actions .btn-outline{
  border-color:#cbd5e1;
}

.card{
  border-radius:18px;
  box-shadow:0 12px 26px rgba(15,23,42,.05);
}

.grid-2{
  gap:16px;
}

label{
  font-weight:600;
  letter-spacing:.01em;
}

input, select, textarea{
  background:#fff;
  border-color:#d8e0ea;
  font-size:14px;
}

input::placeholder,
textarea::placeholder{
  color:#94a3b8;
}

input:focus, select:focus, textarea:focus{
  border-color:var(--ma-accent);
  box-shadow:0 0 0 3px rgba(239,68,68,.12);
}

.ma-readonlyField{
  border-style:solid;
  border-color:#e2e8f0;
  background:#f8fafc;
}

.btn-primary{
  background:linear-gradient(135deg, #ef4444, #dc2626);
  color:var(--ma-accent-ink);
  box-shadow:0 8px 18px rgba(220,38,38,.22);
}

.btn-primary:disabled{
  opacity:.55;
  box-shadow:none;
}

.btn-outline, .btn{
  border-color:#cbd5e1;
}

.actions{
  padding-top:4px;
  border-top:1px dashed #e2e8f0;
}

.ma-inline-header{
  display:none;
}

.ma-inline-shell{
  border:1px solid var(--ma-border);
  border-radius:18px;
  background:var(--ma-card);
  box-shadow:0 10px 24px rgba(15,23,42,.04);
  padding:0;
}

.ma-inline-body{
  padding:0;
}

.ma-global-save{
  position:sticky;
  bottom:10px;
  z-index:20;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:10px 2px 2px;
}

.ma-global-save .btn-primary{
  min-width:220px;
}

.tbl thead th{
  background:#1e293b;
}

.hint{
  color:#64748b;
}

@media (max-width:1200px){
  .ma-hero{
    grid-template-columns:1fr;
  }
  .ma-hero-media{
    min-height:220px;
  }
}

@media (max-width:860px){
  .grid-2{
    grid-template-columns:1fr;
  }
  .ma-wrap.ma-wide{
    padding:16px;
  }
  .card{
    padding:14px;
  }
  .ma-hero{
    padding:16px;
    border-radius:18px;
  }
  .ma-hero-title h2{
    font-size:22px;
  }
  .ma-imgrow{
    grid-template-columns:28px 1fr;
  }
  .ma-imgactions{
    grid-column:1 / -1;
    justify-content:flex-start;
  }
  .ma-global-save{
    bottom:0;
    background:linear-gradient(180deg, rgba(248,250,252,0), rgba(248,250,252,.96) 30%);
    padding:12px 0 6px;
  }
  .ma-global-save .btn-primary{
    width:100%;
    min-width:0;
  }
}
.ma-modal-close{
  border:none;
  background:#0f172a;
  color:#fff;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
}
.ma-modal-body{
  padding:18px 20px;
  overflow:auto;
}
.ma-modal-footer{
  padding:14px 20px;
  border-top:1px solid var(--ma-border);
}

@keyframes ma-modal-rise{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes ma-backdrop{
  from{ opacity:0; }
  to{ opacity:1; }
}

@media (max-width:1200px){
  .ma-section-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:980px){
  .ma-hero{ grid-template-columns:1fr; }
  .ma-hero-meta{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .grid-2{ grid-template-columns:1fr; }
}
@media (max-width:780px){
  .ma-section-grid{ grid-template-columns:1fr; }
  .ma-imgrow{ grid-template-columns:28px minmax(0,1fr); }
  .ma-imgactions{ justify-content:flex-start; }
}
/* =========================================================
   VENDITA — CSS COMPLETO (1920x1080 TOUCH — Windows)
   - Carrello STICKY a destra (stabile)
   - Contenuti carrello molto compatti, ma tap target comodi
   - Hero/toggle compatti
   - Prodotti in 2 colonne piccoli (veri 2)
   - Bottoni Parcheggia/Riprendi/Svuota/Conferma: auto-width + a destra
   ========================================================= */

/* =========================
   Base / Variabili
   ========================= */
.sale-wrap{
  --bg: #f5f6f8;
  --card: #ffffff;
  --ink: #0b1220;
  --muted: #6b7280;
  --border: rgba(15,23,42,.10);
  --shadow: 0 10px 28px rgba(15,23,42,.08);
  --shadow2: 0 18px 46px rgba(15,23,42,.10);

  --accent: #2563eb;
  --danger: #ef4444;
  --ok: #16a34a;
  --warn: #f59e0b;

  --radius: 16px;
  --radius2: 20px;

  --pad: 18px;
  --gap: 16px;
  --cart-gap: 8px;

  /* Dimensione carrello */
  --cartw: clamp(560px, 62vw, 1400px);

  /* Altezza topbar app (evita numeri magici) */
  --topbar-h: 72px;

  /* Touch (minimi sensati) */
  --tap: 40px;
  --tap-sm: 36px;

  background: var(--bg);
  color: var(--ink);
  font-size: 14.5px;
  min-height: calc(100vh - var(--topbar-h));
  padding: var(--pad);
  padding-right: calc(var(--cartw) + var(--pad) + var(--cart-gap));
  position: relative;
  isolation: isolate;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-app-region: no-drag;
}

.sale-wrap.sale-ma{
  --bg:
    radial-gradient(circle at 10% 10%, rgba(225,6,0,.12), transparent 45%),
    radial-gradient(circle at 80% 120%, rgba(14,165,233,.08), transparent 60%),
    linear-gradient(180deg, #f8fafc 0%, #eff4fb 100%);
  --card: var(--ma-card);
  --ink: var(--ma-ink);
  --muted: var(--ma-muted);
  --border: var(--ma-border);
  --shadow: var(--ma-shadow);
  --shadow2: 0 26px 70px rgba(15,23,42,.12);
  --accent: var(--ma-accent);
  --danger: #e10600;
}

.sale-wrap.ma-wrap.ma-wide{
  padding: var(--pad);
  padding-right: calc(var(--cartw) + var(--pad) + var(--cart-gap));
}

.sale-wrap.compact{ max-width:none; margin:0 auto; }
.sale-wrap *{ box-sizing:border-box; }
.sale-wrap input,
.sale-wrap select,
.sale-wrap textarea,
.sale-wrap button,
.sale-wrap [role="button"],
.sale-wrap a{
  -webkit-app-region: no-drag;
}

.sale-wrap button,
.sale-wrap input,
.sale-wrap select,
.sale-wrap textarea{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  font-size: inherit;
}

.sale-wrap :focus-visible{
  outline: 2px solid rgba(37,99,235,.35);
  outline-offset: 2px;
  border-radius: 12px;
}

/* =========================
   Topbar vendita (senza navbar)
   ========================= */
.sale-topbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  position: relative;
  z-index: 120;
  overflow: visible;
}
.sale-topbar-main{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
}
.sale-topbar-actions,
.sale-topbar-session{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.top-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.icon-only-pill{
  justify-content: center;
  padding: 8px;
  min-width: 72px;
  min-height: 72px;
  gap: 0;
  flex: 0 0 auto;
}
.top-pill-icon-img{
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  flex: 0 0 56px;
}
.transfer-pill{
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-color: #fdba74;
  color: #9a3412;
  position: relative;
}
.transfer-pill:hover{
  filter: brightness(.98);
}
.transfer-pill.is-open{
  box-shadow: 0 0 0 3px rgba(249,115,22,.16), 0 12px 28px rgba(15,23,42,.10);
}
.transfer-menu-wrap{
  position: relative;
  overflow: visible;
}
.transfer-dropdown-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 16000;
}
.transfer-pill-badge{
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(239,68,68,.28);
}
.transfer-dropdown{
  position: fixed;
  left: 12px;
  top: 72px;
  width: min(780px, calc(100vw - 40px));
  max-width: calc(100vw - 24px);
  max-height: min(78vh, 720px);
  overflow: auto;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, #f8fafc 100%);
  box-shadow: 0 26px 70px rgba(15,23,42,.18);
  z-index: 220;
  pointer-events: auto;
}
.transfer-dropdown-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.transfer-dropdown-headActions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.transfer-dropdown-note{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1px solid #fdba74;
  color: #9a3412;
  font-size: 12px;
  font-weight: 700;
}
.transfer-dropdown-sections{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.transfer-dropdown-section{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.82);
}
.transfer-dropdown-sectionHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.transfer-dropdown-sectionHead strong{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #334155;
}
.transfer-dropdown-sectionHead span{
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.transfer-dropdown-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.transfer-dropdown-empty{
  min-height: 120px;
  border-radius: 14px;
  border: 1px dashed rgba(148,163,184,.65);
  background: rgba(248,250,252,.95);
  color: #64748b;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
  font-size: 13px;
}
.transfer-order-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.95);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.transfer-order-card.is-clickable{
  cursor: pointer;
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease;
}
.transfer-order-card.is-clickable:hover{
  transform: translateY(-1px);
  border-color: rgba(249,115,22,.35);
  box-shadow: 0 14px 28px rgba(15,23,42,.09);
}
.transfer-order-card.is-clickable:focus-visible{
  outline: 2px solid rgba(249,115,22,.35);
  outline-offset: 2px;
}
.transfer-order-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.transfer-order-route{
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}
.transfer-order-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: #64748b;
  font-size: 12px;
}
.transfer-order-note{
  color: #475569;
  font-size: 12px;
  line-height: 1.4;
}
.transfer-order-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.transfer-order-modal{
  width: min(1080px, 96vw);
}
.transfer-order-modal-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 14px;
}
.transfer-order-modal-main,
.transfer-order-modal-side{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.transfer-order-phase{
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #dbe4f0;
  background: #f8fafc;
}
.transfer-order-phase strong{
  font-size: 14px;
}
.transfer-order-phase span{
  font-size: 12px;
}
.phase-blue { background: #eef4ff; border-color: #cfddff; color: #234ea0; }
.phase-slate { background: #f4f6f8; border-color: #dce3ea; color: #516171; }
.phase-cyan { background: #eaf9ff; border-color: #c8ebfb; color: #136d9a; }
.phase-green { background: #eaf8ee; border-color: #cfe9d6; color: #1c7a3b; }
.phase-amber { background: #fff5df; border-color: #f5ddb0; color: #8f5b13; }
.phase-teal { background: #e8f7f5; border-color: #cbe8e2; color: #136f68; }
.phase-red { background: #fdeeee; border-color: #f3d0d0; color: #a33333; }
.transfer-order-summary{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.transfer-order-summary > div{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
}
.transfer-order-summary > div.wide{
  grid-column: 1 / -1;
}
.transfer-order-summary span{
  font-size: 12px;
  color: #64748b;
  font-weight: 700;
}
.transfer-order-summary b,
.transfer-order-summary code{
  color: #0f172a;
}
.transfer-order-summary code{
  word-break: break-all;
}
.transfer-scan-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(15,23,42,.08);
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: #f8fafc;
}
.transfer-scan-row input{
  min-width: 0;
  height: 36px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
}
.transfer-order-noteBox{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fffaf5;
}
.transfer-order-timeline{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
}
.transfer-order-timelineItem{
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.transfer-order-timelineItem > span{
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 3px #dbeafe;
}
.transfer-order-timelineItem strong{
  display: block;
  color: #0f172a;
  font-size: 12px;
  text-transform: capitalize;
}
.transfer-order-timelineItem small{
  display: block;
  color: #64748b;
  font-size: 11px;
}
.transfer-order-empty.compact{
  min-height: 48px;
}
.transfer-order-noteBox > span{
  font-size: 12px;
  font-weight: 800;
  color: #9a3412;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.transfer-order-actionsBar{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.transfer-order-modal-side{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.transfer-order-sideHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.transfer-order-sideHead span{
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.transfer-order-empty{
  min-height: 160px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px dashed rgba(148,163,184,.6);
  color: #64748b;
  text-align: center;
  padding: 14px;
}
.transfer-order-rows{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 58vh;
  overflow: auto;
  padding-right: 4px;
}
.transfer-order-row{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.95);
  background: #fff;
}
.transfer-order-rowTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.transfer-order-rowTop span{
  font-size: 12px;
  font-weight: 900;
  color: #0f766e;
  background: rgba(20,184,166,.10);
  border-radius: 999px;
  padding: 4px 8px;
}
.transfer-order-rowDesc{
  color: #0f172a;
  font-weight: 700;
}
.transfer-order-rowMeta{
  color: #64748b;
  font-size: 12px;
}
.logout-pill{
  background: linear-gradient(135deg, #fff1f2, #ffe4e6);
  border-color: #fda4af;
  color: #be123c;
}
.logout-pill:hover{
  filter: brightness(.98);
}
.home-pill{
  background: var(--accent);
  border-color: transparent;
  color:#fff;
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:72px;
  min-width:72px;
  min-height:72px;
  flex: 0 0 72px;
  aspect-ratio: 1 / 1;
  padding:0;
  line-height: 1;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(37,99,235,.24);
}
.home-pill .top-pill-icon-img{
  width: 60px;
  height: 60px;
  flex-basis: 60px;
}
.home-pill:hover{ filter: brightness(.97); }

.top-identity-card{
  gap: 12px;
  padding: 10px 18px 10px 12px;
  min-height: 72px;
  min-width: 220px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}
.top-identity-icon{
  width: 54px;
  height: 54px;
  flex-basis: 54px;
}
.top-identity-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width: 0;
  gap: 2px;
}
.top-identity-name{
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--ink);
}
.top-identity-time{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .02em;
}

.sale-topbar .sync-status{
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: var(--ink);
  border: 1px solid var(--border);
  min-height: 68px;
  min-width: 68px;
  padding: 7px;
  font-size: 11px;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  position: relative;
  overflow: hidden;
}
.sale-topbar .sync-status .sync-icon-image{
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
}
.sale-topbar .sync-status .sync-label{
  display: none;
}
.sale-topbar .sync-status .sync-dot{
  width: 7px;
  height: 7px;
  box-shadow: none;
}
.sale-topbar .notif-bell{
  border-color: var(--border);
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  font-size: 16px;
  min-width: 68px;
  min-height: 68px;
  padding: 7px;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.sale-topbar .notif-bell .notif-bell-icon-image{
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
}
.sale-topbar .notif-bell:hover{
  background: #f1f5f9;
}
.sale-topbar .notif-badge{
  top: 3px;
  right: 3px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 2px solid #fff;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(239,68,68,.26);
}
.sale-topbar .notif-miniBadge{
  min-width: 18px;
  height: 18px;
  font-size: 9px;
  border-width: 2px;
}
.sale-topbar .sync-status.is-ok{
  background: rgba(22,163,74,.12);
  color: #15803d;
  border-color: rgba(22,163,74,.25);
  box-shadow: 0 10px 22px rgba(22,163,74,.10);
}
.sale-topbar .sync-status.is-error{
  background: rgba(239,68,68,.12);
  color: #b91c1c;
  border-color: rgba(239,68,68,.25);
  box-shadow: 0 10px 22px rgba(239,68,68,.10);
}
.sale-topbar-session{
  margin-left: auto;
}

.sale-wrap.sale-ma button,
.sale-wrap.sale-ma input,
.sale-wrap.sale-ma select,
.sale-wrap.sale-ma textarea{
  font-family: inherit;
}

.sale-wrap.sale-ma :focus-visible{
  outline: 2px solid rgba(225,6,0,.35);
}

/* =========================
   Layout pagina
   ========================= */
.sale-body{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: start;
}

.sale-closure-alert{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin: 0 0 10px;
  padding: 10px 12px;
}
.sale-closure-alert .actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.sale-left{
  display:flex;
  flex-direction:column;
  gap: var(--gap);
  min-width: 0;
  width: 100%;
  max-width: none;
  position: relative;
  z-index: 35;
}

/* Card base */
.sale-wrap .card,
.sale-wrap .cart,
.sale-wrap .topbar-card,
.sale-wrap .sale-toolbar{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}

/* =========================
   HERO (riepiloghi) — più piccoli
   ========================= */
.sale-hero{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0 0 8px 0;
}

.hero-card{
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
}
.hero-card.clickable{
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}
.hero-card.clickable:hover{
  box-shadow: var(--shadow2);
  transform: translateY(-1px);
}
.hero-card.clickable:active{
  transform: translateY(0);
}

.hero-label{
  display:block;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.hero-value{
  font-size: 18px;
  font-weight: 950;
  line-height: 1.1;
}
.hero-value.small{ font-size: 14px; }
.hero-sub{
  display:block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.hero-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  background: rgba(107,114,128,.10);
  color: var(--muted);
}
.hero-pill.ok{ background: rgba(22,163,74,.12); color:#15803d; }
.hero-pill.warn{ background: rgba(245,158,11,.14); color:#92400e; }

/* =========================
   Toolbar ricerca articoli (sopra lista)
   ========================= */
.sale-toolbar{
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  order: 2;
}

.sale-toolbar .toolbar-left{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

.sale-wrap .title-and-search{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.sale-wrap .title-and-search h4{
  margin:0;
  font-size: 16px;
  font-weight: 950;
}

.sale-wrap .search{
  width: min(680px, 100%);
  height: 36px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: none;
  font-size: 13px;
  pointer-events: auto;
  position: relative;
  z-index: 3;
}
.sale-wrap .search::placeholder{ color: rgba(107,114,128,.85); }

.cart-meta{
  margin-top: 8px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cart-metric{
  position: relative;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #f8fafc;
  display:flex;
  flex-direction:column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
}
.cart-metric strong{
  font-size: 13px;
  color: var(--ink);
}
.cart-metric small{
  font-size: 10px;
  color: var(--muted);
}
.cart-metric-action{
  cursor: pointer;
  align-items:flex-start;
  text-align:left;
}
.cart-metric-action:hover{
  border-color: rgba(225,6,0,.3);
  background: #fff;
}
.cart-status{
  display:inline-flex;
  align-items:center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  background: rgba(107,114,128,.12);
  color: var(--muted);
  width: fit-content;
}
.cart-status.ok{ background: rgba(22,163,74,.14); color:#15803d; }
.cart-status.warn{ background: rgba(245,158,11,.18); color:#92400e; }
.meta-clear{
  position:absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor:pointer;
}

.cart-tools{
  margin-top: 8px;
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
}

.toolbar-head{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap: 8px;
}
.toolbar-head-actions{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}
.toolbar-head-actions .btn{
  width: 100%;
}

.toolbar-search-row{
  display:flex;
  flex-direction:column;
  gap: 6px;
  position: relative;
  z-index: 42;
  pointer-events: auto;
}

.toolbar-switches{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.toolbar-quick{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.sale-wrap .toolbar-filters{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items:center;
}
.sale-wrap .toolbar-filters select,
.sale-wrap .toolbar-filters .filter-tag{
  height: 34px;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 0 10px;
  background:#fff;
  min-width: 0;
  width: 100%;
  font-size: 12px;
}

/* Pills / Buttons */
.sale-wrap .pill{
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(107,114,128,.08);
  color: var(--ink);
  font-weight: 900;
  cursor:pointer;
  box-shadow: none;
  touch-action: manipulation;
}
.sale-wrap .pill.small{
  height: var(--tap-sm);
  padding: 0 10px;
  font-size: 12px;
}
.sale-wrap .pill.selected{
  background: #111827;
  border-color:#111827;
  color:#fff;
}
.sale-wrap .pill:disabled{
  opacity:.5;
  cursor: default;
}

.sale-left .pill{
  height: 30px;
  padding: 0 10px;
  font-size: 11.5px;
}
.sale-left .pill.small{
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
}

/* Barra ricerca articoli (separata dal carrello) */
.article-toolbar{
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  position: relative;
  z-index: 40;
  pointer-events: auto;
}
.article-toolbar .search{
  width: 100%;
  flex: 0 0 auto;
  height: 36px;
  border-radius: 14px;
  font-size: 13px;
  position: relative;
  z-index: 45;
  pointer-events: auto !important;
}
.article-toolbar .sort-switch{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.article-toolbar .toolbar-filters{
  margin-top: 4px;
  display:grid;
  gap: 6px;
  align-items:center;
}

.article-toolbar .sort-switch .pill,
.article-toolbar .toolbar-quick .pill{
  width: 100%;
  justify-content: center;
}

.sale-left .btn{
  height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 12px;
}

.toolbar-search-row .btn{
  width: 100%;
}

.sale-wrap .btn{
  height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:#fff;
  font-weight: 950;
  cursor:pointer;
  box-shadow: none;
  transition: transform .08s ease;
  touch-action: manipulation;
}
.sale-wrap .btn:hover{ transform: translateY(-1px); }
.sale-wrap .btn:active{ transform: translateY(0); }
.sale-wrap .btn.small{
  height: var(--tap-sm);
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
}
.sale-wrap .btn.primary{
  background: var(--accent);
  border-color: transparent;
  color:#fff;
}
.button.icon{ background:none; border:none; cursor:pointer; }

/* ✅ NO :has() (fragile). Usa questa classe nel JSX sul pannello cliente. */
.sale-left .client-panel{ order: 10; }

/* =========================
   Lista prodotti (2 colonne, piccoli)
   ========================= */
.sale-wrap .grid{
  min-height: 280px;
  min-width: 0;
  order: 3;
}

/* ✅ 2 colonne vere */
.sale-wrap .cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sale-wrap .card{
  position: relative;
  border-radius: 14px;
  padding: 8px;
  background:#fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  gap: 8px;
  transition: transform .12s ease, box-shadow .12s ease;
  touch-action: manipulation;
}
.sale-wrap .card:hover{ transform: translateY(-2px); box-shadow: var(--shadow2); }

.sale-wrap .card .img.small{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow:hidden;
  background: rgba(107,114,128,.10);
  display:flex;
  align-items:center;
  justify-content:center;
}
.sale-wrap .card .img.small img{
  width:100%;
  height:100%;
  object-fit: contain;
  background:#fff;
}
.img-ph{ width:100%; height:100%; background: rgba(107,114,128,.10); border-radius: 10px; }

.sale-wrap .card .meta{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin: 6px 0 0 0;
  min-width: 0;
}
.sale-wrap .card .title{
  font-weight: 950;
  font-size: 12px;
  line-height: 1.2;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.sale-wrap .card .code{
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.sale-wrap .card .info-line{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--muted);
}

.sale-wrap .tag-cloud{ display:flex; flex-wrap:wrap; gap: 6px; }
.sale-wrap .tag, .sale-wrap .stock-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  background: rgba(107,114,128,.10);
  color: var(--muted);
}
.sale-wrap .tag.pack-badge{
  background: rgba(245,158,11,.16);
  color: #92400e;
}
.sale-wrap .tag.pack-badge.grouped{
  background: rgba(14,165,233,.14);
  color: #0f766e;
}
.sale-wrap .stock-pill.ok{ background: rgba(22,163,74,.12); color:#15803d; }
.sale-wrap .stock-pill.low{ background: rgba(239,68,68,.12); color:#b91c1c; }

.sale-wrap .card .price{
  font-weight: 950;
  font-size: 12px;
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.sale-wrap .card .price .strike{ text-decoration: line-through; color: rgba(107,114,128,.85); font-weight:900; }
.sale-wrap .card .price .now{ color: var(--ok); }

.sale-wrap .card .promo-badge{
  position:absolute;
  left: 10px;
  top: 10px;
  background: var(--danger);
  color:#fff;
  font-weight: 950;
  border-radius: 10px;
  padding: 3px 6px;
  font-size: 10.5px;
}

.sale-wrap .dot{ width: 10px; height:10px; border-radius: 50%; display:inline-block; }

.sale-wrap .card .btn, .sale-wrap .card .pill{
  height: 30px;
  border-radius: 10px;
  font-size: 12px;
}

/* =========================================================
   CARRELLO — contenitore largo, contenuti compatti
   ========================================================= */
.cart-shell{
  align-self: start;
  position: fixed;
  top: calc(var(--topbar-h) + var(--pad));
  right: var(--pad);
  width: var(--cartw);
  height: calc(100vh - var(--topbar-h) - (var(--pad) * 2));
  z-index: 20;
  pointer-events: auto;
}

.cart{
  position: static;
  width: 100%;
  min-width: 0;
  max-width: var(--cartw);

  height: 100%;
  max-height: 100%;

  padding: 12px;
  border-radius: 18px;

  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index: 5;

  font-size: 12.5px;
  line-height: 1.35;
  pointer-events: auto;
}

/* Header cart (compattato) */
.cart-head{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-bottom: 8px;
}
.cart-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
}
.cart-title-main{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.cart-head-actions{
  display:flex;
  align-items:center;
  gap: 8px;
}

/* eventuale input cliente nel carrello */
.cart .client-wrap{ position:relative; }
.cart .client-wrap input{
  width:100%;
  height: var(--tap-sm);
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background:#fff;
  font-size: 11px;
}

/* dropdown clienti */
.client-dd{
  position:absolute;
  top: calc(var(--tap-sm) + 6px);
  left:0; right:0;
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  max-height: 260px;
  overflow:auto;
  box-shadow: var(--shadow2);
  z-index: 40;
  scrollbar-gutter: stable;
}
.client-dd-item{
  width:100%;
  border:0;
  background:#fff;
  text-align:left;
  padding: 8px 10px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-size: 11px;
  touch-action: manipulation;
}
.client-dd-item:hover{ background: rgba(37,99,235,.06); }
.client-dd-name{ font-weight: 950; }

/* Righe carrello: scroll */
.cart-scroll{
  flex: 1;
  display:flex;
  flex-direction:column;
  overflow: auto;
  min-height: 0;
  padding-bottom: 6px;
}
.cart-rows{
  flex: 0 0 auto;
  overflow: visible;
  min-height:0;
  padding-right: 2px;
  margin-top: 4px;
  scrollbar-gutter: stable;
}

/* Header tabella carrello (super compatto) */
.cart-header-row{
  position: sticky;
  top: 0;
  z-index: 2;
  background:#fff;
  padding: 12px 6px;
  border-bottom: 1px solid var(--border);

  display:grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 12px;

  align-items:center;
  font-weight: 950;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(15,23,42,.80);
}
.cart-header-row .header-left{ justify-self: start; }
.cart-header-row .header-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 8px;
  white-space: nowrap;
}
.cart-header-row .header-controls span{
  font-weight: 950;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(15,23,42,.80);
}
.cart-header-row .h-price{ width: 90px; text-align:center; }
.cart-header-row .h-disc{ width: 70px; text-align:center; }
.cart-header-row .h-reso{ width: 84px; text-align:center; }
.cart-header-row .h-total{ width: 90px; text-align:right; }
.cart-header-row .h-del{ width: 32px; }

/* Righe */
.cart-rows .row{
  display:grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 14px;
  align-items:center;

  padding: 12px 6px;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.cart-rows .row .row-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 8px;
}
.row-controls .qty{ min-width: 52px; justify-content:center; }
.row-controls .price{ width: 90px; justify-content:center; }
.row-controls .disc-col{ width: 150px; justify-content:center; }
.row-controls .reso-col{ width: 84px; justify-content:center; }
.row-controls .tot{ width: 90px; text-align:right; }
.row-controls .icon{ width: 32px; }
.cart-rows .row > *:nth-child(n+3){ justify-self: end; }
.cart-rows .row > *:nth-child(2){ justify-self: start; }

/* thumb super piccolo */
.c-thumb img, .c-thumb .img-ph{
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(107,114,128,.10);
}

/* testo descrizione ridotto */
.desc .t1{
  margin:0;
  font-size: 12.5px;
  font-weight: 950;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.desc .muted.small{
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  align-items:center;
}
.desc .muted.small .strike{ text-decoration: line-through; opacity:.8; }

/* tag varianti piccoli */
.variants-line{
  margin-top: 2px;
  display:flex;
  flex-wrap:wrap;
  gap: 4px;
}
.variants-line .tag{
  padding: 3px 8px;
  font-size: 10.5px;
  border-radius: 999px;
}

/* qty/price compatti ma touch ok */
.qty{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 6px;
  flex-wrap: nowrap;
}
.qty .qty-inp{
  height: var(--tap-sm);
  width: auto;
  min-width: 3ch;
  text-align:center;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-weight: 950;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.qty .qty-inp.is-invalid{
  border-color: #f97316;
  background: #fff7ed;
  color: #9a3412;
}

/* ✅ bottoni qty con target comodo */
.qty .pill.small{
  height: var(--tap-sm);
  padding: 0 10px;
  font-size: 11.5px;
}

.price.right, .tot.right{
  text-align:right;
  white-space:nowrap;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}
.price.right{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap: 14px;
}

.price-inp{
  height: var(--tap-sm);
  min-width: 86px;
  max-width: 130px;
  padding: 0 8px;
  text-align:right;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-weight: 950;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* rimuovi spinner dai number nei campi carrello */
.cart-rows input[type=number]{ -moz-appearance: textfield; }
.cart-rows input[type=number]::-webkit-outer-spin-button,
.cart-rows input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.disc-col{ display:flex; justify-content:center; }
.disc-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.disc-inp{
  height: var(--tap-sm);
  width: 72px;
  min-width: 72px;
  max-width: 72px;
  text-align:center;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.rounding-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.pill.tiny{
  min-width: 38px;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  border-radius: 999px;
}
.rounding-inline{
  background: rgba(37,99,235,.10);
  color: #1d4ed8;
}

.cart-rows .row .icon{ color: var(--danger); font-size: 16px; }

/* promo note mini */
.pack-note{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  margin-top: 4px;
  padding: 5px 10px;
  border-radius: 12px;
  font-weight: 950;
  font-size: 11px;
  background: rgba(245,158,11,.16);
  color: #92400e;
}
.pack-line-note{
  color: #c2410c;
  font-size: 12px;
  font-weight: 700;
}

/* =========================
   Totali e footer (compatti)
   ========================= */
.cart-footer{
  border-top: 1px solid var(--border);
  padding-top: 10px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.discount-panel{
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px;
  background: rgba(15,23,42,.03);
  display:flex;
  flex-direction:column;
  gap: 12px;
  margin-bottom: 10px;
}
.discount-panel summary{
  list-style: none;
  cursor: pointer;
}
.discount-panel summary::-webkit-details-marker{ display: none; }

.discount-panel.compact{
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  position: relative;
}
.discount-panel.compact .discount-panel-body{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 320px;
  max-width: 360px;
  z-index: 6;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow2);
  padding: 10px;
}

.discount-summary{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.discount-panel[open] .discount-summary{ margin-bottom: 6px; }

.discount-badges{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
}

.discount-panel-body{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.recent-purchases{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 10px;
  background:#fff;
}

.recent-inline{
  margin: 6px 0 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:#fff;
  padding: 8px 10px;
}

.recent-inline-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.recent-inline-body{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  gap: 6px;
  max-height: 240px;
  overflow: auto;
}
.recent-purchases summary{
  list-style: none;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.recent-purchases summary::-webkit-details-marker{ display: none; }
.recent-purchases-body{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.recent-item{
  display:grid;
  grid-template-columns: 40px 1fr auto;
  gap: 8px;
  align-items:center;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(107,114,128,.06);
}
.recent-item-img{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow:hidden;
  background:#fff;
  border: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  color: var(--muted);
}
.recent-item-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recent-item-title{
  font-weight: 900;
  font-size: 12px;
}
.recent-item-meta{
  text-align:right;
  font-variant-numeric: tabular-nums;
}
.recent-item-price{
  font-weight: 900;
  font-size: 12px;
}

.discount-quick{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap: wrap;
}
.discount-quick .muted.small{
  font-size: 11px;
}

.discount-row{
  border: 1px solid var(--border);
  border-radius: 14px;
  background:#fff;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.discount-row.is-active{
  border-color: rgba(37,99,235,.35);
  background: rgba(37,99,235,.06);
}
.discount-row.fidelity.is-active{
  border-color: rgba(22,163,74,.35);
  background: rgba(22,163,74,.08);
}

.discount-label{
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  margin-bottom: 2px;
}

.discount-actions{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap: wrap;
}

.cart-pack-hint.mini{
  margin-top: 4px;
  padding: 7px 10px;
  font-size: 11px;
}

.discounts.compact{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.discount-field{
  display:flex;
  flex-direction:column;
  gap: 4px;
  min-width: 120px;
}
.discount-field.note{ flex:1; min-width: 180px; }

.inp-xs{
  height: var(--tap-sm);
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 12px;
}
.discount-note{ margin-top: 4px; }

.discount-wizard-inline{
  margin-top: 6px;
  padding: 10px;
  border: 1px dashed rgba(37,99,235,.25);
  border-radius: 12px;
  background: rgba(37,99,235,.04);
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.dwi-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.dwi-title{ font-weight: 900; font-size: 13px; }
.dwi-switch{ display:flex; gap: 6px; flex-wrap: wrap; }
.dwi-body{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:flex-start;
}
.dwi-fields{
  display:flex;
  align-items:flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.dwi-fields .btn.small{
  height: var(--tap-sm);
  padding: 0 12px;
}
.dwi-summary{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(110px,1fr));
  gap: 6px;
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  min-width: 220px;
}
.dwi-summary span{
  display:block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.dwi-summary strong{
  display:block;
  font-size: 12px;
  font-weight: 900;
}

.totals{
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed rgba(15,23,42,.18);
}
.totals .line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 3px 2px;
  color: rgba(15,23,42,.92);
  font-size: 12px;
}
.totals .big{
  font-size: 14px;
  font-weight: 950;
}

.totals-pay-corner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.cart-right .totals{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px;
  padding: 8px 10px;
  margin-top: 0;
}

.cart-right .pay-summary{
  padding: 10px;
  border-radius: 12px;
}

/* =========================
   Pagamenti compatti (lista sopra opzioni)
   ========================= */
.pay-compact{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin: 6px 0 8px;
}
.pay-compact-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
}
.pay-compact-rows{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.pay-compact-row{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap: wrap;
}
.pay-methods-compact{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap: wrap;
}
.pay-methods-compact .pill.small{
  height: 28px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 900;
}
.pay-compact-select,
.pay-compact-input{
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 0 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.pay-compact-select{
  background:#fff;
  font-weight: 800;
}
.pay-compact-input{
  width: 120px;
  text-align: right;
}
.pay-compact-resto{
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  white-space: nowrap;
}
.pay-compact-gift{
  display:flex;
  align-items:center;
  gap: 6px;
}
.pay-remove{
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 14px;
}

/* =========================
   Riepilogo pagamenti (in pagina)
   ========================= */
.pay-summary{
  border: 1px solid var(--border);
  border-radius: 14px;
  background:#fff;
  padding: 10px 12px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
}
.pay-summary-actions{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
}
.pay-summary-lines{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.pay-summary-lines .line{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pay-summary-lines .label{
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pay-summary-lines .value{
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pay-summary-lines .resto-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.pay-summary-lines .value-resto{
  color: #b91c1c;
}
.zero-value-warning-inline{
  margin-top: 6px;
  display: flex;
  align-items: center;
}
.zero-value-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-size: 11px;
  font-weight: 900;
}

.pack-warning-inline{
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
}
.pack-warning-title{
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 4px;
}
.pack-warning-list{
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
}

/* =========================
   Modale pagamenti
   ========================= */
.pay-modal{
  width: min(720px, 96vw);
}
.pay-modal-body{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.pay-modal-section{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.pay-modal-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
}
.pay-head{
  align-items: flex-start;
  gap: 12px;
}
.pay-head .head-left{
  min-width: 0;
}
.pay-modal-head-summary{
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.pay-modal-head-actions{
  display: flex;
  align-items: center;
  gap: 6px;
}
.pay-modal-head-summary .summary-line{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 2px;
}
.pay-modal-amount{
  font-size: 16px;
  font-weight: 900;
  margin-top: 2px;
}
.pay-modal-actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lottery-box{
  grid-column: 1 / -1;
  border: 1px solid #bae6fd;
  border-radius: 14px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdfa 100%);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 10px;
  align-items: center;
}
.lottery-box--modal{
  margin: 0;
}
.lottery-input{
  width: 100%;
  border: 1px solid #7dd3fc;
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lottery-input:focus{
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2,132,199,.14);
}
.pay-modal-rows{
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-height: min(52vh, 420px);
  overflow:auto;
  padding-right: 2px;
}
.pay-modal-row{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  background:#fff;
}
.pay-modal-methods{
  display:flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.pay-method-pill{
  width: 150px;
  min-width: 150px;
  min-height: 110px;
  padding: 0 !important;
  border-radius: 0 !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 0;
  text-align:center;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.05;
  position: relative;
  transition: transform .08s ease, filter .16s ease, opacity .16s ease;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.pay-method-pill:not(:last-child)::before{
  content:"";
  position:absolute;
  right:-10px;
  top:50%;
  width: 1px;
  height: 72px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(203,213,225,0), rgba(203,213,225,.95), rgba(203,213,225,0));
  pointer-events:none;
}
.pay-modal-methods:has(.pay-method-pill.selected) .pay-method-pill:not(.selected){
  opacity: .42;
  filter: grayscale(.12);
}
.pay-method-pill::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -8px;
  width: 0;
  height: 4px;
  border-radius: 999px;
  background: transparent;
  transform: translateX(-50%);
  pointer-events:none;
  transition: width .16s ease, background .16s ease, box-shadow .16s ease;
}
.pay-method-pill:hover{
  transform: translateY(-1px);
}
.pay-method-pill-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 0;
  width: 100%;
  min-height: 110px;
}
.pay-method-pill-copy{
  display:none;
}
.pay-method-pill-icon{
  width: 132px;
  height: 96px;
  object-fit: contain;
  flex: 0 0 auto;
  max-width: 132px;
  margin: 0;
  filter: drop-shadow(0 6px 12px rgba(15,23,42,.10));
}
.pay-method-pill.selected{
  transform: translateY(-2px) scale(1.02);
}
.pay-method-pill.pay-method-contanti.selected::after{
  width: 76px;
  background: rgba(22,163,74,.88);
  box-shadow: 0 2px 10px rgba(22,163,74,.22);
}
.pay-method-pill.pay-method-pos.selected::after{
  width: 76px;
  background: rgba(37,99,235,.9);
  box-shadow: 0 2px 10px rgba(37,99,235,.24);
}
.pay-method-pill.pay-method-satispay.selected::after{
  width: 76px;
  background: rgba(147,51,234,.86);
  box-shadow: 0 2px 10px rgba(147,51,234,.22);
}
.pay-method-pill.selected .pay-method-pill-icon{
  filter: drop-shadow(0 12px 22px rgba(15,23,42,.18));
}
.pay-method-pill.pay-method-voucher{
  margin-left: auto;
  width: 150px;
  min-width: 150px;
}
.pay-method-pill.pay-method-voucher:hover{
  transform: translateY(-1px);
}
.pay-method-pill.pay-method-voucher::after{
  width: 0;
}
.pay-modal-methods:has(.pay-method-pill.selected) .pay-method-pill.pay-method-voucher{
  opacity: 1;
  filter: none;
}
.pay-modal-inputs{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}
.pay-quick{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pay-modal-input{
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 0 12px;
  width: 140px;
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cash-change-helper{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(34,197,94,.26);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(240,253,244,.98), rgba(236,253,245,.92));
}
.cash-change-helper-main{
  color: #14532d;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
}
.cash-change-helper-copy{
  margin-top: 2px;
  color: #166534;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.cash-change-helper .btn{
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 560px){
  .cash-change-helper{
    align-items: stretch;
    flex-direction: column;
  }
  .cash-change-helper .btn{
    width: 100%;
  }
}
.pay-modal-gift{
  display:flex;
  align-items:center;
  gap: 6px;
}
.pay-modal-vouchers{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.pay-modal-voucher-row{
  border: 1px solid rgba(245, 158, 11, .28);
  background: rgba(255, 247, 237, .92);
  border-radius: 12px;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.pay-modal-voucher-amount{
  font-weight: 900;
  color: #9a3412;
  font-variant-numeric: tabular-nums;
}

/* =========================
   Pagamenti (tab e input piccoli ma comodi)
   ========================= */
.pay{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin-top: 4px;
}
.pay-row{
  border: 1px solid var(--border);
  background: rgba(107,114,128,.06);
  border-radius: 16px;
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.pay-row-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  flex-wrap: wrap;
}

/* tab pagamenti mini */
.pay-methods{ display:flex; gap: 6px; flex-wrap:wrap; }
.pay-methods .code-pill{
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(107,114,128,.12);
}
.pay-btn{
  height: var(--tap-sm);
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background:#fff;
  font-weight: 950;
  font-size: 12px;
  cursor:pointer;
  touch-action: manipulation;
}
.pay-btn.is-active{
  background: var(--accent);
  border-color: var(--accent);
  color:#fff;
}

.pay-amount{ display:flex; gap: 8px; align-items:center; }

.pay-row input{
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 0 12px;
  width: 130px;
  flex: 0 0 130px;
  font-size: 12.5px;
}

.pay-fill{
  height: var(--tap-sm);
  padding: 0 12px;
  border-radius: 10px;
  border: 1px dashed rgba(107,114,128,.35);
  background:#fff;
  font-weight: 950;
  font-size: 11px;
  cursor:pointer;
  white-space: nowrap;
  touch-action: manipulation;
}
.pay-fill:disabled{ opacity:.45; cursor: default; }

.cart-options,
.cart-cassa,
.cart-cassa-toggle{
  margin: 6px 0;
  display:flex;
  flex-wrap: nowrap;
  gap: 6px;
}

.cart-bottom-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  position: sticky;
  bottom: 0;
  background:#fff;
  padding-top: 6px;
  border-top: 1px solid rgba(15,23,42,.06);
  overflow-x: auto;
}

.rounding-controls{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.rounding-controls .manual-total{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap: wrap;
}
.rounding-controls .manual-total input{
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 0 12px;
  width: 160px;
  font-size: 12.5px;
}

.receipt-row{
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
}

.cart-options .pill.small,
.cart-cassa .pill.small{
  height: 26px;
  padding: 0 8px;
  font-size: 10.5px;
}
.action-pill{
  border-width: 1px;
}
.action-pill.action-rounding{
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.action-pill.action-courtesy{
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}
.action-pill.action-pill-icon{
  padding: 0 10px;
  min-width: 86px;
  justify-content: center;
}
.action-pill-icon-img{
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
}
.action-pill.action-doc{
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.action-pill.action-cassa{
  background: #faf5ff;
  border-color: #d8b4fe;
  color: #7e22ce;
}
.action-pill.selected{
  color: #111827;
  border-color: #111827;
  background: #e5e7eb;
}
.cart-options .pill.small.ghost,
.cart-cassa .pill.small.ghost{
  border-color: var(--border);
}
.cart-cassa-toggle{ justify-content: flex-start; }

.cassa-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.action-btn.action-retry{
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}
.action-btn.action-park{
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.action-btn.action-resume{
  background: #ecfeff;
  border-color: #67e8f9;
  color: #0e7490;
}
.action-btn.action-clear{
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.action-btn.action-confirm{
  background: linear-gradient(135deg, #f97316, #dc2626);
  color: #fff;
  border-color: transparent;
}
.action-btn.action-confirm.action-confirm-icon{
  padding: 0 !important;
  min-width: 72px !important;
  width: 72px;
  height: 72px;
  justify-content: center;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.action-btn.action-btn-icon{
  padding: 0 10px !important;
  min-width: 88px !important;
  justify-content: center;
}
.action-btn-icon-img{
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}
.action-confirm-icon-img{
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
}

/* =========================
   ✅ BOTTONI in basso (Parcheggia / Riprendi / Svuota / Conferma)
   - solo larghezza del testo
   - allineati a DESTRA
   ========================= */
.cart-actions{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 10px !important;
}

.cart-actions .btn{
  width: auto !important;
  min-width: 0 !important;
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.line-reso-pill{
  min-width: 54px;
  min-height: 40px;
  justify-content: center;
  padding: 6px 8px;
}
.line-reso-icon-img{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

/* Forza i pulsanti principali a NON essere full-width */
.cart .btn,
.cart .pill{ width: auto; }

/* Caso “Conferma” full-width blu */
.cart .btn.primary,
.cart .btn.confirm,
.cart .confirm,
.cart button.primary{
  width: auto !important;
  max-width: none !important;
}

/* =========================
   Modali
   ========================= */
.sale-wrap .sale-modal{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.12);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.sale-wrap .sale-modal .m-body{
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: min(860px, 96vw);
  max-height: min(88vh, calc(100vh - 32px));
  overflow: auto;
  background:#fff;
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow2);
  padding: 16px;
}
.sale-wrap .sale-modal .m-body.wide{ width: min(1180px, 98vw); }
.sale-wrap .sale-modal.variant{ z-index: 10020; }
.sale-wrap .sale-modal.variant .vs{
  display:flex;
  flex-direction:column;
  gap: 8px;
  justify-content:flex-start;
  align-content:flex-start;
  min-height: 0;
}
.sale-wrap .sale-modal.variant .vs-group{
  aspect-ratio: auto !important;
  height: auto;
  min-height: 0;
  display: block;
  box-shadow: none;
}
.sale-wrap .sale-modal.variant .vs-title{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fafc;
  padding: 9px 12px;
  font-weight: 800;
  color: var(--text);
  cursor: default;
}
.sale-wrap .sale-modal.variant .vs-title .req{
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}
.sale-wrap .sale-modal.variant .vs-pills{
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sale-wrap .sale-modal.variant .m-art{
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.sale-wrap .sale-modal.variant .m-art .thumb{
  width: 112px;
  height: 112px;
  border-radius: 16px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sale-wrap .sale-modal.variant .m-art .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sale-wrap .sale-modal.variant .m-art .info{
  min-width: 0;
}
.sale-wrap .sale-modal.variant .m-art .info .t1{
  font-size: 20px;
  font-weight: 800;
  line-height: 1.12;
  color: var(--ink);
}
.sale-wrap .sale-modal.variant .vs-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 7px 14px 7px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  cursor: pointer;
}
.sale-wrap .sale-modal.variant .vs-pill.active{
  border-color: rgba(37,99,235,.45);
  background: rgba(37,99,235,.12);
  color: #0f172a;
}
.sale-wrap .sale-modal.variant .vs-dot{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(15,23,42,.15);
  background: #fff;
  flex: 0 0 46px;
}
@media (max-width: 860px){
  .sale-wrap .sale-modal.variant .m-art{
    grid-template-columns: 1fr;
  }
}
.sale-wrap .sale-modal .m-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.modal-input{
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
}

/* client modal */
.client-modal{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.client-search-row{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.client-current{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(37,99,235,.06);
  border: 1px dashed rgba(37,99,235,.28);
  font-weight: 700;
}
.client-results{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.client-result{
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #f8fafc;
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
  touch-action: manipulation;
}
.client-result:hover{
  border-color: rgba(37,99,235,.45);
  box-shadow: var(--shadow);
}
.client-result-name{
  font-weight: 900;
  margin-bottom: 4px;
}

/* reso modal */
.reso-modal{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cash-tender-modal{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cash-tender-summary{
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff7ed 0%, #fffbeb 100%);
  border: 1px solid #fdba74;
  text-align: center;
}
.cash-tender-label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9a3412;
}
.cash-tender-due{
  margin-top: 6px;
  font-size: 34px;
  line-height: 1;
  font-weight: 1000;
  color: #7c2d12;
  font-variant-numeric: tabular-nums;
}
.cash-tender-input{
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border-radius: 16px;
  border: 2px solid rgba(249,115,22,.28);
  background: #fff;
  font-size: 28px;
  font-weight: 900;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #7c2d12;
}
.cash-change-helper--tender{
  margin-top: -2px;
}
.reso-modal label{ font-weight: 800; }
.reso-actions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.reso-wizard-modal{
  max-height: min(92vh, 860px);
  display: flex;
  flex-direction: column;
}
.reso-wizard{
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reso-wizard-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(226,232,240,.92);
  border-radius: 18px;
  background: #f8fafc;
}
.reso-wizard-total{
  font-size: 28px;
  line-height: 1;
  font-weight: 1000;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.reso-wizard-list{
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}
.reso-wizard-row{
  display: grid;
  grid-template-columns: 30px 64px minmax(220px, 1fr) 132px 138px;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(226,232,240,.92);
  border-radius: 18px;
  background: #fff;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.reso-wizard-row.is-selected{
  border-color: rgba(37,99,235,.34);
  background: #f8fbff;
  box-shadow: 0 0 0 4px rgba(37,99,235,.05);
}
.reso-wizard-check{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.reso-wizard-check input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.reso-wizard-check span{
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 2px solid #cbd5e1;
  background: #fff;
  box-shadow: inset 0 0 0 2px #fff;
}
.reso-wizard-check input:checked + span{
  border-color: #10233f;
  background: #10233f;
}
.reso-wizard-thumb{
  width: 64px;
  height: 64px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(226,232,240,.92);
  background: #f8fafc;
}
.reso-wizard-thumb img,
.reso-wizard-thumb .img-ph{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.reso-wizard-thumb .img-ph{
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}
.reso-wizard-info{
  min-width: 0;
}
.reso-wizard-code{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
}
.reso-wizard-desc{
  margin-top: 3px;
  font-size: 15px;
  line-height: 1.18;
  font-weight: 900;
  color: #0f172a;
  overflow-wrap: anywhere;
}
.reso-wizard-variant{
  margin-top: 4px;
  color: #475569;
  font-size: 13px;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.reso-wizard-price{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}
.reso-wizard-price span,
.reso-intent-summary span{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
}
.reso-wizard-price b{
  color: #0f172a;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.reso-wizard-qty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: end;
  width: 138px;
  min-width: 0;
  gap: 6px;
}
.reso-stepper{
  width: 138px;
  height: 40px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 14px;
  background: #f8fafc;
}
.reso-stepper-btn{
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #475569;
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .14s ease, color .14s ease;
}
.reso-stepper-btn:hover:not(:disabled){
  background: #eef2f7;
  color: #0f172a;
}
.reso-stepper-btn:disabled{
  opacity: .42;
  cursor: not-allowed;
}
.reso-stepper-input{
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0;
  text-align: center;
  border: 0;
  border-left: 1px solid rgba(203,213,225,.72);
  border-right: 1px solid rgba(203,213,225,.72);
  border-radius: 0;
  background: #fff;
  color: #0f172a;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}
.reso-stepper-input::-webkit-outer-spin-button,
.reso-stepper-input::-webkit-inner-spin-button{
  appearance: none;
  margin: 0;
}
.reso-wizard-qty .muted{
  text-align: center;
  width: 100%;
}
.reso-intent-summary{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.reso-intent-summary > div{
  padding: 16px;
  border: 1px solid rgba(226,232,240,.92);
  border-radius: 18px;
  background: #f8fafc;
}
.reso-intent-summary b{
  display: block;
  margin-top: 6px;
  font-size: 28px;
  line-height: 1;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.reso-intent-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.reso-intent-card{
  min-height: 132px;
  padding: 18px;
  border: 1px solid rgba(226,232,240,.92);
  border-radius: 18px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.reso-intent-card:hover{
  border-color: rgba(37,99,235,.34);
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
}
.reso-intent-card:active{
  transform: scale(.99);
}
.reso-intent-title{
  display: block;
  color: #0f172a;
  font-size: 18px;
  font-weight: 1000;
}
.reso-intent-copy{
  display: block;
  margin-top: 8px;
  color: #475569;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 650;
}
@media (max-width: 760px){
  .reso-wizard-modal{
    max-height: calc(100vh - 20px);
  }
  .reso-wizard-toolbar,
  .reso-intent-summary,
  .reso-intent-grid{
    grid-template-columns: 1fr;
  }
  .reso-wizard-toolbar{
    align-items: stretch;
    flex-direction: column;
  }
  .reso-wizard-row{
    grid-template-columns: 30px 56px minmax(0, 1fr);
    align-items: start;
  }
  .reso-wizard-thumb{
    width: 56px;
    height: 56px;
  }
  .reso-wizard-price,
  .reso-wizard-qty{
    grid-column: 2 / -1;
    justify-self: stretch;
  }
  .reso-wizard-price{
    align-items: flex-start;
  }
  .reso-wizard-qty{
    justify-content: start;
  }
}
.form-error{
  color: #b91c1c;
  font-weight: 800;
  font-size: 13px;
}

/* richiesta merce modal */
.sale-wrap .reqm-modal{
  width: min(1240px, 98vw) !important;
  max-height: min(90vh, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sale-wrap .reqm-banner{
  margin-bottom: 2px;
}
.sale-wrap .reqm-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
  gap: 12px;
  min-height: 0;
}
.sale-wrap .reqm-main,
.sale-wrap .reqm-side{
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f8fafc;
  padding: 10px;
  min-height: 0;
}
.sale-wrap .reqm-main{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sale-wrap .reqm-fields{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.sale-wrap .reqm-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sale-wrap .reqm-field select,
.sale-wrap .reqm-field input,
.sale-wrap .reqm-field textarea{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.sale-wrap .reqm-field input,
.sale-wrap .reqm-field select{
  min-height: 40px;
  padding: 0 10px;
}
.sale-wrap .reqm-field--disabled{
  opacity: .58;
}
.sale-wrap .reqm-field textarea{
  min-height: 64px;
  padding: 8px 10px;
  resize: vertical;
}
.sale-wrap .reqm-label{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.sale-wrap .reqm-priority-card{
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .34);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}
.sale-wrap .reqm-priority.is-active .reqm-priority-card{
  border-color: rgba(239, 68, 68, .34);
  background: linear-gradient(180deg, #fff7ed, #fff);
  box-shadow: 0 14px 30px rgba(239, 68, 68, .12);
}
.sale-wrap .reqm-priority-copy{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sale-wrap .reqm-priority-copy strong{
  color: #111827;
  font-size: 14px;
  line-height: 1.2;
}
.sale-wrap .reqm-priority-copy small{
  color: #64748b;
  font-size: 12px;
  line-height: 1.25;
}
.sale-wrap .reqm-priority-card input{
  width: 22px;
  height: 22px;
  accent-color: #ef4444;
  flex: 0 0 auto;
}
.sale-wrap .reqm-search{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.sale-wrap .reqm-search input{
  width: 100%;
}
.sale-wrap .reqm-section{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 8px;
}
.sale-wrap .reqm-section h4{
  margin: 0;
}
.sale-wrap .reqm-sectionHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.sale-wrap .reqm-section--results{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sale-wrap .reqm-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.sale-wrap .reqm-list--sug{
  max-height: 130px;
  overflow: auto;
}
.sale-wrap .reqm-list--results{
  max-height: 300px;
  overflow: auto;
  padding-right: 2px;
}
.sale-wrap .reqm-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  background: #fff;
}
.sale-wrap .reqm-list--results .reqm-row{
  grid-template-columns: 52px minmax(0, 1fr) auto;
}
.sale-wrap .reqm-thumb{
  width: 52px;
  height: 52px;
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: #f1f5f9;
}
.sale-wrap .reqm-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sale-wrap .reqm-meta{
  min-width: 0;
}
.sale-wrap .reqm-title{
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sale-wrap .reqm-code{
  font-size: 12px;
  color: var(--muted);
}
.sale-wrap .reqm-side{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sale-wrap .reqm-sideHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sale-wrap .reqm-sideHead h4{
  margin: 0;
}
.sale-wrap .reqm-list--lines{
  max-height: 470px;
  overflow: auto;
  padding-right: 2px;
}
.sale-wrap .reqm-row--line{
  grid-template-columns: minmax(0, 1fr) 80px auto;
}
.sale-wrap .reqm-qty{
  width: 80px;
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 34px;
  padding: 0 8px;
}
.sale-wrap .reqm-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}

.cash-change-overlay{
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15,23,42,.42);
}
.sale-result-overlay{
  align-items: center;
  overflow: auto;
  background: rgba(15,23,42,.46);
}
.sale-result-stack{
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: grid;
  gap: 14px;
}
.sale-result-stack .cash-change-popup,
.sale-result-stack .promo-voucher-popup{
  width: 100%;
}
.sale-result-stack.has-multiple{
  align-content: center;
}
.sale-result-stack.has-multiple .cash-change-popup{
  padding: 20px 24px;
  border-radius: 24px;
}
.sale-result-stack.has-multiple .cash-change-amount{
  margin-top: 12px;
  font-size: clamp(42px, 6vw, 64px);
}
.sale-result-stack.has-multiple .cash-change-copy{
  font-size: 16px;
}
.sale-result-stack.has-multiple .promo-voucher-popup{
  max-height: min(58vh, 520px);
}
.cash-change-popup{
  width: min(560px, calc(100vw - 32px));
  padding: 28px 30px;
  border-radius: 28px;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
  border: 2px solid rgba(249,115,22,.32);
  box-shadow: 0 30px 80px rgba(15,23,42,.24);
  text-align: center;
}
.cash-change-kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: .08em;
}
.cash-change-amount{
  margin-top: 18px;
  font-size: clamp(52px, 8vw, 86px);
  line-height: .95;
  font-weight: 1000;
  color: #7c2d12;
  font-variant-numeric: tabular-nums;
}
.cash-change-copy{
  margin-top: 14px;
  font-size: 20px;
  font-weight: 800;
  color: #9a3412;
}

.promo-voucher-overlay{
  background: rgba(245,245,247,.92);
}

.promo-voucher-popup{
  width: min(560px, calc(100vw - 32px));
  max-height: min(86vh, 760px);
  overflow: auto;
  padding: 24px;
  border-radius: 30px;
  border: 1px solid rgba(229,231,235,.78);
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 30px 80px rgba(17,24,39,.14);
  text-align: left;
  animation: promoVoucherIn .16s ease-out both;
}

@keyframes promoVoucherIn{
  from{
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.promo-voucher-head{
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.promo-voucher-icon{
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ECFDF3;
  color: #166534;
  border: 1px solid #BBF7D0;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.promo-voucher-kicker{
  color: #6B7280;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.promo-voucher-head h2{
  margin: 4px 0 0;
  color: #111827;
  font-size: 28px;
  line-height: 1.05;
  font-weight: 840;
  letter-spacing: 0;
}

.promo-voucher-head p{
  margin: 8px 0 0;
  color: #6B7280;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 620;
}

.promo-voucher-list{
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.promo-voucher-card{
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(229,231,235,.72);
  background: #F8F9FB;
}

.promo-voucher-source{
  width: fit-content;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(229,231,235,.72);
  color: #6B7280;
  font-size: 11.5px;
  font-weight: 740;
}

.promo-voucher-amount{
  margin-top: 4px;
  color: #10233F;
  font-size: clamp(44px, 7vw, 64px);
  line-height: .98;
  font-weight: 860;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.promo-voucher-details{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.promo-voucher-details:empty{
  display: none;
}

.promo-voucher-details div{
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(229,231,235,.68);
}

.promo-voucher-details span,
.promo-voucher-code-block span{
  display: block;
  color: #6B7280;
  font-size: 11.5px;
  font-weight: 720;
  letter-spacing: .02em;
}

.promo-voucher-details strong{
  display: block;
  margin-top: 4px;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
}

.promo-voucher-code-block{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(229,231,235,.72);
}

.promo-voucher-code-block code{
  display: block;
  margin-top: 7px;
  padding: 11px 12px;
  border-radius: 14px;
  background: #F3F4F6;
  color: #111827;
  font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-size: 19px;
  font-weight: 780;
  letter-spacing: .08em;
  user-select: all;
  overflow-wrap: anywhere;
}

.promo-voucher-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.promo-voucher-close{
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid #10233F;
  background: #10233F;
  color: #fff;
  font-weight: 780;
  box-shadow: none;
  transition: transform .14s ease, background .16s ease, border-color .16s ease;
}

.promo-voucher-close:hover{
  background: #0C1B31;
  border-color: #0C1B31;
  transform: translateY(-1px);
}

.promo-voucher-close:active{
  transform: scale(.985);
}

.pos-message-overlay{
  position: fixed;
  inset: 0;
  z-index: 21000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(245,245,247,.92);
}

.pos-message-dialog{
  width: min(460px, calc(100vw - 32px));
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(229,231,235,.78);
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 30px 80px rgba(17,24,39,.14);
  animation: posMessageIn .16s ease-out both;
}

@keyframes posMessageIn{
  from{
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pos-message-icon{
  width: 46px;
  height: 46px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: #EFF6FF;
  color: #10233F;
  border: 1px solid #DBEAFE;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
}

.pos-message-success .pos-message-icon{
  background: #ECFDF3;
  color: #166534;
  border-color: #BBF7D0;
}

.pos-message-warning .pos-message-icon{
  background: #FFF7ED;
  color: #B45309;
  border-color: #FED7AA;
}

.pos-message-error .pos-message-icon{
  background: #FEF2F2;
  color: #B91C1C;
  border-color: #FECACA;
}

.pos-message-kicker{
  color: #6B7280;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pos-message-content h2{
  margin: 5px 0 0;
  color: #111827;
  font-size: 25px;
  line-height: 1.08;
  font-weight: 840;
  letter-spacing: 0;
}

.pos-message-content p{
  margin: 10px 0 0;
  color: #6B7280;
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 620;
  white-space: pre-line;
}

.pos-message-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.pos-message-confirm{
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid #10233F;
  background: #10233F;
  color: #fff;
  font-weight: 780;
  box-shadow: none;
  transition: transform .14s ease, background .16s ease, border-color .16s ease;
}

.pos-message-confirm:hover{
  background: #0C1B31;
  border-color: #0C1B31;
  transform: translateY(-1px);
}

.pos-message-confirm:active{
  transform: scale(.985);
}

/* =========================
   Toast
   ========================= */
.toast{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 12000;
  padding: 10px 14px;
  border-radius: 14px;
  background: #111827;
  color:#fff;
  box-shadow: var(--shadow2);
  font-weight: 950;
}
.toast-ok{ background: #0ea5e9; }
.toast-err{ background: #ef4444; }

/* =========================
   Stati
   ========================= */
.sale-wrap .state{
  padding: 16px;
  text-align:center;
  color: var(--muted);
}
.sale-wrap .state.hint{ font-size: 12px; padding: 8px; opacity:.8; }
.sale-wrap .info-banner{
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px dashed rgba(37,99,235,.28);
  background: rgba(37,99,235,.06);
  font-weight: 950;
  color: rgba(15,23,42,.88);
}

/* =========================
   Responsive fallback
   ========================= */
/* =========================================================
   ✅ PATCH "ARIA MODE" — più respiro al carrello (touch-friendly)
   - Non rompe layout: override soft
   - Più aria tra righe, footer e controlli
   ========================================================= */

.cart{
  padding: 12px;
  border-radius: 18px;
  line-height: 1.32;
  box-shadow: 0 10px 32px rgba(15,23,42,.10);
}

.cart-head{
  gap: 8px;
  margin-bottom: 6px;
}

.cart-header-row{
  padding: 10px 6px;
  column-gap: 10px;
  row-gap: 10px;
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.cart-rows{
  margin-top: 4px;
}

.cart-rows .row{
  padding: 10px 6px;
  column-gap: 10px;
  row-gap: 10px;
  border-bottom: 1px solid rgba(15,23,42,.05);
}

.cart-rows .row:hover{ background: rgba(15,23,42,.02); }
.cart-rows .row:active{ background: rgba(15,23,42,.03); }
.cart-rows .row.is-zero-value{
  background: rgba(239, 68, 68, 0.08);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.28);
}
.cart-rows .row.is-zero-value:hover{
  background: rgba(239, 68, 68, 0.12);
}
.cart-rows .row.is-pack-invalid{
  background: rgba(245, 158, 11, 0.08);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.24);
}
.cart-rows .row.is-pack-invalid:hover{
  background: rgba(245, 158, 11, 0.12);
}
.cart-rows .row.is-pack-invalid.is-zero-value{
  background: linear-gradient(0deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.08)), rgba(245, 158, 11, 0.08);
}

.c-thumb img, .c-thumb .img-ph{
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

/* descrizione: spazio tra titolo/info/varianti */
.desc{
  display:flex;
  flex-direction:column;
  gap: 3px;
}

.zero-line-note{
  color: #b91c1c;
  font-size: 12px;
  font-weight: 700;
}

.variants-line{
  margin-top: 2px;
  gap: 4px;
}

.variants-line .tag{
  padding: 3px 8px;
  font-size: 10px;
}

.cart-rows .row .row-controls{
  gap: 6px;
}

/* footer e totali: più compatti */
.cart-footer{
  padding-top: 8px;
}

.totals{
  margin-top: 2px;
  padding-top: 6px;
}

.totals .line{
  padding: 3px 2px;
  font-size: 11.5px;
}

.totals .big{
  font-size: 13.5px;
}

.discount-panel{
  padding: 10px;
}

.discount-row{
  padding: 8px 10px;
  border-radius: 12px;
}

.discount-label{
  font-size: 10px;
  letter-spacing: .06em;
}

.pay-row{
  padding: 8px;
  gap: 6px;
}

.pay-btn{
  height: 30px;
  padding: 0 10px;
  font-size: 11.5px;
}

.pay-row input{
  height: 32px;
  width: 120px;
  flex: 0 0 120px;
  font-size: 12px;
}

.pay-amount{ gap: 6px; }

.pay-fill{
  height: 30px;
  padding: 0 10px;
  font-size: 11px;
}

.cart-options .pill.small,
.cart-cassa .pill.small{
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.rounding-controls .manual-total input{
  height: 30px;
  width: 140px;
  font-size: 11.5px;
}

.cart-actions{
  margin-top: 8px !important;
  gap: 6px !important;
}

.cart-actions .btn{
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 11.5px !important;
}

/* Modifica Articolo theme overrides --------------------------------- */
.sale-wrap.sale-ma .toolbar-filters select,
.sale-wrap.sale-ma .toolbar-filters .filter-tag,
.sale-wrap.sale-ma .search,
.sale-wrap.sale-ma .client-wrap input,
.sale-wrap.sale-ma .qty .qty-inp,
.sale-wrap.sale-ma .price-inp,
.sale-wrap.sale-ma .disc-inp,
.sale-wrap.sale-ma .inp-xs,
.sale-wrap.sale-ma .pay-compact-select,
.sale-wrap.sale-ma .pay-compact-input,
.sale-wrap.sale-ma .pay-modal-input,
.sale-wrap.sale-ma .pay-row input,
.sale-wrap.sale-ma .rounding-controls .manual-total input,
.sale-wrap.sale-ma .modal-input{
  border-color: var(--ma-border);
  background: #f8fafc;
  color: var(--ma-ink);
}

.sale-wrap.sale-ma .toolbar-filters select:focus,
.sale-wrap.sale-ma .toolbar-filters .filter-tag:focus,
.sale-wrap.sale-ma .search:focus,
.sale-wrap.sale-ma .client-wrap input:focus,
.sale-wrap.sale-ma .qty .qty-inp:focus,
.sale-wrap.sale-ma .price-inp:focus,
.sale-wrap.sale-ma .disc-inp:focus,
.sale-wrap.sale-ma .inp-xs:focus,
.sale-wrap.sale-ma .pay-compact-select:focus,
.sale-wrap.sale-ma .pay-compact-input:focus,
.sale-wrap.sale-ma .pay-modal-input:focus,
.sale-wrap.sale-ma .pay-row input:focus,
.sale-wrap.sale-ma .rounding-controls .manual-total input:focus,
.sale-wrap.sale-ma .modal-input:focus{
  border-color: var(--ma-accent);
  background: #fff;
}

.sale-wrap.sale-ma .pill{
  border-color: var(--ma-border);
  background: #f8fafc;
  color: var(--ma-ink);
}

.sale-wrap.sale-ma .pill.selected{
  background: var(--ma-accent);
  border-color: var(--ma-accent);
  color: #fff;
}

.sale-wrap.sale-ma .tag,
.sale-wrap.sale-ma .stock-pill{
  background: #f1f5f9;
  color: var(--ma-muted);
}

.sale-wrap.sale-ma .stock-pill.ok{
  background: rgba(22,163,74,.14);
  color: #15803d;
}

.sale-wrap.sale-ma .stock-pill.low{
  background: rgba(225,6,0,.12);
  color: #b91c1c;
}

.sale-wrap.sale-ma .card .img.small,
.sale-wrap.sale-ma .img-ph,
.sale-wrap.sale-ma .c-thumb img,
.sale-wrap.sale-ma .c-thumb .img-ph{
  background: #f8fafc;
  border: 1px solid var(--ma-border);
}

.sale-wrap.sale-ma .client-dd{
  border-color: var(--ma-border);
  box-shadow: var(--ma-shadow);
}

.sale-wrap.sale-ma .client-dd-item:hover{
  background: rgba(225,6,0,.06);
}

.sale-wrap.sale-ma .cart-header-row{
  background: #f8fafc;
  border-bottom: 1px solid var(--ma-border);
  color: var(--ma-muted);
}

.sale-wrap.sale-ma .cart-header-row .header-controls span{
  color: var(--ma-muted);
}

.sale-wrap.sale-ma .cart-rows .row{
  border-bottom: 1px solid var(--ma-border);
}

.sale-wrap.sale-ma .cart-rows .row:hover{
  background: #f8fafc;
}

.sale-wrap.sale-ma .discount-panel{
  border-color: var(--ma-border);
  background: #f8fafc;
}

.sale-wrap.sale-ma .discount-row{
  border-color: var(--ma-border);
}

.sale-wrap.sale-ma .discount-row.is-active{
  border-color: rgba(225,6,0,.35);
  background: rgba(225,6,0,.06);
}

.sale-wrap.sale-ma .discount-wizard-inline{
  border-color: rgba(225,6,0,.35);
  background: rgba(225,6,0,.05);
}

.sale-wrap.sale-ma .recent-purchases{
  border-color: var(--ma-border);
  background: #fff;
}

.sale-wrap.sale-ma .recent-item{
  background: #f8fafc;
}

.sale-wrap.sale-ma .recent-item-img{
  border-color: var(--ma-border);
}

.sale-wrap.sale-ma .pay-summary,
.sale-wrap.sale-ma .pay-row{
  border-color: var(--ma-border);
  background: #f8fafc;
}

.sale-wrap.sale-ma .pay-modal-summary{
  background: #f8fafc;
}

.sale-wrap.sale-ma .pay-methods .code-pill{
  background: #f1f5f9;
  color: var(--ma-muted);
}

.sale-wrap.sale-ma .pay-fill{
  border-color: rgba(225,6,0,.25);
}

.sale-wrap.sale-ma .sale-modal .m-body{
  border-color: var(--ma-border);
  box-shadow: var(--ma-shadow);
}

.sale-wrap.sale-ma .client-current,
.sale-wrap.sale-ma .info-banner{
  border-color: rgba(225,6,0,.28);
  background: rgba(225,6,0,.06);
}

.main-content.no-navbar .sale-wrap,
.main-content.route-sale .sale-wrap{
  --topbar-h: 0px;
  min-height: 100vh;
}

/* =========================
   Layout v2 (riferimento screenshot)
   ========================= */
.sale-wrap.sale-v2{
  --bg: linear-gradient(180deg, #f9fafb 0%, #eef2f5 100%);
  --card: #ffffff;
  --ink: #0f172a;
  --muted: #6b7280;
  --border: #e2e8f0;
  --shadow: 0 12px 32px rgba(15,23,42,.08);
  --shadow2: 0 18px 46px rgba(15,23,42,.12);
  --accent: #111827;
  --danger: #e10600;

  padding-right: calc(var(--cartw) + var(--pad) + var(--cart-gap));
}

.sale-wrap.sale-v2.sale-ma{
  --bg: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%);
  --card: #ffffff;
  --ink: #0f172a;
  --muted: #6b7280;
  --ma-accent: #111827;
  --border: #e2e8f0;
  --shadow: 0 12px 32px rgba(15,23,42,.08);
  --shadow2: 0 18px 46px rgba(15,23,42,.12);
  --accent: #111827;
  --danger: #e10600;
  background: var(--bg);
}

.sale-wrap.sale-v2.ma-wrap.ma-wide{
  padding-right: calc(var(--cartw) + var(--pad) + var(--cart-gap));
}

.sale-wrap.sale-v2 .sale-body{
  grid-template-columns: 1fr;
}

.sale-wrap.sale-v2 .cart-shell{
  position: fixed;
  top: calc(var(--topbar-h) + var(--pad));
  right: var(--pad);
  width: var(--cartw);
  height: calc(100vh - var(--topbar-h) - (var(--pad) * 2));
  pointer-events: auto;
  z-index: 40;
}

.sale-wrap.sale-v2 .cart{
  height: 100%;
  pointer-events: auto;
}

.sale-wrap.sale-v2 .cart-footer{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}

.sale-wrap.sale-v2 .cart-left,
.sale-wrap.sale-v2 .cart-right{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sale-wrap.sale-v2 .toolbar-search-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.sale-wrap.sale-v2 .toolbar-search-row .search{
  min-width: 0;
}

.sale-wrap.sale-v2 .toolbar-search-row .btn{
  width: auto;
}

.sale-wrap.sale-v2 .toolbar-filters{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sale-wrap.sale-v2 .toolbar-filters .filter-tag{
  grid-column: 1 / -1;
}

.sale-wrap.sale-v2 .cards{
  gap: 12px;
}

.sale-wrap.sale-v2 .cart-header-row{
  border-radius: 12px;
}

.sale-wrap.sale-v2 .pay-summary{
  grid-template-columns: 1fr;
  padding: 8px 10px;
}

.sale-wrap.sale-v2 .cart-scroll{
  padding-bottom: 4px;
}

.sale-wrap.sale-v2 .discount-panel{
  padding: 6px 8px;
  margin-bottom: 6px;
  gap: 6px;
}

.sale-wrap.sale-v2 .discount-row{
  padding: 6px 8px;
}

.sale-wrap.sale-v2 .discount-summary{
  gap: 8px;
  align-items: center;
}

.sale-wrap.sale-v2 .discount-summary strong{
  font-size: 12px;
}

.sale-wrap.sale-v2 .discount-summary .muted.small{
  font-size: 10px;
}

.sale-wrap.sale-v2 .discount-panel[open] .discount-summary{
  margin-bottom: 4px;
}

.sale-wrap.sale-v2 .discount-badges .pill.small{
  height: 26px;
  padding: 0 8px;
  font-size: 10.5px;
}

.sale-wrap.sale-v2 .discount-label{
  font-size: 9.5px;
  letter-spacing: .05em;
}

.sale-wrap.sale-v2 .discount-quick{
  gap: 4px;
}

.sale-wrap.sale-v2 .discount-panel-body{
  gap: 6px;
}

.sale-wrap.sale-v2 .rounding-controls{
  margin-bottom: 6px;
  gap: 8px;
}

.sale-wrap.sale-v2 .totals{
  margin-top: 4px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  gap: 4px;
}

.sale-wrap.sale-v2 .totals .line{
  padding: 3px 2px;
  font-size: 11.5px;
  color: #374151;
}

.sale-wrap.sale-v2 .totals .line > div:last-child{
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.sale-wrap.sale-v2 .totals .line.big{
  margin-top: 4px;
  padding: 8px 6px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
  color: #111827;
}

.sale-wrap.sale-v2 .cart-options{
  margin: 4px 0;
  gap: 6px;
  align-items: center;
}

.sale-wrap.sale-v2 .cart-options .pill.small{
  height: 26px;
  padding: 0 8px;
  font-size: 10.5px;
}

.sale-wrap.sale-v2 .cart-options .pill.small,
.sale-wrap.sale-v2 .cart-actions .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sale-wrap.sale-v2 .cart-actions .btn{
  height: 32px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}

.sale-wrap.sale-v2 .points-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 32px;
  padding: 0 12px;
  font-size: 11px;
  white-space: nowrap;
}

.sale-wrap.sale-v2 .cart-counter-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 7px;
  height: 32px;
  padding: 0 11px 0 6px;
  border: 1px solid rgba(37,99,235,.24);
  background: #EFF6FF;
  color: #1E3A8A;
  font-size: 11.5px;
  font-weight: 820;
  white-space: nowrap;
}

.sale-wrap.sale-v2 .cart-counter-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #2563EB;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.sale-wrap.sale-v2 .cart-head-actions .pill.small{
  height: 32px;
  padding: 0 12px;
  font-size: 11.5px;
}

.pos-wait-status{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin-bottom: 10px;
}

.sale-wrap.sale-v2 .cart-footer{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.sale-wrap.sale-v2 .cart-left{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sale-wrap.sale-v2 .cart-right{
  display: flex;
  align-items: center;
}

.sale-wrap.sale-v2 .cart-actions{
  margin-top: 0 !important;
  justify-content: flex-end !important;
}

/* layout footer semplice (evita colonne vuote) */
.sale-wrap.sale-v2 .cart-footer{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sale-wrap.sale-v2 .cart-left,
.sale-wrap.sale-v2 .cart-right{
  width: 100%;
}

.sale-wrap.sale-v2 .cart-right{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.sale-wrap.sale-v2 :focus-visible{
  outline: 2px solid rgba(15,23,42,.35);
}

.sale-wrap.sale-v2 .btn.primary{
  background: #111827;
  border-color: #111827;
  color: #fff;
  box-shadow: 0 12px 24px rgba(15,23,42,.18);
}

.sale-wrap.sale-v2 .cart-actions .btn.primary{
  background: #e10600;
  border-color: #e10600;
  box-shadow: 0 14px 28px rgba(225,6,0,.25);
}

.sale-wrap.sale-v2.sale-ma .pill.selected{
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.sale-wrap.sale-v2.sale-ma .pill.selected.ghost{
  background: #111827;
  border-color: #111827;
}

.sale-wrap.sale-v2 .home-pill{
  background: #111827;
  color:#fff;
}

.exit-pill{
  background:#111827;
  border-color:#111827;
  color:#fff;
}
.exit-pill:hover{
  filter:brightness(.98);
}

.sale-wrap.sale-v2 .card .promo-badge{
  background: #111827;
}

.sale-wrap.sale-v2 .discount-row.is-active{
  border-color: rgba(15,23,42,.2);
  background: #f1f5f9;
}

.sale-wrap.sale-v2 .discount-wizard-inline{
  border-color: rgba(15,23,42,.2);
  background: #f8fafc;
}

.sale-wrap.sale-v2 .client-current,
.sale-wrap.sale-v2 .info-banner{
  border-color: rgba(15,23,42,.2);
  background: #f8fafc;
}

.sale-wrap.sale-v2 .pay-fill{
  border-color: rgba(15,23,42,.25);
}

.sale-wrap.sale-v2 .qty-hint,
.sale-wrap.sale-v2 .pack-note{
  display: none;
}

.sale-wrap.sale-v2 .cart-rows .row .icon{
  color: #111827;
}

.sale-wrap.sale-v2 .qty .qty-inp{
  min-width: 5ch;
  padding: 0 10px;
  border-radius: 14px;
}

.sale-wrap.sale-v2 input,
.sale-wrap.sale-v2 select,
.sale-wrap.sale-v2 textarea,
.sale-wrap.sale-v2 .search,
.sale-wrap.sale-v2 .filter-tag,
.sale-wrap.sale-v2 .price-inp,
.sale-wrap.sale-v2 .disc-inp,
.sale-wrap.sale-v2 .modal-input,
.sale-wrap.sale-v2 .pay-modal-input,
.sale-wrap.sale-v2 .pay-compact-input,
.sale-wrap.sale-v2 .pay-compact-select,
.sale-wrap.sale-v2 .pay-row input,
.sale-wrap.sale-v2 .qty .qty-inp{
  border-radius: 14px;
}

.sale-wrap.sale-v2 .cart-actions{
  margin-top: 6px !important;
  gap: 6px !important;
}

.sale-wrap.sale-v2 .cart-actions .btn{
  height: 30px !important;
  padding: 0 12px !important;
  font-size: 11.5px !important;
  border-radius: 10px !important;
}

.sale-wrap.sale-v2 .cart-options .action-pill.action-pill-icon{
  width: 64px !important;
  min-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  line-height: 0 !important;
}

.sale-wrap.sale-v2 .cart-options .action-pill.action-pill-icon.selected{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.10) !important;
}

.sale-wrap.sale-v2 .cart-options .action-pill-icon-img{
  width: 64px !important;
  height: 64px !important;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-btn-icon,
.sale-wrap.sale-v2 .cart-actions .btn.action-confirm-icon{
  width: 76px !important;
  min-width: 76px !important;
  height: 76px !important;
  min-height: 76px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  line-height: 0 !important;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-btn-icon:hover,
.sale-wrap.sale-v2 .cart-actions .btn.action-confirm-icon:hover{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.sale-wrap.sale-v2 .cart-actions .action-btn-icon-img,
.sale-wrap.sale-v2 .cart-actions .action-confirm-icon-img{
  width: 76px !important;
  height: 76px !important;
  max-width: none !important;
  max-height: none !important;
}

@media (max-width: 1100px){
  .sale-wrap .reqm-grid{
    grid-template-columns: 1fr;
  }
  .sale-wrap .reqm-fields{
    grid-template-columns: 1fr;
  }
  .sale-wrap .reqm-list--results{
    max-height: 240px;
  }
  .sale-wrap .reqm-list--lines{
    max-height: 220px;
  }
}

@media (max-width: 1200px){
  .sale-wrap.sale-v2 .sale-body{
    grid-template-columns: 1fr;
  }

  .sale-wrap.sale-v2 .cart-shell{
    position: static;
    height: auto;
  }

  .sale-wrap.sale-v2{
    padding-right: var(--pad);
  }

  .sale-wrap.sale-v2.ma-wrap.ma-wide{
    padding-right: var(--pad);
  }

  .sale-wrap.sale-v2 .toolbar-search-row{
    grid-template-columns: 1fr;
  }

  .transfer-dropdown{
    width: min(680px, calc(100vw - 28px));
    right: auto;
    left: 0;
  }

  .transfer-dropdown-sections{
    grid-template-columns: 1fr;
  }

  .transfer-order-modal-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  .sale-wrap.sale-v2 .toolbar-filters{
    grid-template-columns: 1fr;
  }

  .transfer-order-summary{
    grid-template-columns: 1fr;
  }
}

/* =========================
   Redesign vendita - step 1
   Restyling grafico scanner-first, senza modifiche funzionali
   ========================= */
.sale-wrap.sale-v2,
.sale-wrap.sale-v2.sale-ma{
  --bg: #F5F5F7;
  --card: #FFFFFF;
  --ink: #111827;
  --muted: #6B7280;
  --border: #E5E7EB;
  --shadow: 0 1px 2px rgba(17,24,39,.04), 0 18px 42px rgba(17,24,39,.055);
  --shadow2: 0 2px 6px rgba(17,24,39,.06), 0 24px 54px rgba(17,24,39,.09);
  --accent: #111827;
  --danger: #DC2626;
  --ok: #15803D;
  --radius: 18px;
  --radius2: 22px;
  background: var(--bg);
  color: var(--ink);
}

.sale-wrap.sale-v2{
  padding-top: 16px;
}

.sale-wrap.sale-v2 .sale-topbar{
  padding: 10px 12px;
  border-color: rgba(229,231,235,.95);
  border-radius: 22px;
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.92);
}

.sale-wrap.sale-v2 .sale-topbar-main{
  gap: 10px;
}

.sale-wrap.sale-v2 .sale-topbar-actions,
.sale-wrap.sale-v2 .sale-topbar-session{
  gap: 8px;
}

.sale-wrap.sale-v2 .top-pill,
.sale-wrap.sale-v2 .sale-topbar .sync-status,
.sale-wrap.sale-v2 .sale-topbar .notif-bell{
  min-width: 52px;
  min-height: 52px;
  height: 52px;
  padding: 8px 12px;
  border-radius: 16px;
  border-color: rgba(229,231,235,.95);
  background: #fff;
  box-shadow: none;
  color: var(--ink);
}

.sale-wrap.sale-v2 .icon-only-pill,
.sale-wrap.sale-v2 .home-pill{
  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;
  flex-basis: 52px;
  padding: 0;
}

.sale-wrap.sale-v2 .home-pill,
.sale-wrap.sale-v2 .exit-pill{
  background: #fff;
  border-color: rgba(229,231,235,.95);
  color: var(--ink);
}

.sale-wrap.sale-v2 .logout-pill{
  background: #fff;
  border-color: #F3D6D6;
  color: #B91C1C;
}

.sale-wrap.sale-v2 .transfer-pill{
  background: #fff;
  border-color: rgba(229,231,235,.95);
  color: var(--ink);
}

.sale-wrap.sale-v2 .top-pill-icon-img,
.sale-wrap.sale-v2 .home-pill .top-pill-icon-img,
.sale-wrap.sale-v2 .sale-topbar .sync-status .sync-icon-image,
.sale-wrap.sale-v2 .sale-topbar .notif-bell .notif-bell-icon-image{
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  object-fit: contain;
  filter: saturate(.78) contrast(.95);
}

.sale-wrap.sale-v2 .sale-topbar .sync-status.is-ok{
  background: #F0FDF4;
  border-color: #BBF7D0;
  color: #15803D;
}

.sale-wrap.sale-v2 .sale-topbar .sync-status.is-error{
  background: #FEF2F2;
  border-color: #FECACA;
  color: #B91C1C;
}

.sale-wrap.sale-v2 .top-identity-card{
  min-width: 190px;
  height: 52px;
  min-height: 52px;
  padding: 8px 14px 8px 8px;
  gap: 10px;
}

.sale-wrap.sale-v2 .top-identity-icon{
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.sale-wrap.sale-v2 .top-identity-name{
  font-size: 14px;
  font-weight: 850;
}

.sale-wrap.sale-v2 .top-identity-time{
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
}

.sale-wrap.sale-v2 .article-toolbar,
.sale-wrap.sale-v2 .cart{
  border: 1px solid rgba(229,231,235,.98);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
}

.sale-wrap.sale-v2 .article-toolbar{
  padding: 18px;
  gap: 14px;
}

.sale-wrap.sale-v2 .toolbar-head{
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sale-wrap.sale-v2 .toolbar-head h4,
.sale-wrap.sale-v2 .cart-title-row h4{
  margin: 0;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 850;
  color: var(--ink);
}

.sale-wrap.sale-v2 .toolbar-head-actions{
  width: auto;
}

.sale-wrap.sale-v2 .toolbar-head-actions .btn{
  width: auto;
}

.sale-wrap.sale-v2 .toolbar-search-row{
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 10px;
  padding: 8px;
  border: 1px solid #E5E7EB;
  border-radius: 22px;
  background: #F9FAFB;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.sale-wrap.sale-v2 .toolbar-search-row .search{
  height: 60px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  padding: 0 22px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 0 0 1px rgba(229,231,235,.82);
}

.sale-wrap.sale-v2 .toolbar-search-row .search::placeholder{
  color: #9CA3AF;
  font-weight: 650;
}

.sale-wrap.sale-v2 .toolbar-search-row .search:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(17,24,39,.08), 0 0 0 1px rgba(17,24,39,.18);
}

.sale-wrap.sale-v2 .toolbar-search-row .btn{
  height: 60px;
  border-radius: 18px;
  background: #111827;
  border-color: #111827;
  color: #fff;
  box-shadow: none;
  font-size: 14px;
}

.sale-wrap.sale-v2 .toolbar-switches{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.sale-wrap.sale-v2 .article-toolbar .sort-switch{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sale-wrap.sale-v2 .toolbar-quick{
  display: flex;
  gap: 8px;
}

.sale-wrap.sale-v2 .toolbar-filters{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sale-wrap.sale-v2 .toolbar-filters .filter-tag{
  grid-column: auto;
}

.sale-wrap.sale-v2 .toolbar-filters select,
.sale-wrap.sale-v2 .toolbar-filters .filter-tag{
  height: 42px;
  border-radius: 14px;
  border-color: #E5E7EB;
  background: #fff;
  font-size: 13px;
  color: var(--ink);
}

.sale-wrap.sale-v2 .pill{
  border-color: #E5E7EB;
  background: #fff;
  color: #374151;
  box-shadow: none;
  font-weight: 750;
}

.sale-wrap.sale-v2 .pill.ghost{
  background: #fff;
}

.sale-wrap.sale-v2 .pill.selected,
.sale-wrap.sale-v2.sale-ma .pill.selected,
.sale-wrap.sale-v2.sale-ma .pill.selected.ghost{
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.sale-wrap.sale-v2 .btn{
  border-color: #E5E7EB;
  background: #fff;
  color: #111827;
  box-shadow: none;
  font-weight: 800;
}

.sale-wrap.sale-v2 .btn.primary{
  background: #111827;
  border-color: #111827;
  box-shadow: 0 12px 24px rgba(17,24,39,.14);
}

.sale-wrap.sale-v2 .cards{
  gap: 14px;
}

.sale-wrap.sale-v2 .card{
  padding: 12px;
  border-radius: 20px;
  border-color: rgba(229,231,235,.98);
  box-shadow: 0 1px 2px rgba(17,24,39,.035);
  gap: 10px;
}

.sale-wrap.sale-v2 .card:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.sale-wrap.sale-v2 .card .img.small{
  border-radius: 16px;
  background: #F9FAFB;
}

.sale-wrap.sale-v2 .card .title{
  font-size: 13px;
  font-weight: 850;
}

.sale-wrap.sale-v2 .card .code,
.sale-wrap.sale-v2 .card .info-line{
  font-size: 11.5px;
}

.sale-wrap.sale-v2 .card .price{
  font-size: 14px;
}

.sale-wrap.sale-v2 .card .price .now{
  color: #111827;
}

.sale-wrap.sale-v2 .stock-pill.ok{
  background: #ECFDF3;
  color: #15803D;
}

.sale-wrap.sale-v2 .stock-pill.low{
  background: #FEF2F2;
  color: #B91C1C;
}

.sale-wrap.sale-v2 .tag,
.sale-wrap.sale-v2 .stock-pill{
  background: #F3F4F6;
  color: #6B7280;
  font-weight: 750;
}

.sale-wrap.sale-v2 .card .btn{
  height: 38px;
  border-radius: 14px;
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.sale-wrap.sale-v2 .cart{
  padding: 16px;
}

.sale-wrap.sale-v2 .cart-head{
  margin-bottom: 12px;
}

.sale-wrap.sale-v2 .cart-title-row{
  align-items: flex-start;
}

.sale-wrap.sale-v2 .cart-head-actions{
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sale-wrap.sale-v2 .cart-head-actions .pill.small,
.sale-wrap.sale-v2 .points-pill{
  height: 34px;
  border-radius: 999px;
  font-size: 11.5px;
}

.sale-wrap.sale-v2 .cart-header-row{
  padding: 10px 8px;
  border: 0;
  border-radius: 14px;
  background: #F9FAFB;
  color: #6B7280;
}

.sale-wrap.sale-v2 .cart-header-row .header-controls span,
.sale-wrap.sale-v2 .cart-header-row{
  color: #6B7280;
  letter-spacing: .04em;
}

.sale-wrap.sale-v2 .cart-rows{
  margin-top: 8px;
}

.sale-wrap.sale-v2 .cart-rows .row{
  padding: 12px 8px;
  border-bottom: 1px solid #F0F2F5;
}

.sale-wrap.sale-v2 .cart-rows .row:hover{
  background: #FAFAFB;
  border-radius: 14px;
}

.sale-wrap.sale-v2 .c-thumb img,
.sale-wrap.sale-v2 .c-thumb .img-ph{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #F3F4F6;
}

.sale-wrap.sale-v2 .desc .t1{
  font-size: 13px;
  font-weight: 850;
  color: #111827;
}

.sale-wrap.sale-v2 .desc .muted.small{
  color: #6B7280;
}

.sale-wrap.sale-v2 .qty .qty-inp,
.sale-wrap.sale-v2 .price-inp,
.sale-wrap.sale-v2 .disc-inp,
.sale-wrap.sale-v2 .pay-modal-input,
.sale-wrap.sale-v2 .lottery-input{
  border-color: #E5E7EB;
  background: #fff;
  color: #111827;
}

.sale-wrap.sale-v2 .qty .qty-inp:focus,
.sale-wrap.sale-v2 .price-inp:focus,
.sale-wrap.sale-v2 .disc-inp:focus,
.sale-wrap.sale-v2 .pay-modal-input:focus,
.sale-wrap.sale-v2 .lottery-input:focus{
  outline: none;
  border-color: rgba(17,24,39,.22);
  box-shadow: 0 0 0 3px rgba(17,24,39,.07);
}

.sale-wrap.sale-v2 .line-reso-pill{
  background: #fff;
  border-color: #E5E7EB;
}

.sale-wrap.sale-v2 .line-reso-pill.selected{
  background: #FEF2F2;
  border-color: #FECACA;
  color: #B91C1C;
}

.sale-wrap.sale-v2 .line-reso-icon-img{
  width: 24px;
  height: 24px;
  filter: saturate(.78) contrast(.95);
}

.sale-wrap.sale-v2 .cart-rows .row .icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: #B91C1C;
}

.sale-wrap.sale-v2 .cart-rows .row .icon:hover{
  background: #FEF2F2;
  border-color: #FECACA;
}

.sale-wrap.sale-v2 .cart-footer{
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid #E5E7EB;
  background: #fff;
}

.sale-wrap.sale-v2 .pay-summary{
  padding: 12px;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  background: #fff;
  box-shadow: none;
}

.sale-wrap.sale-v2 .pay-summary-lines{
  gap: 8px;
}

.sale-wrap.sale-v2 .pay-summary-lines .line{
  border-color: #EEF0F3;
  border-radius: 16px;
  background: #FAFAFB;
  padding: 10px 12px;
}

.sale-wrap.sale-v2 .pay-summary-lines .line:first-child{
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.sale-wrap.sale-v2 .pay-summary-lines .line:first-child .label,
.sale-wrap.sale-v2 .pay-summary-lines .line:first-child .value{
  color: #fff;
}

.sale-wrap.sale-v2 .pay-summary-lines .label{
  color: #6B7280;
  font-size: 10.5px;
  letter-spacing: .04em;
}

.sale-wrap.sale-v2 .pay-summary-lines .value{
  font-size: 20px;
  font-weight: 850;
}

.sale-wrap.sale-v2 .pay-modal-actions{
  gap: 8px;
}

.sale-wrap.sale-v2 .lottery-box{
  border-color: #E5E7EB;
  border-radius: 18px;
  background: #F9FAFB;
}

.sale-wrap.sale-v2 .lottery-input{
  border-radius: 14px;
  letter-spacing: .08em;
}

.sale-wrap.sale-v2 .pay-modal-rows{
  gap: 8px;
}

.sale-wrap.sale-v2 .pay-modal-row{
  border-color: #E5E7EB;
  border-radius: 18px;
  background: #fff;
}

.sale-wrap.sale-v2 .pay-modal-methods{
  gap: 12px;
}

.sale-wrap.sale-v2 .pay-method-pill{
  width: 112px;
  min-width: 112px;
  min-height: 76px;
  border-radius: 16px !important;
  border: 1px solid #E5E7EB !important;
  background: #fff !important;
}

.sale-wrap.sale-v2 .pay-method-pill::before{
  display: none;
}

.sale-wrap.sale-v2 .pay-method-pill-head{
  min-height: 76px;
}

.sale-wrap.sale-v2 .pay-method-pill-icon{
  width: 82px;
  height: 56px;
  filter: saturate(.82) contrast(.95);
}

.sale-wrap.sale-v2 .pay-method-pill.selected{
  border-color: #111827 !important;
  box-shadow: 0 0 0 3px rgba(17,24,39,.08) !important;
}

.sale-wrap.sale-v2 .pay-method-pill.pay-method-voucher{
  width: 112px;
  min-width: 112px;
}

.sale-wrap.sale-v2 .cart-bottom-bar{
  padding-top: 10px;
  border-top: 1px solid #F0F2F5;
  background: #fff;
}

.sale-wrap.sale-v2 .cart-options{
  gap: 8px;
}

.sale-wrap.sale-v2 .cart-options .pill.small{
  height: 34px;
  border-radius: 12px;
  font-size: 11.5px;
}

.sale-wrap.sale-v2 .cart-options .action-pill.action-pill-icon{
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 14px !important;
  background: #fff !important;
}

.sale-wrap.sale-v2 .cart-options .action-pill-icon-img{
  width: 32px !important;
  height: 32px !important;
  filter: saturate(.78) contrast(.95);
}

.sale-wrap.sale-v2 .action-pill.action-doc,
.sale-wrap.sale-v2 .action-pill.action-cassa,
.sale-wrap.sale-v2 .action-pill.action-courtesy{
  background: #fff;
  border-color: #E5E7EB;
  color: #374151;
}

.sale-wrap.sale-v2 .cart-actions{
  gap: 8px !important;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-btn-icon,
.sale-wrap.sale-v2 .cart-actions .btn.action-confirm-icon{
  width: 56px !important;
  min-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 16px !important;
  background: #fff !important;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-confirm-icon{
  background: #111827 !important;
  border-color: #111827 !important;
  box-shadow: 0 12px 26px rgba(17,24,39,.18) !important;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-clear{
  border-color: #FECACA !important;
  background: #FEF2F2 !important;
}

.sale-wrap.sale-v2 .cart-actions .action-btn-icon-img,
.sale-wrap.sale-v2 .cart-actions .action-confirm-icon-img{
  width: 36px !important;
  height: 36px !important;
  filter: saturate(.78) contrast(.95);
}

.sale-wrap.sale-v2 .cart-actions .action-confirm-icon-img{
  filter: saturate(.72) brightness(1.25) contrast(.95);
}

.sale-wrap.sale-v2 .state{
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid #E5E7EB;
}

.sale-wrap.sale-v2 .sale-modal .m-body{
  border-color: #E5E7EB;
  box-shadow: var(--shadow2);
}

@media (max-width: 1200px){
  .sale-wrap.sale-v2 .toolbar-switches,
  .sale-wrap.sale-v2 .toolbar-filters{
    grid-template-columns: 1fr;
  }

  .sale-wrap.sale-v2 .toolbar-quick,
  .sale-wrap.sale-v2 .article-toolbar .sort-switch{
    width: 100%;
  }
}

@media (max-width: 720px){
  .sale-wrap.sale-v2 .article-toolbar{
    padding: 12px;
  }

  .sale-wrap.sale-v2 .toolbar-head{
    flex-direction: column;
    align-items: stretch;
  }

  .sale-wrap.sale-v2 .toolbar-search-row{
    grid-template-columns: 1fr;
  }

  .sale-wrap.sale-v2 .toolbar-search-row .search,
  .sale-wrap.sale-v2 .toolbar-search-row .btn{
    height: 54px;
  }

  .sale-wrap.sale-v2 .toolbar-search-row .search{
    font-size: 18px;
  }
}

/* =========================
   Premium polishing - step 2
   ========================= */
.sale-wrap.sale-v2,
.sale-wrap.sale-v2.sale-ma{
  --shadow: 0 1px 2px rgba(17,24,39,.035), 0 16px 40px rgba(17,24,39,.045);
  --shadow2: 0 2px 8px rgba(17,24,39,.045), 0 24px 58px rgba(17,24,39,.075);
  --scanner-glow: 0 0 0 1px rgba(37,99,235,.075), 0 18px 48px rgba(37,99,235,.08), 0 1px 2px rgba(17,24,39,.035);
  font-size: 14px;
}

.sale-wrap.sale-v2 .sale-line-icon{
  display: block;
  flex: 0 0 auto;
  color: currentColor;
}

.sale-wrap.sale-v2 .top-line-icon{
  width: 23px;
  height: 23px;
  stroke-width: 1.75;
}

.sale-wrap.sale-v2 .sale-topbar{
  box-shadow: 0 1px 2px rgba(17,24,39,.025);
}

.sale-wrap.sale-v2 .top-pill,
.sale-wrap.sale-v2 .sale-topbar .sync-status,
.sale-wrap.sale-v2 .sale-topbar .notif-bell{
  border-color: rgba(229,231,235,.72);
  background: rgba(255,255,255,.78);
  color: #374151;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}

.sale-wrap.sale-v2 .top-pill:hover,
.sale-wrap.sale-v2 .sale-topbar .notif-bell:hover{
  background: #fff;
  border-color: rgba(209,213,219,.92);
  transform: translateY(-1px);
}

.sale-wrap.sale-v2 .top-identity-card{
  background: transparent;
  border-color: transparent;
}

.sale-wrap.sale-v2 .top-identity-name{
  font-weight: 760;
  letter-spacing: 0;
}

.sale-wrap.sale-v2 .top-identity-time{
  color: #8A94A3;
}

.sale-wrap.sale-v2 .article-toolbar{
  padding: 20px;
  gap: 16px;
  box-shadow: var(--shadow);
}

.sale-wrap.sale-v2 .toolbar-head{
  padding: 0 2px;
}

.sale-wrap.sale-v2 .toolbar-head h4,
.sale-wrap.sale-v2 .cart-title-row h4{
  font-size: 14px;
  font-weight: 760;
  letter-spacing: .01em;
}

.sale-wrap.sale-v2 .toolbar-search-row{
  grid-template-columns: 48px minmax(0, 1fr) 124px;
  gap: 8px;
  padding: 10px;
  border-color: rgba(229,231,235,.72);
  border-radius: 28px;
  background: rgba(255,255,255,.74);
  box-shadow: var(--scanner-glow);
}

.sale-wrap.sale-v2 .scanner-icon-wrap{
  width: 48px;
  height: 72px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1F3A5F;
  background: linear-gradient(180deg, rgba(37,99,235,.065), rgba(37,99,235,.025));
}

.sale-wrap.sale-v2 .scanner-line-icon{
  width: 25px;
  height: 25px;
  stroke-width: 1.65;
}

.sale-wrap.sale-v2 .toolbar-search-row .search{
  height: 72px;
  padding: 0 26px;
  font-size: 24px;
  font-weight: 640;
  border-radius: 22px;
  box-shadow: none;
  background: transparent;
}

.sale-wrap.sale-v2 .toolbar-search-row .search::placeholder{
  color: #8F99A8;
  font-weight: 560;
}

.sale-wrap.sale-v2 .toolbar-search-row:focus-within{
  border-color: rgba(37,99,235,.2);
  box-shadow: 0 0 0 4px rgba(37,99,235,.055), 0 20px 52px rgba(37,99,235,.095), 0 1px 2px rgba(17,24,39,.035);
}

.sale-wrap.sale-v2 .toolbar-search-row .search:focus{
  box-shadow: none;
}

.sale-wrap.sale-v2 .toolbar-search-row .btn{
  height: 72px;
  border-radius: 22px;
  background: #10233F;
  border-color: #10233F;
  font-size: 14px;
  font-weight: 760;
}

.sale-wrap.sale-v2 .toolbar-switches,
.sale-wrap.sale-v2 .toolbar-filters{
  opacity: .86;
}

.sale-wrap.sale-v2 .toolbar-filters select,
.sale-wrap.sale-v2 .toolbar-filters .filter-tag{
  height: 40px;
  border-color: rgba(229,231,235,.8);
  color: #4B5563;
}

.sale-wrap.sale-v2 .article-toolbar .sort-switch .pill,
.sale-wrap.sale-v2 .toolbar-quick .pill{
  height: 32px;
  font-size: 11.5px;
}

.sale-wrap.sale-v2 .cards{
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.sale-wrap.sale-v2 .card{
  padding: 14px;
  border-color: rgba(229,231,235,.58);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(17,24,39,.028);
  gap: 12px;
}

.sale-wrap.sale-v2 .card:hover{
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 18px 42px rgba(17,24,39,.06);
}

.sale-wrap.sale-v2 .card .img.small{
  border-radius: 20px;
  background: #F7F8FA;
}

.sale-wrap.sale-v2 .card .meta{
  gap: 8px;
  margin-top: 2px;
}

.sale-wrap.sale-v2 .card .title{
  font-size: 14px;
  line-height: 1.28;
  font-weight: 760;
}

.sale-wrap.sale-v2 .card .code{
  font-size: 11.5px;
  font-weight: 560;
}

.sale-wrap.sale-v2 .card .info-line{
  justify-content: space-between;
  gap: 10px;
}

.sale-wrap.sale-v2 .tag,
.sale-wrap.sale-v2 .stock-pill{
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 650;
  background: #F6F7F9;
}

.sale-wrap.sale-v2 .stock-pill.ok{
  background: #F3FBF6;
  color: #217A45;
}

.sale-wrap.sale-v2 .stock-pill.low{
  background: #FFF5F5;
  color: #A73A3A;
}

.sale-wrap.sale-v2 .card .price{
  margin-top: 2px;
  font-size: 15px;
  font-weight: 780;
}

.sale-wrap.sale-v2 .promo-tag,
.sale-wrap.sale-v2 .card .promo-badge{
  background: #F3F4F6;
  color: #374151;
  border: 1px solid rgba(229,231,235,.8);
  font-weight: 680;
}

.sale-wrap.sale-v2 .card .btn{
  height: 42px;
  margin-top: 2px;
  border-radius: 16px;
  background: #fff;
  border-color: rgba(17,24,39,.14);
  color: #111827;
  font-weight: 740;
}

.sale-wrap.sale-v2 .card .btn:hover{
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.sale-wrap.sale-v2 .cart{
  padding: 18px;
  border-color: rgba(229,231,235,.76);
  box-shadow: var(--shadow);
}

.sale-wrap.sale-v2 .cart-head{
  margin-bottom: 14px;
}

.sale-wrap.sale-v2 .cart-title-row{
  gap: 14px;
}

.sale-wrap.sale-v2 .cart-head-actions{
  gap: 7px;
}

.sale-wrap.sale-v2 .cart-head-actions .pill.small,
.sale-wrap.sale-v2 .points-pill{
  height: 32px;
  padding: 0 11px;
  color: #4B5563;
  font-weight: 680;
}

.sale-wrap.sale-v2 .cart-header-row{
  padding: 8px 10px;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid rgba(229,231,235,.72);
}

.sale-wrap.sale-v2 .cart-header-row,
.sale-wrap.sale-v2 .cart-header-row .header-controls span{
  font-size: 10px;
  font-weight: 680;
  color: #9AA3AF;
}

.sale-wrap.sale-v2 .cart-rows .row{
  padding: 16px 10px;
  border-bottom-color: rgba(229,231,235,.58);
  transition: background .14s ease;
}

.sale-wrap.sale-v2 .cart-rows .row:hover{
  background: #FBFBFC;
}

.sale-wrap.sale-v2 .c-thumb img,
.sale-wrap.sale-v2 .c-thumb .img-ph{
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

.sale-wrap.sale-v2 .desc .t1{
  font-size: 13.5px;
  line-height: 1.22;
  font-weight: 760;
}

.sale-wrap.sale-v2 .variants-line .tag{
  background: transparent;
  border: 1px solid rgba(229,231,235,.8);
  color: #6B7280;
}

.sale-wrap.sale-v2 .qty .qty-inp{
  height: 40px;
  min-width: 48px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 760;
}

.sale-wrap.sale-v2 .price-inp,
.sale-wrap.sale-v2 .disc-inp{
  height: 38px;
  border-radius: 14px;
}

.sale-wrap.sale-v2 .tot.right{
  font-size: 14px;
  font-weight: 820;
  color: #111827;
}

.sale-wrap.sale-v2 .line-reso-pill{
  min-width: 44px;
  min-height: 40px;
  border-radius: 14px;
  color: #6B7280;
}

.sale-wrap.sale-v2 .line-reso-icon{
  width: 21px;
  height: 21px;
}

.sale-wrap.sale-v2 .pay-summary{
  padding: 16px;
  border-color: rgba(229,231,235,.68);
  border-radius: 24px;
}

.sale-wrap.sale-v2 .pay-summary > div:first-child strong{
  font-size: 13px;
  font-weight: 760;
}

.sale-wrap.sale-v2 .pay-summary-lines{
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 10px;
}

.sale-wrap.sale-v2 .pay-summary-lines .line{
  min-height: 76px;
  border: 0;
  border-radius: 20px;
  background: #F8F9FB;
  padding: 13px 14px;
}

.sale-wrap.sale-v2 .pay-summary-lines .line:first-child{
  min-height: 92px;
  background: #10233F;
  box-shadow: 0 14px 30px rgba(16,35,63,.14);
}

.sale-wrap.sale-v2 .pay-summary-lines .line:first-child .label{
  color: rgba(255,255,255,.72);
}

.sale-wrap.sale-v2 .pay-summary-lines .line:first-child .value{
  font-size: 28px;
  letter-spacing: 0;
}

.sale-wrap.sale-v2 .pay-summary-lines .label{
  font-size: 10px;
  font-weight: 680;
  color: #8B95A1;
}

.sale-wrap.sale-v2 .pay-summary-lines .value{
  font-size: 22px;
  font-weight: 780;
}

.sale-wrap.sale-v2 .pay-summary-lines .resto-pill{
  background: transparent;
  border-color: transparent;
  color: #6B7280;
  padding: 0;
}

.sale-wrap.sale-v2 .pay-summary-lines .value-resto{
  color: #111827;
}

.sale-wrap.sale-v2 .lottery-box{
  padding: 12px 14px;
  border: 0;
  background: #F8F9FB;
}

.sale-wrap.sale-v2 .pay-modal-row{
  border: 0;
  background: #F8F9FB;
  padding: 12px;
}

.sale-wrap.sale-v2 .pay-method-pill{
  border-color: rgba(229,231,235,.76) !important;
  background: #fff !important;
}

.sale-wrap.sale-v2 .pay-method-pill.selected{
  border-color: rgba(16,35,63,.34) !important;
  box-shadow: 0 0 0 4px rgba(16,35,63,.07) !important;
}

.sale-wrap.sale-v2 .cart-bottom-bar{
  align-items: center;
  gap: 14px;
}

.sale-wrap.sale-v2 .action-line-icon{
  width: 23px;
  height: 23px;
  stroke-width: 1.75;
}

.sale-wrap.sale-v2 .cart-options .action-pill.action-pill-icon,
.sale-wrap.sale-v2 .cart-actions .btn.action-btn-icon,
.sale-wrap.sale-v2 .cart-actions .btn.action-confirm-icon{
  border-color: rgba(229,231,235,.78) !important;
  box-shadow: none !important;
  color: #374151;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-btn-icon,
.sale-wrap.sale-v2 .cart-actions .btn.action-confirm-icon{
  width: 54px !important;
  min-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  border-radius: 18px !important;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-park,
.sale-wrap.sale-v2 .cart-actions .btn.action-resume{
  background: #fff !important;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-clear{
  color: #B91C1C;
  border-color: #F4D5D5 !important;
  background: #FFF8F8 !important;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-confirm-icon{
  color: #fff;
  background: #10233F !important;
  border-color: #10233F !important;
  box-shadow: 0 14px 30px rgba(16,35,63,.16) !important;
}

.sale-wrap.sale-v2 .cart-options .action-pill.action-pill-icon{
  color: #374151;
}

.sale-wrap.sale-v2 .action-confirm-line-icon{
  width: 25px;
  height: 25px;
}

@media (max-width: 1200px){
  .sale-wrap.sale-v2 .toolbar-search-row{
    grid-template-columns: 48px minmax(0, 1fr) 112px;
  }
}

@media (max-width: 720px){
  .sale-wrap.sale-v2 .toolbar-search-row{
    grid-template-columns: 44px 1fr;
  }

  .sale-wrap.sale-v2 .scanner-icon-wrap{
    height: 58px;
  }

  .sale-wrap.sale-v2 .toolbar-search-row .btn{
    grid-column: 1 / -1;
  }
}

/* =========================
   Refinement micro-details - step 3
   ========================= */
@keyframes saleScannerSuccess{
  0%{
    border-color: rgba(22,163,74,.35);
    background: rgba(240,253,244,.98);
  }
  42%{
    border-color: rgba(22,163,74,.5);
    background: rgba(220,252,231,.98);
  }
  100%{
    border-color: rgba(229,231,235,.72);
    background: rgba(255,255,255,.74);
  }
}

@keyframes saleScannerError{
  0%{
    border-color: rgba(239,68,68,.42);
    background: rgba(254,242,242,.98);
  }
  42%{
    border-color: rgba(220,38,38,.62);
    background: rgba(254,226,226,.98);
  }
  100%{
    border-color: rgba(229,231,235,.72);
    background: rgba(255,255,255,.74);
  }
}

@keyframes saleCartUpdated{
  0%{ border-color: rgba(229,231,235,.76); }
  35%{ border-color: rgba(21,128,61,.24); }
  100%{ border-color: rgba(229,231,235,.76); }
}

@keyframes saleCartRowSuccess{
  0%{
    border-color: rgba(229,231,235,.58);
    background: #fff;
  }
  42%{
    border-color: rgba(22,163,74,.34);
    background: rgba(240,253,244,.98);
  }
  100%{
    border-color: rgba(229,231,235,.58);
    background: #fff;
  }
}

.sale-wrap.sale-v2{
  --shadow: 0 1px 2px rgba(17,24,39,.024), 0 12px 32px rgba(17,24,39,.035);
  --shadow2: 0 2px 8px rgba(17,24,39,.04), 0 20px 46px rgba(17,24,39,.06);
}

.sale-wrap.sale-v2 .article-toolbar,
.sale-wrap.sale-v2 .cart,
.sale-wrap.sale-v2 .card,
.sale-wrap.sale-v2 .pay-summary{
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .14s ease;
}

.sale-wrap.sale-v2 .toolbar-search-row,
.sale-wrap.sale-v2 .toolbar-search-row .btn,
.sale-wrap.sale-v2 .scanner-icon-wrap,
.sale-wrap.sale-v2 .pill,
.sale-wrap.sale-v2 .btn,
.sale-wrap.sale-v2 .pay-method-pill,
.sale-wrap.sale-v2 .cart-rows .row,
.sale-wrap.sale-v2 .qty .qty-inp,
.sale-wrap.sale-v2 .line-reso-pill{
  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .14s ease,
    opacity .16s ease;
}

.sale-wrap.sale-v2 .toolbar-search-row.is-scan-success{
  animation: saleScannerSuccess .32s ease-out;
}

.sale-wrap.sale-v2 .toolbar-search-row.is-scan-error{
  animation: saleScannerError .36s ease-out;
}

.sale-wrap.sale-v2 .cart.is-cart-updated{
  animation: saleCartUpdated .32s ease-out;
}

.sale-wrap.sale-v2 .cart.is-cart-updated .cart-rows .row:last-of-type{
  animation: saleCartRowSuccess .42s ease-out;
}

.sale-wrap.sale-v2 .sale-scan-feedback{
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
}

.sale-wrap.sale-v2 .sale-scan-feedback.is-success{
  color: #166534;
  background: rgba(220,252,231,.92);
  border: 1px solid rgba(22,163,74,.22);
}

.sale-wrap.sale-v2 .sale-scan-feedback.is-error{
  color: #991b1b;
  background: rgba(254,226,226,.94);
  border: 1px solid rgba(239,68,68,.22);
}

.sale-wrap.sale-v2 .article-toolbar{
  border-color: rgba(229,231,235,.58);
}

.sale-wrap.sale-v2 .toolbar-head-actions,
.sale-wrap.sale-v2 .toolbar-switches,
.sale-wrap.sale-v2 .toolbar-filters{
  opacity: .74;
}

.sale-wrap.sale-v2 .toolbar-switches:hover,
.sale-wrap.sale-v2 .toolbar-filters:hover,
.sale-wrap.sale-v2 .article-toolbar:focus-within .toolbar-switches,
.sale-wrap.sale-v2 .article-toolbar:focus-within .toolbar-filters{
  opacity: .92;
}

.sale-wrap.sale-v2 .toolbar-filters select,
.sale-wrap.sale-v2 .toolbar-filters .filter-tag{
  height: 38px;
  border-color: rgba(229,231,235,.58);
  background: rgba(255,255,255,.66);
  font-size: 12.5px;
}

.sale-wrap.sale-v2 .article-toolbar .sort-switch .pill,
.sale-wrap.sale-v2 .toolbar-quick .pill{
  height: 30px;
  border-color: rgba(229,231,235,.58);
  background: rgba(255,255,255,.62);
  color: #6B7280;
  font-weight: 640;
}

.sale-wrap.sale-v2 .article-toolbar .sort-switch .pill.selected,
.sale-wrap.sale-v2 .toolbar-quick .pill.selected{
  background: #F3F4F6;
  border-color: rgba(17,24,39,.12);
  color: #111827;
}

.sale-wrap.sale-v2 .cards{
  gap: 20px;
}

.sale-wrap.sale-v2 .card{
  padding: 16px;
  border-color: rgba(229,231,235,.34);
  background: rgba(255,255,255,.74);
  box-shadow: none;
  gap: 13px;
}

.sale-wrap.sale-v2 .card:hover{
  background: rgba(255,255,255,.94);
  border-color: rgba(229,231,235,.62);
  box-shadow: 0 1px 2px rgba(17,24,39,.03), 0 14px 34px rgba(17,24,39,.045);
  transform: translateY(-1px) scale(1.002);
}

.sale-wrap.sale-v2 .card .img.small{
  border-radius: 22px;
  background: #F3F4F6;
  box-shadow: inset 0 0 0 1px rgba(229,231,235,.45);
}

.sale-wrap.sale-v2 .card .img.small img{
  padding: 4px;
}

.sale-wrap.sale-v2 .card .meta{
  gap: 9px;
}

.sale-wrap.sale-v2 .card .title{
  font-size: 14.5px;
  line-height: 1.3;
  font-weight: 740;
}

.sale-wrap.sale-v2 .card .code,
.sale-wrap.sale-v2 .card .info-line,
.sale-wrap.sale-v2 .card .muted.small{
  color: #7B8491;
}

.sale-wrap.sale-v2 .card .price{
  font-size: 15.5px;
  line-height: 1.2;
}

.sale-wrap.sale-v2 .card .btn{
  height: 44px;
  border-color: rgba(17,24,39,.1);
  box-shadow: none;
}

.sale-wrap.sale-v2 .card .btn:active,
.sale-wrap.sale-v2 .cart-actions .btn:active,
.sale-wrap.sale-v2 .line-reso-pill:active,
.sale-wrap.sale-v2 .pay-method-pill:active{
  transform: scale(.985);
}

.sale-wrap.sale-v2 .cart{
  border-color: rgba(229,231,235,.62);
}

.sale-wrap.sale-v2 .cart-header-row{
  margin-bottom: 4px;
}

.sale-wrap.sale-v2 .cart-rows{
  margin-top: 2px;
}

.sale-wrap.sale-v2 .cart-rows .row{
  min-height: 82px;
  padding: 18px 10px;
}

.sale-wrap.sale-v2 .cart-rows .row:hover{
  background: rgba(248,249,251,.82);
}

.sale-wrap.sale-v2 .c-thumb img,
.sale-wrap.sale-v2 .c-thumb .img-ph{
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.sale-wrap.sale-v2 .desc .t1{
  font-size: 14px;
  line-height: 1.25;
  font-weight: 780;
  letter-spacing: 0;
}

.sale-wrap.sale-v2 .desc .muted.small{
  font-size: 10.8px;
  color: #7B8491;
}

.sale-wrap.sale-v2 .variants-line{
  gap: 5px;
}

.sale-wrap.sale-v2 .variants-line .tag{
  padding: 3px 7px;
  font-weight: 580;
  border-color: rgba(229,231,235,.62);
}

.sale-wrap.sale-v2 .qty .qty-inp{
  height: 42px;
  min-width: 52px;
  background: #F8F9FB;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(229,231,235,.58);
}

.sale-wrap.sale-v2 .qty .qty-inp:focus{
  background: #fff;
  box-shadow: 0 0 0 4px rgba(37,99,235,.055), inset 0 0 0 1px rgba(37,99,235,.22);
}

.sale-wrap.sale-v2 .price.right,
.sale-wrap.sale-v2 .tot.right{
  font-variant-numeric: tabular-nums;
}

.sale-wrap.sale-v2 .tot.right{
  font-size: 15px;
  font-weight: 840;
}

.sale-wrap.sale-v2 .line-reso-pill{
  background: #F9FAFB;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(229,231,235,.58);
}

.sale-wrap.sale-v2 .line-reso-pill:hover{
  background: #fff;
}

.sale-wrap.sale-v2 .pay-summary{
  border-color: rgba(229,231,235,.52);
}

.sale-wrap.sale-v2 .pay-summary-lines .line{
  min-height: 82px;
  background: #F7F8FA;
}

.sale-wrap.sale-v2 .pay-summary-lines .line:first-child{
  min-height: 98px;
  box-shadow: 0 12px 26px rgba(16,35,63,.105);
}

.sale-wrap.sale-v2 .pay-summary-lines .line:first-child .value{
  font-size: 30px;
  font-weight: 780;
}

.sale-wrap.sale-v2 .pay-summary-lines .value{
  font-size: 23px;
}

.sale-wrap.sale-v2 .pay-modal-actions .btn{
  height: 34px;
  border-radius: 12px;
  font-weight: 700;
}

.sale-wrap.sale-v2 .lottery-box{
  color: #4B5563;
}

.sale-wrap.sale-v2 .lottery-input{
  background: #fff;
  border-color: rgba(229,231,235,.8);
}

.sale-wrap.sale-v2 .lottery-input:disabled{
  cursor: not-allowed;
  color: #9CA3AF;
  background: rgba(249,250,251,.76);
  border-color: rgba(229,231,235,.62);
  opacity: .78;
}

.sale-wrap.sale-v2 .cart-bottom-bar{
  padding-top: 12px;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-btn-icon,
.sale-wrap.sale-v2 .cart-actions .btn.action-confirm-icon,
.sale-wrap.sale-v2 .cart-options .action-pill.action-pill-icon{
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 17px !important;
  background: #F9FAFB !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(229,231,235,.62) !important;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-btn-icon:hover,
.sale-wrap.sale-v2 .cart-options .action-pill.action-pill-icon:hover{
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(209,213,219,.9) !important;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-clear{
  background: #FFF7F7 !important;
  box-shadow: inset 0 0 0 1px #F3D4D4 !important;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-confirm-icon{
  background: #10233F !important;
  box-shadow: 0 10px 24px rgba(16,35,63,.12) !important;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-confirm-icon:hover{
  background: #0C1B31 !important;
  box-shadow: 0 12px 28px rgba(16,35,63,.16) !important;
}

.sale-wrap.sale-v2 .action-line-icon{
  width: 22px;
  height: 22px;
}

.sale-wrap.sale-v2 .action-confirm-line-icon{
  width: 24px;
  height: 24px;
}

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

/* =========================
   Premium modal system - step 4
   ========================= */
@keyframes premiumModalOverlayIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@keyframes premiumModalSheetIn{
  from{
    opacity: 0;
    transform: translateY(10px) scale(.985);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sale-wrap.sale-v2 .sale-modal{
  background: rgba(245,245,247,.92);
  padding: 24px;
  animation: premiumModalOverlayIn .16s ease-out both;
  z-index: 220;
}

.sale-wrap.sale-v2 .sale-modal.variant{
  z-index: 240;
}

.sale-wrap.sale-v2 .sale-modal .m-body{
  width: min(900px, 96vw);
  padding: 24px;
  border-radius: 30px;
  border: 1px solid rgba(229,231,235,.72);
  background: #fff;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 30px 80px rgba(17,24,39,.12);
  animation: premiumModalSheetIn .18s cubic-bezier(.2,.8,.2,1) both;
}

.sale-wrap.sale-v2 .sale-modal .m-body.wide{
  width: min(1180px, 98vw);
}

.sale-wrap.sale-v2 .sale-modal .m-head{
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(229,231,235,.62);
  align-items: flex-start;
}

.sale-wrap.sale-v2 .sale-modal .m-head b{
  display: block;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 760;
  letter-spacing: 0;
  color: #111827;
}

.sale-wrap.sale-v2 .sale-modal .m-head .muted.small{
  margin-top: 4px;
  color: #7B8491;
  font-size: 12.5px;
}

.sale-wrap.sale-v2 .sale-modal .icon{
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F6F7F9;
  color: #6B7280;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .14s ease;
}

.sale-wrap.sale-v2 .sale-modal .icon:hover{
  background: #EEF0F3;
  color: #111827;
}

.sale-wrap.sale-v2 .sale-modal .icon:active{
  transform: scale(.97);
}

.sale-wrap.sale-v2 .sale-modal .btn,
.sale-wrap.sale-v2 .sale-modal .pill{
  border-radius: 14px;
  border-color: rgba(229,231,235,.72);
  background: #fff;
  box-shadow: none;
  font-weight: 700;
}

.sale-wrap.sale-v2 .sale-modal .btn.primary,
.sale-wrap.sale-v2 .sale-modal button.primary{
  background: #10233F;
  border-color: #10233F;
  color: #fff;
  box-shadow: 0 12px 28px rgba(16,35,63,.14);
}

.sale-wrap.sale-v2 .sale-modal .btn.primary:hover,
.sale-wrap.sale-v2 .sale-modal button.primary:hover{
  background: #0C1B31;
  border-color: #0C1B31;
}

.sale-wrap.sale-v2 .sale-modal input,
.sale-wrap.sale-v2 .sale-modal select,
.sale-wrap.sale-v2 .sale-modal textarea,
.sale-wrap.sale-v2 .modal-input,
.sale-wrap.sale-v2 .cash-tender-input,
.sale-wrap.sale-v2 .reqm-qty{
  border-color: rgba(229,231,235,.72);
  background: #F8F9FB;
  color: #111827;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.sale-wrap.sale-v2 .sale-modal input:focus,
.sale-wrap.sale-v2 .sale-modal select:focus,
.sale-wrap.sale-v2 .sale-modal textarea:focus,
.sale-wrap.sale-v2 .modal-input:focus,
.sale-wrap.sale-v2 .cash-tender-input:focus,
.sale-wrap.sale-v2 .reqm-qty:focus{
  outline: none;
  background: #fff;
  border-color: rgba(37,99,235,.28);
  box-shadow: 0 0 0 4px rgba(37,99,235,.06);
}

.sale-wrap.sale-v2 .sale-modal.variant .m-body{
  width: min(920px, 96vw);
  padding: 26px;
}

.sale-wrap.sale-v2 .sale-modal.variant .m-head{
  margin-bottom: 22px;
}

.sale-wrap.sale-v2 .sale-modal.variant .m-art{
  grid-template-columns: 164px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  margin-bottom: 24px;
  padding: 14px;
  border-radius: 26px;
  background: #F8F9FB;
  border: 1px solid rgba(229,231,235,.56);
}

.sale-wrap.sale-v2 .sale-modal.variant .m-art .thumb{
  width: 164px;
  height: 164px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(229,231,235,.68);
  box-shadow: 0 1px 2px rgba(17,24,39,.025);
}

.sale-wrap.sale-v2 .sale-modal.variant .m-art .thumb img{
  object-fit: contain;
  padding: 8px;
}

.sale-wrap.sale-v2 .sale-modal.variant .m-art .info{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sale-wrap.sale-v2 .variant-product-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: #7B8491;
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sale-wrap.sale-v2 .variant-product-code{
  color: #7B8491;
  text-transform: none;
  letter-spacing: 0;
}

.sale-wrap.sale-v2 .sale-modal.variant .m-art .info .t1{
  font-size: clamp(24px, 3.1vw, 34px);
  line-height: 1.05;
  font-weight: 780;
  letter-spacing: -.01em;
  color: #111827;
}

.sale-wrap.sale-v2 .sale-modal.variant .m-art .info .muted{
  color: #111827;
  font-size: 22px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.sale-wrap.sale-v2 .sale-modal.variant .m-art .info .strike{
  color: #9CA3AF;
  font-size: 17px;
  font-weight: 620;
}

.sale-wrap.sale-v2 .sale-modal.variant .vs{
  gap: 16px;
}

.sale-wrap.sale-v2 .sale-modal.variant .vs-group{
  padding: 14px;
  border: 1px solid rgba(229,231,235,.62);
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 1px 2px rgba(17,24,39,.025);
}

.sale-wrap.sale-v2 .sale-modal.variant .vs-title{
  min-height: 0;
  padding: 0 2px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111827;
  font-size: 15px;
  font-weight: 760;
  box-shadow: none;
  cursor: default;
  transition: none;
}

.sale-wrap.sale-v2 .sale-modal.variant .vs-title:hover{
  background: transparent;
  border-color: transparent;
}

.sale-wrap.sale-v2 .sale-modal.variant .vs-title:active{
  transform: none;
}

.sale-wrap.sale-v2 .sale-modal.variant .vs-title-main{
  color: #111827;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.sale-wrap.sale-v2 .sale-modal.variant .vs-title .req{
  color: #6B7280;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 5px 9px;
  border-radius: 999px;
  background: #F3F4F6;
  border: 1px solid rgba(229,231,235,.76);
}

.sale-wrap.sale-v2 .sale-modal.variant .vs-pills{
  margin-top: 0;
  gap: 10px;
  padding: 0;
}

.sale-wrap.sale-v2 .sale-modal.variant .vs-pill{
  min-height: 54px;
  padding: 8px 16px;
  border-radius: 18px;
  border-color: rgba(229,231,235,.72);
  background: #fff;
  color: #374151;
  font-size: 15px;
  font-weight: 690;
  box-shadow: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .14s ease;
}

.sale-wrap.sale-v2 .sale-modal.variant .vs-pill:hover{
  background: #F8F9FB;
  border-color: rgba(37,99,235,.18);
}

.sale-wrap.sale-v2 .sale-modal.variant .vs-pill:active{
  transform: scale(.985);
}

.sale-wrap.sale-v2 .sale-modal.variant .vs-pill.active{
  background: #F2F6FF;
  border-color: rgba(37,99,235,.34);
  color: #10233F;
  box-shadow: 0 0 0 4px rgba(37,99,235,.06);
}

.sale-wrap.sale-v2 .sale-modal.variant .vs-dot{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border-color: rgba(229,231,235,.72);
}

.sale-wrap.sale-v2 .sale-modal.variant .row{
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}

.sale-wrap.sale-v2 .sale-modal.variant .qty-hint{
  color: #7B8491;
  font-size: 12px;
}

.sale-wrap.sale-v2 .sale-modal.variant input[type="number"],
.sale-wrap.sale-v2 .sale-modal.variant input[type="text"]{
  min-height: 46px;
  border-radius: 16px;
  padding: 0 14px;
  font-size: 16px;
}

.sale-wrap.sale-v2 .client-modal,
.sale-wrap.sale-v2 .reso-modal,
.sale-wrap.sale-v2 .gift-modal,
.sale-wrap.sale-v2 .discount-wizard-inline,
.sale-wrap.sale-v2 .pay-modal-body,
.sale-wrap.sale-v2 .courtesy-modal-grid{
  gap: 14px;
}

.sale-wrap.sale-v2 .voucher-block-overlay{
  z-index: 10060;
}

.sale-wrap.sale-v2 .sale-modal .m-body.voucher-block-modal{
  width: min(620px, 96vw);
}

.sale-wrap.sale-v2 .voucher-block-content{
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #111827;
}

.sale-wrap.sale-v2 .voucher-block-content p{
  margin: 0;
  color: #374151;
  font-size: 14px;
  line-height: 1.45;
}

.sale-wrap.sale-v2 .voucher-block-metrics{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sale-wrap.sale-v2 .voucher-block-metrics > div{
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(229,231,235,.76);
  border-radius: 14px;
  background: #F8F9FB;
}

.sale-wrap.sale-v2 .voucher-block-metrics span{
  display: block;
  margin-bottom: 4px;
  color: #6B7280;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sale-wrap.sale-v2 .voucher-block-metrics strong{
  display: block;
  color: #10233F;
  font-size: 20px;
  line-height: 1.1;
}

.sale-wrap.sale-v2 .voucher-block-reasons{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sale-wrap.sale-v2 .voucher-block-reason{
  padding: 12px 14px;
  border: 1px solid rgba(229,231,235,.76);
  border-radius: 14px;
  background: #fff;
}

.sale-wrap.sale-v2 .voucher-block-reason-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sale-wrap.sale-v2 .voucher-block-reason-head strong{
  min-width: 0;
  color: #111827;
  font-size: 14px;
}

.sale-wrap.sale-v2 .voucher-block-reason-head span{
  flex: 0 0 auto;
  color: #6B7280;
  font-size: 12px;
  font-weight: 800;
}

.sale-wrap.sale-v2 .voucher-block-reason ul{
  margin: 8px 0 0;
  padding-left: 18px;
  color: #4B5563;
  font-size: 12.5px;
  line-height: 1.45;
}

.sale-wrap.sale-v2 .voucher-block-footer{
  padding: 12px 14px;
  border-radius: 14px;
  background: #ECFDF3;
  color: #166534;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.sale-wrap.sale-v2 .voucher-block-actions{
  justify-content: flex-end;
  margin-top: 18px;
}

@media (max-width: 640px){
  .sale-wrap.sale-v2 .voucher-block-metrics{
    grid-template-columns: 1fr;
  }
}

.sale-wrap.sale-v2 .client-result,
.sale-wrap.sale-v2 .pay-modal-row,
.sale-wrap.sale-v2 .pay-modal-voucher-row,
.sale-wrap.sale-v2 .discount-row,
.sale-wrap.sale-v2 .recent-inline,
.sale-wrap.sale-v2 .gift-info,
.sale-wrap.sale-v2 .courtesy-choice,
.sale-wrap.sale-v2 .reqm-main,
.sale-wrap.sale-v2 .reqm-side,
.sale-wrap.sale-v2 .reqm-section,
.sale-wrap.sale-v2 .reqm-row{
  border-color: rgba(229,231,235,.62);
  border-radius: 18px;
  background: #F8F9FB;
  box-shadow: none;
}

.sale-wrap.sale-v2 .client-result:hover,
.sale-wrap.sale-v2 .courtesy-choice:hover,
.sale-wrap.sale-v2 .reqm-row:hover{
  background: #fff;
  border-color: rgba(209,213,219,.86);
}

.sale-wrap.sale-v2 .cash-tender-summary{
  border: 0;
  border-radius: 24px;
  background: #F8F9FB;
}

.sale-wrap.sale-v2 .cash-tender-label{
  color: #6B7280;
}

.sale-wrap.sale-v2 .cash-tender-due{
  color: #10233F;
}

.sale-wrap.sale-v2 .cash-tender-input{
  border-width: 1px;
  color: #10233F;
}

.sale-wrap.sale-v2 .cash-change-overlay{
  background: rgba(245,245,247,.92);
}

.sale-wrap.sale-v2 .cash-change-popup{
  border: 1px solid rgba(229,231,235,.72);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 30px 80px rgba(17,24,39,.12);
}

@media (max-width: 860px){
  .sale-wrap.sale-v2 .sale-modal{
    padding: 14px;
  }

  .sale-wrap.sale-v2 .sale-modal .m-body{
    padding: 18px;
    border-radius: 24px;
  }

  .sale-wrap.sale-v2 .sale-modal.variant .m-art{
    grid-template-columns: 1fr;
  }

  .sale-wrap.sale-v2 .sale-modal.variant .m-art .thumb{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 320px;
  }
}

/* =========================
   UX rebalance - professional POS refinement - step 5
   ========================= */
.sale-wrap.sale-v2,
.sale-wrap.sale-v2.sale-ma{
  --cartw: clamp(680px, 56vw, 1080px);
}

.sale-wrap.sale-v2 .sale-topbar{
  padding: 8px 10px;
  margin-bottom: 10px;
}

.sale-wrap.sale-v2 .top-pill,
.sale-wrap.sale-v2 .sale-topbar .sync-status,
.sale-wrap.sale-v2 .sale-topbar .notif-bell{
  min-height: 48px;
  height: 48px;
}

.sale-wrap.sale-v2 .icon-only-pill,
.sale-wrap.sale-v2 .home-pill{
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  flex-basis: 48px;
}

.sale-wrap.sale-v2 .top-identity-card{
  height: auto;
  min-height: 52px;
  min-width: 230px;
  padding: 7px 14px 7px 8px;
}

.sale-wrap.sale-v2 .top-identity-copy{
  gap: 1px;
}

.sale-wrap.sale-v2 .top-identity-sede{
  color: #374151;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.18;
  white-space: nowrap;
}

.sale-wrap.sale-v2 .top-identity-time{
  font-size: 10.5px;
  line-height: 1.15;
}

.sale-wrap.sale-v2 .article-toolbar{
  padding: 18px;
}

.sale-wrap.sale-v2 .toolbar-search-row{
  grid-template-columns: 46px minmax(0, 1fr) 116px;
}

.sale-wrap.sale-v2 .scanner-icon-wrap,
.sale-wrap.sale-v2 .toolbar-search-row .search,
.sale-wrap.sale-v2 .toolbar-search-row .btn{
  height: 66px;
}

.sale-wrap.sale-v2 .toolbar-search-row .search{
  font-size: 23px;
}

.sale-wrap.sale-v2 .cards{
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 22px;
}

.sale-wrap.sale-v2 .card{
  padding: 18px;
}

.sale-wrap.sale-v2 .card .img.small{
  aspect-ratio: 1 / 1.08;
}

.sale-wrap.sale-v2 .card .title{
  font-size: 15px;
}

.sale-wrap.sale-v2 .card .code,
.sale-wrap.sale-v2 .card .tag-cloud{
  opacity: .78;
}

.sale-wrap.sale-v2 .cart-header-row{
  display: none;
}

.sale-wrap.sale-v2 .cart-rows{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
  padding: 2px 2px 6px;
}

.sale-wrap.sale-v2 .cart-rows .row{
  display: grid;
  grid-template-columns: 76px minmax(220px, 1fr) minmax(390px, .95fr);
  align-items: center;
  column-gap: 16px;
  min-height: 112px;
  padding: 16px;
  border: 1px solid rgba(229,231,235,.58);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17,24,39,.025);
}

.sale-wrap.sale-v2 .cart-rows .row:hover{
  background: #fff;
  border-color: rgba(209,213,219,.86);
  box-shadow: 0 1px 2px rgba(17,24,39,.035), 0 12px 28px rgba(17,24,39,.04);
}

.sale-wrap.sale-v2 .cart-rows .row.is-zero-value,
.sale-wrap.sale-v2 .cart-rows .row.is-pack-invalid{
  box-shadow: inset 0 0 0 1px rgba(245,158,11,.18);
}

.sale-wrap.sale-v2 .c-thumb img,
.sale-wrap.sale-v2 .c-thumb .img-ph{
  width: 68px;
  height: 68px;
  border-radius: 18px;
  object-fit: cover;
}

.sale-wrap.sale-v2 .desc{
  gap: 6px;
}

.sale-wrap.sale-v2 .desc .t1{
  font-size: 15px;
  line-height: 1.24;
  font-weight: 800;
  -webkit-line-clamp: 2;
}

.sale-wrap.sale-v2 .desc .muted.small{
  font-size: 11px;
  gap: 5px;
}

.sale-wrap.sale-v2 .variants-line .tag{
  max-width: 100%;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(37,99,235,.26);
  background: #EFF6FF;
  color: #1E3A8A;
  font-size: 12px;
  font-weight: 820;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.64);
}

.sale-wrap.sale-v2 .variants-line .tag .dot{
  box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 0 0 3px rgba(37,99,235,.22);
}

.sale-wrap.sale-v2 .cart-rows .row .row-controls{
  display: grid;
  grid-template-columns: minmax(94px, auto) minmax(92px, auto) 44px minmax(100px, auto) 40px;
  align-items: center;
  justify-content: end;
  gap: 10px;
}

.sale-wrap.sale-v2 .row-controls .qty,
.sale-wrap.sale-v2 .row-controls .price,
.sale-wrap.sale-v2 .row-controls .disc-col,
.sale-wrap.sale-v2 .row-controls .reso-col,
.sale-wrap.sale-v2 .row-controls .tot{
  width: auto;
  min-width: 0;
}

.sale-wrap.sale-v2 .qty{
  display: inline-grid;
  grid-template-columns: 38px minmax(48px, auto) 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px;
  border-radius: 18px;
  background: #F8F9FB;
  box-shadow: inset 0 0 0 1px rgba(229,231,235,.58);
}

.sale-wrap.sale-v2 .qty-step{
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #111827;
  font-size: 20px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(17,24,39,.03);
  transition: background .14s ease, color .14s ease, transform .12s ease, opacity .14s ease;
}

.sale-wrap.sale-v2 .qty-step:hover{
  background: #EEF2F7;
}

.sale-wrap.sale-v2 .qty-step:active{
  transform: scale(.96);
}

.sale-wrap.sale-v2 .qty-step:disabled{
  opacity: .38;
  cursor: default;
}

.sale-wrap.sale-v2 .qty .qty-inp{
  height: 38px;
  min-width: 48px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 4px;
}

.sale-wrap.sale-v2 .price.right{
  justify-content: flex-end;
  color: #6B7280;
  font-size: 13px;
  font-weight: 680;
}

.sale-wrap.sale-v2 .price-inp,
.sale-wrap.sale-v2 .disc-inp{
  background: #F8F9FB;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(229,231,235,.58);
}

.sale-wrap.sale-v2 .disc-stack{
  align-items: flex-end;
}

.sale-wrap.sale-v2 .pill.tiny{
  height: 26px;
  font-size: 10.5px;
  color: #6B7280;
}

.sale-wrap.sale-v2 .line-reso-pill{
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
}

.sale-wrap.sale-v2 .line-reso-pill.is-locked{
  opacity: .46;
  filter: grayscale(.25);
  cursor: not-allowed;
}

.sale-wrap.sale-v2 .tot.right{
  min-width: 100px;
  font-size: 17px;
  font-weight: 860;
  text-align: right;
}

.sale-wrap.sale-v2 .cart-rows .row .icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
}

.sale-wrap.sale-v2 .cart-bottom-bar{
  align-items: stretch;
}

.sale-wrap.sale-v2 .receipt-row{
  flex-wrap: wrap;
}

.sale-wrap.sale-v2 .cart-options .pill.small,
.sale-wrap.sale-v2 .cart-options .action-pill.action-pill-icon,
.sale-wrap.sale-v2 .cart-actions .btn.action-btn-icon,
.sale-wrap.sale-v2 .cart-actions .btn.action-confirm-icon{
  width: auto !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.sale-wrap.sale-v2 .action-pill-label,
.sale-wrap.sale-v2 .action-btn-label{
  display: inline-flex;
  font-size: 12px;
  font-weight: 720;
  line-height: 1;
  white-space: nowrap;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-resume{
  position: relative;
  overflow: visible !important;
}

.sale-wrap.sale-v2 .cart-actions .action-counter{
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #10233F;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 10px 22px rgba(16,35,63,.18);
  font-size: 11px;
  font-weight: 820;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-confirm-icon{
  padding: 0 18px !important;
}

.sale-wrap.sale-v2 .cart-actions .btn.action-confirm-icon .action-btn-label{
  font-size: 13px;
  font-weight: 780;
}

@media (max-width: 1500px){
  .sale-wrap.sale-v2 .cart-rows .row{
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .sale-wrap.sale-v2 .cart-rows .row .row-controls{
    grid-column: 2;
    grid-template-columns: minmax(90px, auto) minmax(90px, auto) 42px minmax(96px, auto) 40px;
    justify-content: start;
    margin-top: 10px;
  }
}

@media (max-width: 1200px){
  .sale-wrap.sale-v2,
  .sale-wrap.sale-v2.sale-ma{
    --cartw: 100%;
  }

  .sale-wrap.sale-v2 .cards{
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  }
}

@media (max-width: 760px){
  .sale-wrap.sale-v2 .cart-rows .row{
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 12px;
  }

  .sale-wrap.sale-v2 .cart-rows .row .row-controls{
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .sale-wrap.sale-v2 .row-controls .tot{
    justify-self: start;
  }
}

/* Redesign product grid - step 7 */
.sale-wrap.sale-v2 .items-card{
  background: rgba(255,255,255,.72);
  border-color: rgba(229,231,235,.5);
  box-shadow: 0 1px 2px rgba(17,24,39,.025);
}

.sale-wrap.sale-v2 .cards{
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap: 14px;
  align-items: start;
}

.sale-wrap.sale-v2 .card.product-card{
  position: relative;
  min-height: 0;
  padding: 10px;
  gap: 9px;
  border: 1px solid rgba(229,231,235,.32);
  border-radius: 22px;
  background: rgba(255,255,255,.68);
  box-shadow: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .14s ease;
}

.sale-wrap.sale-v2 .card.product-card:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(209,213,219,.55);
  box-shadow: 0 12px 30px rgba(17,24,39,.055);
  transform: translateY(-2px);
}

.sale-wrap.sale-v2 .card.product-card:active{
  transform: translateY(0) scale(.992);
}

.sale-wrap.sale-v2 .card.product-card:focus-visible{
  outline: 0;
  border-color: rgba(15,38,76,.28);
  box-shadow: 0 0 0 4px rgba(15,38,76,.08);
}

.sale-wrap.sale-v2 .card.product-card .img.small{
  width: 100%;
  aspect-ratio: 1 / 1.04;
  min-height: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #FAFAFB 0%, #F3F4F6 100%);
  box-shadow: none;
  overflow: hidden;
}

.sale-wrap.sale-v2 .card.product-card .img.small img,
.sale-wrap.sale-v2 .card.product-card .img.small .img-ph{
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  background: transparent;
  transition: transform .18s ease, opacity .16s ease;
}

.sale-wrap.sale-v2 .card.product-card:hover .img.small img{
  transform: scale(1.018);
}

.sale-wrap.sale-v2 .card.product-card .meta{
  display: grid;
  gap: 5px;
  min-height: 0;
  padding: 0 2px;
}

.sale-wrap.sale-v2 .card.product-card .title{
  min-height: 0;
  color: #111827;
  font-size: 14px;
  line-height: 1.18;
  font-weight: 760;
  letter-spacing: 0;
  -webkit-line-clamp: 2;
}

.sale-wrap.sale-v2 .card.product-card .product-code-wrap{
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
}

.sale-wrap.sale-v2 .card.product-card .code{
  max-width: 100%;
  color: #8A94A3;
  font-size: 10.5px;
  font-weight: 560;
  letter-spacing: 0;
  opacity: .82;
}

.sale-wrap.sale-v2 .card.product-card .info-line{
  min-height: 18px;
  align-items: center;
  gap: 6px;
}

.sale-wrap.sale-v2 .card.product-card .info-line .muted{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #6B7280;
  font-size: 11.5px;
  font-weight: 620;
}

.sale-wrap.sale-v2 .card.product-card .stock-pill{
  position: absolute;
  top: 16px;
  right: 16px;
  height: 24px;
  min-width: 34px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 760;
  box-shadow: 0 4px 14px rgba(17,24,39,.05);
}

.sale-wrap.sale-v2 .card.product-card .stock-pill.ok{
  background: rgba(240,253,244,.86);
  color: #15803D;
}

.sale-wrap.sale-v2 .card.product-card .stock-pill.low{
  background: rgba(254,242,242,.88);
  color: #B91C1C;
}

.sale-wrap.sale-v2 .card.product-card .tag-cloud{
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  min-height: 20px;
  overflow: hidden;
  opacity: .9;
}

.sale-wrap.sale-v2 .card.product-card .tag.mini{
  max-width: 78px;
  height: 20px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: #F5F6F8;
  color: #7A8493;
  font-size: 10px;
  font-weight: 620;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sale-wrap.sale-v2 .card.product-card .pack-badge{
  background: rgba(15,38,76,.07);
  color: #0F264C;
}

.sale-wrap.sale-v2 .card.product-card .price{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 7px;
  margin-top: 1px;
  color: #111827;
  font-size: 15px;
  line-height: 1.16;
  font-weight: 820;
}

.sale-wrap.sale-v2 .card.product-card .strike{
  color: #9CA3AF;
  font-size: 11.5px;
  font-weight: 620;
}

.sale-wrap.sale-v2 .card.product-card .now{
  color: #111827;
  font-size: 15px;
  font-weight: 850;
}

.sale-wrap.sale-v2 .card.product-card .promo-tag{
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 20px;
  margin: 0;
  padding: 3px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(15,38,76,.07);
  color: #0F264C;
  font-size: 10.5px;
  font-weight: 720;
  line-height: 1.1;
}

.sale-wrap.sale-v2 .card.product-card .price .muted.small{
  flex-basis: 100%;
  color: #8A94A3;
  font-size: 10.5px;
  font-weight: 560;
}

.sale-wrap.sale-v2 .card.product-card .btn.product-card-cta{
  width: fit-content;
  min-height: 28px;
  height: 28px;
  margin: 0 0 0 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0F264C;
  box-shadow: none;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0;
  justify-content: flex-start;
  opacity: .86;
  transition: opacity .14s ease, transform .14s ease, color .14s ease;
}

.sale-wrap.sale-v2 .card.product-card .btn.product-card-cta:hover{
  background: transparent;
  color: #111827;
  opacity: 1;
  transform: translateX(2px);
}

.sale-wrap.sale-v2 .card.product-card .btn.product-card-cta:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 4px rgba(15,38,76,.08);
}

@media (max-width: 1500px){
  .sale-wrap.sale-v2 .cards{
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
}

@media (max-width: 1200px){
  .sale-wrap.sale-v2 .cards{
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
}

@media (max-width: 760px){
  .sale-wrap.sale-v2 .cards{
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .sale-wrap.sale-v2 .card.product-card{
    border-radius: 18px;
    padding: 8px;
  }

  .sale-wrap.sale-v2 .card.product-card .img.small{
    border-radius: 15px;
  }
}

/* Header and filter toolbar cleanup - step 8 */
.sale-wrap.sale-v2 .sale-topbar{
  padding: 7px 10px;
  border-radius: 20px;
}

.sale-wrap.sale-v2 .sale-topbar-main{
  align-items: center;
  gap: 8px;
}

.sale-wrap.sale-v2 .sale-topbar-actions{
  gap: 6px;
}

.sale-wrap.sale-v2 .top-pill,
.sale-wrap.sale-v2 .sale-topbar .sync-status,
.sale-wrap.sale-v2 .sale-topbar .notif-bell{
  min-width: 46px;
  min-height: 46px;
  height: 46px;
  border-radius: 15px;
}

.sale-wrap.sale-v2 .icon-only-pill,
.sale-wrap.sale-v2 .home-pill{
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  flex-basis: 46px;
}

.sale-wrap.sale-v2 .top-sale-mode{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 4px 5px 4px 10px;
  border: 1px solid rgba(229,231,235,.78);
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  color: #6B7280;
  box-shadow: 0 1px 2px rgba(17,24,39,.025);
  white-space: nowrap;
}

.sale-wrap.sale-v2 .top-sale-mode-label{
  font-size: 11px;
  font-weight: 720;
  color: #8A94A3;
}

.sale-wrap.sale-v2 .top-sale-mode-segment{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 13px;
  background: #F5F5F7;
}

.sale-wrap.sale-v2 .top-sale-mode-option{
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #6B7280;
  font-size: 12px;
  font-weight: 740;
  line-height: 1;
  letter-spacing: 0;
}

.sale-wrap.sale-v2 .top-sale-mode-button{
  cursor: pointer;
  font-family: inherit;
}

.sale-wrap.sale-v2 .top-sale-mode-option.is-active{
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(17,24,39,.04);
}

.sale-wrap.sale-v2 .top-sale-mode-button.is-active{
  color: #0F264C;
}

.sale-wrap.sale-v2 .top-sale-mode-button:hover:not(:disabled){
  color: #111827;
}

.sale-wrap.sale-v2 .top-sale-mode-button:disabled{
  cursor: default;
  opacity: .58;
}

.sale-wrap.sale-v2 .top-sale-mode-button:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 4px rgba(15,38,76,.08);
}

.sale-wrap.sale-v2 .top-identity-card{
  min-width: 210px;
  min-height: 46px;
  padding: 6px 12px 6px 7px;
  border-color: rgba(229,231,235,.78);
}

.sale-wrap.sale-v2 .top-identity-icon{
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

.sale-wrap.sale-v2 .top-identity-name{
  font-size: 13.5px;
}

.sale-wrap.sale-v2 .top-identity-sede{
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sale-wrap.sale-v2 .article-toolbar{
  padding: 14px;
  gap: 10px;
}

.sale-wrap.sale-v2 .toolbar-head{
  min-height: 0;
}

.sale-wrap.sale-v2 .toolbar-head h4{
  font-size: 13px;
  color: #6B7280;
  font-weight: 780;
  letter-spacing: 0;
}

.sale-wrap.sale-v2 .toolbar-switches{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  opacity: .78;
}

.sale-wrap.sale-v2 .article-toolbar .sort-switch,
.sale-wrap.sale-v2 .toolbar-quick{
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
}

.sale-wrap.sale-v2 .article-toolbar .sort-switch{
  overflow-x: auto;
  scrollbar-width: none;
}

.sale-wrap.sale-v2 .article-toolbar .sort-switch::-webkit-scrollbar{
  display: none;
}

.sale-wrap.sale-v2 .article-toolbar .sort-switch .pill,
.sale-wrap.sale-v2 .toolbar-quick .pill{
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border-color: transparent;
  background: transparent;
  color: #7A8493;
  font-size: 11.5px;
  font-weight: 680;
}

.sale-wrap.sale-v2 .article-toolbar .sort-switch .pill:hover,
.sale-wrap.sale-v2 .toolbar-quick .pill:hover{
  background: #F3F4F6;
  color: #374151;
}

.sale-wrap.sale-v2 .article-toolbar .sort-switch .pill.selected,
.sale-wrap.sale-v2 .toolbar-quick .pill.selected{
  background: #FFFFFF;
  color: #111827;
  box-shadow: 0 0 0 1px rgba(229,231,235,.72), 0 1px 2px rgba(17,24,39,.035);
}

.sale-wrap.sale-v2 .toolbar-filters{
  grid-template-columns: minmax(120px, .9fr) minmax(140px, 1fr) minmax(150px, 1fr);
  gap: 8px;
  opacity: .68;
}

.sale-wrap.sale-v2 .toolbar-filters select,
.sale-wrap.sale-v2 .toolbar-filters .filter-tag{
  height: 34px;
  border-radius: 12px;
  border-color: rgba(229,231,235,.44);
  background: rgba(255,255,255,.58);
  color: #6B7280;
  font-size: 12px;
  font-weight: 590;
}

.sale-wrap.sale-v2 .toolbar-filters select:focus,
.sale-wrap.sale-v2 .toolbar-filters .filter-tag:focus{
  color: #111827;
  background: #fff;
}

@media (max-width: 1320px){
  .sale-wrap.sale-v2 .sale-topbar-main{
    flex-wrap: wrap;
  }

  .sale-wrap.sale-v2 .top-sale-mode{
    order: 3;
  }
}

@media (max-width: 760px){
  .sale-wrap.sale-v2 .top-sale-mode{
    width: 100%;
    justify-content: space-between;
  }

  .sale-wrap.sale-v2 .toolbar-switches{
    align-items: flex-start;
    flex-direction: column;
  }

  .sale-wrap.sale-v2 .toolbar-filters{
    grid-template-columns: 1fr;
  }
}

/* Filter toolbar refinement - step 9 */
.sale-wrap.sale-v2 .article-toolbar{
  gap: 9px;
}

.sale-wrap.sale-v2 .filter-toolbar{
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(250px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: -1px;
  padding: 5px;
  border: 1px solid rgba(229,231,235,.46);
  border-radius: 16px;
  background: rgba(248,249,251,.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
}

.sale-wrap.sale-v2 .filter-toolbar-actions{
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.sale-wrap.sale-v2 .filter-toolbar-actions::-webkit-scrollbar{
  display: none;
}

.sale-wrap.sale-v2 .filter-chip{
  height: 30px;
  min-height: 30px;
  min-width: max-content;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #6B7280;
  box-shadow: none;
  font-size: 11.5px;
  font-weight: 720;
  letter-spacing: 0;
  line-height: 1;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease, transform .12s ease, opacity .14s ease;
}

.sale-wrap.sale-v2 .filter-chip:hover{
  background: rgba(255,255,255,.72);
  color: #374151;
}

.sale-wrap.sale-v2 .filter-chip:active{
  transform: scale(.985);
}

.sale-wrap.sale-v2 .filter-chip.selected{
  background: #fff;
  color: #111827;
  box-shadow: 0 0 0 1px rgba(229,231,235,.78), 0 1px 2px rgba(17,24,39,.035);
}

.sale-wrap.sale-v2 .filter-chip-toggle{
  gap: 6px;
  padding-left: 8px;
}

.sale-wrap.sale-v2 .filter-toggle-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #D1D5DB;
  box-shadow: none;
  transition: background .14s ease, box-shadow .14s ease, transform .14s ease;
}

.sale-wrap.sale-v2 .filter-chip-toggle.selected .filter-toggle-dot{
  background: #15803D;
  box-shadow: 0 0 0 3px rgba(21,128,61,.1);
}

.sale-wrap.sale-v2 .filter-chip-reset{
  color: #9CA3AF;
  font-weight: 680;
}

.sale-wrap.sale-v2 .filter-chip-reset:hover{
  color: #6B7280;
}

.sale-wrap.sale-v2 .filter-toolbar-fields{
  display: grid;
  grid-template-columns: minmax(110px, .9fr) minmax(130px, 1fr) minmax(92px, .72fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
  opacity: 1;
}

.sale-wrap.sale-v2 .filter-toolbar .toolbar-filters{
  margin: 0;
}

.sale-wrap.sale-v2 .filter-toolbar-fields select,
.sale-wrap.sale-v2 .filter-toolbar-fields .filter-tag{
  height: 30px;
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 11px;
  background: rgba(255,255,255,.58);
  color: #6B7280;
  box-shadow: inset 0 0 0 1px rgba(229,231,235,.45);
  font-size: 11.5px;
  font-weight: 640;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}

.sale-wrap.sale-v2 .filter-toolbar-fields select:hover,
.sale-wrap.sale-v2 .filter-toolbar-fields .filter-tag:hover{
  background: rgba(255,255,255,.82);
}

.sale-wrap.sale-v2 .filter-toolbar-fields select:focus,
.sale-wrap.sale-v2 .filter-toolbar-fields .filter-tag:focus{
  outline: 0;
  background: #fff;
  color: #111827;
  box-shadow: 0 0 0 3px rgba(15,38,76,.075), inset 0 0 0 1px rgba(15,38,76,.16);
}

@media (max-width: 1500px){
  .sale-wrap.sale-v2 .filter-toolbar{
    grid-template-columns: 1fr;
  }

  .sale-wrap.sale-v2 .filter-toolbar-fields{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  .sale-wrap.sale-v2 .filter-toolbar{
    padding: 6px;
  }

  .sale-wrap.sale-v2 .filter-toolbar-fields{
    grid-template-columns: 1fr;
  }
}

/* Modal UX refinement and action card system - step 10 */
.sale-wrap.sale-v2 .sale-modal .m-body.action-sheet-modal{
  width: min(680px, calc(100vw - 28px));
  padding: 24px;
  border-radius: 28px;
}

.sale-wrap.sale-v2 .sale-modal .action-sheet-modal .m-head{
  padding-bottom: 4px;
}

.sale-wrap.sale-v2 .sale-modal .action-sheet-modal .m-head b{
  font-size: 20px;
  letter-spacing: 0;
}

.sale-wrap.sale-v2 .cassa-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.sale-wrap.sale-v2 .cassa-action-card{
  min-height: 104px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(229,231,235,.68);
  border-radius: 20px;
  background: #FFFFFF;
  color: #111827;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(17,24,39,.025);
  transition: transform .14s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, opacity .14s ease;
}

.sale-wrap.sale-v2 .cassa-action-card:hover:not(:disabled){
  transform: translateY(-1px);
  border-color: rgba(209,213,219,.92);
  background: #FBFCFE;
  box-shadow: 0 12px 28px rgba(17,24,39,.055);
}

.sale-wrap.sale-v2 .cassa-action-card:active:not(:disabled){
  transform: scale(.992);
}

.sale-wrap.sale-v2 .cassa-action-card:focus-visible{
  outline: 0;
  border-color: rgba(15,38,76,.26);
  box-shadow: 0 0 0 4px rgba(15,38,76,.08);
}

.sale-wrap.sale-v2 .cassa-action-card:disabled{
  cursor: default;
  opacity: .54;
}

.sale-wrap.sale-v2 .action-card-icon{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: #F5F6F8;
  color: #0F264C;
}

.sale-wrap.sale-v2 .action-card-icon .sale-line-icon{
  width: 22px;
  height: 22px;
}

.sale-wrap.sale-v2 .action-card-copy{
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sale-wrap.sale-v2 .action-card-title{
  color: #111827;
  font-size: 14px;
  font-weight: 820;
  line-height: 1.16;
}

.sale-wrap.sale-v2 .action-card-subtitle{
  color: #6B7280;
  font-size: 12px;
  font-weight: 590;
  line-height: 1.25;
}

.sale-wrap.sale-v2 .cassa-action-card-danger .action-card-icon{
  background: #FEF2F2;
  color: #B91C1C;
}

.sale-wrap.sale-v2 .courtesy-sheet-modal{
  width: min(620px, calc(100vw - 28px));
}

.sale-wrap.sale-v2 .courtesy-modal-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}

.sale-wrap.sale-v2 .courtesy-choice{
  min-height: 88px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(229,231,235,.7);
  border-radius: 20px;
  background: #FFFFFF;
  color: #111827;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(17,24,39,.025);
  transition: transform .14s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.sale-wrap.sale-v2 .courtesy-choice:hover{
  transform: translateY(-1px);
  border-color: rgba(209,213,219,.92);
  background: #FBFCFE;
  box-shadow: 0 12px 28px rgba(17,24,39,.055);
}

.sale-wrap.sale-v2 .courtesy-choice:active{
  transform: scale(.992);
}

.sale-wrap.sale-v2 .courtesy-choice:focus-visible{
  outline: 0;
  border-color: rgba(15,38,76,.26);
  box-shadow: 0 0 0 4px rgba(15,38,76,.08);
}

.sale-wrap.sale-v2 .courtesy-choice.is-active{
  border-color: rgba(15,38,76,.32);
  background: rgba(248,250,252,.92);
  box-shadow: 0 0 0 4px rgba(15,38,76,.055), 0 1px 2px rgba(17,24,39,.025);
}

.sale-wrap.sale-v2 .selection-card-indicator{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid #D1D5DB;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 5px #FFFFFF;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.sale-wrap.sale-v2 .courtesy-choice.is-active .selection-card-indicator{
  border-color: #0F264C;
  background: #0F264C;
  box-shadow: inset 0 0 0 5px #FFFFFF, 0 0 0 4px rgba(15,38,76,.08);
}

.sale-wrap.sale-v2 .selection-card-copy{
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sale-wrap.sale-v2 .courtesy-choice .title{
  color: #111827;
  font-size: 14.5px;
  font-weight: 820;
  line-height: 1.16;
}

.sale-wrap.sale-v2 .courtesy-choice .muted.small{
  color: #6B7280;
  font-size: 12.5px;
  font-weight: 590;
  line-height: 1.28;
}

.sale-wrap.sale-v2 .courtesy-sheet-modal > .row{
  margin-top: 16px !important;
}

@media (max-width: 760px){
  .sale-wrap.sale-v2 .sale-modal .m-body.action-sheet-modal{
    padding: 18px;
    border-radius: 24px;
  }

  .sale-wrap.sale-v2 .cassa-actions{
    grid-template-columns: 1fr;
  }
}

/* Master/detail modal system and action hierarchy - step 11 */
.sale-wrap.sale-v2 .transfer-dropdown{
  width: min(1040px, calc(100vw - 24px));
  max-height: min(82vh, 760px);
  padding: 16px;
  border-color: rgba(229,231,235,.72);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 24px 60px rgba(17,24,39,.16);
}

.sale-wrap.sale-v2 .transfer-dropdown-head{
  align-items: center;
  padding-bottom: 2px;
}

.sale-wrap.sale-v2 .transfer-dropdown-head strong{
  color: #111827;
  font-size: 17px;
  font-weight: 850;
}

.sale-wrap.sale-v2 .transfer-dropdown-headActions .btn{
  height: 34px;
  border-radius: 12px;
  box-shadow: none;
}

.sale-wrap.sale-v2 .transfer-master-detail{
  display: grid;
  grid-template-columns: minmax(360px, .92fr) minmax(320px, .72fr);
  gap: 14px;
  margin-top: 14px;
}

.sale-wrap.sale-v2 .transfer-dropdown-master{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
}

.sale-wrap.sale-v2 .transfer-dropdown-section{
  padding: 10px;
  border-color: rgba(229,231,235,.58);
  border-radius: 20px;
  background: #F8F9FB;
}

.sale-wrap.sale-v2 .transfer-dropdown-sectionHead strong{
  color: #6B7280;
  font-size: 11px;
  letter-spacing: .04em;
}

.sale-wrap.sale-v2 .transfer-dropdown-sectionHead span{
  background: #fff;
  color: #6B7280;
  box-shadow: 0 0 0 1px rgba(229,231,235,.68);
}

.sale-wrap.sale-v2 .transfer-dropdown-list{
  gap: 8px;
  max-height: 248px;
  overflow: auto;
  padding-right: 2px;
}

.sale-wrap.sale-v2 .transfer-order-card{
  position: relative;
  gap: 6px;
  padding: 12px;
  border-color: rgba(229,231,235,.66);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17,24,39,.025);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .14s ease;
}

.sale-wrap.sale-v2 .transfer-order-card.is-clickable:hover{
  transform: translateY(-1px);
  border-color: rgba(209,213,219,.9);
  box-shadow: 0 10px 24px rgba(17,24,39,.055);
}

.sale-wrap.sale-v2 .transfer-order-card.is-selected{
  border-color: rgba(15,38,76,.24);
  background: #FCFCFD;
  box-shadow: 0 0 0 4px rgba(15,38,76,.055);
}

.sale-wrap.sale-v2 .transfer-order-top strong{
  color: #111827;
  font-size: 14px;
  font-weight: 860;
}

.sale-wrap.sale-v2 .transfer-status-badge{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  white-space: nowrap;
}

.sale-wrap.sale-v2 .transfer-order-route{
  color: #374151;
  font-size: 13px;
  font-weight: 760;
}

.sale-wrap.sale-v2 .transfer-order-meta{
  color: #8A94A3;
  font-size: 11.5px;
}

.sale-wrap.sale-v2 .transfer-order-note{
  color: #6B7280;
  font-size: 11.5px;
}

.sale-wrap.sale-v2 .transfer-order-actions{
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.sale-wrap.sale-v2 .transfer-primary-action{
  height: 32px;
  min-height: 32px;
  border-radius: 12px;
  background: #111827;
  border-color: #111827;
  color: #fff;
  box-shadow: none;
}

.sale-wrap.sale-v2 .transfer-card-menu{
  position: relative;
  margin-left: auto;
}

.sale-wrap.sale-v2 .transfer-card-menu summary{
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #F5F6F8;
  color: #6B7280;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 850;
  line-height: 1;
  transition: background .14s ease, color .14s ease, transform .12s ease;
}

.sale-wrap.sale-v2 .transfer-card-menu summary::-webkit-details-marker{
  display: none;
}

.sale-wrap.sale-v2 .transfer-card-menu summary:hover{
  background: #ECEFF3;
  color: #111827;
}

.sale-wrap.sale-v2 .transfer-card-menu[open] summary{
  background: #fff;
  color: #111827;
  box-shadow: 0 0 0 1px rgba(229,231,235,.86);
}

.sale-wrap.sale-v2 .transfer-card-menu-popover{
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  min-width: 190px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(229,231,235,.82);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(17,24,39,.14);
}

.sale-wrap.sale-v2 .transfer-card-menu-popover button{
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #374151;
  text-align: left;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.sale-wrap.sale-v2 .transfer-card-menu-popover button:hover:not(:disabled){
  background: #F5F6F8;
  color: #111827;
}

.sale-wrap.sale-v2 .transfer-card-menu-popover button:disabled{
  opacity: .45;
  cursor: default;
}

.sale-wrap.sale-v2 .transfer-dropdown-detail{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(229,231,235,.66);
  border-radius: 22px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F9FB 100%);
}

.sale-wrap.sale-v2 .transfer-detail-empty{
  min-height: 330px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #8A94A3;
  text-align: center;
}

.sale-wrap.sale-v2 .transfer-detail-empty .sale-line-icon{
  width: 34px;
  height: 34px;
  color: #0F264C;
  opacity: .42;
}

.sale-wrap.sale-v2 .transfer-detail-empty strong{
  color: #111827;
  font-size: 15px;
  font-weight: 820;
}

.sale-wrap.sale-v2 .transfer-detail-empty span{
  max-width: 240px;
  font-size: 12.5px;
  line-height: 1.35;
}

.sale-wrap.sale-v2 .transfer-detail-kicker{
  color: #8A94A3;
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sale-wrap.sale-v2 .transfer-detail-title-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sale-wrap.sale-v2 .transfer-detail-title-row strong{
  color: #111827;
  font-size: 22px;
  font-weight: 880;
}

.sale-wrap.sale-v2 .transfer-detail-route{
  color: #374151;
  font-size: 14px;
  font-weight: 760;
}

.sale-wrap.sale-v2 .transfer-detail-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sale-wrap.sale-v2 .transfer-detail-grid > div,
.sale-wrap.sale-v2 .transfer-detail-note{
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(229,231,235,.62);
  border-radius: 16px;
  background: #fff;
}

.sale-wrap.sale-v2 .transfer-detail-grid span,
.sale-wrap.sale-v2 .transfer-detail-note span{
  color: #8A94A3;
  font-size: 11px;
  font-weight: 720;
}

.sale-wrap.sale-v2 .transfer-detail-grid b,
.sale-wrap.sale-v2 .transfer-detail-note p{
  margin: 0;
  color: #111827;
  font-size: 12.5px;
  font-weight: 720;
  line-height: 1.3;
}

.sale-wrap.sale-v2 .transfer-detail-cta{
  margin-top: auto;
  height: 42px;
  border-radius: 14px;
}

@media (max-width: 980px){
  .sale-wrap.sale-v2 .transfer-master-detail{
    grid-template-columns: 1fr;
  }

  .sale-wrap.sale-v2 .transfer-dropdown-list{
    max-height: none;
  }
}

/* Master/detail information architecture - step 12 */
.sale-wrap.sale-v2 .transfer-master-detail{
  grid-template-columns: minmax(420px, .96fr) minmax(360px, .74fr);
  gap: 16px;
}

.sale-wrap.sale-v2 .transfer-dropdown-master{
  display: block;
}

.sale-wrap.sale-v2 .transfer-tabbed-section{
  gap: 12px;
  padding: 12px;
}

.sale-wrap.sale-v2 .transfer-tabs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(229,231,235,.62);
  border-radius: 16px;
  background: #F3F4F6;
}

.sale-wrap.sale-v2 .transfer-tab{
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #6B7280;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease, transform .12s ease;
}

.sale-wrap.sale-v2 .transfer-tab:hover{
  color: #374151;
  background: rgba(255,255,255,.52);
}

.sale-wrap.sale-v2 .transfer-tab:active{
  transform: scale(.99);
}

.sale-wrap.sale-v2 .transfer-tab.is-active{
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 0 0 1px rgba(229,231,235,.72);
}

.sale-wrap.sale-v2 .transfer-tab b{
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(243,244,246,.92);
  color: inherit;
  font-size: 11.5px;
  font-weight: 820;
}

.sale-wrap.sale-v2 .transfer-tab.is-active b{
  background: #F3F4F6;
}

.sale-wrap.sale-v2 .transfer-tab:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 4px rgba(15,38,76,.08);
}

.sale-wrap.sale-v2 .transfer-tabbed-section .transfer-dropdown-list{
  max-height: min(52vh, 520px);
  gap: 10px;
}

.sale-wrap.sale-v2 .transfer-order-card{
  gap: 8px;
  padding: 14px;
}

.sale-wrap.sale-v2 .transfer-order-route-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.sale-wrap.sale-v2 .transfer-order-route{
  color: #111827;
  font-size: 14px;
  font-weight: 820;
  line-height: 1.22;
}

.sale-wrap.sale-v2 .transfer-order-id-row{
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8A94A3;
}

.sale-wrap.sale-v2 .transfer-order-id-row strong{
  color: #6B7280;
  font-size: 12px;
  font-weight: 760;
}

.sale-wrap.sale-v2 .transfer-order-id-row span,
.sale-wrap.sale-v2 .transfer-order-meta{
  color: #9CA3AF;
  font-size: 11.5px;
  font-weight: 620;
}

.sale-wrap.sale-v2 .transfer-status-badge{
  min-height: 25px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.025);
}

.sale-wrap.sale-v2 .transfer-primary-action{
  min-width: 104px;
  padding: 0 16px;
  font-weight: 760;
}

.sale-wrap.sale-v2 .transfer-card-menu summary{
  background: transparent;
  color: #9CA3AF;
}

.sale-wrap.sale-v2 .transfer-dropdown-detail{
  gap: 12px;
  padding: 14px;
  background: #F8F9FB;
}

.sale-wrap.sale-v2 .transfer-detail-card{
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(229,231,235,.66);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17,24,39,.025);
}

.sale-wrap.sale-v2 .transfer-detail-card-hero{
  gap: 8px;
  padding: 16px;
}

.sale-wrap.sale-v2 .transfer-detail-title-row strong{
  font-size: 24px;
  line-height: 1;
}

.sale-wrap.sale-v2 .transfer-detail-status-copy{
  color: #6B7280;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.32;
}

.sale-wrap.sale-v2 .transfer-detail-section-title{
  color: #8A94A3;
  font-size: 11px;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sale-wrap.sale-v2 .transfer-detail-grid{
  gap: 8px;
}

.sale-wrap.sale-v2 .transfer-detail-grid > div{
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.sale-wrap.sale-v2 .transfer-detail-note{
  margin: 0;
}

.sale-wrap.sale-v2 .transfer-detail-footer{
  margin-top: auto;
  padding-top: 2px;
}

.sale-wrap.sale-v2 .transfer-detail-cta{
  width: 100%;
  margin-top: 0;
  font-weight: 780;
  box-shadow: none;
}

@media (max-width: 980px){
  .sale-wrap.sale-v2 .transfer-master-detail{
    grid-template-columns: 1fr;
  }
}

/* STEP 21 - Touch & Windows usability polish */
.sale-wrap.sale-v2{
  --touch-target: 44px;
  --touch-target-lg: 48px;
}

.sale-wrap.sale-v2 .top-pill,
.sale-wrap.sale-v2 .sale-topbar .sync-status,
.sale-wrap.sale-v2 .sale-topbar .notif-bell,
.sale-wrap.sale-v2 .icon-only-pill{
  min-height: var(--touch-target-lg) !important;
  min-width: var(--touch-target-lg) !important;
  touch-action: manipulation;
}

.sale-wrap.sale-v2 .sale-topbar{
  gap: 12px;
}

.sale-wrap.sale-v2 .sale-topbar-actions{
  gap: 10px;
}

.sale-wrap.sale-v2 .sale-topbar{
  margin-bottom: 8px;
  padding: 6px 10px;
}

.sale-wrap.sale-v2 .sale-topbar-main{
  align-items: center;
  gap: 8px;
}

.sale-wrap.sale-v2 .top-identity-card{
  margin-left: auto;
}

.sale-wrap.sale-v2 .transfer-pill-badge,
.sale-wrap.sale-v2 .cart-actions .action-counter{
  min-width: 24px;
  height: 24px;
  font-size: 11.5px;
}

.sale-wrap.sale-v2 .filter-chip,
.sale-wrap.sale-v2 .article-toolbar .sort-switch .pill,
.sale-wrap.sale-v2 .toolbar-quick .pill,
.sale-wrap.sale-v2 .toolbar-filters select,
.sale-wrap.sale-v2 .toolbar-filters .filter-tag,
.sale-wrap.sale-v2 .filter-toolbar-fields select,
.sale-wrap.sale-v2 .filter-toolbar-fields .filter-tag,
.sale-wrap.sale-v2 .cart-head-actions .pill.small,
.sale-wrap.sale-v2 .sale-modal .btn,
.sale-wrap.sale-v2 .sale-modal .pill,
.sale-wrap.sale-v2 .transfer-dropdown-headActions .btn,
.sale-wrap.sale-v2 .transfer-primary-action,
.sale-wrap.sale-v2 .transfer-card-menu-popover button{
  min-height: var(--touch-target) !important;
  touch-action: manipulation;
}

.sale-wrap.sale-v2 .filter-chip,
.sale-wrap.sale-v2 .article-toolbar .sort-switch .pill,
.sale-wrap.sale-v2 .toolbar-quick .pill{
  padding-inline: 14px;
}

.sale-wrap.sale-v2 .sale-modal .icon,
.sale-wrap.sale-v2 .cart-rows .row .icon,
.sale-wrap.sale-v2 .transfer-card-menu summary{
  width: var(--touch-target) !important;
  min-width: var(--touch-target) !important;
  height: var(--touch-target) !important;
  min-height: var(--touch-target) !important;
  touch-action: manipulation;
}

.sale-wrap.sale-v2 .transfer-card-menu-popover{
  padding: 8px;
}

.sale-wrap.sale-v2 .transfer-card-menu-popover button{
  padding-inline: 12px;
  border-radius: 13px;
}

.sale-wrap.sale-v2 .top-pill:active,
.sale-wrap.sale-v2 .sale-topbar .sync-status:active,
.sale-wrap.sale-v2 .sale-topbar .notif-bell:active,
.sale-wrap.sale-v2 .filter-chip:active,
.sale-wrap.sale-v2 .sale-modal .btn:active,
.sale-wrap.sale-v2 .sale-modal .pill:active,
.sale-wrap.sale-v2 .transfer-card-menu summary:active,
.sale-wrap.sale-v2 .transfer-card-menu-popover button:active,
.sale-wrap.sale-v2 .cart-rows .row .icon:active{
  transform: scale(.985);
}

/* STEP 23 - App shell adaptive layout stabilization */
.main-content.route-sale .sale-wrap.sale-v2,
.main-content.route-sale .sale-wrap.sale-v2.sale-ma{
  --cartw: clamp(600px, 50cqw, 920px);
}

.sale-wrap.sale-v2 .article-toolbar{
  container-type: inline-size;
}

.sale-wrap.sale-v2 .toolbar-search-row{
  grid-template-columns: 52px minmax(280px, 1fr) minmax(104px, 116px);
  gap: 10px;
  align-items: center;
}

.sale-wrap.sale-v2 .toolbar-search-row .btn{
  min-height: 60px;
  height: 60px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}

.sale-wrap.sale-v2 .scanner-icon-wrap{
  width: 52px;
  min-width: 52px;
  height: 60px;
}

.sale-wrap.sale-v2 .toolbar-search-row .search{
  min-width: 0;
  height: 60px;
  padding-inline: 18px;
  font-size: clamp(18px, 1.2cqw, 22px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.sale-wrap.sale-v2 .filter-toolbar{
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  align-items: stretch;
}

.sale-wrap.sale-v2 .filter-toolbar-actions{
  flex-wrap: wrap;
  overflow: visible;
  row-gap: 4px;
}

.sale-wrap.sale-v2 .filter-toolbar-fields{
  grid-template-columns: minmax(120px, .9fr) minmax(132px, 1fr) minmax(116px, .8fr);
  min-width: 0;
}

.sale-wrap.sale-v2 .filter-toolbar-fields select,
.sale-wrap.sale-v2 .filter-toolbar-fields .filter-tag{
  width: 100%;
  min-width: 0;
}

.sale-wrap.sale-v2 .filter-toolbar .filter-chip,
.sale-wrap.sale-v2 .filter-toolbar-fields select,
.sale-wrap.sale-v2 .filter-toolbar-fields .filter-tag{
  min-height: 38px !important;
}

.sale-wrap.sale-v2 .cards{
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr));
}

.sale-wrap.sale-v2 .cart-footer{
  gap: 14px;
}

.sale-wrap.sale-v2 .pay-summary{
  display: grid;
  gap: 14px;
}

.sale-wrap.sale-v2 .pay-summary-lines{
  gap: 12px;
}

.sale-wrap.sale-v2 .cart-bottom-bar{
  margin-top: 2px;
  padding-top: 14px;
}

@container (max-width: 1320px){
  .sale-wrap.sale-v2,
  .sale-wrap.sale-v2.sale-ma,
  .sale-wrap.sale-v2.ma-wrap.ma-wide{
    --cartw: 100%;
    padding-right: var(--pad);
  }

  .sale-wrap.sale-v2 .cart-shell{
    position: static;
    width: 100%;
    height: auto;
  }
}

@container (max-width: 860px){
  .sale-wrap.sale-v2 .filter-toolbar{
    grid-template-columns: 1fr;
  }

  .sale-wrap.sale-v2 .filter-toolbar-actions{
    width: 100%;
  }

  .sale-wrap.sale-v2 .filter-toolbar-fields{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container (max-width: 560px){
  .sale-wrap.sale-v2 .toolbar-search-row{
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .sale-wrap.sale-v2 .toolbar-search-row .btn{
    grid-column: 1 / -1;
    width: 100%;
  }

  .sale-wrap.sale-v2 .filter-toolbar-fields{
    grid-template-columns: 1fr;
  }
}

/* STEP 26 - Final sale viewport layout and internal product scrolling */
.main-content.route-sale .sale-wrap.sale-v2,
.main-content.route-sale .sale-wrap.sale-v2.sale-ma{
  height: 100vh;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sale-wrap.sale-v2 .sale-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.sale-wrap.sale-v2 .sale-left{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.sale-wrap.sale-v2 .article-toolbar{
  flex: 0 0 auto;
}

.sale-wrap.sale-v2 .grid{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  scrollbar-gutter: stable;
}

.sale-wrap.sale-v2 .grid::-webkit-scrollbar{
  width: 8px;
}

.sale-wrap.sale-v2 .grid::-webkit-scrollbar-thumb{
  background: rgba(148, 163, 184, .38);
  border-radius: 999px;
}

.sale-wrap.sale-v2 .grid::-webkit-scrollbar-track{
  background: transparent;
}

.sale-wrap.sale-v2 .cards{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.sale-wrap.sale-v2 .card.product-card{
  min-width: 0;
}

.sale-wrap.sale-v2 .toolbar-search-row{
  grid-template-columns: 48px minmax(0, 1fr) 108px;
  padding: 8px;
}

.sale-wrap.sale-v2 .scanner-icon-wrap,
.sale-wrap.sale-v2 .toolbar-search-row .search,
.sale-wrap.sale-v2 .toolbar-search-row .btn{
  height: 54px;
  min-height: 54px;
}

.sale-wrap.sale-v2 .scanner-icon-wrap{
  width: 48px;
  min-width: 48px;
}

.sale-wrap.sale-v2 .toolbar-search-row .search{
  font-size: clamp(17px, 1.08cqw, 20px);
}

.sale-wrap.sale-v2 .toolbar-search-row .btn{
  border-radius: 18px;
}

.sale-wrap.sale-v2 .filter-toolbar{
  gap: 7px;
}

.sale-wrap.sale-v2 .filter-toolbar-actions{
  gap: 5px;
}

.sale-wrap.sale-v2 .filter-toolbar-fields{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sale-wrap.sale-v2 .cart-shell{
  position: fixed;
}

@media (max-width: 1199px){
  .sale-wrap.sale-v2 .cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  .sale-wrap.sale-v2 .cards{
    grid-template-columns: 1fr;
  }
}

@container (min-width: 861px) and (max-width: 1320px){
  .main-content.route-sale .sale-wrap.sale-v2,
  .main-content.route-sale .sale-wrap.sale-v2.sale-ma,
  .main-content.route-sale .sale-wrap.sale-v2.ma-wrap.ma-wide{
    --cartw: clamp(520px, 44cqw, 640px);
    padding-right: calc(var(--cartw) + var(--pad) + var(--cart-gap));
  }

  .main-content.route-sale .sale-wrap.sale-v2 .cart-shell{
    position: fixed;
    right: var(--pad);
    width: var(--cartw);
    height: calc(100vh - var(--topbar-h) - (var(--pad) * 2));
  }
}

@container (max-width: 860px){
  .main-content.route-sale .sale-wrap.sale-v2,
  .main-content.route-sale .sale-wrap.sale-v2.sale-ma,
  .main-content.route-sale .sale-wrap.sale-v2.ma-wrap.ma-wide{
    padding-right: var(--pad);
    overflow-y: auto;
  }

  .main-content.route-sale .sale-wrap.sale-v2 .sale-body{
    overflow: visible;
  }

  .main-content.route-sale .sale-wrap.sale-v2 .cart-shell{
    position: static;
    width: 100%;
    height: auto;
    z-index: auto;
  }
}

/* Transfer workflow redesign */
.phase-orange,
.sale-wrap.sale-v2 .phase-orange{
  background: #fff4e8;
  border-color: #ffd9ae;
  color: #9a4b00;
}

.phase-yellow,
.sale-wrap.sale-v2 .phase-yellow{
  background: #fff9db;
  border-color: #f5df74;
  color: #7a5a00;
}

.phase-purple,
.sale-wrap.sale-v2 .phase-purple{
  background: #f3efff;
  border-color: #d8ccff;
  color: #5b3ab7;
}

.sale-wrap.sale-v2 .transfer-dropdown{
  border-radius: 26px;
  border: 1px solid rgba(17, 24, 39, .08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)),
    #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .18);
}

.sale-wrap.sale-v2 .transfer-dropdown-head{
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.sale-wrap.sale-v2 .transfer-scan-row{
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(29, 78, 216, .18);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.18), transparent 42%),
    linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 28px rgba(15,23,42,.16);
}

.sale-wrap.sale-v2 .transfer-scan-row.is-success{
  border-color: rgba(34, 197, 94, .7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 4px rgba(34,197,94,.14), 0 14px 28px rgba(15,23,42,.16);
}

.sale-wrap.sale-v2 .transfer-scan-row.is-error{
  border-color: rgba(239, 68, 68, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 4px rgba(239,68,68,.14), 0 14px 28px rgba(15,23,42,.16);
}

.sale-wrap.sale-v2 .transfer-scan-row.is-neutral{
  border-color: rgba(168, 85, 247, .58);
}

.sale-wrap.sale-v2 .transfer-scan-icon{
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  color: #dbeafe;
}

.sale-wrap.sale-v2 .transfer-scan-field{
  min-width: 0;
  display: grid;
  gap: 4px;
}

.sale-wrap.sale-v2 .transfer-scan-field label{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
}

.sale-wrap.sale-v2 .transfer-scan-field input{
  height: 38px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.13);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  padding: 0 12px;
  outline: none;
}

.sale-wrap.sale-v2 .transfer-scan-field input::placeholder{
  color: rgba(255,255,255,.5);
}

.sale-wrap.sale-v2 .transfer-scan-field input:focus{
  box-shadow: 0 0 0 3px rgba(96,165,250,.35);
}

.sale-wrap.sale-v2 .transfer-scan-feedback{
  min-height: 16px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.25;
}

.sale-wrap.sale-v2 .transfer-scan-row.is-success .transfer-scan-feedback{
  color: #bbf7d0;
}

.sale-wrap.sale-v2 .transfer-scan-row.is-error .transfer-scan-feedback{
  color: #fecaca;
}

.sale-wrap.sale-v2 .transfer-scan-button{
  min-height: 48px;
  border-radius: 15px;
  border: 0;
  background: #fff;
  color: #0f172a;
  font-weight: 900;
}

.sale-wrap.sale-v2 .transfer-dropdown-list{
  gap: 10px;
}

.sale-wrap.sale-v2 .transfer-order-card{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

.sale-wrap.sale-v2 .transfer-order-card.is-selected{
  border-color: rgba(37, 99, 235, .42);
  box-shadow: 0 0 0 4px rgba(37,99,235,.1), 0 14px 28px rgba(15,23,42,.08);
}

.sale-wrap.sale-v2 .transfer-order-route-row{
  align-items: flex-start;
  gap: 10px;
}

.sale-wrap.sale-v2 .transfer-order-routeBlock{
  min-width: 0;
  display: grid;
  gap: 3px;
}

.sale-wrap.sale-v2 .transfer-order-route{
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 15px;
  font-weight: 900;
  color: #111827;
}

.sale-wrap.sale-v2 .transfer-order-route span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sale-wrap.sale-v2 .transfer-order-route b{
  color: #64748b;
}

.sale-wrap.sale-v2 .transfer-order-doc{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}

.sale-wrap.sale-v2 .transfer-status-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  border-width: 1px;
  border-style: solid;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
}

.sale-wrap.sale-v2 .transfer-status-badge i{
  font-style: normal;
  font-size: 13px;
}

.sale-wrap.sale-v2 .transfer-card-progress,
.sale-wrap.sale-v2 .transfer-detail-miniProgress{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.sale-wrap.sale-v2 .transfer-card-progress{
  margin: 10px 0 9px;
}

.sale-wrap.sale-v2 .transfer-card-progress span,
.sale-wrap.sale-v2 .transfer-detail-miniProgress span{
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
}

.sale-wrap.sale-v2 .transfer-card-progress span.is-done,
.sale-wrap.sale-v2 .transfer-detail-miniProgress span.is-done{
  background: #2563eb;
}

.sale-wrap.sale-v2 .transfer-card-progress span.is-current,
.sale-wrap.sale-v2 .transfer-detail-miniProgress span.is-current{
  background: #111827;
}

.sale-wrap.sale-v2 .transfer-order-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.25;
}

.sale-wrap.sale-v2 .transfer-meta-chip,
.sale-wrap.sale-v2 .transfer-urgent-chip{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-weight: 800;
}

.sale-wrap.sale-v2 .transfer-urgent-chip{
  background: #fff1f2;
  color: #be123c;
}

.sale-wrap.sale-v2 .transfer-primary-action,
.sale-wrap.sale-v2 .transfer-detail-cta{
  border-radius: 999px;
  font-weight: 900;
}

.sale-wrap.sale-v2 .transfer-dropdown-detail{
  gap: 12px;
}

.sale-wrap.sale-v2 .transfer-detail-card{
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

.sale-wrap.sale-v2 .transfer-detail-card-hero{
  background:
    linear-gradient(180deg, rgba(239,246,255,.9), rgba(255,255,255,1)),
    #fff;
}

.sale-wrap.sale-v2 .transfer-detail-kicker{
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sale-wrap.sale-v2 .transfer-detail-title-row{
  align-items: center;
}

.sale-wrap.sale-v2 .transfer-detail-title-row strong{
  font-size: 18px;
}

.sale-wrap.sale-v2 .transfer-detail-barcode{
  display: flex;
  align-items: center;
  min-height: 52px;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 14px;
  color: #0f172a;
  background:
    repeating-linear-gradient(90deg, #111827 0 2px, transparent 2px 5px, #111827 5px 7px, transparent 7px 12px),
    #fff;
  box-shadow: inset 0 0 0 999px rgba(255,255,255,.76);
}

.sale-wrap.sale-v2 .transfer-detail-barcode span{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
}

.transfer-order-modal{
  border-radius: 28px;
  background: #f8fafc;
}

.transfer-order-modal .m-head{
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.transfer-order-modal-grid{
  gap: 16px;
}

.transfer-order-modal-main,
.transfer-order-modal-side{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

.transfer-order-phase{
  border-radius: 20px;
}

.transfer-order-phase strong{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
}

.transfer-order-phase strong i{
  font-style: normal;
}

.transfer-workflow-stepper{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.transfer-workflow-step{
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 74px;
  padding: 10px 6px;
  border-radius: 18px;
  border-width: 1px;
  border-style: solid;
  opacity: .58;
}

.transfer-workflow-step.is-done,
.transfer-workflow-step.is-current{
  opacity: 1;
}

.transfer-workflow-step.is-current{
  box-shadow: 0 0 0 4px rgba(15,23,42,.08);
}

.transfer-workflow-step span{
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  font-weight: 900;
}

.transfer-workflow-step b{
  color: inherit;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
}

.transfer-order-summary{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.transfer-order-summary > div{
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.06);
}

.transfer-order-noteBox{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.06);
  background: #fff;
}

.transfer-order-timeline{
  position: relative;
  margin-top: 14px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
}

.transfer-order-timeline::before{
  content: "";
  position: absolute;
  left: 29px;
  top: 54px;
  bottom: 18px;
  width: 2px;
  background: #e2e8f0;
}

.transfer-order-timeline .transfer-detail-section-title{
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 900;
  color: #111827;
}

.transfer-order-timelineItem{
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 0 0 16px;
  border: 0;
  background: transparent;
}

.transfer-order-timelineItem:last-child{
  padding-bottom: 0;
}

.transfer-order-timelineItem > span{
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

.transfer-order-timelineItem strong{
  color: #111827;
  font-size: 14px;
}

.transfer-order-timelineItem small{
  color: #64748b;
  font-size: 12px;
}

.transfer-order-actionsBar{
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 22%);
}

.workflow-action-pill{
  min-height: 42px;
  border-radius: 999px !important;
  padding-inline: 15px !important;
  font-weight: 900 !important;
}

.workflow-action-pill.action-prepare{ color: #9a4b00; background: #fff4e8; border-color: #ffd9ae; }
.workflow-action-pill.action-ready{ color: #7a5a00; background: #fff9db; border-color: #f5df74; }
.workflow-action-pill.action-ship{ color: #fff; background: #6d5dfc; border-color: #6d5dfc; }
.workflow-action-pill.action-receive{ color: #fff; background: #16a34a; border-color: #16a34a; }
.workflow-action-pill.action-print{ color: #0f172a; background: #eef2ff; border-color: #dbe4ff; }
.workflow-action-pill.action-cancel{ color: #b42318; background: #fff1f2; border-color: #fecdd3; }
.workflow-action-pill.action-restore{ color: #fff; background: #0f172a; border-color: #0f172a; }

.transfer-side-hero{
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(248,250,252,.98), rgba(255,255,255,1)),
    #fff;
  border: 1px solid rgba(15,23,42,.08);
}

.transfer-side-hero > strong{
  color: #111827;
  font-size: 20px;
  line-height: 1.1;
}

.transfer-side-route{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #334155;
  font-weight: 900;
}

.transfer-side-route span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transfer-side-route b{
  color: #94a3b8;
}

.transfer-side-metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.transfer-side-metrics > div{
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: 14px;
  background: #f8fafc;
}

.transfer-side-metrics span{
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.transfer-side-metrics b{
  color: #111827;
  font-size: 18px;
}

.transfer-order-row{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
}

@media (max-width: 900px){
  .sale-wrap.sale-v2 .transfer-dropdown{
    border-radius: 20px;
  }

  .sale-wrap.sale-v2 .transfer-scan-row{
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .sale-wrap.sale-v2 .transfer-scan-button{
    grid-column: 1 / -1;
    width: 100%;
  }

  .transfer-order-summary{
    grid-template-columns: 1fr;
  }

  .transfer-workflow-stepper{
    grid-template-columns: 1fr;
  }

  .transfer-workflow-step{
    grid-template-columns: 32px minmax(0, 1fr);
    place-items: center start;
    min-height: 52px;
  }
}

/* Transfer workflow final polish */
.sale-wrap.sale-v2 .transfer-scan-row{
  grid-template-columns: 72px minmax(0, 1fr) 96px;
  min-height: 132px;
  padding: 20px;
  gap: 16px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 4%, rgba(96,165,250,.42), transparent 34%),
    radial-gradient(circle at 92% 20%, rgba(168,85,247,.32), transparent 34%),
    linear-gradient(135deg, #0b1220, #182132 58%, #111827);
}

.sale-wrap.sale-v2 .transfer-scan-icon{
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 28px rgba(0,0,0,.18);
}

.sale-wrap.sale-v2 .transfer-scan-icon svg{
  width: 34px;
  height: 34px;
}

.sale-wrap.sale-v2 .transfer-scan-title{
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sale-wrap.sale-v2 .transfer-scan-title strong{
  display: block;
  color: #fff;
  font-size: 24px;
  line-height: 1.08;
  font-weight: 950;
}

.sale-wrap.sale-v2 .transfer-scan-title p{
  display: block;
  margin: 0;
  color: #dbeafe;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.sale-wrap.sale-v2 .transfer-scan-field{
  gap: 9px;
}

.sale-wrap.sale-v2 .transfer-scan-field input{
  height: 48px;
  border-radius: 16px;
  background: rgba(255,255,255,.16);
  font-size: 18px;
}

.sale-wrap.sale-v2 .transfer-scan-field input:focus{
  background: rgba(255,255,255,.2);
  box-shadow: 0 0 0 4px rgba(96,165,250,.42), 0 0 40px rgba(96,165,250,.22);
}

.sale-wrap.sale-v2 .transfer-scan-feedback{
  font-size: 13px;
  font-weight: 700;
}

.sale-wrap.sale-v2 .transfer-scan-button{
  min-height: 58px;
  border-radius: 18px;
  font-size: 15px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.sale-wrap.sale-v2 .transfer-dropdown-list{
  gap: 8px;
}

.sale-wrap.sale-v2 .transfer-order-card{
  padding: 11px 12px;
  border-radius: 16px;
}

.sale-wrap.sale-v2 .transfer-order-focusLine{
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-bottom: 7px;
}

.sale-wrap.sale-v2 .transfer-status-dominant{
  min-height: 32px;
  padding: 6px 12px;
  font-size: 13.5px;
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset;
}

.sale-wrap.sale-v2 .transfer-order-customer{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #475569;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
}

.sale-wrap.sale-v2 .transfer-order-route{
  margin-top: 6px;
  font-size: 13.5px;
  color: #1f2937;
  font-weight: 850;
}

.sale-wrap.sale-v2 .transfer-order-doc{
  color: #0f172a;
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: 0;
}

.sale-wrap.sale-v2 .transfer-card-progress{
  margin: 8px 0 7px;
}

.sale-wrap.sale-v2 .transfer-card-progress span{
  height: 5px;
}

.sale-wrap.sale-v2 .transfer-order-meta{
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #64748b;
}

.sale-wrap.sale-v2 .transfer-meta-chip,
.sale-wrap.sale-v2 .transfer-urgent-chip{
  min-height: 22px;
  padding: 3px 7px;
}

.sale-wrap.sale-v2 .transfer-meta-note{
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transfer-order-modal{
  max-height: min(92vh, 980px);
}

.transfer-order-modal-main,
.transfer-order-modal-side{
  border-color: rgba(15,23,42,.06);
  box-shadow: 0 18px 48px rgba(15,23,42,.08);
}

.transfer-order-phase{
  display: grid;
  gap: 6px;
  padding: 15px 16px;
  border-width: 1px;
}

.transfer-order-phase strong{
  font-size: 24px;
  line-height: 1.08;
}

.transfer-order-phase span{
  font-size: 14px;
  font-weight: 800;
}

.transfer-workflow-stepper{
  gap: 10px;
}

.transfer-workflow-step{
  min-height: 76px;
  border-radius: 20px;
  opacity: .46;
}

.transfer-workflow-step.is-current{
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(15,23,42,.08), 0 14px 30px rgba(15,23,42,.1);
}

.transfer-workflow-step.is-current span{
  background: #111827;
  color: #fff;
}

.transfer-workflow-step span{
  width: 34px;
  height: 34px;
}

.transfer-workflow-step b{
  font-size: 13px;
  font-weight: 950;
}

.transfer-order-summary{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.transfer-order-summary > div{
  padding: 8px 10px;
}

.transfer-order-summary > div span{
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  color: #94a3b8;
}

.transfer-order-summary > div b{
  color: #0f172a;
  font-size: 13px;
}

.transfer-order-noteBox{
  margin-top: 12px;
  padding: 12px 14px;
  background: #f8fafc;
}

.transfer-order-timeline{
  margin-top: 12px;
  padding: 15px 16px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,.98)),
    #fff;
}

.transfer-order-timeline::before{
  left: 32px;
  top: 56px;
  bottom: 24px;
  width: 3px;
  background: linear-gradient(180deg, #2563eb, #7c3aed, #16a34a);
  opacity: .42;
}

.transfer-order-timeline .transfer-detail-section-title{
  font-size: 18px;
}

.transfer-order-timelineItem{
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 13px;
  padding-bottom: 15px;
}

.transfer-order-timelineItem > span{
  width: 32px;
  height: 32px;
  font-size: 13px;
  box-shadow: 0 0 0 4px #fff;
}

.transfer-order-timelineItem.is-current > span{
  color: #fff;
}

.transfer-order-timelineItem.is-pending{
  opacity: .58;
}

.transfer-order-timelineItem.is-current.phase-blue > span{ background: #234ea0; border-color: #234ea0; }
.transfer-order-timelineItem.is-current.phase-orange > span{ background: #9a4b00; border-color: #9a4b00; }
.transfer-order-timelineItem.is-current.phase-yellow > span{ background: #7a5a00; border-color: #7a5a00; }
.transfer-order-timelineItem.is-current.phase-purple > span{ background: #5b3ab7; border-color: #5b3ab7; }
.transfer-order-timelineItem.is-current.phase-green > span{ background: #1c7a3b; border-color: #1c7a3b; }
.transfer-order-timelineItem.is-current.phase-red > span{ background: #a33333; border-color: #a33333; }

.transfer-order-timelineItem strong{
  font-size: 15px;
  font-weight: 900;
}

.transfer-order-timelineItem small{
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
}

.transfer-order-actionsBar{
  gap: 10px;
  padding-top: 12px;
}

.workflow-action-pill{
  min-height: 46px;
  padding-inline: 17px !important;
  font-size: 14px !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
}

.transfer-side-hero{
  border-radius: 24px;
  padding: 15px;
  box-shadow: 0 14px 30px rgba(15,23,42,.06);
}

.transfer-side-hero > .transfer-status-badge{
  justify-self: start;
  min-height: 34px;
  padding-inline: 12px;
}

.transfer-order-sideHead{
  align-items: center;
  margin: 4px 0 10px;
}

.transfer-order-sideHead strong{
  color: #0f172a;
  font-size: 17px;
}

.transfer-order-rows{
  gap: 10px;
}

.transfer-order-row{
  padding: 12px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #fff, #f9fbff),
    #fff;
  border-color: rgba(15,23,42,.07);
  box-shadow: 0 8px 20px rgba(15,23,42,.05);
}

.transfer-order-rowTop{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.transfer-row-qty{
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 38px;
  padding-inline: 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, #111827, #334155);
  color: #fff;
  font-size: 16px;
  font-weight: 950;
}

.transfer-order-rowTop strong{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
}

.transfer-order-rowDesc{
  margin-top: 9px;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 750;
}

.transfer-order-rowMeta{
  margin-top: 8px;
}

.transfer-order-rowMeta span{
  display: inline-flex;
  max-width: 100%;
  min-height: 26px;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 900px){
  .sale-wrap.sale-v2 .transfer-scan-row{
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 0;
    padding: 14px;
  }

  .sale-wrap.sale-v2 .transfer-scan-icon{
    width: 58px;
    height: 58px;
    border-radius: 20px;
  }

  .sale-wrap.sale-v2 .transfer-scan-title strong{
    font-size: 19px;
  }

  .transfer-order-summary{
    grid-template-columns: 1fr;
  }

  .transfer-workflow-step{
    min-height: 58px;
  }
}

/* Transfer detail modal premium polish */
.sale-modal:has(.transfer-order-modal){
  background: rgba(15, 23, 42, .34);
  backdrop-filter: blur(10px);
}

.transfer-order-modal{
  width: min(1180px, calc(100vw - 28px));
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 30px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  box-shadow: 0 30px 90px rgba(15, 23, 42, .24);
  overflow: hidden;
}

.transfer-order-modal .transfer-modal-head{
  min-height: 72px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(15, 23, 42, .07);
  background: rgba(255,255,255,.86);
}

.transfer-modal-title{
  display: grid;
  gap: 3px;
  min-width: 0;
}

.transfer-modal-title > span{
  color: #64748b;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 850;
  text-transform: uppercase;
}

.transfer-modal-title > b{
  color: #0f172a;
  font-size: 22px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.transfer-modal-title > div{
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.transfer-order-modal .m-head .icon{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
}

.transfer-order-modal-grid{
  grid-template-columns: minmax(0, 1.36fr) minmax(310px, .74fr);
  gap: 18px;
  padding: 18px;
}

.transfer-order-modal-main,
.transfer-order-modal-side{
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 38px rgba(15, 23, 42, .07);
}

.transfer-order-modal-main{
  padding: 16px;
}

.transfer-order-modal-side{
  padding: 15px;
}

.transfer-state-card{
  display: grid;
  gap: 5px;
  min-height: 78px;
  padding: 15px 16px;
  border: 1px solid rgba(22, 163, 74, .18);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
}

.transfer-state-card.phase-green{
  background: linear-gradient(180deg, #f0fdf4, #ffffff);
  color: #166534;
}

.transfer-state-card strong{
  display: flex;
  align-items: center;
  gap: 10px;
  color: currentColor;
  font-size: 24px;
  line-height: 1.05;
  font-weight: 900;
}

.transfer-state-card strong i{
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  font-style: normal;
  box-shadow: 0 1px 4px rgba(15,23,42,.08);
}

.transfer-state-card span{
  color: #475569;
  font-size: 13px;
  font-weight: 750;
}

.transfer-label-preview{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .92fr);
  gap: 18px;
  align-items: stretch;
  margin: 14px 0;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.8);
}

.transfer-label-copy{
  display: grid;
  align-content: center;
  gap: 9px;
  min-width: 0;
  padding: 4px 2px;
}

.transfer-label-copy span{
  color: #2563eb;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: .04em;
}

.transfer-label-copy strong{
  color: #0f172a;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
  font-weight: 920;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.transfer-label-copy p{
  margin: 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 750;
}

.transfer-label-barcodeBox{
  display: grid;
  grid-template-rows: minmax(94px, 1fr) auto;
  gap: 10px;
  align-content: center;
  min-width: 0;
  min-height: 154px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.transfer-label-bars{
  display: block;
  min-height: 96px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  background:
    repeating-linear-gradient(90deg, #020617 0 3px, transparent 3px 8px, #020617 8px 13px, transparent 13px 21px),
    #fff;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 14px #fff;
}

.transfer-label-barcodeBox small{
  color: #475569;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

.transfer-workflow-stepper{
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 12px;
}

.transfer-workflow-step{
  min-height: 64px;
  padding: 9px 8px;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 18px;
  background: #fff !important;
  color: #64748b !important;
  opacity: 1;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

.transfer-workflow-step span{
  width: 28px;
  height: 28px;
  background: #f1f5f9;
  color: #64748b;
}

.transfer-workflow-step b{
  color: inherit;
  font-size: 12px;
  font-weight: 850;
}

.transfer-workflow-step.is-done{
  border-color: rgba(37,99,235,.16) !important;
  color: #334155 !important;
  background: linear-gradient(180deg, #fff, #f8fbff) !important;
}

.transfer-workflow-step.is-done span{
  background: #eff6ff;
  color: #2563eb;
}

.transfer-workflow-step.is-current{
  transform: none;
  border-color: rgba(15, 23, 42, .20) !important;
  color: #0f172a !important;
  box-shadow: 0 0 0 4px rgba(15,23,42,.06), 0 10px 24px rgba(15,23,42,.08);
}

.transfer-workflow-step.is-current span{
  background: #0f172a;
  color: #fff;
}

.transfer-order-summary{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.transfer-order-summary > div{
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 58px;
  padding: 10px 11px;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 16px;
  background: #f8fafc;
}

.transfer-order-summary > div span{
  color: #64748b;
  font-size: 10px;
  line-height: 1.1;
  font-weight: 850;
  text-transform: uppercase;
}

.transfer-order-summary > div b{
  min-width: 0;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.18;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.transfer-order-noteBox{
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 16px;
  background: #fff;
}

.transfer-order-noteBox span{
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.transfer-order-noteBox div{
  color: #334155;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 650;
}

.transfer-order-timeline{
  margin-top: 12px;
  padding: 15px 16px;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 22px;
  background: #fff;
}

.transfer-order-timeline::before{
  left: 31px;
  top: 55px;
  bottom: 24px;
  width: 2px;
  background: #dbe3ee;
  opacity: 1;
}

.transfer-order-timeline .transfer-detail-section-title{
  margin-bottom: 14px;
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
}

.transfer-order-timelineItem{
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 14px;
}

.transfer-order-timelineItem > span{
  width: 30px;
  height: 30px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #64748b;
  box-shadow: 0 0 0 4px #fff;
}

.transfer-order-timelineItem.is-done:not(.is-current) > span{
  border-color: #94a3b8;
  background: #f8fafc;
  color: #334155;
}

.transfer-order-timelineItem.is-current{
  opacity: 1;
}

.transfer-order-timelineItem.is-current > span{
  color: #fff;
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(37,99,235,.10);
}

.transfer-order-timelineItem.is-pending{
  opacity: .62;
}

.transfer-order-timelineItem strong{
  color: #0f172a;
  font-size: 14px;
  font-weight: 820;
}

.transfer-order-timelineItem small{
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
}

.transfer-order-actionsBar{
  position: sticky;
  bottom: -16px;
  z-index: 2;
  align-items: center;
  gap: 8px;
  margin: 12px -16px -16px;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
}

.workflow-action-pill{
  min-height: 44px;
  border-radius: 999px !important;
  box-shadow: 0 5px 14px rgba(15,23,42,.07);
}

.transfer-side-hero{
  gap: 10px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 22px;
  background: #fff;
  box-shadow: none;
}

.transfer-side-hero > strong{
  color: #0f172a;
  font-size: 20px;
  font-weight: 900;
}

.transfer-side-metrics > div{
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.05);
}

.transfer-order-sideHead{
  margin: 2px 0 10px;
}

.transfer-order-rows{
  gap: 9px;
}

.transfer-order-row{
  padding: 12px;
  border: 1px solid rgba(15,23,42,.07);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15,23,42,.05);
}

.transfer-order-rowTop{
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
}

.transfer-row-qty{
  min-width: 48px;
  height: 38px;
  border-radius: 14px;
  background: #0f172a;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.transfer-order-rowTop strong{
  color: #0f172a;
  font-size: 15px;
  font-weight: 850;
}

.transfer-order-rowDesc{
  margin-top: 8px;
  color: #334155;
  font-size: 14px;
  line-height: 1.28;
  font-weight: 700;
}

.transfer-order-rowMeta span{
  min-height: 25px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 900px){
  .transfer-order-modal{
    width: min(100vw - 18px, 720px);
    border-radius: 24px;
  }

  .transfer-order-modal-grid{
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .transfer-label-preview{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 15px;
  }

  .transfer-label-barcodeBox{
    min-height: 132px;
  }

  .transfer-workflow-stepper,
  .transfer-order-summary{
    grid-template-columns: 1fr;
  }

  .transfer-order-actionsBar{
    margin-inline: -16px;
  }
}
.sync-status{
  display:flex;
  align-items:center;
  gap:5px;
  min-height:24px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.01em;
  color:#ecfdf5;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(15,23,42,0.22);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.sync-status .sync-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 2px rgba(34,197,94,.16);
}
.sync-status.is-ok{
  background:rgba(34,197,94,0.16);
  border-color:rgba(34,197,94,0.24);
}
.sync-status.is-error{
  background:rgba(239,68,68,0.16);
  border-color:rgba(239,68,68,0.24);
  color:#fef2f2;
}
.sync-status.is-error .sync-dot{
  background:#ef4444;
  box-shadow:0 0 0 2px rgba(239,68,68,.14);
}
.sync-status .sync-label{
  white-space:nowrap;
}

/* STEP 21 - Touch & Windows usability polish */
.sync-status{
  min-height: 42px;
  padding: 0 13px;
  gap: 8px;
  touch-action: manipulation;
}

.sync-status .sync-dot{
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
}

.sync-status .sync-icon-image{
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.notif-wrapper {
  position: relative;
  overflow: visible;
}

.notif-portalLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 16000;
}

.notif-bell {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  position: relative;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.notif-bell.is-order {
  border-color: rgba(74, 222, 128, 0.7);
  background: rgba(34, 197, 94, 0.12);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.notif-bell.is-price {
  border-color: rgba(248, 113, 113, 0.78);
  background: rgba(239, 68, 68, 0.14);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

.notif-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 700;
}

.notif-badge.is-order {
  background: #16a34a;
}

.notif-badge.is-price,
.notif-badge.is-generic {
  background: #ef4444;
}

.notif-miniBadge {
  position: absolute;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  padding: 0 5px;
  border: 2px solid #1e293b;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.notif-miniBadge.is-order {
  left: -7px;
  bottom: -5px;
  background: #16a34a;
}

.notif-miniBadge.is-price {
  right: -8px;
  bottom: -11px;
  background: #dc2626;
}

.notif-bell.pulse-order,
.notif-bell.pulse-price {
  animation: notif-bell-pulse 1.2s ease-in-out 2;
}

.notif-bell.pulse-price {
  animation-name: notif-bell-pulse-price;
}

.notif-panel {
  position: fixed;
  left: 12px;
  top: 72px;
  width: min(360px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: 360px;
  overflow-y: auto;
  background: #fff;
  color: #111827;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15,23,42,0.35);
  padding: 12px;
  z-index: 16001;
  pointer-events: auto;
}

.notif-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notif-group {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px;
  background: #f8fafc;
}

.notif-groupHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 2px;
}

.notif-groupHead strong {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #334155;
}

.notif-groupHead span {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #0f172a;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.notif-panel li {
  padding: 0;
  background: transparent;
  border: 0;
}

.notif-item {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 10px;
  background: #f9fafb;
  text-align: left;
  cursor: pointer;
}

.notif-item:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.notif-item:focus-visible {
  outline: 2px solid rgba(225,6,0,.35);
  outline-offset: 2px;
}

.notif-item.static {
  cursor: default;
}

.notif-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.notif-row p {
  margin: 4px 0 0;
  color: #4b5563;
  font-size: 13px;
}

.notif-row .muted {
  font-size: 12px;
  color: #94a3b8;
}

.notif-empty {
  text-align: center;
  color: #6b7280;
  padding: 20px 0;
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.notif-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #0f172a;
  color: #fff;
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(15,23,42,0.35);
  width: 260px;
  cursor: pointer;
  z-index: 9999;
}

.notif-toast p {
  margin: 4px 0 0;
  font-size: 14px;
}

@keyframes notif-bell-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
  35% { transform: scale(1.08) rotate(-6deg); box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  70% { transform: scale(1.03) rotate(6deg); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes notif-bell-pulse-price {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.38); }
  30% { transform: scale(1.1) rotate(-7deg); box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
  68% { transform: scale(1.04) rotate(7deg); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Enterprise notification panel refinement */
.notif-bell{
  border-color: rgba(229,231,235,.9);
  background: #fff;
  color: #111827;
  box-shadow: none;
}

.notif-bell:hover{
  background: #F8F9FB;
  border-color: rgba(209,213,219,.92);
}

.notif-bell.is-order,
.notif-bell.is-price{
  background: #fff;
  box-shadow: none;
}

.notif-bell.is-order{
  border-color: rgba(21,128,61,.22);
}

.notif-bell.is-price{
  border-color: rgba(185,28,28,.22);
}

.notif-badge,
.notif-badge.is-order,
.notif-badge.is-price,
.notif-badge.is-generic{
  background: #111827;
  border: 2px solid #fff;
  font-size: 10.5px;
  font-weight: 820;
}

.notif-miniBadge{
  border-color: #fff;
  box-shadow: 0 1px 3px rgba(17,24,39,.12);
}

.notif-miniBadge.is-order{
  background: #15803D;
}

.notif-miniBadge.is-price{
  background: #B91C1C;
}

.notif-panel{
  width: min(420px, calc(100vw - 24px));
  max-height: min(70vh, 620px);
  padding: 14px;
  border: 1px solid rgba(229,231,235,.72);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(17,24,39,.16);
}

.notif-head{
  margin-bottom: 12px;
  padding: 2px 2px 0;
}

.notif-head strong{
  color: #111827;
  font-size: 17px;
  font-weight: 850;
}

.notif-head .btn.small{
  height: 32px;
  border: 1px solid rgba(229,231,235,.78);
  border-radius: 12px;
  background: #fff;
  color: #6B7280;
  font-size: 12px;
  font-weight: 720;
}

.notif-groups{
  gap: 14px;
}

.notif-group{
  padding: 10px;
  border-color: rgba(229,231,235,.56);
  border-radius: 18px;
  background: #F8F9FB;
}

.notif-groupHead{
  margin-bottom: 10px;
  padding: 0 2px;
}

.notif-groupHead strong{
  color: #6B7280;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .045em;
}

.notif-groupHead span{
  background: #fff;
  color: #6B7280;
  box-shadow: 0 0 0 1px rgba(229,231,235,.7);
  font-size: 11.5px;
}

.notif-panel ul{
  gap: 8px;
}

.notif-item{
  padding: 12px;
  border-color: rgba(229,231,235,.68);
  border-radius: 16px;
  background: #fff;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .14s ease;
}

.notif-item:hover{
  transform: translateY(-1px);
  background: #FCFCFD;
  border-color: rgba(209,213,219,.92);
  box-shadow: 0 10px 24px rgba(17,24,39,.055);
}

.notif-item:focus-visible{
  outline: 0;
  border-color: rgba(15,38,76,.26);
  box-shadow: 0 0 0 4px rgba(15,38,76,.08);
}

.notif-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.notif-row strong{
  color: #111827;
  font-size: 13.5px;
  font-weight: 820;
  line-height: 1.2;
}

.notif-row p{
  margin-top: 6px;
  color: #6B7280;
  font-size: 12.5px;
  line-height: 1.35;
}

.notif-row .muted,
.notif-time{
  color: #9CA3AF;
  font-size: 11.5px;
  font-weight: 680;
}

.notif-empty{
  min-height: 160px;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px dashed rgba(209,213,219,.8);
  border-radius: 18px;
  background: #F8F9FB;
  color: #8A94A3;
  font-size: 13px;
  font-weight: 650;
}

.notif-toast{
  background: #111827;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(17,24,39,.22);
}

/* STEP 21 - Touch & Windows usability polish */
.notif-bell{
  min-width: 48px;
  min-height: 48px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.notif-bell:active{
  transform: scale(.985);
}

.notif-badge,
.notif-badge.is-order,
.notif-badge.is-price,
.notif-badge.is-generic{
  min-width: 23px;
  height: 23px;
  padding: 0 7px;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notif-miniBadge{
  min-width: 20px;
  height: 20px;
}

.notif-row{
  min-height: 58px;
  padding: 12px;
}
.article-code-link,
.article-code-text{
  font-size: 12px;
  color: #334155;
}

.article-code-link{
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-code-link:hover{
  color: #0f172a;
}

.article-edit-modal{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.article-edit-modal__panel{
  width: min(1200px, 96vw);
  height: min(90vh, 980px);
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
}

.article-edit-modal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.article-edit-modal__title{
  font-weight: 600;
  color: #0f172a;
}

.article-edit-modal__body{
  overflow: auto;
  flex: 1;
}

.article-edit-loading{
  padding: 16px;
  color: #475569;
  font-size: 14px;
}

body.article-edit-modal-open{
  overflow: hidden;
}
.dymoTransferLabel {
  width: 54mm;
  height: 25mm;
  padding: 1.4mm 1.8mm 1.2mm;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto 1fr;
  row-gap: 0.45mm;
  background: #fff;
  color: #000;
  border: 1px dashed #cbd5e1;
  border-radius: 4px;
  overflow: hidden;
  break-inside: avoid;
  page-break-inside: avoid;
}

.dymoTransferLabel__kicker {
  font-size: 4.9pt;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.dymoTransferLabel__destination {
  font-size: 11.8pt;
  line-height: 0.95;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dymoTransferLabel__customer {
  font-size: 8.8pt;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dymoTransferLabel__customer.is-discrete {
  font-size: 8pt;
  font-weight: 600;
  color: #4b5563;
  letter-spacing: 0.02em;
}

.dymoTransferLabel__sender,
.dymoTransferLabel__reference,
.dymoTransferLabel__meta,
.dymoTransferLabel__articles {
  font-size: 6.7pt;
  line-height: 1;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dymoTransferLabel__meta {
  display: flex;
  justify-content: space-between;
  gap: 2mm;
}

.dymoTransferLabel__articles {
  color: #374151;
}

.dymoTransferLabel__barcode {
  align-self: end;
  font-size: 7pt;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media print {
  .dymoTransferLabel {
    border: 0;
    border-radius: 0;
  }
}
.app-alert-stack {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 21000;
  display: grid;
  gap: 10px;
  width: min(460px, calc(100vw - 28px));
  pointer-events: none;
}

.app-alert-toast {
  pointer-events: auto;
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  color: #0f172a;
  backdrop-filter: blur(10px);
}

.app-alert-toast-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.app-alert-toast-head strong {
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.2;
}

.app-alert-toast-close {
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.app-alert-toast-message {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: #1e293b;
  font: inherit;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .app-alert-stack {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
  }
}
.global-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 22000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(245, 245, 247, 0.58);
  backdrop-filter: blur(18px);
  animation: globalDialogFade 150ms ease both;
}

.global-dialog-card {
  width: min(460px, calc(100vw - 40px));
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid rgba(229, 231, 235, 0.92);
  background: #ffffff;
  color: #111827;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
  animation: globalDialogCardIn 160ms ease both;
}

.global-dialog-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.global-dialog-icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 850;
  background: #eef2ff;
  color: #10233f;
  box-shadow: inset 0 0 0 1px rgba(16, 35, 63, 0.08);
}

.global-dialog-card--success .global-dialog-icon {
  background: #ecfdf5;
  color: #047857;
}

.global-dialog-card--warning .global-dialog-icon {
  background: #fffbeb;
  color: #b45309;
}

.global-dialog-card--danger .global-dialog-icon {
  background: #fef2f2;
  color: #dc2626;
}

.global-dialog-kicker {
  margin-bottom: 3px;
  color: #6b7280;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.global-dialog-card h2 {
  margin: 0;
  color: #111827;
  font-size: 23px;
  line-height: 1.08;
  font-weight: 860;
  letter-spacing: 0;
}

.global-dialog-message {
  margin: 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.global-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.global-dialog-btn {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
  font-weight: 780;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.global-dialog-btn:hover {
  background: #f8fafc;
}

.global-dialog-btn:active {
  transform: scale(0.985);
}

.global-dialog-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(16, 35, 63, 0.12);
}

.global-dialog-btn--primary {
  border-color: #10233f;
  background: #10233f;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(16, 35, 63, 0.18);
}

.global-dialog-btn--primary:hover {
  background: #0b1a30;
  border-color: #0b1a30;
}

.global-dialog-btn--danger {
  border-color: #dc2626;
  background: #dc2626;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.16);
}

.global-dialog-btn--danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

.global-dialog-btn--ghost {
  color: #4b5563;
}

@keyframes globalDialogFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes globalDialogCardIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 560px) {
  .global-dialog-overlay {
    align-items: flex-end;
    padding: 14px;
  }

  .global-dialog-card {
    width: 100%;
    border-radius: 24px;
  }

  .global-dialog-actions {
    flex-direction: column-reverse;
  }

  .global-dialog-btn {
    width: 100%;
  }
}
/* Variabili e reset di base */
:root {
  --app-bg: #f5f5f7;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --border-color: #e5e7eb;
  --text-color: #0f172a;
  --muted-color: #64748b;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --primary-soft: #eef2ff;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #d97706;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.12);
  --shadow-md: 0 16px 40px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.06);
  color-scheme: light;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #root {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: none;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--app-bg);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}

a {
  color: var(--primary-strong);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Wrapper generale dell'app */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  background: var(--app-bg);
}

.app-container.has-shell {
  flex-direction: row;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
}

/* Contenuto principale sotto la navbar */
.main-content {
  flex: 1;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 24px clamp(16px, 3vw, 32px);
  background: var(--app-bg);
  container-type: inline-size;
}

.main-content.no-navbar {
  padding: 0;
}

.main-content.route-sale {
  padding: 0;
  overflow: hidden;
  position: relative;
  z-index: 130;
}

.app-container.has-shell .main-content {
  height: 100vh;
  height: 100dvh;
}

.app-container.web-manager-shell {
  max-width: 100vw;
}

.app-container.web-manager-shell .main-content {
  overflow-x: hidden;
  overflow-y: auto;
}

.app-container.has-shell .main-content > * {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 760px) {
  .app-container.has-shell:not(.web-manager-shell) {
    min-width: 980px;
  }
}
 .mf-statusBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.mf-statusBadge--ok{
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}

.mf-statusBadge--warn{
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}

.mf-statusBadge--legacy{
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

.mf-statusBadge--neutral{
  background: #e2e8f0;
  color: #334155;
  border-color: #cbd5e1;
}

.mf-statusPanel{
  display: grid;
  gap: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 14px;
  background: #f8fafc;
}

.mf-statusPanelHead{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.mf-statusExpected{
  color: #475569;
  font-size: 13px;
}

.mf-statusPanel--ok{
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.mf-statusPanel--warn{
  background: #fef2f2;
  border-color: #fecaca;
}

.mf-statusPanel--legacy{
  background: #fffbeb;
  border-color: #fde68a;
}

.mf-statusPanel--neutral{
  background: #f8fafc;
  border-color: #e2e8f0;
}

/* STEP 21 - Global touch ergonomics for Windows retail monitors */
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
summary,
a {
  touch-action: manipulation;
}

button,
[role="button"],
summary {
  -webkit-tap-highlight-color: rgba(15, 23, 42, 0.08);
}

button:active:not(:disabled),
[role="button"]:active,
summary:active {
  transition-duration: 120ms;
}
.vs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vs-group {
  border: 1px solid #e6e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.vs-title {
  width: 100%;
  text-align: left;
  background: #fafafa;
  border: 0;
  border-bottom: 1px solid #eee;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
}

.vs-pill {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.vs-pill:hover {
  background: #f3f4f6;
}

.vs-pill.active {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}

.vs-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  border: 1px solid #e5e7eb;
  vertical-align: middle;
}
body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
}

.loading-screen {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #4a4a4a;
}

.app-header {
  background: #f1f1f1;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #ccc;
}

.app-title {
  font-size: 20px;
  font-weight: bold;
}

.app-nav button {
  margin: 0 5px;
  padding: 6px 12px;
  background-color: #007bff;
  border: none;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.app-nav button:hover {
  background-color: #0056b3;
}

.container {
  padding-top: 70px;
  max-width: 800px;
  margin: 40px auto;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

input[type="text"], input[type="number"] {
  padding: 8px;
  margin: 8px 4px;
  width: calc(25% - 12px);
  border: 1px solid #ccc;
  border-radius: 4px;
}

button.salva,
.btn-salva {
  background-color: #28a745;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button.salva:hover,
.btn-salva:hover {
  background-color: #218838;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

.articoli-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

.articoli-lista {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.articolo-card {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.articolo-info h3 {
  margin: 0 0 0.5rem;
}

.articolo-info p {
  margin: 0.2rem 0;
}

.btn-elimina {
  background-color: #e53935;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-elimina:hover {
  background-color: #c62828;
}

.crea-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
}

.crea-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.crea-form label {
  display: flex;
  flex-direction: column;
  font-weight: 500;
}

.crea-form input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.messaggio {
  margin-top: 1rem;
  font-weight: bold;
  color: green;
}

.settings-menu {
  margin-bottom: 1rem;
  padding: 1rem;
  background: #f0f0f0;
  border-radius: 8px;
}

.shortcut-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.shortcut-grid button {
  padding: 1rem 1.5rem;
  font-size: 1rem;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}

.shortcut-grid button:hover {
  background-color: #0056b3;
}

.home-container {
  padding: 2rem;
  text-align: center;
}

.home-buttons button {
  margin: 10px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
}

.shortcut-list {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.shortcut-list li {
  background: #e0e0e0;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: 6px;
  font-size: 1.1rem;
}

.nav-button {
  background: none;
  border: none;
  margin-right: 12px;
  padding: 8px 12px;
  font-size: 16px;
  color: #555;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.nav-button:hover {
  background: #f0f0f0;
}

.nav-button.active {
  background: #007bff;
  color: white;
}
.main-content {
  padding-top: 56px; /* o l'altezza effettiva della navbar */
}
.pagina {
  padding: 20px;
  font-family: sans-serif;
}

.form-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

input, select {
  padding: 5px;
  min-width: 150px;
}

button {
  padding: 5px 10px;
  cursor: pointer;
}

.variante-box {
  border: 1px solid #ccc;
  padding: 10px;
  background: #f9f9f9;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Design system condiviso per uniformare le pagine */

.loading-screen {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--muted-color);
}

.page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-narrow { max-width: 880px; }
.page-wide { max-width: 1280px; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.page-header h1,
.page-title {
  margin: 0;
  font-size: 28px;
  color: var(--text-color);
}

.page-subtitle {
  margin: 4px 0 0;
  color: var(--muted-color);
  font-size: 14px;
}

.page-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 12px;
  color: var(--muted-color);
  margin: 0 0 4px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-md);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.card-title {
  margin: 0;
  font-size: 20px;
  color: var(--text-color);
}

.card-subtitle {
  margin: 4px 0 0;
  color: var(--muted-color);
  font-size: 14px;
}

.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { gap: 10px; }

.toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.toolbar .toolbar-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

button,
.btn {
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text-color);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, opacity 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

button:hover,
.btn:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

button:disabled,
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn.primary {
  background: linear-gradient(120deg, var(--primary), var(--primary-strong));
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.28);
}

.btn.ghost {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-color);
}

.btn.danger {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(220, 38, 38, 0.06);
}

.btn.muted {
  background: var(--surface-muted);
  border-color: var(--border-color);
  color: var(--muted-color);
}

.btn.small {
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 8px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border-color);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--text-color);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

label.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--text-color);
}

.field span.label,
label.field > span:first-child {
  color: var(--muted-color);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
}

.field .hint,
.field .field-hint {
  color: var(--muted-color);
  font-size: 12px;
}

.form-grid {
  display: grid;
  gap: 14px;
}

.form-grid.form-grid--two {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.field--full {
  grid-column: 1 / -1;
}

.form-grid.form-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.form-actions,
.actions {
  margin-top: 6px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.table-wrap,
.tbl-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
}

.tbl th,
.tbl td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
}

.tbl thead th {
  background: var(--surface-muted);
  color: var(--muted-color);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tbl tr:nth-child(even) td { background: #fafafa; }
.tbl tr:hover td { background: #f5f7fb; }

.ta-right { text-align: right; }

.tag,
.pill,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--surface-muted);
  color: var(--text-color);
  font-size: 13px;
  line-height: 1;
}

.badge { padding: 4px 8px; font-size: 12px; }
.badge.muted { background: var(--surface-muted); color: var(--muted-color); }
.muted { color: var(--muted-color); }

.surface {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--surface-muted);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted-color);
  border: 1px solid var(--border-color);
  display: inline-block;
}

.hint { color: var(--muted-color); font-size: 13px; }
.state,
.empty-state {
  padding: 22px;
  text-align: center;
  color: var(--muted-color);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius);
  background: var(--surface);
}

.alert {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--surface-muted);
  color: var(--text-color);
}

.alert.error { background: #fee2e2; border-color: #fecdd3; color: #991b1b; }
.alert.success { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
.alert.info { background: #e0f2fe; border-color: #bae6fd; color: #0ea5e9; }

.kv-list {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  display: grid;
  gap: 6px;
}

.kv-list li { color: var(--text-color); }
.kv-list strong { color: var(--muted-color); margin-right: 6px; }

.table-note { font-size: 13px; color: var(--muted-color); margin-top: 8px; }

.code-block {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  background: #0f172a;
  color: #e2e8f0;
  padding: 12px;
  border-radius: 12px;
  overflow: auto;
}

.page-divider {
  height: 1px;
  background: var(--border-color);
  border: 0;
}

.page-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sede-picker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.sede-picker label {
  font-weight: 600;
  color: var(--muted-color);
}

.sede-picker select {
  min-width: 180px;
  width: auto;
}

.checkbox-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--surface-muted);
  font-size: 14px;
}

.checkbox-pill input { width: 16px; height: 16px; }

.table-section {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.table-section .tbl { border-radius: var(--radius); }

.table-section .tbl th:first-child,
.table-section .tbl td:first-child { padding-left: 16px; }

.table-section .tbl th:last-child,
.table-section .tbl td:last-child { padding-right: 16px; }