/* Mariana Rui, pagina da peca igual ao prototipo. Limitless, 22/10/2026.
   Par do static/js/mr-produto.js. Referencia: loja/css/estilo.css, pagina da
   peca. As classes do prototipo (.ficha-fotos, .opcao, .campo, .certificado,
   .medida, .estoque-linha) ja moram no mr-loja.css; aqui fica so o encaixe
   delas no formulario da Nuvemshop e o que esconde o desenho antigo.
   Tudo que esconde coisa da loja depende de .mr-peca-pronta, que o JS so poe
   depois de montar: sem o JS, a pagina antiga continua inteira. */

/* ------------------------------------------------------------- moldura */

.mr-produto{padding-top:0}
.mr-caminho-env{padding-top:0}
.mr-caminho[hidden]{display:none}
.mr-produto .caminho a{color:inherit;text-decoration:none}
.mr-produto .mr-produto-grade{padding-top:var(--e5)}
.mr-peca-pronta .mr-produto-ficha .page-header{display:none}
.mr-produto [hidden]{display:none !important}
.mr-produto .mr-escondido{display:none !important}

/* coluna da decisao presa na rolagem, no computador */
@media (min-width:900px){
  .mr-produto .mr-produto-ficha{position:sticky;top:96px}
}

/* ------------------------------------------------------------- galeria */

.mr-galeria-pronta .mr-produto-fotos > .row[data-store^="product-image-"]{display:none}
.mr-produto .ficha-foto img,.mr-produto .ficha-mini img{display:block}
.mr-produto .ficha-mini{cursor:pointer;color:inherit;font:inherit}
.mr-produto .medida svg{display:block}

/* ------------------------------------------------------- topo da ficha */

.mr-produto .mr-ficha-topo{margin:0 !important}
.mr-produto .ficha-familia{
  margin:0 0 var(--e3);color:var(--grafite);
  font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
}
.mr-produto .ficha-nome{
  margin:0;font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:200;line-height:1.1;
  letter-spacing:-.02em;text-transform:none;text-wrap:balance;
}
.mr-produto .mr-selo-material{
  display:inline-flex;align-items:center;gap:6px;margin-top:var(--e4);
  padding:6px 11px;border:1px solid var(--agua);background:var(--agua-veu);color:var(--tinta);
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
/* o seletor de banho do colar com nome, logo abaixo do nome */
.mr-produto .mr-ficha-topo .banho-escolha{margin:var(--e4) 0 0}

/* --------------------------------------------------------------- preco */

.mr-produto .price-container{margin-top:var(--e5);padding-top:var(--e5);border-top:1px solid var(--linha)}
.mr-produto .price-container > .mb-3{margin:0 !important;display:flex;flex-direction:column;align-items:flex-start}
.mr-produto .price-container > .mb-3 > span{display:block !important}
.mr-produto .price-container > .mb-3 > span:nth-child(2){order:-1}
.mr-produto .price-container .js-price-display{
  font-size:1.9rem;font-weight:300;letter-spacing:-.01em;line-height:1.3;
  font-variant-numeric:tabular-nums;color:var(--tinta);
}
.mr-produto .price-container .js-compare-price-display{
  font-size:13px;font-weight:300;color:var(--grafite);text-decoration:line-through;line-height:1.4;
}
.mr-produto .price-container .js-compare-price-display::before{content:"De "}
.mr-produto .mr-parcela{font-size:13.5px;color:var(--grafite);margin-top:2px}
.mr-peca-pronta .js-product-payments-container{display:none !important}
.mr-peca-pronta .js-last-product{display:none !important}

/* ------------------------------------------------ inicial, tamanho, nome */

.mr-peca-pronta #product_form .js-product-variants{display:none !important}
.mr-produto #product_form{margin-top:0 !important}
.mr-produto .opcao{color:var(--tinta);font-family:var(--fonte);cursor:pointer}
/* 26/10: a regra de cima vencia a do botao escolhido e o numero sumia (preto no preto) */
.mr-produto .opcao[aria-pressed="true"]{color:var(--papel)}
.mr-produto .opcao.sem-estoque[aria-pressed="true"]{color:var(--tinta)}
.mr-produto .campo-cabeca .botao-linha{background:none;border:0;border-bottom:1px solid var(--linha-forte);border-radius:0;padding:0 0 3px;color:var(--tinta);font-family:var(--fonte);cursor:pointer;text-decoration:none}
.mr-produto .campo-cabeca .botao-linha:hover{border-bottom-color:var(--tinta)}
.mr-produto .quantidade button{background:none;border:0;border-radius:0;padding:0;color:var(--tinta);font-family:var(--fonte);cursor:pointer}
.mr-produto .quantidade span{font-size:15px}
.mr-produto .mr-pz-campo label.rotulo{display:block;margin:0}
.mr-produto .mr-pz-campo .entrada{font-family:var(--fonte);border-radius:0;text-transform:uppercase;letter-spacing:.06em}

/* ---------------------------------------------------------------- botoes */

/* a linha da loja vira uma coluna so: comprar agora em cima, a sacola embaixo */
.mr-peca-pronta #product_form > .row{display:block;margin:var(--e5) 0 0 !important}
.mr-peca-pronta #product_form > .row > div{max-width:none;width:100%;flex:none;padding:0 !important}
.mr-peca-pronta #product_form > .row > .col-4{display:none !important}
.mr-peca-pronta #product_form > .row > div:not(.col-4):not(.col-12){display:grid;gap:var(--e3)}

.mr-produto #product_form .mr-comprar-agora{
  display:flex;align-items:center;justify-content:center;width:100%;margin:0;min-height:54px;padding:0 var(--e6);
  background:var(--tinta);color:var(--papel);border:1px solid var(--tinta);border-radius:0;
  font-family:var(--fonte);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transition:background .2s,color .2s;cursor:pointer;
}
.mr-produto #product_form .mr-comprar-agora:hover{background:var(--papel);color:var(--tinta)}
.mr-produto #product_form .mr-comprar-agora[disabled]{opacity:.6;cursor:wait}

