/* Smartlub — pagina do carrinho (woocommerce/cart/cart.php). So carrega no carrinho. */

/* O titulo da pagina sai da vista: quem abre a tela e o cabecalho do
   cart.php. Mesma correcao de margem do checkout (ver shop.css). */
body.woocommerce-cart .slc-page-title.slc-sr { margin: -1px; }

.slc-cart { position: relative; padding-block: 1.5rem 0; }

/* Ocupado: tudo continua visivel, so apaga um pouco e para de aceitar
   clique ate o servidor responder. */
.slc-cart.is-busy .slc-cart__layout { opacity: .6; pointer-events: none; transition: opacity .15s ease .1s; }
.slc-cart.is-busy::after {
  content: ""; position: fixed; inset: 0 0 auto; height: 3px; z-index: 50;
  background: linear-gradient(90deg, transparent, var(--slc-yellow), transparent);
  background-size: 50% 100%; background-repeat: no-repeat;
  animation: slc-cart-load 1s linear infinite;
}
@keyframes slc-cart-load { from { background-position: -50% 0; } to { background-position: 150% 0; } }

@media (prefers-reduced-motion: reduce) {
  .slc-cart.is-busy::after { animation: none; background: var(--slc-yellow); }
}

/* Cabecalho: titulo com a contagem e as etapas da compra. */
.slc-cart__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; margin-bottom: 1.25rem;
}
.slc-cart__title {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .625rem;
  margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.15; letter-spacing: -.02em;
}
.slc-cart__count { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--slc-ink-500); }

.slc-cart__steps {
  display: flex; align-items: center; gap: .5rem;
  margin: 0; padding: 0; list-style: none; counter-reset: none;
  font-size: .8125rem; font-weight: 600; color: var(--slc-ink-500);
}
.slc-cart__steps li { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.slc-cart__steps li + li::before {
  content: ""; width: clamp(12px, 3vw, 32px); height: 2px; border-radius: 2px; background: var(--slc-ink-300);
}
.slc-cart__steps span {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--slc-surface); border: 1.5px solid var(--slc-ink-300); font-size: .75rem;
}
.slc-cart__steps .is-current { color: var(--slc-ink-900); }
.slc-cart__steps .is-current span { background: var(--slc-yellow); border-color: var(--slc-yellow); color: var(--slc-accent-ink); }

@media (max-width: 639px) {
  /* No celular so a etapa atual leva nome; as outras ficam no numero. */
  .slc-cart__steps li:not(.is-current) { font-size: 0; gap: 0; }
  .slc-cart__steps li:not(.is-current)::before { margin-inline-end: .5rem; }
  .slc-cart__steps li:not(.is-current) span { font-size: .75rem; }
}

/* A barra de frete gratis ganha o mesmo cartao com sombra dos outros. */
.slc-cart .slc-freeship { border-color: transparent; box-shadow: var(--slc-shadow); }

/* Duas colunas: itens e, a direita, entrega, cupom e resumo. */
.slc-cart__layout { display: grid; gap: 1.25rem; align-items: start; }

@media (min-width: 960px) {
  .slc-cart__layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 1.5rem; }
  .slc-cart__aside { position: sticky; top: 1rem; }
}

.slc-cart__aside { display: grid; gap: 1rem; }

.slc-cart__card {
  background: var(--slc-surface); border-radius: var(--slc-radius-lg);
  box-shadow: var(--slc-shadow); padding: 1.25rem;
}
.slc-cart__cardtitle {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .875rem; font-size: 1rem; font-weight: 700; line-height: 1.3;
}
.slc-cart__cardtitle svg { color: var(--slc-ink-500); }

/* ------------------------------------------------------------------
   Itens
   ------------------------------------------------------------------ */

.slc-cart__items { padding: .25rem 1.25rem; }
.slc-cart__list { margin: 0; padding: 0; list-style: none; }

.slc-cart__item {
  display: grid; gap: .25rem 1rem; padding-block: 1.25rem;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb info line"
    "thumb controls controls";
  transition: opacity .2s ease;
}
.slc-cart__item + .slc-cart__item { border-top: 1px solid var(--slc-line); }
.slc-cart__item.is-leaving { opacity: .35; }

