/* ════════════════════════════════════════════════
   SA SPORTS — SHARED MOBILE PATCH
   Applied to: shop, product, cart, checkout,
               about, contact pages
   ════════════════════════════════════════════════ */

/* ── Trust bar ─────────────────────────────── */
@media(max-width:767px){
  .trust-bar,.trust-ticker{height:34px;margin-top:var(--header-h)}
  .trust-item{font-size:.65rem;padding:0 20px;gap:7px;letter-spacing:.08em}
}

/* ── Header (all pages) ─────────────────────── */
@media(max-width:767px){
  #mainHeader{height:60px;border-bottom:1px solid rgba(255,107,26,.12)}
  #mainHeader .header-inner{padding:0 16px;gap:10px}
  .header-logo img,.logo-img{height:36px}
  .header-search{display:none}
  .header-nav{display:none!important}
  .header-wa-btn{display:none!important}
  .header-icon-btn{width:38px;height:38px}
  #menuToggle{width:38px;height:38px;display:flex!important}

  /* Overlay */
  #navOverlay,#cartOverlay{backdrop-filter:blur(6px)}

  /* Mobile nav */
  #mobileNav{
    position:fixed;top:0;left:0;right:0;bottom:0;
    width:100%!important;height:100dvh;
    background:var(--dark,#060810);
    transform:translateX(-100%);
    transition:transform .38s cubic-bezier(.4,0,.2,1);
    padding:0;border:none;
    display:flex;flex-direction:column;
    overflow-y:auto;z-index:9998;
  }
  #mobileNav.open{transform:translateX(0)!important;left:0!important}
  .mobile-nav-close{
    position:absolute;top:14px;right:16px;
    width:38px;height:38px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:.95rem;color:#fff;cursor:pointer;
    z-index:2;transition:background .25s;
  }
  .mobile-nav-close:hover{background:rgba(255,107,26,.2);color:#FF6B1A}
  .mobile-nav-logo{
    display:flex;align-items:center;gap:12px;
    padding:14px 20px;
    border-bottom:1px solid rgba(255,255,255,.06);
    margin-bottom:0;
  }
  .mobile-nav-link{
    display:block;
    font-family:'Space Grotesk',sans-serif;
    font-size:1.02rem;font-weight:600;
    color:rgba(255,255,255,.75);
    padding:15px 20px;
    border-bottom:1px solid rgba(255,255,255,.04);
    border-radius:0;letter-spacing:.01em;
    transition:background .2s,color .2s;
  }
  .mobile-nav-link:hover,.mobile-nav-link.active{
    background:rgba(255,107,26,.07);
    color:#fff;
  }
  .mobile-nav-link.active{
    border-left:3px solid #FF6B1A;
    padding-left:17px;
  }
  .mobile-nav-divider{height:1px;background:rgba(255,255,255,.06);margin:4px 0}
  .lang-switcher{
    display:flex;
    margin:16px 20px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    border-radius:100px;
    padding:3px;
  }
  .lang-switcher .lang-btn{flex:1;text-align:center;padding:8px 0;font-size:.8rem;border-radius:100px}
  .lang-switcher .lang-btn.active{background:#FF6B1A;color:#fff}
}

/* ── Cart Drawer — Bottom sheet ─────────────── */
@media(max-width:767px){
  #cartDrawer{
    top:auto;left:0;right:0;bottom:0;
    width:100%!important;
    height:90dvh;
    border-radius:22px 22px 0 0;
    border-left:none;
    border-top:1px solid rgba(255,107,26,.18);
    transition:transform .38s cubic-bezier(.4,0,.2,1);
    transform:translateY(100%);
  }
  #cartDrawer.open{transform:translateY(0)!important;right:0!important}
  .cart-drawer-header{
    flex-direction:column;align-items:center;
    padding:18px 20px 10px;gap:0;
  }
  .cart-drawer-header::before{
    content:'';display:block;
    width:38px;height:4px;
    background:rgba(255,255,255,.15);border-radius:2px;
    margin-bottom:12px;
  }
  .cart-drawer-header h3{font-size:.95rem;letter-spacing:.08em}
  .cart-close{position:absolute;top:14px;right:20px}
  .cart-drawer-footer{padding:14px 20px 28px}
  .cart-drawer-footer .btn-primary{border-radius:13px;font-size:.9rem;padding:14px}
  #cartDrawerItems{padding:10px 16px}
  .cart-item img{width:60px;height:60px;border-radius:9px}
  .cart-item-name{font-size:.84rem}
  .cart-item-price{font-size:.95rem}
}

/* ── Float buttons — bottom dock ────────────── */
@media(max-width:767px){
  .float-buttons{
    position:fixed;bottom:0;left:0;right:0;
    flex-direction:row;gap:0;
    background:var(--dark2,#0C0F1A);
    border-top:1px solid rgba(255,255,255,.08);
    border-radius:0;padding:0;
    box-shadow:0 -8px 32px rgba(0,0,0,.5);
    z-index:890;
  }
  body{padding-bottom:58px}
  .float-btn{
    flex:1;flex-direction:column;
    border-radius:0;padding:10px 8px 12px;
    font-size:.62rem;font-weight:700;
    letter-spacing:.05em;text-transform:uppercase;
    gap:4px;justify-content:center;align-items:center;
    height:58px;box-shadow:none;
  }
  .float-btn:hover{transform:none}
  .float-btn-icon{font-size:1.2rem;line-height:1}
  .float-btn-wa{background:#25D366;border-right:1px solid rgba(255,255,255,.15)}
  .float-btn-call{background:#FF6B1A;border:none;color:#fff}
  .rtl .float-buttons{left:0;right:0}
}
@supports(padding-bottom:env(safe-area-inset-bottom)){
  @media(max-width:767px){
    .float-buttons{padding-bottom:env(safe-area-inset-bottom);height:calc(58px + env(safe-area-inset-bottom))}
    body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  }
}

/* ── Page header ─────────────────────────────── */
@media(max-width:767px){
  .page-header{padding:calc(var(--header-h,60px) + 20px) 0 20px}
  .page-header-content{padding:0 16px}
  .page-header h1{font-size:clamp(1.9rem,9vw,2.8rem)}
  .breadcrumb{font-size:.8rem;gap:5px}
}

/* ── SHOP PAGE ───────────────────────────────── */
@media(max-width:767px){
  .filter-bar{
    padding:10px 16px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;flex-wrap:nowrap;gap:6px;
    border-radius:0;background:var(--dark2,#0C0F1A);
    border-left:none;border-right:none;border-radius:0;
  }
  .filter-bar::-webkit-scrollbar{display:none}
  .filter-btn{
    font-size:.74rem;padding:7px 14px;
    white-space:nowrap;flex-shrink:0;
    border-radius:100px;
  }
  .filter-bar-right{margin-left:auto;flex-shrink:0}
  .sort-select{font-size:.78rem;padding:7px 10px}

  .products-grid{
    grid-template-columns:1fr 1fr!important;
    gap:10px;
    padding:0 16px;
  }
  .product-card{border-radius:14px}
  .product-card:hover{transform:none!important;box-shadow:none!important}
  .product-card:active{transform:scale(.98)!important}
  .product-img-wrap{aspect-ratio:1}
  .product-info{padding:10px}
  .product-name{font-size:.8rem;margin-bottom:6px}
  .product-price{font-size:1rem}
  .product-old-price{font-size:.76rem}
  .product-price-row{gap:5px;margin-bottom:6px}
  .product-badge{font-size:.58rem;padding:3px 7px;top:8px;left:8px}
  .product-discount{font-size:.6rem;padding:2px 6px;top:8px;right:8px}
  .btn-add-cart{
    font-size:.72rem;padding:8px 4px;
    border-radius:8px;gap:3px;
    letter-spacing:.03em;
  }
  .btn-add-cart.added{background:#00C878;border-color:#00C878}
  .product-actions{display:none!important}
  .stock-urgent,.stock-ok{font-size:.74rem}
  .product-sizes-quick{gap:3px;margin-bottom:6px}
  .product-sizes-quick .size-chip{font-size:.6rem;padding:1px 5px}

  /* Sale banner in shop */
  .sale-banner{padding:28px 16px;border-radius:16px;margin:0 16px}
  .sale-banner h2{font-size:clamp(1.8rem,8vw,2.5rem)}
  .sale-banner p{font-size:.84rem}
  .sale-countdown{gap:7px}
  .countdown-unit{padding:10px 12px;min-width:58px}
  .countdown-unit .num{font-size:1.8rem}
  .countdown-colon{font-size:1.4rem}

  /* Shipping section */
  .shipping-section{padding:24px 16px;border-radius:16px;margin:0 16px}
  .shipping-flags{gap:8px}
  .flag-item{font-size:.78rem;padding:5px 10px}

  /* Newsletter in shop */
  .newsletter-section{padding:36px 20px;border-radius:16px;margin:0 16px 0}
  .newsletter-form{flex-direction:column;border-radius:12px;overflow:hidden}
  .newsletter-form input{border-radius:10px 10px 0 0;padding:13px 16px;text-align:center}
  .newsletter-form button{border-radius:0 0 10px 10px;padding:13px 16px}
}

/* ── PRODUCT DETAIL PAGE ─────────────────────── */
@media(max-width:767px){
  .product-detail{padding-top:calc(var(--header-h,60px) + 10px);padding-bottom:80px}
  .product-detail-grid{grid-template-columns:1fr!important;gap:20px}
  .product-gallery{position:static!important}
  .product-gallery-thumbs{
    display:flex;gap:8px;overflow-x:auto;
    scrollbar-width:none;padding-bottom:2px;margin-top:8px;
  }
  .product-gallery-thumbs::-webkit-scrollbar{display:none}
  .thumb-img{width:64px;height:64px;flex-shrink:0;border-radius:9px;object-fit:cover;border:2px solid transparent}
  .thumb-img.active{border-color:#FF6B1A}
  .product-main-img-wrap{border-radius:16px!important}
  .product-info-panel{padding:0 16px}
  .product-name-h{font-size:1.5rem!important}
  .product-price-big .price{font-size:1.8rem!important}
  .product-price-big .old-price{font-size:1rem!important}
  .sizes-wrap{gap:7px}
  .size-option{min-width:44px;height:44px;font-size:.82rem;border-radius:9px}
  #qtyInput{height:46px}
  .qty-selector button{width:42px;height:46px}
  .btn-add-cart-big{
    border-radius:13px;font-size:.92rem;padding:15px;
    position:sticky;bottom:70px;z-index:10;
    box-shadow:0 8px 24px rgba(255,107,26,.4);
  }
  .product-tabs{margin-top:24px}
  .product-tabs .tab-btn{font-size:.8rem;padding:10px 14px}
  .product-tabs .tab-content{font-size:.88rem;line-height:1.7}
}

/* ── CART PAGE ───────────────────────────────── */
@media(max-width:767px){
  .cart-page{padding-top:calc(var(--header-h,60px) + 12px);padding-bottom:80px}
  .cart-page-grid{grid-template-columns:1fr!important;gap:16px}
  .cart-summary-box{
    border-radius:16px;padding:20px;
    position:static!important;
  }
  .cart-summary-box h3{font-size:.95rem}
  .summary-row{font-size:.86rem}
  .summary-row.total{font-size:1.15rem}
  .cart-item{padding:12px 0;gap:12px}
  .cart-item img{width:72px;height:72px;border-radius:10px}
  .cart-item-name{font-size:.85rem}
  .cart-item-price{font-size:.95rem}
  .cart-item-qty button{width:28px;height:28px;font-size:.95rem}
  .cart-item-remove{font-size:1rem}
  /* Cart coupon */
  .coupon-row{display:flex;gap:8px}
  .coupon-row input{flex:1;font-size:.88rem;padding:11px 14px;border-radius:10px}
  .coupon-row button{padding:11px 16px;font-size:.82rem;border-radius:10px}
}

/* ── CHECKOUT PAGE ───────────────────────────── */
@media(max-width:767px){
  .checkout-page{padding-top:calc(var(--header-h,60px) + 12px);padding-bottom:80px}
  .checkout-grid{grid-template-columns:1fr!important;gap:14px}
  .checkout-form-section{
    border-radius:16px;padding:20px;margin-bottom:14px;
  }
  .checkout-form-section h3{font-size:.88rem;margin-bottom:18px}
  .form-grid{grid-template-columns:1fr!important;gap:12px}
  .form-group.half{grid-column:1}
  .form-group label{font-size:.78rem}
  .form-group input,.form-group select,.form-group textarea{
    font-size:.9rem;padding:11px 14px;border-radius:9px;
  }
  .order-summary-box{border-radius:16px;padding:20px}
  .order-summary-box h3{font-size:.9rem}
  .btn-place-order{
    width:100%;border-radius:13px;
    font-size:.95rem;padding:15px;
    background:#FF6B1A;color:#fff;
    font-family:'Syne',sans-serif;font-weight:800;
    letter-spacing:.05em;text-transform:uppercase;
    border:none;cursor:pointer;
    box-shadow:0 6px 20px rgba(255,107,26,.4);
    transition:transform .2s;
  }
  .btn-place-order:active{transform:scale(.98)}
  /* Payment method cards */
  .payment-methods{display:flex;flex-direction:column;gap:10px}
  .payment-method-card{
    padding:14px;border-radius:12px;
    border:1.5px solid rgba(255,255,255,.08);
    display:flex;align-items:center;gap:12px;
    font-size:.88rem;cursor:pointer;
    transition:border-color .25s;
  }
  .payment-method-card.selected,.payment-method-card:hover{border-color:#FF6B1A}
  .payment-method-icon{font-size:1.4rem;flex-shrink:0}
}

/* ── ABOUT PAGE ──────────────────────────────── */
@media(max-width:767px){
  .about-page{padding-top:var(--header-h,60px)}
  .about-hero{height:38vh;min-height:260px}
  .about-hero-content h1{font-size:clamp(2rem,10vw,3rem)}
  .stats-grid{
    grid-template-columns:1fr 1fr!important;
    gap:10px;margin-top:-24px;
  }
  .stat-card{padding:18px 12px;border-radius:14px}
  .stat-num{font-size:2rem}
  .stat-label{font-size:.78rem}
  .about-content{padding:36px 16px}
  .about-grid{grid-template-columns:1fr!important;gap:24px}
  .team-grid{grid-template-columns:1fr 1fr!important;gap:12px}
  .team-card{border-radius:14px;padding:20px 14px}
  .mission-section{padding:36px 16px}
  .values-grid{grid-template-columns:1fr 1fr!important;gap:10px}
  .value-card{padding:20px 14px;border-radius:14px}
}

/* ── CONTACT PAGE ────────────────────────────── */
@media(max-width:767px){
  .contact-page{padding-top:calc(var(--header-h,60px) + 16px);padding-bottom:80px}
  .contact-grid{grid-template-columns:1fr!important;gap:24px;padding:0 16px}
  .contact-info h1{font-size:clamp(1.8rem,8vw,2.4rem)}
  .contact-info p{font-size:.88rem}
  .contact-method{padding:14px;border-radius:12px;gap:12px}
  .contact-method-icon{width:40px;height:40px;font-size:1.1rem}
  .contact-method-info h4{font-size:.9rem}
  .contact-method-info span{font-size:.8rem}
  .contact-form-box{padding:22px 16px;border-radius:16px;margin:0 16px}
  .contact-form-box h2{font-size:1.3rem}
  .contact-form .form-group input,
  .contact-form .form-group textarea,
  .contact-form .form-group select{font-size:.9rem;border-radius:9px;padding:11px 14px}
  .contact-form .form-group textarea{min-height:120px}
  .contact-map{border-radius:14px;overflow:hidden;margin-top:20px}
}

/* ── FOOTER (all pages) ──────────────────────── */
@media(max-width:767px){
  .footer{padding-top:36px}
  .footer-grid,.footer-grid.page-footer-grid{
    grid-template-columns:1fr!important;
    gap:0;margin-bottom:0;
    border-bottom:none;
  }
  .footer-brand{padding:0 16px 24px;border-bottom:1px solid rgba(255,255,255,.06)}
  .footer-brand-name,.brand-name{font-size:1.5rem!important}
  .footer-desc,.footer-brand p{font-size:.82rem!important}
  .footer-social,.footer-socials{gap:9px}
  .footer-social a,.social-btn{width:42px;height:42px;font-size:1.1rem}

  .footer-col{
    border-bottom:1px solid rgba(255,255,255,.06);
    padding:0 16px;
  }
  .footer-col h4{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 0;
    cursor:pointer;margin-bottom:0;
    font-size:.75rem;
  }
  .footer-col h4::after{content:'+';font-size:1rem;color:#FF6B1A;font-weight:400}
  .footer-col.fc-open h4::after{content:'−'}
  .footer-links-inner{
    max-height:0;overflow:hidden;
    transition:max-height .32s ease;
    display:flex;flex-direction:column;
  }
  .footer-col.fc-open .footer-links-inner{max-height:400px}
  .footer-link{padding:8px 0;font-size:.84rem}
  .footer-contact-item{padding:7px 0;font-size:.82rem}
  .payment-list{padding:8px 0 16px}
  .payment-item{font-size:.78rem;margin-bottom:7px}
  .footer-shipping{margin:0 16px 12px;border-radius:12px;padding:12px 14px;font-size:.82rem}
  .footer-bottom,.footer-bottom-links{
    padding:16px;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-align:center;
    font-size:.75rem;
  }
  .footer-bottom-links{flex-direction:row;gap:16px;padding:0}
}

/* ── Section headers (shop/other) ─────────────── */
@media(max-width:767px){
  .section-header{margin-bottom:24px}
  .section-header h2{font-size:clamp(1.7rem,8vw,2.5rem)}
  .section-header p{font-size:.85rem}
  .features-grid{grid-template-columns:1fr 1fr!important;gap:10px}
  .feature-card{padding:18px 14px;border-radius:14px}
  .feature-icon{width:42px;height:42px;font-size:1.1rem;border-radius:10px;margin:0 auto 10px}
  .feature-card h3{font-size:.8rem}
  .feature-card p{font-size:.76rem;line-height:1.5}
  .review-card{min-width:100%!important;border-radius:14px;padding:18px}
  .review-text{font-size:.85rem}
  .reviews-track{gap:10px}
}

/* ── Section padding (all pages) ─────────────── */
@media(max-width:767px){
  section,.section{padding:44px 0!important}
  .section-sm{padding:36px 0!important}
  .container{padding:0 16px!important}
}

/* ── Touch: no hover flicker ─────────────────── */
@media(hover:none){
  .product-card:hover,.cat-card:hover,
  .feat-card:hover,.feature-card:hover,
  .review-card:hover,.contact-method:hover,
  .stat-card:hover,.sale-banner:hover{
    transform:none!important;
    box-shadow:none!important;
    border-color:rgba(255,255,255,.07)!important;
  }
  .btn-primary:hover,.btn-orange:hover,.btn-blue:hover,
  .btn-secondary:hover,.btn-dark:hover{
    transform:none!important;
    box-shadow:none!important;
  }
  .product-card:active{transform:scale(.98)!important}
  .btn-primary:active,.btn-orange:active{transform:scale(.97)!important}
  .mobile-nav-link:active{background:rgba(255,107,26,.1)!important}
}

/* ── RTL mobile ──────────────────────────────── */
@media(max-width:767px){
  body.rtl #mobileNav{transform:translateX(100%)}
  body.rtl #mobileNav.open{transform:translateX(0)}
  body.rtl .mobile-nav-link.active{border-left:none;border-right:3px solid #FF6B1A;padding-left:20px;padding-right:17px}
  body.rtl .mobile-nav-close{right:auto;left:16px}
  body.rtl #cartDrawer{border-radius:22px 22px 0 0}
  body.rtl .float-buttons{left:0;right:0}
  body.rtl .footer-col h4{flex-direction:row-reverse}
}