/* Festive accent bars & buttons */
.nav{
  position:sticky; top:0; z-index:50; background:#000; border-bottom:3px solid var(--mx-fuchsia);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.6rem 4vw;
  flex-wrap:wrap; /* allow wrap on small screens */
}
.nav .brand{display:flex;align-items:center;gap:.5rem;font-weight:800;color:var(--mx-white)}
.nav .brand img{height:38px;width:auto}
.nav nav{display:flex;flex-wrap:wrap;gap:.25rem}
.nav nav a{color:var(--mx-sand);margin:0 .2rem;padding:.55rem .7rem;border-radius:10px}
.nav nav a:hover{background:linear-gradient(90deg,#128a49,#fff,#e10600);color:#000}
.socials{display:flex;gap:.5rem}
.socials a{font-weight:700;margin-left:.0}

@media (max-width:640px){
  .nav{gap:.5rem}
  .nav .brand img{height:30px}
  .nav .brand span{display:none} /* keep just the logo on tiny screens */
  .nav nav{width:100%;justify-content:center}
  .socials{order:3;width:100%;justify-content:center;margin-top:.2rem}
}

.footer-inner{
  border-top:3px solid var(--mx-gold); padding:1rem 4vw; text-align:center; background:#0b0b0b;
  background-image:linear-gradient(90deg,#128a49 0 33%,#ffffff 33% 66%,#e10600 66% 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;
}
.hint{font-weight:400;opacity:.8}

.hero{display:grid;place-items:center;gap:.8rem;padding:2.2rem 0}
.logo-hero{width:min(380px,80vw);filter:drop-shadow(0 6px 24px rgba(255,255,255,.08))}
.hero-title{font-size:clamp(1.6rem,5vw,3rem)}
.hero-sub{color:var(--mx-sand);opacity:.9;margin-bottom:1rem;text-align:center}
.about{background:#0b0b0b;border:1px solid #1f1f1f;border-radius:16px;padding:1rem 1.2rem}

.btn{display:inline-block;padding:.7rem 1rem;border-radius:12px;border:1px solid #2b2b2b;background:#121212;line-height:1}
.btn:hover{transform:translateY(-1px)}
.btn.small{padding:.45rem .7rem;font-size:.95rem}
.btn-accent{background:linear-gradient(90deg,var(--mx-gold),var(--mx-coral));color:#000;font-weight:700}

@media (max-width:640px){
  .btn{padding:.85rem 1.05rem}
}

.badge{background:var(--mx-fuchsia);color:#fff;border-radius:999px;padding:.1rem .45rem;margin-left:.35rem}
.card{background:#0b0b0b;border:1px solid #1f1f1f;border-radius:16px;overflow:hidden}
.card-body{padding:.8rem}
.price{color:var(--mx-gold);font-weight:700}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
@media (max-width:480px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
}

.empty{text-align:center;opacity:.8}
.product-view{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:800px){ .product-view{grid-template-columns:1fr;gap:14px} }

.form-grid{display:grid;gap:.6rem}
.form-grid input,.form-grid textarea, select{
  background:#0b0b0b;border:1px solid #2a2a2a;border-radius:10px;padding:.7rem;color:var(--mx-white)
}

/* Prevent iOS zoom on focus by ensuring 16px+ font-size */
@media (max-width:640px){
  .form-grid input,
  .form-grid textarea,
  select{
    font-size:16px;      /* key line for iOS Safari */
    line-height:1.25;
  }
}

/* Extra safeguard specifically for iOS WebKit */
@supports (-webkit-touch-callout: none) {
  .form-grid input,
  .form-grid textarea,
  select{
    font-size:16px;
  }
}

.divider{border:none;border-top:1px solid #222;margin:1rem 0}
.totals{display:flex;flex-direction:column;gap:.2rem;margin:.6rem 0}
.checkout .actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center}
/* keep .hidden as-is */
.modal.hidden{display:none}
.modal-card{background:#0b0b0b;border:1px solid #1f1f1f;border-radius:16px;width:min(960px,94vw);padding:1rem}
.modal-close{float:right;background:transparent;border:none;color:#aaa;font-size:1.6rem;cursor:pointer}
#admin-table table{width:100%;border-collapse:collapse}
#admin-table th,#admin-table td{border-bottom:1px solid #1f1f1f;padding:.5rem;text-align:left}
#variant-list > div{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:.4rem;margin:.3rem 0}

/* Age gate sizing from before */
#age-gate .modal-card{ max-width: 400px; }

/* NEW — ensure age prompt is always on top */
#age-gate{ z-index: 9999; }
#age-gate.modal{ z-index: 9999; } /* in case it's using .modal */

/* Cart row becomes stacked on mobile */
@media (max-width:640px){
  .cart-row{grid-template-columns:70px 1fr;grid-template-rows:auto auto;align-items:center}
  .cart-row .price{grid-column:2/3;justify-self:end}
}

/* --- Product sections (always expanded) --- */
.section-panel{
  margin-top:1rem;
  background:#0b0b0b;
  border:1px solid #1f1f1f;
  border-radius:16px;
  padding:.8rem 1rem;
}
.section-panel h3{
  margin:.2rem 0 .6rem 0;
  font-size:1rem;
  letter-spacing:.5px;
}

.spec-list{
  list-style:none;
  margin:0; padding:0;
  display:grid; gap:.35rem;
}
.spec-list li{
  display:flex; gap:.5rem; align-items:flex-start;
}
.spec-key{ min-width:120px; color:#fff; font-weight:700 }
.spec-val{ color:var(--mx-sand) }

.video-wrap{
  position:relative; padding-top:56.25%;
  border-radius:12px; overflow:hidden;
}
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100% }

.details-block{ display:grid; gap:.35rem }

@media (max-width:640px){
  .spec-key{ min-width:100px }
}