@charset "UTF-8";
/* =========================================================================
   YLLIME — Página do produto
   Galeria à esquerda, resumo à direita. Só carrega aqui.
   ========================================================================= */

/*
 * O respiro do topo era do invólucro do WooCommerce, que esta página não usa
 * mais. Entra aqui, senão a migalha nasce colada no cabeçalho.
 *
 * No pé não há espaço: quem fecha a página é a faixa cinza dos semelhantes,
 * e ela precisa encostar na borda do bloco para se ler como faixa. O
 * respiro até o rodapé já vem da margem dele.
 */
.product-page{padding-top:var(--s-6);padding-bottom:0}

.product-crumb{padding-block:var(--s-5) var(--s-6)}

.product-layout{
  display:grid;
  /* A coluna da foto leva o que sobra. Com o resumo em 440px a foto ficava
     mais baixa que ele, e sobrava um vão branco de uns 300px embaixo dela —
     além de tirar do grudado na rolagem o motivo de existir. */
  grid-template-columns:minmax(0,1fr) 400px;
  gap:clamp(2rem,4vw,3.5rem);
  align-items:start;
}

/*
 * O resumo acompanha a rolagem enquanto a galeria passa. `top` conta com o
 * cabeçalho fixo em cima; sem essa folga o nome do produto ficaria por baixo
 * dele.
 */
.product-summary{
  position:sticky;
  top:calc(var(--header-h, 88px) + var(--s-5));
}

@media (max-width:1000px){
  .product-layout{grid-template-columns:1fr;gap:var(--s-6)}
  .product-summary{position:static}
}


/* -------------------------------------------------------------------------
   Galeria
   ------------------------------------------------------------------------- */
.pgallery{display:flex;gap:var(--s-4);align-items:flex-start}

.pgallery__thumbs{
  list-style:none;margin:0;padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  flex:0 0 84px;
}
.pgallery__thumb{
  display:block;
  width:100%;
  padding:0;
  border:1px solid transparent;
  background:none;
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
  opacity:.72;
}
.pgallery__thumb:hover{opacity:1}
.pgallery__thumb.is-on{border-color:var(--c-green-700);opacity:1}
.pgallery__thumb:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}

.pgallery__stage{flex:1;min-width:0}

.pgallery__open{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:var(--c-canvas);
  position:relative;
  cursor:zoom-in;
}
.pgallery__open:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}

/* Empilhadas como no card: só a ativa tem opacidade. */
.pgallery__img{opacity:0;transition:opacity var(--dur) var(--ease)}
.pgallery__img.is-on{opacity:1}

.pgallery__hint{
  position:absolute;
  right:var(--s-4);bottom:var(--s-4);
  display:grid;place-items:center;
  width:38px;height:38px;
  background:var(--c-surface);
  color:var(--c-ink);
  opacity:0;
  transition:opacity var(--dur-fast) var(--ease);
}
@media (hover:hover){
  .pgallery__open:hover .pgallery__hint{opacity:1}
}
@media (hover:none){
  .pgallery__hint{opacity:1}
}

/* No celular as miniaturas viram fita horizontal embaixo da foto. */
@media (max-width:640px){
  .pgallery{flex-direction:column-reverse;gap:var(--s-3)}
  .pgallery__thumbs{
    flex:none;
    flex-direction:row;
    width:100%;
    overflow-x:auto;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
  }
  .pgallery__thumbs::-webkit-scrollbar{display:none}
  .pgallery__thumbs li{flex:0 0 72px}
}


/* -------------------------------------------------------------------------
   Tela cheia
   ------------------------------------------------------------------------- */
.lightbox{
  position:fixed;inset:0;
  z-index:calc(var(--z-drawer) + 10);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--lightbox-pad);
  background:rgb(28 27 25 / .94);
  opacity:0;
  transition:opacity var(--dur) var(--ease);
  --lightbox-pad:clamp(1rem,4vw,3rem);
}
.lightbox[data-open]{opacity:1}

/*
 * O teto de altura é escrito em viewport, não em porcentagem: dentro de um
 * container cujo tamanho depende do próprio conteúdo, `max-height:100%` não
 * tem contra o que resolver e o navegador ignora — a foto saía maior que a
 * tela e ficava com a base cortada.
 */
.lightbox__img{
  max-width:min(100%,1100px);
  max-height:calc(100dvh - var(--lightbox-pad) * 2);
  width:auto;
  object-fit:contain;
}

.lightbox__btn{
  position:absolute;
  display:grid;place-items:center;
  width:48px;height:48px;
  color:#FFFFFF;
  background:rgb(255 255 255 / .08);
  transition:background var(--dur-fast) var(--ease);
}
.lightbox__btn:hover{background:rgb(255 255 255 / .18)}
.lightbox__btn:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}

.lightbox__close{top:var(--s-5);right:var(--s-5)}
.lightbox__prev{left:var(--s-5);top:50%;translate:0 -50%}
.lightbox__next{right:var(--s-5);top:50%;translate:0 -50%}

.lightbox__n{
  position:absolute;
  bottom:var(--s-5);left:50%;
  translate:-50% 0;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  color:rgb(255 255 255 / .7);
  font-variant-numeric:tabular-nums;
}


