/* ============================================================
   Magnaverso - carousel.css (REESCRITO / SANEADO)
   - Estrutura do card (moldura + foto + tarja amarela + painel de preço)
   - Ajustes finos via variáveis CSS (desktop e mobile)
   - Correção de stacking context no hover (z-index do pricepanel não “muda”)
   ============================================================ */

/* ------------------------------
   Base / tipografia
   ------------------------------ */
.mgv_carousel{
  position: relative;
  font-family: "Roboto Condensed", sans-serif;
}

.mgv-carousel-empty{ padding:20px; text-align:center; }

/* ------------------------------
   Trilho (repeater)
   ------------------------------ */
.mgv_carousel .u-repeater,
.mgv_carousel .u-repeater-1{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:14px;
  padding:12px 8px;
}

/* Tamanho do item: Nicepage às vezes injeta flex-basis pequeno */
.mgv_carousel_1 .u-repeater-item,
.mgv_carousel_2 .u-repeater-item,
.mgv_carousel_3 .u-repeater-item,
.mgv_carousel_3 .mgv-card{
  flex: 0 0 282px !important;
  min-width: 282px !important;
  max-width: 282px !important;
  box-sizing: border-box !important;
}

/* ------------------------------
   Neutraliza “efeitos” do Nicepage
   (evita stacking contexts mudando no hover)
   ------------------------------ */
.mgv_carousel .u-repeater-item:hover,
.mgv_carousel .u-repeater-item:focus-within{
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  z-index: auto !important;
}

/* Se você mantém o card inteiro clicável com <a class="mgv-card__link"> */
.mgv_carousel .mgv-card__link{
  display:block;
  text-decoration:none !important;
  color:inherit;
}

/* Zera gradientes/cores herdadas do Nicepage dentro do card */
.mgv_carousel .mgv-card.u-gradient,
.mgv_carousel .mgv-card .u-container-layout{
  background: transparent !important;
  background-image: none !important;
}

/* ------------------------------
   Card (base)
   ------------------------------ */
.mgv_carousel .mgv-card__inner{
  position: relative;
  width: 282px;
  height: 475px;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible;

  /* IMPORTANTÍSSIMO: prende z-index internos do card
     e impede “troca” de camadas quando Nicepage aplica hover no item */
  isolation: isolate;

  /* Ajustes finos (desktop) */
  --img-top: 10px;
  --img-left: 12%;

  --title-top: 285px;
  --title-left: 65px;

  --price-top: 326px;
  --price-right: 5px;

  --was-bottom: 81px;
  --was-left: 21%;

  /* Se você usar o “botão” como DIV, controle aqui */
  --btn-bottom: 18px;

  transform: translateZ(0);
}

