/* ============================================================
   AVEFON TRADE LTD — Brand & Platform CSS
   Navy #1B2D6B | Gold #D4AF37
   Procurement / Buying Platform
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

:root {
  --navy:      #1B2D6B;
  --navy-d:    #111E4A;
  --navy-m:    #253D8A;
  --navy-l:    #EEF1FB;
  --gold:      #D4AF37;
  --gold-l:    #FDF6DC;
  --gold-d:    #8A7010;
  --red:       #E53935;
  --green:     #2E7D32;
  --border:    #E0E4EF;
  --muted:     #6B7280;
  --surface:   #F5F6FA;
}

/* ── GLOBAL ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif !important; background: var(--surface); }
h1,h2,h3,h4,h5 { font-family: 'Playfair Display', serif !important; }
a { text-decoration: none; }

/* ── TOPBAR ───────────────────────────────────────────── */
.topbar { background: var(--navy-d) !important; border-bottom: 2px solid var(--gold) !important; }
.topbar a, .topbar-right a { color: rgba(255,255,255,0.65) !important; font-size: 12px !important; }
.topbar a:hover { color: var(--gold) !important; }
.topbar-left a:first-child { color: var(--gold) !important; font-weight: 600 !important; }
.topbar-marquee-track span { color: rgba(255,255,255,0.7) !important; }
.topbar-marquee-track span:first-child { color: var(--gold) !important; font-weight: 600 !important; }

