/* XSTORE UI fix pack — footer, CTAs, subcats, product trust, cart
   Loaded last. Mobile-first overrides with !important where the theme fights back. */

/* =========================================================
   1. Footer: readable on white
   ========================================================= */
footer.footer {
  background: #ffffff !important;
  color: #1d1d1f !important;
  --footer-c: #3a3a40 !important;
  --footer-heading-c: #111118 !important;
  --footer-bg: #ffffff !important;
}
footer.footer .footer__column-heading,
footer.footer .footer-heading {
  color: #111118 !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}
footer.footer .footer__column-a,
footer.footer a,
footer.footer li,
footer.footer .footer__contacts-li,
footer.footer .footer__text,
footer.footer .footer__text p,
footer.footer .footer__text span {
  color: #3a3a40 !important;
  opacity: 1 !important;
}
footer.footer .footer__column-a:hover,
footer.footer a:hover {
  color: #e84080 !important;
}
footer.footer .footer__payments-icon,
footer.footer .footer__socials-icon,
footer.footer .footer__payments img,
footer.footer .footer__media img {
  opacity: 1 !important;
  filter: none !important;
}
footer.footer .footer__socials-icon {
  color: #e84080 !important;
}
footer a[href="/podbor"],
footer a[href="https://xstore.com.by/podbor"] {
  display: none !important;
}

/* =========================================================
   2. Cart modal: full-width checkout button, not shifted
   ========================================================= */
@media (max-width: 991px) {
  .header-cart .modal-dialog,
  #cart .modal-dialog,
  .modal-dialog.header-cart {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .header-cart__buttons {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 0 4px !important;
  }
  .header-cart__buttons .btn,
  .header-cart__buttons a.btn {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-height: 48px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .header-cart__buttons .btn-primary,
  .header-cart__buttons a.btn-primary {
    background: linear-gradient(135deg, #f05a96, #e84080) !important;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(232, 64, 128, 0.28) !important;
  }
  .header-cart__totals {
    justify-content: space-between !important;
    width: 100% !important;
  }
  .header-cart__totals-item {
    justify-content: space-between !important;
    width: 100% !important;
  }
}

/* =========================================================
   3. Checkout sticky bar: visible pink CTA
   ========================================================= */
.xs-co-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1300 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  background: #ffffff !important;
  border-top: 1px solid #e8eaef !important;
  box-shadow: 0 -8px 24px rgba(18, 20, 26, 0.1) !important;
}
.xs-co-bar__total small {
  display: block !important;
  font-size: 11px !important;
  color: #6b7280 !important;
  font-weight: 600 !important;
}
.xs-co-bar__total b,
.xs-co-bar [data-xs-co-total] {
  display: block !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #111118 !important;
  letter-spacing: -0.03em !important;
}
.xs-co-bar__btn,
button.xs-co-bar__btn,
.xs-co-bar [data-xs-co-confirm] {
  flex: 1 1 auto !important;
  height: 48px !important;
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #f05a96, #e84080) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  box-shadow: 0 8px 20px rgba(232, 64, 128, 0.32) !important;
  -webkit-text-fill-color: #ffffff !important;
}
@media (min-width: 992px) {
  .xs-co-bar { display: none !important; }
}

/* =========================================================
   4. Call / fly button: don't cover CTAs
   ========================================================= */
@media (max-width: 991px) {
  .fly-block {
    right: auto !important;
    left: 10px !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px) !important;
    z-index: 1035 !important;
  }
  body.xs-product-page .fly-block,
  body.product-page .fly-block,
  body.product-product .fly-block {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 78px) !important;
  }
  body.xs-checkout-page .fly-block,
  body.has-xs-co-bar .fly-block,
  body.modal-open .fly-block,
  body.checkout-uni_checkout .fly-block {
    display: none !important;
  }
}

/* Sticky ATC: no double safe-area (it already sits above the nav) */
@media (max-width: 991px) {
  .xs-sticky-atc {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 10px 12px !important;
    z-index: 1050 !important;
  }
}

/* =========================================================
   5. Hide "Почему XSTORE" product textblock
   ========================================================= */
.xstore-product-benefits,
.product-page__textblock .xstore-product-benefits,
.product-page__textblock:has(.xstore-product-benefits) {
  display: none !important;
}

/* =========================================================
   6. Compact attractive trust block
   ========================================================= */
.xstore-buy-trust {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin: 10px 0 8px !important;
  padding: 8px !important;
  background: linear-gradient(180deg, #fff8fb, #ffffff) !important;
  border: 1px solid #f3d0e0 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(232, 64, 128, 0.06) !important;
}
.xstore-buy-trust__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 8px 8px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  color: #4b4450 !important;
  min-width: 0 !important;
  overflow: visible !important;
}
.xstore-buy-trust__item b {
  display: block !important;
  color: #1d1d1f !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  margin-bottom: 1px !important;
  letter-spacing: -0.01em !important;
}
.xstore-buy-trust__ico {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  background: #ffe6f0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
@media (min-width: 768px) {
  .xstore-buy-trust {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    padding: 10px !important;
  }
}

/* =========================================================
   7. Subcategories: compact, readable, not blurry
   ========================================================= */
#product-category .category-list,
#product-category .category-list.row,
#product-category .category-list.row-flex,
.category-list.row,
.category-list.row-flex {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 0 18px !important;
}
.category-list > [class*="col-"],
.category-list > div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}
.category-list__item,
a.category-list__item,
a.category-list__item.uni-item,
a.category-list__item.uni-item-bg {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 10px 12px 10px 14px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: 1px solid #eceef2 !important;
  border-left: 3px solid #e84080 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: #1f2328 !important;
  box-shadow: 0 2px 8px rgba(20, 16, 26, 0.04) !important;
  transform: none !important;
  filter: none !important;
}
.category-list__item:hover,
a.category-list__item:hover {
  transform: none !important;
  border-color: rgba(232, 64, 128, 0.35) !important;
  box-shadow: 0 4px 14px rgba(232, 64, 128, 0.1) !important;
  color: #e84080 !important;
}
/* Kill decorative blurry banner + FA glyph */
.category-list__item::before,
.category-list__item::after,
.category-list__item.uni-item-bg::before,
.category-list__item.uni-item-bg::after,
a.category-list__item::before,
a.category-list__item::after,
a.category-list__item.uni-item-bg::before,
a.category-list__item.uni-item-bg::after,
.category-list > [class*="col-"] .uni-item-bg::before,
.category-list > [class*="col-"] .uni-item-bg::after,
.category-list > div .uni-item-bg::before,
.category-list > div .uni-item-bg::after {
  content: none !important;
  display: none !important;
  background: none !important;
  height: 0 !important;
  width: 0 !important;
  font-size: 0 !important;
  box-shadow: none !important;
  position: static !important;
}
.category-list > [class*="col-"]:nth-child(6n+2) .category-list__item,
.category-list > div:nth-child(6n+2) .category-list__item { border-left-color: #8b5cf6 !important; }
.category-list > [class*="col-"]:nth-child(6n+3) .category-list__item,
.category-list > div:nth-child(6n+3) .category-list__item { border-left-color: #3b82f6 !important; }
.category-list > [class*="col-"]:nth-child(6n+4) .category-list__item,
.category-list > div:nth-child(6n+4) .category-list__item { border-left-color: #10b981 !important; }
.category-list > [class*="col-"]:nth-child(6n+5) .category-list__item,
.category-list > div:nth-child(6n+5) .category-list__item { border-left-color: #d97706 !important; }
.category-list > [class*="col-"]:nth-child(6n) .category-list__item,
.category-list > div:nth-child(6n) .category-list__item { border-left-color: #e84080 !important; }

.category-list__name {
  display: block !important;
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: inherit !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-line-clamp: unset !important;
  filter: none !important;
}
.category-list__img,
.category-list__item img {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  margin: 0 !important;
}

@media (max-width: 767px) {
  #product-category .category-list,
  #product-category .category-list.row,
  #product-category .category-list.row-flex,
  .category-list.row,
  .category-list.row-flex {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 768px) {
  #product-category .category-list,
  .category-list.row,
  .category-list.row-flex {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 992px) {
  #product-category .category-list,
  .category-list.row,
  .category-list.row-flex {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}
@media (min-width: 1200px) {
  #product-category .category-list,
  .category-list.row,
  .category-list.row-flex {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   8. Address: always show courier + postcode fields
   ========================================================= */
.dm-addr-courier,
#xd-addr-courier,
.dm-addr-courier[hidden],
#xd-addr-courier[hidden] {
  display: contents !important;
}
#xstore-postcode-wrap,
.dm-field--post,
.xd-addr-postal,
#xstore-postcode-wrap[hidden],
.dm-field--post[hidden] {
  display: flex !important;
  flex-direction: column !important;
  grid-column: span 4;
}
@media (max-width: 991px) {
  #xstore-postcode-wrap,
  .dm-field--post {
    grid-column: 1 / -1 !important;
  }
}