/* ==========================================================================
   Aletto - minicarrinho

   Polimento visual pra ficar fiel ao mini-cart.liquid do Shopify original:

   - Mobile (ate 640px, igual ao breakpoint real do Shopify): painel quase
     em tela cheia, ancorado a direita, com animacao de opacity+scale (nao
     mais translateX).
   - Desktop (a partir de 641px, breakpoint exato do Shopify): vira um
     dropdown flutuante ancorado no icone do carrinho - largura fixa,
     altura automatica, borda colorida, raio, sombra suave, SEM escurecer
     o resto da pagina (o Shopify original nao tem overlay em nenhum dos
     dois breakpoints).

   ".aletto-minicart-ancora" (em functions.php, ao redor do link do
   carrinho) e quem recebe "position:relative" - mesmo padrao ja usado
   pelo popover de conta (".aletto-conta"/".aletto-conta-popover").
   ========================================================================== */

.aletto-minicart-ancora {
  position: relative;
}

.aletto-minicart {
  position: fixed;
  inset: 0;
  z-index: 10000;
}

.aletto-minicart[hidden] {
  display: none;
}

.aletto-minicart__fundo {
  position: absolute;
  inset: 0;
  /* O Shopify original nao tem overlay escuro em NENHUM breakpoint - so
     mantemos o elemento pelo papel funcional dele (clique fora fecha). */
  background-color: transparent;
}

/* Mesma tecnica de animacao do Shopify: abrir e fechar usam curvas/duracoes
   diferentes (assimetrico). A regra "fechada" abaixo tambem e a que vale
   quando ".is-aberto" e removida (governa a transicao de FECHAR). */
.aletto-minicart__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(92vw, 400px);
  background-color: var(--aletto-branco, #fff);
  overflow: hidden;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9);
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 0.25s ease-in-out;
  display: flex;
  flex-direction: column;
}

.aletto-minicart.is-aberto .aletto-minicart__inner {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 0.4s cubic-bezier(0.18, 1.25, 0.4, 1), transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1), visibility 0.4s linear;
}

/* Trava a rolagem do fundo com o minicarrinho aberto (classe propria, para
   nao interferir no scroll-lock do drawer do menu mobile). */
