/*
 * Woo Product Grid - responsive overrides (loop only)
 */

/* =========================================================
   TEMPLE | WPG Product Loop (Dark UI)
   Accent: #c29a6a
   (Apenas cores — sem mexer em layout/spacing)
   ========================================================= */
.listagem-produtos {
  --ts-accent: #c29a6a;
  --ts-accent-hover: #d7b68f;

  --ts-surface-1: rgba(0, 0, 0, 0.22);
  --ts-surface-2: rgba(0, 0, 0, 0.32);
  --ts-inset: rgba(0, 0, 0, 0.38);

  --ts-border: rgba(194, 154, 106, 0.3);
  --ts-border-strong: rgba(194, 154, 106, 0.48);

  --ts-text-1: #f2e7d7;
  --ts-text-2: #e2d1bb;
  --ts-text-3: #cbb496;
  --ts-text-4: #a98f72;

  --ts-mark-bg: rgba(194, 154, 106, 0.22);

  color: var(--ts-text-2) !important;
}

.listagem-produtos.wpg-hide-cart-buttons .product .woocommerce-product-details__short-description {
  max-width: 100% !important;
}

.listagem-produtos.wpg-hide-cart-buttons .custom-add-to-cart,
.listagem-produtos.wpg-hide-cart-buttons .remove-from-cart {
  display: none !important;
}

.listagem-produtos .products li {
  background-color: var(--ts-surface-1) !important;
  border-color: var(--ts-border) !important;
}

#page #primary .hentry .entry-content .wpb-content-wrapper .listagem-produtos .vc_column_container .vc_column-inner .wpb_wrapper .woocommerce .products li {
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.35) !important;
}

.listagem-produtos .products li:hover {
  background-color: var(--ts-surface-2) !important;
  border-color: var(--ts-border-strong) !important;
}

.listagem-produtos .product h2,
.listagem-produtos .product h3,
.listagem-produtos .product .woocommerce-loop-product__title {
  color: var(--ts-text-1) !important;
}

.listagem-produtos .product .woocommerce-product-details__short-description {
  color: var(--ts-text-3) !important;
}

.listagem-produtos .product .quantidade-pecas {
  background-color: var(--ts-mark-bg) !important;
  border-color: var(--ts-border) !important;
  color: var(--ts-accent) !important;
}

.listagem-produtos .price,
.listagem-produtos .price bdi,
.listagem-produtos .woocommerce-Price-amount,
.listagem-produtos .woocommerce-Price-amount bdi,
.listagem-produtos .woocommerce-Price-currencySymbol {
  color: var(--ts-accent) !important;
}

.listagem-produtos .product .product-cart-items {
  color: var(--ts-accent) !important;
}

.listagem-produtos a {
  color: var(--ts-accent) !important;
}

.listagem-produtos a:hover {
  color: var(--ts-accent-hover) !important;
}

/* Cards should size from the grid; keep the original design intent (≈240px cards) */
.listagem-produtos .products li {
  /* Allow smaller cards on very small screens; enforce 240px from ~520px up (see media query below). */
  min-width: 0 !important;
  max-width: 240px !important;
  width: 100% !important;
  height: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  border-style: solid !important;
  border-width: 3px !important;
  border-color: var(--ts-border) !important;
  margin-bottom: 0 !important;
  float: none !important;
}

/* Keep border width always present to avoid layout shift when the product enters cart */
.listagem-produtos .products li.product-in-cart {
  border-color: var(--ts-accent) !important;
}

/* Fine-tune cart indicators alignment */
.page-content .product .product-in-cart-icon,
.listagem-produtos .product .product-in-cart-icon {
  top: 3px !important;
}

.page-content .product .product-cart-items,
.listagem-produtos .product .product-cart-items {
  top: -1px !important;
}

