@charset "UTF-8";
/* =========================================================================
   YLLIME — Loja
   Card de produto, preço e carrossel. Carregada na home e em toda página
   de loja, porque o card aparece nos dois lugares.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Card de produto
   Sem borda, sem sombra. A foto é que vende — os controles só aparecem
   quando o ponteiro chega perto, e no toque ficam sempre visíveis.
   ------------------------------------------------------------------------- */
.card{display:flex;flex-direction:column;height:100%}

/* overflow oculto: a barra de comprar entra e sai deslizando, e sem o
   corte ela passa por cima do título no caminho de volta. */
.card__frame{position:relative;overflow:hidden}
.card__media{background:var(--c-canvas)}

/* As fotos ficam empilhadas; só uma tem is-on por vez. pointer-events:none
   deixa o ponteiro chegar ao container, que é quem mede a posição do mouse
   para decidir qual foto mostrar. */
.card__img{opacity:0;transition:opacity var(--dur-slow) var(--ease);pointer-events:none}
.card__img.is-on{opacity:1}

.card__text{display:block}
.card__title{
  margin-top:var(--s-4);
  font-size:var(--t-sm);
  font-weight:400;
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-ink);
}
.card__text:hover .card__title{color:var(--c-green-700)}


/* ---- Bolinhas da galeria ---- */
.card__dots{
  position:absolute;
  left:0;right:0;bottom:var(--s-3);
  z-index:2;
  display:flex;
  justify-content:center;
  gap:6px;
  list-style:none;margin:0;padding:0;
}
.card__dot{
  display:block;
  width:22px;height:2px;
  border:0;padding:0;
  background:rgb(28 27 25 / .18);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.card__dot.is-on{background:var(--c-ink)}
.card__dot:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}


/* ---- Favoritar e comparar ---- */
.card__tools{
  position:absolute;
  top:var(--s-3);right:var(--s-3);
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
}

.card__tool{
  display:grid;place-items:center;
  width:34px;height:34px;
  border:0;
  background:var(--c-surface);
  color:var(--c-body);
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease),
             opacity var(--dur-fast) var(--ease),
             translate var(--dur) var(--ease);
}
.card__tool:hover{color:var(--c-green-700)}
.card__tool.is-on{background:var(--c-green-700);color:#fff}
.card__tool:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}

/* O coração cheio quando marcado: o contorno sozinho não diz se está ligado. */
.card__tool[data-list="fav"].is-on svg{fill:currentColor}


/* ---- Barra de comprar ---- */
.card__buy{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:3;
}

.card__buy-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  width:100%;
  min-height:44px;
  padding:0 var(--s-3);
  border:0;
  /* Mesmo verde do botão da página do produto: é a mesma ação, e vê-las em
     tons diferentes leria como descuido. */
  background:var(--c-green-700);
  color:#fff;
  font-family:inherit;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.card__buy-btn:hover{background:var(--c-ink)}
.card__buy-btn:focus-visible{outline:2px solid var(--c-focus);outline-offset:-4px}
.card__buy-btn.is-off{background:var(--c-line);color:var(--c-muted);cursor:default}
.card__buy-btn.is-busy{opacity:.6;cursor:wait}

/*
 * Onde existe ponteiro, os controles entram só no hover. Onde não existe —
 * celular e tablet — eles ficam de pé o tempo todo: um botão que só aparece
 * no hover é um botão que não existe no toque.
 */
@media (hover:hover){
  .card__tools,
  .card__buy{
    opacity:0;
    transition:opacity var(--dur) var(--ease);
  }
  .card__buy{translate:0 100%}
  .card__tools{translate:8px 0}

  .card__frame:hover .card__tools,
  .card__frame:hover .card__buy,
  .card__frame:focus-within .card__tools,
  .card__frame:focus-within .card__buy{
    opacity:1;
    translate:0 0;
  }

  /* As bolinhas sobem para não ficarem escondidas atrás da barra —
     justamente enquanto se percorre a galeria é que elas fazem falta. */
  .card__dots{transition:translate var(--dur) var(--ease)}
  .card__frame:hover .card__dots,
  .card__frame:focus-within .card__dots{translate:0 -44px}
}

