/* ============================================================
   Collore — mini carrinho lateral (widget Menu Cart do Elementor Pro)
   Escopo em .elementor-menu-cart__main pra não vazar pra página
   do carrinho nem pro checkout.
   Tokens vêm do collore-product.css; os fallbacks garantem que
   funciona mesmo se a ordem de carga mudar.
   ============================================================ */

.elementor-menu-cart__main {
  --clre-texto: var(--col-text, #1a1a1a);
  --clre-suave: var(--col-muted, #8a8a8a);
  --clre-borda: var(--col-border, #ececec);
  --clre-acento: var(--col-accent, #5b5e3f);
  --clre-dourado: var(--col-accent-2, #c9a24b);

  /* padding NÃO é forçado aqui: quem manda é o --cart-padding do widget,
     que a cliente controla no painel do Elementor */

  /* o Elementor fixa 350px no código (não é variável), e nesse espaço as
     opções de personalização ficam apertadas demais */
  width: 420px !important;
  max-width: 100% !important;
}

/* ---------- lista ---------- */
.elementor-menu-cart__products {
  padding: 0 !important;
  margin: 0 0 4px !important;
}

/* linha do produto: imagem | conteúdo | remover.
   minmax(0,1fr) é o que impede o texto de estourar a borda. */
.elementor-menu-cart__main .elementor-menu-cart__product {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 6px;
  align-items: start;
  /* position relative + padding à direita: o × do Elementor é absoluto e
     precisa de um pai posicionado, senão os riscos dele esticam na linha */
  position: relative;
  padding: 18px 32px 18px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--clre-borda) !important;
}

.elementor-menu-cart__main .elementor-menu-cart__product:last-of-type {
  border-bottom: 0 !important;
}

.elementor-menu-cart__main .elementor-menu-cart__product-image {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 64px;
  margin: 0 !important;
}

.elementor-menu-cart__main .elementor-menu-cart__product-image img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--col-radius-sm, 10px);
  display: block;
  border: 1px solid var(--clre-borda);
}

.elementor-menu-cart__main .elementor-menu-cart__product-name {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
}

/* título: era rosa, vai pra cor de texto da marca */
.elementor-menu-cart__main .elementor-menu-cart__product-name > a {
  display: block;
  color: var(--clre-texto) !important;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.3;
  text-decoration: none !important;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.elementor-menu-cart__main .elementor-menu-cart__product-name > a:hover {
  color: var(--clre-acento) !important;
}

/* ---------- opções escolhidas (dl.variation do WooCommerce) ----------
   O CSS do WooCommerce flutua dt/dd, o que gerava os buracos e o
   desalinhamento. Aqui vira "Rótulo: valor" em linha, quebrando junto. */
.elementor-menu-cart__main .elementor-menu-cart__product-name .variation {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--clre-suave);
}

.elementor-menu-cart__main .variation dt,
.elementor-menu-cart__main .variation dd {
  float: none !important;
  clear: none !important;
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  overflow-wrap: anywhere;
}

.elementor-menu-cart__main .variation dt {
  font-weight: 600;
  color: var(--clre-suave);
}

.elementor-menu-cart__main .variation dd {
  color: var(--clre-texto);
}

/* o WooCommerce embrulha o valor em <p>; sem isso ele quebra a linha */
.elementor-menu-cart__main .variation dd p {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* quebra de linha DEPOIS do valor, pra cada par ficar na sua linha */
.elementor-menu-cart__main .variation dd::after {
  content: "";
  display: block;
}

/* espaço entre rótulo e valor */
.elementor-menu-cart__main .variation dt::after {
  content: " ";
  white-space: pre;
}

/* rótulo sem valor não deve aparecer (rede: o PHP já remove na origem) */
.elementor-menu-cart__main .variation dd:empty,
.elementor-menu-cart__main .variation dt:has(+ dd:empty) {
  display: none !important;
}

/* acréscimo de preço da opção, ex: +R$ 6,90 */
.elementor-menu-cart__main .variation dd strong {
  color: var(--clre-dourado);
  font-weight: 700;
}

/* ---------- preço da linha ---------- */
.elementor-menu-cart__main .elementor-menu-cart__product-price {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  font-size: .88rem;
  color: var(--clre-texto) !important;
}

.elementor-menu-cart__main .elementor-menu-cart__product-price .product-quantity {
  color: var(--clre-suave);
}

.elementor-menu-cart__main .elementor-menu-cart__product-price .woocommerce-Price-amount {
  color: var(--clre-texto);
  font-weight: 600;
}

/* ---------- botão de remover ----------
   O Elementor desenha o × com ::before/::after absolutos dentro de um
   container absoluto. Mexer no position quebra tudo, então aqui só
   reposiciono e troco as cores. Os <a> ficam intocados: são overlays
   invisíveis (opacity:0) que servem de área de clique. */
/* Fica na LINHA DO PREÇO, embaixo. No topo ele encostava no × de fechar do
   painel e os dois pareciam o mesmo botão repetido. */
.elementor-menu-cart__main .elementor-menu-cart__product-remove {
  top: auto !important;
  bottom: 18px !important;
  inset-inline-end: 0 !important;
  transform: none !important;
  border-color: var(--clre-borda) !important;
}

.elementor-menu-cart__main .elementor-menu-cart__product-remove::before,
.elementor-menu-cart__main .elementor-menu-cart__product-remove::after {
  background: var(--clre-suave) !important;
}

.elementor-menu-cart__main .elementor-menu-cart__product-remove:hover {
  border-color: #c0392b !important;
}

.elementor-menu-cart__main .elementor-menu-cart__product-remove:hover::before,
.elementor-menu-cart__main .elementor-menu-cart__product-remove:hover::after {
  background: #c0392b !important;
}

/* ---------- subtotal ---------- */
.elementor-menu-cart__main .elementor-menu-cart__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* o Elementor põe borda nos 4 lados por padrão; só quero a de cima */
  border-style: solid !important;
  border-color: var(--clre-borda) !important;
  border-width: 1px 0 0 !important;
  padding: 18px 0 0 !important;
  margin: 4px 0 0 !important;
  font-size: 1rem;
  color: var(--clre-texto);
}

.elementor-menu-cart__main .elementor-menu-cart__subtotal strong {
  font-weight: 600;
}

.elementor-menu-cart__main .elementor-menu-cart__subtotal .woocommerce-Price-amount {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clre-texto);
}

/* ---------- botões ---------- */
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons {
  display: grid !important;
  /* minmax(0,1fr), não 1fr: sem isso a trilha não encolhe abaixo do
     min-content e "Finalização" faz os botões se sobreporem */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
  margin-top: 18px !important;
  padding: 0 !important;
  border: 0 !important;
}

.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  /* explícito: o reset do Elementor é escopado em .elementor e eu não
     quero depender disso pro botão não estourar a coluna */
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 12px 14px !important;
  border-radius: var(--col-radius-sm, 10px) !important;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  transition: filter .15s ease, background-color .15s ease, transform .05s ease;
}

