/* ═══════════════════════════════════════════════════════════
   YELLA.UZ — MOBILE HOMEPAGE REDESIGN v2 (AliExpress style)
   Works WITH existing upstore_productany.twig styles
   Uses higher specificity to override inline twig CSS
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

/* ──────────────────────────────────────────
   0. BODY & CONTAINER — AliExpress grey bg
   ────────────────────────────────────────── */
  body.route-common-home {
    background: #F0F1F3 !important;
  }
  body.route-common-home .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }
  body.route-common-home .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.route-common-home .container > .row > .col-sm-12,
  body.route-common-home .container > .row > .col-xs-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

/* ──────────────────────────────────────────
   1. HEADER — lime background
   ────────────────────────────────────────── */
  html body.route-common-home header.up-header,
  html body.route-common-home .up-header.fix-header {
    background: #CCFF00 !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }
  html body.route-common-home header.up-header .btn-menu-mobile {
    background: rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
    width: 34px !important;
    height: 34px !important;
    border: none !important;
  }
  html body.route-common-home header.up-header .btn-menu-mobile i {
    color: #1A1A1A !important;
  }
  html body.route-common-home .yella-mob-logo-text a span {
    color: #1A1A1A !important;
  }
  html body.route-common-home .yella-mob-logo-text a sup {
    background: rgba(0,0,0,0.15) !important;
    color: #1A1A1A !important;
  }
  html body.route-common-home header.up-header .box-account .btn-account {
    background: rgba(0,0,0,0.1) !important;
    border: none !important;
    border-radius: 8px !important;
    width: 34px !important;
    height: 34px !important;
  }
  html body.route-common-home header.up-header .box-account .btn-account i {
    color: #1A1A1A !important;
  }
  html body.route-common-home header.up-header .box-cart #cart > .btn {
    background: rgba(0,0,0,0.1) !important;
    border: none !important;
    border-radius: 8px !important;
    width: 34px !important;
    height: 34px !important;
  }
  html body.route-common-home header.up-header .box-cart #cart > .btn i {
    color: #1A1A1A !important;
  }
  html body.route-common-home header.up-header .box-cart .cart-quantity {
    background: #E11D48 !important;
    color: #FFF !important;
    border: 2px solid #CCFF00 !important;
  }

/* ──────────────────────────────────────────
   2. SEARCH — white on lime
   ────────────────────────────────────────── */
  html body.route-common-home .yella-mob-search {
    background: #CCFF00 !important;
    padding: 0 12px 10px !important;
    border-bottom: none !important;
  }
  html body.route-common-home .yella-mob-search .header-search {
    background: rgba(255,255,255,0.9) !important;
    border: none !important;
    border-radius: 8px !important;
    height: 36px !important;
  }
  html body.route-common-home .yella-mob-search .header-search input.form-control {
    background: transparent !important;
    border: none !important;
    font-size: 13px !important;
    height: 36px !important;
  }
  html body.route-common-home .yella-mob-search .header-search .btn-search {
    background: transparent !important;
    color: #1A1A1A !important;
  }

/* ──────────────────────────────────────────
   3. CATEGORY PILLS (new HTML block)
   ────────────────────────────────────────── */
  .yella-cats {
    display: flex !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: #FFFFFF !important;
  }
  .yella-cats::-webkit-scrollbar { display: none !important; }
  .yella-cats__item {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 12px !important;
    background: #F4F5F6 !important;
    border-radius: 20px !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1A1A1A !important;
    white-space: nowrap !important;
  }
  .yella-cats__item.active,
  .yella-cats__item:active {
    background: #1A1A1A !important;
    color: #CCFF00 !important;
  }