.slc-cart__thumb { grid-area: thumb; }
.slc-cart__thumb a,
.slc-cart__thumb img {
  display: block; width: 88px; height: 88px; border-radius: var(--slc-radius);
}
.slc-cart__thumb img {
  object-fit: contain; background: #fff; border: 1px solid var(--slc-line); padding: 4px;
}

.slc-cart__info { grid-area: info; min-width: 0; }
.slc-cart__name { margin: 0 0 .25rem; font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.slc-cart__name a { color: inherit; text-decoration: none; }
.slc-cart__name a:hover { text-decoration: underline; text-underline-offset: 2px; }

.slc-cart__sku,
.slc-cart__codes { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--slc-ink-500); }
.slc-cart__codes {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden;
}
.slc-cart__meta { font-size: .75rem; color: var(--slc-ink-500); }
.slc-cart__meta dl { display: flex; flex-wrap: wrap; gap: 0 .375rem; margin: 0; }
.slc-cart__meta dt, .slc-cart__meta dd, .slc-cart__meta p { margin: 0; }

.slc-cart__badge {
  display: inline-flex; align-items: center; gap: .25rem; margin: .375rem 0 0; padding: .125rem .5rem;
  border-radius: var(--slc-pill); background: var(--slc-yellow-soft); font-size: .75rem; font-weight: 600;
}

.slc-cart__unit { margin: .375rem 0 0; font-size: .8125rem; color: var(--slc-ink-500); }
.slc-cart__unit del { margin-inline-end: .25rem; color: var(--slc-ink-500); }

.slc-cart__line {
  grid-area: line; margin: 0; text-align: right; white-space: nowrap;
  font-size: 1.0625rem; font-weight: 700;
}

.slc-cart__controls { grid-area: controls; display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }

/* Passo de quantidade: - campo + numa so pilula. */
.slc-cart__qty {
  display: inline-flex; align-items: stretch; height: 40px;
  border: 1.5px solid var(--slc-ink-300); border-radius: var(--slc-radius-btn);
  background: var(--slc-surface);
}
.slc-cart__qty:focus-within { border-color: var(--slc-ink-500); }
.slc-cart__step {
  width: 38px; padding: 0; border: 0; background: transparent; cursor: pointer;
  font-size: 1.125rem; font-weight: 600; line-height: 1; color: var(--slc-ink-700);
  transition: background .15s ease;
}
.slc-cart__step:first-child { border-radius: var(--slc-radius-btn) 0 0 var(--slc-radius-btn); }
.slc-cart__step:last-child { border-radius: 0 var(--slc-radius-btn) var(--slc-radius-btn) 0; }
.slc-cart__step:hover:not(:disabled) { background: var(--slc-ink-100); }
.slc-cart__step:disabled { color: var(--slc-ink-300); cursor: not-allowed; }
.slc-cart__qtyinput {
  width: 44px; padding: 0; border: 0; background: transparent; text-align: center;
  font: inherit; font-weight: 600; font-size: .9375rem; color: var(--slc-ink-900);
  appearance: textfield; -moz-appearance: textfield;
}
.slc-cart__qtyinput::-webkit-outer-spin-button,
.slc-cart__qtyinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.slc-cart__qtyinput:focus { outline: none; }

.slc-cart__single { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--slc-ink-500); }
.slc-cart__last {
  padding: .125rem .5rem; border-radius: var(--slc-pill);
  background: var(--slc-yellow-soft); color: var(--slc-ink-900); font-size: .75rem; font-weight: 600;
}

.slc-cart__remove {
  display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .5rem; margin-inline-start: -.5rem;
  border-radius: var(--slc-radius-btn); font-size: .8125rem; font-weight: 500;
  color: var(--slc-ink-500); text-decoration: none; transition: color .15s ease, background .15s ease;
}
.slc-cart__remove:hover { color: var(--slc-danger); background: rgb(198 40 40 / 6%); }

.slc-cart__itemsfoot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding-block: 1rem; border-top: 1px solid var(--slc-line);
}
.slc-cart__back {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .875rem; font-weight: 600; color: var(--slc-ink-900); text-decoration: none;
}
.slc-cart__back:hover { text-decoration: underline; text-underline-offset: 2px; }
.slc-cart__backicon { transform: rotate(180deg); }

