:root{
  --gold:#c9a84c;
  --gold-dark:#a88838;
  --navy:#0d1f3c;
  --bg:#fafaf6;
  --text:#2a2a2a;
  --soft:#666;
  --border:#e8dfc9;
  --red:#c0506b;
  --green:#2ab8a0;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Heebo',Arial,sans-serif;background:var(--bg);color:var(--text);}

.back-bar{
  background:linear-gradient(135deg,#c9a84c,#a88838);
  padding:0.85rem 1rem;
  text-align:center;
  border-bottom:3px solid #0d1f3c;
}
.back-bar a{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  background:#0d1f3c;
  color:#fff;
  padding:0.65rem 1.6rem;
  border-radius:30px;
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

.top-header{
  background:linear-gradient(135deg,#0d1f3c,#1a3057);
  color:#fff;
  padding:1.2rem 1.5rem;
  text-align:center;
}
.top-header .brand{font-size:1.3rem;font-weight:700;}
.top-header .sub{font-size:0.78rem;opacity:0.85;margin-top:0.15rem;letter-spacing:1px;}
.top-header .contact{
  font-size:0.78rem;
  margin-top:0.4rem;
  opacity:0.85;
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}
.top-header .contact a{color:#c9a84c;text-decoration:none;}

.wrap{
  max-width:1000px;
  margin:0 auto;
  padding:1rem;
  padding-bottom:120px;
}

.intro-card{
  background:linear-gradient(135deg,#e8f7f4,#d4edda);
  border:2px solid var(--green);
  border-radius:10px;
  padding:1rem 1.2rem;
  margin-bottom:1.2rem;
  text-align:center;
}
.intro-card h1{color:#155724;font-size:1.3rem;margin-bottom:0.4rem;}
.intro-card p{color:#155724;font-size:0.9rem;line-height:1.6;}
.intro-card .highlight{
  background:var(--green);
  color:#fff;
  padding:0.2rem 0.6rem;
  border-radius:20px;
  font-size:0.78rem;
  font-weight:600;
  display:inline-block;
  margin-top:0.4rem;
}

.alert-err{
  background:#f8d7da;
  color:#721c24;
  border:1px solid var(--red);
  border-radius:8px;
  padding:0.85rem 1.2rem;
  margin-bottom:1rem;
}

.search-bar{
  background:linear-gradient(135deg,#fff,#faf7ed);
  border:2px solid var(--gold);
  border-radius:8px;
  padding:0.7rem 1rem;
  margin-bottom:1rem;
  display:flex;
  gap:0.6rem;
  align-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.search-bar input{
  flex:1;
  padding:0.65rem 0.9rem;
  border:1px solid var(--border);
  border-radius:5px;
  font-size:0.95rem;
  font-family:inherit;
}
.search-bar .count{font-size:0.85rem;color:#666;white-space:nowrap;}

.customer-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  padding:1rem 1.2rem;
  margin-bottom:1rem;
}
.customer-card h2{
  font-size:1rem;
  color:var(--navy);
  margin-bottom:0.7rem;
  display:flex;
  align-items:center;
  gap:0.4rem;
}
.cust-row{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem;}
.ff label{
  display:block;
  font-size:0.8rem;
  color:#666;
  margin-bottom:0.2rem;
  font-weight:500;
}
.ff label .req{color:var(--red);}
.ff input{
  width:100%;
  padding:0.55rem 0.7rem;
  border:1px solid var(--border);
  border-radius:5px;
  font-size:0.92rem;
  font-family:inherit;
}
.ff input:focus{outline:none;border-color:var(--gold);background:#faf7ed;}
.ltr-input{direction:ltr;text-align:right;}

.cat-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  margin-bottom:0.85rem;
  overflow:hidden;
}
.cat-h{
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff;
  padding:0.6rem 1rem;
  font-size:0.95rem;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.cat-h .count{font-size:0.78rem;opacity:0.9;}

table.items{width:100%;border-collapse:collapse;}
table.items th{
  background:#faf7ed;
  padding:0.4rem 0.6rem;
  font-size:0.78rem;
  font-weight:600;
  color:var(--navy);
  text-align:right;
  border-bottom:1px solid var(--border);
}
table.items th.center{text-align:center;}
table.items th.col-carton{width:90px;}
table.items th.col-qty{width:130px;}
table.items th.col-units{width:100px;}
table.items td{
  padding:0.6rem 0.7rem;
  font-size:0.92rem;
  border-bottom:1px solid #f0ebd9;
  vertical-align:middle;
}
table.items tr:nth-child(even) td{background:#fdfcf7;}
table.items tr.has-qty td{background:#e8f7f4;}

.prod-name{font-weight:500;color:var(--navy);}
.prod-carton{
  font-family:Arial;
  color:#888;
  text-align:center;
  font-size:0.85rem;
}
.qty-cell{text-align:center;width:130px;}
.qty-input{
  width:75px;
  padding:0.5rem;
  text-align:center;
  border:1.5px solid var(--gold);
  border-radius:5px;
  font-family:Arial;
  font-weight:700;
  font-size:1rem;
  color:var(--navy);
  background:#fff;
}
.qty-input:focus{outline:none;background:#faf7ed;}
.units-display{
  text-align:left;
  direction:ltr;
  width:100px;
  font-family:Arial;
  font-weight:600;
  color:var(--green);
  font-size:0.9rem;
}

.summary-card{
  background:linear-gradient(135deg,#fff8e1,#faf7ed);
  border:2px solid var(--gold);
  border-radius:10px;
  padding:1.2rem 1.4rem;
  margin-top:1.2rem;
  margin-bottom:1rem;
  display:none;
}
.summary-card.visible{display:block;}
.summary-card h2{
  color:var(--navy);
  font-size:1.05rem;
  margin-bottom:0.85rem;
  padding-bottom:0.6rem;
  border-bottom:2px solid var(--gold);
}
.sum-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.45rem 0;
  font-size:0.95rem;
}
.sum-row .sum-lbl{color:var(--soft);font-weight:500;}
.sum-row .sum-val{
  font-family:Arial;
  font-weight:700;
  color:var(--navy);
  direction:ltr;
  font-size:1.1rem;
}
.sum-final{
  background:var(--navy);
  color:#fff;
  border-radius:6px;
  padding:0.7rem 1rem;
  margin-top:0.5rem;
}
.sum-final .sum-lbl{color:rgba(255,255,255,0.85);font-weight:600;}
.sum-final .sum-val{color:var(--gold);font-size:1.3rem;}
.notice-quote{
  background:#fff3cd;
  color:#856404;
  border:1px solid var(--gold);
  border-radius:5px;
  padding:0.7rem 1rem;
  margin-top:0.7rem;
  font-size:0.85rem;
  line-height:1.5;
  text-align:center;
}

.bottom-bar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(135deg,#0d1f3c,#1a3057);
  color:#fff;
  padding:0.85rem 1.2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:0.7rem;
  z-index:100;
  box-shadow:0 -4px 12px rgba(0,0,0,0.2);
}
.bottom-bar .summary{font-size:0.92rem;}
.bottom-bar .cartons{
  font-family:Arial;
  font-size:1.4rem;
  font-weight:700;
  color:var(--gold);
  direction:ltr;
  display:inline-block;
}
.bottom-bar .label{
  color:rgba(255,255,255,0.7);
  font-size:0.8rem;
  margin:0 0.4rem;
}
.bottom-bar .sublabel{
  font-size:0.7rem;
  display:block;
  margin-top:0.15rem;
}
.btn-wa{
  background:#25d366;
  color:#fff;
  border:none;
  padding:0.7rem 1.6rem;
  border-radius:6px;
  font-size:0.95rem;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
}
.btn-wa:hover{background:#1ea952;}
.btn-wa:disabled{background:#888;cursor:not-allowed;}

/* Success screen */
.success-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#e8f7f4,#d4edda);
  padding:2rem;
}
.success-box{
  background:#fff;
  border-radius:15px;
  padding:2.5rem 2rem;
  max-width:500px;
  width:100%;
  text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,0.1);
  border:3px solid #2ab8a0;
}
.success-icon{
  font-size:3.5rem;
  margin-bottom:1rem;
  color:#2ab8a0;
  font-weight:900;
  background:#d4edda;
  width:90px;
  height:90px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1rem;
}
.success-box h1{
  color:#155724;
  font-size:1.6rem;
  margin-bottom:0.7rem;
}
.success-box p{
  color:#555;
  font-size:1rem;
  line-height:1.6;
  margin-bottom:1rem;
}
.success-stats{
  background:#faf7ed;
  border:1px solid #c9a84c;
  border-radius:8px;
  padding:1rem;
  margin:1rem 0;
  font-size:0.9rem;
  color:#856404;
}
.success-wa{color:#155724;font-size:0.85rem;}
.success-phone{color:#666;font-size:0.85rem;margin-top:1.5rem;}
.success-phone a{color:#c9a84c;font-weight:600;text-decoration:none;}
.success-actions{
  margin-top:1.5rem;
  display:flex;
  gap:0.5rem;
  justify-content:center;
  flex-wrap:wrap;
}
.btn-navy{
  background:#0d1f3c;
  color:#fff;
  padding:0.7rem 1.4rem;
  border-radius:5px;
  text-decoration:none;
  font-weight:600;
  font-size:0.9rem;
}
.btn-green{
  background:#25d366;
  color:#fff;
  padding:0.7rem 1.4rem;
  border-radius:5px;
  text-decoration:none;
  font-weight:600;
  font-size:0.9rem;
}
.success-foot{
  color:#999;
  font-size:0.78rem;
  margin-top:1.5rem;
}

@media (max-width:700px){
  .wrap{padding:0.7rem;padding-bottom:140px;}
  .top-header{padding:0.85rem 0.7rem;}
  .top-header .brand{font-size:1.1rem;}
  .cust-row{grid-template-columns:1fr;}
  table.items th, table.items td{padding:0.4rem 0.5rem;font-size:0.85rem;}
  table.items th:nth-child(2), table.items td:nth-child(2){display:none;}
  .qty-input{width:60px;font-size:0.92rem;padding:0.4rem;}
  .qty-cell{width:90px;}
  .units-display{width:75px;font-size:0.82rem;}
  .bottom-bar{padding:0.6rem 0.85rem;flex-direction:column;gap:0.4rem;}
  .bottom-bar .summary{text-align:center;}
  .btn-wa{width:100%;justify-content:center;padding:0.65rem;}
  .search-bar{padding:0.55rem 0.7rem;}
}

/* ─── Info Sections (SEO + AI optimized) ─── */
.info-section{
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:1.5rem 1.7rem;
  margin-top:1.5rem;
  margin-bottom:1rem;
}
.info-section h2{
  color:var(--navy);
  font-size:1.25rem;
  margin-bottom:1rem;
  padding-bottom:0.7rem;
  border-bottom:2px solid var(--gold);
}
.info-section h3{
  color:var(--navy);
  font-size:1rem;
  margin-bottom:0.4rem;
  font-weight:600;
}
.info-section p{
  color:#444;
  font-size:0.95rem;
  line-height:1.7;
  margin-bottom:0.7rem;
}
.info-section p strong{color:var(--navy);}

.brands-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
  margin-top:1rem;
}
.brand-info{
  background:linear-gradient(135deg,#fdfcf7,#faf7ed);
  border:1px solid var(--border);
  border-right:4px solid var(--gold);
  border-radius:6px;
  padding:0.9rem 1.1rem;
}
.brand-info p{
  font-size:0.85rem;
  color:#666;
  margin:0;
  line-height:1.5;
}

.features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0.7rem;
  margin-top:0.8rem;
}
.feature-item{
  background:#faf7ed;
  border:1px solid var(--border);
  border-radius:6px;
  padding:0.8rem 1rem;
  display:flex;
  flex-direction:column;
  gap:0.2rem;
}
.feature-item strong{color:var(--navy);font-size:0.95rem;}
.feature-item span{color:#666;font-size:0.82rem;}

.catalog-note{
  background:#fff8e1;
  border:1px solid var(--gold);
  border-radius:6px;
  padding:0.8rem 1.1rem;
  margin-top:1rem;
  text-align:center;
  color:#856404;
}

.stats-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0.8rem;
  margin-top:1rem;
}
.stat-box{
  background:linear-gradient(135deg,#fff,#faf7ed);
  border:1px solid var(--gold);
  border-radius:8px;
  padding:1rem 0.7rem;
  text-align:center;
}
.stat-num{
  font-family:Arial;
  font-size:1.8rem;
  font-weight:700;
  color:var(--gold-dark);
  line-height:1;
}
.stat-lbl{
  font-size:0.78rem;
  color:#666;
  margin-top:0.3rem;
}

.faq-item{
  border:1px solid var(--border);
  border-radius:6px;
  margin-bottom:0.5rem;
  background:#fdfcf7;
  overflow:hidden;
}
.faq-item summary{
  cursor:pointer;
  padding:0.85rem 1.1rem;
  font-weight:600;
  color:var(--navy);
  font-size:0.95rem;
  list-style:none;
  position:relative;
  padding-right:2.5rem;
  user-select:none;
}
.faq-item summary::before{
  content:'+';
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
  font-size:1.3rem;
  color:var(--gold);
  font-weight:300;
}
.faq-item[open] summary::before{content:'-';}
.faq-item[open] summary{background:#faf7ed;border-bottom:1px solid var(--border);}
.faq-item p{
  padding:0.85rem 1.1rem;
  margin:0;
  color:#555;
  font-size:0.9rem;
  line-height:1.7;
}

.info-contact .contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0.7rem;
  margin-top:0.7rem;
}
.contact-card{
  background:linear-gradient(135deg,#fff,#faf7ed);
  border:1px solid var(--gold);
  border-radius:8px;
  padding:1rem 1.2rem;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:0.3rem;
  transition:all 0.2s;
}
a.contact-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(201,168,76,0.2);
}
.contact-card strong{color:var(--navy);font-size:0.95rem;}
.contact-card span{
  color:var(--gold-dark);
  font-size:0.88rem;
  font-family:Arial;
  direction:ltr;
  text-align:right;
}

@media (max-width:700px){
  .info-section{padding:1.1rem 1rem;}
  .info-section h2{font-size:1.1rem;}
  .stats-row{grid-template-columns:repeat(2,1fr);gap:0.5rem;}
  .stat-num{font-size:1.4rem;}
  .brands-grid, .features-grid{grid-template-columns:1fr;}
}