/*
  Responsive columns:
  - Mobile: 2
  - Small tablet landscape: 4
  - Small desktop: 5
  - Large desktop: 6
*/
.listagem-produtos .wpb_wrapper ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(12px, 2vw, 22px);
  row-gap: 40px !important;
  grid-row-gap: 40px !important;
  justify-content: start;
  justify-items: start;
  align-content: start;
  align-items: stretch;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 519px) {
  .listagem-produtos .wpb_wrapper ul.products {
    /* Mobile keeps the legacy image lift (~123px), so compensate to get ~30px visual row gap. */
    row-gap: 153px !important;
    grid-row-gap: 153px !important;
  }

  #page #primary .hentry .entry-content .wpb-content-wrapper .listagem-produtos .vc_column_container .vc_column-inner .wpb_wrapper .woocommerce ul.products {
    row-gap: 153px !important;
    grid-row-gap: 153px !important;
  }

  /* Keep mobile remove icon perfectly circular (avoid width/height mismatch from legacy rules). */
  .listagem-produtos .product .remove-from-cart .custom-remove-from-cart-icon {
    width: 35px !important;
    height: 35px !important;
    object-fit: contain !important;
  }

  /* Small mobile-only nudge for price alignment. */
  .listagem-produtos .product .price {
    margin-left: 3px !important;
  }
}

/* Override the very specific rule inherited from the original CSS */
#page #primary .hentry .entry-content .wpb-content-wrapper .listagem-produtos .vc_column_container .vc_column-inner .wpb_wrapper .woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: clamp(12px, 2vw, 22px) !important;
  row-gap: 40px !important;
  grid-row-gap: 40px !important;
  align-content: start !important;
  align-items: stretch !important;
  justify-content: start !important;
  justify-items: start !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* From ~520px up, enforce the 240px card minimum without horizontal overflow on very small phones */
@media (min-width: 520px) {
  .listagem-produtos .products li {
    min-width: 240px !important;
  }

  .listagem-produtos .wpb_wrapper ul.products {
    /* Legacy loop CSS lifts product images ~123px with negative margin.
       Compensate in the grid row gap so the visible gap between rows is ~40px. */
    grid-template-columns: repeat(2, 240px);
    justify-content: space-between;
    column-gap: 0 !important;
    row-gap: 163px !important;
    grid-row-gap: 163px !important;
    justify-items: start;
  }

  #page #primary .hentry .entry-content .wpb-content-wrapper .listagem-produtos .vc_column_container .vc_column-inner .wpb_wrapper .woocommerce ul.products {
    grid-template-columns: repeat(2, 240px) !important;
    justify-content: space-between !important;
    column-gap: 0 !important;
    row-gap: 163px !important;
    grid-row-gap: 163px !important;
    justify-items: start !important;
  }
}

@media (min-width: 860px) {
  .listagem-produtos .wpb_wrapper ul.products {
    grid-template-columns: repeat(3, 240px);
  }

  #page #primary .hentry .entry-content .wpb-content-wrapper .listagem-produtos .vc_column_container .vc_column-inner .wpb_wrapper .woocommerce ul.products {
    grid-template-columns: repeat(3, 240px) !important;
  }
}

@media (min-width: 1120px) {
  .listagem-produtos .wpb_wrapper ul.products {
    grid-template-columns: repeat(4, 240px);
  }

  #page #primary .hentry .entry-content .wpb-content-wrapper .listagem-produtos .vc_column_container .vc_column-inner .wpb_wrapper .woocommerce ul.products {
    grid-template-columns: repeat(4, 240px) !important;
  }
}

@media (min-width: 1380px) {
  .listagem-produtos .wpb_wrapper ul.products {
    grid-template-columns: repeat(5, 240px);
  }

  #page #primary .hentry .entry-content .wpb-content-wrapper .listagem-produtos .vc_column_container .vc_column-inner .wpb_wrapper .woocommerce ul.products {
    grid-template-columns: repeat(5, 240px) !important;
  }
}

@media (min-width: 1640px) {
  .listagem-produtos .wpb_wrapper ul.products {
    grid-template-columns: repeat(6, 240px);
  }

  #page #primary .hentry .entry-content .wpb-content-wrapper .listagem-produtos .vc_column_container .vc_column-inner .wpb_wrapper .woocommerce ul.products {
    grid-template-columns: repeat(6, 240px) !important;
  }
}

