/* 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: var(--accent);
}

.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: var(--accent);

  color: white;

  cursor: pointer;

  transition: background-color 0.2s;
}

.wdcode-vitrine-wrapper .wdcode-swiper .swiper-slide form.cart .button:hover {
  background: var(--accent);
}

.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;
}