/* -------------------------------------------------------------------------
   Resumo
   ------------------------------------------------------------------------- */
.product-eyebrow{
  display:inline-block;
  margin-bottom:var(--s-3);
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wider);
  text-transform:uppercase;
  color:var(--c-muted);
}
.product-eyebrow:hover{color:var(--c-green-700)}

.product-title{
  font-size:clamp(1.75rem,3vw,2.25rem);
  letter-spacing:var(--ls-tight);
  line-height:var(--lh-tight);
  text-wrap:balance;
  margin-bottom:var(--s-4);
}

.product-summary .price{margin-top:0}

/* Parcelamento e desconto no Pix vêm do Mercado Pago. A marcação é dele; o
   corpo e a cor são nossos, para não destoar do preço logo acima. */
.product-summary .wcpp-installments,
.product-summary .wcpp-discount{
  margin-top:var(--s-2);
  font-size:var(--t-sm);
  color:var(--c-muted);
}
.product-summary .wcpp-discount{color:var(--c-green-300)}
.product-summary .wcpp-installments *,
.product-summary .wcpp-discount *{font:inherit;color:inherit}

.woocommerce-product-details__short-description{
  margin-top:var(--s-5);
  padding-top:var(--s-5);
  border-top:1px solid var(--c-line-soft);
  color:var(--c-body);
}
.woocommerce-product-details__short-description p{max-width:52ch}
.woocommerce-product-details__short-description p + p{margin-top:var(--s-3)}


/* -------------------------------------------------------------------------
   Compra
   ------------------------------------------------------------------------- */
/* Quantidade e botão formam uma peça só: sem vão entre eles, a mesma altura
   e a borda do seletor encostando na do botão. */
.product-summary form.cart{
  display:flex;
  align-items:stretch;
  gap:0;
  margin-top:var(--s-6);
}

.product-summary form.cart .quantity{flex:0 0 auto;display:flex}

.product-summary form.cart .qty{
  height:var(--control-h);
  border-right:0;
}
.product-summary form.cart .qty__btn{width:44px;height:100%}
.product-summary form.cart input.qty__input{width:46px;height:100%}

.product-summary .single_add_to_cart_button{
  flex:1;
  height:var(--control-h);
  min-height:var(--control-h);
  padding-inline:var(--s-5);
  border:0;
  background:var(--c-green-700);
  color:#FFFFFF;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.product-summary .single_add_to_cart_button:hover{background:var(--c-ink)}
.product-summary .single_add_to_cart_button:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}
.product-summary .single_add_to_cart_button[disabled]{background:var(--c-line);color:var(--c-muted);cursor:default}
.product-summary .single_add_to_cart_button.is-busy{opacity:.6;cursor:wait}

.product-summary .stock.out-of-stock{
  margin-top:var(--s-5);
  padding:var(--s-3) var(--s-4);
  background:var(--c-canvas);
  font-size:var(--t-sm);
  color:var(--c-warn);
}


/* -------------------------------------------------------------------------
   Favoritar e comparar
   ------------------------------------------------------------------------- */
.product-lists{display:flex;gap:var(--s-6);margin-top:var(--s-6)}

.product-list-btn{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
  transition:color var(--dur-fast) var(--ease);
}
.product-list-btn:hover{color:var(--c-green-700)}
.product-list-btn.is-on{color:var(--c-green-700)}
.product-list-btn.is-on svg{fill:currentColor}
.product-list-btn[data-list="cmp"].is-on svg{fill:none}


/* -------------------------------------------------------------------------
   Garantias e ficha
   ------------------------------------------------------------------------- */
.product-trust{
  list-style:none;margin:var(--s-6) 0 0;padding:var(--s-5) 0 0;
  border-top:1px solid var(--c-line-soft);
  display:flex;flex-direction:column;gap:var(--s-3);
}
.product-trust li{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  font-size:var(--t-sm);
  color:var(--c-body);
}
.product-trust svg{flex:none;color:var(--c-green-700);stroke-width:1.15}

.product-meta{
  margin:var(--s-5) 0 0;
  padding-top:var(--s-5);
  border-top:1px solid var(--c-line-soft);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--s-2) var(--s-4);
  font-size:var(--t-xs);
}
.product-meta dt{
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
}
.product-meta dd{margin:0;color:var(--c-body)}
.product-meta a{color:var(--c-body)}
.product-meta a:hover{color:var(--c-green-700)}


/* -------------------------------------------------------------------------
   Cálculo de frete

   A marcação é do plugin dos Correios e não pode ser trocada. O que dá para
   fazer é tirar o estojo cinza dele e devolver o bloco à linguagem da
   página: filete em cima, rótulo em caixa alta, campo na altura padrão.
   ------------------------------------------------------------------------- */
.product-summary .containerCalculator{
  /* Margem de baixo explícita em zero: a do plugin colapsava com a do
     "Não sei meu CEP" logo abaixo, e vencia — mexer na margem do link não
     mudava nada, porque duas margens verticais adjacentes viram uma só, do
     tamanho da maior. */
  margin:var(--s-6) 0 0;
  padding:var(--s-6) 0 0;
  background:none;
  border:0;
  border-top:1px solid var(--c-line-soft);
  border-radius:0;
}