@media (max-width: 559px) {
  .slc-cart__items { padding-inline: 1rem; }
  .slc-cart__item {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "thumb info"
      "thumb controls"
      "thumb line";
  }
  .slc-cart__thumb a, .slc-cart__thumb img { width: 72px; height: 72px; }
  .slc-cart__line { text-align: left; }
}

/* ------------------------------------------------------------------
   Entrega e cupom
   ------------------------------------------------------------------ */

.slc-cart__inline { display: flex; gap: .5rem; }
.slc-cart__input { flex: 1 1 auto; min-width: 0; border-radius: var(--slc-radius-btn); }
.slc-cart__input:focus { outline: none; border-color: var(--slc-ink-700); box-shadow: 0 0 0 3px rgb(245 179 1 / 35%); }
.slc-cart__input--code { text-transform: uppercase; letter-spacing: .04em; }
.slc-cart__input--code::placeholder { text-transform: none; letter-spacing: 0; }
.slc-cart__apply { flex: 0 0 auto; border-radius: var(--slc-radius-btn); padding-inline: 1rem; }

.slc-cart__help {
  display: inline-block; margin-top: .5rem;
  font-size: .8125rem; color: var(--slc-ink-500); text-decoration: underline; text-underline-offset: 2px;
}
.slc-cart__help:hover { color: var(--slc-ink-900); }

.slc-cart__error { margin: .5rem 0 0; font-size: .8125rem; font-weight: 600; color: var(--slc-danger); }
.slc-cart__error[hidden] { display: none; }

.slc-cart__hint { margin: .75rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--slc-ink-500); }

.slc-cart__dest {
  display: flex; align-items: flex-start; gap: .375rem;
  margin: .875rem 0 .625rem; font-size: .8125rem; color: var(--slc-ink-500);
}
.slc-cart__dest svg { flex: 0 0 auto; margin-top: 1px; }
.slc-cart__dest strong { color: var(--slc-ink-900); }

.slc-cart__norate {
  display: flex; gap: .5rem; margin: .5rem 0 0; padding: .75rem;
  border-radius: var(--slc-radius); background: var(--slc-yellow-soft); font-size: .8125rem; line-height: 1.45;
}
.slc-cart__norate svg { flex: 0 0 auto; }

.slc-cart__rates { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.slc-cart__legend { margin-bottom: .375rem; padding: 0; font-size: .8125rem; font-weight: 700; }

/* Cada forma de entrega e um cartao clicavel; o radio fica dentro. */
.slc-cart__rate {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .625rem;
  padding: .75rem .875rem; cursor: pointer;
  border: 1.5px solid var(--slc-line); border-radius: var(--slc-radius);
  transition: border-color .15s ease, background .15s ease;
}
.slc-cart__rate:hover { border-color: var(--slc-ink-300); }
.slc-cart__rate:has(input:checked) { border-color: var(--slc-ink-900); background: var(--slc-ink-100); }
.slc-cart__rate:has(input:focus-visible) { outline: 2px solid var(--slc-ink-900); outline-offset: 2px; }
.slc-cart__rate input { width: 18px; height: 18px; margin: 0; accent-color: var(--slc-ink-900); }
.slc-cart__rateicon { display: grid; color: var(--slc-ink-500); }
.slc-cart__ratename { min-width: 0; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.slc-cart__ratename small { display: block; margin-top: .125rem; font-size: .75rem; font-weight: 400; color: var(--slc-ink-500); }
.slc-cart__rateprice { font-size: .875rem; font-weight: 700; white-space: nowrap; }
.slc-cart__rateprice.is-free { color: var(--slc-success); }

/* Cupons aplicados */
.slc-cart__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .875rem 0 0; padding: 0; list-style: none; }
.slc-cart__chip {
  display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .25rem .25rem .625rem;
  border: 1.5px dashed var(--slc-success); border-radius: var(--slc-pill);
  background: rgb(27 138 75 / 8%); color: var(--slc-success); font-size: .8125rem;
}
.slc-cart__chipcode { font-weight: 700; letter-spacing: .04em; color: var(--slc-ink-900); }
.slc-cart__chipvalue { font-weight: 600; }
.slc-cart__chipremove {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  color: var(--slc-ink-500); transition: background .15s ease, color .15s ease;
}
.slc-cart__chipremove:hover { background: rgb(17 19 21 / 8%); color: var(--slc-ink-900); }

/* ------------------------------------------------------------------
   Resumo
   ------------------------------------------------------------------ */

.slc-cart__totals { display: grid; gap: .625rem; margin: 0; font-size: .9375rem; }
.slc-cart__totals > div { display: flex; justify-content: space-between; gap: 1rem; }
.slc-cart__totals dt { color: var(--slc-ink-500); }
.slc-cart__totals dd { margin: 0; font-weight: 600; text-align: right; }
.slc-cart__totals .is-discount dd,
.slc-cart__totals .is-free dd { color: var(--slc-success); }

.slc-cart__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--slc-line);
}
.slc-cart__total span { font-size: 1rem; font-weight: 700; }
.slc-cart__total strong { font-size: 1.625rem; line-height: 1.1; letter-spacing: -.02em; }

