/* ==========================================================================
   Storefront overrides — fixes for gaps the theme leaves when its Pro-only
   assets (Font Awesome Pro kit, pwstabs JS) aren't available. Loaded LAST so it
   wins over the bundled Zenis stylesheets.
   ========================================================================== */

/* --- Font Awesome shim ----------------------------------------------------
   The theme loads icons via a Font Awesome PRO kit we can't use; only FA5 Free
   is bundled here. Render `far`/`fal` (light / regular-only) icons with the
   complete solid font instead of empty boxes. Brands (`fab`) are left alone. */
.storefront .far,
.storefront .fal {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}

/* --- Trending category tabs ----------------------------------------------
   The theme's pwstabs pill styling is incomplete without its Pro JS plugin, so
   we style the tabs as clean pills: a horizontally-scrollable row on mobile,
   right-aligned wrapping on desktop. Active pill uses the shop's primary. */
.storefront .trending_product_2 ul.pws_tabs_controll {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 4px 2px;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  top: 0; /* neutralise the theme's -53px pwstabs offset */
}
.storefront .trending_product_2 ul.pws_tabs_controll::-webkit-scrollbar {
  display: none;
}
.storefront .trending_product_2 ul.pws_tabs_controll li {
  flex: 0 0 auto;
  margin: 0;
}
.storefront .trending_product_2 ul.pws_tabs_controll li a {
  display: inline-block;
  white-space: nowrap;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 50px;
  border: 1px solid #e6e8eb;
  background: var(--lightBg, #edf5ff);
  color: var(--colorBlack, #333);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.storefront .trending_product_2 ul.pws_tabs_controll li a:hover {
  border-color: var(--themeColoeOne);
  color: var(--themeColoeOne);
}
.storefront .trending_product_2 ul.pws_tabs_controll li a.pws_tab_active {
  background: var(--themeColoeOne);
  border-color: var(--themeColoeOne);
  color: #fff;
}

@media (min-width: 1200px) {
  .storefront .trending_product_2 ul.pws_tabs_controll {
    flex-wrap: wrap;
    justify-content: flex-end;
    overflow: visible;
  }
}

/* --- Brand logos ----------------------------------------------------------
   The theme sizes each brand pill at 11.39% width and has NO rule below 768px,
   so on phones the logos are tiny and cramped. Show a sensible 3-up (tablet/
   large phone) and 2-up (small phone) grid instead. */
@media (max-width: 767px) {
  .storefront .brand_2 ul {
    gap: 12px;
  }
  .storefront .brand_2 ul li {
    width: calc(33.333% - 8px);
    max-height: none;
  }
  .storefront .brand_2 ul li a {
    padding: 14px;
  }
}
@media (max-width: 479px) {
  .storefront .brand_2 ul li {
    width: calc(50% - 6px);
  }
}

/* --- Footer ---------------------------------------------------------------
   The footer columns stack on tablet/mobile; give them consistent spacing and
   centre the copyright so the layout reads cleanly instead of cramming. */
@media (max-width: 991px) {
  .storefront .footer_2 {
    padding-top: 44px !important;
  }
  .storefront .footer_2 .row > [class*="col-"] {
    margin-bottom: 24px;
  }
  .storefront .footer_2 .footer_copyright {
    margin-top: 8px !important;
    text-align: center;
  }
}