/* adicionar a sacola: o segundo botao, vazado (.botao-secundario do prototipo) */
.mr-produto #product_form .btn-add-to-cart,
.mr-produto #product_form .js-addtocart{
  background:transparent !important;color:var(--tinta) !important;border:1px solid var(--tinta) !important;border-radius:0 !important;
  min-height:54px;margin:0 !important;box-shadow:none !important;
  font-family:var(--fonte);font-size:11.5px !important;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
}
.mr-produto #product_form .btn-add-to-cart:hover{background:var(--tinta) !important;color:var(--papel) !important}
.mr-produto #product_form .btn-add-to-cart[disabled],
.mr-produto #product_form .btn-add-to-cart.nostock{
  background:var(--linha) !important;border-color:var(--linha) !important;color:var(--grafite) !important;cursor:not-allowed;opacity:1;
}
/* o colar com nome tem um botao so, cheio */
.mr-peca-nome #product_form .btn-add-to-cart,
.mr-peca-nome #product_form .js-addtocart{background:var(--tinta) !important;color:var(--papel) !important}
.mr-peca-nome #product_form .btn-add-to-cart:hover{background:var(--papel) !important;color:var(--tinta) !important}

/* favoritos e Medidas e cuidados, embaixo dos botoes */
.mr-produto .mr-guardar-linha{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);margin-top:var(--e2);flex-wrap:wrap}
.mr-produto .mr-guardar-linha .mr-produto-guardar{margin:0}
.mr-produto .mr-guardar-linha .botao-linha{color:var(--tinta);text-decoration:none}
.mr-produto .mr-guardar-linha .coracao{cursor:pointer;padding:0}

/* ---------------------------------------------------------------- entrega */

.mr-produto .mr-entrega{margin-top:var(--e6);padding-top:var(--e5);border-top:1px solid var(--linha)}
.mr-produto .mr-entrega-rotulo{margin:0 0 var(--e3)}

/* --------------------------------------------------- ficha e descricao */

.mr-produto .mr-ficha-rotulo{margin:0 0 var(--e3)}
#mr-ficha-peca,#mr-sobre-peca{scroll-margin-top:110px}
.mr-produto .certificado dl{margin:0}
.mr-produto .mr-descricao{padding:0 !important;margin-top:var(--e6)}
.mr-produto .mr-sobre-rotulo{margin:0 0 var(--e3)}
.mr-produto .mr-sobre-texto p{color:var(--grafite);font-size:15px;line-height:1.7;margin:0 0 var(--e3)}
.mr-produto .mr-descricao .user-content{color:var(--grafite)}

/* ---------------------------------------------------- guia de tamanhos */

.mr-guia{z-index:10000}
.mr-guia-cabeca{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--e4)}
.mr-guia-cabeca .titulo{font-size:1.5rem;margin:0 0 var(--e4)}
.mr-guia-rotulo{margin-bottom:var(--e4)}
.mr-guia-fim{margin-top:20px}
.mr-guia .botao-linha{background:none;border:0;border-bottom:1px solid var(--linha-forte);padding:0 0 3px;cursor:pointer;color:var(--tinta);font-family:var(--fonte)}

/* -------------------------------------------- relacionados, Combina com */

#related-products .products-section-title-container{text-align:left}
#related-products .mr-relacionados-rotulo{margin:0 0 var(--e3)}
#related-products .products-section-title{text-align:left;font-size:1.6rem;font-weight:200;line-height:1.08;letter-spacing:-.018em;text-transform:none}
#related-products .peca-comprar{display:none !important}