@media (prefers-reduced-motion:reduce){
  .card__buy,.card__tools,.card__dots{translate:none !important}
}


/* -------------------------------------------------------------------------
   Preço
   ------------------------------------------------------------------------- */
/* O corpo do bloco é a âncora: desconto e preço antigo são medidos em em, a
   partir dela. Trocar o tamanho aqui reescala o conjunto inteiro. */
.price{margin-top:var(--s-2);font-size:var(--t-base)}

.price__row{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}

.price__now{
  font-size:1em;
  font-weight:500;
  color:var(--c-green-700);
}

.price__off{
  font-size:.75em;
  font-weight:400;
  color:var(--c-faint);
}

.price__was{
  display:block;
  margin-top:2px;
  font-size:.85em;
  color:var(--c-faint);
  text-decoration:line-through;
  text-decoration-thickness:1px;
}

/* O Woo embrulha o valor em <bdi>; herdamos o tipo do contexto */
.price bdi{font:inherit;color:inherit}

/* Versão grande, na página do produto. Só o preço ativo cresce: em em puro,
   o riscado chegaria a 24px e ficaria quase do tamanho da oferta. */
.price--lg{font-size:1.75rem}
.price--lg .price__now{letter-spacing:var(--ls-tight)}
.price--lg .price__off{font-size:var(--t-sm)}
/* Aqui o riscado vem antes: a folga de 2px muda de lado. */
.price--lg .price__was{font-size:var(--t-base);margin:0 0 2px}


/* -------------------------------------------------------------------------
   Carrossel — scroll-snap nativo
   ------------------------------------------------------------------------- */
.carousel{position:relative}

.carousel__track{
  display:flex;
  gap:var(--grid-gap);
  padding-block:2px;              /* respiro para o anel de foco             */
  list-style:none;
  /* Sem `margin:0` aqui: isso anularia o margin-inline:auto do .container e
     jogaria a trilha para a esquerda, desalinhada do cabeçalho da seção. */
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;           /* a barra some; as setas fazem o papel    */
  overscroll-behavior-x:contain;
}
.carousel__track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){
  .carousel__track{scroll-behavior:auto}
}

.carousel__item{
  flex:0 0 auto;
  width:calc((100% - var(--grid-gap) * 3) / 4);
  scroll-snap-align:start;
}
@media (max-width:1024px){
  .carousel__item{width:calc((100% - var(--grid-gap) * 2) / 3)}
}
@media (max-width:760px){
  .carousel__item{width:calc((100% - var(--grid-gap)) / 2)}
}
@media (max-width:480px){
  .carousel__item{width:72%}
}

.carousel__nav{display:flex;gap:var(--s-2)}
.carousel__arrow{
  border:1px solid var(--c-green-700);
  color:var(--c-green-700);
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             opacity var(--dur-fast) var(--ease);
}
.carousel__arrow:hover{background:var(--c-green-700);color:#FFFFFF}
.carousel__arrow[disabled]{opacity:.28;cursor:default}
.carousel__arrow[disabled]:hover{background:transparent;color:var(--c-green-700)}

.carousel__cta{margin-top:var(--s-7);display:flex;justify-content:center}




/* =========================================================================
   Página da loja
   ========================================================================= */

/* Faixa de abertura: cinza claro, de borda a borda, texto centralizado. */
.shop-head{
  background:var(--c-canvas);
  border-bottom:var(--hairline);
  padding-block:clamp(2rem,5vw,3.25rem);
  margin-bottom:var(--section-y);
  text-align:center;
}
.shop-head__title{font-size:var(--t-xl);margin:0;text-wrap:balance}
.shop-head__text{
  color:var(--c-muted);
  font-size:var(--t-sm);
  max-width:58ch;
  margin:var(--s-3) auto 0;
}
.shop-head__text p{max-width:none}

.shop-crumb{
  margin-bottom:var(--s-3);
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
}
.shop-crumb a{color:var(--c-muted)}
.shop-crumb a:hover{color:var(--c-green-700)}
.shop-crumb__sep{margin-inline:var(--s-2);color:var(--c-line)}

.shop-layout{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:clamp(2rem,4vw,3.5rem);
  align-items:start;
  padding-bottom:var(--section-y);
}
.shop-main{min-width:0}


/* -------------------------------------------------------------------------
   Painel de filtros

   Sem barra superior: ordenação, cores, categorias e preço moram todos na
   coluna da esquerda, separados por filetes.
   ------------------------------------------------------------------------- */
.filters__head{display:none}

.filters__body{display:flex;flex-direction:column}

.filters__clear{
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
  align-self:flex-start;
}
.filters__clear:hover{color:var(--c-green-700)}
/* Sem nada filtrado o link não some — sumir e voltar embaralha a coluna a
   cada clique. Fica apagado e sem alvo de clique. */
.filters__clear.is-off{opacity:.35;pointer-events:none}

.filters__sort{margin-top:var(--s-4)}
.filters__sort select{
  width:100%;
  height:44px;
  font-size:var(--t-sm);
  border-color:var(--c-line);
}

.filter{
  padding-top:var(--s-5);
  margin-top:var(--s-5);
  border-top:var(--hairline);
}

.filter__title{
  display:block;
  margin-bottom:var(--s-4);
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-ink);
}

