/* ============================================================
   YELLA.UZ — Combined Mobile CSS
   Merged from 8 files. Single HTTP request instead of 8.
   Scope: Mobile only (max-width: 767px) where applicable.
   ============================================================ */

/* ── SOURCE: yella-mob-overflow.css ────────────────────────────── */
/* Mobile layout fix v10 */
html { overflow-x: hidden !important; }
body { overflow-x: hidden !important; width: 100% !important; }

@media (max-width: 991px) {
  .container, .container-fluid {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  #content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    clear: both !important;
  }
}


/* ── SOURCE: yella-mobile-header.css ────────────────────────────── */
/* ============================================================
   YELLA.UZ — Mobile Header (Airy Minimal + Pastel Accents)
   Scope: mobile only (<= 767px). Desktop untouched.
   ============================================================ */

@media (max-width: 767px) {
  :root {
    --yella-mob-header-h: 56px;
    --yella-mob-bg: #FAFBFF;
    --yella-mob-surface: rgba(255, 255, 255, 0.92);
    --yella-mob-border: rgba(17, 24, 39, 0.10);
    --yella-mob-text: #12131A;
    --yella-mob-muted: rgba(18, 19, 26, 0.55);
    --yella-mob-accent-1: #C9FF6B; /* мягкий лайм */
    --yella-mob-accent-2: #A7F3FF; /* пастельный аква */
    --yella-mob-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
  }

  /* Header: лёгкий градиент + без тяжёлой рамки/тени */
  html body .up-header,
  html body header.up-header,
  html body .up-header.fix-header,
  html body .up-header.h-sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: linear-gradient(
      135deg,
      rgba(201, 255, 107, 0.18),
      rgba(167, 243, 255, 0.14) 55%,
      rgba(250, 251, 255, 0.98)
    ) !important;
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--yella-mob-border) !important;
    box-shadow: none !important;
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
  }

  html body .up-header > .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body .up-header > .container > .row {
    min-height: var(--yella-mob-header-h) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* ── 1. MENU CATALOG — open fully, no cuts ── */
  html body .up-header .up-header__left,
  html body .up-header .up-header__right,
  html body .up-header .up-header__logo-top {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* ── 5. LOGO — 10% smaller, 5px closer to catalog button ── */
  html body .up-header__logo-mobile img,
  html body .up-header__logo-desktop img,
  html body #logo img {
    max-height: 25px !important; /* 10% smaller than 28px */
    width: auto !important;
  }
  html body .up-header__logo-top {
    margin-right: 4px !important; /* 5px closer to catalog */
  }

  /* ── 4. ICONS — bolder, larger ── */
  /* Auth & Cart — bigger, bolder */
  html body .up-header__btn-mobile-menu,
  html body #cart > .btn,
  html body .box-cart #cart > .btn,
  html body .box-cart .dropdown-toggle,
  html body .box-account .btn-account {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    border: 1px solid var(--yella-mob-border) !important;
    background: var(--yella-mob-surface) !important;
    box-shadow: none !important;
    color: var(--yella-mob-text) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s, border-color 0.2s !important;
  }
  html body .up-header__btn-mobile-menu:hover,
  html body #cart > .btn:hover,
  html body .box-cart .dropdown-toggle:hover {
    border-color: rgba(17, 24, 39, 0.16) !important;
    background: #F0F0F0 !important;
  }
  html body .box-account .btn-account {
    border: none !important;
    background: transparent !important;
  }
  html body .box-account .btn-account:hover {
    background: rgba(17,24,39,0.05) !important;
  }

  /* Icon color */
  html body .up-header__btn-mobile-menu i,
  html body .up-header__btn-mobile-menu .up-icon-22,
  html body #cart > .btn i,
  html body #cart > .btn .up-icon-22,
  html body .box-cart .btn i,
  html body .box-cart .btn:hover i,
  html body .box-cart .btn:hover .up-icon-22,
  html body .box-account .btn-account i,
  html body .box-account .btn-account .up-icon-account {
    color: var(--yella-mob-text) !important;
    font-size: 20px !important; /* slightly bolder */
  }

  /* Cart badge */
  html body #cart .cart-quantity,
  html body .light-theme #cart .cart-quantity {
    background: linear-gradient(135deg, var(--yella-mob-accent-1), var(--yella-mob-accent-2)) !important;
    color: #0B0C10 !important;
    border: 1px solid rgba(11, 12, 16, 0.08) !important;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.10) !important;
  }

  /* Hide text labels in header on mobile */
  html body .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;
  }

  /* в”Ђв”Ђ 2. MOBILE SEARCH ROW в”Ђв”Ђ */
  .yella-mob-search,
  .search-wrapper.visible-xs {
    background: transparent !important;
    border-bottom: 0 !important;
    padding: 10px 0 12px !important;
    position: sticky !important;
    top: var(--yella-mob-header-h) !important;
    z-index: 999 !important;
  }

  .yella-mob-search .container,
  .search-wrapper.visible-xs .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .yella-mob-search .header-search,
  .search-wrapper.visible-xs .header-search {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 16px !important;
    background: var(--yella-mob-surface) !important;
    border: 1px solid var(--yella-mob-border) !important;
    box-shadow: none !important;
    overflow: visible !important;
    transition: border-color 0.2s !important;
    align-items: center !important;
    display: flex !important;
  }

  .yella-mob-search .header-search .form-control,
  .search-wrapper.visible-xs .header-search .form-control {
    height: 40px !important;
    line-height: 40px !important;
    font-size: 14px !important;
    color: var(--yella-mob-text) !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .yella-mob-search .header-search .form-control::placeholder,
  .search-wrapper.visible-xs .header-search .form-control::placeholder {
    color: var(--yella-mob-muted) !important;
  }

  /* Search button — gray default, BLUE on hover/active */
  .yella-mob-search .header-search .btn-search,
  .search-wrapper.visible-xs .header-search .btn-search {
    height: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s, text-shadow 0.2s !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .yella-mob-search .header-search .button_search,
  .search-wrapper.visible-xs .header-search .button_search {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: unset !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .yella-mob-search .header-search .btn-search i,
  .yella-mob-search .header-search .btn-search .up-icon-search {
    color: #1A1A1A !important;
    font-size: 17px !important;
    transition: color 0.2s ease, text-shadow 0.2s ease !important;
  }
  .yella-mob-search .header-search .btn-search:hover i,
  .yella-mob-search .header-search .btn-search:active i,
  .yella-mob-search .header-search:focus-within .btn-search i {
    color: #2563EB !important;
    text-shadow: 0 0 8px rgba(37,99,235,0.4), 0 0 2px rgba(37,99,235,0.3) !important;
  }

  /* в”Ђв”Ђ 2. HIDE MICROPHONE / VOICE SEARCH в”Ђв”Ђ */
  .yella-mob-search .btn-voice-search,
  .yella-mob-search .btn-mic,
  .yella-mob-search .group_voice_search,
  .yella-mob-search .header-search .group_voice_search,
  .search-wrapper.visible-xs .btn-voice-search,
  .search-wrapper.visible-xs .btn-mic,
  .search-wrapper.visible-xs .group_voice_search {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
  }

  /* в”Ђв”Ђ HIDE BOTTOM FIXED PANEL в”Ђв”Ђ */
  html body #fm-fixed-mobile-bottom,
  html body .fm-fixed-mobile-bottom {
    display: none !important;
    visibility: hidden !important;
  }

  /* в”Ђв”Ђ PRODUCT PAGE: contain image within viewport в”Ђв”Ђ */
  html body.fix_cart_price_footer #content,
  html body.fix_cart_price_footer .product-info {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  html body.fix_cart_price_footer .swiper-module,
  html body.fix_cart_price_footer .swiper-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  html body.fix_cart_price_footer .product-info .image img,
  html body.fix_cart_price_footer .product-thumb .image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* в”Ђв”Ђ FIX: mobile catalog menu full height в”Ђв”Ђ */
@media (max-width: 767px) {
  .mob-menu-info-fixed-left {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .mob-menu-info-fixed-left .mobm-body {
    height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
  }
}

/* в”Ђв”Ђ FIX: menu overlapped by swiper slider в”Ђв”Ђ */
@media (max-width: 767px) {
  .swiper-container,
  .swiper-wrapper,
  .swiper-slide,
  .megasliderpro,
  .module-slideshow {
    z-index: 1 !important;
  }
  #fm-fixed-mobile {
    z-index: 9999 !important;
  }
  .mob-menu-info-fixed-left {
    z-index: 9999 !important;
  }
  .ch-bg-mob {
    z-index: 9998 !important;
  }
}

/* в”Ђв”Ђ FIX: header and search stay below open menu в”Ђв”Ђ */
@media (max-width: 767px) {
  body.no-scroll header.up-header,
  body.no-scroll .up-header {
    z-index: 100 !important;
  }
  body.no-scroll .yella-mob-search,
  body.no-scroll .search-wrapper {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* в”Ђв”Ђ FIX: product page main image too large on mobile в”Ђв”Ђ */
@media (max-width: 767px) {
  html body.fix_cart_price_footer .main-image,
  html body.fix_cart_price_footer .swiper-slide,
  html body.fix_cart_price_footer .swiper-slide-active,
  html body.fix_cart_price_footer .swiper-wrapper {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  html body.fix_cart_price_footer .main-image img,
  html body.fix_cart_price_footer .swiper-slide img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* в”Ђв”Ђ FIX: product page swiper image size on mobile в”Ђв”Ђ */
@media (max-width: 767px) {
  html body.fix_cart_price_footer .swiper-slide,
  html body.fix_cart_price_footer .swiper-slide-active,
  html body.fix_cart_price_footer .swiper-wrapper,
  html body.fix_cart_price_footer .main-image {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body.fix_cart_price_footer .main-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}


/* ── DESKTOP: product gallery — reset image-block height ── */
@media (min-width: 768px) {
  /* Override .h-100 on desktop — let swiper aspect-ratio control height */
  html body .image-block.h-100,
  html body.fix_cart_price_footer .image-block.h-100 {
    height: auto !important;
    min-height: unset !important;
  }

  /* Ensure swiper respects aspect-ratio on desktop */
  html body .image-block.h-100 .swiper,
  html body .image-block.h-100 #image-box,
  html body.fix_cart_price_footer .image-block.h-100 #image-box {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    max-height: unset !important;
  }

  /* Ensure swiper slide respects aspect-ratio */
  html body .image-block.h-100 .swiper-slide,
  html body.fix_cart_price_footer .image-block.h-100 .item.swiper-slide {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }

  /* Ensure main image inside swiper stays square */
  html body .image-block.h-100 .main-image.thumbnail,
  html body .image-block.h-100 .main-image.thumbnail img {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}



/* ── FOOTER — WHITE THEME ── */

footer,
footer.ch-dark-theme,
footer.ch-light-theme {
  background: #FFFFFF !important;
  border-top: none !important;
  color: #1A1A1A !important;
}

/* Footer top row */
footer .footer-top {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E6E8EB !important;
  padding: 24px 0 !important;
}

/* Footer ribbon / banner strip — WHITE */
footer .footer-ribbon,
footer .footer-ribbon-box {
  background: #FFFFFF !important;
  border-top: none !important;
  border-bottom: none !important;
}
footer .footer-ribbon-box .footer-ribbon {
  background: transparent !important;
  border-top: none !important;
}
footer .footer-ribbon span {
  background: transparent !important;
  color: #1A1A1A !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Banner footer container */
footer .box-banner-container,
footer .banner-footer,
footer .block-banner-footer {
  background: #FFFFFF !important;
}

/* Footer center */
footer .footer-center {
  background: #FFFFFF !important;
  border-top: none !important;
  padding: 24px 0 !important;
}

/* Newsletter — full hide */
footer .box-newsletter,
footer .newsletter-info,
footer .newsletter,
footer .footer-subscribe-block {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  width: 0 !important;
  min-width: 0 !important;
}

/* Footer logo — hide */
footer #logo-footer,
footer div#logo-footer {
  display: none !important;
}

/* Footer contact — phones */
footer .footer-contact ul.list-unstyled li a {
  color: #1A1A1A !important;
  opacity: 0.72 !important;
  font-size: 13px !important;
  transition: opacity 0.2s !important;
}
footer .footer-contact ul.list-unstyled li a:hover {
  opacity: 1 !important;
  color: #1A1A1A !important;
}
footer .footer-contact ul.list-unstyled li {
  margin-bottom: 8px !important;
}
footer .footer-contact ul.list-unstyled li a i,
footer .footer-contact ul.list-unstyled li i.fa-width {
  color: #1A1A1A !important;
}

/* ── SOCIAL ICONS — icon-only, black ── */
footer .ch-socials {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 0 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  overflow: visible !important;
}
footer .ch-socials li {
  list-style: none !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
}
footer .ch-socials li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 1.5px solid #E6E8EB !important;
  background: transparent !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  font-size: 0 !important;
}
footer .ch-socials li a i {
  color: #1A1A1A !important;
  font-size: 18px !important;
  line-height: 1 !important;
  margin: 0 !important;
}
footer .ch-socials li a img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
}
footer .ch-socials li a:hover {
  background: #1A1A1A !important;
  border-color: #1A1A1A !important;
}
footer .ch-socials li a:hover i {
  color: #FFFFFF !important;
}
footer .ch-socials li a span {
  display: none !important;
}

/* ── FOOTER COLUMN TITLES — black underline ── */
footer .title-f {
  color: #1A1A1A !important;
  background: transparent !important;
  border-bottom: 2px solid #1A1A1A !important;
  padding-bottom: 8px !important;
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  box-shadow: none !important;
}
footer .title-f i {
  color: #1A1A1A !important;
  margin-right: 6px !important;
}

/* Footer column links */
footer .f-column ul.list-unstyled li a {
  color: #1A1A1A !important;
  opacity: 0.72 !important;
  font-size: 13px !important;
  transition: opacity 0.2s !important;
}
footer .f-column ul.list-unstyled li a:hover {
  opacity: 1 !important;
  color: #1A1A1A !important;
}

/* Footer columns layout */
footer .footer-center .f-column {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}
footer .footer-center .f-column .col-xs-12 {
  flex: 1 !important;
  min-width: 140px !important;
  max-width: 200px !important;
  padding: 0 16px 0 0 !important;
}

/* Store description */
footer .description_store_footer {
  color: #1A1A1A !important;
  opacity: 0.7 !important;
  font-size: 13px !important;
}

/* Banner icons */
footer .icon-banner-footer span i,
footer .fa-width {
  color: #1A1A1A !important;
}

/* Bottom bar — white */
footer .copyright__payments {
  background: #FFFFFF !important;
  border-top: 1px solid #E6E8EB !important;
  padding: 16px 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* Copyright */
footer .copyright,
footer .copyright div,
footer .powered {
  color: #8A8F98 !important;
  font-size: 12px !important;
  background: transparent !important;
}
footer .copyright a { color: #8A8F98 !important; }
footer .copyright a:hover { color: #1A1A1A !important; }

/* Payments */
footer .ch-payments img {
  opacity: 0.5 !important;
  transition: opacity 0.2s !important;
  height: 24px !important;
  width: auto !important;
}
footer .ch-payments img:hover { opacity: 1 !important; }

/* Back to top */
#back-top .btn-back-top {
  background: #1A1A1A !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 50% !important;
}
#back-top .btn-back-top:hover { background: #333333 !important; }

/* в”Ђв”Ђ MOBILE FOOTER в”Ђв”Ђ */
@media (max-width: 767px) {
  footer .footer-center .f-column { flex-direction: column !important; }
  footer .footer-center .f-column .col-xs-12 {
    max-width: 100% !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 1px solid #E6E8EB !important;
    margin-bottom: 16px !important;
  }
  footer .footer-center .f-column .col-xs-12:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  footer .footer-contact { flex-direction: column !important; }
  footer .ch-socials { gap: 6px !important; }
  footer .ch-socials li a { width: 32px !important; height: 32px !important; }
}

/* ── DESKTOP: product gallery — reset image-block height ── */


/* ── SOURCE: yella-mobile-fixes.css ────────────────────────────── */
/* yella-search-banner.css — Mobile fixes v2 (clean) */
@media (max-width: 767px) {
  /* Fix 1: Search button — white/light gray, NO lime */
  html body .yella-mob-search .header-search .btn-search,
  html body .yella-mob-search .header-search button[type="submit"],
  html body .yella-mob-search .header-search .button_search .btn-search {
    /*background: #F5F6F7 !important;
    background-color: #F5F6F7 !important;*/
    color: #1A1A1A !important;
    border: none !important;
    border-radius: 0 999px 999px 0 !important;
    min-width: 44px !important;
    height: 44px !important;
    width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  html body .yella-mob-search .header-search .btn-search:hover {
    background: #E6E8EB !important;
    background-color: #E6E8EB !important;
  }
  html body .yella-mob-search .header-search .btn-search i,
  html body .yella-mob-search .header-search .btn-search .up-icon-search {
    color: #1A1A1A !important;
    font-size: 17px !important;
    opacity: 1 !important;
  }

  /* Fix 2: Sticky search bar below fixed header */
  html body .yella-mob-search {
    position: sticky !important;
    top: 56px !important;
    z-index: 998 !important;
    background: #FFFFFF !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid #E6E8EB !important;
  }

  /* Fix 3: Banner/slideshow — tight gap below search bar (~16px) */
  html body .slideshow,
  html body .swiper-container,
  html body .megasliderpro,
  html body .module-slideshow,
  html body .swiper-wrapper,
  html body .slideshow-wrapper,
  html body .megasliderpro-wrapper {
    /*padding-top: 16px !important;*/
    margin-top: 0 !important;
  }

  /* Fix 4: Page content — small top gap */
  html body .page-content,
  html body #content,
  html body main .page-content {
    padding-top: 16px !important;
  }
}


/* ── SOURCE: yella-mobile-center-fix.css ────────────────────────────── */
/* =============================================================
   YELLA.UZ — Mobile Centering Fix v1
   Problem: All content shifted left, too much whitespace on right
   Solution: Fix container padding symmetry, stretch cards to edges,
             balance margins/padding proportionally on mobile
   Scope: max-width: 767px (mobile only)
   Load order: AFTER all other CSS (last in cascade)
   ============================================================= */

@media (max-width: 767px) {

  /* ── 1. BODY & ROOT — force full viewport width, centered ── */
  html {
    overflow-x: hidden;
    width: 100vw;
  }
  body {
    overflow-x: hidden;
    width: 100%;
    min-width: 100%;
  }

  /* ── 2. CONTAINER — symmetric padding, full width ──
     Bootstrap .container has padding-left/right: 10px + margin auto.
     On mobile we want slightly more breathing room but perfectly symmetrical.
  ── */
  .container {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .container-fluid {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* ── 3. ROW — zero negative margin so it doesn't pull content left ── */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* ── 4. MEGASLIDER / BANNER — stretch edge-to-edge with compensation ──
     The slideshow has margin-left/right: -10px from stylesheet.css.
     We override that and let the banner breathe evenly.
  ── */
  .megasliderpro,
  .swiper-slideshow,
  .container-slideshow,
  .module-slideshow {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .megasliderpro.col-xs-12,
  .megasliderpro.col-md-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .container-slideshow .swiper-slideshow {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Banner slides fill width */
  .megasliderpro .swiper-slide.item-ms img,
  .swiper-slideshow .swiper-slide img {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px !important;
  }

  /* ── 5. PRODUCT MODULES (container-module) — full width, balanced ── */
  .container-module {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Section titles — reduce left padding, center visually */
  .container-module .title-module {
    padding: 14px 4px 16px 2px !important;
    margin-bottom: 6px !important;
  }
  .container-module .title-module span {
    font-size: 17px !important;
    padding: 0 4px 0 6px !important;
  }

  /* The d-flex wrapper around swiper + navigation */
  .container-module > .d-flex {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── 6. SWIPER MODULE (product carousel) — use full module width ── */
  .container-module .swiper-module {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 12px !important;
    overflow: hidden !important;
  }

  /* ── 7. PRODUCT CARDS — 3 columns with minimal gap, edge-to-edge ──
     Each slide is 33.333%. Remove double-padding issue.
     Cards touch the screen edges with tiny gap.
  ── */
  .swiper-module .item.swiper-slide {
    width: 33.333% !important;
    min-width: 33.333% !important;
    max-width: 33.333% !important;
    /* Minimal horizontal padding — cards go nearly edge-to-edge */
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  /* Card shell — tighter margin on mobile so cards fill the space */
  .swiper-module .item .product-thumb {
    margin: 2.5px !important;
    border-radius: 8px !important;
  }

  /* ── 8. NAVIGATION ARROWS — hide on mobile (save space, use swipe) ── */
  .swiper-mod-navigation {
    display: none !important;
  }

  /* в”Ђв”Ђ 9. BOTTOM NAV (yella-bnav) в”Ђв”Ђ full width, pinned в”Ђв”Ђ */
  .yella-bnav {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }

  /* ── 10. "УМНЫЙ ДОМ XIAOMI!" style section banners — full width ── */
  .container-module .box-banner-container,
  .banner-footer,
  .block-banner-footer {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── 11. FOOTER — full width on mobile ── */
  footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  footer .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ── 12. STORE REVIEWS section — full width ── */
  .store-reviews,
  .average-reviews__content,
  .rating-summary__content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* ── 13. Any remaining column classes — no negative pull ── */
  [class*="col-xs-"] {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .col-xs-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── 14. SEARCH WRAPPER — full width ── */
  .yella-mob-search,
  .search-wrapper.visible-xs {
    width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* ── 15. HEADER — ensure it spans full width ── */
  header.up-header,
  .up-header {
    width: 100% !important;
    max-width: 100vw !important;
  }
  header.up-header > .container,
  .up-header > .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

}

/* ── Extra small phones (<360px): 2 columns instead of 3 ── */
@media (max-width: 359px) {
  .swiper-module .item.swiper-slide {
    width: 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}



/* ── SOURCE: yella-mobile-v3.css ────────────────────────────── */
/* ============================================================
   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: #ffffff !important;
    /*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: 33.333% !important;
    min-width: 33.333% !important;
    max-width: 33.333% !important;
    flex-shrink: 0 !important;
    flex-basis: 33.333% !important;
    padding-left: 3px !important;
    padding-right: 3px !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;
    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;
    }
  }
}

/* в”Ђв”Ђ CARD WIDTH FORCE FIX в”Ђв”Ђ */
@media (max-width: 767px) {
  .swiper-module .item.swiper-slide {
    max-width: 124px !important;
    overflow: hidden !important;
  }
  .swiper-module .item .product-thumb {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 0 2px !important;
  }
  .swiper-module .item .product-thumb * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ── SOURCE: yella-product-fix.css ────────────────────────────── */
/* YELLA Product Page — Options + Tabs + Features overrides */

/* Hide tabs entirely for now */
html body div.tabs__header,
html body .tabs__header.tabs_top {
  display: none !important;
}

/* Hide "All about product" tab */
html body ul.my-tabs li:has(a[href="#product"]),
html body ul.nav-tabs.my-tabs > li:first-child:not(.tabs__active_line) { display: none !important; }

/* Tabs container */
html body div.tabs__header,
html body .tabs__header.tabs_top {
  padding: 8px 16px !important;
  margin: 0 0 12px !important;
  background: #FFF !important;
  border-bottom: 1px solid #F0F1F3 !important;
}

/* Tab list — horizontal flex row */
html body ul.nav-tabs.my-tabs,
html body .tabs__header__scroll ul.my-tabs,
html body .tabs__header__scroll .nav-tabs {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border: none !important;
  background: transparent !important;
}

/* Each tab item — reset */
html body ul.nav-tabs.my-tabs > li,
html body .tabs__header__scroll ul.my-tabs > li,
html body .tabs__header__scroll .nav-tabs > li {
  display: inline-block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  position: static !important;
}

/* Tab link — pill style */
html body ul.nav-tabs.my-tabs > li > a,
html body ul.nav-tabs.my-tabs > li > button,
html body .tabs__header__scroll ul.my-tabs > li > a,
html body .tabs__header__scroll .nav-tabs > li > a,
html body .tabs__header__scroll .nav-tabs > li > button {
  display: inline-block !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #999 !important;
  background: #F4F5F6 !important;
  border: none !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* Active tab — dark pill */
html body ul.nav-tabs.my-tabs > li.active > a,
html body ul.nav-tabs.my-tabs > li.active > button,
html body .tabs__header__scroll ul.my-tabs > li.active > a,
html body .tabs__header__scroll .nav-tabs > li.active > a,
html body .tabs__header__scroll .nav-tabs > li.active > button {
  background: #1A1A1A !important;
  color: #FFF !important;
}

/* Required badge */
.form-group.required .control-label::after {
  content: '\041E\0431\044F\0437\0430\0442\0435\043B\044C\043D\043E' !important;
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #FFF !important;
  background: #E11D48 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  line-height: 1.4 !important;
}

/* Radio cards container */
html body .options .form-group > div[id^="input-option"] {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}

/* Radio card base */
html body .options .default-radio {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  border: 2px solid #E6E8EB !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  position: relative !important;
  background: #FFF !important;
  margin-bottom: 8px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Hide native radio */
html body .options .default-radio input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Selected card */
html body .options .default-radio:has(input:checked) {
  border-color: #1A1A1A !important;
  background: #1A1A1A !important;
  border-style: solid !important;
  box-shadow: none !important;
  outline: none !important;
}
html body .options .default-radio:has(input:checked) label {
  color: #FFF !important;
}

/* Green checkmark */
html body .options .default-radio:has(input:checked)::after {
  content: '' !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 50% !important;
  background: #22C55E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center !important;
  background-size: 14px !important;
  flex-shrink: 0 !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Label layout */
html body .options .default-radio label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  cursor: pointer !important;
  flex: 1 !important;
  padding-right: 30px !important;
}
html body .options .default-radio label .option-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
html body .options .default-radio label .option-price {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #999 !important;
  line-height: 1.3 !important;
}
html body .options .default-radio:has(input:checked) label .option-price {
  color: rgba(255,255,255,0.6) !important;
}

/* Price block full width */
html body .price-group {
  background: #F8F9FA !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  margin: 0 0 10px !important;
  border-left: none !important;
  border-right: none !important;
}
html body .yella-social-proof {
  margin: 0 0 10px !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
}
html body .yella-timer {
  margin: 0 0 10px !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
}
html body .action-group {
  padding: 0 16px !important;
  margin-bottom: 12px !important;
}
html body .yella-features {
  padding: 0 16px !important;
  margin-bottom: 16px !important;
}

/* Title spacing */
html body .h1-prod-name {
  margin-bottom: 4px !important;
}
html body .rb-two-col {
  gap: 0 !important;
  margin: 0 !important;
}
html body .rb-col-info {
  gap: 0 !important;
}


/* ── SOURCE: yella-mobile-home-v2.css ────────────────────────────── */
/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   YELLA.UZ — MOBILE HOMEPAGE REDESIGN v2 (AliExpress style)
   Optimized — no flash, clean code
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

@media (max-width: 767px) {

/* 0. BODY — consistent margins, no stacking */
body.route-common-home { background: #F0F1F3 !important; }
body.route-common-home .container { padding: 0 6px !important; max-width: 100vw !important; width: 100vw !important; }
body.route-common-home .container > .row { margin: 0 !important; }
body.route-common-home .container > .row > .col-sm-12,
body.route-common-home .container > .row > .col-xs-12 { padding: 0 !important; }
body.route-common-home .container-module { padding: 0 !important; margin: 0 0 16px !important; }
body.route-common-home .container-module .swiper-module { padding: 0 !important; }
body.route-common-home [class*="col-xs-"] { padding-left: 0 !important; padding-right: 0 !important; }

/* 1. HEADER — lime bg */
body.route-common-home header.up-header,
body.route-common-home .up-header.fix-header { background: #CCFF00 !important; border: none !important; box-shadow: none !important; }
body.route-common-home header.up-header .btn-menu-mobile,
body.route-common-home header.up-header .box-account .btn-account,
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;
}
body.route-common-home header.up-header .btn-menu-mobile i,
body.route-common-home header.up-header .box-account .btn-account i,
body.route-common-home header.up-header .box-cart #cart > .btn i { color: #1A1A1A !important; }
body.route-common-home .yella-mob-logo-text a span { color: #1A1A1A !important; }
body.route-common-home .yella-mob-logo-text a sup { background: rgba(0,0,0,0.15) !important; color: #1A1A1A !important; }
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 */
body.route-common-home .yella-mob-search { background: #CCFF00 !important; padding: 0 12px 10px !important; border-bottom: none !important; }
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; }
body.route-common-home .yella-mob-search .header-search input.form-control { background: transparent !important; color: #1A1A1A !important; font-size: 14px !important; }
body.route-common-home .yella-mob-search .header-search .btn-search { background: #1A1A1A !important; border-radius: 8px !important; width: 32px !important; height: 32px !important; }
body.route-common-home .yella-mob-search .header-search .btn-search i { color: #CCFF00 !important; }

/* 3. CATEGORIES — horizontal scroll */
.yella-cats { display: flex !important; gap: 10px !important; padding: 12px 12px !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; }
.yella-cats::-webkit-scrollbar { display: none; }
.yella-cats__item { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; min-width: 72px !important; text-decoration: none !important; color: #1A1A1A !important; }
.yella-cats__icon { width: 52px !important; height: 52px !important; border-radius: 14px !important; background: #FFF !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 24px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; }
.yella-cats__label { font-size: 11px !important; font-weight: 600 !important; text-align: center !important; line-height: 1.2 !important; white-space: nowrap !important; }

/* 4. FLASH SALE */
.yella-flash { padding: 0 12px !important; margin-bottom: 12px !important; }
.yella-flash__header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 10px !important; padding: 0 !important; }
.yella-flash__left { display: flex !important; align-items: center !important; gap: 8px !important; }
.yella-flash__title { font-size: 16px !important; font-weight: 900 !important; color: #1A1A1A !important; display: flex !important; align-items: center !important; gap: 6px !important; }
.yella-flash__timer { display: flex !important; gap: 3px !important; }
.yella-flash__timer span { background: #1A1A1A !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; }
.yella-flash__timer .yella-flash__sep { background: none !important; color: #1A1A1A !important; min-width: auto !important; padding: 0 1px !important; }
.yella-flash__more { font-size: 13px !important; font-weight: 600 !important; color: #8A8F98 !important; text-decoration: none !important; display: flex !important; align-items: center !important; gap: 2px !important; }
.yella-flash__scroll { display: flex !important; gap: 10px !important; overflow-x: auto !important; padding-bottom: 4px !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; }
.yella-flash__scroll::-webkit-scrollbar { display: none; }
.yella-flash__card { min-width: 130px !important; width: 130px !important; background: #FFF !important; border-radius: 14px !important; overflow: hidden !important; text-decoration: none !important; color: #1A1A1A !important; flex-shrink: 0 !important; position: relative !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; border: 1px solid #F0F1F3 !important; display: block !important; }
.yella-flash__img { width: 100% !important; aspect-ratio: 1 !important; position: relative !important; background: #F7F8FA !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; }
.yella-flash__img img { width: 80% !important; height: 80% !important; object-fit: contain !important; }
.yella-flash__pct { position: absolute !important; top: 8px !important; left: 8px !important; background: #E11D48 !important; color: #FFF !important; font-size: 10px !important; font-weight: 800 !important; padding: 3px 7px !important; border-radius: 8px !important; z-index: 1 !important; }
.yella-flash__info { padding: 8px 10px 10px !important; }
.yella-flash__name { font-size: 11px !important; font-weight: 500 !important; color: #1A1A1A !important; line-height: 1.3 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin-bottom: 6px !important; min-height: 28px !important; }
.yella-flash__bar-text { font-size: 9px !important; font-weight: 600 !important; color: #E11D48 !important; margin-bottom: 4px !important; }
.yella-flash__bar { height: 3px !important; background: #F0F1F3 !important; border-radius: 2px !important; margin: 0 10px 6px !important; overflow: hidden !important; }
.yella-flash__bar-inner { height: 100% !important; background: linear-gradient(90deg, #E11D48, #FF6B6B) !important; border-radius: 2px !important; font-size: 0 !important; line-height: 0 !important; }
.yella-flash__price { display: flex !important; align-items: baseline !important; gap: 4px !important; padding: 0 10px 10px !important; }
.yella-flash__now { font-size: 14px !important; font-weight: 800 !important; color: #1A1A1A !important; }
.yella-flash__was { font-size: 10px !important; color: #8A8F98 !important; text-decoration: line-through !important; font-weight: 500 !important; }

/* 5. SWIPER PRODUCT BLOCKS — 2 columns grid, edge-to-edge images */
.swiper-module .swiper-wrapper { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 0 !important; overflow: visible !important; transform: none !important; }
.swiper-module .item.swiper-slide { width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.swiper-module .item .product-thumb { background: #FFF !important; border: 1px solid #E6E8EB !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; overflow: hidden !important; position: relative !important; }
.swiper-module .item .product-thumb .image { aspect-ratio: 1 !important; overflow: hidden !important; background: #F4F5F6 !important; position: relative !important; }
.swiper-module .item .product-thumb .image img { width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; }
.swiper-module .item .product-thumb .caption { padding: 10px 10px 12px !important; }
.swiper-module .item .product-thumb .caption .product-name a { font-size: 11px !important; font-weight: 500 !important; color: #1A1A1A !important; line-height: 1.3 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-decoration: none !important; }
.swiper-module .item .product-thumb .caption .price { display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 4px !important; margin-bottom: 4px !important; }
.swiper-module .item .product-thumb .caption .price .price_value { font-size: 15px !important; font-weight: 900 !important; color: #1A1A1A !important; }
.swiper-module .item .product-thumb .caption .price .price-old { display: inline !important; font-size: 11px !important; color: #C4C4C4 !important; text-decoration: line-through !important; margin-left: 2px !important; }
.swiper-module .item .product-thumb .caption .price .price-new .special_value { font-size: 15px !important; font-weight: 900 !important; color: #E11D48 !important; }
.swiper-module .item .product-thumb .stickers-ns { position: absolute !important; top: 8px !important; left: 8px !important; z-index: 5 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; }
.swiper-module .item .product-thumb .stickers-ns .sticker-ns { font-size: 10px !important; font-weight: 800 !important; padding: 3px 8px !important; border-radius: 6px !important; border: none !important; }
.swiper-module .item .product-thumb .stickers-ns .sticker-ns.special { background: #CCFF00 !important; color: #1A1A1A !important; }
.swiper-module .item .product-thumb .stickers-ns .sticker-ns.bestseller,
.swiper-module .item .product-thumb .stickers-ns .sticker-ns.popular,
.swiper-module .item .product-thumb .stickers-ns .sticker-ns.newproduct { background: rgba(255,255,255,0.92) !important; color: #0E0F12 !important; border: 1px solid #E6E8EB !important; }
.swiper-module .item .product-thumb .cart-float { position: absolute !important; bottom: 8px !important; right: 8px !important; z-index: 6 !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; background: #0E0F12 !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 8px rgba(14,15,18,0.25) !important; opacity: 1 !important; transform: scale(1) !important; }
.swiper-module .item .product-thumb .cart-float svg { width: 16px !important; height: 16px !important; stroke: #CCFF00 !important; stroke-width: 2.5 !important; }
.swiper-module .caption .cart { display: none !important; }

/* 6. BRANDS — horizontal scroll */
.yella-brands { display: flex !important; gap: 8px !important; padding: 10px 12px !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; }
.yella-brands::-webkit-scrollbar { display: none; }
.yella-brands__item { min-width: 80px !important; padding: 8px 14px !important; background: #FFF !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important; color: #1A1A1A !important; text-decoration: none !important; text-align: center !important; white-space: nowrap !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; }

/* 7. COUPON STRIP */
.yella-coupon { margin: 0 12px 12px !important; background: linear-gradient(135deg, #CCFF00, #A8E600) !important; border-radius: 12px !important; padding: 14px 16px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }
.yella-coupon__title { font-size: 15px !important; font-weight: 800 !important; color: #1A1A1A !important; }
.yella-coupon__sub { font-size: 12px !important; color: rgba(26,26,26,0.6) !important; }
.yella-coupon__btn { background: #1A1A1A !important; color: #FFF !important; border: none !important; border-radius: 8px !important; padding: 8px 16px !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; }

/* 8. RECOMMENDATIONS — 2 columns */
.yella-reco { padding: 0 12px !important; margin-bottom: 12px !important; }
.yella-reco__header { font-size: 16px !important; font-weight: 900 !important; color: #1A1A1A !important; margin-bottom: 10px !important; }
.yella-reco__grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.yella-reco__card { background: #FFF !important; border-radius: 12px !important; overflow: hidden !important; text-decoration: none !important; color: #1A1A1A !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; }
.yella-reco__card-img { width: 100% !important; aspect-ratio: 1 !important; object-fit: contain !important; background: #F7F8FA !important; }
.yella-reco__card-name { font-size: 12px !important; font-weight: 600 !important; padding: 6px 8px 2px !important; line-height: 1.3 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.yella-reco__card-price { font-size: 14px !important; font-weight: 800 !important; color: #1A1A1A !important; padding: 2px 8px 8px !important; }

/* 9. REVIEWS — horizontal scroll */
.store-reviews { display: flex !important; gap: 10px !important; padding: 10px 12px !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; }
.store-reviews::-webkit-scrollbar { display: none; }
.store-reviews .review-item { min-width: 260px !important; background: #FFF !important; border-radius: 12px !important; padding: 14px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; flex-shrink: 0 !important; }

/* 10. RATING — hidden */
.yella-reco .rating,
.swiper-module .rating { display: none !important; }

/* 11. FOOTER — hide elements on homepage */
body.route-common-home footer .footer-top,
body.route-common-home footer .footer-center,
body.route-common-home footer .title-f,
body.route-common-home footer #logo-footer,
body.route-common-home footer .footer-logo,
body.route-common-home footer .footer-logo-text { display: none !important; }
body.route-common-home footer .footer-subscribe-block,
body.route-common-home footer .newsletter-info,
body.route-common-home footer .btn-subscribe { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }

} /* end @media */


/* ── SOURCE: yella-bottomnav-v2.css ────────────────────────────── */
/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   YELLA BOTTOM NAV — Variant C: Minimal Segmented
   Single source of truth — no conflicts
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

@media (max-width: 767px) {

/* Container */
.yella-bnav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 390px !important;
  margin: 0 auto !important;
  z-index: 1000 !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(0,0,0,0.04) !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  padding: 0 4px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

/* Regular items */
.yella-bnav__item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  padding: 10px 0 12px !important;
  position: relative !important;
  -webkit-tap-highlight-color: transparent !important;
}
.yella-bnav__item:active {
  background: rgba(0,0,0,0.03) !important;
}

/* Icons */
.yella-bnav__icon {
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}
.yella-bnav__icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #BFBFBF !important;
  fill: none !important;
  transition: stroke 0.2s !important;
}

/* Labels */
.yella-bnav__label {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #BFBFBF !important;
  transition: color 0.2s !important;
  line-height: 1 !important;
}

/* Active state */
.yella-bnav__item.active .yella-bnav__label {
  color: #1A1A1A !important;
  font-weight: 700 !important;
}
.yella-bnav__item.active .yella-bnav__icon svg {
  stroke: #1A1A1A !important;
}
/* Top line indicator */
.yella-bnav__item.active::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 20% !important;
  right: 20% !important;
  height: 2.5px !important;
  border-radius: 0 0 2px 2px !important;
  background: #1A1A1A !important;
}

/* Cart button — dark segment, slightly taller */
.yella-bnav__item--cart {
  flex: 1.3 !important;
  padding: 6px 0 12px !important;
}
.yella-bnav__item--cart .yella-bnav__icon {
  width: 44px !important;
  height: 32px !important;
  background: #1A1A1A !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.yella-bnav__item--cart .yella-bnav__icon svg {
  stroke: #CCFF00 !important;
  width: 18px !important;
  height: 18px !important;
}
.yella-bnav__item--cart .yella-bnav__label {
  color: #1A1A1A !important;
  font-weight: 600 !important;
}
.yella-bnav__item--cart.active::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 20% !important;
  right: 20% !important;
  height: 2.5px !important;
  border-radius: 0 0 2px 2px !important;
  background: #1A1A1A !important;
}

/* Badge */
.yella-bnav__badge {
  position: absolute !important;
  top: -4px !important;
  right: calc(50% - 26px) !important;
  background: #E11D48 !important;
  color: #FFF !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  line-height: 1 !important;
}

/* Scroll to top — above nav */
#back-top {
  bottom: 80px !important;
  right: 16px !important;
  z-index: 999 !important;
}
#back-top .btn-back-top {
  width: 40px !important;
  height: 40px !important;
  background: #1A1A1A !important;
  color: #CCFF00 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

} /* end @media */

/* HIDE FOOTER ON PRODUCT, LOGIN, REGISTER, CHECKOUT, SUCCESS PAGES */
body.fix_cart_price_footer footer,
body.product-product footer,
html[data-page="login"] footer,
html[data-page="register"] footer,
html[data-page="checkout"] footer,
.yella-coupon-block ~ footer,
.yella-success ~ footer,
.ys-order ~ footer { display: none !important; }

/* === YELLA CART DRAWER === */
.header-cart-fix-right {
  background: #FFFFFF !important;
  border-radius: 20px 0 0 20px !important;
  box-shadow: -8px 0 40px rgba(0,0,0,0.12) !important;
}
.header-cart-top {
  padding: 20px 20px 16px !important;
  border-bottom: 1px solid #F0F1F3 !important;
}
.header-cart-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #1A1A1A !important;
}
.header-cart-close {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #F4F5F6 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8A8F98 !important;
  transition: background 0.2s !important;
}
.header-cart-close:hover { background: #E6E8EB !important; }
.header-cart-close i { font-size: 14px !important; }

/* Product items */
.header-cart-products { padding: 8px 0 !important; }
.header-cart-product-item {
  padding: 16px 20px !important;
  gap: 14px !important;
  border-bottom: 1px solid #F0F1F3 !important;
  align-items: flex-start !important;
}
.header-cart-product-item-left {
  width: 80px !important;
  height: 80px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #F7F8FA !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
.header-cart-product-item-left img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.header-cart-product-item-left .btn-link-delete {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.9) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  color: #8A8F98 !important;
  font-size: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
  opacity: 0 !important;
  transition: opacity 0.2s !important;
}
.header-cart-product-item:hover .btn-link-delete { opacity: 1 !important; }

.header-cart-product-item-center { flex: 1 !important; min-width: 0 !important; }
.header-cart-product-name a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-decoration: none !important;
}
.header-cart-options { margin-top: 4px !important; }
.header-cart-product-option {
  font-size: 12px !important;
  color: #8A8F98 !important;
  gap: 4px !important;
}
.hcp-option-name { font-weight: 500 !important; }
.hcp-option-value { font-weight: 400 !important; }

/* Quantity & price */
.header-cart-price-quantity {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
}
.ch-cart-quantity {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  border: 1.5px solid #E6E8EB !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.ch-cart-quantity .input-btn { display: flex !important; }
.ch-cart-quantity .btn {
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: transparent !important;
  color: #1A1A1A !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background 0.2s !important;
}
.ch-cart-quantity .btn:hover { background: #F4F5F6 !important; }
.ch-cart-quantity .form-control {
  width: 36px !important;
  height: 32px !important;
  border: none !important;
  border-left: 1px solid #E6E8EB !important;
  border-right: 1px solid #E6E8EB !important;
  border-radius: 0 !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  padding: 0 !important;
  background: transparent !important;
}
.header-cart-item-total {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1A1A1A !important;
}

/* Totals */
.header-cart-totals {
  padding: 12px 20px !important;
  border-top: 1px solid #F0F1F3 !important;
}
.header-cart-text-info {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #8A8F98 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.header-cart-text-info i { font-size: 10px !important; }
.header-cart-total-info { padding-top: 8px !important; }
.ch-total-item {
  justify-content: space-between !important;
  padding: 4px 0 !important;
  font-size: 13px !important;
}
.header-cart-total-title { color: #8A8F98 !important; }
.header-cart-total-text { font-weight: 700 !important; color: #1A1A1A !important; }

/* Actions */
.header-cart-actions { padding: 0 20px 16px !important; }
.header-cart-actions .chm-btn-primary {
  background: #CCFF00 !important;
  color: #1A1A1A !important;
  border: none !important;
  border-radius: 12px !important;
  height: 50px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}
.header-cart-actions .chm-btn-primary:hover { background: #b8e600 !important; }
.header-cart-actions .chm-btn-grey {
  background: transparent !important;
  color: #1A1A1A !important;
  border: 1.5px solid #E6E8EB !important;
  border-radius: 12px !important;
  height: 50px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: border-color 0.2s !important;
}
.header-cart-actions .chm-btn-grey:hover { border-color: #1A1A1A !important; }
.header-cart-actions .chm-btn-white {
  background: transparent !important;
  color: #8A8F98 !important;
  border: none !important;
  font-size: 13px !important;
  text-decoration: underline !important;
}

/* Sticky bottom bar */
.header-cart-sticky {
  padding: 16px 20px !important;
  border-top: 1px solid #F0F1F3 !important;
  background: #FFFFFF !important;
}
.header-cart-sticky .chm-btn-primary {
  background: #CCFF00 !important;
  color: #1A1A1A !important;
  border: none !important;
  border-radius: 12px !important;
  height: 52px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}
.header-cart-sticky .chm-btn-primary:hover { background: #b8e600 !important; }
.header-cart-sticky .chm-btn-grey {
  background: transparent !important;
  color: #1A1A1A !important;
  border: 1.5px solid #E6E8EB !important;
  border-radius: 12px !important;
  height: 52px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

/* Empty cart */
.box-empty-cart-icon { padding: 40px 0 16px !important; }
.box-empty-cart-icon svg { width: 120px !important; height: auto !important; }
.cart-empty {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin-bottom: 4px !important;
}
.cart-empty-info-text {
  font-size: 13px !important;
  color: #8A8F98 !important;
}

/* === YELLA FULL CART PAGE === */
#content > h1 {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #1A1A1A !important;
  margin-bottom: 20px !important;
  padding-top: 20px !important;
}
.page-cart {
  flex-direction: column !important;
  gap: 16px !important;
}
.cart-col-left { width: 100% !important; }
.cart-list { display: flex; flex-direction: column; gap: 1px; }
.cart-item {
  background: #F7F8FA !important;
  border-radius: 14px !important;
  padding: 16px !important;
  gap: 14px !important;
  align-items: flex-start !important;
  margin-bottom: 10px !important;
}
.cart-item-left {
  width: 90px !important;
  height: 90px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #FFF !important;
  flex-shrink: 0 !important;
}
.cart-item-left img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.cart-item-center { flex: 1 !important; min-width: 0 !important; }
.cart-item-prod-name a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.product-model {
  font-size: 12px !important;
  color: #8A8F98 !important;
  margin-top: 2px !important;
}
.cart-item-options { margin-top: 6px !important; }
.cart-item-option {
  font-size: 12px !important;
  color: #8A8F98 !important;
  gap: 4px !important;
}
.cart-item-option-name { font-weight: 500 !important; }
.cart-item-price-quantity {
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
}
.cart-item-price-quantity .dflex {
  gap: 8px !important;
  align-items: center !important;
}
.btn-remove {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1.5px solid #E6E8EB !important;
  background: #FFF !important;
  color: #8A8F98 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 13px !important;
  transition: border-color 0.2s, color 0.2s !important;
}
.btn-remove:hover {
  border-color: #E11D48 !important;
  color: #E11D48 !important;
}
.cart-totals {
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
}
.text-cart-item-price,
.text-cart-item-total {
  font-size: 11px !important;
  color: #8A8F98 !important;
  margin-right: 6px !important;
}
.cart-item-price {
  font-size: 13px !important;
  color: #8A8F98 !important;
}
.cart-item-total {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1A1A1A !important;
}

/* Right column — totals */
.cart-col-right {
  background: #F7F8FA !important;
  border-radius: 14px !important;
  padding: 20px !important;
  width: 100% !important;
}
.table-cart {
  width: 100% !important;
  border: none !important;
  margin-bottom: 16px !important;
}
.table-cart tr td {
  border: none !important;
  padding: 6px 0 !important;
  font-size: 14px !important;
}
.total-title {
  color: #8A8F98 !important;
  font-weight: 500 !important;
}
.total-last {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #1A1A1A !important;
  border-top: 1px solid #E6E8EB !important;
  padding-top: 10px !important;
}
.total-text {
  font-weight: 700 !important;
  color: #1A1A1A !important;
}
.total-last .total-text {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #1A1A1A !important;
}
.cart-col-right .btn-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 52px !important;
  background: #CCFF00 !important;
  color: #1A1A1A !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}
.cart-col-right .btn-primary:hover {
  background: #b8e600 !important;
}
.checkout-cart-accordion {
  margin-bottom: 16px !important;
}
.text-checkout-modules {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
/* === END YELLA FULL CART PAGE === */

/* === YELLA SIMPLE CHECKOUT POPUP (OPTION SELECTION) === */
/* Override product.twig inline styles inside modal */
#modal-options .options .default-radio {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  border: 1.5px solid #E6E8EB !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  gap: 4px !important;
}
#modal-options .options .default-radio:has(input:checked) {
  border-color: #CCFF00 !important;
  background: rgba(204,255,0,0.08) !important;
}
#modal-options .options .default-radio label {
  flex-direction: row !important;
  align-items: center !important;
  padding-right: 0 !important;
}
#modal-options .options .default-radio:has(input:checked)::after { display: none !important; }
#modal-options .options .default-radio:has(input:checked) label,
#modal-options .options .default-radio:has(input:checked) label * { color: #1A1A1A !important; }

/* Modal layout */
#modal-options .modal-dialog { max-width: 480px !important; width: 92% !important; }
#modal-options .modal-content { border-radius: 20px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important; border: none !important; overflow: hidden !important; }
#modal-options .modal-header { border-bottom: none !important; padding: 20px 20px 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }
#modal-options .modal-title { font-size: 20px !important; font-weight: 900 !important; color: #1A1A1A !important; }
#modal-options .close-modal { background: none !important; border: none !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #8A8F98 !important; cursor: pointer !important; padding: 0 !important; flex-shrink: 0 !important; }
#modal-options .close-modal:hover { background: #F4F5F6 !important; }
#modal-options .close-modal i { font-size: 18px !important; }
#modal-options .modal-body { padding: 16px 20px !important; }
#modal-options .control-label { font-size: 12px !important; font-weight: 600 !important; color: #8A8F98 !important; margin-bottom: 8px !important; display: block !important; }

/* Footer */
#modal-options .modal-footer { border-top: 1px solid #F0F1F3 !important; padding: 14px 20px !important; background: #FFF !important; }
#modal-options .info-options-bottom { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; flex-wrap: nowrap !important; }

/* Quantity */
#modal-options .quantity_plus_minus { display: inline-flex !important; align-items: center !important; border: 1.5px solid #E6E8EB !important; border-radius: 10px !important; overflow: hidden !important; background: #FFF !important; flex-shrink: 0 !important; }
#modal-options .add-up, #modal-options .add-down { width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; background: transparent !important; border: none !important; padding: 0 !important; }
#modal-options .add-up:hover, #modal-options .add-down:hover { background: #F4F5F6 !important; }
#modal-options .quantity-num { width: 36px !important; height: 32px !important; border: none !important; border-left: 1px solid #E6E8EB !important; border-right: 1px solid #E6E8EB !important; text-align: center !important; font-size: 14px !important; font-weight: 700 !important; color: #1A1A1A !important; padding: 0 !important; background: transparent !important; }

/* Price */
#modal-options .chm-price-totals { display: flex !important; align-items: baseline !important; gap: 6px !important; flex-shrink: 0 !important; }
#modal-options .price-old .price_value { font-size: 11px !important; color: #8A8F98 !important; text-decoration: line-through !important; }
#modal-options .price-new .special_value { font-size: 16px !important; font-weight: 900 !important; color: #1A1A1A !important; }

/* Buy button */
#modal-options .cart { flex-shrink: 0 !important; }
#modal-options .btn.btn-general { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 44px !important; padding: 0 20px !important; background: #CCFF00 !important; color: #1A1A1A !important; border: none !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 800 !important; font-family: 'Rubik', sans-serif !important; cursor: pointer !important; white-space: nowrap !important; }
#modal-options .btn.btn-general:hover { background: #b8e600 !important; }
#modal-options .btn.btn-general .icon-cart-add { display: none !important; }
/* === END YELLA SIMPLE CHECKOUT POPUP === */

/* === YELLA CHECKOUT — CLEAN MINIMAL (SIMPLECHECKOUT) === */
.simple-content { max-width: 480px !important; margin: 0 auto !important; padding: 0 0 24px !important; }
.simple-content h1 { font-size: 20px !important; font-weight: 900 !important; color: #1A1A1A !important; text-align: center !important; margin-bottom: 16px !important; padding-top: 20px !important; }
.breadcrumb, .breadcrumb-box { display: none !important; }
#simplecheckout_form_0, #simplecheckout_form, .simplecheckout { max-width: 480px !important; margin: 0 auto !important; }

/* Step menu */
#simplecheckout_step_menu { display: flex !important; gap: 0 !important; margin-bottom: 16px !important; border: 1.5px solid #E6E8EB !important; border-radius: 10px !important; overflow: hidden !important; }
.simple-step { flex: 1 !important; padding: 12px !important !important; text-align: center !important; font-size: 13px !important; font-weight: 700 !important; color: #8A8F98 !important; background: #F7F8FA !important; border: none !important; border-radius: 0 !important; cursor: pointer !important; transition: all 0.2s !important; }
.simple-step-current { background: #1A1A1A !important; color: #FFF !important; }
.simple-step-completed { background: #F7F8FA !important; color: #1A1A1A !important; }
.simple-step-delimiter { display: none !important; }
.simplecheckout-top-menu, .simplecheckout-bottom-menu { display: none !important; }

/* Blocks as cards */
.simplecheckout-block { clear: both !important; margin-bottom: 12px !important; }
.simplecheckout-block-content { padding: 20px !important; background: #FFF !important; border-radius: 16px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important; border: none !important; }
.simplecheckout-block-content legend { font-size: 14px !important; font-weight: 700 !important; color: #1A1A1A !important; border-bottom: 2px solid #CCFF00 !important; border-top: none !important; border-left: none !important; border-right: none !important; padding-bottom: 10px !important; margin-bottom: 14px !important; width: 100% !important; float: none !important; }

/* Checkout headings */
.checkout-heading { background: #FFF !important; border: none !important; border-radius: 0 !important; padding: 0 0 10px !important !important; border-bottom: 2px solid #CCFF00 !important; margin-bottom: 14px !important; }
.checkout-heading span { font-size: 14px !important; font-weight: 700 !important; color: #1A1A1A !important; }

/* Form groups */
.simple-content .form-group { margin-bottom: 14px !important; }
.simple-content label, .simple-content .control-label { display: block !important; width: 100% !important; float: none !important; font-size: 12px !important; font-weight: 600 !important; color: #8A8F98 !important; margin-bottom: 6px !important; padding: 0 15px !important; }
.simple-content label::after { content: none !important; }

/* Inputs — highest specificity */
.simple-content input[type="text"],
.simple-content input[type="email"],
.simple-content input[type="tel"],
.simple-content input[type="password"],
.simple-content select,
.simple-content textarea,
.simple-content .form-control {
  display: block !important;
  width: 100% !important;
  height: 46px !important;
  border: 1.5px solid #E6E8EB !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Rubik', sans-serif !important;
  color: #1A1A1A !important;
  background: #F7F8FA !important;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.simple-content input:focus,
.simple-content select:focus,
.simple-content textarea:focus,
.simple-content .form-control:focus {
  border-color: #CCFF00 !important;
  background: #FFF !important;
  box-shadow: 0 0 0 3px rgba(204,255,0,0.18) !important;
  outline: none !important;
}
.simple-content .form-control::placeholder { color: #C0C0C0 !important; }
.simple-content textarea { min-height: 80px !important; padding: 12px 14px !important; resize: vertical !important; }

/* Radio chips */
.row-customer_register .radio,
.simple-content .radio { margin-bottom: 8px !important; }
.row-customer_register .radio label,
.simple-content .radio label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border: 1.5px solid #E6E8EB !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.row-customer_register .radio label:has(input:checked),
.simple-content .radio label:has(input:checked) {
  border-color: #CCFF00 !important;
  background: rgba(204,255,0,0.08) !important;
}
.row-customer_register .radio label::before,
.simple-content .radio label::before {
  content: '' !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 2px solid #D0D0D0 !important;
  flex-shrink: 0 !important;
  transition: all 0.2s !important;
}
.row-customer_register .radio label:has(input:checked)::before,
.simple-content .radio label:has(input:checked)::before {
  border-color: #1A1A1A !important;
  background: #1A1A1A !important;
  box-shadow: inset 0 0 0 3px #FFF !important;
}
.simple-content input[type="radio"] {
  width: 0 !important;
  height: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Shipping/Payment methods */
.simplecheckout-methods-table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 8px !important; }
.simplecheckout-methods-table td { border: none !important; padding: 0 !important; }
.simplecheckout-methods-table td.title label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border: 1.5px solid #E6E8EB !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.simplecheckout-methods-table td.title label:has(input:checked) {
  border-color: #CCFF00 !important;
  background: rgba(204,255,0,0.08) !important;
}

/* Cart table */
.simplecheckout-cart { width: 100% !important; border-collapse: collapse !important; border: none !important; }
.simplecheckout-cart th { display: none !important; }
.simplecheckout-cart td { padding: 14px 0 !important; border-bottom: 1px solid #F0F1F3 !important; vertical-align: top !important; }
.simplecheckout-cart tr:last-child td { border: none !important; }
.simplecheckout-cart td.image { width: 80px !important; padding-right: 14px !important; }
.simplecheckout-cart td.image img { width: 80px !important; height: 80px !important; border-radius: 12px !important; object-fit: contain !important; background: #F4F5F6 !important; border: 1px solid #F0F1F3 !important; }
.simplecheckout-cart td.name { font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #1A1A1A !important; padding-right: 14px !important; }
.simplecheckout-cart td.name .image { display: none !important; }
.simplecheckout-cart td.quantity { text-align: left !important; vertical-align: middle !important; padding-top: 8px !important; }
.simplecheckout-cart td.quantity .input-group { display: inline-flex !important; align-items: center !important; border: 1.5px solid #E6E8EB !important; border-radius: 10px !important; overflow: hidden !important; background: #FFF !important; }
.simplecheckout-cart td.quantity .input-group button { width: 36px !important; height: 36px !important; border: none !important; background: transparent !important; color: #1A1A1A !important; font-size: 16px !important; font-weight: 600 !important; }
.simplecheckout-cart td.quantity .input-group button:hover { background: #F4F5F6 !important; }
.simplecheckout-cart td.quantity .form-control { width: 40px !important; height: 36px !important; border: none !important; border-left: 1px solid #E6E8EB !important; border-right: 1px solid #E6E8EB !important; border-radius: 0 !important; text-align: center !important; font-size: 14px !important; font-weight: 700 !important; padding: 0 !important; background: transparent !important; }
.simplecheckout-cart td.price { font-size: 15px !important; font-weight: 800 !important; color: #1A1A1A !important; text-align: right !important; white-space: nowrap !important; vertical-align: middle !important; }
.simplecheckout-cart td.total { display: none !important; }
.simplecheckout-cart td.remove { display: none !important; }

/* Totals card */
.simplecheckout-cart-total { padding: 0 !important; background: none !important; border: none !important; margin-top: 16px !important; border-radius: 0 !important; }
.simplecheckout-cart-total .buttons { background: inherit !important; padding: 0 !important; border: none !important; }
.simplecheckout-cart-total table { width: 100% !important; background: #F7F8FA !important; border-radius: 14px !important; overflow: hidden !important; border-collapse: separate !important; border-spacing: 0 !important; }
.simplecheckout-cart-total table td { padding: 10px 16px !important; font-size: 14px !important; color: #8A8F98 !important; border: none !important; background: #F7F8FA !important; }
.simplecheckout-cart-total table td:first-child { text-align: left !important; }
.simplecheckout-cart-total table td:last-child { text-align: right !important; }
.simplecheckout-cart-total table tr:last-child td { font-size: 18px !important; font-weight: 900 !important; color: #1A1A1A !important; border-top: 1px solid #E6E8EB !important; padding: 14px 16px !important; }
.simplecheckout-cart-total span.inputs { display: flex !important; gap: 0 !important; margin: 16px 0 0 !important; background: #FFF !important; border: 1.5px solid #E6E8EB !important; border-radius: 12px !important; overflow: hidden !important; }
.simplecheckout-cart-total span.inputs input { flex: 1 !important; height: 50px !important; border: none !important; border-radius: 0 !important; padding: 0 16px !important; font-size: 14px !important; font-family: 'Rubik', sans-serif !important; max-width: none !important; background: transparent !important; }
.simplecheckout-cart-total span.inputs input:focus { outline: none !important; }
.simplecheckout-cart-total span.inputs input::placeholder { color: #ABABAB !important; }
.simplecheckout-cart-total span.inputs .button,
.simplecheckout-cart-total span.inputs button { height: 50px !important; padding: 0 24px !important; background: #1A1A1A !important; color: #FFF !important; border: none !important; border-radius: 0 !important; font-size: 15px !important; font-weight: 700 !important; font-family: 'Rubik', sans-serif !important; cursor: pointer !important; white-space: nowrap !important; transition: background 0.2s !important; }
.simplecheckout-cart-total span.inputs .button:hover,
.simplecheckout-cart-total span.inputs button:hover { background: #333 !important; }

/* Buttons */
.simplecheckout-button-block { clear: both !important; margin-top: 16px !important; padding: 0 !important; background: none !important; text-align: left !important; }
.simplecheckout-button-right { float: none !important; text-align: left !important; }
.simplecheckout-button-right .button,
.simplecheckout-button .button,
.simple-content .button.btn-primary,
.simple-content .btn-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 56px !important;
  background: #CCFF00 !important;
  color: #1A1A1A !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  font-family: 'Rubik', sans-serif !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.15s !important;
  text-decoration: none !important;
  text-align: center !important;
  padding: 0 16px !important;
  box-shadow: none !important;
}
.simplecheckout-button-right .button:hover,
.simplecheckout-button .button:hover,
.simple-content .btn-primary:hover {
  background: #b8e600 !important;
  transform: translateY(-1px) !important;
}
.simplecheckout-button-left .button,
.simple-content .button.btn-secondary,
.simple-content .btn-secondary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 50px !important;
  background: transparent !important;
  color: #1A1A1A !important;
  border: 1.5px solid #E6E8EB !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: 'Rubik', sans-serif !important;
  cursor: pointer !important;
  transition: border-color 0.2s !important;
  text-decoration: none !important;
  text-align: center !important;
  padding: 0 16px !important;
  margin-top: 10px !important;
}
.simplecheckout-button-left .button:hover,
.simple-content .btn-secondary:hover {
  border-color: #1A1A1A !important;
}

/* Error */
.simplecheckout-error-text, .simplecheckout-warning-text { font-size: 12px !important; color: #E11D48 !important; margin-top: 4px !important; }

/* Login */
.simplecheckout-login { display: block !important; background: #F7F8FA !important; border-radius: 12px !important; padding: 16px !important; margin-bottom: 12px !important; }

/* Hide */
#column-right, .chm-account-fixed, .fixed-goods-bar { display: none !important; }
#content { width: 100% !important; max-width: 100% !important; }
/* === END YELLA CHECKOUT === */

/* === YELLA HOMEPAGE FLASH SALE (correct selectors matching HTML) === */
@media (max-width: 767px) {
body.route-common-home .yella-flash { padding: 0 12px !important; margin-bottom: 12px !important; }
body.route-common-home .yella-flash__header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 10px !important; }
body.route-common-home .yella-flash__left { display: flex !important; align-items: center !important; gap: 8px !important; }
body.route-common-home .yella-flash__title { font-size: 16px !important; font-weight: 900 !important; color: #1A1A1A !important; display: flex !important; align-items: center !important; gap: 6px !important; }
body.route-common-home .yella-flash__timer { display: flex !important; gap: 3px !important; }
body.route-common-home .yella-flash__timer span { background: #1A1A1A !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; }
body.route-common-home .yella-flash__timer .yella-flash__sep { background: none !important; color: #1A1A1A !important; min-width: auto !important; padding: 0 1px !important; }
body.route-common-home .yella-flash__more { font-size: 13px !important; font-weight: 600 !important; color: #8A8F98 !important; text-decoration: none !important; display: flex !important; align-items: center !important; gap: 2px !important; }
body.route-common-home .yella-flash__scroll { display: flex !important; gap: 10px !important; overflow-x: auto !important; padding-bottom: 4px !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; }
body.route-common-home .yella-flash__scroll::-webkit-scrollbar { display: none; }
body.route-common-home .yella-flash__card { min-width: 130px !important; width: 130px !important; background: #FFF !important; border-radius: 14px !important; overflow: hidden !important; text-decoration: none !important; color: #1A1A1A !important; flex-shrink: 0 !important; position: relative !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; border: 1px solid #F0F1F3 !important; display: block !important; }
body.route-common-home .yella-flash__img { width: 100% !important; aspect-ratio: 1 !important; position: relative !important; background: #F7F8FA !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; }
body.route-common-home .yella-flash__img img { width: 80% !important; height: 80% !important; object-fit: contain !important; }
body.route-common-home .yella-flash__pct { position: absolute !important; top: 8px !important; left: 8px !important; background: #E11D48 !important; color: #FFF !important; font-size: 10px !important; font-weight: 800 !important; padding: 3px 7px !important; border-radius: 8px !important; z-index: 1 !important; }
body.route-common-home .yella-flash__info { padding: 8px 10px 10px !important; }
body.route-common-home .yella-flash__name { font-size: 11px !important; font-weight: 500 !important; color: #1A1A1A !important; line-height: 1.3 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin-bottom: 6px !important; min-height: 28px !important; }
body.route-common-home .yella-flash__bar-text { font-size: 9px !important; font-weight: 600 !important; color: #E11D48 !important; margin-bottom: 4px !important; }
body.route-common-home .yella-flash__bar { height: 3px !important; background: #F0F1F3 !important; border-radius: 2px !important; margin: 0 10px 6px !important; overflow: hidden !important; }
body.route-common-home .yella-flash__bar-inner { height: 100% !important; background: linear-gradient(90deg, #E11D48, #FF6B6B) !important; border-radius: 2px !important; font-size: 0 !important; line-height: 0 !important; }
body.route-common-home .yella-flash__price { display: flex !important; align-items: baseline !important; gap: 4px !important; padding: 0 10px 10px !important; }
body.route-common-home .yella-flash__now { font-size: 14px !important; font-weight: 800 !important; color: #1A1A1A !important; }
body.route-common-home .yella-flash__was { font-size: 10px !important; color: #8A8F98 !important; text-decoration: line-through !important; font-weight: 500 !important; }
body.route-common-home .yella-brands { display: flex !important; gap: 8px !important; padding: 10px 12px !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; border-top: 1px solid #F0F1F3 !important; margin-top: 16px !important; }
body.route-common-home .yella-brands::-webkit-scrollbar { display: none; }
body.route-common-home .yella-brands__item { min-width: 80px !important; padding: 8px 14px !important; background: #F4F5F6 !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important; color: #1A1A1A !important; text-decoration: none !important; text-align: center !important; white-space: nowrap !important; border: 1px solid transparent !important; transition: all 0.2s !important; }
body.route-common-home .yella-brands__item:hover { background: #E8E9EC !important; border-color: #CCFF00 !important; }
} /* end flash sale media */

/* Import optimized homepage CSS */
@import url("https://yella.uz/catalog/view/theme/upstore/stylesheet/yella-home-v4.css");