/* ============================================================
   FIFOZONE COMPLETE FIXES v5.0
   ============================================================ */

/* ============================================================
   FORCE FULL WIDTH — Hello Elementor parent theme fix
   ============================================================ */
/* ============================================================
   BANNER OVERLAP FIX — Hello Elementor wrapper reset
   ============================================================ */

/* Strip article/entry wrapper padding Hello Elementor adds */
.hentry, article.page, .entry-content, .page-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Remove any body padding-top */
html body, html body.page, html body.woocommerce-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* All banners: break out of any container, true edge-to-edge */
.fifo-category-hero,
.fifo-contact-banner-wrap,
.about-hero,
.blog-hero,
.home-hero {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* All banner images: full width, nothing cropped */
.fifo-category-hero img,
.fifo-contact-banner-wrap img,
.about-hero img,
.blog-hero img,
.home-hero img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    border-radius: 0 !important;
}
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}

#page,
#content,
.site,
.site-content,
.hfeed,
.elementor-section-wrap,
.e-con-inner,
.elementor-container {
  overflow: visible !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── HERO: full bleed ── */
.home-hero,
.fifo-category-hero,
.fifo-cat-banner-img-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  position: static !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  box-shadow: none !important;
}

.home-hero img,
.home-hero-banner,
.fifo-category-hero img,
.fifo-cat-banner-img-wrap img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  aspect-ratio: unset !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Fix scrollbar overflow gap ── */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ============================================================
   HERO/BANNER — FULL WIDTH
   ============================================================ */
.home-hero,
.fifo-category-hero,
.fifo-cat-banner-img-wrap {
  width: calc(100vw) !important;
  max-width: calc(100vw) !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: block !important;
}

.home-hero img,
.home-hero-banner,
.fifo-category-hero img,
.fifo-cat-banner-img-wrap img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  aspect-ratio: unset !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Other banners stay contained ── */
.blog-hero,
.about-hero,
.fifo-contact-banner-wrap,
.fifo-search-hero,
.fifo-cat-banner-fallback,
.hero-gradient,
.hero-blue {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 28px;
  overflow: hidden;
  /* border-radius: 24 px; */
}

.blog-hero img,
.about-hero img,
.fifo-contact-banner-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .home-hero,
  .fifo-category-hero,
  .fifo-cat-banner-img-wrap { border-radius: 0 !important; }
  .blog-hero, .about-hero, .fifo-search-hero,
  .hero-gradient, .hero-blue { border-radius: 22px; margin-bottom: 24px; }
}

@media (max-width: 768px) {
  .home-hero,
  .fifo-category-hero,
  .fifo-cat-banner-img-wrap { border-radius: 0 !important; }
  .blog-hero, .about-hero, .fifo-search-hero,
  .hero-gradient, .hero-blue { border-radius: 18px; }
}

/* ============================================================
   3. FOOTER SOCIAL ICONS — PERFECT CIRCLES, CENTERED
   ============================================================ */
.fifo-socials {
  display: flex !important;
  gap: 12px !important;
  margin-top: 16px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Reset and rebuild social button completely */
.fifo-social-btn {
  /* Fixed size circle */
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border-radius: 50% !important;
  
  /* Perfect centering */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Appearance */
  background: #f1f5f9 !important;
  color: #475569 !important;
  text-decoration: none !important;
  
  /* Clipping */
  overflow: hidden !important;
  
  /* Transitions */
  transition: background 0.28s ease, color 0.28s ease, 
              transform 0.28s cubic-bezier(0.2,0.9,0.2,1),
              box-shadow 0.28s ease !important;
  
  /* Shadow */
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(0,0,0,0.04) !important;
  
  /* No pseudo-element interference */
  position: relative !important;
  flex-shrink: 0 !important;
  
  /* No weird text behavior */
  line-height: 1 !important;
  font-size: 0 !important;
}

/* Remove ALL pseudo-elements that cause misalignment */
.fifo-social-btn::before,
.fifo-social-btn::after {
  display: none !important;
  content: none !important;
}

/* SVG icons — perfectly sized, perfectly centered */
.fifo-social-btn svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease !important;
  /* Prevent any margin/padding issues */
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  /* Ensure proper rendering */
  overflow: visible !important;
}