/* Interactive snap menu + related UI overrides */
#menu-interativo-custom {
  position: fixed;
  top: calc(100vh - 100px);
  z-index: 100;
  width: 100%;
  left: 0;
  display: none;
  display: flex;
  justify-content: center;
  font-family: var(--e-global-typography-text-font-family, inherit) !important;
  font-size: var(--e-global-typography-text-font-size, inherit);
  line-height: var(--e-global-typography-text-line-height, inherit);
  font-weight: var(--e-global-typography-text-font-weight, inherit);
}

#menu-interativo-custom .wpb_wrapper .wpb_content_element {
  margin-bottom: 0;
}

#menu-interativo-custom .wpb_wrapper .snap-menu::-webkit-scrollbar {
  display: none;
}

#menu-interativo-custom .wpb_wrapper .snap-menu {
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background-color: #c29a6a;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  position: relative;
  top: 15px;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none;
  display: inline-flex;
  width: fit-content;
  max-width: min(100%, 1060px);
  margin-left: auto;
  margin-right: auto;
  font-family: var(--e-global-typography-text-font-family, inherit) !important;
  font-size: var(--e-global-typography-text-font-size, inherit);
  line-height: var(--e-global-typography-text-line-height, inherit);
  font-weight: var(--e-global-typography-text-font-weight, inherit);
}

.snap-menu {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.snap-menu a {
  scroll-snap-align: start;
  display: flex;
  padding: 10px 20px;
  text-decoration: none;
  white-space: nowrap;
}

.snap-menu a.active {
  color: #007bff;
  font-weight: 700;
}

#menu-interativo-custom .snap-menu a {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 17px;
  padding-top: 15px;
  text-transform: none;
  color: #fff;
  outline: none;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: rgba(255, 255, 255, 0.15);
  font: inherit !important;
}

#menu-interativo-custom .snap-menu a.active {
  font-weight: 700;
}

#menu-interativo-custom .snap-menu .active {
  background-color: rgba(255, 255, 255, 0.3);
}

#page #primary .hentry .entry-content .wpb-content-wrapper #menu-interativo-custom .vc_column_container .vc_column-inner .wpb_wrapper .wpb_content_element .wpb_wrapper .snap-menu {
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#menu-interativo-custom .snap-menu a:last-child {
  border-right-style: none;
  padding-right: 20px;
}

#menu-interativo-custom .snap-menu a:first-child {
  padding-left: 20px;
}

.page-content .product .custom-add-to-cart-icon {
  background-color: transparent;
}

.page-content .product .custom-add-to-cart {
  background-color: transparent !important;
}

@media (max-width: 1023px) {
  #menu-interativo-custom .snap-menu a {
    text-transform: uppercase !important;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 15px !important;
  }

  #menu-interativo-custom {
    box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
    max-width: 100%;
    position: fixed;
    top: 0;
    justify-content: initial;
  }

  #menu-interativo-custom .wpb_wrapper .snap-menu {
    max-width: 100%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    top: 0;
    background-color: #c29a6a;
  }

  .snap-menu a img {
    filter: brightness(0) invert(1);
    width: 20px;
    height: 20px;
    margin-right: 5px;
    position: relative;
    top: 0;
  }

  #menu-interativo-custom .vc_column_container .vc_column-inner .wpb_wrapper .wpb_content_element .wpb_wrapper .snap-menu a {
    padding-right: 15px !important;
  }
}

@media (max-width: 900px) {
  .snap-menu a img {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }

  #menu-interativo-custom .snap-menu a {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 420px) {
  .page-content .elementor .elementor-element .elementor-element .elementor-widget-wpg_product_grid .elementor-widget-container .listagem-produtos .vc_column_container .vc_column-inner .wpb_wrapper .woocommerce .products .product .product-image-wrapper .product-image-wrapper .remove-from-cart .custom-remove-from-cart-icon {
    height: 35px !important;
  }
}

@media (min-width: 1025px) {
  .snap-menu a img {
    display: none;
  }
}