/* RED20-V8-COMPLETE-UX-20260902
   UI-only polish. No cart, checkout, price, stock, section-order or filter logic changes.
*/
:root{--r20:#ff5a00;--r20-dark:#d94800;--r20-soft:#fff4ed;--r20-line:#e9ebef;--r20-text:#20242a;--r20-muted:#69707d;--r20-shadow:0 10px 30px rgba(22,26,33,.08)}

/* 1) DESKTOP CATEGORY HOVER MENU — clean floating marketplace panel */
@media (min-width:992px){
  html body #header .header-categories-nav-wrap{position:relative!important}
  html body #header .categories-menu-dropdown{
    left:0!important;top:calc(100% + 8px)!important;width:500px!important;min-width:500px!important;
    max-height:520px!important;padding:14px!important;border:1px solid var(--r20-line)!important;
    border-radius:18px!important;background:#fff!important;box-shadow:0 20px 55px rgba(31,35,42,.15)!important;
    overflow:auto!important;z-index:1100!important
  }
  html body #header .categories-menu-dropdown .menu-categorie-container,
  html body #header .categories-menu-dropdown .vertical-nav{width:100%!important;max-width:none!important}
  html body #header .categories-menu-dropdown .vertical-nav{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;
    padding:0!important;margin:0!important
  }
  html body #header .categories-menu-dropdown .vertical-nav>a{display:block!important;text-decoration:none!important}
  html body #header .categories-menu-dropdown .category-span{
    min-height:62px!important;padding:8px!important;border:1px solid transparent!important;border-radius:14px!important;
    background:#fff!important;transition:.18s ease!important
  }
  html body #header .categories-menu-dropdown .category-span:hover{
    background:var(--r20-soft)!important;border-color:#ffd5bd!important;transform:translateY(-1px)!important
  }
  html body #header .categories-menu-dropdown .category-span .col-md-4{
    width:48px!important;max-width:48px!important;flex:0 0 48px!important;padding:0!important;margin-right:9px!important
  }
  html body #header .categories-menu-dropdown .category-span img{
    width:48px!important;height:48px!important;max-width:48px!important;object-fit:contain!important;
    border-radius:12px!important;background:#f8f9fb!important;padding:5px!important
  }
  html body #header .categories-menu-dropdown .category-line-height{font-size:12px!important;font-weight:750!important;line-height:1.3!important;color:var(--r20-text)!important}
  html body #header .categories-menu-dropdown .see-all-category{
    grid-column:1/-1!important;min-height:44px!important;display:flex!important;align-items:center!important;justify-content:center!important;
    border-radius:12px!important;background:var(--r20)!important;color:#fff!important;font-size:12px!important;font-weight:800!important
  }
}