body.aletto-minicart-aberto {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Desktop (>=641px, breakpoint exato do Shopify): dropdown ancorado, nao
   mais um painel de tela cheia.
   -------------------------------------------------------------------------- */

@media (min-width: 641px) {
  .aletto-minicart {
    /* Deixa de ser a camada fixa que cobre a viewport inteira - assim
       ".aletto-minicart__inner" (position:absolute) passa a se ancorar no
       ".aletto-minicart-ancora" (o ancestral "position:relative" mais
       proximo), nao mais nesta div. */
    position: static;
    inset: auto;
    z-index: auto;
  }

  .aletto-minicart__inner {
    top: calc(100% + 14px);
    right: 0;
    left: auto;
    bottom: auto;
    width: 470px;
    max-height: min(80vh, 620px);
    /* border-radius do tema (10px no Shopify original) e borda na cor do
       botao principal (equivalente ao "--primary-button-background"). */
    border: 3px solid var(--aletto-verde-compra, #0fb930);
    border-radius: 10px;
    box-shadow: 0 1px 5px 2px rgb(0 0 0 / 5%);
    z-index: 500;
  }
}

/* --------------------------------------------------------------------------
   Topo: so o botao de fechar. O Shopify original nao tem um titulo fixo no
   minicarrinho, entao nao adicionamos um aqui.
   -------------------------------------------------------------------------- */

.aletto-minicart__topo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  padding: 1em 1.1em;
  border-bottom: 1px solid var(--aletto-borda, #e7e7e7);
}

.aletto-minicart__fechar {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--aletto-heading, #737b97);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aletto-minicart__fechar:hover {
  background: none;
  transform: none;
  filter: none;
  color: var(--aletto-verde-agua, #24c7b8);
}

.aletto-minicart__fechar svg {
  width: 22px;
  height: 22px;
}

/* --------------------------------------------------------------------------
   Conteudo: lista de itens (com rolagem propria se passar da altura) ou o
   estado vazio.
   -------------------------------------------------------------------------- */

.aletto-minicart__conteudo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.4em 1.2em;
}

.aletto-minicart__placeholder {
  margin: 1.2em 0 0;
  color: var(--aletto-heading, #737b97);
  font-size: 13px;
  font-style: italic;
}

/* Lista de produtos */
.aletto-minicart__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aletto-minicart__item {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--aletto-borda, #e7e7e7);
}

.aletto-minicart__lista .aletto-minicart__item:last-child {
  border-bottom: none;
}

.aletto-minicart__imagem {
  flex-shrink: 0;
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f6fdfc;
  border: 1px solid var(--aletto-borda, #e7e7e7);
}

.aletto-minicart__imagem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.aletto-minicart__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.aletto-minicart__marca {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--aletto-heading, #737b97);
  margin-bottom: 0.3em;
}

.aletto-minicart__nome {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--aletto-texto, #000);
  text-decoration: none;
  line-height: 1.5;
  /* nome longo quebra em ate 2 linhas, sem estourar o drawer */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aletto-minicart__nome:hover {
  color: var(--aletto-verde-agua, #24c7b8);
  text-decoration: underline;
}

.aletto-minicart__variacoes {
  list-style: none;
  margin: 0.3em 0 0;
  padding: 0;
}

.aletto-minicart__variacoes li {
  font-size: 12px;
  color: var(--aletto-heading, #737b97);
  line-height: 1.4;
}

.aletto-minicart__preco {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.4em;
}

.aletto-minicart__preco-atual {
  font-size: 14px;
  font-weight: 700;
  color: var(--aletto-preco-normal, #606781);
}

.aletto-minicart__preco-original {
  font-size: 12px;
  color: var(--aletto-preco-riscado, #a4a9be);
  text-decoration: line-through;
}

/*
 * Acoes do item: seletor de quantidade (-, valor, +) + remover. Mesmos
 * valores do seletor ja usado no carrinho (assets/aletto-carrinho.css >
 * .wc-block-components-quantity-selector) e na pagina de produto
 * (assets/aletto-produto.css > .aletto-qty-stepper), so que compactos pro
 * espaco menor do drawer.
 */
.aletto-minicart__acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  margin-top: 0.6em;
}

.aletto-minicart__qtd {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--aletto-borda, #e7e7e7);
  border-radius: 8px;
  overflow: hidden;
}

.aletto-minicart__qtd-botao {
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background-color: var(--aletto-branco, #fff);
  color: var(--aletto-texto, #000);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aletto-minicart__qtd-botao:hover:not(:disabled) {
  background-color: var(--aletto-verde-agua, #24c7b8);
  color: var(--aletto-branco, #fff);
}

.aletto-minicart__qtd-botao:focus-visible {
  outline: 2px solid var(--aletto-verde-agua, #24c7b8);
  outline-offset: 1px;
}

.aletto-minicart__qtd-botao:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.aletto-minicart__qtd-valor {
  min-width: 26px;
  padding: 0 0.55em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--aletto-texto, #000);
  border-left: 1px solid var(--aletto-borda, #e7e7e7);
  border-right: 1px solid var(--aletto-borda, #e7e7e7);
}

.aletto-minicart__qtd-valor--fixa {
  border: none;
  padding: 0;
  min-width: 0;
  font-weight: 400;
  font-size: 12px;
  color: var(--aletto-heading, #737b97);
}

.aletto-minicart__remover {
  width: auto;
  height: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--aletto-heading, #737b97);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aletto-minicart__remover:hover:not(:disabled) {
  background: none;
  transform: none;
  filter: none;
  color: var(--aletto-erro, #f71b1b);
}

.aletto-minicart__remover:focus-visible {
  outline: 2px solid var(--aletto-verde-agua, #24c7b8);
  outline-offset: 1px;
}

.aletto-minicart__remover:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Estado de "processando": so este item fica visualmente desabilitado,
   o resto do drawer continua interativo normalmente. */
.aletto-minicart__item.is-processando {
  opacity: 0.5;
}

.aletto-minicart__item-erro {
  margin: 0.5em 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--aletto-erro, #f71b1b);
}

@media (max-width: 480px) {
  .aletto-minicart__qtd-botao {
    width: 32px;
    height: 32px;
  }
}

@media (min-width: 641px) {
  .aletto-minicart__qtd {
    border: none;
    border-radius: 12px;
    background-color: var(--aletto-fundo-suave, whitesmoke);
    height: 38px;
  }

  .aletto-minicart__qtd-botao {
    width: 34px;
    height: 38px;
    background-color: transparent;
    font-size: 13px;
  }

  .aletto-minicart__qtd-botao:hover:not(:disabled) {
    background-color: transparent;
    color: var(--aletto-verde-compra, #0fb930);
  }

  .aletto-minicart__qtd-valor {
    min-width: 22px;
    padding: 0 0.3em;
    font-size: 12px;
    border-left: none;
    border-right: none;
  }

  .aletto-minicart__remover {
    font-size: 12px;
  }
}

/* Estado vazio - espacamentos alinhados ao snippets/mini-cart.liquid do
   Shopify (.mini-cart__content--empty padding: 20px 25px 25px 25px +
   .mini-cart__empty-state padding: 70px 0 60px 0 -> 90px de respiro no
   topo, 25px nas laterais/base; svg margin-bottom: 10px; botao full width
   via .button--full). */
.aletto-minicart__vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 90px 25px 25px;
  color: var(--aletto-heading, #737b97);
}

.aletto-minicart__vazio svg {
  width: 64px;
  height: 64px;
  stroke: var(--aletto-borda, #e7e7e7);
  stroke-width: 1.5;
  fill: none;
  margin-bottom: 10px;
}

.aletto-minicart__vazio-texto {
  margin: 0 0 60px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
}

.aletto-minicart__vazio-botao {
  display: block;
  width: 100%;
  text-align: center;
  border-radius: var(--aletto-raio, 12px);
}

/* --------------------------------------------------------------------------
   Rodape: total + finalizar compra. Fica de fora da area com rolagem
   (.aletto-minicart__conteudo), sempre visivel enquanto houver itens.
   Quando o carrinho fica vazio, o JS limpa o rodape e ":empty" o esconde
   sozinho - sem cupom/frete/mensagens promocionais nesta etapa.
   -------------------------------------------------------------------------- */

.aletto-minicart__rodape:empty {
  display: none;
}

.aletto-minicart__rodape:not(:empty) {
  flex-shrink: 0;
  border-top: 1px solid var(--aletto-borda, #e7e7e7);
  padding: 1.1em 1.2em;
}

.aletto-minicart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8em;
  margin-bottom: 0.9em;
}

.aletto-minicart__total-rotulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--aletto-heading, #737b97);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Mesma cor/peso do total na pagina de carrinho, ver assets/aletto-carrinho.css
   > .wc-block-components-totals-footer-item .wc-block-components-totals-item__value */
.aletto-minicart__total-valor {
  font-size: 19px;
  font-weight: 700;
  color: var(--aletto-roxo, #7a00ff);
}

.aletto-minicart__checkout {
  display: block;
  width: 100%;
  text-align: center;
}

@media (min-width: 641px) {
  .aletto-minicart__rodape:not(:empty) {
    padding: 15px 25px 25px;
  }
}

/*
 * Mobile: a propria regra "width: min(92vw, 400px)" do .aletto-minicart__inner
 * (la em cima) ja cobre "quase toda a largura da tela sem estourar" em
 * qualquer viewport, sem precisar de uma media query separada.
 */