/* Styles that follow WooCommerce structure but scoped to the plugin wrapper */
.wdcode-vitrine-wrapper {
  position: relative;
}

/* Swiper structure (server-rendered block uses swiper classes). Provide a grid fallback
   so layout works even if Swiper JS is not initialized, and to respect --cols/--gap. */
.wdcode-vitrine-wrapper .wdcode-swiper {
  width: 100%;
  overflow: hidden;
  padding: 12px 10px;
}

.wdcode-vitrine-wrapper .wdcode-swiper .swiper-wrapper {
  /* Use grid as a graceful fallback and to allow CSS vars to control columns/gap */
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: var(--gap, 12px);
}
.wdcode-vitrine-wrapper .wdcode-swiper .swiper-slide:hover {
  transform: scale(1.05);
  border-color: #325ca8;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.wdcode-vitrine-wrapper .wdcode-swiper .swiper-slide {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 10px;
  box-sizing: border-box;
  text-align: left;
  border: 1px solid #e0e0e0;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

/* When Swiper initializes it applies transforms and expects the wrapper to be a flex/translate
   container. Switch to flex layout only when Swiper is active to avoid the grid interfering
   with the JS-driven carousel. */
.wdcode-vitrine-wrapper .wdcode-swiper.swiper-initialized .swiper-wrapper {
  display: flex;
  grid-template-columns: none;
  gap: 0; /* Swiper manages spacing via slides and spaceBetween */
}

.wdcode-vitrine-wrapper .wdcode-swiper.swiper-initialized .swiper-slide {
  /* Allow Swiper to size slides; keep visual styles */
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

.wdcode-vitrine-wrapper
  .wdcode-swiper
  .swiper-slide
  .woocommerce-loop-product__link {
  text-decoration: none;
}

/* Make sure images and titles inside slides follow the same rules as the grid items */
.wdcode-vitrine-wrapper .wdcode-swiper .swiper-slide img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 8px auto;
}

.wdcode-vitrine-wrapper .wdcode-swiper .swiper-slide .woocommerce-loop-product__title {
  font-size: 14px;
  margin: 0 0 6px 0;
  height: 51px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* número de linhas desejadas */
  -webkit-box-orient: vertical;
}

.wdcode-vitrine-wrapper .wdcode-swiper .swiper-slide .price {
  display: block;
  margin-bottom: 8px;
}

.wdcode-vitrine-wrapper .wdcode-swiper .swiper-slide form.cart {
  display: flex;
  align-items: center;
}

.wdcode-vitrine-wrapper .wdcode-swiper .swiper-slide form.cart .quantity {
  position: relative;
}

.wdcode-vitrine-wrapper
  .wdcode-swiper
  .swiper-slide
  form.cart
  .quantity
  input[type="number"] {
  width: 100%;
  min-height: 35px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  /* Allow native number input controls (spinners) to show in browsers.
     Some themes or previous code set appearance: textfield which hides the
     native up/down arrows; switching to auto restores them. */
  -moz-appearance: auto;
  appearance: auto;
  -webkit-appearance: auto;
}

/* Keep native spinners visible. Previously these rules hid WebKit spinners;
   removing them ensures browser default arrows (up/down) are shown. */

.wdcode-vitrine-wrapper .wdcode-swiper .swiper-slide form.cart .button {
  flex: 1;
  min-height: 35px;
  padding: 0 15px;
  border: none;
  border-radius: 4px;
  background: #325ca8;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

.wdcode-vitrine-wrapper .wdcode-swiper .swiper-slide form.cart .button:hover {
  background: #264a87;
}

.wdcode-vitrine-wrapper .swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, -35px);
  right: auto;
}

.wdcode-vitrine-wrapper .swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: "prev";
}

.wdcode-vitrine-wrapper .swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, -35px);
  left: auto;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: "next";
}
.wdcode-vitrine-wrapper .swiper-horizontal > .swiper-pagination-bullets {
  bottom: var(--swiper-pagination-bottom, -20px);
}
.wdcode-vitrine-wrapper .view_product_button {
  display: inline-block;
  text-align: center;
  background: #666;
  color: #fff;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s ease;
}
.wdcode-vitrine-wrapper .view_product_button:hover {
  background: #333;
}

/* Responsive */
@media (max-width: 782px) {
  .wdcode-vitrine-wrapper ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
  .wdcode-vitrine-wrapper .wdcode-swiper .swiper-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  .wdcode-vitrine-wrapper .swiper-button-prev,
  .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 0px);
    right: auto;
  }

  .wdcode-vitrine-wrapper .swiper-button-next,
  .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 0px);
    left: auto;
  }
}

/* Force native number spinners visible (override theme or global rules)
   This is intentionally specific to avoid affecting other inputs on the site. */
.wdcode-vitrine-wrapper
  .wdcode-swiper
  .swiper-slide
  form.cart
  .quantity
  input[type="number"] {
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  appearance: auto !important;
}
.wdcode-vitrine-wrapper
  .wdcode-swiper
  .swiper-slide
  form.cart
  .quantity
  input[type="number"]::-webkit-inner-spin-button,
.wdcode-vitrine-wrapper
  .wdcode-swiper
  .swiper-slide
  form.cart
  .quantity
  input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: inner-spin-button !important;
  display: block !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
}