.filter__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-1)}

.filter__opt{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-1) 0;
  font-size:var(--t-sm);
  color:var(--c-body);
}
.filter__opt:hover{color:var(--c-ink)}
.filter__opt:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}

/* Caixa de marcar desenhada em CSS: o filtro é um link, não um checkbox,
   para funcionar sem JavaScript e ser compartilhável por URL. */
.filter__box{
  flex:none;
  width:16px;height:16px;
  border:1px solid var(--c-line);
  background:var(--c-surface);
  position:relative;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.filter__opt:hover .filter__box{border-color:var(--c-muted)}
.filter__opt.is-on .filter__box{background:var(--c-green-700);border-color:var(--c-green-700)}
.filter__opt.is-on .filter__box::after{
  content:"";
  position:absolute;
  left:4px;top:1px;
  width:5px;height:9px;
  border:solid #fff;
  border-width:0 1.5px 1.5px 0;
  rotate:45deg;
}
.filter__opt.is-on .filter__name{color:var(--c-ink)}

.filter__name{flex:1;min-width:0}
.filter__count{font-size:var(--t-xs);color:var(--c-faint)}


/* -------------------------------------------------------------------------
   Amostras de cor
   ------------------------------------------------------------------------- */
.swatches{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--s-2);
}
.swatch{display:block;padding:2px;border:1px solid transparent}
.swatch:focus-visible{outline:2px solid var(--c-focus);outline-offset:1px}

.swatch__chip{
  display:block;
  width:26px;height:26px;
  background:var(--swatch,#ccc);
  /* Filete por dentro: sem ele, branco e off-white desaparecem no fundo. */
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .12);
  transition:transform var(--dur-fast) var(--ease);
}
.swatch:hover .swatch__chip{transform:scale(1.06)}
.swatch.is-on{border-color:var(--c-green-700)}


/* -------------------------------------------------------------------------
   Faixa de preço — dois cursores sobre o mesmo trilho
   ------------------------------------------------------------------------- */
.range{display:flex;flex-direction:column;gap:var(--s-4)}

.range__track{
  position:relative;
  height:22px;
  display:flex;
  align-items:center;
}
/* Trilho e trecho escolhido: dois retângulos atrás dos cursores. */
.range__track::before{
  content:"";
  position:absolute;inset-inline:0;
  height:2px;
  background:var(--c-line);
}
.range__fill{
  position:absolute;
  height:2px;
  background:var(--c-green-700);
  left:0;right:0;
}

/* Os dois <input type=range> ficam empilhados e invisíveis; só os polegares
   aparecem. pointer-events volta no polegar, senão o de cima capturaria todo
   o clique e o de baixo nunca seria arrastável. */
.range__track input[type="range"]{
  position:absolute;
  inset-inline:0;
  width:100%;
  height:22px;
  margin:0;padding:0;
  background:none;
  border:0;
  appearance:none;
  pointer-events:none;
}
.range__track input[type="range"]:focus{outline:none}

