/*
 * Aviso "Faltam R$ X para frete grátis" (storefront-free-shipping.js).
 * Classes próprias (sf-fs-*), sem utilitário Tailwind: o Carbon troca as cores
 * das classes claras dentro de <main>, e aqui cada tema escolhe as suas.
 * A cor de destaque é a principal da loja (--brand); o Carbon escuro usa a
 * dele (--cb-accent, que também é a cor da loja).
 */
[data-sf-free-shipping][hidden] { display: none !important; }

.sf-fs {
  --sf-fs-accent: var(--brand, #2563eb);
  --sf-fs-ok: #16a34a;
  --sf-fs-bg: color-mix(in srgb, var(--sf-fs-accent) 7%, #fff);
  --sf-fs-border: color-mix(in srgb, var(--sf-fs-accent) 38%, #e2e8f0);
  --sf-fs-text: #0f172a;
  --sf-fs-muted: #64748b;
  --sf-fs-value: color-mix(in srgb, var(--sf-fs-accent) 72%, #000);
  --sf-fs-icon-bg: color-mix(in srgb, var(--sf-fs-accent) 16%, #fff);
  --sf-fs-icon: color-mix(in srgb, var(--sf-fs-accent) 80%, #000);
  --sf-fs-track: color-mix(in srgb, var(--sf-fs-accent) 14%, #e2e8f0);
  --sf-fs-fill: var(--sf-fs-accent);
  position: relative;
  padding: 12px 14px 13px;
  border: 1px solid var(--sf-fs-border);
  border-radius: 12px;
  background: var(--sf-fs-bg);
  color: var(--sf-fs-text);
  font-size: 14px;
  line-height: 1.4;
}

.sf-fs.is-reached {
  --sf-fs-bg: color-mix(in srgb, var(--sf-fs-ok) 8%, #fff);
  --sf-fs-border: color-mix(in srgb, var(--sf-fs-ok) 40%, #e2e8f0);
  --sf-fs-icon-bg: color-mix(in srgb, var(--sf-fs-ok) 16%, #fff);
  --sf-fs-icon: #15803d;
  --sf-fs-track: color-mix(in srgb, var(--sf-fs-ok) 16%, #e2e8f0);
  --sf-fs-fill: var(--sf-fs-ok);
}

.sf-fs-row { display: flex; align-items: center; gap: 12px; }
.sf-fs-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--sf-fs-icon-bg);
  color: var(--sf-fs-icon);
}
.sf-fs-copy { min-width: 0; flex: 1; }
.sf-fs-title { margin: 0; font-weight: 500; }
.sf-fs-title strong { font-weight: 700; }
.sf-fs-value { font-size: 16px; font-weight: 800; color: var(--sf-fs-value); white-space: nowrap; }
.sf-fs.is-reached .sf-fs-title { font-weight: 600; color: #15803d; }
.sf-fs-note { margin: 2px 0 0; font-size: 12px; color: var(--sf-fs-muted); }

.sf-fs-bar {
  margin-top: 10px;
  height: 7px;
  border-radius: 999px;
  background: var(--sf-fs-track);
  overflow: hidden;
}
.sf-fs-bar > span {
  position: relative;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sf-fs-fill);
  transition: width .45s ease, background-color .3s ease;
  overflow: hidden;
}
/* Brilho que atravessa a barra devagar: chama o olho sem piscar. */
.sf-fs:not(.is-reached) .sf-fs-bar > span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: sf-fs-shine 2.8s ease-in-out infinite;
}
@keyframes sf-fs-shine {
  0%, 35% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Na hora em que o frete grátis é alcançado: dois pulsos e pronto. */
.sf-fs.is-celebrate { animation: sf-fs-pulse .8s ease-out 2; }
.sf-fs.is-celebrate .sf-fs-icon { animation: sf-fs-pop .5s ease-out; }
@keyframes sf-fs-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sf-fs-ok) 55%, transparent); }
  100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--sf-fs-ok) 0%, transparent); }
}
@keyframes sf-fs-pop {
  0% { transform: scale(.6); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Frete grátis por categoria: algum item do carrinho não tem a regra.
   Neutro (sem barra): somar mais itens não resolve. */
.sf-fs.is-blocked {
  --sf-fs-bg: #f8fafc;
  --sf-fs-border: #e2e8f0;
  --sf-fs-icon-bg: #f1f5f9;
  --sf-fs-icon: #64748b;
}
.cb-dark main .sf-fs.is-blocked {
  --sf-fs-bg: #171717;
  --sf-fs-border: #2a2a2a;
  --sf-fs-icon-bg: #262626;
  --sf-fs-icon: #a3a3a3;
  box-shadow: none;
}

/* Gaveta do carrinho: mais compacto, acima do total. */
#cart-free-shipping.sf-fs { padding: 10px 12px 11px; }
#cart-free-shipping .sf-fs-icon { width: 32px; height: 32px; }
#cart-free-shipping .sf-fs-note { display: none; }
#cart-free-shipping .sf-fs-bar { margin-top: 8px; height: 6px; }

/* Carbon (fundo escuro na página do produto): superfície escura com borda,
   valor e barra na cor da loja; verde do próprio tema ao alcançar. */
.cb-dark main .sf-fs {
  --sf-fs-accent: var(--cb-accent, var(--brand, #ff7300));
  --sf-fs-ok: var(--cb-green, #2fd15c);
  --sf-fs-bg: color-mix(in srgb, var(--sf-fs-accent) 11%, #131313);
  --sf-fs-border: color-mix(in srgb, var(--sf-fs-accent) 55%, #262626);
  --sf-fs-text: #f5f5f5;
  --sf-fs-muted: #a3a3a3;
  --sf-fs-value: color-mix(in srgb, var(--sf-fs-accent) 82%, #fff);
  --sf-fs-icon-bg: color-mix(in srgb, var(--sf-fs-accent) 22%, #131313);
  --sf-fs-icon: color-mix(in srgb, var(--sf-fs-accent) 82%, #fff);
  --sf-fs-track: #262626;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sf-fs-accent) 12%, transparent), 0 8px 24px -14px color-mix(in srgb, var(--sf-fs-accent) 60%, transparent);
}
.cb-dark main .sf-fs.is-reached {
  --sf-fs-bg: color-mix(in srgb, var(--sf-fs-ok) 10%, #131313);
  --sf-fs-border: color-mix(in srgb, var(--sf-fs-ok) 50%, #262626);
  --sf-fs-icon-bg: color-mix(in srgb, var(--sf-fs-ok) 20%, #131313);
  --sf-fs-icon: var(--sf-fs-ok);
  --sf-fs-track: #262626;
  box-shadow: none;
}
.cb-dark main .sf-fs.is-reached .sf-fs-title { color: var(--sf-fs-ok); }
.cb-dark main .sf-fs:not(.is-reached) .sf-fs-bar > span::after {
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%);
}

@media (prefers-reduced-motion: reduce) {
  .sf-fs, .sf-fs *, .sf-fs *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .sf-fs { border: 1px solid CanvasText; }
  .sf-fs-bar { border: 1px solid CanvasText; }
  .sf-fs-bar > span { background: Highlight; forced-color-adjust: none; }
}