/* Mobile category drawer: larger tap targets and tidy thumbnails */
@media (max-width:991.98px){
  html body .mobile-categories ul li{border-bottom:1px solid #f0f1f3!important}
  html body .mobile-categories ul li>a{min-height:48px!important;display:flex!important;align-items:center!important;padding:10px 12px!important;font-weight:650!important}
}

/* 2) CATEGORY PAGE HERO */
.red20-category-hero{
  max-width:1480px;margin:16px auto 4px;padding:18px 22px;display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:center;
  border:1px solid var(--r20-line);border-radius:20px;background:linear-gradient(115deg,#fff 0%,#fff8f3 100%);box-shadow:0 4px 16px rgba(28,32,38,.04)
}
.red20-category-hero-media{height:160px;border-radius:17px;overflow:hidden;background:#fff;border:1px solid #eee;display:flex;align-items:center;justify-content:center;padding:10px}
.red20-category-hero-media img{width:100%;height:100%;object-fit:contain;object-position:center;border-radius:11px}
.red20-category-hero-copy{min-width:0}
.red20-category-kicker{display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--r20-soft);color:var(--r20);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.red20-category-hero-copy h1{margin:8px 0 5px;font-size:27px;line-height:1.15;color:var(--r20-text);font-weight:850}
.red20-category-hero-copy p{margin:0;color:var(--r20-muted);font-size:13px;max-width:650px}

/* Subcategory image cards */
html body .listing-page .category-section .row{gap:10px 0!important}
html body .listing-page .category-section [class*="col-"]{padding:6px!important}
html body .listing-page .category-section .category-image{
  width:100%!important;height:100%!important;margin:0!important;padding:10px!important;border-radius:16px!important;
  background:#fff!important;border:1px solid var(--r20-line)!important;box-shadow:0 4px 14px rgba(20,24,30,.04)!important
}
html body .listing-page .category-section .category-image>a{display:flex!important;height:115px!important;align-items:center!important;justify-content:center!important;background:#fafbfc!important;border-radius:12px!important;overflow:hidden!important}
html body .listing-page .category-section .category-image img{width:100%!important;height:100%!important;object-fit:contain!important;padding:6px!important}
html body .listing-page .category-section .category-image .social{position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;background:transparent!important;padding:8px 2px 1px!important;text-align:center!important}
html body .listing-page .category-section .category-image .social span{font-size:11px!important;font-weight:750!important;color:var(--r20-text)!important}

/* 3) FILTER UX */
html body .listing-page .sidebar-filter-sm{
  background:#fff!important;border:1px solid var(--r20-line)!important;border-radius:18px!important;padding:16px!important;
  box-shadow:0 6px 20px rgba(20,24,30,.05)!important
}
.red20-filter-heading{display:flex;align-items:center;justify-content:space-between;padding:2px 0 13px;margin-bottom:10px;border-bottom:1px solid var(--r20-line)}
.red20-filter-heading>div{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--r20-text)}
.red20-filter-heading i{color:var(--r20)}
.red20-filter-clear{font-size:10px;color:var(--r20)!important;font-weight:800;text-decoration:none!important}
html body .listing-page .filter-section h6{font-size:12px!important;font-weight:800!important;color:var(--r20-text)!important}
html body .listing-page .filter-section .product_filter_btn{font-size:10px!important;font-weight:800!important}
html body .listing-page .card-custom{border:0!important;border-bottom:1px solid #f0f1f3!important;border-radius:0!important;background:#fff!important}
html body .listing-page .collapse-arrow{padding:9px 0!important;width:100%!important;text-align:left!important;color:var(--r20-text)!important;font-size:11px!important;font-weight:700!important}
html body .listing-page .brand_filter{gap:8px!important}
html body .listing-page .brand_div{margin:0!important;padding:0!important}
html body .listing-page .brand_filter_img{width:42px!important;height:42px!important;object-fit:contain!important;border:1px solid var(--r20-line)!important;border-radius:10px!important;padding:4px!important;background:#fff!important}
html body .listing-page .category_filter .form-check{margin:5px 0!important;padding:7px 9px 7px 28px!important;border-radius:9px!important;background:#fafafa!important}
html body .listing-page .category_filter .form-check:hover{background:var(--r20-soft)!important}
html body .listing-page .filter-bars{border-radius:12px!important;background:#fff!important;border:1px solid var(--r20-line)!important;box-shadow:none!important}
html body .listing-page #product_sort_by{border:1px solid var(--r20-line)!important;border-radius:11px!important;height:42px!important;background:#fff!important}

/* 4) PRODUCT PAGE — desktop WhatsApp next to buy controls */
html body .red20-gallery-whatsapp-desktop{display:none!important}
html body .red20-product-action-row .red20-action-whatsapp{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  min-height:44px!important;padding:0 16px!important;border:1px solid #b9e9c8!important;border-radius:11px!important;
  background:#effcf3!important;color:#128c4b!important;font-size:12px!important;font-weight:850!important;text-decoration:none!important
}
html body .red20-product-action-row .red20-action-whatsapp i{font-size:18px!important;color:#25d366!important}
html body .red20-product-action-row .red20-action-whatsapp:hover{background:#e4f9eb!important;border-color:#9eddb2!important}

/* 5) MOBILE APP PROMO — turn old block into a premium app card */
html body .mobile-app.call-to-action-section{
  max-width:1380px!important;margin:28px auto 18px!important;padding:30px!important;border-radius:24px!important;
  background:linear-gradient(120deg,#ff5a00 0%,#ff7a25 55%,#ffad69 100%)!important;color:#fff!important;
  box-shadow:0 18px 45px rgba(255,90,0,.16)!important;overflow:hidden!important;position:relative!important
}
html body .mobile-app.call-to-action-section:after{content:'20';position:absolute;right:3%;top:-80px;font-size:290px;line-height:1;font-weight:950;color:rgba(255,255,255,.08);pointer-events:none}
html body .mobile-app .mobile-app-wrapper{
  width:210px!important;height:210px!important;border-radius:28px!important;background:#fff!important;padding:24px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 14px 30px rgba(90,36,0,.13)!important;z-index:1!important
}
html body .mobile-app .mobile-app-wrapper img{width:100%!important;height:100%!important;object-fit:contain!important}
html body .mobile-app .text-area{position:relative!important;z-index:2!important;padding:12px 0!important}
html body .mobile-app .mobile-app-text{font-size:16px!important;text-transform:uppercase!important;letter-spacing:.08em!important;font-weight:800!important;color:#fff!important;opacity:.86!important}
html body .mobile-app .header-p{color:#fff!important}
html body .mobile-app h3.header-p{font-size:30px!important;line-height:1.15!important;font-weight:900!important;margin:6px 0 10px!important}
html body .mobile-app p.header-p{font-size:13px!important;line-height:1.55!important;max-width:580px!important;opacity:.92!important}
html body .mobile-app .download_section{width:145px!important;height:44px!important;object-fit:contain!important;border-radius:8px!important;margin:5px 7px 0 0!important;box-shadow:0 5px 14px rgba(80,32,0,.14)!important}

/* 6) SERVICE BENEFITS — compact clean cards instead of huge SVG blocks */
html body .freedel-sec{max-width:1380px!important;margin:0 auto 20px!important;padding:0 12px!important;background:transparent!important}
html body .freedel-sec>.row{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin:0!important}
html body .freedel-sec>.row>.col{width:auto!important;max-width:none!important;flex:none!important;padding:0!important}
html body .freedel-sec .info-box{
  min-height:116px!important;height:100%!important;padding:18px!important;border:1px solid var(--r20-line)!important;border-radius:17px!important;
  background:#fff!important;box-shadow:0 5px 18px rgba(20,24,30,.045)!important;display:flex!important;align-items:center!important;gap:13px!important;text-align:left!important
}
html body .freedel-sec .icon-box-wrapper{flex:0 0 48px!important;width:48px!important;height:48px!important;border-radius:14px!important;background:var(--r20-soft)!important;display:flex!important;align-items:center!important;justify-content:center!important}
html body .freedel-sec .svg-wrapper,html body .freedel-sec .info-box-icon{width:34px!important;height:34px!important;display:flex!important;align-items:center!important;justify-content:center!important}
html body .freedel-sec svg{width:32px!important;height:32px!important;max-width:32px!important;max-height:32px!important}
html body .freedel-sec svg path{fill:var(--r20)!important}
html body .freedel-sec .info-box-content{min-width:0!important}
html body .freedel-sec .info-box-title{margin:0 0 4px!important;font-size:13px!important;font-weight:850!important;color:var(--r20-text)!important}
html body .freedel-sec .info-box-inner p{margin:0!important;font-size:10.5px!important;line-height:1.4!important;color:var(--r20-muted)!important}

/* 7) FOOTER — remove the heavy black-screen feeling */
html body #dark-footer.footer-section-footer{background:#f7f8fa!important;color:var(--r20-text)!important;border-top:1px solid var(--r20-line)!important}
html body #dark-footer .footer-con{background:transparent!important}
html body #dark-footer .footer-cta{border-bottom:1px solid #e5e7ea!important}
html body #dark-footer .single-cta i{color:var(--r20)!important}
html body #dark-footer h3,html body #dark-footer h4,html body #dark-footer .footer-widget-heading h4{color:var(--r20-text)!important}
html body #dark-footer p,html body #dark-footer .footer-text p{color:var(--r20-muted)!important}
html body #dark-footer a{color:#4b515a!important}
html body #dark-footer a:hover{color:var(--r20)!important}
html body #dark-footer .footer-logo-footer img{max-height:54px!important;max-width:155px!important;object-fit:contain!important}
html body #dark-footer .footer-social-icon a i{background:#fff!important;color:var(--r20)!important;border:1px solid #e4e6e9!important}
html body #dark-footer .copyright-area{background:#fff3eb!important;border-top:1px solid #f0ded3!important}
html body #dark-footer .copyright-text p{color:#655b55!important;margin:0!important;padding:15px 0!important}

@media (max-width:991.98px){
  .red20-category-hero{margin:10px 10px 2px;padding:13px;grid-template-columns:120px 1fr;gap:14px;border-radius:16px}
  .red20-category-hero-media{height:110px;border-radius:13px;padding:7px}
  .red20-category-hero-copy h1{font-size:20px;margin-top:6px}
  .red20-category-hero-copy p{font-size:11px;line-height:1.4}
  html body .listing-page .sidebar-filter-sm{border-radius:16px 16px 0 0!important}
  html body .freedel-sec>.row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body .mobile-app.call-to-action-section{margin:18px 10px 14px!important;padding:22px!important;border-radius:20px!important}
  html body .mobile-app .mobile-app-wrapper{width:155px!important;height:155px!important;padding:18px!important;margin-bottom:12px!important}
  html body .mobile-app h3.header-p{font-size:24px!important}
}

@media (max-width:767.98px){
  .red20-category-hero{grid-template-columns:92px 1fr;gap:11px;padding:10px;margin:8px 8px 0}
  .red20-category-hero-media{height:88px;padding:5px;border-radius:11px}
  .red20-category-kicker{font-size:8px;padding:4px 7px}
  .red20-category-hero-copy h1{font-size:16px;margin:5px 0 2px}
  .red20-category-hero-copy p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:9px}
  html body .listing-page .category-section .row{display:flex!important;flex-flow:row nowrap!important;overflow-x:auto!important;gap:8px!important;margin:0!important;padding:2px 8px 8px!important;scrollbar-width:none!important}
  html body .listing-page .category-section .row::-webkit-scrollbar{display:none!important}
  html body .listing-page .category-section [class*="col-"]{flex:0 0 118px!important;width:118px!important;max-width:118px!important;padding:0!important}
  html body .listing-page .category-section .category-image>a{height:90px!important}

  html body .red20-product-action-row .red20-action-whatsapp{display:none!important}
  html body .red20-gallery-whatsapp-mobile{display:flex!important}

  html body .mobile-app.call-to-action-section{text-align:center!important;padding:20px 14px!important}
  html body .mobile-app.call-to-action-section:after{font-size:170px!important;top:-30px!important}
  html body .mobile-app .mobile-app-wrapper{width:120px!important;height:120px!important;border-radius:20px!important;padding:14px!important;margin:0 auto 10px!important}
  html body .mobile-app .mobile-app-text{font-size:11px!important}
  html body .mobile-app h3.header-p{font-size:20px!important}
  html body .mobile-app p.header-p{font-size:10.5px!important;margin-bottom:8px!important}
  html body .mobile-app .download_section{width:126px!important;height:38px!important;margin:4px 2px!important}

  html body .freedel-sec{padding:0 8px!important}
  html body .freedel-sec>.row{gap:8px!important}
  html body .freedel-sec .info-box{min-height:104px!important;padding:11px!important;gap:8px!important;border-radius:13px!important;flex-direction:column!important;align-items:flex-start!important}
  html body .freedel-sec .icon-box-wrapper{width:38px!important;height:38px!important;flex-basis:38px!important;border-radius:11px!important}
  html body .freedel-sec svg{width:25px!important;height:25px!important}
  html body .freedel-sec .info-box-title{font-size:11px!important}
  html body .freedel-sec .info-box-inner p{font-size:8.5px!important}

  html body #dark-footer .footer-cta{display:none!important}
  html body #dark-footer .footer-content-footer{padding:22px 8px 72px!important}
  html body #dark-footer .footer-widget-heading h4{font-size:13px!important}
  html body #dark-footer .footer-widget ul li a,html body #dark-footer .footer-text p{font-size:10px!important}
}