@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
/* Jumia Theme Overrides for AJ FASHION */
/* Brand reference:
   - Primary (Jumia Orange): #F68B1E
   - Dark/Black: #111111
   - Light orange backgrounds: #FFF4E5 / #FFE9CC / #FFF7EE
   - Neutral gray: #F5F5F5
*/

:root {
  --primary: #F68B1E;
  --secondary: #111111; /* Use black as secondary CTA/accents */
  --accent: #FFF4E5; /* Soft orange tint for subtle backgrounds */
  --light: #ffffff;
  --dark: #222222;
  --gray: #F5F5F5;
  --dark-gray: #777777;

  /* Shades */
  --primary-700: #C85D00;
  --primary-600: #D96B00;
  --primary-500: #F68B1E;
  --primary-300: #FFB971;
  --primary-200: #FFE9CC;
  --primary-100: #FFF4E5;
}

/* Mobile header positioning overrides (Jumia-like): hamburger left, logo centered) */
@media (max-width: 768px) {
  .site-header .header-inner { position: relative; justify-content: center; }
  .site-header .mobile-menu-btn {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex !important;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    z-index: 1201;
  }
  .site-header .logo-link {
    margin-left: auto;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .site-header .site-logo { height: 40px; }
}
/* Announcement bar (keep header offset 32px) */
.announcement-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 32px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 1001;
}
.announcement-bar .marquee { white-space: nowrap; animation: ajf-marquee 18s linear infinite; }
@keyframes ajf-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

html, body { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; }
h1, h2, h3, h4, .section-title, .footer-logo, .site-brand { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; }
.btn, .products .btn, .hero .btn, .category-card .btn, .checkout-btn, .hero-modern-cta, .apply-filters, .cta-gold { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; }
/* Global emphasis colors */
.section-title,
h1, h2, h3, h4 { color: var(--primary); }

/* Primary buttons and CTAs */
.btn,
.products .btn,
.hero .btn,
.category-card .btn,
.checkout-btn,
.hero-modern-cta,
.apply-filters,
.cta-gold {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: transparent;
}
.btn:hover,
.products .btn:hover,
.hero .btn:hover,
.category-card .btn:hover,
.checkout-btn:hover,
.hero-modern-cta:hover,
.apply-filters:hover,
.cta-gold:hover { background: var(--primary-600) !important; }

/* Secondary button uses black with orange hover */
.btn-secondary { background: #111 !important; color: #fff !important; }
.btn-secondary:hover { background: var(--primary) !important; }

/* Links hover tone */
a:hover { color: var(--primary); }

/* Filters and selects (override old rose-gold hexes) */
#filterBtn { border-color: var(--primary) !important; color: var(--primary) !important; }
#filterBtn:hover, #filterBtn:focus {
  background: var(--primary-100) !important;
  border-color: var(--primary-600) !important;
  color: var(--primary-600) !important;
  box-shadow: 0 4px 18px rgba(246,139,30,0.2) !important;
}
.filter-dropdown { box-shadow: 0 8px 32px rgba(246,139,30,0.13) !important; border-color: rgba(246,139,30,0.35) !important; }
.filter-dropdown:hover, .filter-dropdown:focus-within { box-shadow: 0 12px 40px rgba(246,139,30,0.18) !important; border-color: var(--primary) !important; }
.apply-filters { box-shadow: 0 1px 6px rgba(246,139,30,0.12) !important; }

.shop-sort label { color: var(--primary) !important; }
.shop-sort select {
  border-color: var(--primary) !important;
  box-shadow: 0 2px 12px rgba(246,139,30,0.12) !important;
}
.shop-sort select:hover, .shop-sort select:focus {
  background: var(--primary-100) !important;
  color: var(--primary-600) !important;
  box-shadow: 0 6px 20px rgba(246,139,30,0.20) !important;
}
.shop-sort::after {
  content: '' !important;
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; pointer-events: none;
  background: url('data:image/svg+xml;utf8,<svg fill="%23F68B1E" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat center/contain !important;
}

/* Product accents */
.product-badge { background: var(--primary) !important; color: #fff !important; }
.product-price,
.method-price,
.order-item-price,
.cart-item-price { color: var(--primary) !important; }

/* Quantity controls and remove */
.qty-btn { background: var(--primary-200) !important; color: var(--primary) !important; }
.qty-btn:hover, .qty-btn:focus { background: var(--primary) !important; color: #fff !important; }
.remove-cart-item { color: var(--primary) !important; }
.remove-cart-item:hover, .remove-cart-item:focus { color: var(--primary-600) !important; }

/* Cart summary visuals */
.cart-summary-card { background: #FFF7EE !important; }
.cart-summary-card h3, .cart-summary-value { color: var(--primary) !important; }
.secure-checkout { color: var(--primary) !important; }
.cart-summary-bar { background: var(--primary-200) !important; }

/* Hero arrows and dots */
.hero-carousel-prev, .hero-carousel-next { background: var(--primary) !important; color: #fff !important; }
.hero-carousel-prev:hover, .hero-carousel-next:hover { background: var(--primary-600) !important; }
.hero-arrow { border-color: var(--primary) !important; color: var(--primary) !important; }
.hero-arrow:hover, .hero-arrow:focus { background: var(--primary) !important; color: #fff !important; }
.hero-dot, .hero-modern-carousel-dot { border-color: var(--primary) !important; }
.hero-dot.active, .hero-dot:focus, .hero-modern-carousel-dot.active, .hero-modern-carousel-dot:focus { background: var(--primary) !important; border-color: var(--primary) !important; }

/* Value icons and overlays */
.value-icon { background: var(--primary-100) !important; color: var(--primary) !important; }
.instagram-overlay { background-color: rgba(246,139,30,0.70) !important; }

/* Footer tweaks */
footer { background: #111 !important; }
.footer-logo span { color: var(--primary) !important; }
.social-icon:hover { background-color: var(--primary) !important; }
.footer-links a:hover { color: var(--primary) !important; opacity: 1 !important; }
.footer-contact i { color: var(--primary) !important; }

/* Checkout page icon and emphasis colors */
.checkout-form-card h2 i,
.shipping-section h3 i,
.payment-section h3 i { color: var(--primary) !important; }
.payment-method-header span { color: var(--primary) !important; }
.payment-icons .fas.fa-university { color: var(--primary) !important; }
.paystack-btn { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-600) 100%) !important; }
.paystack-btn:hover { background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary) 100%) !important; }

/* Notification */
.notification { color: var(--primary) !important; border-left-color: var(--primary) !important; box-shadow: 0 8px 32px rgba(246,139,30,0.18) !important; }
.notification .notif-icon { color: var(--primary) !important; }

/* Accessibility focus outline aligns with brand color */
:focus-visible { outline-color: var(--primary) !important; }