:root{
    /* Logo-inspired Blue and Red Gradient Colors */
    --brand:#2563eb; --brand-600:#1d4ed8; --brand-700:#1e40af;
    --brand-red:#dc2626; --brand-red-600:#b91c1c; --brand-red-700:#991b1b;
    --ink:#1e1b4b; --muted:#6b7280;
    --surface:#f7f8fb; --card:#ffffff; --border:#e6e8ef;
    --accent:#0ea5e9; --danger:#ef4444; --success:#10b981; --chip:#f1f4ff;
    --bg-1:#ffffff; --bg-2:#f8fafc; --bg-3:#f0f4ff; --bg-4:#fef2f2;
    --foot-bg:#0b0b0b; --foot-green:#2a2a2a; --foot-fg:#e5e7eb; --foot-muted:#94a3b8; --foot-border:#1f2937;
    --glass: rgba(255,255,255,.86);
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary: #dc2626;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #dc2626;
    --dark: #1f2937;
    --light: #f8fafc;
    --border: #e2e8f0;
    --text: #374151;
    --text-muted: #6b7280;
    --gradient: linear-gradient(135deg, #2563eb 0%, #dc2626 100%);
    --gradient-blue: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --gradient-red: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --logo-gradient: linear-gradient(135deg, #2563eb 0%, #dc2626 100%);
  }
  html,body{scroll-behavior:smooth}
  body{font-family:"Reem Kufi Fun",sans-serif;color:var(--ink);background:var(--surface)}
  .rkf,h1,h2,h3,h4,h5,h6,.navbar-brand,.nav-link,.btn,.fw-semibold{font-family:"Reem Kufi Fun",sans-serif;letter-spacing:.15px}

  /* Topbar */
  .topbar{background:#0f172a;color:#e5e7eb;font-weight:600;font-size:.95rem}
  .topbar .marquee{padding:.52rem 0;overflow:hidden;white-space:nowrap}
  .topbar .marquee span{display:inline-block;padding-right:2rem;animation:mar 22s linear infinite}
  .topbar:hover .marquee span{animation-play-state:paused}
  @keyframes mar{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}

  /* Navbar + Mega menu */
  .navbar{backdrop-filter:saturate(160%) blur(8px);background:rgba(255,255,255,.92)!important;border-bottom:1px solid var(--border);transition:all .25s ease}
  .navbar.scrolled{box-shadow:0 10px 30px -20px rgba(37, 99, 235, 0.15)}
  /* Enhanced Logo Styling */
  .logo-container {
    position: relative;
    z-index: 10;
  }
  
  .logo-wrapper {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
  }
  
  .logo-img {
    height: 56px;
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 8px rgba(37, 99, 235, 0.2));
    position: relative;
    z-index: 2;
  }
  
  .logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--logo-gradient);
    border-radius: 50%;
    opacity: 0;
    filter: blur(20px);
    transition: all 0.3s ease;
    z-index: 1;
  }
  
  .logo-container:hover .logo-img {
    transform: scale(1.05);
    filter: drop-shadow(0 6px 12px rgba(37, 99, 235, 0.3));
  }
  
  .logo-container:hover .logo-glow {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1.2);
  }
  
  .navbar-brand img{height:56px;transition:all 0.3s ease;filter:drop-shadow(0 4px 8px rgba(37, 99, 235, 0.2))}
  .navbar-brand:hover img{transform:scale(1.05);filter:drop-shadow(0 6px 12px rgba(37, 99, 235, 0.3))}
  .nav-link{font-weight:700;color:#1f2a44!important;border-radius:.6rem;padding:.55rem .9rem!important;text-transform:uppercase;transition:all 0.3s ease}
  .nav-link:hover{background:linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);color:var(--brand)!important}
  .nav-link.active{color:var(--brand)!important;background:linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%)}
  @media(min-width:992px){.nav-center{position:absolute;left:50%;transform:translateX(-50%)}}

  .icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:#fff;display:grid;place-items:center;transition:.2s}
  .icon-btn:hover{box-shadow:0 6px 18px -12px rgba(37, 99, 235, 0.2);border-color:var(--brand)}
  .cart-badge{position:absolute;top:-6px;right:-6px;font-size:.72rem;font-weight:800;background:var(--brand-red);color:#fff;border-radius:999px;padding:.15rem .44rem;box-shadow:0 6px 12px -6px rgba(220, 38, 38, 0.55)}
  @keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.25)}60%{transform:scale(0.92)}100%{transform:scale(1)}}
  .cart-badge.bump{animation:bump .4s ease}

  /* Mega dropdown */
  .dropdown-mega{position:static}
  .dropdown-mega .dropdown-menu{
    border:1px solid var(--border);border-radius:18px;padding:1.25rem;background:#fff;
    box-shadow:0 24px 60px -24px rgba(37, 99, 235, 0.15);min-width:960px;left:50%;transform:translateX(-50%);
  }
  @media (max-width: 991.98px){
    .dropdown-mega .dropdown-menu{ min-width:100%; left:0; transform:none; padding:1rem; }
    .mega-banner img{ min-height:140px; }
  }
  @media (max-width: 575.98px){
    .navbar-brand img{ height:44px; }
  }
  .mega-col h6{font-weight:900;font-size:.95rem;margin-bottom:.5rem}
  .mega-link{display:block;padding:.35rem .6rem;border-radius:.6rem;color:#0f1533;text-decoration:none;transition:all 0.3s ease}
  .mega-link:hover{background:linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);color:var(--brand)}
  .mega-banner{position:relative;border-radius:14px;overflow:hidden}
  .mega-banner img{width:100%;height:100%;object-fit:cover;min-height:180px}
  .mega-badge{position:absolute;top:10px;left:10px;background:#111827;color:#fff;border-radius:999px;padding:.25rem .6rem;font-weight:800;font-size:.75rem}

  /* Search Modal */
  .modal-elev{box-shadow:0 40px 90px -30px rgba(0,0,0,.35)}
  .search-box{position:relative}
  .search-input-lg{padding:1rem 1rem 1rem 3rem;border:1px solid var(--border);border-radius:14px}
  .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9aa3af}
  .sugg{display:flex;flex-wrap:wrap;gap:.5rem}
  .sugg .chip{padding:.45rem .8rem;border:1px solid var(--border);border-radius:999px;background:#fff;font-weight:700;text-decoration:none;color:#1f2a44;transition:all 0.3s ease}
  .sugg .chip:hover{background:linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);border-color:var(--brand);color:var(--brand)}

  /* Cart Drawer */
  .offcanvas{ border-left:0 }
  .offcanvas-header{ border-bottom:1px solid var(--border) }
  .cart-item{display:flex;gap:.9rem;align-items:center;padding:.8rem;border:1px solid var(--border);border-radius:12px;background:#fff}
  .qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:10px;overflow:hidden}
  .qty button{width:30px;height:30px;border:0;background:#f6f7fb}
  .qty input{width:40px;text-align:center;border:0;padding:.2rem 0}
  .free-ship{font-size:.85rem;color:#0f5132;background:#d1fae5;border:1px solid #a7f3d0;border-radius:10px;padding:.25rem .55rem;font-weight:800}
  .checkout-sticky{position:sticky;bottom:0;background:#fff;padding-top:1rem;border-top:1px solid var(--border)}

  /* Hero */
  .hero-wrapper{position:relative;overflow:hidden;max-height:600px;border-radius:0 0 24px 24px}
  .hero-slide{position:relative;background-size:cover;background-position:center;min-height:500px;display:flex;align-items:center}
  .hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg, rgba(0,0,0,.4) 0%, rgba(37, 99, 235, 0.3) 50%, rgba(220, 38, 38, 0.2) 100%)}
  .hero-content{position:relative;z-index:3;background:rgba(15,23,42,.85);backdrop-filter:blur(12px);border-radius:20px;padding:3rem 2.5rem;max-width:560px;margin-left:4rem}
  .hero-content h1{font-size:3rem;font-weight:900;color:#fff;margin-bottom:1rem;line-height:1.1}
  .hero-content p{color:#cbd5e1;font-size:1.1rem;margin-bottom:2rem}
  .hero-pagination{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
  .hero-pagination .swiper-pagination-bullet{width:12px;height:12px;background:rgba(255,255,255,.5);opacity:1;transition:.3s}
  .hero-pagination .swiper-pagination-bullet-active{background:#fff;transform:scale(1.2)}

  /* Offer cards */
  .promo-card{position:relative;border-radius:20px;overflow:hidden;height:320px;transition:.4s ease;cursor:pointer}
  .promo-card:hover{transform:translateY(-8px);box-shadow:0 25px 50px -15px rgba(0,0,0,.25)}
  .promo-card img{width:100%;height:100%;object-fit:cover;transition:.4s ease}
  .promo-card:hover img{transform:scale(1.06)}
  .promo-overlay{position:absolute;inset:0;background:linear-gradient(45deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 100%)}
  .promo-content{position:absolute;bottom:2rem;left:2rem;right:2rem;color:#fff}
  .promo-title{font-size:1.8rem;font-weight:900;margin-bottom:.5rem}
  .promo-subtitle{opacity:.9;margin-bottom:1.2rem}

  /* Section wrappers */
  .section-wide{padding:60px 0}
  .bg-1{background:var(--bg-1)}
  .bg-2{background:var(--bg-2)}
  .bg-3{background:var(--bg-3)}
  .bg-4{background:var(--bg-4)}

  .section-header{text-align:center;margin-bottom:2rem}
  .section-badge{display:inline-block;padding:.5rem 1.2rem;background:#f1f4ff;border:1px solid #dbe1ff;border-radius:50px;color:#1f2a44;font-weight:700;font-size:.9rem;margin-bottom:1rem}
  .section-title{font-size:2.2rem;font-weight:900;color:var(--ink)}
  .section-subtitle{color:var(--muted);max-width:700px;margin:.25rem auto 0}

  /* Category tiles */
  .cat-tile{background:#fff;border:1px solid var(--border);border-radius:16px;padding:2rem 1rem;text-decoration:none;color:var(--ink);transition:.3s;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .cat-tile:hover{transform:translateY(-5px);box-shadow:0 15px 35px -10px rgba(37, 99, 235, 0.2);border-color:var(--brand)}
  .cat-tile i{color:var(--brand);margin-bottom:1rem;font-size:2.2rem}
  .cat-title{font-weight:800}

  /* Product cards + shared */
  .product-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.3s;height:100%;display:flex;flex-direction:column}
  .product-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px -15px rgba(0,0,0,.15);border-color:#d7dbef}
  .product-image{position:relative;overflow:hidden;background:#f8f9fa;border-radius:12px}
  .product-image img{width:100%;height:220px;object-fit:cover;transition:.35s ease;display:block}
  .product-card:hover .product-image img{transform:scale(1.06)}
  .product-badges{position:absolute;top:12px;left:12px;z-index:3}
  .badge-new,.badge-sale{padding:.25rem .6rem;border-radius:6px;font-size:.75rem;font-weight:800;color:#fff}
  .badge-new{background:#10b981}
  .badge-sale{background:#ef4444}
  .product-info{padding:1.1rem;display:flex;flex-direction:column;gap:.4rem}
  .product-name{font-weight:800;font-size:1rem;margin:0}
  .product-price{font-weight:900;font-size:1.1rem;color:var(--brand)}
  .price-old{color:var(--muted);text-decoration:line-through;font-weight:600;margin-left:.45rem}

  .product-slider{padding-bottom:2rem}
  .swiper-button-next,.swiper-button-prev{width:44px;height:44px;background:#fff;border:1px solid var(--border);border-radius:12px;color:var(--brand)}
  .swiper-button-next:hover,.swiper-button-prev:hover{background:var(--brand);color:#fff;transform:scale(1.05)}
  .swiper-button-next::after,.swiper-button-prev::after{font-size:16px;font-weight:700}
  .swiper-pagination-bullet{width:10px;height:10px;background:var(--border);opacity:1}
  .swiper-pagination-bullet-active{background:var(--brand);transform:scale(1.25)}

  /* Unified HOVER CTA (ONLY Add to Cart) */
  .hover-cta{
    position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
    display:flex; justify-content:center;
    padding:10px;
    /* background:rgba(255,255,255,.85);
    backdrop-filter: blur(8px); */
    border:1px solid rgba(0,0,0,.06);
    border-radius:12px;
    box-shadow:0 12px 28px rgba(0,0,0,.14);
    transform:translateY(16px);
    opacity:0; pointer-events:none;
    transition:opacity .28s ease, transform .28s ease;
  }
  .product-card:hover .hover-cta{opacity:1; transform:translateY(0); pointer-events:auto;}

  .btn-cart{
    display:inline-flex; align-items:center; gap:8px; justify-content:center;
    width:100%; border:none; cursor:pointer;
    padding:12px 16px; border-radius:12px; font-weight:800;
    background:var(--gradient); color:#fff;
    box-shadow:0 8px 20px rgba(37, 99, 235, 0.35);
    transition:transform .18s ease, box-shadow .18s ease;
    position: relative;
    overflow: hidden;
  }
  .btn-cart::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
  }
  .btn-cart:hover::before {
    left: 100%;
  }
  .btn-cart:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(37, 99, 235, 0.45); }
  .btn-cart span{white-space:nowrap}
  .btn-cart.added{ background:#10b981; color:#fff; transform: scale(1.05); }
  .btn-cart.added i.fa-cart-plus{ display:none; }
  .btn-cart.added::after{ content:' Added'; font-weight:900; }

  /* Mobile: CTA always visible */
  @media (max-width: 575.98px){
    .hover-cta{ position:static; margin:10px; opacity:1; transform:none; pointer-events:auto; box-shadow:none; }
    .product-image{border-radius:12px 12px 0 0}
    .product-info{padding:10px}
    .btn-cart{ min-height:48px; font-size:0.98rem; }
    .btn-cart i{ font-size:1.05rem; }
    .product-price{ font-size:1rem; }
    /* Hide text on mobile for add-to-cart buttons, show icon only */
    .js-addcart span{ display:none !important; }
    .btn-cart{ gap:0; padding-left:14px; padding-right:14px; width:auto; }
  }
  .btn-link{
    text-decoration: none;
  }
  /* Blog cards */
  .blog-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.3s;height:100%}
  .blog-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px -16px rgba(0,0,0,.15)}
  .blog-thumb img{width:100%;height:220px;object-fit:cover}
  .blog-body{padding:1rem 1.1rem}
  .blog-meta{display:flex;gap:.6rem;align-items:center;color:#6b7280;font-size:.85rem;margin-bottom:.4rem}
  .blog-title{font-weight:900;font-size:1.05rem;line-height:1.25;margin-bottom:.4rem}
  .blog-excerpt{color:#6b7280;font-size:.95rem}
  
  /* Buttons */
  .btn-brand{background:var(--gradient);border:none;color:#fff;font-weight:800;padding:.75rem 1.6rem;border-radius:12px;letter-spacing:.4px;transition:all 0.3s ease}
  .btn-brand:hover{background:var(--gradient-blue);transform:translateY(-2px);box-shadow:0 8px 20px rgba(37, 99, 235, 0.3); color:#fff;}
  .btn-outline-brand{border:2px solid var(--brand);color:var(--brand);background:transparent;font-weight:800;border-radius:12px;transition:all 0.3s ease}
  .btn-outline-brand:hover{background:var(--gradient);color:#fff;border-color:transparent}

  /* Skeleton Loader */
  .skeleton-wrap{display:grid;grid-template-columns:repeat(1,1fr);gap:16px}
  @media(min-width:576px){.skeleton-wrap{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:992px){.skeleton-wrap{grid-template-columns:repeat(4,1fr)}}
  .sk-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;padding:0}
  .sk-img{height:220px;background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);background-size:400% 100%;animation:shimmer 1.3s infinite}
  .sk-line{height:14px;margin:12px;border-radius:8px;background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);background-size:400% 100%;animation:shimmer 1.3s infinite}
  .sk-line.short{width:50%}
  @keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

  /* Footer */
  .footer-pro{ background:var(--foot-bg); color:var(--foot-fg); }
  .footer-pro .foot-wrap{ padding:56px 15px 28px; }
  .footer-pro .tagline{ text-transform:uppercase; letter-spacing:.12em; font-weight:900; margin:.75rem 0 1rem; }
  .footer-pro p, .footer-pro a{ color:var(--foot-fg); }
  .footer-pro a:hover{ color:#fff; }
  .footer-pro .foot-title{ font-weight:900; font-size:1.15rem; margin-bottom:1rem; }
  .footer-pro .foot-links{ list-style:none; padding:0; margin:0; }
  .footer-pro .foot-links li{ margin:.4rem 0; }
  .footer-pro .foot-links a{ text-decoration:none; color:var(--foot-muted); }
  .footer-pro .foot-links a:hover{ color:#fff; }
  .footer-pro .contact-item{ display:flex; gap:.6rem; align-items:flex-start; color:var(--foot-muted); margin:.5rem 0; }
  .footer-pro .contact-item i{ margin-top:.15rem; color:#cbd5e1; }
  .footer-pro .store-badges img{ height:44px; }
  .footer-pro .social{ display:flex; gap:.6rem; margin-top:.6rem; }
  .footer-pro .social a{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid #334155; color:#e5e7eb; text-decoration:none; }
  .footer-pro .social a:hover{ background:#111827; border-color:#475569; }
  .footer-pro .partner-row{ border-top:1px solid var(--foot-border); margin-top:22px; padding-top:16px; }
  .footer-bottom{ background:var(--foot-green); color:#eafaf0; text-align:center; padding:.7rem 0; font-weight:800; }

  /* Mini toast */
  .mini-toast{
    position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px);
    background:#111827; color:#fff; padding:.6rem .9rem; border-radius:12px; font-weight:800;
    display:flex; align-items:center; gap:.5rem; opacity:0; pointer-events:none; transition:.25s;
    z-index:2000;
  }
  .mini-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  
  /* Responsive tweaks */
  @media(max-width:768px){
    .hero-content{margin:0 1rem;padding:2rem 1.5rem}
    .hero-content h1{font-size:2rem}
    .product-info{padding:1rem}
  }