@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=DM+Sans:wght@300;400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#16161a;
  --bg2:#1e1e24;
  --bg3:#252530;
  --border:rgba(255,255,255,0.07);
  --border2:rgba(255,255,255,0.12);
  --gold:#b8975a;
  --gold-light:#d4b07a;
  --gold-dim:rgba(184,151,90,0.1);
  --gold-dim2:rgba(184,151,90,0.18);
  --text:#e2ddd6;
  --text-muted:#8a8480;
  --text-dim:#4e4b48;
  --success:#3a9d6e;
  --danger:#c0392b;
  --radius:5px;--radius-lg:10px;
  --font:'DM Sans',sans-serif;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --shadow:0 2px 12px rgba(0,0,0,0.3);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.4);
  --transition:.18s ease;
}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--gold-light)}
img{max-width:100%;display:block}

.container{max-width:1100px;margin:0 auto;padding:0 1.5rem}

/* Topbar */
.topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 1.5rem;height:52px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.topbar-logo{font-family:var(--font-display);font-size:1.2rem;font-weight:600;color:var(--text)}
.topbar-logo span{color:var(--gold)}
.topbar-nav{display:flex;gap:.75rem;align-items:center}
.topbar-nav a{font-size:.78rem;color:var(--text-muted);font-weight:500;padding:.3rem .65rem;border-radius:var(--radius);transition:all var(--transition)}
.topbar-nav a:hover,.topbar-nav a.active{color:var(--gold);background:var(--gold-dim)}
.topbar-user{font-size:.75rem;color:var(--text-muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.48rem 1.1rem;border:1px solid transparent;border-radius:var(--radius);font-family:var(--font);font-size:.8rem;font-weight:500;cursor:pointer;transition:all var(--transition);text-decoration:none;line-height:1.4}
.btn-primary{background:var(--gold);color:#111;border-color:var(--gold)}
.btn-primary:hover{background:var(--gold-light);border-color:var(--gold-light);color:#111;transform:translateY(-1px);box-shadow:0 4px 16px rgba(184,151,90,0.2)}
.btn-outline{background:transparent;color:var(--gold);border-color:var(--gold)}
.btn-outline:hover{background:var(--gold-dim)}
.btn-ghost{background:transparent;color:var(--text-muted);border-color:var(--border2)}
.btn-ghost:hover{background:var(--bg3);color:var(--text);border-color:rgba(255,255,255,0.2)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{opacity:.85}
.btn-sm{padding:.28rem .7rem;font-size:.74rem}
.btn-lg{padding:.62rem 1.5rem;font-size:.88rem}
.btn-full{width:100%;justify-content:center}
.btn:disabled{opacity:.4;pointer-events:none}

/* Forms */
.form-group{margin-bottom:.95rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem}
label{display:block;font-size:.7rem;font-weight:600;color:var(--text-muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.07em}
label .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-dim);font-size:.72rem}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],select,textarea{
  width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);
  color:var(--text);font-family:var(--font);font-size:.85rem;padding:.5rem .8rem;
  transition:border-color var(--transition),box-shadow var(--transition);outline:none;appearance:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,151,90,0.12)}
input::placeholder{color:var(--text-dim)}
textarea{min-height:80px;resize:vertical}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%238a8480' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;padding-right:2rem}
.hint{font-size:.72rem;color:var(--text-dim);margin-top:.25rem}

/* Alerts */
.alert{padding:.65rem .9rem;border-radius:var(--radius);border:1px solid;font-size:.82rem;margin-bottom:.9rem;display:flex;align-items:flex-start;gap:.5rem}
.alert-ok{background:rgba(58,157,110,0.1);border-color:rgba(58,157,110,0.3);color:#5fbd91}
.alert-err{background:rgba(192,57,43,0.1);border-color:rgba(192,57,43,0.3);color:#e57060}
.alert-info{background:var(--gold-dim);border-color:rgba(184,151,90,0.25);color:var(--gold-light)}

/* AUTH — centered on screen with two-column layout for register */
.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1rem;
  background:var(--bg);
  background-image:radial-gradient(ellipse at 25% 60%,rgba(184,151,90,0.05) 0%,transparent 55%);
}
.auth-box{
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:var(--radius-lg);
  padding:2rem 2.25rem;
  width:100%;
  max-width:460px;
  box-shadow:var(--shadow-lg);
}
/* Register uses wider box */
.auth-box-wide{max-width:580px}

.auth-logo{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:600;
  text-align:center;
  margin-bottom:1.5rem;
  color:var(--text);
  letter-spacing:.03em;
}
.auth-logo span{color:var(--gold)}
.auth-title{font-size:.95rem;font-weight:600;margin-bottom:.2rem;color:var(--text)}
.auth-sub{font-size:.8rem;color:var(--text-muted);margin-bottom:1.4rem}
.auth-sep{text-align:center;color:var(--text-dim);font-size:.75rem;margin:.85rem 0;position:relative}
.auth-sep::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border)}
.auth-sep span{background:var(--bg2);padding:0 .75rem;position:relative}
.auth-foot{text-align:center;font-size:.78rem;color:var(--text-muted);margin-top:.9rem}

