/* =========================================================
   tahm.ee — POOD / Shop + Search (CLEAN)
   File: mu-plugins/tahm-core/modules/tahm-shop/tahm-shop.css

   Goals:
   1) Stable product grid (desktop + mobile)
   2) Mobile: no horizontal drag
   3) Mobile paddings: 8px, remove inner paddings
   4) Fix Woo pseudo-elements that create empty grid slot
   Applies: shop archive + categories + tags + search
   ========================================================= */


/* =========================================================
   1) PRODUCT GRID — single source of truth
   ========================================================= */

body.post-type-archive-product .woocommerce ul.products,
body.tax-product_cat .woocommerce ul.products,
body.tax-product_tag .woocommerce ul.products,
body.search .woocommerce ul.products,
body.search-results .woocommerce ul.products,
body.search-no-results .woocommerce ul.products{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;

  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Items: disable Woo float layout */
body.post-type-archive-product .woocommerce ul.products > li.product,
body.tax-product_cat .woocommerce ul.products > li.product,
body.tax-product_tag .woocommerce ul.products > li.product,
body.search .woocommerce ul.products > li.product,
body.search-results .woocommerce ul.products > li.product,
body.search-no-results .woocommerce ul.products > li.product{
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  min-width: 0 !important;
  display: block !important;
}

/* Titles: avoid letter-by-letter wrap */
body.post-type-archive-product .woocommerce .woocommerce-loop-product__title,
body.tax-product_cat .woocommerce .woocommerce-loop-product__title,
body.tax-product_tag .woocommerce .woocommerce-loop-product__title,
body.search .woocommerce .woocommerce-loop-product__title,
body.search-results .woocommerce .woocommerce-loop-product__title,
body.search-no-results .woocommerce .woocommerce-loop-product__title{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Breakpoints */
@media (max-width: 1200px){
  body.post-type-archive-product .woocommerce ul.products,
  body.tax-product_cat .woocommerce ul.products,
  body.tax-product_tag .woocommerce ul.products,
  body.search .woocommerce ul.products,
  body.search-results .woocommerce ul.products,
  body.search-no-results .woocommerce ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 900px){
  body.post-type-archive-product .woocommerce ul.products,
  body.tax-product_cat .woocommerce ul.products,
  body.tax-product_tag .woocommerce ul.products,
  body.search .woocommerce ul.products,
  body.search-results .woocommerce ul.products,
  body.search-no-results .woocommerce ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* Keep 2 columns on phones (your requirement) */
@media (max-width: 768px){
  body.post-type-archive-product .woocommerce ul.products,
  body.tax-product_cat .woocommerce ul.products,
  body.tax-product_tag .woocommerce ul.products,
  body.search .woocommerce ul.products,
  body.search-results .woocommerce ul.products,
  body.search-no-results .woocommerce ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* Only ultra-narrow: 1 column */
@media (max-width: 330px){
  body.post-type-archive-product .woocommerce ul.products,
  body.tax-product_cat .woocommerce ul.products,
  body.tax-product_tag .woocommerce ul.products,
  body.search .woocommerce ul.products,
  body.search-results .woocommerce ul.products,
  body.search-no-results .woocommerce ul.products{
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   2) MOBILE LAYOUT HELPERS
   ========================================================= */

@media (max-width: 768px){

  /* Stop horizontal drag */
  html, body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  /* Outer padding = 8px */
  body.post-type-archive-product #content.site-content,
  body.tax-product_cat #content.site-content,
  body.tax-product_tag #content.site-content,
  body.search #content.site-content,
  body.search-results #content.site-content,
  body.search-no-results #content.site-content{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.post-type-archive-product.one-container .site-content,
  body.tax-product_cat.one-container .site-content,
  body.tax-product_tag.one-container .site-content,
  body.search.one-container .site-content,
  body.search-results.one-container .site-content,
  body.search-no-results.one-container .site-content{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Remove inner paddings (GeneratePress containers) */
  body.post-type-archive-product .inside-article,
  body.tax-product_cat .inside-article,
  body.tax-product_tag .inside-article,
  body.search .inside-article,
  body.search-results .inside-article,
  body.search-no-results .inside-article{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Main area should not add side paddings */
  body.post-type-archive-product #primary,
  body.post-type-archive-product main.site-main,
  body.tax-product_cat #primary,
  body.tax-product_cat main.site-main,
  body.tax-product_tag #primary,
  body.tax-product_tag main.site-main,
  body.search #primary,
  body.search main.site-main,
  body.search-results #primary,
  body.search-results main.site-main,
  body.search-no-results #primary,
  body.search-no-results main.site-main{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Sidebars/widgets: avoid horizontal scroll */
  #left-sidebar,
  .widget-area,
  .inside-left-sidebar{
    max-width: 100%;
    overflow-x: hidden !important;
  }
}


/* =========================================================
   3) FINAL FIX — remove Woo pseudo-elements in GRID
   (prevents empty first product slot)
   ========================================================= */

body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after,
body.tax-product_cat ul.products::before,
body.tax-product_cat ul.products::after,
body.tax-product_tag ul.products::before,
body.tax-product_tag ul.products::after,
body.search ul.products::before,
body.search ul.products::after,
body.search-results ul.products::before,
body.search-results ul.products::after,
body.search-no-results ul.products::before,
body.search-no-results ul.products::after{
  content: none !important;
  display: none !important;
}
/* =========================================================
   MOBILE FIX PACK — shop/search: no right пустоты, no drag, меньше паддинг
   ========================================================= */

/* 0) stop horizontal drag (apply to wrappers too) */
@media (max-width: 1023px){
  html, body,
  #page,
  .site,
  .site-content,
  .grid-container,
  #content.site-content{
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* 1) Remove “reserved sidebar space” on mobile/tablet
   (GeneratePress keeps .content-area 70% by default) */
@media (max-width: 1023px){

  /* hide sidebar */
  #left-sidebar,
  .is-left-sidebar,
  .is-right-sidebar,
  .widget-area{
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
  }

  /* make content full width */
  .site-content .content-area,
  #primary.content-area,
  #primary,
  main#main,
  main.site-main{
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }
}

/* 2) Make outer padding minimal on POOD / Search (mobile) */
@media (max-width: 768px){

  body.post-type-archive-product #content.site-content,
  body.tax-product_cat #content.site-content,
  body.tax-product_tag #content.site-content,
  body.search #content.site-content,
  body.search-results #content.site-content,
  body.search-no-results #content.site-content,
  body.post-type-archive-product.one-container .site-content,
  body.tax-product_cat.one-container .site-content,
  body.tax-product_tag.one-container .site-content,
  body.search.one-container .site-content,
  body.search-results.one-container .site-content,
  body.search-no-results.one-container .site-content{
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* GeneratePress sometimes adds padding here too */
  body.post-type-archive-product .inside-article,
  body.tax-product_cat .inside-article,
  body.tax-product_tag .inside-article,
  body.search .inside-article,
  body.search-results .inside-article,
  body.search-no-results .inside-article{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}