/* ============================================================
   YELLA.UZ — Mobile Homepage V3
   Clean · Compact · Professional
   Inter-style system font stack · Warm cream (#F7F6F2) base
   
   Scope: Mobile only (max-width: 767px)
   Desktop is NOT affected.
   
   Linked in header.twig AFTER all other mobile CSS.
   Uses ?v=3 cache buster.
   ============================================================ */

@media (max-width: 767px) {

  /* ── DESIGN TOKENS ─────────────────────────────────────── */
  :root {
    --y3-bg: #F7F6F2;
    --y3-surface: #FFFFFF;
    --y3-border: #E8E5DE;
    --y3-ink: #111110;
    --y3-lime: #CCFF00;
    --y3-muted: #9B9890;
    --y3-mid: #5A5956;
    --y3-red: #E53935;
  }

  /* ── 1. BODY & BASE ───────────────────────────────────── */
  html, body {
    background-color: var(--y3-bg) !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
  }

  /* ── 2. HEADER (sticky) ──────────────────────────────── */
  html body header.up-header,
  html body .up-header.fix-header,
  html body .up-header.h-sticky {
    background-color: var(--y3-bg) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--y3-border) !important;
    box-shadow: none !important;
    border-top: none !important; /* remove lime top border from v2 */
  }
  
  html body header.up-header > .container > .row {
    min-height: 52px !important;
    padding-top: 6px !important;
    padding-bottom: 4px !important;
  }

  /* Hide image logo on mobile — use text logo */
  html body .up-header__logo-mobile,
  html body .up-header .mob-logotype,
  html body .up-header #logo .up-header__logo-mobile img,
  html body .up-header #logo .up-header__logo-desktop img {
    display: none !important;
  }
  
  /* Show text logo */
  html body .yella-mob-logo-text {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
  }
  html body .yella-mob-logo-text a,
  html body .yella-mob-logo-text span {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--y3-ink) !important;
    letter-spacing: -0.8px !important;
    text-decoration: none !important;
  }
  html body .yella-mob-logo-text a sup,
  html body .yella-mob-logo-text span sup {
    font-size: 7.5px !important;
    font-weight: 700 !important;
    background: var(--y3-lime) !important;
    color: var(--y3-ink) !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    margin-top: 3px !important;
    line-height: 1 !important;
    vertical-align: super !important;
  }

  /* Header icons — clean minimal */
  html body header.up-header .box-account .btn-account,
  html body header.up-header .box-cart #cart > .btn,
  html body header.up-header .box-cart .dropdown-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--y3-ink) !important;
  }
  html body header.up-header .box-account .btn-account i,
  html body header.up-header .box-cart #cart > .btn i {
    font-size: 19px !important;
    color: var(--y3-ink) !important;
  }
  
  /* Cart badge */
  html body header.up-header .box-cart .cart-quantity {
    background: var(--y3-ink) !important;
    color: var(--y3-lime) !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    min-width: 16px !important;
    height: 16px !important;
    box-shadow: none !important;
  }

  /* Hide text labels */
  html body header.up-header .text-a-icon,
  html body #cart .cart-total,
  html body #cart .cart-total-price,
  html body #cart .cart-text,
  html body #cart .ch-c-name,
  html body #cart .ch-c-price {
    display: none !important;
  }

  /* Burger menu button */
  html body header.up-header .up-header__btn-mobile-menu,
  html body header.up-header .btn-menu-mobile {
    width: 36px !important;
    height: 36px !important;
    color: var(--y3-ink) !important;
    background: transparent !important;
    border: none !important;
  }
  html body header.up-header .up-header__btn-mobile-menu i {
    font-size: 20px !important;
    color: var(--y3-ink) !important;
  }

  /* ── 3. SEARCH ROW ────────────────────────────────────── */
  html body .yella-mob-search,
  html body .search-wrapper.visible-xs {
    background: var(--y3-bg) !important;
    padding: 6px 12px 10px !important;
    position: sticky !important;
    top: 52px !important;
    z-index: 998 !important;
    border-bottom: 1px solid var(--y3-border) !important;
  }

  html body .yella-mob-search .header-search,
  html body .search-wrapper.visible-xs .header-search {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 12px !important;
    background: var(--y3-surface) !important;
    border: 1px solid var(--y3-border) !important;
    box-shadow: none !important;
    overflow: visible !important;
    align-items: center !important;
    display: flex !important;
  }

  html body .yella-mob-search .header-search input.form-control,
  html body .search-wrapper.visible-xs .header-search input.form-control {
    height: 38px !important;
    line-height: 38px !important;
    font-size: 13.5px !important;
    color: var(--y3-ink) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 12px !important;
    box-shadow: none !important;
  }
  html body .yella-mob-search .header-search input.form-control::placeholder,
  html body .search-wrapper.visible-xs .header-search input.form-control::placeholder {
    color: var(--y3-muted) !important;
  }

  /* Search icon/button — clean dark */
  html body .yella-mob-search .header-search .btn-search,
  html body .yella-mob-search .header-search .button_search,
  html body .yella-mob-search .header-search button[type="submit"],
  html body .search-wrapper.visible-xs .header-search .btn-search,
  html body .search-wrapper.visible-xs .header-search .button_search {
    height: 38px !important;
    width: auto !important;
    min-width: 34px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  html body .yella-mob-search .header-search .btn-search i,
  html body .yella-mob-search .header-search .button_search i,
  html body .yella-mob-search .header-search button[type="submit"] i {
    color: var(--y3-mid) !important;
    font-size: 16px !important;
  }

  /* Hide voice/mic search on mobile */
  html body .yella-mob-search .btn-voice-search,
  html body .yella-mob-search .btn-mic,
  html body .yella-mob-search .group_voice_search,
  html body .yella-mob-search .header-search .group_voice_search,
  html body .search-wrapper.visible-xs .btn-voice-search,
  html body .search-wrapper.visible-xs .group_voice_search {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* ── 4. PRODUCT CARDS (upstore_productany.twig) ───────── */
  
  /* Wider cards on mobile — show ~2.2 cards, scrollable */
  .swiper-module .item.swiper-slide {
    width: 46% !important;
    min-width: 46% !important;
    max-width: 46% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Card shell — FIXED HEIGHT so all cards in a row are identical */
  .swiper-module .item .product-thumb {
    background: var(--y3-surface) !important;
    border: 1px solid var(--y3-border) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 4px 2px !important;
    transition: transform 0.15s ease !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    height: 280px !important;
    max-height: 280px !important;
    box-sizing: border-box !important;
  }
  .swiper-module .item .product-thumb:active {
    transform: scale(0.97) !important;
  }
  /* Remove hover transform on mobile (no hover) */
  .swiper-module .item .product-thumb:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Image area — takes remaining space, flex-grow */
  .swiper-module .item .product-thumb .image {
    aspect-ratio: auto !important;
    overflow: hidden !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 13px 13px 0 0 !important;
    background: var(--y3-bg) !important;
    position: relative !important;
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 190px !important;
  }
  .swiper-module .item .product-thumb .image a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  .swiper-module .item .product-thumb .image img.img-responsive {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    border-radius: 0 !important;
  }
  /* No hover zoom on mobile */
  .swiper-module .item .product-thumb:hover .image img.img-responsive {
    transform: none !important;
  }

  /* Stickers/badges — compact */
  .swiper-module .stickers-ns {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    z-index: 5 !important;
  }
  .swiper-module .sticker-ns {
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    line-height: 1.35 !important;
    height: auto !important;
    min-height: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
  }
  /* Discount badge — lime on dark */
  .swiper-module .sticker-ns.special:not(.bestseller):not(.popular):not(.newproduct) {
    background: var(--y3-ink) !important;
    color: var(--y3-lime) !important;
    border-color: var(--y3-ink) !important;
  }
  .swiper-module .sticker-ns.special:not(.bestseller):not(.popular):not(.newproduct) .fa {
    display: none !important;
  }
  /* Status badges — lime for new/hit */
  .swiper-module .sticker-ns.bestseller,
  .swiper-module .sticker-ns.popular,
  .swiper-module .sticker-ns.newproduct {
    background: var(--y3-lime) !important;
    color: var(--y3-ink) !important;
    border-color: var(--y3-lime) !important;
  }

  /* Add-to-cart "+" button — always visible on mobile, SHADOW INSIDE CARD */
  .swiper-module .item .product-thumb .cart-float {
    position: absolute !important;
    bottom: 6px !important;
    right: 6px !important;
    width: 28px !important;
    height: 28px !important;
    border: none !important;
    background: var(--y3-ink) !important;
    color: var(--y3-lime) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 6 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  .swiper-module .item .product-thumb .cart-float:active {
    transform: scale(0.9) !important;
  }
  .swiper-module .item .product-thumb .cart-float svg {
    width: 13px !important;
    height: 13px !important;
  }

  /* Caption area — fixed at bottom of card, no growth */
  .swiper-module .caption {
    padding: 4px 8px 5px !important;
    gap: 0 !important;
    background: var(--y3-surface) !important;
    border-radius: 0 0 13px 13px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    margin-top: auto !important;
  }

  /* Product name — clamp to 2 lines, no overflow */
  .swiper-module .caption .product-name {
    order: 2 !important;
    margin: 1px 0 0 0 !important;
    overflow: hidden !important;
  }
  .swiper-module .caption .product-name a {
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    color: var(--y3-ink) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
    max-height: 28px !important;
  }

  /* Price row — always at bottom, fixed height, aligned */
  .swiper-module .caption .price {
    order: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    font-family: inherit !important;
    line-height: 1.15 !important;
    margin-bottom: 0 !important;
    margin-top: auto !important;
    height: 17px !important;
    max-height: 17px !important;
    overflow: hidden !important;
  }
  .swiper-module .caption .price .price_value {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--y3-ink) !important;
    letter-spacing: -0.02em !important;
  }
  /* Special/sale price — red, same line height as normal */
  .swiper-module .caption .price .price-new,
  .swiper-module .caption .price .price-new .special_value {
    color: var(--y3-red) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }
  /* Old price — struck through, muted */
  .swiper-module .caption .price .price-old {
    display: inline !important;
    font-size: 9px !important;
    color: var(--y3-muted) !important;
    text-decoration: line-through !important;
    line-height: 1.15 !important;
  }

  /* Hide old caption cart button */
  .swiper-module .caption .cart {
    display: none !important;
  }

  /* Hide add-action (wishlist/compare/quickview icons) in grid */
  .swiper-module .addit-action {
    display: none !important;
  }

  /* Rating stars — smaller */
  .swiper-module .rating {
    margin-top: 3px !important;
  }
  .swiper-module .rating-star,
  .swiper-module .rating-star-active {
    font-size: 10px !important;
  }

  /* Pro stickers */
  .swiper-module .pro_sticker__item span {
    font-size: 9px !important;
    font-weight: 700 !important;
    border-radius: 5px !important;
    padding: 2px 6px !important;
  }

  /* ── 5. SECTION TITLES ─────────────────────────────────── */
  .title-module {
    padding: 6px 12px 4px !important;
    margin: 0 !important;
  }
  .title-module span {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--y3-ink) !important;
    letter-spacing: -0.02em !important;
  }

  /* ── 5b. SPACING FIXES ────────────────────────────────── */
  
  /* Slider/banner area: small gap from search row */
  .megasliderpro,
  .swiper-slideshow,
  [class*="slideshow"] {
    margin-top: 8px !important;
    margin-bottom: 4px !important;
  }
  
  /* Each module block — tight spacing, no big gaps between blocks */
  .container-module,
  [class*="module"],
  .module-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* First module after slider — less top padding on its title */
  .container-module:first-of-type .title-module,
  .container-module .title-module:first-child {
    padding-top: 2px !important;
  }

  /* ── 6. PROMO / BANNER CARDS ─────────────────────────── */
  /* Dark promo cards get rounded corners + proper styling */
  .promo-slider .promo-slider__item,
  .megasliderpro .swiper-slide {
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  
  /* Easybanner / banner blocks */
  .easybanner-item img,
  .banner-block img {
    border-radius: 14px !important;
  }

  /* ── 7. CATEGORY GRID (if using category module) ───────── */
  /* Category icons in grid */
  .category-module .cat-item,
  .upstore_category .category-item {
    border-radius: 18px !important;
    background: var(--y3-surface) !important;
    border: 1px solid var(--y3-border) !important;
  }

  /* ── 8. CONDITIONS / BENEFITS STRIP ──────────────────── */
  .benefits-bar,
  .feature-bar,
  .info-bar {
    background: var(--y3-surface) !important;
    border-radius: 12px !important;
    border: 1px solid var(--y3-border) !important;
    padding: 10px 12px !important;
    margin: 8px 0 !important;
  }

  /* ── 9. BOTTOM NAVIGATION ─────────────────────────────── */
  /* Unhide and restyle the fixed bottom bar */
  html body #fm-fixed-mobile-bottom,
  html body .fm-fixed-mobile-bottom {
    display: flex !important;
    visibility: visible !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 393px !important;
    margin: 0 auto !important;
    z-index: 999 !important;
    background: rgba(247, 246, 242, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid var(--y3-border) !important;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom)) !important;
    justify-content: space-around !important;
    align-items: center !important;
    height: auto !important;
    min-height: 56px !important;
    box-shadow: 0 -1px 8px rgba(0,0,0,0.04) !important;
  }

  /* Bottom nav items */
  html body #fm-fixed-mobile-bottom a,
  html body .fm-fixed-mobile-bottom a,
  html body #fm-fixed-mobile-bottom .nav-item,
  html body .fm-fixed-mobile-bottom .nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    color: var(--y3-muted) !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
    min-width: 52px !important;
    transition: color 0.15s !important;
    position: relative !important;
  }
  html body #fm-fixed-mobile-bottom a:active,
  html body .fm-fixed-mobile-bottom a:active {
    transform: scale(0.93) !important;
  }
  html body #fm-fixed-mobile-bottom a.active,
  html body .fm-fixed-mobile-bottom a.active,
  html body #fm-fixed-mobile-bottom .nav-item.active {
    color: var(--y3-ink) !important;
  }

  /* Nav icons */
  html body #fm-fixed-mobile-bottom a i,
  html body .fm-fixed-mobile-bottom a i {
    font-size: 20px !important;
    color: inherit !important;
  }

  /* Nav labels */
  html body #fm-fixed-mobile-bottom a span,
  html body .fm-fixed-mobile-bottom a span.nav-label {
    font-size: 9px !important;
    letter-spacing: 0.02em !important;
  }

  /* Raised center search button */
  html body #fm-fixed-mobile-bottom .nav-center-btn,
  html body .fm-fixed-mobile-bottom .nav-center-btn {
    margin-top: -14px !important;
    width: 44px !important;
    height: 44px !important;
    background: var(--y3-ink) !important;
    color: var(--y3-lime) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(17,17,16,0.25) !important;
    transition: transform 0.12s !important;
  }
  html body #fm-fixed-mobile-bottom .nav-center-btn:active,
  html body .fm-fixed-mobile-bottom .nav-center-btn:active {
    transform: scale(0.93) !important;
  }

  /* ── 10. FOOTER ON MOBILE ────────────────────────────── */
  /* Keep footer white/clean, compact spacing */
  footer {
    background: var(--y3-surface) !important;
    border-top: 1px solid var(--y3-border) !important;
  }
  footer .footer-center {
    padding: 20px 0 !important;
  }
  footer .f-column .col-xs-12 {
    padding: 0 0 14px 0 !important;
    border-bottom: 1px solid var(--y3-border) !important;
    margin-bottom: 14px !important;
  }
  footer .f-column .col-xs-12:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  footer .copyright__payments {
    padding: 14px 0 !important;
    /* Extra bottom padding so content isn't hidden behind fixed nav */
    padding-bottom: 70px !important;
  }

  /* ── 11. SLIDER / SWIPER FIXES ────────────────────────── */
  .swiper-container,
  .swiper-module {
    border-radius: 0 !important;
  }
  .swiper-mod-navigation {
    display: none !important; /* hide arrows on mobile — touch scroll instead */
  }

  /* Ensure horizontal scroll works smoothly */
  .swiper-module .swiper-wrapper {
    overflow: visible !important;
    width: max-content !important;
    display: flex !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .swiper-module {
    overflow: hidden !important;
  }

  /* ── 12. PAGE LAYOUT ──────────────────────────────────── */
  .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  /* Main content area — give room for fixed bottom nav */
  #content,
  .common-home {
    padding-bottom: 20px !important;
  }

  /* ── 13. MISC CLEANUP ─────────────────────────────────── */
  /* Hide fixed goods bar (old floating bar) */
  html body .fixed-goods-bar {
    display: none !important;
  }

  /* Menu overlay z-index fixes */
  .mob-menu-info-fixed-left {
    z-index: 9999 !important;
  }
  .ch-bg-mob {
    z-index: 9998 !important;
  }
}

/* ── NARROW PHONES (<360px) fallback ─────────────────────── */
@media (max-width: 359px) {
  @media (max-width: 767px) {
    .swiper-module .item.swiper-slide {
      width: 50% !important;
      min-width: 50% !important;
      max-width: 50% !important;
    }
  }
}