/* ── HEADER ───────────────────────────────────────────── */
.site-header { background: var(--navy) !important; border-bottom: 3px solid var(--gold) !important; box-shadow: 0 4px 20px rgba(27,45,107,0.35) !important; }
.logo-name { font-family: 'Playfair Display', serif !important; color: #fff !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: 1px !important; }
.logo-name span { color: var(--gold) !important; }
.logo-tagline { color: rgba(255,255,255,0.5) !important; font-size: 10px !important; letter-spacing: 0.8px !important; }
.search-form { border: 2px solid var(--gold) !important; border-radius: 6px !important; overflow: hidden !important; }
.search-category { background: var(--navy-m) !important; color: rgba(255,255,255,0.85) !important; border-right: 1px solid rgba(212,175,55,0.3) !important; font-size: 12px !important; }
.search-input { background: #fff !important; color: #1A1A2E !important; }
.search-submit { background: var(--gold) !important; color: var(--navy-d) !important; font-weight: 700 !important; }
.search-submit:hover { background: var(--gold-d) !important; }
.hdr-btn { color: rgba(255,255,255,0.85) !important; }
.hdr-btn:hover { color: var(--gold) !important; background: rgba(255,255,255,0.08) !important; border-radius: 5px !important; }
.hdr-btn-label { color: rgba(255,255,255,0.85) !important; font-size: 11px !important; }
.hdr-badge { background: var(--gold) !important; color: var(--navy-d) !important; font-weight: 700 !important; }
.hamburger span { background: #fff !important; }

/* ── NAVBAR ───────────────────────────────────────────── */
.site-navbar { background: var(--navy-m) !important; border-bottom: 1px solid rgba(212,175,55,0.2) !important; }
.nav-link { color: rgba(255,255,255,0.82) !important; font-size: 12px !important; font-weight: 500 !important; padding: 10px 14px !important; }
.nav-link:hover, .nav-link.nav-active { color: var(--gold) !important; }
.nav-fire { color: #FFB74D !important; font-weight: 700 !important; }
.nav-all { background: rgba(255,255,255,0.1) !important; border-radius: 4px !important; color: #fff !important; font-weight: 600 !important; }
.nav-all:hover { background: var(--gold) !important; color: var(--navy-d) !important; }
.nav-cat-dropdown { border-top: 2px solid var(--gold) !important; box-shadow: 0 8px 32px rgba(27,45,107,0.2) !important; }
.nav-cat-dropdown a:hover { background: var(--navy-l) !important; color: var(--navy) !important; }

/* ── CATEGORY SIDEBAR ─────────────────────────────────── */
.cat-sidebar { border-right: 1px solid var(--border) !important; background: #fff !important; }
.cat-sidebar-head { background: var(--navy) !important; color: #fff !important; font-weight: 700 !important; font-size: 13px !important; padding: 12px 16px !important; }
.cat-sidebar-item { color: #1A1A2E !important; font-size: 13px !important; border-bottom: 1px solid #F3F4F6 !important; transition: all 0.2s !important; }
.cat-sidebar-item:hover { background: var(--navy-l) !important; color: var(--navy) !important; padding-left: 22px !important; }
.cat-sidebar-arrow { color: var(--gold) !important; }

/* ── HERO SLIDER ──────────────────────────────────────── */
.slide-bg-overlay { background: linear-gradient(120deg, rgba(17,30,74,0.88) 0%, rgba(27,45,107,0.6) 55%, transparent 100%) !important; }
.slide-tag { background: var(--gold) !important; color: var(--navy-d) !important; font-weight: 700 !important; border-radius: 3px !important; font-size: 10px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; padding: 4px 10px !important; }
.slide-title { font-family: 'Playfair Display', serif !important; color: #fff !important; font-size: 32px !important; font-weight: 700 !important; line-height: 1.3 !important; }
.slide-sub { color: rgba(255,255,255,0.8) !important; font-size: 14px !important; line-height: 1.7 !important; }
.slide-cta { background: var(--gold) !important; color: var(--navy-d) !important; font-weight: 700 !important; border-radius: 5px !important; padding: 11px 24px !important; font-size: 14px !important; display: inline-block !important; }
.slide-cta:hover { background: var(--gold-d) !important; color: #fff !important; }
.slider-prev, .slider-next { background: rgba(212,175,55,0.15) !important; border: 1px solid rgba(212,175,55,0.4) !important; color: var(--gold) !important; }
.slider-prev:hover, .slider-next:hover { background: var(--gold) !important; color: var(--navy-d) !important; }
.dot.active { background: var(--gold) !important; }

/* ── PROMO STRIP ──────────────────────────────────────── */
.promo-strip { background: #fff !important; border: 1px solid var(--border) !important; border-radius: 8px !important; margin: 14px 0 !important; }
.promo-item { border-right: 1px solid var(--border) !important; transition: all 0.2s !important; padding: 16px !important; }
.promo-item:hover { background: var(--navy-l) !important; }
.promo-icon { font-size: 28px !important; }
.promo-title { color: var(--navy) !important; font-weight: 700 !important; font-size: 13px !important; }
.promo-sub { color: var(--muted) !important; font-size: 11px !important; }

/* ── SECTION HEADERS ──────────────────────────────────── */
.section-badge { background: var(--navy) !important; color: #fff !important; font-weight: 700 !important; border-radius: 4px !important; padding: 5px 12px !important; font-size: 13px !important; }
.see-all-link { color: var(--navy) !important; font-weight: 600 !important; border: 1px solid var(--gold) !important; padding: 6px 14px !important; border-radius: 4px !important; font-size: 12px !important; }
.see-all-link:hover { background: var(--gold) !important; color: var(--navy-d) !important; }
.cd-block { background: var(--navy) !important; color: var(--gold) !important; font-weight: 700 !important; border-radius: 4px !important; padding: 4px 8px !important; }
.cd-sep { color: var(--navy) !important; font-weight: 700 !important; }
.cd-ends { color: var(--red) !important; font-weight: 600 !important; font-size: 12px !important; }

/* ── BUYING ITEM CARDS ────────────────────────────────── */
/* Override product cards to be "Buying Item" cards */
.product-card { border: 1px solid var(--border) !important; border-radius: 10px !important; transition: all 0.25s ease !important; background: #fff !important; overflow: hidden !important; }
.product-card:hover { box-shadow: 0 6px 28px rgba(27,45,107,0.14) !important; transform: translateY(-3px) !important; border-color: rgba(27,45,107,0.22) !important; }
.product-card-badge { border-radius: 3px !important; font-weight: 700 !important; font-size: 10px !important; }
.badge-sale { background: var(--red) !important; color: #fff !important; }
.badge-hot { background: var(--gold) !important; color: var(--navy-d) !important; }
.badge-new { background: var(--green) !important; color: #fff !important; }
.product-name a { color: #1A1A2E !important; font-size: 13px !important; font-weight: 500 !important; }
.product-name a:hover { color: var(--navy) !important; }
.stars { color: var(--gold) !important; }
.price-current { color: var(--navy) !important; font-size: 18px !important; font-weight: 700 !important; }
.price-old { color: var(--muted) !important; text-decoration: line-through !important; font-size: 12px !important; }
.price-label { font-size: 10px !important; color: var(--muted) !important; display: block !important; margin-bottom: 2px !important; }

/* Sell to Us button — replaces Add to Cart */
.action-btn-cart {
  background: var(--navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  width: 100% !important;
  padding: 9px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  font-family: 'Poppins', sans-serif !important;
}
.action-btn-cart:hover { background: var(--gold-d) !important; }
.action-btn-quick { background: var(--navy-l) !important; color: var(--navy) !important; border-radius: 5px !important; font-size: 12px !important; font-weight: 600 !important; border: 1px solid var(--border) !important; }
.action-btn-quick:hover { background: var(--navy) !important; color: #fff !important; }
.product-actions { display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 10px 12px 12px !important; }

/* ── MOBILE DRAWER ────────────────────────────────────── */
.mob-drawer { background: #fff !important; border-right: 3px solid var(--gold) !important; }
.mob-drawer-head { background: var(--navy) !important; }
.mob-drawer-logo { color: #fff !important; font-family: 'Playfair Display', serif !important; font-size: 18px !important; }
.mob-drawer-logo span { color: var(--gold) !important; }
.mob-close { color: rgba(255,255,255,0.6) !important; background: none !important; border: none !important; font-size: 22px !important; cursor: pointer !important; }
.mob-section-label { color: var(--navy) !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; padding: 10px 16px 4px !important; margin: 0 !important; }
.mob-nav-link { color: #1A1A2E !important; border-bottom: 1px solid #F3F4F6 !important; padding: 12px 16px !important; display: flex !important; align-items: center !important; gap: 10px !important; }
.mob-nav-link:hover { background: var(--navy-l) !important; color: var(--navy) !important; }
.mob-nav-arrow { color: var(--gold) !important; margin-left: auto !important; }
.mob-drawer-promo { background: var(--navy) !important; margin: 16px !important; border-radius: 8px !important; padding: 14px !important; }
.mob-drawer-promo p { color: var(--gold) !important; font-weight: 700 !important; font-size: 14px !important; margin: 0 0 4px !important; }
.mob-drawer-promo small { color: rgba(255,255,255,0.6) !important; font-size: 11px !important; }
.mob-drawer-promo a { display: inline-block !important; margin-top: 10px !important; background: var(--gold) !important; color: var(--navy-d) !important; padding: 8px 16px !important; border-radius: 4px !important; font-weight: 700 !important; font-size: 13px !important; }

/* ── FOOTER ───────────────────────────────────────────── */
.site-footer { background: var(--navy-d) !important; border-top: 3px solid var(--gold) !important; }
.footer-brand-name { color: var(--gold) !important; font-family: 'Playfair Display', serif !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: 1px !important; }
.footer-brand-name span { color: #fff !important; }
.footer-tagline, .footer-desc { color: rgba(255,255,255,0.5) !important; font-size: 12px !important; line-height: 1.7 !important; }
.footer-col-title { color: var(--gold) !important; font-weight: 700 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; border-bottom: 1px solid rgba(212,175,55,0.2) !important; padding-bottom: 8px !important; margin-bottom: 14px !important; }
.footer-links a { color: rgba(255,255,255,0.55) !important; font-size: 12px !important; display: block !important; padding: 3px 0 !important; transition: all 0.2s !important; }
.footer-links a:hover { color: var(--gold) !important; padding-left: 5px !important; }
.footer-bottom { background: rgba(0,0,0,0.25) !important; border-top: 1px solid rgba(255,255,255,0.07) !important; }
.footer-copy, .footer-copy a { color: rgba(255,255,255,0.35) !important; font-size: 11px !important; }
.newsletter-form input { background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(212,175,55,0.3) !important; color: #fff !important; }
.newsletter-form button { background: var(--gold) !important; color: var(--navy-d) !important; font-weight: 700 !important; }

/* ============================================================
   AVEFON CUSTOM SECTIONS
   ============================================================ */

/* ── HOW TO SELL BANNER ───────────────────────────────── */
.av-how-banner {
  background: var(--navy);
  border-radius: 10px;
  padding: 28px 32px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(212,175,55,0.2);
  flex-wrap: wrap;
}
.av-how-banner h3 { font-family: 'Playfair Display', serif; color: #fff; font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.av-how-banner h3 span { color: var(--gold); }
.av-how-banner p { color: rgba(255,255,255,0.65); font-size: 13px; line-height: 1.6; max-width: 480px; }
.av-how-steps { display: flex; gap: 0; flex-wrap: wrap; }
.av-how-step { text-align: center; padding: 0 20px; border-right: 1px solid rgba(255,255,255,0.1); }
.av-how-step:last-child { border-right: none; }
.av-how-num { width: 36px; height: 36px; background: var(--gold); color: var(--navy-d); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; margin: 0 auto 6px; }
.av-how-step-t { color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.av-how-step-s { color: rgba(255,255,255,0.5); font-size: 10px; margin-top: 2px; }

/* ── SELL MODAL ───────────────────────────────────────── */
.av-overlay { display: none; position: fixed; inset: 0; background: rgba(10,15,40,0.72); z-index: 9999; align-items: center; justify-content: center; padding: 1rem; }
.av-overlay.open { display: flex; }
.av-modal { background: #fff; border-radius: 12px; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; animation: avUp 0.28s ease; }
.av-modal.av-wide { max-width: 720px; }
@keyframes avUp { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.av-modal-hdr { background: var(--navy); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-radius: 12px 12px 0 0; position: sticky; top: 0; z-index: 1; }
.av-modal-title { color: #fff; font-weight: 700; font-size: 15px; font-family: 'Poppins', sans-serif; }
.av-modal-title span { color: var(--gold); }
.av-modal-subtitle { color: rgba(255,255,255,0.6); font-size: 11px; margin-top: 2px; }
.av-modal-close { background: none; border: none; color: rgba(255,255,255,0.55); font-size: 26px; cursor: pointer; line-height: 1; padding: 0; }
.av-modal-close:hover { color: #fff; }
.av-modal-body { padding: 22px 24px 28px; }

/* Form elements */
.av-tabs { display: flex; gap: 4px; background: var(--navy-l); padding: 4px; border-radius: 6px; margin-bottom: 20px; }
.av-tab { flex: 1; padding: 9px; border: none; background: transparent; border-radius: 5px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); transition: all 0.2s; font-family: 'Poppins', sans-serif; }
.av-tab.active { background: var(--navy); color: #fff; }
.av-lbl { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 5px; }
.av-lbl .req { color: var(--red); }
.av-input, .av-select, .av-textarea {
  width: 100%; padding: 10px 13px; border: 1px solid #D0D5E8;
  border-radius: 6px; font-size: 13px; color: #1A1A2E;
  background: #fff; font-family: 'Poppins', sans-serif; transition: all 0.2s;
}
.av-input:focus, .av-select:focus, .av-textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27,45,107,0.1); }
.av-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.av-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.av-mb { margin-bottom: 14px; }
.av-divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.av-submit {
  width: 100%; padding: 13px; background: var(--navy); color: #fff;
  border: none; border-radius: 6px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: 'Poppins', sans-serif; margin-top: 6px;
  letter-spacing: 0.4px; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.av-submit:hover { background: var(--gold-d); }
.av-submit:disabled { opacity: 0.7; cursor: not-allowed; }

/* Bank details box */
.av-bank-box { background: var(--gold-l); border: 1px solid rgba(212,175,55,0.3); border-radius: 8px; padding: 16px; margin-top: 4px; }
.av-bank-title { font-size: 11px; font-weight: 700; color: var(--gold-d); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.av-bank-warn { font-size: 11px; color: var(--gold-d); font-weight: 700; margin-top: 10px; display: flex; align-items: flex-start; gap: 5px; }

/* Item info pill */
.av-item-pill { background: var(--navy-l); border-left: 3px solid var(--navy); border-radius: 0 6px 6px 0; padding: 10px 14px; margin-bottom: 16px; }
.av-item-pill-name { font-size: 13px; font-weight: 700; color: var(--navy); }
.av-item-pill-price { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Success state */
.av-success { background: #E8F5E9; border: 1px solid #A5D6A7; border-radius: 10px; padding: 32px 24px; text-align: center; }
.av-success-icon { font-size: 52px; margin-bottom: 12px; }
.av-success h3 { font-size: 20px; color: #1B5E20; margin-bottom: 10px; }
.av-success p { font-size: 13px; color: #2E7D32; line-height: 1.7; }
.av-success .av-ref { background: #C8E6C9; border-radius: 4px; padding: 8px 14px; font-size: 13px; font-weight: 700; color: #1B5E20; margin: 14px auto; display: inline-block; }

/* ── SEND CODE BUTTON ─────────────────────────────────── */
.av-vc-btn { background: var(--navy); color: #fff; border: none; border-radius: 6px; padding: 10px 14px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: 'Poppins', sans-serif; flex-shrink: 0; transition: all 0.2s; }
.av-vc-btn:hover { background: var(--gold-d); }
.av-vc-btn.sent { background: var(--green); }

/* ── TOAST ────────────────────────────────────────────── */
.av-toast { position: fixed; bottom: 24px; right: 24px; background: var(--navy); color: #fff; padding: 13px 20px; border-radius: 8px; border-left: 4px solid var(--gold); font-size: 13px; font-weight: 600; box-shadow: 0 8px 32px rgba(27,45,107,0.28); z-index: 99999; transform: translateY(80px); opacity: 0; transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1); max-width: 320px; font-family: 'Poppins', sans-serif; }
.av-toast.show { transform: translateY(0); opacity: 1; }
.av-toast.t-success { border-left-color: #4CAF50; }
.av-toast.t-error { border-left-color: var(--red); }
.av-toast.t-info { border-left-color: #2196F3; }

/* ── BACK TO TOP ──────────────────────────────────────── */
#avTop { position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px; background: var(--navy); color: #fff; border: 2px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; z-index: 998; opacity: 0; pointer-events: none; transition: all 0.25s; box-shadow: 0 4px 16px rgba(27,45,107,0.3); }
#avTop.show { opacity: 1; pointer-events: all; }
#avTop:hover { background: var(--gold); color: var(--navy-d); }

/* ── SPINNER ──────────────────────────────────────────── */
.av-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: av-spin 0.7s linear infinite; display: inline-block; flex-shrink: 0; }
@keyframes av-spin { to { transform: rotate(360deg); } }

/* ── PROGRESS SOLD BAR ────────────────────────────────── */
.av-progress-wrap { margin-top: 6px; }
.av-progress-label { font-size: 10px; color: var(--muted); margin-bottom: 3px; display: flex; justify-content: space-between; }
.av-progress-bar { height: 4px; background: #eee; border-radius: 2px; overflow: hidden; }
.av-progress-fill { height: 100%; background: var(--red); border-radius: 2px; transition: width 0.6s ease; }

/* ── SELLER BADGE ─────────────────────────────────────── */
.av-seller-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--navy-l); color: var(--navy); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 10px; margin-top: 4px; }

/* ── FORM HINT ────────────────────────────────────────── */
.av-hint { font-size: 11px; color: var(--muted); margin-top: 3px; }
.av-hint.av-hint-warn { color: var(--gold-d); font-weight: 600; }

/* ── SECTION LABEL ────────────────────────────────────── */
.av-section-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 768px) {
  .av-row2 { grid-template-columns: 1fr; }
  .av-row3 { grid-template-columns: 1fr 1fr; }
  .av-how-banner { flex-direction: column; text-align: center; padding: 20px; }
  .av-how-steps { justify-content: center; }
  .av-how-step { padding: 0 12px; }
  .slide-title { font-size: 22px !important; }
  .av-modal.av-wide { max-width: 100%; }
}
@media (max-width: 480px) {
  .av-row3 { grid-template-columns: 1fr; }
  #avTop { bottom: 16px; right: 16px; }
}

/* ============================================================
   CATEGORY TILE FIXES — emoji icons instead of images
   ============================================================ */
.cat-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; transition: all 0.2s; cursor: pointer; }
.cat-tile:hover { border-color: var(--navy); box-shadow: 0 4px 16px rgba(27,45,107,0.1); transform: translateY(-2px); }
.cat-tile-label { font-size: 12px; font-weight: 600; color: #1A1A2E; text-align: center; }
.cat-tile:hover .cat-tile-label { color: var(--navy); }

/* BANNER CARDS — fix positioning */
.banners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.banner-card { position: relative; border-radius: 10px; overflow: hidden; display: block; min-height: 280px; }
.banner-overlay { position: absolute !important; bottom: 0; left: 0; right: 0; padding: 20px !important; }
.banner-title { color: #fff !important; font-family: 'Playfair Display', serif !important; font-size: 20px !important; font-weight: 700 !important; margin-bottom: 10px !important; }
.banner-tag { font-size: 10px !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 3px !important; display: inline-block !important; margin-bottom: 6px !important; text-transform: uppercase !important; letter-spacing: 1px !important; }

/* STATS section */
.stats-section { background: var(--navy) !important; border-top: 3px solid var(--gold) !important; border-bottom: 3px solid var(--gold) !important; margin: 24px 0 !important; }
.stat-card { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(212,175,55,0.2) !important; border-radius: 8px !important; }
.stat-icon { font-size: 28px !important; margin-bottom: 6px !important; }
.stat-number { color: var(--gold) !important; font-family: 'Playfair Display', serif !important; font-size: 26px !important; font-weight: 700 !important; }
.stat-label { color: rgba(255,255,255,0.6) !important; font-size: 12px !important; }

/* SECTION TITLES */
.section-title { color: #1A1A2E !important; font-family: 'Playfair Display', serif !important; }
.section-title span { color: var(--navy) !important; }

/* Remove any leftover "Shop Now" references */
.banner-btn { font-weight: 700 !important; font-size: 13px !important; border-radius: 4px !important; padding: 8px 16px !important; display: inline-block !important; }

@media (max-width: 600px) {
  .banners-grid { grid-template-columns: 1fr; }
  .banner-card { min-height: 200px; }
}

/* ── HERO: Full-width slide option ───────────────────────────── */
/* Make hero slider take full remaining width when sidebar present */
.hero-section { display: grid; grid-template-columns: 220px 1fr; gap: 0; }
.hero-slider-wrap { border-radius: 0 10px 10px 0; overflow: hidden; }
.hero-slide { position: relative; min-height: 480px; }
.slide-bg { position: absolute; inset: 0; overflow: hidden; }
.slide-bg-clothing { position: absolute; inset: 0; width: 100%; height: 100%; }
.slide-content { position: relative; z-index: 2; padding: 48px 48px; max-width: 520px; }
.slide-title { font-size: 34px !important; line-height: 1.25 !important; font-weight: 700 !important; }

/* ── FOOTER: Full responsive fix ─────────────────────────────── */
.av-footer { background: #111E4A; border-top: 3px solid #D4AF37; }
.av-footer-main { padding: 48px 0 32px; }
.av-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 1.4fr;
  gap: 40px;
  padding: 0 24px;
}
.av-footer-bottom { background: rgba(0,0,0,0.3); border-top: 1px solid rgba(255,255,255,0.07); padding: 16px 0; }
.av-footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 24px; }
.av-footer-newsletter { background: linear-gradient(135deg,#1B2D6B,#253D8A); border-bottom: 1px solid rgba(212,175,55,0.2); padding: 28px 24px; }
.av-footer-nl-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* Responsive footer */
@media (max-width: 1100px) {
  .av-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .av-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 16px; }
  .av-footer-newsletter { padding: 20px 16px; }
  .av-footer-nl-inner { flex-direction: column; align-items: flex-start; }
  .av-footer-nl-form { width: 100%; min-width: unset; }
  .av-footer-bottom-inner { padding: 0 16px; }
  /* Hero mobile */
  .hero-section { grid-template-columns: 1fr; }
  .cat-sidebar { display: none; }
  .hero-slider-wrap { border-radius: 10px; }
  .hero-slide { min-height: 340px; }
  .slide-content { padding: 28px 20px; }
  .slide-title { font-size: 22px !important; }
  /* Product listing sidebar */
  .listing-grid { grid-template-columns: 1fr !important; }
  .listing-sidebar { display: none; }
}
@media (max-width: 480px) {
  .av-footer-grid { grid-template-columns: 1fr; }
  .av-cat-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ============================================================
   MOBILE LISTING PAGE — Stack sidebar above products
   ============================================================ */
@media (max-width: 768px) {

  /* Stack the listing grid vertically */
  .listing-grid,
  .product-listing-grid,
  [style*="grid-template-columns: 220px"] {
    display: block !important;
  }

  /* Sidebar full width, no sticky */
  .listing-sidebar,
  aside.listing-sidebar {
    width: 100% !important;
    position: static !important;
    margin-bottom: 16px !important;
  }

  /* Product grid full width */
  .listing-content,
  .product-listing-content {
    width: 100% !important;
  }
}

/* ============================================================
   AVEFON MOBILE RESPONSIVE — Clean Version
   ============================================================ */

/* ── HEADER: logo left, hamburger right ── */
@media (max-width: 768px) {

  .header-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    height: auto !important;
    padding: 12px 16px !important;
    gap: 0 !important;
  }

  .site-logo {
    order: 1 !important;
    flex-shrink: 0 !important;
  }

  .hamburger {
    order: 2 !important;
    margin-left: auto !important;
    display: flex !important;
    flex-shrink: 0 !important;
  }

  .header-icons {
    display: none !important;
  }

  .header-search {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 0 !important;
  }

  .site-navbar {
    display: none !important;
  }

  /* ── Gap between search and page content ── */
  .container > .hero-section,
  main .container > section:first-child,
  main .container > div:first-child {
    margin-top: 14px !important;
  }

  /* ── LISTING PAGE: sidebar above, products below ── */
  #listingGrid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  #listingSidebar {
    position: static !important;
    width: 100% !important;
  }
}

/* ============================================================
   MOBILE LAYOUT — Logo left | Hamburger right | Spaced sections
   ============================================================ */
@media (max-width: 768px) {

  /* ── TOPBAR: hide on mobile to save space ── */
  .topbar { display: none !important; }

  /* ── HEADER: clean single row, proper padding ── */
  .site-header { padding: 0 !important; }
  .header-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    height: auto !important;
    padding: 14px 16px !important;
    gap: 0 !important;
  }

  /* Logo: left */
  .site-logo   { order: 1 !important; flex-shrink: 0 !important; }

  /* Search: drop to its own full-width row below logo/hamburger */
  .header-search {
    order: 10 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    padding: 8px 0 4px !important;
    display: block !important;
  }
  /* Hide account icons — inside hamburger on mobile */
  .header-icons { display: none !important; }

  /* Hamburger: right */
  .hamburger {
    order: 2 !important;
    display: flex !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  /* ── SEARCH BAR: its own row with clear spacing ── */
  .header-search-mobile {
    display: block !important;
    padding: 12px 16px 0 !important;
    background: var(--navy, #1B2D6B) !important;
  }
  .header-search-mobile .search-form {
    width: 100% !important;
    display: flex !important;
  }

  /* ── NAVBAR: hide the desktop nav ── */
  .site-navbar { display: none !important; }

  /* ── HERO SECTION: clear gap from search bar ── */
  .container > .hero-section,
  .hero-section {
    margin-top: 16px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 12px !important;
  }
}

@media (max-width: 480px) {
  .header-inner { padding: 12px 14px !important; }
  .hero-section { margin-top: 12px !important; padding: 0 10px 10px !important; }
}

/* ============================================================
   MOBILE RESPONSIVE FIXES — /shop/ and /item/ pages
   ============================================================ */
@media (max-width: 768px) {

  /* ── SHOP / PRODUCT LISTING ─────────────────────────────── */
  /* Stack sidebar above products */
  .container > div[style*="grid-template-columns:220px"],
  div[style*="grid-template-columns:220px 1fr"] {
    display: block !important;
  }

  /* Sidebar: horizontal scrollable pills on mobile */
  aside[style*="position:sticky"],
  div[style*="position:sticky;top:80px"] {
    position: static !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    background: #fff !important;
    border-radius: 8px !important;
    margin-bottom: 14px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  aside[style*="position:sticky"] a,
  div[style*="position:sticky;top:80px"] a {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    border: 1px solid #E0E4EF !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: #1B2D6B !important;
    display: inline-block !important;
    border-bottom: none !important;
  }

  /* Product grid: 2 columns on mobile */
  div[style*="grid-template-columns:repeat(auto-fill,minmax(195px"] ,
  div[style*="grid-template-columns:repeat(auto-fill,minmax(200px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    display: grid !important;
  }

  /* ── PRODUCT DETAIL /item/ ──────────────────────────────── */
  /* Stack image above details */
  div[style*="grid-template-columns:1fr 1fr"][style*="box-shadow"] {
    display: block !important;
  }

  /* Image section full width */
  div[style*="grid-template-columns:1fr 1fr"][style*="box-shadow"] > div:first-child {
    min-height: 240px !important;
    border-radius: 12px 12px 0 0 !important;
  }

  /* Details section padding */
  div[style*="grid-template-columns:1fr 1fr"][style*="box-shadow"] > div:last-child {
    padding: 20px 16px !important;
  }

  /* Price font size */
  div[style*="font-size:36px"] {
    font-size: 28px !important;
  }

  /* Key info grid: 2 cols */
  div[style*="grid-template-columns:1fr 1fr;gap:10px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Related items: 2 cols */
  div[style*="grid-template-columns:repeat(auto-fill,minmax(200px,1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* ── SELL OFFER FORM ────────────────────────────────────── */
  div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    display: grid !important;
  }
  div[style*="grid-template-columns:1fr 1fr;gap:12px"],
  div[style*="grid-template-columns:1fr 1fr;gap:14px"] {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  /* ── GENERAL CONTAINER PADDING ─────────────────────────── */
  .container { padding-left: 12px !important; padding-right: 12px !important; }

  /* ── HERO SECTION ───────────────────────────────────────── */
  .hero-section { padding: 12px !important; }
  .cat-sidebar  { display: none !important; }
}

@media (max-width: 480px) {
  /* Single column product grid on very small screens */
  div[style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Sell offer 3-col → 1 col */
  div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   MOBILE HEADER — Logo left | Hamburger right | Search below
   ============================================================ */
@media (max-width: 768px) {

  /* Topbar hidden on mobile */
  .topbar { display: none !important; }

  /* Header wraps so search drops to row 2 */
  .header-inner {
    flex-wrap: wrap !important;
    padding: 10px 16px !important;
    height: auto !important;
    gap: 0 !important;
    align-items: center !important;
  }

  /* Row 1: Logo left */
  .site-logo {
    order: 1 !important;
    flex-shrink: 0 !important;
  }

  /* Row 1: Hide account icons */
  .header-icons {
    display: none !important;
  }

  /* Row 1: Hamburger far right */
  .hamburger {
    order: 2 !important;
    margin-left: auto !important;
    display: flex !important;
  }

  /* Row 2: Search bar full width */
  .header-search {
    order: 3 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    padding-top: 10px !important;
    display: block !important;
  }

  /* Gap between search and hero */
  .site-navbar { display: none !important; }

  .hero-section {
    margin-top: 14px !important;
    padding: 0 12px 12px !important;
  }
}

/* ============================================================
   BOTTOM NAV — 4 items only: Home, Sell, Cart, Account
   WhatsApp float moved above bottom nav
   ============================================================ */
@media (max-width: 768px) {
  /* Bottom nav: 4 equal items */
  .bottom-nav-inner {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* WhatsApp float: sits above the bottom nav */
  #waFloat {
    bottom: 76px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
  }

  /* Back to top button also moved up */
  #avTop {
    bottom: 76px !important;
  }
}

.hero-slide { position: relative; overflow: hidden; }
.slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.slide-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 8s ease; }
.hero-slide.is-active .slide-bg-img { transform: scale(1.06); }
.slide-bg-overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(17,30,74,0.82) 0%, rgba(17,30,74,0.65) 50%, rgba(17,30,74,0.35) 100%); }
.slide-content { position: relative; z-index: 2; }