/* Detail modal */
.overlay{
  position:fixed; inset:0; z-index:800;
  background:rgba(0,0,0,.92); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.overlay.open{ opacity:1; pointer-events:all; }
.modal-box{
  background:var(--black-card); border:1px solid rgba(255,255,255,.2);
  border-radius:8px; width:100%; max-width:500px; max-height:92vh;
  overflow-y:auto; transform:scale(.95); transition:transform .3s;
}
.overlay.open .modal-box{ transform:scale(1); }
.modal-head{
  background:linear-gradient(135deg,#000,#111);
  padding:1.5rem; display:flex; gap:1rem; align-items:center;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.mh-icon{
  font-size:2.5rem; flex-shrink:0; width:60px; height:60px;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px; overflow:hidden; background:#000;
}
.mh-icon img, .mh-icon video{ width:100%; height:100%; object-fit:cover; }
.mh-liga{
  font-family:'Barlow Condensed',sans-serif; font-size:.7rem;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:.2rem;
}
.mh-name{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:1.2rem; color:var(--white); margin-bottom:.25rem;
}
.mh-price{
  font-family:'Bebas Neue',sans-serif; font-size:1.5rem; color:var(--accent);
  text-shadow:0 0 15px var(--gold-neon-glow);
}
.modal-body{ padding:1.5rem; }
.modal-label{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.78rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--accent); margin-bottom:.6rem;
  text-shadow:0 0 10px var(--gold-neon-glow);
}
.custom-opts{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.25rem; }
.copt{
  border:1px solid rgba(255,255,255,.15); border-radius:5px;
  padding:.75rem 1rem; cursor:pointer; transition:all .2s;
  background:rgba(255,255,255,.02);
}
.copt:hover{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.04); }
.copt.sel{ border-color:var(--accent); background:rgba(255,255,255,.08); box-shadow:0 0 15px var(--gold-neon-glow); }
.copt-row{ display:flex; align-items:center; justify-content:space-between; }
.copt-label{
  display:flex; align-items:center; gap:.6rem;
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.9rem; color:var(--white);
}
.copt-label input[type=radio]{ accent-color:var(--accent); width:14px; height:14px; }
.copt-price{ font-family:'Bebas Neue',sans-serif; font-size:1rem; color:var(--accent); text-shadow:0 0 10px var(--gold-neon-glow); }
.copt-desc{ font-size:.75rem; color:var(--text-muted); margin-top:.2rem; margin-left:1.4rem; }
.copt-fields{ margin-top:.6rem; padding-left:1.4rem; display:flex; flex-direction:column; gap:.4rem; }
.field-ctrl{
  width:100%; padding:.55rem .8rem;
  border:1px solid rgba(255,255,255,.2); border-radius:4px;
  font-family:'Barlow',sans-serif; font-size:.88rem;
  color:var(--white); background:rgba(20,20,20,.95);
  outline:none; transition:border-color .2s;
  color-scheme: dark; /* faz <select>/options herdarem aparência escura */
}
.field-ctrl:focus{ border-color:var(--accent); box-shadow:0 0 15px var(--gold-neon-glow); }
.field-ctrl::placeholder{ color:rgba(255,255,255,.25); }
/* Opções do <select> ficam invisíveis em Chrome/Safari sem isto: */
.field-ctrl option,
select.field-ctrl option,
select option{
  background:#1a1a1a;
  color:#F5F5F0;
}
select{ color-scheme: dark; }
.qty-row{ display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.qty-ctrl{ display:flex; align-items:center; gap:.6rem; }
.qty-ctrl button{
  background:rgba(255,255,255,.1); color:var(--accent);
  border:1px solid rgba(255,255,255,.25);
  width:30px; height:30px; border-radius:4px; font-size:1.1rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-weight:700; transition:background .2s;
  box-shadow:0 0 10px var(--gold-neon-glow);
}
.qty-ctrl button:hover{ background:rgba(255,255,255,.2); box-shadow:0 0 15px var(--gold-neon-glow); }
.qty-ctrl span{
  font-family:'Bebas Neue',sans-serif; font-size:1.3rem;
  color:var(--white); min-width:28px; text-align:center;
}
.subtotal-box{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
  border-radius:4px; padding:.65rem 1rem;
  display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;
}
.subtotal-box span:first-child{
  font-family:'Barlow Condensed',sans-serif; font-size:.75rem;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted);
}
.subtotal-box span:last-child{
  font-family:'Bebas Neue',sans-serif; font-size:1.35rem; color:var(--accent);
  text-shadow:0 0 15px var(--gold-neon-glow);
}
.modal-gallery{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.mg-thumb{
  width:56px; height:56px; border-radius:4px; overflow:hidden;
  border:1px solid rgba(255,255,255,.15); cursor:pointer; flex-shrink:0;
}
.mg-thumb img, .mg-thumb video{ width:100%; height:100%; object-fit:cover; }
.modal-foot{ display:flex; gap:.75rem; padding:0 1.5rem 1.5rem; }
.btn-cancel{
  flex:1; padding:.8rem; background:rgba(255,255,255,.05);
  color:var(--silver); font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:.85rem; letter-spacing:1.5px; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.1); border-radius:4px; cursor:pointer;
}
.btn-cancel:hover{ background:rgba(255,255,255,.1); }
.btn-addcart{
  flex:2; padding:.8rem; background:var(--accent); color:var(--black);
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.85rem;
  letter-spacing:1.5px; text-transform:uppercase;
  border:none; border-radius:4px; cursor:pointer;
  box-shadow:0 0 20px var(--gold-neon-glow);
}
.btn-addcart:hover{ background:var(--accent-light); box-shadow:0 0 30px var(--gold-neon-glow); }

/* Auth modal */
.auth-overlay{
  position:fixed; inset:0; z-index:600;
  background:rgba(0,0,0,.92); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.auth-overlay.open{ opacity:1; pointer-events:all; }
.auth-box{
  background:var(--black-card); border:1px solid rgba(255,255,255,.2);
  border-radius:8px; padding:2rem; width:100%; max-width:380px;
  position:relative;
}
.auth-x{
  position:absolute; top:.75rem; right:.75rem;
  background:none; border:none; color:var(--silver);
  font-size:1.4rem; cursor:pointer;
}
.auth-box h2{
  font-family:'Bebas Neue',sans-serif; font-size:1.6rem; color:var(--accent);
  letter-spacing:2px; margin-bottom:.5rem;
  text-shadow:0 0 15px var(--gold-neon-glow);
}
.auth-box p{ font-size:.85rem; color:var(--silver); margin-bottom:1.5rem; }
.auth-inp{
  width:100%; padding:.7rem .9rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.2);
  border-radius:4px; color:var(--white); font-family:'Barlow',sans-serif;
  font-size:.95rem; margin-bottom:.75rem; outline:none;
}
.auth-inp:focus{ border-color:var(--accent); box-shadow:0 0 15px var(--gold-neon-glow); }
.auth-err{
  display:none; color:var(--danger); font-size:.82rem; margin-bottom:.75rem;
}
.auth-err.show{ display:block; }
.btn-auth{
  width:100%; background:var(--accent); color:var(--black);
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:1rem; letter-spacing:1.5px; text-transform:uppercase;
  padding:.85rem; border:none; border-radius:4px; cursor:pointer;
  box-shadow:0 0 25px var(--gold-neon-glow);
}

@media (max-width: 768px){
  .overlay{ padding:.5rem; }
  .modal-box{ max-height:96vh; }
  .modal-head{ padding:1rem; gap:.7rem; }
  .mh-icon{ width:48px; height:48px; font-size:1.8rem; }
  .mh-name{ font-size:1.05rem; }
  .mh-price{ font-size:1.3rem; }
  .modal-body{ padding:1rem; }
  .copt{ padding:.65rem .8rem; }
  .copt-label{ font-size:.85rem; }
  .copt-price{ font-size:.95rem; }
  .copt-desc{ font-size:.7rem; }
  .modal-foot{ padding:0 1rem 1rem; gap:.5rem; }
  .btn-cancel, .btn-addcart{ padding:.85rem; font-size:.8rem; }
  .field-ctrl{ font-size:16px; /* impede zoom no iOS ao focar */ padding:.6rem .75rem; }
  .auth-box{ padding:1.5rem 1.2rem; }
  .auth-inp{ font-size:16px; }
}