/* Per-icon hover colors */
.fifo-social-btn.wa:hover  { background: #25D366 !important; color: white !important; }
.fifo-social-btn.fb:hover  { background: #1877F2 !important; color: white !important; }
.fifo-social-btn.ig:hover  { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important; color: white !important; }
.fifo-social-btn.tw:hover  { background: #000000 !important; color: white !important; }
.fifo-social-btn.li:hover  { background: #0A66C2 !important; color: white !important; }

/* Hover lift & shadow */
.fifo-social-btn:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}
.fifo-social-btn:hover svg {
  transform: scale(1.08) !important;
}

/* Active (click) feedback */
.fifo-social-btn:active {
  transform: translateY(-1px) scale(1.02) !important;
}

/* Tooltip — optional clean tooltip */
.fifo-social-btn[title] {
  /* Use CSS tooltip via ::after if needed */
}

/* ============================================================
   4. CATEGORY HERO BANNERS — FULL & UNCROPPED
   ============================================================ */

/*
 * KILL the grey WooCommerce page-title / breadcrumb section
 * that appears above the hero banner on category pages.
 * Belt-and-suspenders: hide via CSS too, in case the PHP
 * remove_action() doesn't fire before certain parent-theme hooks.
 */
.woocommerce-products-header,
.woocommerce-breadcrumb,
.fifo-cat-page-title,
.woocommerce-page .page-header,
.woocommerce-page .page-title-section,
body.tax-product_cat .woocommerce-breadcrumb,
body.tax-product_cat .woocommerce-products-header,
body.tax-product_cat .page-header {
  display: none !important;
}

/* Main hero container — full width, no cropping */
.fifo-category-hero {
  width: 100% !important;
  position: relative !important;
  overflow: visible !important;   /* changed: was hidden (caused side crops) */
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  background: #f0f4f8 !important; /* subtle fallback while image loads */
  /* NO max-height — let the image breathe at its natural proportions */
}

/* The image itself — full width, natural height, zero cropping */
.fifo-category-hero img {
  width: 100% !important;
  height: auto !important;         /* natural proportions, nothing cut */
  max-height: none !important;     /* remove previous 420px cap */
  object-fit: fill !important;     /* changed: was cover (caused cropping) */
  display: block !important;
  /* Cap at a premium desktop height while still keeping full width */
  max-width: 100% !important;
}

/*
 * Desktop — cap height so it doesn't go enormous on 4K screens,
 * but still shows the full image width-fitted and uncropped.
 * Using aspect-ratio as the constraint is cleaner than max-height.
 */
@media (min-width: 1025px) {
  .fifo-category-hero {
    /* Banner images are roughly 16:5 ratio — adjust if yours differ */
    max-height: 580px !important;
  }
  .fifo-category-hero img {
    max-height: 580px !important;
    object-fit: contain !important; /* contain keeps full image visible */
    object-position: center center !important;
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .fifo-category-hero {
    max-height: 400px !important;
  }
  .fifo-category-hero img {
    max-height: 400px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .fifo-category-hero {
    max-height: none !important;    /* let it scale naturally */
  }
  .fifo-category-hero img {
    max-height: none !important;
    object-fit: fill !important;    /* show full image, no cropping */
    object-position: center center !important;
  }
}

/* Smooth separator between hero and product grid */
.fifo-catalog-shell {
  margin-top: 0 !important;
}

/* ============================================================
   5. SIDEBAR FILTER — COMPACT & PROPORTIONAL
   ============================================================ */
.fifo-catalog-shell {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 24px 20px !important;
}

.fifo-catalog-layout {
  display: flex !important;
  gap: 24px !important;
  align-items: flex-start !important;
}

.fifo-catalog-sidebar-wrap {
  width: 240px !important;
  min-width: 240px !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 80px !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #e5e7eb transparent !important;
}

.fifo-catalog-main {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Filter cards — compact */
.fifo-filter-card {
  background: white !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  border: 1px solid #f1f5f9 !important;
}

.fifo-filter-card h4,
.fifo-filter-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #374151 !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

/* ============================================================
   6. FOOTER LAYOUT — FULL RESPONSIVE
   ============================================================ */
#fifo-footer {
  background: #f8fafc !important;
  border-top: 1px solid #e5e7eb !important;
  padding: 48px 0 0 !important;
}

.fifo-footer-grid {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 2fr !important;
  gap: 40px !important;
}

.fifo-footer-col h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #111827 !important;
  margin-bottom: 16px !important;
}

.fifo-footer-col a,
.fifo-footer-col p {
  font-size: 13.5px !important;
  color: #6b7280 !important;
  line-height: 1.6 !important;
  display: block !important;
  margin-bottom: 8px !important;
  transition: color 0.2s ease !important;
  text-decoration: none !important;
}
.fifo-footer-col a:hover {
  color: var(--page-color, #7c3aed) !important;
}

.fifo-footer-bottom {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 16px 24px !important;
  border-top: 1px solid #e5e7eb !important;
  margin-top: 40px !important;
  font-size: 13px !important;
  color: #9ca3af !important;
}

/* Newsletter form */
.fifo-newsletter-form {
  display: flex !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
.fifo-newsletter-form input {
  flex: 1 !important;
  padding: 10px 14px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}
.fifo-newsletter-form input:focus {
  border-color: var(--page-color, #7c3aed) !important;
}
.fifo-newsletter-form button {
  background: var(--page-color, #7c3aed) !important;
  color: white !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: opacity 0.2s, transform 0.2s !important;
}
.fifo-newsletter-form button:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   8. RESPONSIVE FOOTER SOCIALS
   ============================================================ */
@media (max-width: 768px) {
  .fifo-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  .fifo-socials {
    gap: 10px !important;
  }
  .fifo-social-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
  .fifo-social-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
}

@media (max-width: 480px) {
  .fifo-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .fifo-socials {
    gap: 10px !important;
  }
}

/* ============================================================
   9. RESPONSIVE SIDEBAR
   ============================================================ */
@media (max-width: 768px) {
  .fifo-catalog-layout {
    flex-direction: column !important;
  }
}

/* ============================================================
   10. GLOBAL HOVER ANIMATIONS
   ============================================================ */
/* Product cards */
.fifo-prod-card,
.fifo-product-card,
.product-card {
  transition: transform 0.25s cubic-bezier(0.2,0.9,0.2,1), 
              box-shadow 0.25s ease !important;
}
.fifo-prod-card:hover,
.fifo-product-card:hover,
.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.1) !important;
}

/* All primary buttons */
.fifo-btn,
.fifo-btn-primary,
button[class*="add-to-cart"],
.single_add_to_cart_button {
  transition: all 0.25s cubic-bezier(0.2,0.9,0.2,1) !important;
}
.fifo-btn:hover,
.fifo-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2) !important;
}

/* ============================================================
   11. LOGIN/SIGNUP — FUNCTIONAL STYLING
   ============================================================ */
.fifo-auth-page {
  min-height: calc(100vh - 200px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #f8fafc 0%, #ede9fe 100%) !important;
  padding: 40px 20px !important;
}

.fifo-auth-shell {
  display: flex !important;
  max-width: 960px !important;
  width: 100% !important;
  background: white !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1) !important;
  overflow: hidden !important;
}

.fifo-auth-hero {
  flex: 1 !important;
  background: linear-gradient(135deg, #7c3aed, #db2777) !important;
  padding: 48px 36px !important;
  color: white !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.fifo-auth-hero h1 {
  color: white !important;
  font-size: 28px !important;
  margin-bottom: 12px !important;
}

.fifo-auth-card {
  flex: 1 !important;
  padding: 48px 40px !important;
}

.fifo-form-field {
  margin-bottom: 16px !important;
}
.fifo-form-field label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
}
.fifo-form-field input {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  font-family: var(--font-body, sans-serif) !important;
  box-sizing: border-box !important;
}
.fifo-form-field input:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
}

.fifo-form-submit {
  width: 100% !important;
  padding: 13px !important;
  background: linear-gradient(135deg, #7c3aed, #db2777) !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: opacity 0.2s, transform 0.2s !important;
  font-family: var(--font-body, sans-serif) !important;
  margin-top: 8px !important;
}
.fifo-form-submit:hover {
  opacity: 0.92 !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 640px) {
  .fifo-auth-shell {
    flex-direction: column !important;
    border-radius: 16px !important;
  }
  .fifo-auth-hero {
    padding: 28px 24px !important;
  }
  .fifo-auth-card {
    padding: 28px 24px !important;
  }
}