.range__track input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  pointer-events:auto;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--c-green-700);
  border:2px solid var(--c-surface);
  box-shadow:0 0 0 1px var(--c-green-700);
  cursor:grab;
}
.range__track input[type="range"]::-moz-range-thumb{
  pointer-events:auto;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--c-green-700);
  border:2px solid var(--c-surface);
  box-shadow:0 0 0 1px var(--c-green-700);
  cursor:grab;
}
.range__track input[type="range"]:active::-webkit-slider-thumb{cursor:grabbing}
.range__track input[type="range"]::-moz-range-track{background:none;border:0}

.range__track input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 1px var(--c-green-700),0 0 0 4px var(--c-focus)
}
.range__track input[type="range"]:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 1px var(--c-green-700),0 0 0 4px var(--c-focus)
}

.range__out{
  margin:0;max-width:none;
  font-size:var(--t-sm);
  color:var(--c-ink);
  font-variant-numeric:tabular-nums;
}

/* Com JavaScript o arrasto já envia sozinho; o botão só existe sem ele.
   Quem marca o atributo é o próprio script, ao assumir o controle — assim o
   botão nunca some antes de existir substituto. */
[data-range][data-js] .range__go{display:none}


/* -------------------------------------------------------------------------
   Botão de filtros — só no celular
   ------------------------------------------------------------------------- */
.shop-mobile-bar{display:none;margin-bottom:var(--s-5)}
.shop-mobile-bar__badge{
  display:grid;place-items:center;
  min-width:18px;height:18px;
  padding:0 5px;
  background:var(--c-green-700);
  color:#fff;
  font-size:10px;
  line-height:1;
  border-radius:9px;
}


/* -------------------------------------------------------------------------
   Grade da loja
   ------------------------------------------------------------------------- */
.products{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s-7) var(--grid-gap);
  list-style:none;
  margin:0;padding:0;
}
@media (max-width:760px){.products{grid-template-columns:repeat(2,1fr)}}

.shop-empty{
  padding:var(--s-9) var(--s-5);
  border:1px dashed var(--c-line);
  text-align:center;
}
.shop-empty__icon{display:block;color:var(--c-line);margin-bottom:var(--s-4)}
.shop-empty__title{font-size:var(--t-lg);color:var(--c-ink);margin-bottom:var(--s-2)}
.shop-empty p{max-width:none}
.shop-empty .btn{margin-top:var(--s-5)}


/* -------------------------------------------------------------------------
   Paginação
   ------------------------------------------------------------------------- */
.pager{display:flex;justify-content:center;margin-top:var(--s-8)}
.pager .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;height:40px;
  padding:0 var(--s-2);
  border:1px solid transparent;
  font-size:var(--t-sm);
  color:var(--c-muted);
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.pager .page-numbers:hover{color:var(--c-green-700);border-color:var(--c-line)}
.pager .page-numbers.current{border-color:var(--c-green-700);color:var(--c-ink)}
.pager .page-numbers.dots{border-color:transparent}


/* =========================================================================
   Telas estreitas — os filtros viram gaveta
   ========================================================================= */
@media (max-width:900px){
  .shop-layout{grid-template-columns:1fr;gap:0}

  .shop-mobile-bar{display:block}

  .filters{
    position:fixed;
    top:0;bottom:0;left:0;
    z-index:var(--z-drawer);
    width:min(340px,88vw);
    display:flex;
    flex-direction:column;
    background:var(--c-surface);
    box-shadow:var(--shadow-drawer);
    transform:translateX(-100%);
    transition:transform var(--dur-slow) var(--ease);
  }
  .filters[data-open="true"]{transform:translateX(0)}

  .filters__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-4);
    padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5);
    border-bottom:var(--hairline);
    min-height:68px;
  }
  .filters__title{
    font-size:var(--t-sm);
    letter-spacing:var(--ls-wide);
    text-transform:uppercase;
    color:var(--c-ink);
  }
  .filters__body{
    flex:1;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:var(--s-5) var(--s-5) var(--s-7);
  }
}