/* Products */
.page-header{padding:1.25rem 0 .9rem;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.page-title{font-family:var(--font-display);font-size:1.6rem;font-weight:400;color:var(--text)}
.page-sub{font-size:.78rem;color:var(--text-muted);margin-top:.1rem}
.filter-bar{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.1rem;align-items:center}
.filter-bar input,.filter-bar select{width:auto;flex:1;min-width:160px;max-width:230px}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(192px,1fr));gap:1rem}
.pcard{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);display:flex;flex-direction:column}
.pcard:hover{border-color:rgba(184,151,90,0.35);transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,0.3)}
.pcard-img{aspect-ratio:4/3;overflow:hidden;background:var(--bg3)}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.pcard:hover .pcard-img img{transform:scale(1.04)}
.pcard-no-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:1.75rem}
.pcard-body{padding:.8rem;flex:1;display:flex;flex-direction:column}
.pcard-brand{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gold);margin-bottom:.2rem}
.pcard-name{font-size:.86rem;font-weight:400;line-height:1.35;margin-bottom:.3rem;color:var(--text);flex:1}
.pcard-sku{font-size:.69rem;color:var(--text-dim);margin-bottom:.55rem}
.pcard-foot{display:flex;justify-content:space-between;align-items:center;padding-top:.55rem;border-top:1px solid var(--border)}
.pcard-price{font-size:.9rem;font-weight:600;color:var(--gold)}
.stock-in{font-size:.66rem;font-weight:600;color:#5fbd91;background:rgba(58,157,110,0.12);padding:.15rem .45rem;border-radius:3px}
.stock-out{font-size:.66rem;font-weight:600;color:#e57060;background:rgba(192,57,43,0.1);padding:.15rem .45rem;border-radius:3px}
.empty{text-align:center;padding:3rem;color:var(--text-muted)}
.empty-icon{font-size:2rem;margin-bottom:.5rem}

/* Modal */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .2s}
.overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);max-width:640px;width:100%;max-height:88vh;overflow-y:auto;transform:translateY(12px);transition:transform .2s;box-shadow:0 24px 64px rgba(0,0,0,0.5)}
.overlay.open .modal{transform:translateY(0)}
.modal-head{padding:1.1rem 1.4rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start}
.modal-body{padding:1.4rem}
.modal-close{background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--text-muted);line-height:1;padding:.2rem;transition:color var(--transition)}
.modal-close:hover{color:var(--text)}
.modal-grid{display:grid;grid-template-columns:200px 1fr;gap:1.25rem;align-items:start}
.modal-img{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.modal-brand{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--gold);margin-bottom:.25rem}
.modal-price{font-size:1.4rem;font-weight:600;color:var(--gold);margin:.5rem 0}
.modal-desc{font-size:.82rem;color:var(--text-muted);line-height:1.65}

/* Pagination */
.pag{display:flex;gap:.35rem;justify-content:center;margin-top:1.75rem}
.pn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border2);border-radius:var(--radius);font-size:.78rem;color:var(--text-muted);transition:all var(--transition)}
.pn:hover,.pn.active{border-color:var(--gold);color:var(--gold);background:var(--gold-dim)}

/* Badges */
.badge{display:inline-block;font-size:.67rem;padding:.18rem .5rem;border-radius:3px;font-weight:600}
.badge-ok{background:rgba(58,157,110,0.12);color:#5fbd91}
.badge-err{background:rgba(192,57,43,0.1);color:#e57060}
.badge-info{background:var(--gold-dim2);color:var(--gold-light)}
.badge-muted{background:rgba(255,255,255,0.05);color:var(--text-muted)}

/* Misc */
.sep{border:none;border-top:1px solid var(--border);margin:.9rem 0}
.text-muted{color:var(--text-muted)}.text-gold{color:var(--gold)}
.mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.5rem}
.mb1{margin-bottom:.5rem}.mb2{margin-bottom:1rem}
.flex{display:flex}.gap1{gap:.5rem}.gap2{gap:1rem}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.hidden{display:none!important}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.fade{animation:fadeIn .25s ease}

@media(max-width:640px){
  .form-row,.form-row-3{grid-template-columns:1fr}
  .auth-box,.auth-box-wide{padding:1.5rem 1.25rem}
  .grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:.75rem}
  .modal-grid{grid-template-columns:1fr}
  .filter-bar input,.filter-bar select{max-width:100%}
}