/* ──────────────────────────────────────────
   4. BANNER — full bleed
   ────────────────────────────────────────── */
  body.route-common-home .megasliderpro {
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  body.route-common-home .megasliderpro .item-ms {
    aspect-ratio: 2.2 / 1 !important;
  }
  body.route-common-home .swiper-ms-pagination .swiper-pagination-bullet-active {
    background: #CCFF00 !important;
    width: 14px !important;
    border-radius: 3px !important;
  }

/* ──────────────────────────────────────────
   5. FLASH SALE (new HTML block)
   ────────────────────────────────────────── */
  .yella-flash {
    background: #FFFFFF !important;
    padding: 8px 12px !important;
    margin: 0 !important;
  }
  .yella-flash__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
  }
  .yella-flash__left {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }
  .yella-flash__title {
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #E11D48 !important;
  }
  .yella-flash__timer {
    display: flex !important;
    gap: 2px !important;
    align-items: center !important;
  }
  .yella-flash__time {
    background: #E11D48 !important;
    color: #FFF !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    min-width: 22px !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
  }
  .yella-flash__sep {
    color: #E11D48 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
  }
  .yella-flash__more {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #999 !important;
    text-decoration: none !important;
  }
  .yella-flash__scroll {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
  }
  .yella-flash__scroll::-webkit-scrollbar { display: none !important; }
  .yella-flash__card {
    min-width: 105px !important;
    max-width: 105px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #F0F1F3 !important;
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
    background: #FFF !important;
  }
  .yella-flash__img {
    aspect-ratio: 1/1 !important;
    background: #F8F9FA !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .yella-flash__img img {
    width: 75% !important;
    height: 75% !important;
    object-fit: contain !important;
  }
  .yella-flash__pct {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    background: #E11D48 !important;
    color: #FFF !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    z-index: 2 !important;
    line-height: 1.2 !important;
  }
  .yella-flash__bar {
    height: 14px !important;
    background: #FFE4E8 !important;
    overflow: hidden !important;
  }
  .yella-flash__bar-inner {
    height: 100% !important;
    background: linear-gradient(90deg, #E11D48, #FF6B81) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 7px !important;
    font-weight: 700 !important;
    color: #FFF !important;
    white-space: nowrap !important;
  }
  .yella-flash__price {
    padding: 4px 5px 5px !important;
  }
  .yella-flash__now {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #E11D48 !important;
    display: block !important;
    line-height: 1.1 !important;
  }
  .yella-flash__was {
    font-size: 9px !important;
    color: #999 !important;
    text-decoration: line-through !important;
    display: block !important;
    margin-top: 1px !important;
  }

/* ──────────────────────────────────────────
   6. BRANDS (new HTML block)
   ────────────────────────────────────────── */
  .yella-brands {
    display: flex !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    background: #FFF !important;
    margin-top: 6px !important;
  }
  .yella-brands::-webkit-scrollbar { display: none !important; }
  .yella-brands__item {
    min-width: 60px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F4F5F6 !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    flex-shrink: 0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #666 !important;
    text-decoration: none !important;
  }

/* ──────────────────────────────────────────
   7. COUPON (new HTML block)
   ────────────────────────────────────────── */
  .yella-coupon {
    margin: 6px 12px !important;
    padding: 10px 14px !important;
    background: linear-gradient(90deg, #FF6B00, #FF8C38) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #FFF !important;
  }
  .yella-coupon__title {
    font-size: 13px !important;
    font-weight: 700 !important;
  }
  .yella-coupon__sub {
    font-size: 10px !important;
    opacity: 0.8 !important;
    margin-top: 2px !important;
  }
  .yella-coupon__btn {
    background: #FFF !important;
    color: #FF6B00 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
  }

/* ──────────────────────────────────────────
   8. PRODUCT CARDS — 2-col grid
   ────────────────────────────────────────── */
  /* Grid layout for product modules */
  body.route-common-home .swiper-module .swiper-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 12px !important;
    overflow: visible !important;
  }
  body.route-common-home .swiper-module .item.swiper-slide {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
  }

  /* Card shell — AliExpress flat style */
  body.route-common-home .swiper-module .item .product-thumb,
  html body .swiper-module .item .product-thumb {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    margin: 0 !important;
    height: auto !important;
  }
  body.route-common-home .swiper-module .item .product-thumb:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Image — square */
  body.route-common-home .swiper-module .item .product-thumb .image,
  html body .swiper-module .item .product-thumb .image {
    aspect-ratio: 1 / 1 !important;
    border-radius: 10px 10px 0 0 !important;
  }

  /* Stickers */
  body.route-common-home .swiper-module .stickers-ns,
  html body .swiper-module .stickers-ns {
    top: 4px !important;
    left: 4px !important;
    gap: 2px !important;
  }
  body.route-common-home .swiper-module .sticker-ns,
  html body .swiper-module .sticker-ns {
    font-size: 8px !important;
    padding: 1px 5px !important;
    height: 13px !important;
    border-radius: 4px !important;
  }
  body.route-common-home .swiper-module .sticker-ns.special:not(.bestseller):not(.popular):not(.newproduct),
  html body .swiper-module .sticker-ns.special:not(.bestseller):not(.popular):not(.newproduct) {
    background: #E11D48 !important;
    color: #FFF !important;
    border-color: #E11D48 !important;
  }
  body.route-common-home .swiper-module .sticker-ns.bestseller,
  body.route-common-home .swiper-module .sticker-ns.popular,
  html body .swiper-module .sticker-ns.bestseller,
  html body .swiper-module .sticker-ns.popular {
    background: #FF6B00 !important;
    color: #FFF !important;
    border-color: #FF6B00 !important;
    backdrop-filter: none !important;
  }
  body.route-common-home .swiper-module .sticker-ns.newproduct,
  html body .swiper-module .sticker-ns.newproduct {
    background: #1A1A1A !important;
    color: #CCFF00 !important;
    border-color: #1A1A1A !important;
    backdrop-filter: none !important;
  }

  /* Cart float — visible, dark bg */
  body.route-common-home .swiper-module .item .product-thumb .cart-float,
  html body .swiper-module .item .product-thumb .cart-float {
    opacity: 1 !important;
    transform: scale(1) !important;
    bottom: 6px !important;
    right: 6px !important;
    width: 30px !important;
    height: 30px !important;
    background: #1A1A1A !important;
    border-radius: 8px !important;
    color: #CCFF00 !important;
  }
  body.route-common-home .swiper-module .item .product-thumb .cart-float svg,
  html body .swiper-module .item .product-thumb .cart-float svg {
    stroke: #CCFF00 !important;
    width: 13px !important;
    height: 13px !important;
  }

  /* Caption */
  body.route-common-home .swiper-module .caption,
  html body .swiper-module .caption {
    padding: 6px 7px 8px !important;
  }

  /* Price */
  body.route-common-home .swiper-module .caption .price .price_value,
  html body .swiper-module .caption .price .price_value {
    font-size: 13px !important;
    font-weight: 800 !important;
  }
  body.route-common-home .swiper-module .caption .price .price-new .special_value,
  html body .swiper-module .caption .price .price-new .special_value {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #E11D48 !important;
  }

  /* Show old price as struck-through */
  body.route-common-home .swiper-module .caption .price .price-old,
  html body .swiper-module .caption .price .price-old {
    display: block !important;
  }
  body.route-common-home .swiper-module .caption .price .price-old .price_value,
  html body .swiper-module .caption .price .price-old .price_value {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #999 !important;
    text-decoration: line-through !important;
  }

  /* Name */
  body.route-common-home .swiper-module .caption .product-name a,
  html body .swiper-module .caption .product-name a {
    font-size: 10px !important;
    color: #666 !important;
  }

  /* Hide nav arrows */
  body.route-common-home .swiper-mod-navigation,
  html body .swiper-mod-navigation {
    display: none !important;
  }

  /* Hide full-width cart button in caption */
  body.route-common-home .swiper-module .caption .cart,
  html body .swiper-module .caption .cart {
    display: none !important;
  }

  /* Hide addit-action */
  body.route-common-home .swiper-module .addit-action,
  html body .swiper-module .addit-action {
    display: none !important;
  }

  /* Rating — hide on mobile */
  body.route-common-home .swiper-module .rating,
  html body .swiper-module .rating {
    display: none !important;
  }

/* ──────────────────────────────────────────
   9. HORIZONTAL SCROLL — for select modules
   Override specific module IDs back to horizontal
   ────────────────────────────────────────── */
  body.route-common-home .swiper-module.pamod_13 .swiper-wrapper,
  body.route-common-home .swiper-module.pamod_12 .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 12px 10px !important;
    gap: 8px !important;
  }
  body.route-common-home .swiper-module.pamod_13 .swiper-wrapper::-webkit-scrollbar,
  body.route-common-home .swiper-module.pamod_12 .swiper-wrapper::-webkit-scrollbar {
    display: none !important;
  }
  body.route-common-home .swiper-module.pamod_13 .item.swiper-slide,
  body.route-common-home .swiper-module.pamod_12 .item.swiper-slide {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

/* ──────────────────────────────────────────
   10. SECTION TITLES
   ────────────────────────────────────────── */
  body.route-common-home .container-module {
    background: #FFFFFF !important;
    margin-top: 6px !important;
    padding: 10px 12px 6px !important;
    margin-bottom: 0 !important;
  }
  body.route-common-home .container-module .title-module {
    padding: 0 0 8px !important;
    margin: 0 !important;
  }
  body.route-common-home .container-module .title-module span {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #1A1A1A !important;
    padding: 0 !important;
  }

/* ──────────────────────────────────────────
   11. RECOMMENDATION (new HTML block)
   ────────────────────────────────────────── */
  .yella-reco {
    background: #FFF !important;
    margin-top: 6px !important;
    padding: 10px 12px !important;
  }
  .yella-reco__title {
    font-size: 14px !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
  }
  .yella-reco__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 4px !important;
  }
  .yella-reco__card {
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #F0F1F3 !important;
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
  }
  .yella-reco__img {
    aspect-ratio: 1/1 !important;
    background: #F8F9FA !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 30px !important;
  }
  .yella-reco__info {
    padding: 5px 6px 6px !important;
  }
  .yella-reco__price {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #1A1A1A !important;
  }
  .yella-reco__name {
    font-size: 9px !important;
    color: #666 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

/* ──────────────────────────────────────────
   12. REVIEWS — horizontal scroll
   ────────────────────────────────────────── */
  body.route-common-home .store-reviews {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 0 12px 10px !important;
    scrollbar-width: none !important;
  }
  body.route-common-home .store-reviews::-webkit-scrollbar { display: none !important; }
  body.route-common-home .store-reviews .review-item {
    min-width: 240px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
  }

/* ──────────────────────────────────────────
   13. BOTTOM NAV — red center cart
   ────────────────────────────────────────── */
  body.route-common-home .yella-bnav__item--cart .yella-bnav__icon {
    background: #E11D48 !important;
    border-radius: 50% !important;
    width: 42px !important;
    height: 42px !important;
    margin-top: -16px !important;
    box-shadow: 0 2px 8px rgba(229,29,72,0.3) !important;
  }
  body.route-common-home .yella-bnav__item--cart .yella-bnav__icon svg {
    stroke: #FFF !important;
  }
  body.route-common-home .yella-bnav__item--cart .yella-bnav__label {
    color: #E11D48 !important;
    font-weight: 600 !important;
  }

/* ──────────────────────────────────────────
   14. FOOTER — AliExpress Dark Compact
   ────────────────────────────────────────── */
  html body footer,
  html body footer.ch-dark-theme,
  html body footer.ch-light-theme {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    background: #1A1A1A !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 16px !important;
    color: #FFF !important;
    border-top: none !important;
  }
  /* Logo */
  html body footer .title-f,
  html body footer .footer-logo,
  html body footer #logo-footer {
    display: none !important;
  }
  /* Footer sections */
  html body footer .row {
    margin: 0 !important;
  }
  html body footer .col-sm-12,
  html body footer .col-md-4,
  html body footer .col-md-3 {
    padding: 0 !important;
  }
  html body footer .list-unstyled {
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Section titles */
  html body footer .footer-top .title-f,
  html body footer .title-f {
    color: rgba(255,255,255,0.4) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    border-bottom: none !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
    background: transparent !important;
  }
  /* Links */
  html body footer ul.list-unstyled li a,
  html body footer .footer-contact a,
  html body footer a {
    color: rgba(255,255,255,0.6) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 5px 0 !important;
    display: block !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
  }
  html body footer ul.list-unstyled li a:active,
  html body footer a:active {
    color: #CCFF00 !important;
  }
  /* Contact items */
  html body footer .footer-contact {
    margin-bottom: 12px !important;
  }
  html body footer .footer-contact p,
  html body footer .icon-banner-footer {
    color: rgba(255,255,255,0.5) !important;
    font-size: 12px !important;
  }
  html body footer .icon-banner-footer span i {
    color: #CCFF00 !important;
  }
  html body footer .description_store_footer {
    color: rgba(255,255,255,0.4) !important;
    font-size: 11px !important;
  }
  /* Social icons */
  html body footer .ch-socials {
    display: flex !important;
    gap: 8px !important;
    margin: 8px 0 16px !important;
    list-style: none !important;
    padding: 0 !important;
  }
  html body footer .ch-socials li {
    list-style: none !important;
    display: inline !important;
  }
  html body footer .ch-socials li a {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.08) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    font-size: 16px !important;
  }
  html body footer .ch-socials li a:active {
    background: #CCFF00 !important;
  }
  /* Copyright */
  html body footer .copyright,
  html body footer .powered {
    text-align: center !important;
    color: rgba(255,255,255,0.25) !important;
    font-size: 10px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    margin-top: 12px !important;
  }
  html body footer .copyright a {
    color: rgba(255,255,255,0.25) !important;
  }
  /* Remove subscribe, newsletter, logos */
  html body footer .footer-subscribe-block,
  html body footer .footer-subscribe,
  html body footer .footer-subscribe-form,
  html body footer .footer-newsletter-block,
  html body footer .box-newsletter,
  html body footer .newsletter-info,
  html body footer .btn-subscribe,
  html body footer .footer-logo,
  html body footer .footer-logo-text {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  /* Payment row */
  html body footer .payment {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin: 8px 0 !important;
  }
  html body footer .payment img {
    height: 22px !important;
    opacity: 0.5 !important;
    filter: brightness(0) invert(1) !important;
  }

} /* end @media */