/* ===== AJF Crackers — design tokens ===== */
:root{
  --black: #0a0a0e;
  --black-2: #131319;
  --black-3: #1b1b22;
  --gold-1: #f9e79f;
  --gold-2: #d4af37;
  --gold-3: #9c6b0a;
  --gold-grad: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 100%);
  --spark-1: #ff3d6e;
  --spark-2: #ff8a3d;
  --spark-3: #7b2ff7;
  --spark-4: #2dd4ff;
  --spark-grad: linear-gradient(90deg, var(--spark-1), var(--spark-2), var(--spark-3), var(--spark-4));
  --text: #f2ede1;
  --text-muted: #a89f8c;
  --border: rgba(212,175,55,0.18);
  --radius: 14px;
  --shadow-gold: 0 8px 30px rgba(212,175,55,0.12);
  --font-display: 'Cinzel', serif;
  --font-body: 'Work Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 70px;
}
h1,h2,h3{ font-family: var(--font-display); font-weight:600; letter-spacing:.01em; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; }
input, textarea{ font-family: inherit; }

/* ===== Header ===== */
.site-header{
  position: sticky; top:0; z-index: 40;
  background: rgba(10,10,14,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  max-width: 1180px; margin:0 auto; padding: 10px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{ width:44px; height:44px; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{
  font-family: var(--font-display); font-size:1.15rem; font-weight:700;
  background: var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-tag{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }

.cart-btn{
  display:flex; align-items:center; gap:8px;
  background: var(--black-3); border:1px solid var(--border); color:var(--text);
  padding: 9px 16px; border-radius: 999px; font-size:.9rem; font-weight:600;
  transition: border-color .2s, transform .15s;
}
.cart-btn:hover{ border-color: var(--gold-2); transform: translateY(-1px); }
.cart-count{
  background: var(--gold-grad); color:#1a1400; font-family:var(--font-mono);
  font-size:.72rem; font-weight:700; min-width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding: 0 5px;
}

/* ===== Hero ===== */
.hero{
  position:relative; overflow:hidden;
  padding: 56px 20px 40px;
  text-align:center;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(212,175,55,0.16), transparent 60%),
    var(--black);
}
.hero-sparks{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 15% 30%, var(--gold-1) 0%, transparent 60%),
    radial-gradient(2px 2px at 82% 20%, var(--spark-4) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 60%, var(--spark-1) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 75%, var(--gold-2) 0%, transparent 60%),
    radial-gradient(2px 2px at 92% 70%, var(--spark-3) 0%, transparent 60%);
  animation: twinkle 3.5s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:.5; } 50%{ opacity:1; }
}
.hero-inner{ position:relative; max-width:640px; margin:0 auto; }
.hero-logo{ width:120px; height:120px; object-fit:contain; margin:0 auto 18px; }
.hero h1{
  font-size: clamp(1.7rem, 4vw, 2.6rem); margin:0 0 12px;
  background: var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ color: var(--text-muted); font-size:.98rem; line-height:1.6; margin:0 auto; max-width:480px; }

.spark-divider{ display:flex; justify-content:center; margin-top:26px; }
.spark-divider span{
  position:relative; width:180px; height:2px; background: var(--spark-grad); border-radius:2px;
}
.spark-divider span::before{
  content:'✦'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color: var(--gold-1); font-size:1rem; background: var(--black); padding:0 8px;
}

/* ===== Category nav ===== */
.cat-nav{
  position: sticky; top:65px; z-index:30;
  display:flex; gap:8px; overflow-x:auto;
  padding: 12px 20px; background: var(--black);
  border-bottom:1px solid var(--border);
  scrollbar-width:none;
}
.cat-nav::-webkit-scrollbar{ display:none; }
.cat-chip{
  flex:none; background: var(--black-2); border:1px solid var(--border); color:var(--text-muted);
  padding:7px 16px; border-radius:999px; font-size:.85rem; font-weight:600; white-space:nowrap;
  transition: all .15s;
}
.cat-chip:hover{ color:var(--text); border-color: var(--gold-2); }
.cat-chip.active{ background: var(--gold-grad); color:#1a1400; border-color:transparent; }

/* ===== Catalog ===== */
.catalog-wrap{ max-width:1180px; margin:0 auto; padding: 28px 20px 60px; }
.empty-state{ text-align:center; padding: 60px 20px; color: var(--text-muted); }
.empty-state p{ margin:4px 0; }
.empty-sub{ font-size:.85rem; }

.product-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.product-card{
  background: var(--black-2); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.product-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-gold); border-color: var(--gold-2); }
.product-img{
  height:150px; background: var(--black-3);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.product-img img{ width:100%; height:100%; object-fit:cover; }
.product-img .ph{ font-size:2rem; color: var(--gold-3); }
.product-body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-cat{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color: var(--spark-2); font-weight:600; }
.product-name{ font-size:.98rem; font-weight:600; color:var(--text); line-height:1.3; }
.product-unit{ font-size:.78rem; color:var(--text-muted); }
.product-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:8px; }
.product-price{ font-family: var(--font-mono); font-weight:600; color: var(--gold-1); font-size:1rem; }
.stock-out{ font-size:.72rem; color:#e05a5a; font-weight:600; }

.qty-control{ display:flex; align-items:center; gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.qty-control button{ background: var(--black-3); color: var(--text); border:none; width:28px; height:28px; font-size:1rem; }
.qty-control button:hover{ background: var(--gold-3); color:#fff; }
.qty-control span{ width:28px; text-align:center; font-family: var(--font-mono); font-size:.85rem; }
.add-btn{
  background: transparent; border:1px solid var(--gold-2); color: var(--gold-1);
  padding:6px 14px; border-radius:8px; font-size:.82rem; font-weight:700;
  transition: background .15s, color .15s;
}
.add-btn:hover{ background: var(--gold-grad); color:#1a1400; }

/* ===== Footer ===== */
.site-footer{ text-align:center; padding:24px 20px 40px; color: var(--text-muted); font-size:.8rem; border-top:1px solid var(--border); }
.footer-note{ margin-top:4px; opacity:.7; }

/* ===== Mobile cart bar ===== */
.mobile-cart-bar{
  position:fixed; left:14px; right:14px; bottom:14px; z-index:35;
  background: var(--gold-grad); color:#1a1400; border:none; border-radius:14px;
  padding:14px 18px; display:flex; align-items:center; justify-content:space-between;
  font-weight:700; font-size:.9rem; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.view-cart{ font-size:.82rem; }

/* ===== Cart drawer ===== */
.drawer-overlay, .modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter: blur(2px);
  opacity:0; pointer-events:none; transition: opacity .2s; z-index:50;
}
.drawer-overlay.open, .modal-overlay.open{ opacity:1; pointer-events:auto; }

.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(400px, 92vw);
  background: var(--black-2); border-left:1px solid var(--border);
  z-index:60; transform: translateX(100%); transition: transform .25s ease;
  display:flex; flex-direction:column;
}
.cart-drawer.open{ transform: translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); }
.drawer-head h2{ margin:0; font-size:1.2rem; color: var(--gold-1); }
.icon-close{ background:none; border:none; color: var(--text-muted); font-size:1.6rem; line-height:1; }
.icon-close:hover{ color: var(--text); }
.drawer-body{ flex:1; overflow-y:auto; padding: 10px 20px; }
.cart-empty{ text-align:center; color: var(--text-muted); padding:40px 10px; }

.cart-item{ display:flex; gap:10px; padding:14px 0; border-bottom:1px solid var(--border); align-items:center; }
.cart-item-name{ font-weight:600; font-size:.9rem; }
.cart-item-meta{ font-size:.76rem; color:var(--text-muted); font-family:var(--font-mono); }
.cart-item-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.cart-item-remove{ background:none; border:none; color:#e05a5a; font-size:1.1rem; }

.drawer-foot{ padding:16px 20px 20px; border-top:1px solid var(--border); }
.cart-total-row{ display:flex; justify-content:space-between; font-weight:700; font-size:1.05rem; margin-bottom:14px; }
.cart-total-row span:last-child{ font-family: var(--font-mono); color: var(--gold-1); }
.drawer-note{ font-size:.72rem; color:var(--text-muted); text-align:center; margin:10px 0 0; }

/* ===== Draft save / resume ===== */
.draft-status{
  font-size:.78rem; text-align:center; margin:10px 0 0; padding:8px 10px;
  border-radius:8px; background: var(--black-3); border:1px solid var(--border); color: var(--text);
}
.draft-status.success{ color:#6fce8f; border-color: rgba(111,206,143,0.4); }
.draft-status.error{ color:#e05a5a; border-color: rgba(224,90,90,0.4); }
.draft-status .draft-code{ font-family: var(--font-mono); color: var(--gold-1); font-weight:700; letter-spacing:.03em; }
.draft-load-row{ display:flex; gap:8px; margin-top:8px; }
.draft-load-row input{
  flex:1; background: var(--black-3); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:9px 12px; font-size:.88rem; font-family: var(--font-mono); text-transform:uppercase;
}
.draft-load-row input:focus{ outline:none; border-color: var(--gold-2); }
.draft-load-row .btn-secondary{ margin-top:0; padding:9px 16px; }

/* ===== Buttons ===== */
.btn-primary{
  background: var(--gold-grad); color:#1a1400; border:none; border-radius:10px;
  padding:13px 20px; font-weight:700; font-size:.95rem; transition: transform .15s, box-shadow .15s;
}
.btn-primary:hover:not(:disabled){ transform: translateY(-1px); box-shadow: var(--shadow-gold); }
.btn-primary:disabled{ opacity:.4; cursor:not-allowed; }
.btn-full{ width:100%; }
.btn-secondary{
  background: var(--black-3); color:var(--text); border:1px solid var(--border); border-radius:10px;
  padding:12px 20px; font-weight:600; font-size:.9rem; margin-top:10px;
}
.btn-secondary:hover{ border-color: var(--gold-2); }
.btn-text{ background:none; border:none; color: var(--text-muted); font-size:.85rem; margin-top:12px; width:100%; text-decoration:underline; }
.btn-whatsapp{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:#25D366; color:#062b12; border-radius:10px; padding:13px 20px;
  font-weight:700; text-decoration:none; font-size:.95rem;
}
.btn-whatsapp:hover{ filter:brightness(1.05); }

/* ===== Modals ===== */
.modal{
  background: var(--black-2); border:1px solid var(--border); border-radius: var(--radius);
  max-width:420px; width:92vw; margin: 8vh auto; padding: 28px 24px 24px;
  position:relative; text-align:center;
}
.modal-overlay{ overflow-y:auto; }
.modal h2{ color: var(--gold-1); margin: 6px 0 6px; font-size:1.35rem; }
.modal-sub{ color: var(--text-muted); font-size:.88rem; margin: 0 0 18px; }
.confirm-icon{ font-size:2rem; color: var(--gold-1); }
#checkoutForm{ text-align:left; display:flex; flex-direction:column; gap:12px; }
#checkoutForm label{ font-size:.82rem; color: var(--text-muted); display:flex; flex-direction:column; gap:6px; }
#checkoutForm input, #checkoutForm textarea{
  background: var(--black-3); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:10px 12px; font-size:.92rem; resize:vertical;
}
#checkoutForm input:focus, #checkoutForm textarea:focus{ outline:none; border-color: var(--gold-2); }
#checkoutForm button{ margin-top:6px; }
.confirm-actions{ display:flex; flex-direction:column; }

@media (max-width: 600px){
  .cat-nav{ top:61px; }
}

/* Accessibility: visible focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--gold-2); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  .hero-sparks{ animation:none; }
  *{ transition:none !important; }
}