/* ============================================================
   RESPONSIVE CLIENTE — full mobile support
   ============================================================ */
@media (max-width: 768px) {
  .topbar { padding: 0 1rem; height: 48px; }
  .topbar-logo { font-size: 1rem; }
  .topbar-user { display: none; }
  .topbar-nav a { font-size: .72rem; padding: .25rem .4rem; }
  .container { padding: 0 1rem; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(155px,1fr)); gap: .75rem; }
  .filter-bar { gap: .4rem; }
  .filter-bar input, .filter-bar select { min-width: 100%; max-width: 100%; }
  .page-title { font-size: 1.1rem; }
  .modal-grid { grid-template-columns: 1fr; }
  .auth-box, .auth-box-wide { padding: 1.5rem 1.25rem; max-width: 100%; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; gap: .75rem; }
  .pcard-name { font-size: .82rem; }
}

@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .auth-page { padding: 1rem .75rem; align-items: flex-start; padding-top: 1.5rem; }
  .pcard-body { padding: .6rem; }
  .pcard-brand { font-size: .62rem; }
  .pcard-name { font-size: .78rem; }
  .btn-lg { padding: .55rem 1.25rem; font-size: .84rem; }
}

@media (max-width: 360px) {
  .grid { grid-template-columns: 1fr; }
}

