/* Mamoki — Sidebar shop/danh mục cố định khi cuộn sản phẩm.
 * Version 2: không dùng JS cũ, không dùng :has(), không dùng sticky wrapper mặc định của Flatsome.
 */

:root {
  --mamoki-shop-sidebar-offset: 96px;
}

body.admin-bar {
  --mamoki-shop-sidebar-offset: 128px;
}

@media only screen and (min-width: 850px) {
  body.mamoki-shop-sidebar-page .category-page-row,
  body.archive.woocommerce .category-page-row,
  body.post-type-archive-product .category-page-row,
  body.tax-product_cat .category-page-row,
  body.tax-product_tag .category-page-row {
    align-items: flex-start !important;
    overflow: visible !important;
  }

  /* Sidebar trái/phải của Flatsome là cột .large-3.hide-for-medium. */
  body.mamoki-shop-sidebar-page
    .category-page-row
    > .col.large-3.hide-for-medium,
  body.archive.woocommerce .category-page-row > .col.large-3.hide-for-medium,
  body.post-type-archive-product
    .category-page-row
    > .col.large-3.hide-for-medium,
  body.tax-product_cat .category-page-row > .col.large-3.hide-for-medium,
  body.tax-product_tag .category-page-row > .col.large-3.hide-for-medium {
    align-self: flex-start !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--mamoki-shop-sidebar-offset, 96px) !important;
    z-index: 30;
    height: auto !important;
  }

  /* Nếu Flatsome vẫn render wrapper sticky do cache/theme mod cũ, ép wrapper về trạng thái thường. */
  body.mamoki-shop-sidebar-page .category-page-row .is-sticky-column,
  body.archive.woocommerce .category-page-row .is-sticky-column,
  body.post-type-archive-product .category-page-row .is-sticky-column,
  body.tax-product_cat .category-page-row .is-sticky-column,
  body.tax-product_tag .category-page-row .is-sticky-column,
  body.mamoki-shop-sidebar-page .category-page-row .is-sticky-column__inner,
  body.archive.woocommerce .category-page-row .is-sticky-column__inner,
  body.post-type-archive-product .category-page-row .is-sticky-column__inner,
  body.tax-product_cat .category-page-row .is-sticky-column__inner,
  body.tax-product_tag .category-page-row .is-sticky-column__inner {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
  }

  /* Sidebar nhiều widget thì tự cuộn bên trong, không vượt quá chiều cao màn hình. */
  body.mamoki-shop-sidebar-page .category-page-row #shop-sidebar,
  body.archive.woocommerce .category-page-row #shop-sidebar,
  body.post-type-archive-product .category-page-row #shop-sidebar,
  body.tax-product_cat .category-page-row #shop-sidebar,
  body.tax-product_tag .category-page-row #shop-sidebar {
    max-height: calc(100vh - var(--mamoki-shop-sidebar-offset, 96px) - 18px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    padding-right: 4px;
  }

  body.mamoki-shop-sidebar-page
    .category-page-row
    #shop-sidebar::-webkit-scrollbar,
  body.archive.woocommerce .category-page-row #shop-sidebar::-webkit-scrollbar,
  body.post-type-archive-product
    .category-page-row
    #shop-sidebar::-webkit-scrollbar,
  body.tax-product_cat .category-page-row #shop-sidebar::-webkit-scrollbar,
  body.tax-product_tag .category-page-row #shop-sidebar::-webkit-scrollbar {
    width: 6px;
  }

  body.mamoki-shop-sidebar-page
    .category-page-row
    #shop-sidebar::-webkit-scrollbar-thumb,
  body.archive.woocommerce
    .category-page-row
    #shop-sidebar::-webkit-scrollbar-thumb,
  body.post-type-archive-product
    .category-page-row
    #shop-sidebar::-webkit-scrollbar-thumb,
  body.tax-product_cat
    .category-page-row
    #shop-sidebar::-webkit-scrollbar-thumb,
  body.tax-product_tag
    .category-page-row
    #shop-sidebar::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    border-radius: 999px;
  }
}