/*
 * Zera as margens de baixo do plugin. Sem isso o espaço entre o campo e o
 * "Não sei meu CEP" vinha de um valor que não é nosso, e qualquer ajuste
 * daqui virava tentativa e erro.
 */
.product-summary .containerCalculator > *:last-child,
.product-summary .containerCalculator .calculatorRow,
.product-summary .containerCalculator .row{margin-bottom:0}

.product-summary .containerCalculator p{
  margin:0 0 var(--s-3);
  max-width:none;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
}

.product-summary .containerCalculator .row,
.product-summary .containerCalculator .col-75{width:100%}

.product-summary .containerCalculator input[type="text"]{
  width:100%;
  height:var(--control-h);
  padding-inline:var(--s-4);
  border:1px solid var(--c-line);
  border-radius:0;
  background:var(--c-surface);
  font-size:var(--t-base);
}

.product-summary .containerCalculator button,
.product-summary .containerCalculator input[type="submit"]{
  margin-top:var(--s-3);
  height:var(--control-h);
  padding-inline:var(--s-5);
  border:1px solid var(--c-green-700);
  border-radius:0;
  background:none;
  color:var(--c-green-700);
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.product-summary .containerCalculator button:hover,
.product-summary .containerCalculator input[type="submit"]:hover{
  background:var(--c-green-700);
  color:#FFFFFF;
}

/*
 * O "Não sei meu CEP" é impresso pelo tema logo depois do bloco do plugin,
 * porque ele não tem gancho interno onde pendurar isso.
 *
 * Sem margem própria: os 16px que o plugin deixa abaixo do campo já bastam,
 * contra 32px até as ações. O link encosta no campo a que pertence.
 *
 * Só funciona porque a margem de baixo do plugin está zerada logo acima —
 * senão ela colapsaria com esta e venceria, e mexer aqui não mudaria nada.
 */
.cep-help{
  margin:0px 0 0;
  max-width:none;
  font-size:var(--t-xs);
}
.cep-help a{
  color:var(--c-muted);
  border-bottom:1px solid currentColor;
}
.cep-help a:hover{color:var(--c-green-700)}

.product-summary .resultado-frete{margin-top:var(--s-4);font-size:var(--t-sm)}
.product-summary .resultado-frete table{width:100%;font-size:var(--t-sm)}
.product-summary .resultado-frete th,
.product-summary .resultado-frete td{
  padding:var(--s-2) 0;
  border-bottom:1px solid var(--c-line-soft);
  text-align:left;
  font-weight:400;
}


/* -------------------------------------------------------------------------
   Abas de conteúdo
   ------------------------------------------------------------------------- */
/* Espaço nos dois lados: em cima separa do resumo, embaixo evita que o
   texto encoste na faixa cinza dos semelhantes. */
.ptabs{margin-top:var(--section-y);padding-bottom:var(--section-y)}

.ptabs__list{
  display:flex;
  justify-content:center;
  gap:clamp(1.5rem,4vw,3rem);
  border-bottom:var(--hairline);
  /* Rola de lado quando os rótulos não couberem, em vez de quebrar em duas
     linhas e desalinhar o filete. */
  overflow-x:auto;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.ptabs__list::-webkit-scrollbar{display:none}

.ptabs__tab{
  flex:none;
  padding:var(--s-4) 0;
  margin-bottom:-1px;
  border-bottom:2px solid transparent;
  font-family:inherit;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
  white-space:nowrap;
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.ptabs__tab:hover{color:var(--c-ink)}
.ptabs__tab[aria-selected="true"]{color:var(--c-ink);border-bottom-color:var(--c-ink)}
.ptabs__tab:focus-visible{outline:2px solid var(--c-focus);outline-offset:-2px}

.ptabs__panel{
  padding-top:var(--s-7);
  max-width:70ch;
  margin-inline:auto;
}
/* Texto centralizado, como as abas acima dele. A tabela de atributos fica
   de fora: linha de ficha técnica se lê alinhada à esquerda. */
.ptabs__panel p{color:var(--c-body);max-width:none;text-align:center}
.ptabs__panel p + p{margin-top:var(--s-4)}

/* A tabela de atributos que o WooCommerce imprime na aba de material */
.ptabs__panel .woocommerce-product-attributes{width:100%}
.ptabs__panel .woocommerce-product-attributes th,
.ptabs__panel .woocommerce-product-attributes td{
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--c-line-soft);
  text-align:left;
  font-size:var(--t-sm);
  font-weight:400;
}
.ptabs__panel .woocommerce-product-attributes th{
  width:180px;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  font-size:var(--t-xs);
  color:var(--c-muted);
}
.ptabs__panel .woocommerce-product-attributes p{margin:0}


/* -------------------------------------------------------------------------
   Relacionados
   ------------------------------------------------------------------------- */
/* Nada aqui: a vitrine em carrossel traz o próprio espaçamento de seção. */