/* Dark mode cliente */
:root{--dm-bg:#16161a;--dm-bg2:#1e1e24;--dm-bg3:#252530;--dm-border:rgba(255,255,255,0.1);--dm-text:#e2ddd6;--dm-muted:#8a8480;}
body.dark{background:var(--dm-bg);color:var(--dm-text);}
body.dark .auth-box{background:var(--dm-bg2);border-color:var(--dm-border);}
body.dark .auth-page{background:var(--dm-bg);}
body.dark .auth-title{color:var(--dm-text);}
body.dark .auth-sub{color:var(--dm-muted);}
body.dark label{color:var(--dm-muted);}
body.dark input[type=text],body.dark input[type=email],body.dark input[type=password],body.dark input[type=tel],body.dark select,body.dark textarea{background:var(--dm-bg3);border-color:var(--dm-border);color:var(--dm-text);}
body.dark input::placeholder{color:#4e4b48;}
body.dark .auth-foot,body.dark .hint{color:var(--dm-muted);}
body.dark .sep{border-color:var(--dm-border);}
body.dark .topbar{background:var(--dm-bg2);border-color:var(--dm-border);}
body.dark .topbar-logo{color:var(--dm-text);}
body.dark .pcard{background:var(--dm-bg2);border-color:rgba(255,255,255,0.07);}
body.dark .pcard-name{color:var(--dm-text);}
body.dark .pcard-foot{border-color:rgba(255,255,255,0.07);}
body.dark .pcard-img{background:var(--dm-bg3);}
body.dark .filter-bar input,body.dark .filter-bar select{background:var(--dm-bg3);border-color:var(--dm-border);color:var(--dm-text);}
body.dark .page-sub{color:var(--dm-muted);}
body.dark .overlay{background:rgba(0,0,0,.7);}
body.dark .modal{background:var(--dm-bg2);border-color:var(--dm-border);}
body.dark .modal-head{border-color:var(--dm-border);}
body.dark .modal-desc{color:var(--dm-muted);}
body.dark .auth-sep::before{background:var(--dm-border);}
body.dark .auth-sep span{background:var(--dm-bg2);}

.dm-toggle-float{
  position:fixed;bottom:24px;right:24px;z-index:200;
  width:44px;height:44px;border-radius:50%;
  background:var(--accent,#b8975a);color:#fff;
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  transition:all .2s;font-size:1.1rem;
}
.dm-toggle-float:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(0,0,0,.3);}
body.dark .dm-toggle-float{background:#818cf8;}


/* ============================================================
   LIGHT MODE OVERRIDE (dark è il default, light è l'override)
   ============================================================ */
body.light {
  --bg:        #f5f4f2;
  --bg2:       #ffffff;
  --bg3:       #f0ece6;
  --border:    rgba(0,0,0,0.1);
  --border2:   rgba(0,0,0,0.18);
  --gold:      #8b6535;
  --gold-light:#a07840;
  --gold-dim:  rgba(139,101,53,0.1);
  --gold-dim2: rgba(139,101,53,0.18);
  --text:      #1a1a1a;
  --text-muted:#6b6560;
  --text-dim:  #a09890;
  background: var(--bg);
  color: var(--text);
}
body.light .auth-page { background: var(--bg); background-image: none; }
body.light .auth-box {
  background: var(--bg2);
  border-color: var(--border2);
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
body.light .auth-sep span { background: var(--bg2); }
body.light .auth-sep::before { background: var(--border); }
body.light .auth-title { color: var(--text); }
body.light .auth-sub, body.light .auth-foot, body.light .hint { color: var(--text-muted); }
body.light label { color: var(--text-muted); }
body.light input[type=text], body.light input[type=email],
body.light input[type=password], body.light input[type=tel],
body.light select, body.light textarea {
  background: var(--bg2);
  border-color: var(--border2);
  color: var(--text);
}
body.light input::placeholder { color: var(--text-dim); }
body.light .topbar {
  background: var(--bg2);
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
body.light .topbar-logo { color: var(--text); }
body.light .topbar-nav a { color: var(--text-muted); }
body.light .topbar-nav a:hover, body.light .topbar-nav a.active {
  color: var(--gold);
  background: var(--gold-dim);
}
body.light .pcard {
  background: var(--bg2);
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
body.light .pcard:hover { border-color: rgba(139,101,53,.35); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
body.light .pcard-name { color: var(--text); }
body.light .pcard-foot { border-color: var(--border); }
body.light .pcard-img { background: var(--bg3); }
body.light .pcard-no-img { color: var(--text-dim); }
body.light .filter-bar input, body.light .filter-bar select {
  background: var(--bg2);
  border-color: var(--border2);
  color: var(--text);
}
body.light .page-sub { color: var(--text-muted); }
body.light .overlay { background: rgba(0,0,0,.5); }
body.light .modal { background: var(--bg2); border-color: var(--border2); }
body.light .modal-head { border-color: var(--border); }
body.light .modal-desc { color: var(--text-muted); }
body.light .sep { border-color: var(--border); }
body.light .btn-primary { background: var(--gold); border-color: var(--gold); color: #fff; }
body.light .btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); }
body.light .btn-ghost { border-color: var(--border2); color: var(--text-muted); }
body.light .btn-ghost:hover { background: var(--bg3); color: var(--text); }
body.light .topbar-user { color: var(--text-muted); }
body.light .page-title { color: var(--text); }
body.light .empty { color: var(--text-muted); }
body.light .pn { border-color: var(--border2); color: var(--text-muted); }
body.light .pn:hover, body.light .pn.active { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
body.light .badge-ok { background: rgba(39,174,96,.12); color: #2d8a28; }
body.light .badge-err { background: rgba(192,57,43,.1); color: #c0002a; }
body.light .alert-ok { background: #f0faf4; border-color: #b2dfcb; color: #2d8a28; }
body.light .alert-err { background: #fdf3f3; border-color: #e9a8a8; color: #c0002a; }
body.light .alert-info { background: var(--gold-dim); border-color: rgba(139,101,53,.25); color: var(--gold); }

/* ============================================================
   RESPONSIVE — Login, Register, Verify
   ============================================================ */
@media(max-width:600px){
  .auth-page {
    padding: 1.5rem .9rem;
    align-items: flex-start;
    padding-top: 2rem;
    min-height: 100vh;
  }
  .auth-box {
    padding: 1.5rem 1.1rem;
    max-width: 100%;
    border-radius: 10px;
  }
  .auth-logo img { max-width: 140px; }
  .auth-title { font-size: 1.2rem; }
  .auth-box-wide { padding: 1.5rem 1rem; }
  .form-row { grid-template-columns: 1fr !important; gap: .65rem; }
  .form-row-3 { grid-template-columns: 1fr !important; gap: .6rem; }
  .btn-full { padding: .65rem 1rem; font-size: .9rem; }
  .alert-ok, .alert-err, .alert-info { font-size: .82rem; padding: .65rem .9rem; }
  input[type=text],input[type=email],input[type=password],
  input[type=tel],select,textarea { padding: .55rem .8rem; font-size: .88rem; }
  label { font-size: .76rem; }
}

/* Order success mobile */
@media(max-width:600px){
  .co-page { padding: calc(68px + 1rem) .9rem 2rem; }
  div[style*="max-width:580px"] { padding: 0 .9rem !important; }
  div[style*="max-width:580px"] h1 { font-size: 1.5rem; }
}