@charset "UTF-8";
/* =========================================================================
   YLLIME — Carrinho
   Gaveta lateral e página. Os dois compartilham o item de linha, o seletor
   de quantidade e a barra de frete grátis.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Seletor de quantidade
   ------------------------------------------------------------------------- */
.qty{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  background:var(--c-surface);
}
.qty__btn{
  display:grid;
  place-items:center;
  width:36px;height:36px;
  flex:none;
  color:var(--c-ink);
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.qty__btn:hover:not(:disabled){background:var(--c-canvas);color:var(--c-green-700)}
.qty__btn:disabled{color:var(--c-faint);cursor:not-allowed}
.qty__btn:focus-visible{outline:2px solid var(--c-focus);outline-offset:-2px}
.qty__btn svg{stroke-width:1.6}

/*
 * Precisa de `.qty input` e não só `.qty__input`: a regra genérica de campo
 * usa `input[type="number"]`, cuja especificidade (0,1,1) vence uma classe
 * sozinha — o campo saía com 188px em vez de 40.
 */
.qty input.qty__input{
  width:40px;
  min-height:36px;
  padding:0;
  border:0;
  border-inline:1px solid var(--c-line);
  border-radius:0;
  text-align:center;
  font-size:var(--t-sm);
  background:transparent;
  /* As setinhas nativas não cabem em 40px e brigam com os nossos botões. */
  appearance:textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button{appearance:none;margin:0}
.qty__input:focus{border-inline-color:var(--c-line)}
.qty__input:focus-visible{outline:2px solid var(--c-focus);outline-offset:-2px}


/* -------------------------------------------------------------------------
   Frete grátis
   ------------------------------------------------------------------------- */
.freeship{
  padding:var(--s-4);
  background:var(--c-green-50);
  border:1px solid var(--c-line);
}
.freeship__text{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  margin:0 0 var(--s-3);
  max-width:none;
  font-size:var(--t-sm);
  color:var(--c-body);
}
.freeship__text svg{flex:none;color:var(--c-sale)}
.freeship__text strong{color:var(--c-ink)}

.freeship__track{
  height:4px;
  background:var(--c-line);
  border-radius:2px;
  overflow:hidden;
}
.freeship__fill{
  display:block;
  height:100%;
  background:var(--c-sale);
  border-radius:2px;
  transition:width var(--dur-slow) var(--ease);
}
.freeship.is-done .freeship__fill{background:var(--c-green-700)}


/* -------------------------------------------------------------------------
   Linhas de valor
   ------------------------------------------------------------------------- */
.cart-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s-4);
  font-size:var(--t-sm);
  color:var(--c-body);
}
.cart-line + .cart-line{margin-top:var(--s-3)}
.cart-line strong{color:var(--c-ink);font-weight:500}
.cart-line--pix{color:var(--c-muted)}
.cart-line--pix strong{color:var(--c-sale)}
.cart-line--discount{color:var(--c-sale)}
.cart-line--discount strong,
.cart-line--discount .tnum{color:var(--c-sale)}

.cart-note{
  margin:var(--s-4) 0 0;
  font-size:var(--t-xs);
  color:var(--c-muted);
  max-width:none;
}


/* =========================================================================
   Gaveta
   ========================================================================= */
.drawer--cart{width:min(440px,92vw)}

.drawer__count{color:var(--c-muted);margin-left:var(--s-1)}

.drawer__scroll{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.drawer__scroll[aria-busy="true"]{opacity:.55;pointer-events:none}
.drawer__scroll > .freeship{margin:var(--s-5) var(--s-5) 0}

.mini-cart{
  flex:1;
  list-style:none;
  margin:0;
  padding:var(--s-5);
}
.mini-cart__item{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:var(--s-4);
  padding-bottom:var(--s-5);
}
.mini-cart__item + .mini-cart__item{
  padding-top:var(--s-5);
  border-top:1px solid var(--c-line-soft);
}

.mini-cart__media{border:1px solid var(--c-line-soft)}
.mini-cart__body{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}

.mini-cart__name{
  font-size:var(--t-sm);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-ink);
  line-height:var(--lh-snug);
}
.mini-cart__name:hover{color:var(--c-green-700)}

.mini-cart__variation{font-size:var(--t-xs);color:var(--c-muted);margin:0;max-width:none}

.mini-cart__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  margin-top:var(--s-1);
}
.mini-cart__price{font-size:var(--t-sm);color:var(--c-ink)}

.mini-cart__remove{
  align-self:flex-start;
  font-size:var(--t-xs);
  color:var(--c-muted);
  text-decoration:underline;
  text-underline-offset:.2em;
  transition:color var(--dur-fast) var(--ease);
}
.mini-cart__remove:hover{color:var(--c-error)}
.mini-cart__remove:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}

.drawer__foot{
  position:sticky;
  bottom:0;
  padding:var(--s-5);
  background:var(--c-surface);
  border-top:var(--hairline);
}
.drawer__foot .btn{margin-top:var(--s-4)}
.drawer__foot .btn + .btn{margin-top:var(--s-2)}

.drawer__empty{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  padding:var(--s-8) var(--s-5);
  text-align:center;
}
.drawer__empty-icon{color:var(--c-line);margin-bottom:var(--s-2)}
.drawer__empty-title{font-size:var(--t-lg);color:var(--c-ink)}
.drawer__empty .btn{margin-top:var(--s-5)}
.drawer__empty p{max-width:none}


/* =========================================================================
   Página do carrinho
   ========================================================================= */
.cart-page__head{margin-bottom:var(--s-7)}
.cart-page__head h1{font-size:var(--t-xl);margin-bottom:var(--s-2)}