.elementor-menu-cart__main .elementor-button--view-cart {
  background: transparent !important;
  color: var(--clre-acento) !important;
  border: 1px solid var(--clre-acento) !important;
}

.elementor-menu-cart__main .elementor-button--view-cart:hover {
  background: rgba(91, 94, 63, .07) !important;
}

.elementor-menu-cart__main .elementor-button--checkout {
  background: var(--clre-acento) !important;
  color: #fff !important;
  border: 1px solid var(--clre-acento) !important;
}

.elementor-menu-cart__main .elementor-button--checkout:hover {
  filter: brightness(.92);
}

.elementor-menu-cart__main .elementor-button:active {
  transform: translateY(1px);
}

/* ---------- carrinho vazio ---------- */
.elementor-menu-cart__main .elementor-menu-cart__empty-message {
  padding: 40px 0 !important;
  color: var(--clre-suave);
  text-align: center;
  font-size: .95rem;
}

/* ---------- telas pequenas ---------- */
@media (max-width: 420px) {
  .elementor-menu-cart__main {
    padding: 22px 16px 18px !important;
  }

  .elementor-menu-cart__main .elementor-menu-cart__product {
    grid-template-columns: 54px minmax(0, 1fr) 22px;
    column-gap: 11px;
  }

  .elementor-menu-cart__main .elementor-menu-cart__product-image,
  .elementor-menu-cart__main .elementor-menu-cart__product-image img {
    width: 54px;
  }

  .elementor-menu-cart__main .elementor-menu-cart__product-image img {
    height: 54px;
  }

  .elementor-menu-cart__main .elementor-menu-cart__footer-buttons {
    grid-template-columns: 1fr;
  }
}