:root{
 --s90-primary:#0d63f3;--s90-primary-dark:#094fc4;--s90-ink:#132238;
 --s90-muted:#6f7c8e;--s90-bg:#f6f8fb;--s90-card:#fff;--s90-line:#e7ebf1;
 --s90-accent:#ff9f1a;--s90-success:#14a673;--s90-radius:18px;
 --s90-shadow:0 10px 30px rgba(24,42,72,.07);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{
 margin:0;background:var(--s90-bg);color:var(--s90-ink);
 font-family:"Cairo","Poppins",sans-serif;-webkit-font-smoothing:antialiased
}
a{transition:.18s ease}.main-content{min-height:55vh}
.container-fluid-wide{width:min(1380px,calc(100% - 32px));margin-inline:auto}

/* Header */
.store90-header{background:#fff;border-bottom:1px solid var(--s90-line);position:sticky;top:0;z-index:1030;box-shadow:0 4px 20px rgba(20,35,60,.04)}
.store90-header .navbar{min-height:76px;gap:8px}
.store90-header .navbar-brand{margin:0!important;padding:0}
.store90-header .brand-icon-modern{width:46px;height:46px;border-radius:14px;background:var(--s90-primary);color:#fff;display:grid;place-items:center;font-weight:900;font-size:18px}
.store90-header .brand-details{display:flex;flex-direction:column;line-height:1}
.store90-header .brand-text{font-size:24px;font-weight:900;color:var(--s90-ink)}
.store90-header .brand-text .dot{color:var(--s90-primary)}
.store90-header .brand-sub{font-size:8px;letter-spacing:1.5px;color:#98a2b1;margin-top:7px}
.store90-header .main-nav{gap:2px!important}
.store90-header .main-nav .nav-link{padding:9px 11px!important;border-radius:10px;color:#445064!important;font-size:13px;font-weight:750}
.store90-header .main-nav .nav-link:hover,.store90-header .main-nav .nav-link.active{background:#eef5ff;color:var(--s90-primary)!important}
.store90-header .search-form{width:min(330px,27vw);margin-inline:10px!important}
.store90-header .search-box{height:44px;display:flex;border:1px solid var(--s90-line);background:#f8fafc;border-radius:13px;overflow:hidden}
.store90-header .search-box input{border:0!important;background:transparent!important;box-shadow:none!important;font-size:13px;padding-inline:14px}
.store90-header .btn-search{width:46px;border:0;background:transparent;color:var(--s90-primary)}
.store90-header .header-actions{gap:4px!important;flex-wrap:nowrap}
.store90-header .nav-icon-btn{position:relative;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#39475b;text-decoration:none;font-size:17px}
.store90-header .nav-icon-btn:hover{background:#eef5ff;color:var(--s90-primary)}
.store90-header .custom-badge{position:absolute;top:-3px;inset-inline-start:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--s90-accent)!important;color:#18243a!important;border:2px solid #fff;display:grid;place-items:center;font-size:9px;font-weight:900}
.store90-header .user-btn,.store90-header .login-btn{min-height:40px;display:flex;align-items:center;gap:6px;padding:7px 11px!important;border-radius:11px;font-size:12px;font-weight:800;text-decoration:none}
.store90-header .user-btn{color:#344155!important}.store90-header .login-btn{background:var(--s90-primary);color:#fff}
.store90-header .login-btn:hover{background:var(--s90-primary-dark);color:#fff}
.store90-header .dropdown-menu{border:1px solid var(--s90-line)!important;border-radius:14px;padding:7px;box-shadow:var(--s90-shadow)}
.store90-header .dropdown-item{border-radius:9px;font-size:13px;padding:9px 10px!important}
.store90-header .navbar-toggler{border:1px solid var(--s90-line)!important;background:#f7f9fc}
.store90-header .navbar-toggler-icon{filter:invert(.6)}

/* Home */
.store-home{background:var(--s90-bg);padding:18px 0 26px}
.store-section{margin-bottom:30px}.store-section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:15px}
.store-section-title{margin:0;font-size:22px;font-weight:900}.store-section-subtitle{margin:5px 0 0;color:var(--s90-muted);font-size:13px}
.store-hero{border-radius:24px;overflow:hidden;margin-bottom:30px;background:linear-gradient(135deg,#0b55c9,#0d63f3);box-shadow:0 18px 44px rgba(13,99,243,.16)}
.banner-rotator-modern,.banner-slider-modern{position:relative;overflow:hidden}.banner-slide-modern{display:none;min-height:330px;color:#fff;position:relative}.banner-slide-modern.active{display:block}
.banner-content-modern{padding:44px 54px}.banner-title-modern{font-size:clamp(29px,3.4vw,48px);font-weight:900;line-height:1.2}.banner-desc-modern{max-width:600px;opacity:.86;line-height:1.9}
.banner-image-modern{max-height:280px;width:100%;object-fit:contain}.banner-badge-modern{display:inline-flex;gap:7px;align-items:center;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:800;margin-bottom:15px}
.banner-brand-modern{display:none}.banner-stats-modern{display:flex;gap:22px;flex-wrap:wrap;margin:20px 0}.banner-stat-modern{display:flex;flex-direction:column}.stat-number-modern{font-size:18px;font-weight:900}.stat-label-modern{font-size:11px;opacity:.78}
.btn-banner-primary-modern{background:#fff!important;color:var(--s90-primary)!important;border:0!important;border-radius:12px!important;padding:11px 20px!important;font-weight:850!important}
.banner-nav-modern{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--s90-primary);z-index:4}.banner-nav-modern.prev{right:14px}.banner-nav-modern.next{left:14px}
.banner-dots-modern{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:4}.dot-modern{width:7px;height:7px;background:rgba(255,255,255,.55);border-radius:99px;cursor:pointer}.dot-modern.active{width:24px;background:#fff}
.banner-full-img{width:100%;height:330px;object-fit:cover;display:block}
.telecom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.telecom-card{display:flex;align-items:center;gap:12px;padding:13px;background:#fff;border:1px solid var(--s90-line);border-radius:16px;text-decoration:none;color:var(--s90-ink);box-shadow:0 4px 16px rgba(20,35,60,.035)}.telecom-card:hover{transform:translateY(-2px);border-color:#cbdcff;color:var(--s90-primary);box-shadow:var(--s90-shadow)}
.telecom-icon{width:48px;height:48px;flex:0 0 48px;border-radius:13px;background:#f5f8fc;display:grid;place-items:center;overflow:hidden}.telecom-icon img{width:72%;height:72%;object-fit:contain}.telecom-name{font-weight:850;font-size:14px}.telecom-action{font-size:11px;color:var(--s90-muted);margin-top:3px}
.featured-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,280px));justify-content:center;gap:16px}.featured-item{min-width:0}.featured-products .product-card,.featured-products .card{height:100%;border:1px solid var(--s90-line)!important;border-radius:18px!important;overflow:hidden;box-shadow:0 6px 22px rgba(20,35,60,.045)!important}
.products-heading-link{border-radius:11px!important;font-size:12px;font-weight:800}
.benefits-bar{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--s90-line);border-radius:18px;overflow:hidden}.benefit-item{display:flex;align-items:center;gap:11px;padding:15px 17px;border-inline-end:1px solid var(--s90-line)}.benefit-item:last-child{border:0}.benefit-icon{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:#eef5ff;color:var(--s90-primary);display:grid;place-items:center}.benefit-title{font-size:13px;font-weight:850;margin:0}.benefit-text{font-size:11px;color:var(--s90-muted);margin:3px 0 0}
.category-card{min-height:125px;padding:17px 10px;background:#fff;border:1px solid var(--s90-line);border-radius:17px;text-align:center;box-shadow:0 4px 16px rgba(20,35,60,.035)}.category-card:hover{transform:translateY(-2px);border-color:#cbdcff;box-shadow:var(--s90-shadow)}.category-icon{width:48px;height:48px;border-radius:14px;background:#eef5ff;color:var(--s90-primary);display:inline-grid;place-items:center;font-size:20px;margin-bottom:9px}.category-card h5{font-size:14px;font-weight:850;color:var(--s90-ink)}
.promo-banner-wrapper{border-radius:20px!important;box-shadow:var(--s90-shadow)}
.announcement-popup-overlay{position:fixed;inset:0;background:rgba(15,25,40,.55);z-index:2000;display:grid;place-items:center;padding:20px}.announcement-popup{position:relative;width:min(460px,100%);background:#fff;border-radius:20px;padding:24px;box-shadow:0 25px 70px rgba(0,0,0,.18)}.announcement-popup img{max-width:100%;border-radius:14px}.announcement-close-btn{border:0;background:#eef1f5;width:30px;height:30px;border-radius:50%;position:absolute;top:10px;left:10px}.announcement.notification{position:fixed;bottom:20px;right:20px;z-index:1500;background:#fff;border:1px solid var(--s90-line);border-radius:14px;padding:14px 42px 14px 16px;box-shadow:var(--s90-shadow)}.announcement.bottom-bar{position:fixed;bottom:0;left:0;right:0;z-index:1400;background:#132238;color:#fff;padding:11px 50px;text-align:center}

/* Footer */
.store90-footer{background:#101d2e;color:#fff;border-top:0;margin-top:0}.store90-footer .footer-main{padding:42px 0 28px}.store90-footer .brand-footer{display:flex;gap:7px;align-items:baseline;font-size:25px;font-weight:900}.store90-footer .brand-90{color:#6da4ff}.store90-footer .brand-tagline{font-size:8px;letter-spacing:1.7px;color:#77869a;margin-top:5px}.store90-footer .footer-description{max-width:340px;color:#95a1b2;font-size:12px;line-height:1.9;margin-top:14px}.store90-footer h5{font-size:13px;font-weight:850;margin-bottom:14px}.store90-footer h5 i{color:#6da4ff}.store90-footer ul{list-style:none;padding:0;margin:0}.store90-footer li{margin-bottom:8px}.store90-footer li a,.store90-footer .contact-item,.store90-footer .footer-bottom a{color:#94a1b2;text-decoration:none;font-size:11px}.store90-footer li a:hover{color:#fff}.store90-footer .contact-list{display:grid;gap:7px;margin-top:14px}.store90-footer .contact-item{display:flex;gap:8px;align-items:center;margin:0}.store90-footer .contact-item i{color:#6da4ff;width:18px}.store90-footer .contact-item a{color:inherit;text-decoration:none}.store90-footer .social-links{display:flex;gap:7px;flex-wrap:wrap}.store90-footer .social-links a{width:34px;height:34px;border-radius:10px;background:#17283d;color:#aab5c3;display:grid;place-items:center;text-decoration:none}.store90-footer .social-links a:hover{background:var(--s90-primary);color:#fff}.store90-footer .payments-title{font-size:10px;font-weight:800;color:#cbd3de;margin:18px 0 8px}.store90-footer .payment-methods{display:flex;gap:6px;flex-wrap:wrap}.store90-footer .footer-payment-icon{width:46px;height:30px;padding:4px;background:#fff;border-radius:7px}.store90-footer .footer-payment-icon img{width:100%;height:100%;object-fit:contain}.store90-footer .footer-divider{border-color:#26374c;margin:0}.store90-footer .footer-bottom{padding:15px 0}.store90-footer .footer-bottom p,.store90-footer .footer-bottom a{font-size:10px!important;color:#77869a!important}

.alert{border:0;border-radius:13px;box-shadow:0 5px 18px rgba(20,35,60,.05)}

@media(max-width:991.98px){
 .store90-header .navbar{min-height:68px}.store90-header .navbar-collapse{margin-top:10px;padding:12px;background:#fff;border:1px solid var(--s90-line);border-radius:15px}.store90-header .main-nav{align-items:stretch!important}.store90-header .search-form{width:100%;margin:9px 0!important}.store90-header .header-actions{justify-content:flex-start}
 .telecom-grid{grid-template-columns:repeat(2,1fr)}.benefits-bar{grid-template-columns:repeat(2,1fr)}.benefit-item{border-bottom:1px solid var(--s90-line)}
 .banner-content-modern{padding:32px}.banner-slide-modern{min-height:290px}
}
@media (max-width: 575.98px) {

    /* =========================
       General mobile layout
       ========================= */
    .container-fluid-wide {
        width: calc(100% - 20px);
    }

    .store90-header .brand-details {
        display: none;
    }

    .store-home {
        padding-top: 10px;
    }


    /* =========================
       Home Slider - Mobile
       ========================= */

    .store-hero {
        width: 100%;
        margin-bottom: 23px;
        border-radius: 17px;
        overflow: hidden;
    }

    .banner-rotator-modern,
    .banner-slider-modern {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .banner-slide-modern {
        position: relative;
        width: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .banner-slide-modern.active {
        display: block;
    }

    /*
     * بانر عبارة عن صورة كاملة:
     * نحافظ على نسبة أبعاد الصورة ولا نقص أطرافها.
     */
    .banner-full-img {
        display: block;
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        object-position: center;
    }

    /*
     * البانرات التي تحتوي نص + صورة
     */
    .banner-content-modern {
        padding: 22px 18px 30px;
    }

    .banner-title-modern {
        margin-bottom: 8px;
        font-size: 25px;
        line-height: 1.35;
    }

    .banner-desc-modern {
        max-width: 100%;
        margin-bottom: 12px;
        font-size: 12px;
        line-height: 1.8;
    }

    .banner-image-modern {
        display: block;
        width: 100%;
        max-height: 180px;
        margin-inline: auto;
        object-fit: contain;
    }

    .banner-badge-modern {
        padding: 6px 10px;
        margin-bottom: 10px;
        font-size: 10px;
    }

    .banner-stats-modern {
        gap: 12px;
        margin: 13px 0;
    }

    .stat-number-modern {
        font-size: 15px;
    }

    .stat-label-modern {
        font-size: 9px;
    }

    .btn-banner-primary-modern {
        padding: 9px 15px !important;
        border-radius: 10px !important;
        font-size: 11px;
    }

    /*
     * الأسهم لا نحتاجها على الجوال.
     * المستخدم يستطيع الانتقال بالسلايدر/النقاط.
     */
    .banner-nav-modern {
        display: none;
    }

    .banner-dots-modern {
        bottom: 8px;
        gap: 5px;
    }

    .dot-modern {
        width: 6px;
        height: 6px;
    }

    .dot-modern.active {
        width: 20px;
    }


    /* =========================
       Telecom
       ========================= */

    .telecom-grid {
        gap: 9px;
    }

    .telecom-card {
        padding: 10px;
        gap: 8px;
    }

    .telecom-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

    .telecom-name {
        font-size: 12px;
    }

    .telecom-action {
        display: none;
    }


    /* =========================
       Featured products
       ========================= */

    .featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }


    /* =========================
       Benefits
       ========================= */

    .benefits-bar {
        grid-template-columns: 1fr;
    }

    .benefit-item {
        border-inline-end: 0;
    }


    /* =========================
       Sections
       ========================= */

    .store-section-title {
        font-size: 19px;
    }

    .store-section-subtitle {
        font-size: 12px;
    }


    /* =========================
       Footer
       ========================= */

    .store90-footer .footer-main {
        padding-top: 30px;
    }
}


/* Phase 27 — corrected mobile header */
.store90-header .mobile-header-tools{
    display:none;
    align-items:center;
    gap:6px;
}

@media(max-width:991.98px){
    .store90-header .navbar{
        min-height:68px;
        display:grid;
        grid-template-columns:auto 1fr auto;
        grid-template-areas:
            "tools spacer brand"
            "collapse collapse collapse";
        align-items:center;
        gap:8px;
        width:100%;
        flex-wrap:nowrap;
    }

    .store90-header .navbar-brand{
        grid-area:brand;
        justify-self:end;
        min-width:0;
        margin:0!important;
    }

    .store90-header .mobile-header-tools{
        grid-area:tools;
        display:flex;
        justify-self:start;
        align-items:center;
    }

    .store90-header .navbar-collapse{
        grid-area:collapse;
        width:100%;
        min-width:0;
        margin-top:8px;
        padding:12px;
        background:#fff;
        border:1px solid var(--s90-line);
        border-radius:15px;
    }

    .store90-header .brand-details{
        display:flex!important;
        flex-direction:column;
    }

    .store90-header .brand-sub{
        display:none;
    }

    .store90-header .brand-icon-modern{
        width:40px;
        height:40px;
        border-radius:12px;
        font-size:16px;
        flex:0 0 40px;
    }

    .store90-header .brand-text{
        display:block;
        font-size:19px;
        line-height:1;
        white-space:nowrap;
    }

    .store90-header .navbar-brand .gap-2{
        gap:6px!important;
    }

    .store90-header .mobile-header-tools .nav-icon-btn{
        width:40px;
        height:40px;
        font-size:16px;
        margin:0;
        background:#f7f9fc;
        border:1px solid var(--s90-line);
    }

    .store90-header .navbar-toggler{
        width:40px;
        height:40px;
        padding:5px;
        display:grid;
        place-items:center;
        margin:0;
    }

    .store90-header .main-nav{
        align-items:stretch!important;
    }

    .store90-header .search-form{
        width:100%;
        margin:9px 0!important;
    }

    .store90-header .header-actions{
        display:flex;
        flex-direction:row!important;
        justify-content:center!important;
        align-items:center!important;
        flex-wrap:wrap!important;
        gap:10px!important;
        padding-top:10px;
        border-top:1px solid var(--s90-line);
    }

    .store90-header .header-actions .nav-item{
        margin:0!important;
    }

    /* The cart already has a dedicated one-tap button in the mobile top bar. */
    .store90-header .header-actions .desktop-cart-item{
        display:none!important;
    }
}

@media(max-width:575.98px){
    .store90-header .navbar{
        min-height:64px;
        padding-inline:4px!important;
    }

    .store90-header .brand-icon-modern{
        width:38px;
        height:38px;
        flex-basis:38px;
        font-size:15px;
    }

    .store90-header .brand-text{
        font-size:17px;
    }

    .store90-header .mobile-header-tools{
        gap:5px;
    }

    .store90-header .mobile-header-tools .nav-icon-btn,
    .store90-header .navbar-toggler{
        width:38px;
        height:38px;
    }
}

@media(max-width:360px){
    .store90-header .brand-text{
        font-size:15px;
    }

    .store90-header .brand-icon-modern{
        width:36px;
        height:36px;
        flex-basis:36px;
    }

    .store90-header .mobile-header-tools .nav-icon-btn,
    .store90-header .navbar-toggler{
        width:36px;
        height:36px;
    }
}


/* Phase 27 final polish: keep the Latin brand identity in its natural order. */
.store90-header .navbar-brand > .d-flex{
    direction:ltr;
}
.store90-header .navbar-brand .brand-text{
    direction:ltr;
    unicode-bidi:isolate;
}