.cart-page__grid{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:var(--s-8);
  align-items:start;
}

.cart-page__items[aria-busy="true"]{opacity:.55;pointer-events:none}

.cart-page__back{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  margin-top:var(--s-6);
  font-size:var(--t-sm);
  color:var(--c-muted);
}
.cart-page__back:hover{color:var(--c-green-700)}

/* ---- Item ---- */
.cart-items{list-style:none;margin:0;padding:0;border-top:var(--hairline)}

.cart-item{
  display:grid;
  grid-template-columns:96px 1fr auto auto 44px;
  gap:var(--s-5);
  align-items:center;
  padding-block:var(--s-5);
  border-bottom:1px solid var(--c-line-soft);
}

.cart-item__media{border:1px solid var(--c-line-soft)}
.cart-item__info{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}

.cart-item__name{
  font-size:var(--t-sm);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-ink);
  line-height:var(--lh-snug);
}
.cart-item__name:hover{color:var(--c-green-700)}

.cart-item__variation{font-size:var(--t-xs);color:var(--c-muted);margin:0;max-width:none}
.cart-item__sku{font-size:var(--t-xs);color:var(--c-faint);margin:0;max-width:none}

.cart-item__alert{
  margin:var(--s-1) 0 0;
  max-width:none;
  font-size:var(--t-xs);
  color:var(--c-error);
}
.cart-item__alert--soft{color:var(--c-warn)}

.cart-item__price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.cart-item__price strong{font-size:var(--t-base);color:var(--c-ink);font-weight:500}
.cart-item__unit{font-size:var(--t-xs);color:var(--c-muted)}

.cart-item__remove{color:var(--c-faint)}
.cart-item__remove:hover{color:var(--c-error)}

/* ---- Resumo ---- */
.cart-page__summary{position:sticky;top:calc(84px + var(--s-5))}

.summary{
  padding:var(--s-6);
  background:var(--c-canvas);
  border:1px solid var(--c-line);
}
.summary__title{
  font-size:var(--t-base);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  margin-bottom:var(--s-5);
}
.summary .freeship{margin-bottom:var(--s-5);background:var(--c-surface)}
.summary__lines{padding-bottom:var(--s-5);border-bottom:1px solid var(--c-line)}

.summary__drop{
  margin-left:var(--s-1);
  color:var(--c-muted);
  font-size:var(--t-base);
  line-height:1;
}
.summary__drop:hover{color:var(--c-error)}

/* O WooCommerce guarda e devolve o código em minúsculas. Na tela ele sai
   como é anunciado — em caixa alta —, e a comparação dele ignora a caixa. */
.cart-line--discount{text-transform:uppercase}
.cart-line--discount .summary__drop{text-transform:none}

.summary__coupon{padding-block:var(--s-4);border-bottom:1px solid var(--c-line)}
.summary__coupon-toggle{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  width:100%;
  font-size:var(--t-sm);
  color:var(--c-ink);
}
.summary__coupon-toggle svg{transition:rotate var(--dur) var(--ease)}
.summary__coupon-toggle[aria-expanded="true"] svg{rotate:180deg}
.summary__coupon-toggle:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}

.summary__coupon-form{display:flex;gap:var(--s-2);margin-top:var(--s-3)}
.summary__coupon-form input{min-height:40px;font-size:var(--t-sm)}
.summary__coupon-form .btn{flex:none}

.summary__total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s-4);
  padding-block:var(--s-5);
}
.summary__total span{font-size:var(--t-sm);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--c-ink)}
.summary__total strong{font-size:1.5rem;letter-spacing:var(--ls-tight);color:var(--c-ink);font-weight:400}

.summary__pix{
  display:flex;
  align-items:baseline;
  gap:var(--s-2);
  flex-wrap:wrap;
  margin:0 0 var(--s-5);
  max-width:none;
  font-size:var(--t-xs);
  color:var(--c-muted);
}
.summary__pix strong{font-size:var(--t-base);color:var(--c-sale);font-weight:600}

.summary__trust{
  list-style:none;
  margin:var(--s-5) 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
}
.summary__trust li{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  font-size:var(--t-xs);
  color:var(--c-muted);
}
.summary__trust svg{flex:none;color:var(--c-muted);stroke-width:1.2}


/* ---- Vazio ---- */
.cart-empty{
  padding-block:var(--s-9);
  text-align:center;
}
.cart-empty__icon{display:block;color:var(--c-line);margin-bottom:var(--s-5)}
.cart-empty h1{font-size:var(--t-xl);margin-bottom:var(--s-3)}
.cart-empty .lead{margin-inline:auto;max-width:44ch;text-wrap:balance}
.cart-empty__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;margin-top:var(--s-6)}


/* =========================================================================
   Telas estreitas
   ========================================================================= */
@media (max-width:1024px){
  .cart-page__grid{grid-template-columns:1fr;gap:var(--s-7)}
  .cart-page__summary{position:static}
}

@media (max-width:640px){
  /*
   * O item vira duas colunas: foto à esquerda, o resto empilhado à direita.
   * O botão de remover sai da grade e vai para o canto do bloco, senão
   * roubaria largura do nome do produto.
   */
  .cart-item{
    grid-template-columns:80px 1fr;
    gap:var(--s-4);
    position:relative;
    padding-right:var(--s-7);
  }
  .cart-item__info{grid-column:2}
  .cart-item__qty{grid-column:2;margin-top:var(--s-2)}
  .cart-item__price{grid-column:2;align-items:flex-start;text-align:left}
  .cart-item__remove{position:absolute;top:var(--s-4);right:0;width:32px;height:32px}
}