/*
 * GI Mobile Category Sidebar v1.1.7 - configurable bottom button background patch v1.1.2
 * ponytail: paint-only patch; v1.1.7 still owns button geometry.
 */
:root {
  --gi-mcs-bottom-catalog-bg-image: url('../../../../../image/catalog/gi_mobile_category_sidebar/BOTTOM_MENU_CATEGORY_BG.jpg');
  --gi-mcs-bottom-catalog-bg-size: cover;
  --gi-mcs-bottom-catalog-bg-position: center center;
}

@media (max-width: 767px) {
  /* The visible button is partly the <a> and partly v1.1.7's li::before backing plate. Paint both. */
  html body .bottom-menu > ul > li.gi-mcs-bottom-catalog::before,
  html body .bottom-menu[class*="bottom-menu-"] > ul > li.gi-mcs-bottom-catalog::before,
  html body .bottom-menu > ul > li:has(> a[href*="route=product/catalog"])::before,
  html body .bottom-menu[class*="bottom-menu-"] > ul > li:has(> a[href*="route=product/catalog"])::before {
    background: var(--gi-mcs-bottom-catalog-bg-image) var(--gi-mcs-bottom-catalog-bg-position, center center) / var(--gi-mcs-bottom-catalog-bg-size, cover) no-repeat !important;
    background-color: transparent !important;
    background-blend-mode: normal !important;
  }

  html body .bottom-menu > ul > li.gi-mcs-bottom-catalog > a,
  html body .bottom-menu[class*="bottom-menu-"] > ul > li.gi-mcs-bottom-catalog > a,
  html body .bottom-menu > ul > li.gi-mcs-bottom-catalog.active > a,
  html body .bottom-menu[class*="bottom-menu-"] > ul > li.gi-mcs-bottom-catalog.active > a,
  html body .bottom-menu > ul > li.menu-item > a[href*="route=product/catalog"],
  html body .bottom-menu[class*="bottom-menu-"] > ul > li.menu-item > a[href*="route=product/catalog"],
  html body .bottom-menu > ul > li > a.gi-mcs-bottom-catalog-link,
  html body .bottom-menu > ul > li > a[href*="route=product/catalog"],
  html body .bottom-menu > ul > li > a[href*="route=product/catalog"]:hover,
  html body .bottom-menu > ul > li > a[href*="route=product/catalog"]:focus,
  html body .bottom-menu > ul > li > a[href*="route=product/catalog"]:active,
  html body .bottom-menu[class*="bottom-menu-"] > ul > li > a[href*="route=product/catalog"]:hover,
  html body .bottom-menu[class*="bottom-menu-"] > ul > li > a[href*="route=product/catalog"]:focus,
  html body .bottom-menu[class*="bottom-menu-"] > ul > li > a[href*="route=product/catalog"]:active {
    background: var(--gi-mcs-bottom-catalog-bg-image) var(--gi-mcs-bottom-catalog-bg-position, center center) / var(--gi-mcs-bottom-catalog-bg-size, cover) no-repeat !important;
    background-color: transparent !important;
    background-blend-mode: normal !important;
  }
}