/* ═══════════════════════════════════════════════════════
   MitumbaBales — Professional Design System
   Aesthetic: Bold African market meets modern commerce
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@700;800&display=swap');

/* ── CSS Variables ─────────────────────────────────────── */
:root {
  --green:       #0d6e3f;
  --green-light: #16a35e;
  --green-pale:  #e8f5ef;
  --gold:        #e8a020;
  --gold-light:  #fef3c7;
  --red:         #dc2626;
  --dark:        #0c1a12;
  --dark2:       #1a2e20;
  --body:        #374151;
  --muted:       #6b7280;
  --border:      #e5e7eb;
  --bg:          #f8faf9;
  --white:       #ffffff;
  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   20px;
  --shadow-sm:   0 1px 4px rgba(0,0,0,.06);
  --shadow:      0 4px 20px rgba(0,0,0,.08);
  --shadow-lg:   0 12px 40px rgba(0,0,0,.14);
  --trans:       .2s cubic-bezier(.4,0,.2,1);
  --font-sans:   'Plus Jakarta Sans', sans-serif;
  --font-display:'Space Grotesk', sans-serif;
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100% }
body { font-family:var(--font-sans); background:var(--bg); color:var(--body); line-height:1.65; min-height:100vh }
img  { max-width:100%; height:auto; display:block }
a    { color:inherit; text-decoration:none }
ul   { list-style:none }
button,input,select,textarea { font-family:inherit }

/* ── Typography ────────────────────────────────────────── */
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.15; color:var(--dark) }
h1 { font-size:clamp(2rem,5vw,3.4rem); font-weight:800 }
h2 { font-size:clamp(1.5rem,3vw,2.2rem); font-weight:700 }
h3 { font-size:1.15rem; font-weight:700 }
p  { line-height:1.7 }

/* ── Layout ────────────────────────────────────────────── */
.container { width:100%; max-width:1300px; margin:0 auto; padding:0 1.5rem }
.section    { padding:5rem 0 }

