/*
 * SmartShop™ — ENGLISH MOBILE RESPONSIVE
 *
 * Purpose:
 * English mobile-only overrides, based on the current stable
 * responsive.css + english(2).css files.
 *
 * IMPORTANT:
 * - Scoped to html[lang="en"] only.
 * - Mobile/tablet only. Desktop English layout is untouched.
 * - This file does not replace responsive.css or english(2).css.
 * - Load this file AFTER responsive.css and english(2).css.
 */

html[lang="en"]{
    direction:ltr;
}

html[lang="en"] body{
    direction:ltr;
    overflow-x:hidden;
}

@media (max-width:991px){

    /* =========================
       TOP BAR + MOBILE HEADER
       ========================= */

    html[lang="en"] .topbar .container{
        padding:0 8px;
        min-height:42px;
        flex-wrap:nowrap;
        direction:ltr;
    }

    html[lang="en"] .topbar-left,
    html[lang="en"] .topbar-right{
        display:flex;
        align-items:center;
        direction:ltr;
    }

    html[lang="en"] .topbar-left>* ,
    html[lang="en"] .topbar-right>*{
        margin:0 !important;
        padding:0 5px !important;
        white-space:nowrap;
    }

    html[lang="en"] .site-header .container{
        direction:ltr;
        padding:5px 14px;
        gap:6px;
    }

    html[lang="en"] .site-header{
        height:70px;
        overflow:hidden;
    }

    html[lang="en"] .mobile-menu-toggle{
        order:1;
        margin:0;
        flex-shrink:0;
    }

    html[lang="en"] .header-actions{
        order:2;
        display:flex;
        align-items:center;
        gap:7px;
        flex-shrink:0;
    }

    html[lang="en"] .header-logo{
        order:3;
        margin:0 auto;
        min-width:0;
    }

    html[lang="en"] .header-logo img{
        height:48px;
        width:auto;
        max-width:145px;
    }

    /* Main desktop search is not part of the English mobile header. */
    html[lang="en"] .header-search{
        display:none !important;
    }

    html[lang="en"] .header-account,
    html[lang="en"] .create-store-btn{
        display:none !important;
    }

    html[lang="en"] .header-cart img,
    html[lang="en"] .header-icon img{
        width:21px;
        height:21px;
    }

    html[lang="en"] .cart-total{
        display:none;
    }

    /* =========================
       HERO
       ========================= */

    html[lang="en"] .hero{
        width:100%;
        max-width:100%;
        margin:10px 0 14px;
        direction:ltr;
    }

    html[lang="en"] .hero .container{
        width:100%;
        max-width:100%;
        margin:0;
    }

    html[lang="en"] .hero-slider{
        width:100%;
        height:320px;
        min-height:320px;
        max-height:320px;
        overflow:hidden;
    }

    html[lang="en"] .hero-box{
        width:100%;
        height:100%;
        min-height:0;
        max-height:none;
        padding:0 18px;
        border-radius:0;
        overflow:hidden;
        position:relative;
        direction:ltr;
        background-position:80% center;
    }

    html[lang="en"] .hero-content{
        left:18px;
        right:auto;
        bottom:52px;
        width:calc(100% - 36px);
        max-width:calc(100% - 36px);
        margin:0;
        padding:0;
        text-align:left;
        direction:ltr;
    }

    html[lang="en"] .hero-content h1,
    html[lang="en"] .hero-content p{
        text-align:left;
        direction:ltr;
    }

    html[lang="en"] .hero-content h1{
        font-size:25px;
        line-height:1.25;
        margin:0;
    }

    html[lang="en"] .hero-content h1 span{
        font-size:19px;
        line-height:1.35;
    }

    html[lang="en"] .hero-content p{
        margin:10px 0 15px;
        font-size:12.5px;
        line-height:1.7;
    }

    html[lang="en"] .hero-buttons{
        position:static;
        display:flex;
        justify-content:flex-start;
        align-items:center;
        gap:8px;
        width:100%;
        flex-wrap:nowrap;
        transform:none;
    }

    html[lang="en"] .hero-btn{
        width:auto;
        min-width:112px;
        height:40px;
        padding:0 13px;
        font-size:12px;
    }

    html[lang="en"] .hero-dots{
        left:auto;
        right:18px;
        bottom:13px;
        transform:none;
    }

    html[lang="en"] .hero-prev{
        left:10px;
        right:auto;
    }

    html[lang="en"] .hero-next{
        right:10px;
        left:auto;
    }

    html[lang="en"] .hero-features{
        grid-template-columns:repeat(2,minmax(0,1fr));
        margin:10px 10px 0;
        direction:ltr;
    }

    html[lang="en"] .hero-feature{
        text-align:center;
        flex-direction:column;
        padding:15px 8px;
        gap:7px;
        margin:2px;
    }

    /* =========================
       LATEST STORES
       ========================= */

    html[lang="en"] .stores{
        width:100%;
        overflow:hidden;
        direction:ltr;
    }

    html[lang="en"] .stores .container{
        width:100%;
        max-width:100%;
        margin:0;
    }

    html[lang="en"] .stores .section-header{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        gap:10px;
        align-items:center;
        margin:0 10px 14px;
        text-align:left;
    }

    html[lang="en"] .stores .section-header h2{
        font-size:23px;
        line-height:1.25;
        text-align:left;
    }

    html[lang="en"] .stores .stores-badge{
        grid-column:1 / -1;
        width:100%;
        min-width:0;
        padding:9px 12px;
        font-size:11px;
        line-height:1.45;
        text-align:center;
    }

    html[lang="en"] .stores-track,
    html[lang="en"] .stores-slider{
        direction:ltr;
    }

    /* =========================
       CATEGORIES
       ========================= */

    html[lang="en"] .categories,
    html[lang="en"] .sscat-mobile{
        direction:ltr;
    }

    html[lang="en"] .categories-desktop{
        display:none !important;
    }

    html[lang="en"] .sscat-mobile{
        display:block;
        margin:28px 12px;
    }

    html[lang="en"] .sscat-header{
        text-align:left;
        margin-bottom:18px;
    }

    html[lang="en"] .sscat-header h2{
        margin:0 0 10px;
        font-size:24px;
        line-height:1.25;
        text-align:left;
    }

    html[lang="en"] .sscat-banner{
        width:100%;
        box-sizing:border-box;
        white-space:normal;
        text-align:center;
        font-size:11px;
    }

    html[lang="en"] .sscat-slider,
    html[lang="en"] .sscat-track{
        width:100%;
        direction:ltr;
    }

    html[lang="en"] .sscat-page{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        direction:ltr;
    }

    html[lang="en"] .sscat-card{
        min-height:150px;
        padding:15px 8px;
    }

    /* =========================
       LATEST PRODUCTS
       ========================= */

    html[lang="en"] .products-mobile{
        display:block !important;
        width:100%;
        overflow:hidden;
        padding:18px 0 24px;
        direction:ltr;
    }

    html[lang="en"] .products-mobile .container{
        width:100%;
        max-width:100%;
        padding:0 12px;
        box-sizing:border-box;
    }

    html[lang="en"] .products-mobile-header{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        gap:10px;
        align-items:center;
        margin:0 4px 12px;
        direction:ltr;
    }

    html[lang="en"] .products-mobile-header h2{
        font-size:22px;
        text-align:left;
    }

    html[lang="en"] .products-mobile-header a{
        font-size:11px;
        min-height:34px;
        padding:0 10px;
    }

    html[lang="en"] .products-mobile-header::after{
        content:'🔥 12,500+ new products • Daily deals • Fast shipping';
        grid-column:1 / -1;
        width:100%;
        min-height:38px;
        padding:7px 8px;
        font-size:10.5px;
        white-space:normal;
        box-sizing:border-box;
        text-align:center;
    }

    html[lang="en"] .products-mobile-grid{
        display:grid !important;
        grid-template-rows:repeat(2,minmax(0,1fr)) !important;
        grid-auto-flow:column !important;
        grid-auto-columns:calc((100% - 10px) / 2) !important;
        gap:10px !important;
        direction:ltr;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        scrollbar-width:none;
        scroll-snap-type:x mandatory;
    }

    html[lang="en"] .products-mobile-grid::-webkit-scrollbar{
        display:none;
    }

    html[lang="en"] .products-mobile-grid .product-card{
        width:100% !important;
        min-width:0 !important;
        height:100% !important;
    }

    html[lang="en"] .products-mobile-grid .product-title{
        font-size:14px !important;
        line-height:1.35 !important;
        text-align:center;
    }

    html[lang="en"] .products-mobile-grid .product-price-box{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
        gap:5px !important;
    }

    html[lang="en"] .products-mobile-grid .product-price,
    html[lang="en"] .products-mobile-grid .product-old-price{
        width:100% !important;
        justify-content:center !important;
        text-align:center !important;
    }

    html[lang="en"] .products-mobile-grid .product-old-price{
        order:2 !important;
    }

    /* Keep the native English slider visible instead of the desktop grid. */
    html[lang="en"] .products .products-desktop{
        display:none !important;
    }

    html[lang="en"] .products .sspro-mobile{
        display:block !important;
    }

    html[lang="en"] .sspro-page{
        direction:ltr;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    /* =========================
       ABOUT PAGE
       ========================= */

    html[lang="en"] .about-hero,
    html[lang="en"] .about-hero-grid,
    html[lang="en"] .story-grid,
    html[lang="en"] .about-cta-box{
        direction:ltr;
    }

    html[lang="en"] .about-hero{
        padding:40px 15px;
        margin:0;
        border-radius:0;
    }

    html[lang="en"] .about-hero-grid,
    html[lang="en"] .story-grid,
    html[lang="en"] .about-cta-box{
        grid-template-columns:1fr;
        gap:30px;
        text-align:left;
    }

    html[lang="en"] .about-hero-content{
        max-width:none;
        padding:0;
        text-align:left;
    }

    html[lang="en"] .about-hero-content h1{
        font-size:34px;
        line-height:1.25;
        text-align:left;
    }

    html[lang="en"] .about-hero-content p{
        font-size:16px;
        line-height:1.8;
        text-align:left;
    }

    html[lang="en"] .features-grid,
    html[lang="en"] .stats-grid,
    html[lang="en"] .timeline{
        grid-template-columns:1fr;
    }

    /* =========================
       CONTACT PAGE
       ========================= */

    html[lang="en"] .contact-section,
    html[lang="en"] .contact-grid,
    html[lang="en"] .contact-info,
    html[lang="en"] .contact-form-wrapper,
    html[lang="en"] .contact-help,
    html[lang="en"] .contact-faq{
        direction:ltr;
    }

    html[lang="en"] .contact-section{
        padding:15px 0 0;
    }

    html[lang="en"] .contact-grid{
        grid-template-columns:1fr;
        gap:20px;
        margin:0 12px;
    }

    html[lang="en"] .contact-info{
        margin:0;
        gap:14px;
    }

    html[lang="en"] .contact-form-wrapper{
        margin:0;
        padding:18px;
        border-radius:18px;
    }

    html[lang="en"] .contact-form{
        gap:18px;
    }

    html[lang="en"] .contact-form input,
    html[lang="en"] .contact-form textarea,
    html[lang="en"] .contact-form select{
        width:100%;
        box-sizing:border-box;
        text-align:left;
        direction:ltr;
    }

    html[lang="en"] .contact-form button{
        width:100%;
        min-width:0;
        align-self:stretch;
    }

    html[lang="en"] .help-grid{
        grid-template-columns:1fr;
    }

    html[lang="en"] .faq-box{
        padding:45px 20px;
        border-radius:20px;
    }

    html[lang="en"] .faq-box h2{
        font-size:30px;
        line-height:1.3;
    }

    /* =========================
       ACCOUNT TYPE
       ========================= */

    html[lang="en"] .account-type-wrapper{
        display:grid;
        grid-template-columns:1fr;
        grid-template-areas:
            "hero"
            "content";
        width:100%;
        max-width:100%;
        border-radius:0;
        direction:ltr;
    }

    html[lang="en"] .account-type-hero{
        grid-area:hero;
        min-height:430px;
        width:100%;
    }

    html[lang="en"] .account-type-hero-content{
        position:relative;
        inset:auto;
        min-height:430px;
        padding:38px 20px;
        align-items:center;
        justify-content:center;
        text-align:center;
        box-sizing:border-box;
    }

    html[lang="en"] .account-type-hero-content h1{
        font-size:38px;
        line-height:1.2;
        text-align:center;
    }

    html[lang="en"] .account-type-hero-content p{
        max-width:100%;
        margin:18px 0 25px;
        font-size:15px;
        line-height:1.8;
        text-align:center;
    }

    html[lang="en"] .account-type-hero-features{
        max-width:100%;
    }

    html[lang="en"] .account-type-hero-features li{
        justify-content:flex-start;
        text-align:left;
        font-size:14px;
    }

    html[lang="en"] .account-type-content{
        grid-area:content;
        padding:28px 15px;
        width:100%;
        box-sizing:border-box;
    }

    html[lang="en"] .content-header{
        margin-bottom:25px;
        text-align:center;
    }

    html[lang="en"] .content-header h2{
        font-size:30px;
        line-height:1.25;
    }

    html[lang="en"] .account-cards{
        grid-template-columns:1fr;
        gap:14px;
    }

    html[lang="en"] .account-card{
        padding:22px 16px;
        min-height:0;
    }

    /* =========================
       NEWSLETTER + FOOTER
       ========================= */

    html[lang="en"] .newsletter,
    html[lang="en"] .footer,
    html[lang="en"] .footer-bottom{
        direction:ltr;
    }

    html[lang="en"] .newsletter{
        margin:18px 12px;
    }

    html[lang="en"] .newsletter .container{
        padding:24px 18px;
    }

    html[lang="en"] .newsletter-left,
    html[lang="en"] .newsletter-content{
        text-align:center;
    }

    html[lang="en"] .newsletter-form input{
        text-align:left;
        direction:ltr;
    }

    html[lang="en"] .footer .container{
        padding:35px 20px;
    }

    html[lang="en"] .footer-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    html[lang="en"] .footer-column{
        text-align:center;
        padding-bottom:26px;
    }

    html[lang="en"] .footer-logo{
        display:block;
        margin:0 auto 24px;
    }

    html[lang="en"] .footer-contact li,
    html[lang="en"] .footer-social{
        justify-content:center;
    }

    html[lang="en"] .footer-column:not(.footer-brand) li{
        padding:0;
        text-align:center;
        justify-content:center;
    }

    html[lang="en"] .footer-column:not(.footer-brand) li::before{
        display:inline-block;
    }

    html[lang="en"] .footer-bottom .container{
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:18px;
        padding:20px 15px 28px;
    }

}

@media (max-width:420px){

    html[lang="en"] .site-header .container{
        padding-left:10px;
        padding-right:10px;
    }

    html[lang="en"] .header-logo img{
        height:44px;
        max-width:132px;
    }

    html[lang="en"] .hero-slider{
        height:300px;
        min-height:300px;
        max-height:300px;
    }

    html[lang="en"] .hero-content{
        left:14px;
        width:calc(100% - 28px);
        max-width:calc(100% - 28px);
        bottom:48px;
    }

    html[lang="en"] .hero-content h1{
        font-size:22px;
    }

    html[lang="en"] .hero-content h1 span{
        font-size:17px;
    }

    html[lang="en"] .hero-content p{
        font-size:11.5px;
        line-height:1.6;
        margin:8px 0 12px;
    }

    html[lang="en"] .hero-btn{
        min-width:104px;
        height:38px;
        padding:0 10px;
        font-size:11.5px;
    }

    html[lang="en"] .products-mobile-grid{
        grid-auto-columns:calc((100% - 8px) / 2) !important;
        gap:8px !important;
    }

    html[lang="en"] .products-mobile-grid .product-title{
        font-size:13px !important;
    }

    html[lang="en"] .sscat-page{
        gap:8px;
    }

    html[lang="en"] .sscat-card{
        min-height:140px;
        padding:13px 6px;
    }

    html[lang="en"] .account-type-hero,
    html[lang="en"] .account-type-hero-content{
        min-height:390px;
    }

    html[lang="en"] .account-type-hero-content h1{
        font-size:32px;
    }

    html[lang="en"] .account-type-content{
        padding:24px 12px;
    }

}

/* ============================================================
   SMARTSHOP ENGLISH MOBILE — FINAL VISUAL CORRECTIONS
   Scope: English mobile only. Desktop files are untouched.
   ============================================================ */

@media (max-width:768px){

    /* ---------- General mobile breathing room ---------- */

    html[lang="en"] .contact-section,
    html[lang="en"] .faq-section,
    html[lang="en"] .categories-page,
    html[lang="en"] .account-type-content,
    html[lang="en"] .about-story,
    html[lang="en"] .about-features,
    html[lang="en"] .about-stats,
    html[lang="en"] .about-timeline,
    html[lang="en"] .about-cta{
        box-sizing:border-box;
        padding-left:12px;
        padding-right:12px;
        max-width:100%;
        overflow-x:hidden;
    }

    /* ---------- Hero ---------- */

    html[lang="en"] .hero-slider{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    html[lang="en"] .hero-box{
        box-sizing:border-box;
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    html[lang="en"] .hero-content{
        box-sizing:border-box;
        max-width:calc(100% - 28px);
        overflow:hidden;
    }

    html[lang="en"] .hero-content h1,
    html[lang="en"] .hero-content p{
        max-width:100%;
        overflow-wrap:anywhere;
        word-break:normal;
    }

    /* ---------- Latest Stores ---------- */

    html[lang="en"] .stores{
        width:100%;
        max-width:100%;
        overflow:hidden;
        box-sizing:border-box;
    }

    html[lang="en"] .stores .container{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }

    html[lang="en"] .stores-grid{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:9px !important;
        width:100%;
        margin:0 !important;
        padding:0 9px;
        box-sizing:border-box;
    }

    html[lang="en"] .store-card{
        width:100%;
        min-width:0;
        box-sizing:border-box;
        border-radius:14px;
    }

    html[lang="en"] .store-cover,
    html[lang="en"] .store-cover img{
        width:100%;
        height:96px;
        object-fit:cover;
    }

    html[lang="en"] .store-body{
        min-width:0;
        padding:10px;
        box-sizing:border-box;
    }

    html[lang="en"] .store-header{
        min-width:0;
        gap:7px;
        margin-top:-48px;
    }

    html[lang="en"] .store-logo,
    html[lang="en"] .store-logo img{
        width:56px;
        height:56px;
    }

    html[lang="en"] .store-logo{
        flex:0 0 56px;
    }

    html[lang="en"] .store-info{
        min-width:0;
        padding-top:25px;
    }

    html[lang="en"] .store-title h3{
        min-width:0;
        font-size:12px;
        line-height:1.3;
    }

    html[lang="en"] .store-description{
        min-height:42px;
        font-size:10.5px;
        line-height:1.5;
        overflow:hidden;
    }

    html[lang="en"] .store-footer{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-rows:auto auto;
        column-gap:6px;
        row-gap:4px;
        margin-top:7px;
        align-items:center;
    }

    html[lang="en"] .store-location{
        grid-column:1;
        grid-row:1;
        min-width:0;
        justify-self:start;
        font-size:10px;
    }

    html[lang="en"] .store-rating{
        grid-column:1;
        grid-row:2;
        justify-self:start;
        font-size:10px;
    }

    html[lang="en"] .store-offers-btn{
        grid-column:2;
        grid-row:1 / span 2;
        min-width:70px;
        width:auto;
        height:31px;
        padding:0 7px;
        font-size:10px;
        box-sizing:border-box;
        white-space:nowrap;
    }

    /* ---------- Category page: it has no mobile markup, so keep its
       existing product cards visible and make them two columns. ---------- */

    html[lang="en"] .products:not(:has(.products-mobile)) .products-desktop{
        display:block !important;
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }

    html[lang="en"] .products:not(:has(.products-mobile)) .products-grid{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
        width:100%;
        box-sizing:border-box;
    }

    html[lang="en"] .products:not(:has(.products-mobile)) .product-card{
        min-width:0;
        width:100%;
        box-sizing:border-box;
    }

    html[lang="en"] .products:not(:has(.products-mobile)) .product-media{
        min-height:145px;
        padding:28px 8px 0;
    }

    html[lang="en"] .products:not(:has(.products-mobile)) .product-image{
        max-height:125px;
    }

    html[lang="en"] .products:not(:has(.products-mobile)) .product-content{
        padding:9px;
        min-width:0;
    }

    html[lang="en"] .products:not(:has(.products-mobile)) .product-title{
        font-size:13px;
        line-height:1.4;
        overflow-wrap:anywhere;
    }

    html[lang="en"] .products:not(:has(.products-mobile)) .product-price-box{
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:5px !important;
        padding:10px 8px;
        text-align:center;
    }

    html[lang="en"] .products:not(:has(.products-mobile)) .product-price,
    html[lang="en"] .products:not(:has(.products-mobile)) .product-old-price{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    html[lang="en"] .products:not(:has(.products-mobile)) .product-old-price{
        order:2;
    }

    /* ---------- About page ---------- */

    html[lang="en"] .about-hero,
    html[lang="en"] .about-story,
    html[lang="en"] .about-features,
    html[lang="en"] .about-stats,
    html[lang="en"] .about-timeline,
    html[lang="en"] .about-cta{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        overflow:hidden;
    }

    html[lang="en"] .about-hero{
        margin:10px 10px 18px;
        width:calc(100% - 20px);
        padding:34px 16px 28px;
        border-radius:20px;
    }

    html[lang="en"] .about-hero-grid{
        display:flex;
        flex-direction:column;
        gap:24px;
        min-height:0;
        width:100%;
    }

    html[lang="en"] .about-hero-content{
        width:100%;
        max-width:100%;
        padding:0;
        text-align:center;
        box-sizing:border-box;
    }

    html[lang="en"] .about-badge{
        max-width:100%;
        box-sizing:border-box;
        padding:9px 16px;
        margin-bottom:18px;
        font-size:12px;
        line-height:1.5;
    }

    html[lang="en"] .about-hero-content h1{
        font-size:30px;
        line-height:1.35;
        margin:0 0 16px;
        overflow-wrap:anywhere;
        text-align:center;
    }

    html[lang="en"] .about-hero-content p{
        max-width:100%;
        margin:0 auto 24px;
        font-size:15px;
        line-height:1.9;
        text-align:center;
    }

    html[lang="en"] .about-hero .hero-actions{
        width:100%;
        justify-content:center;
        gap:10px;
        margin-top:4px;
    }

    html[lang="en"] .about-hero .btn{
        min-width:0;
        width:calc(50% - 5px);
        max-width:180px;
        height:48px;
        padding:0 12px;
        font-size:13px;
    }

    html[lang="en"] .about-hero-image{
        width:100%;
        max-width:100%;
        padding:0;
        justify-content:center;
        transform:none;
        box-sizing:border-box;
    }

    html[lang="en"] .about-hero-image img{
        width:100%;
        max-width:100%;
        height:auto;
        border-radius:20px;
    }

    html[lang="en"] .about-hero-image::before{
        left:50%;
        top:50%;
        width:260px;
        height:260px;
        transform:translate(-50%,-50%);
        filter:blur(28px);
    }

    html[lang="en"] .about-hero::after{
        left:5%;
        top:auto;
        bottom:12%;
        width:90%;
        transform:rotate(-4deg);
    }

    html[lang="en"] .about-story{
        padding-top:28px;
        padding-bottom:32px;
    }

    html[lang="en"] .story-grid{
        display:flex;
        flex-direction:column;
        gap:22px;
        width:100%;
    }

    html[lang="en"] .story-rocket{
        display:none;
    }

    html[lang="en"] .story-content,
    html[lang="en"] .story-image{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }

    html[lang="en"] .story-content{
        text-align:center;
    }

    html[lang="en"] .story-content h2{
        font-size:28px;
        line-height:1.35;
        margin:0 0 12px;
    }

    html[lang="en"] .story-content p{
        margin:0;
        font-size:14px;
        line-height:1.9;
    }

    html[lang="en"] .story-image img{
        width:100%;
        max-width:100%;
        margin:0;
        padding:8px;
        border-radius:20px;
        box-sizing:border-box;
    }

    html[lang="en"] .features-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        padding:0;
        width:100%;
    }

    html[lang="en"] .feature-card{
        min-height:0;
        padding:18px 10px;
        border-radius:16px;
    }

    html[lang="en"] .feature-icon img{
        width:52px;
        height:52px;
    }

    html[lang="en"] .feature-card h3{
        margin:0 0 8px;
        font-size:15px;
        line-height:1.4;
    }

    html[lang="en"] .feature-card p{
        font-size:12px;
        line-height:1.7;
    }

    html[lang="en"] .stats-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:0;
        margin:0;
        border-radius:18px;
    }

    html[lang="en"] .stat-card{
        padding:18px 8px;
    }

    html[lang="en"] .stat-card:not(:last-child)::after{
        display:none;
    }

    html[lang="en"] .stat-card:nth-child(odd){
        border-right:1px solid rgba(255,255,255,.08);
    }

    html[lang="en"] .stat-card:nth-child(-n+2){
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    html[lang="en"] .stat-icon img{
        width:46px;
        height:46px;
    }

    html[lang="en"] .stat-card h3{
        font-size:28px;
        line-height:1.2;
    }

    html[lang="en"] .stat-card span{
        font-size:12px;
        line-height:1.5;
    }

    html[lang="en"] .about-timeline{
        padding-top:30px;
        padding-bottom:36px;
    }

    html[lang="en"] .timeline{
        display:grid;
        grid-template-columns:1fr;
        gap:14px;
        width:100%;
    }

    html[lang="en"] .timeline-line{
        display:none;
    }

    html[lang="en"] .timeline-item{
        box-sizing:border-box;
        background:#fff;
        border:1px solid #edf1f7;
        border-radius:16px;
        padding:18px 14px;
        box-shadow:0 6px 18px rgba(10,30,70,.05);
    }

    html[lang="en"] .timeline-number{
        width:48px;
        height:48px;
        margin:0 auto 12px;
        font-size:19px;
    }

    html[lang="en"] .timeline-item h3{
        margin:0 0 7px;
        font-size:17px;
        line-height:1.4;
    }

    html[lang="en"] .timeline-item p{
        margin:0;
        font-size:13px;
        line-height:1.75;
    }

    html[lang="en"] .about-cta{
        padding-bottom:24px;
    }

    html[lang="en"] .about-cta-box{
        display:flex;
        flex-direction:column;
        gap:20px;
        padding:28px 18px;
        border-radius:20px;
        text-align:center;
        box-sizing:border-box;
    }

    html[lang="en"] .about-cta-content{
        width:100%;
        max-width:100%;
    }

    html[lang="en"] .about-cta-content h2{
        margin:8px 0 12px;
        font-size:29px;
        line-height:1.4;
    }

    html[lang="en"] .about-cta-content p{
        margin:0 auto 20px;
        max-width:100%;
        font-size:14px;
        line-height:1.85;
    }

    html[lang="en"] .about-cta .hero-actions{
        width:100%;
        gap:10px;
    }

    html[lang="en"] .about-cta .btn{
        min-width:0;
        width:calc(50% - 5px);
        height:48px;
        padding:0 10px;
        font-size:13px;
    }

    html[lang="en"] .about-cta-icon{
        width:100%;
    }

    html[lang="en"] .about-cta-icon img{
        width:90px;
        max-width:100%;
        height:auto;
    }

    /* ---------- Newsletter: remove the desktop-height effect ---------- */

    html[lang="en"] .newsletter{
        width:calc(100% - 24px);
        max-width:100%;
        height:auto !important;
        min-height:0 !important;
        margin:18px 12px !important;
        box-sizing:border-box;
        overflow:hidden;
    }

    html[lang="en"] .newsletter .container{
        width:100%;
        max-width:100%;
        height:auto !important;
        min-height:0 !important;
        box-sizing:border-box;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        gap:22px;
        padding:24px 18px;
    }

    html[lang="en"] .newsletter-left,
    html[lang="en"] .newsletter-center,
    html[lang="en"] .newsletter-right{
        width:100%;
        max-width:100%;
        flex:none !important;
        box-sizing:border-box;
    }

    html[lang="en"] .newsletter-left{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:14px;
    }

    html[lang="en"] .newsletter-center{
        max-width:none;
    }

    html[lang="en"] .newsletter-right{
        display:flex;
        flex-direction:column;
        gap:14px;
        align-items:stretch;
    }

    html[lang="en"] .newsletter-feature{
        width:100%;
        min-height:70px;
        box-sizing:border-box;
        justify-content:flex-start;
        padding:14px 16px;
        background:rgba(255,255,255,.08);
        border-radius:12px;
    }

    /* ---------- Footer bottom: copyright and payment logos separated ---------- */

    html[lang="en"] .footer-bottom{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    html[lang="en"] .footer-bottom .container{
        width:100%;
        max-width:100%;
        min-height:0 !important;
        height:auto !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:12px !important;
        padding:18px 15px 24px !important;
        box-sizing:border-box;
    }

    html[lang="en"] .footer-copy{
        position:static !important;
        left:auto !important;
        transform:none !important;
        order:1 !important;
        width:100%;
        text-align:center !important;
        box-sizing:border-box;
    }

    html[lang="en"] .footer-payments{
        order:2 !important;
        margin:0 !important;
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        box-sizing:border-box;
    }

    html[lang="en"] .footer-payments img{
        max-width:100%;
        height:26px;
        width:auto;
        object-fit:contain;
    }
}

@media (max-width:420px){

    html[lang="en"] .stores-grid{
        gap:8px !important;
        padding-left:8px;
        padding-right:8px;
    }

    html[lang="en"] .store-body{
        padding:8px;
    }

    html[lang="en"] .store-logo,
    html[lang="en"] .store-logo img{
        width:52px;
        height:52px;
    }

    html[lang="en"] .store-logo{
        flex-basis:52px;
    }

    html[lang="en"] .store-header{
        margin-top:-45px;
    }

    html[lang="en"] .store-info{
        padding-top:22px;
    }

    html[lang="en"] .store-title h3{
        font-size:11px;
    }

    html[lang="en"] .store-description{
        font-size:10px;
    }

    html[lang="en"] .store-offers-btn{
        min-width:64px;
        font-size:9.5px;
    }

    html[lang="en"] .about-hero-content h1{
        font-size:27px;
    }

    html[lang="en"] .about-hero-content p{
        font-size:14px;
    }

    html[lang="en"] .about-hero .btn,
    html[lang="en"] .about-cta .btn{
        font-size:12px;
    }

    html[lang="en"] .feature-card{
        padding:16px 8px;
    }

    html[lang="en"] .feature-card h3{
        font-size:14px;
    }

    html[lang="en"] .feature-card p{
        font-size:11px;
    }

    html[lang="en"] .products:not(:has(.products-mobile)) .products-grid{
        gap:8px !important;
    }

    html[lang="en"] .products:not(:has(.products-mobile)) .product-media{
        min-height:135px;
    }

    html[lang="en"] .products:not(:has(.products-mobile)) .product-image{
        max-height:115px;
    }

    html[lang="en"] .products:not(:has(.products-mobile)) .product-title{
        font-size:12.5px;
    }
}

/* ============================================================
   SMARTSHOP ENGLISH MOBILE — HELP CENTER FINAL FIX
   Scope: Help Center page only.
   Purpose:
   - Add safe side spacing so cards never touch the screen edges.
   - Keep the support/contact cards inside the page container.
   - Display the four Help Center category cards in two columns.
   - Do not alter Arabic or any other page.
   ============================================================ */

@media (max-width:768px){

    html[lang="en"] .help-center-page{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        overflow-x:hidden;
    }

    html[lang="en"] .help-center-page .contact-section{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        padding:15px 12px 0;
        margin:0;
    }

    html[lang="en"] .help-center-page .contact-grid{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        margin:0;
        gap:20px;
    }

    html[lang="en"] .help-center-page .contact-info{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        margin:0;
        gap:12px;
    }

    html[lang="en"] .help-center-page .contact-card,
    html[lang="en"] .help-center-page .info-card{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        margin-left:0;
        margin-right:0;
    }

    html[lang="en"] .help-center-page .contact-support-card{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        margin-left:0;
        margin-right:0;
    }

    html[lang="en"] .help-center-page .help-center-banner{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        margin-left:0;
        margin-right:0;
    }

    html[lang="en"] .help-center-page .faq-section{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        padding:0;
        margin:0;
    }

    html[lang="en"] .help-center-page .faq-wrapper{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        margin:0;
        padding:0;
    }

    html[lang="en"] .help-center-page .faq-item{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        margin-left:0;
        margin-right:0;
    }

    /* Help Center categories: two columns on mobile. */
    html[lang="en"] .help-center-page .contact-help-inline{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        margin:25px 0 0;
    }

    html[lang="en"] .help-center-page .contact-help-inline .section-header{
        margin-bottom:14px;
    }

    html[lang="en"] .help-center-page .help-grid{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
        margin:0;
        padding:0;
    }

    html[lang="en"] .help-center-page .help-card{
        width:100%;
        min-width:0;
        box-sizing:border-box;
        padding:18px 8px;
        border-radius:16px;
    }

}

@media (max-width:420px){

    html[lang="en"] .help-center-page .contact-section{
        padding-left:10px;
        padding-right:10px;
    }

    html[lang="en"] .help-center-page .help-grid{
        gap:8px !important;
    }

    html[lang="en"] .help-center-page .help-card{
        padding:16px 6px;
    }

}