/* Moldura (PNG) */
.mgv_carousel .mgv-card__frame{
  position:absolute;
  inset:0;
  z-index: 2;
  background-image: url("../imgs/fundo-box-produtos.png") !important;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* Foto do produto */
.mgv_carousel .mgv-card__product-img{
  position:absolute;
  z-index: 14;
  width: 184px;
  height: 300px;
  left: var(--img-left);
  top: var(--img-top);
  transform: translate(-1px,1px);
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
  box-shadow: -2px 2px 3px rgba(0,0,0,.30);
  display:block;
}

/* Tarja amarela (título) */
.mgv_carousel .mgv-card__titlebox{
  position:absolute;
  z-index: 11;
  width: 187px;
  min-height: 78px;
  top: var(--title-top);
  left: var(--title-left);

  border-radius: 2px;
  box-shadow: -2px 2px 2px rgba(0,0,0,.20);
  background-image: linear-gradient(to bottom, #fff221, #ecc71d);

  /* Centraliza no default; se quiser base/esquerda use align-items/end no patch abaixo */
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 5px 6px;
}

.mgv_carousel .mgv-card__title{
  margin:25px 0 0 0 !important;
  text-align:center;
  font-family:"Oswald", sans-serif;
  font-weight:500;
  font-size: 1rem;
  line-height: 1.23;
  color:#111;
  text-transform: uppercase;

  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Painel de preço (gradiente) */
.mgv_carousel .mgv-card__pricepanel{
  position:absolute;
  z-index: 10; /* acima da moldura e do texto; abaixo da foto */
  width: 115px;
  height: 80px;
  top: var(--price-top);
  right: var(--price-right);

  border-radius:4px;
  box-shadow:-2px 2px 3px rgba(0,0,0,.35);
  background-image: linear-gradient(to bottom, #87d8dc 1%, #1c5f5b);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:10px;
}

.mgv_carousel .mgv-card__price-current{
  margin:35px 0 0 !important;
  text-align:center;
  font-family:"Oswald", sans-serif;
  font-weight:700;
  font-size:1.42rem;
  line-height:1;
  color:#fff;
  text-shadow:-2px 2px 2px rgba(0,0,0,.75);
}

/* “De R$ X por” (fora do painel) */
.mgv_carousel .mgv-card__was{
  position:absolute;
  z-index: 10;
  left: var(--was-left);
  bottom: var(--was-bottom);
  transform: translateX(-20%);

  margin:0 !important;
  font-family:"Roboto Condensed", sans-serif;
  font-size:1rem;
  font-weight:300;
  color: rgba(245,245,245,.92);
  text-shadow:-1px 1px 1px rgba(0,0,0,.55);
  white-space:nowrap;
}

/* ------------------------------
   Interação (hover)
   ------------------------------ */
.mgv_carousel .mgv-card:hover .mgv-card__inner,
.mgv_carousel .mgv-card:focus-within .mgv-card__inner{
  transform: translate(2px, -3px);
}

/* Se você ainda usa um "botão" como DIV dentro do card */
.mgv_carousel .mgv-card__btn{
  position:absolute;
  left:50%;
  bottom: var(--btn-bottom);
  transform: translateX(-50%);
  z-index: 3;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 8px;

  font-family:"Oswald", sans-serif;
  font-size:1.01rem;
  font-weight:600;
  text-transform:uppercase;

  border-radius:4px;
  border:1px solid rgba(255,255,255,.45);
  background-image: linear-gradient(to bottom, #0D6473, #044752);
  color:#fff;

  box-shadow:-2px 2px 3px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, background-image .2s ease;

  min-width: 120px;
  text-align:center;
  cursor: default;
}

/* Cor “avermelhada” no hover do card */
.mgv_carousel .mgv-card:hover .mgv-card__btn{
  background-image:none;
  background-color:#b11f2a;
}

/* ------------------------------
   Setas
   ------------------------------ */
.mgv_carousel .mgv-carousel-nav{
  position:absolute;
  top:30%;
  transform:translateY(-30%);
  z-index:30;
  opacity:.9;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;

  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}

.mgv_carousel .mgv-carousel-nav:hover{ opacity:1; }

.mgv_carousel .mgv-carousel-nav.prev,
.mgv_carousel .mgv-carousel-nav.mgv-carousel-nav--prev{ left:6px; }

.mgv_carousel .mgv-carousel-nav.next,
.mgv_carousel .mgv-carousel-nav.mgv-carousel-nav--next{ right:6px; }

.mgv_carousel .mgv-carousel-nav::after{ content:""; position:absolute; inset:-10px; }

.mgv_carousel .mgv-carousel-arrow{
  width:22px;
  height:22px;
  opacity:.95;
  display:block;
  filter: drop-shadow(-1px 1px 1px rgba(0,0,0,.40));
}

/* ------------------------------
   Responsivo
   ------------------------------ */
@media (max-width: 575px){
  .mgv_carousel_1 .u-repeater-item,
  .mgv_carousel_2 .u-repeater-item,
  .mgv_carousel_3 .u-repeater-item,
  .mgv_carousel_3 .mgv-card{
    flex: 0 0 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
  }

  .mgv_carousel .mgv-card__inner{
    width:300px;
    height:505px;

    /* Ajustes finos (mobile) */
    --img-top: 14px;
    --img-left: 10%;

    --title-top: 312px;
    --title-left: 42px;

    --price-top: 240px;
    --price-right: 8px;

    --was-bottom: 92px;
    --was-left: 22%;
  }

  .mgv_carousel .mgv-card__product-img{
    width:196px;
    height:320px;
  }
  .mgv_carousel .mgv-card__pricepanel{
	  top:calc(var(--price-top) + 119px);
	  left:calc(var(--price-right) + 148px);
  }
  .mgv_carousel .mgv-card__titlebox{
	  top:calc(var(--title-top) + 3px);
	  left:calc(var(--title-left) + 24px);
  }
  .mgv_carousel .mgv-card__was{
	  bottom: calc(var(--was-bottom) - 5px);
  }
  
}



/* ------------------------------
   PATCH OPCIONAL: título na base inferior esquerda do amarelo
   (ative se você quiser esse comportamento)
   ------------------------------ */
/*
.mgv_carousel .mgv-card__titlebox{
  align-items:flex-end;
  justify-content:flex-start;
}
.mgv_carousel .mgv-card__title{ text-align:left; }
*/