.slc-cart__note { margin: .375rem 0 0; font-size: .75rem; color: var(--slc-ink-500); text-align: right; }

.slc-cart__checkout {
  width: 100%; min-height: 52px; margin-top: 1.125rem;
  border-radius: var(--slc-radius-btn); font-size: 1rem; font-weight: 700;
  background: var(--slc-buy-bg); color: var(--slc-buy-ink);
}
.slc-cart__checkout:hover { background: var(--slc-buy-bg-hover); color: var(--slc-buy-ink); }

.slc-cart__secure {
  display: flex; align-items: center; justify-content: center; gap: .375rem;
  margin: .75rem 0 0; font-size: .75rem; color: var(--slc-ink-500);
}
.slc-cart__secure svg { color: var(--slc-success); }

/* Barra de total no celular: acompanha a rolagem enquanto o carrinho
   esta na tela, e para no fim dele em vez de cobrir o rodape. */
.slc-cart__bar { display: none; }

@media (max-width: 959px) {
  .slc-cart__bar {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin: 1.25rem -1rem 0; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background: var(--slc-surface); box-shadow: 0 -6px 20px rgb(17 19 21 / 10%);
  }
  .slc-cart__bartotal { display: grid; line-height: 1.2; }
  .slc-cart__bartotal span { font-size: .75rem; color: var(--slc-ink-500); }
  .slc-cart__bartotal strong { font-size: 1.25rem; }
  .slc-cart__bar .slc-cart__checkout { width: auto; min-height: 48px; margin: 0; padding-inline: 1.5rem; }
}

/* Sugestoes */
.slc-cart__suggest { margin-top: 2.5rem; }
.slc-cart__suggesttitle { margin: 0 0 1rem; font-size: clamp(1.125rem, 3vw, 1.375rem); }

/* Aviso de erro que o cartpage.js poe no topo. */
.slc-cart__alert { margin-bottom: 1rem; }

/* ------------------------------------------------------------------
   Carrinho vazio
   ------------------------------------------------------------------ */

.slc-cart__empty {
  display: grid; justify-items: center; gap: .5rem;
  max-width: 560px; margin: 1rem auto 0; padding: 3rem 1.5rem; text-align: center;
}
.slc-cart__emptyicon {
  display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: .5rem;
  border-radius: 50%; background: var(--slc-yellow-soft); color: var(--slc-ink-900);
}
.slc-cart__emptytitle { margin: 0; font-size: 1.375rem; }
.slc-cart__emptytext { margin: 0 0 1rem; color: var(--slc-ink-500); }

/* Cupom abaixo da lista de itens, na largura da coluna. No desktop o
   titulo fica a esquerda e o campo ocupa o resto da linha. */
.slc-cart__main { display: grid; gap: 1rem; min-width: 0; }

@media (min-width: 720px) {
  .slc-cart__coupon {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem 1.5rem;
  }
  .slc-cart__coupon .slc-cart__cardtitle { margin: 0; }
  .slc-cart__coupon .slc-cart__error,
  .slc-cart__coupon .slc-cart__chips { grid-column: 2; }
  .slc-cart__coupon .slc-cart__error { margin-top: 0; }
  .slc-cart__coupon .slc-cart__chips { margin-top: .25rem; }
}