/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1.5rem; border-radius:var(--radius-sm);
  font-weight:600; font-size:.92rem; cursor:pointer;
  border:2px solid transparent; transition:var(--trans);
  text-decoration:none; line-height:1; white-space:nowrap;
}
.btn-primary   { background:var(--green); color:#fff; border-color:var(--green) }
.btn-primary:hover { background:var(--green-light); border-color:var(--green-light); transform:translateY(-1px); box-shadow:0 6px 20px rgba(13,110,63,.3) }
.btn-outline   { background:transparent; border-color:var(--green); color:var(--green) }
.btn-outline:hover { background:var(--green); color:#fff }
.btn-gold      { background:var(--gold); color:#fff; border-color:var(--gold) }
.btn-gold:hover{ background:#d4911a; border-color:#d4911a; transform:translateY(-1px) }
.btn-wa        { background:#25D366; color:#fff; border-color:#25D366 }
.btn-wa:hover  { background:#1ebe5d; transform:translateY(-1px); box-shadow:0 6px 16px rgba(37,211,102,.35) }
.btn-danger    { background:var(--red); color:#fff; border-color:var(--red) }
.btn-danger:hover { background:#b91c1c }
.btn-ghost     { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.25) }
.btn-ghost:hover { background:rgba(255,255,255,.2) }
.btn-sm  { padding:.45rem 1rem; font-size:.82rem }
.btn-lg  { padding:.9rem 2rem; font-size:1rem }
.btn-xl  { padding:1rem 2.25rem; font-size:1.05rem }
.btn-block { width:100%; justify-content:center }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none !important }

/* ══════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════ */
.navbar {
  background:var(--dark);
  position:sticky; top:0; z-index:1000;
  box-shadow:0 2px 16px rgba(0,0,0,.35);
  border-bottom:2px solid var(--green);
}
.navbar .container {
  display:flex; align-items:center;
  justify-content:space-between; height:68px; gap:1rem;
}
.navbar-brand {
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-display); font-size:1.4rem; font-weight:800;
  color:#fff; flex-shrink:0;
}
.brand-icon {
  width:38px; height:38px; background:var(--green); border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; flex-shrink:0;
}
.brand-dot { color:var(--gold) }
.nav-center { display:flex; align-items:center; gap:.25rem }
.nav-center a {
  padding:.5rem .9rem; border-radius:7px;
  color:rgba(255,255,255,.75); font-weight:500; font-size:.9rem;
  transition:var(--trans);
}
.nav-center a:hover, .nav-center a.active {
  color:#fff; background:rgba(255,255,255,.08);
}
.nav-right { display:flex; align-items:center; gap:.75rem }
.nav-search {
  display:flex; align-items:center;
  background:rgba(255,255,255,.09); border:1.5px solid rgba(255,255,255,.15);
  border-radius:8px; overflow:hidden; transition:border-color var(--trans);
}
.nav-search:focus-within { border-color:var(--green-light) }
.nav-search input {
  background:transparent; border:none; padding:.5rem .85rem;
  color:#fff; font-size:.88rem; width:195px; outline:none;
}
.nav-search input::placeholder { color:rgba(255,255,255,.4) }
.nav-search button {
  background:var(--green); border:none;
  padding:.5rem .8rem; color:#fff; cursor:pointer;
  transition:background var(--trans); font-size:.9rem;
}
.nav-search button:hover { background:var(--green-light) }
.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:.3rem; background:none; border:none;
}
.hamburger span { width:22px; height:2px; background:#fff; border-radius:2px; transition:var(--trans) }
.mobile-menu {
  display:none; position:absolute; top:70px; left:0; right:0;
  background:var(--dark2); border-top:1px solid rgba(255,255,255,.08);
  padding:1rem; z-index:999;
}
.mobile-menu.open { display:block }
.mobile-menu a {
  display:block; padding:.7rem 1rem; color:rgba(255,255,255,.8);
  font-weight:500; border-radius:7px; transition:var(--trans);
}
.mobile-menu a:hover { background:rgba(255,255,255,.07); color:#fff }
.mobile-search {
  display:flex; gap:.5rem; padding:.5rem 0 0; margin-top:.5rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.mobile-search input { flex:1 }

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
.hero {
  background:linear-gradient(135deg, var(--dark) 0%, #0f2a18 55%, #0c1a12 100%);
  color:#fff; overflow:hidden; position:relative;
  padding:5.5rem 0 4.5rem;
}
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 80% at 70% 50%, rgba(13,110,63,.22) 0%, transparent 65%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.02' fill-rule='evenodd'%3E%3Cpath d='M0 0h40v40H0V0zm40 40h40v40H40V40z'/%3E%3C/g%3E%3C/svg%3E");
}
.hero-grid {
  display:grid; grid-template-columns:1fr 480px; gap:4rem;
  align-items:center; position:relative; z-index:1;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(232,160,32,.15); border:1px solid rgba(232,160,32,.35);
  color:var(--gold); padding:.4rem 1rem; border-radius:30px;
  font-size:.82rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; margin-bottom:1.25rem;
}
.hero h1 { color:#fff; margin-bottom:1.1rem }
.hero h1 em { color:var(--gold); font-style:normal; position:relative }
.hero-sub {
  font-size:1.08rem; color:rgba(255,255,255,.68);
  margin-bottom:2rem; max-width:480px; line-height:1.75;
}
.hero-cta { display:flex; gap:.85rem; flex-wrap:wrap; margin-bottom:2.75rem }
.hero-trust {
  display:flex; gap:2rem; padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.1);
}
.trust-item strong {
  display:block; font-family:var(--font-display);
  font-size:1.7rem; color:#fff;
}
.trust-item span { font-size:.82rem; color:rgba(255,255,255,.5) }

/* Hero visual panel */
.hero-visual {
  position:relative;
}
.hero-card-stack {
  display:grid; grid-template-columns:1fr 1fr; gap:.9rem;
}
.hero-bale-card {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius); overflow:hidden; backdrop-filter:blur(10px);
  transition:transform var(--trans);
}
.hero-bale-card:hover { transform:translateY(-3px) }
.hero-bale-card:first-child { grid-column:1/-1 }
.hero-bale-card .img-wrap {
  aspect-ratio:16/9; background:rgba(13,110,63,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:3.5rem; overflow:hidden;
}
.hero-bale-card:first-child .img-wrap { aspect-ratio:2.4/1 }
.hero-bale-card .card-info { padding:.75rem }
.hero-bale-card .card-info small {
  font-size:.72rem; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.05em;
}
.hero-bale-card .card-info strong {
  display:block; color:#fff; font-size:.88rem; margin:.2rem 0 .25rem;
}
.hero-bale-card .card-info .price {
  color:var(--gold); font-family:var(--font-display);
  font-size:.95rem; font-weight:700;
}
.hero-float-badge {
  position:absolute; top:-10px; right:-10px;
  background:var(--gold); color:#fff; font-weight:800;
  font-size:.78rem; padding:.4rem .8rem; border-radius:30px;
  box-shadow:0 4px 14px rgba(232,160,32,.5);
  transform:rotate(3deg);
}

/* ══════════════════════════════════════════════════════════
   CATEGORY STRIP
══════════════════════════════════════════════════════════ */
.cat-strip {
  background:#fff; border-bottom:1px solid var(--border);
  padding:.85rem 0; overflow-x:auto;
}
.cat-strip::-webkit-scrollbar { height:3px }
.cat-strip::-webkit-scrollbar-track { background:transparent }
.cat-strip::-webkit-scrollbar-thumb { background:var(--border) }
.cat-strip-inner {
  display:flex; gap:.6rem; align-items:center;
  padding:0 .25rem; min-width:max-content;
}
.cat-pill {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem 1rem; border-radius:30px; border:1.5px solid var(--border);
  font-size:.83rem; font-weight:600; color:var(--body);
  cursor:pointer; transition:var(--trans); white-space:nowrap;
  text-decoration:none; background:#fff;
}
.cat-pill:hover, .cat-pill.active {
  background:var(--green); border-color:var(--green); color:#fff;
}
.cat-pill .icon { font-size:1rem }

/* ══════════════════════════════════════════════════════════
   FILTER BAR
══════════════════════════════════════════════════════════ */
.filter-bar {
  background:#fff; border-bottom:1px solid var(--border);
  padding:.85rem 0; position:sticky; top:68px; z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.filter-inner {
  display:flex; gap:.65rem; align-items:center; flex-wrap:wrap;
}
.filter-label {
  font-size:.78rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; white-space:nowrap;
}
.filter-select {
  padding:.46rem .85rem; border:1.5px solid var(--border);
  border-radius:8px; font-size:.85rem; background:#fff;
  color:var(--body); cursor:pointer; outline:none;
  transition:border-color var(--trans); font-family:inherit;
}
.filter-select:focus { border-color:var(--green) }
.price-inputs { display:flex; align-items:center; gap:.4rem }
.price-inputs input {
  width:88px; padding:.46rem .7rem;
  border:1.5px solid var(--border); border-radius:8px;
  font-size:.85rem; outline:none; transition:border-color var(--trans);
}
.price-inputs input:focus { border-color:var(--green) }
.price-inputs span { color:var(--muted); font-size:.85rem }
.filter-search-wrap {
  display:flex; gap:.5rem; align-items:center; margin-left:auto;
}
.filter-search-wrap input {
  padding:.46rem .9rem; border:1.5px solid var(--border);
  border-radius:8px; font-size:.88rem; outline:none; width:210px;
  transition:border-color var(--trans);
}
.filter-search-wrap input:focus { border-color:var(--green) }
.results-meta {
  font-size:.82rem; color:var(--muted); white-space:nowrap;
  padding-left:.25rem;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT GRID
══════════════════════════════════════════════════════════ */
.products-section { padding:2.5rem 0 4rem }
.products-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:1.75rem; flex-wrap:wrap; gap:.5rem;
}
.products-header h2 { font-size:1.35rem }
.products-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
  gap:1.5rem;
}

/* ── Bale Card ─────────────────────────────────────────── */
.bale-card {
  background:#fff; border-radius:var(--radius);
  border:1px solid var(--border); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  box-shadow:var(--shadow-sm);
}
.bale-card:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(13,110,63,.2);
}
/* Image area */
.card-img-wrap {
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:linear-gradient(135deg,#e8f5ef,#d4eddf);
}
.card-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.bale-card:hover .card-img-wrap img { transform:scale(1.07) }
.card-img-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; color:var(--green); opacity:.5;
}
.card-img-placeholder .ph-icon { font-size:3.5rem }
.card-img-placeholder span { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em }
/* Badges */
.card-badges {
  position:absolute; top:.65rem; left:.65rem;
  display:flex; flex-wrap:wrap; gap:.3rem;
}
.badge {
  display:inline-block; padding:.22rem .6rem; border-radius:5px;
  font-size:.7rem; font-weight:700; line-height:1.3;
  text-transform:uppercase; letter-spacing:.04em;
}
.badge-new      { background:#dcfce7; color:#15803d }
.badge-used     { background:#fef3c7; color:#b45309 }
.badge-mixed    { background:#dbeafe; color:#1d4ed8 }
.badge-featured { background:var(--gold); color:#fff }
.badge-out      { background:#fee2e2; color:#b91c1c }
/* Wishlist / quick actions */
.card-actions-top {
  position:absolute; top:.65rem; right:.65rem;
  display:flex; flex-direction:column; gap:.4rem;
  opacity:0; transform:translateX(6px);
  transition:opacity var(--trans), transform var(--trans);
}
.bale-card:hover .card-actions-top { opacity:1; transform:translateX(0) }
.card-action-btn {
  width:34px; height:34px; background:#fff; border-radius:7px;
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:.95rem; box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:var(--trans); color:var(--body);
}
.card-action-btn:hover { background:var(--green); color:#fff }
/* Body */
.card-body { padding:1.1rem; flex:1; display:flex; flex-direction:column; gap:.3rem }
.card-category { font-size:.72rem; color:var(--green); font-weight:700; text-transform:uppercase; letter-spacing:.06em }
.card-title {
  font-size:.98rem; font-weight:700; color:var(--dark);
  line-height:1.35; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-title a:hover { color:var(--green) }
.card-attrs {
  display:flex; gap:.65rem; flex-wrap:wrap; margin:.1rem 0;
}
.card-attr {
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.76rem; color:var(--muted);
}
.card-price-row {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-top:auto; padding-top:.5rem;
}
.card-price {
  font-family:var(--font-display); font-size:1.25rem;
  font-weight:800; color:var(--green);
}
.card-stock { font-size:.76rem; color:var(--muted) }
.card-stock.out { color:var(--red) }
.card-footer {
  display:flex; gap:.6rem; padding:.85rem 1.1rem .9rem;
  border-top:1px solid var(--border);
}
.card-footer .btn { flex:1; font-size:.81rem; padding:.5rem .5rem }

/* ══════════════════════════════════════════════════════════
   FEATURES STRIP
══════════════════════════════════════════════════════════ */
.features-strip {
  background:var(--dark2); color:#fff; padding:2.5rem 0;
}
.features-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.feature-item {
  display:flex; align-items:flex-start; gap:1rem;
  padding:1rem; border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.07);
}
.feature-icon {
  width:44px; height:44px; border-radius:10px;
  background:rgba(13,110,63,.35); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
}
.feature-item strong { display:block; font-size:.92rem; color:#fff; margin-bottom:.25rem }
.feature-item p { font-size:.8rem; color:rgba(255,255,255,.5); line-height:1.5 }

/* ══════════════════════════════════════════════════════════
   WHY CHOOSE US
══════════════════════════════════════════════════════════ */
.why-section { background:#fff; padding:5rem 0 }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center }
.why-content .section-tag {
  font-size:.78rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--green); margin-bottom:.75rem;
}
.why-content h2 { margin-bottom:1rem }
.why-content p { color:var(--muted); margin-bottom:2rem }
.why-list { display:flex; flex-direction:column; gap:.85rem }
.why-item {
  display:flex; gap:.9rem; align-items:flex-start;
  padding:.85rem 1rem; border-radius:var(--radius-sm);
  border:1px solid var(--border); transition:var(--trans);
}
.why-item:hover { border-color:var(--green); background:var(--green-pale) }
.why-item-icon {
  width:38px; height:38px; border-radius:8px;
  background:var(--green-pale); color:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
}
.why-item strong { display:block; font-size:.92rem; color:var(--dark); margin-bottom:.2rem }
.why-item p { font-size:.82rem; color:var(--muted); margin:0 }
.why-visual {
  position:relative; padding:1.5rem 0 0 1.5rem;
}
.why-visual-card {
  background:var(--dark); border-radius:var(--radius-lg);
  overflow:hidden; aspect-ratio:1/1.1;
  display:flex; align-items:center; justify-content:center;
  font-size:8rem;
}
.why-stat-card {
  position:absolute; bottom:2rem; left:0;
  background:#fff; border-radius:var(--radius);
  padding:1rem 1.3rem;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
  min-width:165px;
}
.why-stat-card .num {
  font-family:var(--font-display); font-size:1.8rem;
  font-weight:800; color:var(--green); line-height:1;
}
.why-stat-card .lbl { font-size:.78rem; color:var(--muted); margin-top:.2rem }
.why-stat-card2 {
  position:absolute; top:0; left:.75rem;
  background:var(--gold); border-radius:var(--radius);
  padding:.85rem 1.1rem; color:#fff;
  box-shadow:0 6px 20px rgba(232,160,32,.4);
}
.why-stat-card2 .num { font-family:var(--font-display); font-size:1.5rem; font-weight:800; line-height:1 }
.why-stat-card2 .lbl { font-size:.75rem; opacity:.85; margin-top:.15rem }

/* ══════════════════════════════════════════════════════════
   BALE DETAIL
══════════════════════════════════════════════════════════ */
.detail-section { padding:3rem 0 5rem }
.breadcrumb { font-size:.83rem; color:var(--muted); margin-bottom:2rem; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap }
.breadcrumb a { color:var(--green) }
.breadcrumb a:hover { text-decoration:underline }
.breadcrumb-sep { color:var(--border) }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start }
.detail-img-wrap {
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); aspect-ratio:4/3; background:var(--green-pale);
  display:flex; align-items:center; justify-content:center;
}
.detail-img-wrap img { width:100%; height:100%; object-fit:cover }
.detail-img-placeholder { font-size:7rem; opacity:.4 }
.detail-info .detail-cat {
  font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--green); margin-bottom:.5rem;
}
.detail-info h1 { font-size:clamp(1.4rem,3vw,2rem); margin-bottom:.6rem }
.detail-price {
  font-family:var(--font-display); font-size:2.4rem;
  font-weight:800; color:var(--green); margin-bottom:1.1rem;
}
.detail-attrs {
  display:grid; grid-template-columns:1fr 1fr; gap:.65rem;
  background:var(--bg); border-radius:var(--radius-sm);
  padding:1rem; margin-bottom:1.25rem;
}
.detail-attr label { font-size:.73rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em }
.detail-attr span  { display:block; font-weight:600; color:var(--dark); font-size:.9rem; margin-top:.2rem }
.detail-desc { color:var(--body); font-size:.93rem; line-height:1.75; margin-bottom:1.5rem }
.detail-cta { display:flex; gap:.75rem; flex-wrap:wrap }

/* ══════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════ */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(10,20,14,.6); z-index:2000;
  align-items:center; justify-content:center; padding:1rem;
  backdrop-filter:blur(4px);
}
.modal-overlay.open { display:flex }
.modal {
  background:#fff; border-radius:var(--radius-lg);
  width:100%; max-width:530px;
  max-height:92vh; overflow-y:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.3);
  animation:modalIn .25s ease;
}
@keyframes modalIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.modal-header {
  padding:1.25rem 1.6rem; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; background:#fff; z-index:1;
}
.modal-header h3 { font-size:1.1rem; margin:0 }
.modal-close {
  width:32px; height:32px; background:var(--bg); border:none;
  border-radius:7px; cursor:pointer; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:var(--trans); line-height:1;
}
.modal-close:hover { background:var(--border); color:var(--dark) }
.modal-body    { padding:1.5rem }
.modal-footer  { padding:1rem 1.5rem; border-top:1px solid var(--border); display:flex; gap:.75rem; justify-content:flex-end }

/* ══════════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════════ */
.form-group   { margin-bottom:1.1rem }
.form-group label { display:block; font-size:.85rem; font-weight:700; color:var(--dark); margin-bottom:.4rem }
.req { color:var(--red) }
.form-control {
  width:100%; padding:.65rem .9rem;
  border:1.5px solid var(--border); border-radius:8px;
  font-size:.9rem; outline:none;
  transition:border-color var(--trans), box-shadow var(--trans);
  background:#fff; color:var(--body); font-family:inherit;
}
.form-control:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(13,110,63,.1) }
.form-control.is-error { border-color:var(--red) }
.form-hint   { font-size:.76rem; color:var(--muted); margin-top:.3rem }
.form-row    { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.form-row-3  { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem }
textarea.form-control { resize:vertical; min-height:88px }
select.form-control   { cursor:pointer }

/* ══════════════════════════════════════════════════════════
   ALERTS & TOASTS
══════════════════════════════════════════════════════════ */
.alert {
  padding:.85rem 1.1rem; border-radius:var(--radius-sm);
  font-size:.88rem; margin-bottom:1rem;
  border-left:4px solid; display:flex; gap:.6rem; align-items:flex-start;
}
.alert-success { background:#f0fdf4; border-color:#16a34a; color:#14532d }
.alert-error   { background:#fef2f2; border-color:var(--red);  color:#7f1d1d }
.alert-info    { background:#eff6ff; border-color:#2563eb; color:#1e3a8a }
.alert-warning { background:var(--gold-light); border-color:var(--gold); color:#78350f }
#toast-container {
  position:fixed; bottom:1.75rem; left:50%;
  transform:translateX(-50%); z-index:9999;
  display:flex; flex-direction:column; gap:.5rem;
  pointer-events:none; width:340px;
}
.toast {
  background:#fff; border-radius:10px;
  padding:.9rem 1.15rem; box-shadow:0 8px 30px rgba(0,0,0,.14);
  border-left:4px solid var(--green); font-size:.875rem; font-weight:500;
  animation:toastIn .3s ease; pointer-events:all;
}
.toast.error   { border-color:var(--red) }
.toast.warning { border-color:var(--gold) }
.toast.info    { border-color:#2563eb }
@keyframes toastIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════════════════════════
   WHATSAPP FLOAT
══════════════════════════════════════════════════════════ */
.wa-float {
  position:fixed; bottom:1.75rem; right:1.75rem; z-index:998;
  width:58px; height:58px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color:#fff;
  box-shadow:0 6px 24px rgba(37,211,102,.45);
  transition:transform var(--trans), box-shadow var(--trans);
}
.wa-float:hover { transform:scale(1.1); box-shadow:0 10px 32px rgba(37,211,102,.55) }
.wa-float::before {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  background:rgba(37,211,102,.2); animation:waPulse 2s ease infinite;
}
@keyframes waPulse { 0%,100%{opacity:0;transform:scale(1)} 50%{opacity:1;transform:scale(1.15)} }

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.footer { background:var(--dark); color:rgba(255,255,255,.65); padding:4rem 0 2rem }
.footer-grid {
  display:grid; grid-template-columns:2.2fr 1fr 1fr 1.3fr;
  gap:2.5rem; margin-bottom:3rem;
}
.footer-brand-name {
  font-family:var(--font-display); font-size:1.5rem;
  font-weight:800; color:#fff; margin-bottom:.75rem;
}
.footer-brand-name em { color:var(--gold); font-style:normal }
.footer p { font-size:.86rem; line-height:1.75; max-width:260px }
.footer-social { display:flex; gap:.5rem; margin-top:1.1rem }
.footer-social a {
  width:36px; height:36px; border-radius:8px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.6); font-size:.9rem; transition:var(--trans);
}
.footer-social a:hover { background:var(--green); color:#fff; border-color:var(--green) }
.footer-col h4 { font-size:.9rem; color:#fff; margin-bottom:1rem; font-weight:700 }
.footer-col ul li { margin-bottom:.5rem }
.footer-col ul a { font-size:.84rem; color:rgba(255,255,255,.55); transition:color var(--trans) }
.footer-col ul a:hover { color:#fff }
.footer-contact-item { display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.65rem }
.footer-contact-item .icon { font-size:1rem; margin-top:.1rem; color:var(--green) }
.footer-contact-item span { font-size:.84rem; color:rgba(255,255,255,.55) }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08); padding-top:1.5rem;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:.75rem; font-size:.8rem; color:rgba(255,255,255,.35);
}
.footer-payments { display:flex; gap:.4rem; align-items:center }
.pay-badge {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  padding:.25rem .6rem; border-radius:5px; font-size:.75rem;
  font-weight:600; color:rgba(255,255,255,.5);
}

/* ══════════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════════ */
.pagination { display:flex; gap:.35rem; justify-content:center; padding:2rem 0 }
.page-link {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 .5rem;
  border-radius:var(--radius-sm); border:1.5px solid var(--border);
  font-size:.85rem; font-weight:600; color:var(--body);
  transition:var(--trans);
}
.page-link:hover { border-color:var(--green); color:var(--green) }
.page-link.active { background:var(--green); border-color:var(--green); color:#fff }
.page-link.disabled { opacity:.4; pointer-events:none }

/* ══════════════════════════════════════════════════════════
   ADMIN LAYOUT
══════════════════════════════════════════════════════════ */
.admin-wrap  { display:flex; min-height:100vh }
.sidebar {
  width:255px; background:var(--dark); color:#fff;
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; height:100vh;
  overflow-y:auto; z-index:200;
  transition:transform var(--trans);
  border-right:1px solid rgba(255,255,255,.06);
}
.sidebar::-webkit-scrollbar { width:3px }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1) }
.sb-brand {
  padding:1.3rem 1.4rem; display:flex; align-items:center; gap:.65rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.sb-brand-text {
  font-family:var(--font-display); font-size:1.15rem;
  font-weight:800; color:#fff;
}
.sb-brand-text em { color:var(--gold); font-style:normal }
.sb-nav { padding:.75rem 0; flex:1 }
.sb-section {
  padding:.5rem 1.4rem .3rem;
  font-size:.67rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:rgba(255,255,255,.25);
  margin-top:.4rem;
}
.sb-link {
  display:flex; align-items:center; gap:.75rem;
  padding:.65rem 1.4rem; color:rgba(255,255,255,.65);
  font-size:.875rem; font-weight:500; transition:var(--trans);
  border-left:3px solid transparent; margin:1px 0;
}
.sb-link:hover  { color:#fff; background:rgba(255,255,255,.05); border-color:rgba(13,110,63,.5) }
.sb-link.active { color:#fff; background:rgba(13,110,63,.2); border-color:var(--green) }
.sb-link i { width:17px; text-align:center; font-size:.9rem }
.admin-main { flex:1; margin-left:255px; min-height:100vh; background:#f3f4f6; display:flex; flex-direction:column }
.admin-topbar {
  background:#fff; padding:0 1.75rem; height:62px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100;
}
.topbar-title { font-family:var(--font-display); font-size:1.05rem; font-weight:700; color:var(--dark) }
.topbar-right { display:flex; align-items:center; gap:.75rem }
.admin-content { padding:1.75rem; flex:1 }

/* ── Admin stat cards ─────────────────────────────────── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.25rem; margin-bottom:2rem }
.stat-card {
  background:#fff; border-radius:var(--radius);
  padding:1.25rem; box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  display:flex; gap:1rem; align-items:flex-start;
}
.stat-icon {
  width:46px; height:46px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0;
}
.stat-icon.green { background:var(--green-pale); color:var(--green) }
.stat-icon.gold  { background:var(--gold-light); color:var(--gold) }
.stat-icon.red   { background:#fef2f2; color:var(--red) }
.stat-icon.blue  { background:#eff6ff; color:#2563eb }
.stat-body label { font-size:.75rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em }
.stat-val { font-family:var(--font-display); font-size:1.9rem; font-weight:800; color:var(--dark); line-height:1.1 }

/* ── Admin table ─────────────────────────────────────── */
.admin-card {
  background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow-sm); border:1px solid var(--border); overflow:hidden;
  margin-bottom:1.5rem;
}
.admin-card-head {
  padding:.95rem 1.25rem; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem;
}
.admin-card-head strong { font-size:.95rem; color:var(--dark) }
.admin-card-body { padding:1.25rem }
table { width:100%; border-collapse:collapse }
thead th {
  background:#f9fafb; padding:.65rem 1rem;
  text-align:left; font-size:.74rem; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); font-weight:700;
  border-bottom:1px solid var(--border);
}
tbody td { padding:.75rem 1rem; font-size:.875rem; border-bottom:1px solid var(--border); vertical-align:middle }
tbody tr:last-child td { border-bottom:none }
tbody tr:hover td { background:#fafafa }
.tbl-img { width:46px; height:38px; object-fit:cover; border-radius:6px }

/* ── Status pills ──────────────────────────────────────── */
.status {
  display:inline-block; padding:.22rem .7rem; border-radius:20px;
  font-size:.73rem; font-weight:700; text-transform:capitalize;
}
.s-pending    { background:#fef3c7; color:#92400e }
.s-in_process { background:#dbeafe; color:#1d4ed8 }
.s-delivered  { background:#dcfce7; color:#15803d }
.s-cancelled  { background:#fee2e2; color:#b91c1c }
.s-paid       { background:#dcfce7; color:#15803d }
.s-unpaid     { background:#fee2e2; color:#b91c1c }
.s-partial    { background:#fef3c7; color:#92400e }

/* ── Empty / Loading ───────────────────────────────────── */
.empty-state { text-align:center; padding:4rem 1rem }
.empty-icon  { font-size:3.5rem; margin-bottom:1rem; opacity:.5 }
.spinner {
  width:32px; height:32px;
  border:3px solid var(--border); border-top-color:var(--green);
  border-radius:50%; animation:spin .7s linear infinite; margin:0 auto;
}
@keyframes spin { to{ transform:rotate(360deg) } }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .hero-grid       { grid-template-columns:1fr; }
  .hero-visual     { display:none }
  .features-grid   { grid-template-columns:1fr 1fr }
  .footer-grid     { grid-template-columns:1fr 1fr }
  .why-grid        { grid-template-columns:1fr }
  .why-visual      { display:none }
}
@media(max-width:900px){
  .detail-grid     { grid-template-columns:1fr }
  .nav-center,.nav-search { display:none }
  .hamburger       { display:flex }
  .products-grid   { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) }
}
@media(max-width:768px){
  .filter-inner    { gap:.4rem }
  .filter-search-wrap { margin-left:0; width:100% }
  .filter-search-wrap input { flex:1 }
  .hero            { padding:3.5rem 0 3rem }
  .features-grid   { grid-template-columns:1fr }
  .footer-grid     { grid-template-columns:1fr }
  .sidebar         { transform:translateX(-100%) }
  .sidebar.open    { transform:translateX(0) }
  .admin-main      { margin-left:0 }
  .stat-grid       { grid-template-columns:1fr 1fr }
  .form-row        { grid-template-columns:1fr }
  .form-row-3      { grid-template-columns:1fr }
}
@media(max-width:480px){
  .products-grid   { grid-template-columns:1fr 1fr; gap:1rem }
  .card-body       { padding:.85rem }
  .card-footer     { padding:.7rem .85rem }
  .hero-trust      { gap:1.25rem }
  .stat-grid       { grid-template-columns:1fr }
}