:root{--haiti-blue:#002654;--haiti-red:#D52B1E;--haiti-green:#007A3D;--text:#111;--muted:#666;--bg:#f6f7fb;--card:#fff;--shadow:0 10px 20px rgba(0,0,0,.08)}
*{box-sizing:border-box} html,body{margin:0;padding:0;font-family:'Inter',system-ui,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--haiti-blue);text-decoration:none} a:hover{text-decoration:underline}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#fff;border-bottom:1px solid #eee;box-shadow:var(--shadow)}
.brand{font-weight:800;letter-spacing:.5px;text-transform:lowercase}
.topbar nav{display:flex;gap:18px;align-items:center}
.cart-btn{background:var(--haiti-blue);color:#fff;border:none;border-radius:10px;padding:8px 12px;cursor:pointer}
.vbadge{font-size:12px;color:#333;background:#f2f4f7;border:1px solid #e6e9ee;display:inline-block;margin:6px 20px 0;border-radius:999px;padding:4px 10px}
.announce{background:#111;color:#fff;text-align:center;padding:8px 10px;font-size:14px}
.hero{background: radial-gradient(180px 180px at 10% 20%, rgba(0,38,84,.25), transparent 70%), radial-gradient(220px 220px at 90% 10%, rgba(213,43,30,.25), transparent 70%), linear-gradient(135deg, rgba(0,38,84,.12), rgba(213,43,30,.12), rgba(0,122,61,.12)); padding:80px 20px;text-align:center}
.hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 8px}
.hero p{color:var(--muted);margin:0 0 20px}
.cta{display:inline-block;background:linear-gradient(90deg,var(--haiti-blue),var(--haiti-red));color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;box-shadow:var(--shadow)}
main{max-width:1100px;margin:0 auto;padding:24px}
.shop h2,.about h2,.contact h2{font-size:28px;margin:8px 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;height:280px;object-fit:cover}
.card .body{padding:14px} .card h3{margin:0 0 4px;font-size:18px} .price{font-weight:800}
.muted{color:var(--muted);font-size:14px}
.opt-row{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:8px;overflow:auto;padding-bottom:4px}
.opt{border:1px solid #ddd;padding:6px 10px;border-radius:999px;font-size:12px;cursor:pointer;background:#fafafa;white-space:nowrap}
.opt.selected{background:var(--haiti-blue);color:#fff;border-color:transparent}
.add,.checkout{width:100%;padding:10px 14px;background:linear-gradient(90deg,var(--haiti-blue),var(--haiti-red));color:#fff;border:none;border-radius:12px;cursor:pointer;margin-top:8px;font-weight:800}
.about,.contact{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:16px;margin-top:28px}
.paybox{margin-top:12px;background:#f8f9fb;border:1px solid #eee;padding:12px;border-radius:12px}
.custom-form input,.custom-form textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:10px;margin:6px 0}
.custom-form .row{display:flex;gap:10px;flex-wrap:wrap}
.footer{padding:32px 20px;text-align:center;color:var(--muted)}
.cart{position:fixed;right:-420px;top:0;height:100%;width:380px;background:#fff;box-shadow:-10px 0 30px rgba(0,0,0,.15);transition:.3s;padding:16px;z-index:100}
.cart.open{right:0} .cart-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding-bottom:8px}
.cart-items{max-height:60vh;overflow:auto;padding:8px 0;display:flex;flex-direction:column;gap:12px}
.cart-item{display:flex;gap:10px;border:1px solid #eee;border-radius:12px;padding:8px}
.cart-item img{width:60px;height:60px;object-fit:cover;border-radius:8px}
.cart-footer{border-top:1px solid #eee;padding-top:12px;display:flex;flex-direction:column;gap:8px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:90}
@media (max-width:420px){.cart{width:100%}}
.chat-float{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:120}
.chat-btn{display:inline-block;background:#25D366;color:#fff;padding:10px 14px;border-radius:999px;font-weight:700;box-shadow:0 8px 18px rgba(0,0,0,.15)}
.chat-btn.sms{background:#111}
.card .desc{color:#555;font-size:13px;margin-top:6px;min-height:34px}
.qty-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.qty-input{width:64px;padding:6px 8px;border:1px solid #ddd;border-radius:8px}
.size-link{font-size:12px}


/* v3 checkout form */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 800px;
  margin: 10px 0 20px;
}
.form-grid input, .form-grid textarea {
  padding: 10px;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  font-size: 0.95rem;
}
.form-grid button[type="submit"] { grid-column: 1 / -1; justify-self: start; }
.hidden { display: none; }
@media (max-width: 700px){ .form-grid { grid-template-columns: 1fr; } }


/* v6 footer contact */
.footer-contact {
  background: #111;
  color: #fff;
  padding: 16px 12px;
  margin-top: 20px;
}
.footer-contact-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.footer-contact .btn-cta {
  display: inline-block;
  padding: 8px 12px;
  background: #fff;
  color: #111;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid #eee;
}
.footer-contact .btn-cta:hover { transform: translateY(-1px); }
.footer-contact span { opacity: .85; margin-right: 6px; }
@media (max-width: 600px){
  .footer-contact-inner { gap: 8px; }
  .footer-contact .btn-cta { padding: 8px 10px; font-size: 0.95rem; }
}


/* v9 sticky contact bar */
.footer-contact {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
}
/* Reserve space so it doesn't cover content */
body { padding-bottom: 80px; }
@media (max-width: 600px){
  body { padding-bottom: 100px; }
}


/* v10 compact sticky contact bar */
.footer-contact { padding: 8px 10px; }
.footer-contact-inner { gap: 6px; }
.footer-contact .btn-cta { padding: 6px 10px; font-size: 0.9rem; }
body { padding-bottom: 56px; } /* was 80px */
@media (max-width: 600px){
  .footer-contact .btn-cta { padding: 6px 8px; font-size: 0.9rem; }
  body { padding-bottom: 72px; } /* was 100px */
}


/* v11 floating contact button */
#contact-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10000;
  font-family: inherit;
}
#contact-fab-btn {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  background: #111;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
#contact-fab-btn:hover { transform: translateY(-1px); }
#contact-fab-panel {
  position: absolute;
  right: 0;
  bottom: 48px;
  width: 240px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#contact-fab-panel a {
  text-decoration: none;
  color: #111;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8f8f8;
}
#contact-fab-panel a:hover { background: #efefef; }
.hidden { display: none; }
/* Remove previous sticky bar spacing */
body { padding-bottom: 0 !important; }


/* v15 Zoe Nation hero */
.zn-hero{ text-align:center; margin: 18px 0 8px; }
.zn-title{ font-size: clamp(28px, 4vw, 48px); margin: 0; line-height: 1.1; font-weight: 900; letter-spacing: .5px; }
.zn-blue{ color:#0e5bd8; text-shadow: 0 0 12px rgba(14,91,216,.25); }
.zn-red{ color:#e11228; text-shadow: 0 0 12px rgba(225,18,40,.25); }
.zn-flag{ font-size: .9em; margin-left: 6px; vertical-align: middle; }
.zn-sub{ color:#fff; opacity:.95; font-weight:700; margin:6px 0 0; text-shadow:0 1px 2px rgba(0,0,0,.35); }
@media (prefers-color-scheme: light){
  .zn-sub{ color:#111; text-shadow:none; opacity:.8; }
}


/* v16 force hero styles */
.zn-hero{ text-align:center; margin: 14px 0 8px; }
.zn-title{ font-size: clamp(28px, 4vw, 48px); margin: 0; line-height: 1.1; font-weight: 900; letter-spacing: .5px; }
.zn-blue{ color:#0e5bd8; text-shadow: 0 0 12px rgba(14,91,216,.25); }
.zn-red{ color:#e11228; text-shadow: 0 0 12px rgba(225,18,40,.25); }
.zn-flag{ font-size: .9em; margin-left: 6px; vertical-align: middle; }
.zn-sub{ color:#111; font-weight:700; margin:6px 0 0; }
body.dark .zn-sub, [data-theme="dark"] .zn-sub { color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }