@charset "UTF-8";
/* Componentes base + card de produto. Fonte: design_handoff_sublim/README.md */
/* ---------- Botão ---------- */
.sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sb-2);
  min-height: 46px;
  padding: 0 var(--sb-6);
  border: 0;
  border-radius: var(--sb-r-md);
  font: 700 0.9375rem/1 var(--sb-font);
  cursor: pointer;
  transition: background 0.15s;
}

.sb-btn--primary {
  background: var(--sb-action);
  color: #fff;
}

.sb-btn--primary:hover {
  background: var(--sb-action-hover);
}

.sb-btn--custom {
  background: var(--sb-custom);
  color: #fff;
}

.sb-btn--custom:hover {
  background: var(--sb-custom-hover);
}

.sb-btn--secondary {
  background: transparent;
  color: var(--sb-ink-900);
  box-shadow: inset 0 0 0 1.5px var(--sb-ink-900);
}

.sb-btn--secondary:hover {
  background: var(--sb-ink-900);
  color: #fff;
}

.sb-btn--sm {
  min-height: 36px;
  padding: 0 var(--sb-4);
  font-size: 0.8125rem;
}

.sb-btn--lg {
  min-height: 56px;
  padding: 0 var(--sb-8);
  font-size: 1rem;
}

.sb-btn--block {
  width: 100%;
}

.sb-btn:focus-visible {
  box-shadow: var(--sb-focus);
}

.sb-btn[disabled] {
  background: var(--sb-ink-100);
  color: var(--sb-ink-300);
  cursor: not-allowed;
}

/* ---------- Campos de formulário ---------- */
.sb-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sb-field__label {
  font: 600 13px/1.2 var(--sb-font);
  color: var(--sb-ink-700);
}

.sb-field__help {
  font: 400 12px/1.4 var(--sb-font);
  color: var(--sb-ink-400);
}

.sb-field__error {
  font: 500 12px/1.4 var(--sb-font);
  color: var(--sb-danger);
}

.sb-input, .sb-select, .sb-textarea {
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--sb-ink-200);
  border-radius: var(--sb-r-md);
  font-size: 15px;
  background: #fff;
  width: 100%;
}

.sb-textarea {
  height: auto;
  min-height: 132px;
  padding-block: 12px;
  resize: vertical;
  line-height: 1.55;
}

.sb-input:focus, .sb-select:focus, .sb-textarea:focus {
  outline: 0;
  border-color: var(--sb-cyan-600);
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.25);
}

.sb-field--error .sb-input,
.sb-field--error .sb-select,
.sb-field--error .sb-textarea {
  border-color: var(--sb-danger);
}

@media (max-width: 767px) {
  .sb-input, .sb-select, .sb-textarea {
    height: 48px;
  }
}
/* ---------- Stepper de quantidade ---------- */
.sb-stepper {
  display: flex;
  align-items: stretch;
  height: 46px;
  width: 132px;
  border: 1.5px solid var(--sb-ink-200);
  border-radius: var(--sb-r-md);
  overflow: hidden;
}

.sb-stepper__btn {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sb-ink-50);
  font-size: 19px;
}

.sb-stepper__field {
  flex: 1;
  text-align: center;
  border: 0;
  font: 700 15px/1 var(--sb-font);
  font-variant-numeric: tabular-nums;
}

/* ---------- Seletor de cor / variante ---------- */
.sb-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--sb-ink-200);
}

.sb-swatch.is-selected {
  border: 2px solid var(--sb-ink-900);
}

.sb-swatch--sm {
  width: 18px;
  height: 18px;
}

@media (max-width: 767px) {
  .sb-swatch {
    width: 44px;
    height: 44px;
  }
}
/* ---------- Badge ---------- */
.sb-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--sb-r-pill);
  font: 700 11.5px/1 var(--sb-font);
  border: 1px solid transparent;
}

.sb-badge--modo-pronto {
  background: var(--sb-ink-900);
  color: #fff;
}

.sb-badge--modo-custom {
  background: var(--sb-cyan-50);
  color: var(--sb-cyan-700);
  border-color: var(--sb-cyan-100);
}

.sb-badge--promo {
  background: var(--sb-yellow-300);
  color: var(--sb-ink-900);
}

.sb-badge--bestseller {
  background: var(--sb-magenta-50);
  color: var(--sb-magenta-600);
  border-color: var(--sb-magenta-100);
}

.sb-badge--neutral {
  background: var(--sb-ink-50);
  color: var(--sb-ink-600);
  border-color: var(--sb-ink-100);
}

.sb-badge--approved {
  background: var(--sb-success-bg);
  color: var(--sb-success);
  border-color: var(--sb-success-bd);
}

/* ---------- Chip de filtro ---------- */
.sb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--sb-r-pill);
  font: 500 13.5px/1 var(--sb-font);
  background: #fff;
  border: 1px solid var(--sb-ink-200);
}

.sb-chip.is-active {
  background: var(--sb-ink-900);
  color: #fff;
  border-color: var(--sb-ink-900);
}

.sb-chip__remove {
  font-weight: 700;
}

/* ---------- Aviso ---------- */
.sb-alert {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  position: relative;
  padding-left: 24px;
}

.sb-alert::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 12px;
  width: 8px;
  border-radius: var(--sb-r-pill);
}

.sb-alert__title {
  font: 700 14px/1.3 var(--sb-font);
  margin-bottom: 2px;
}

.sb-alert__body {
  font: 400 13px/1.5 var(--sb-font);
}

.sb-alert--info {
  background: var(--sb-cyan-50);
  border: 1px solid var(--sb-cyan-100);
  color: var(--sb-cyan-800);
}

.sb-alert--info::before {
  background: var(--sb-cyan-600);
}

.sb-alert--warning {
  background: var(--sb-yellow-50);
  border: 1px solid var(--sb-yellow-100);
  color: var(--sb-yellow-800);
}

.sb-alert--warning::before {
  background: var(--sb-orange-500);
}

.sb-alert--success {
  background: var(--sb-success-bg);
  border: 1px solid var(--sb-success-bd);
  color: #0A5C37;
}

.sb-alert--success::before {
  background: var(--sb-success);
}

/* ---------- Card de produto — .sb-card ---------- */
.sb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sb-ink-100);
  border-radius: var(--sb-r-lg);
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.15s;
}

.sb-card:hover {
  box-shadow: var(--sb-shadow-sm);
}

.sb-card__media {
  position: relative;
  aspect-ratio: 1;
  background: #fff;
  overflow: hidden;
}

.sb-card__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.sb-card__image {
  position: absolute;
  inset: 0;
  transition: opacity 0.25s ease;
}

.sb-card__image--primary {
  opacity: 1;
}

.sb-card__image--secondary {
  opacity: 0;
}

@media (hover: hover) {
  .sb-card__media.has-secondary-image:hover .sb-card__image--primary {
    opacity: 0;
  }
  .sb-card__media:hover .sb-card__image--secondary {
    opacity: 1;
  }
}
.sb-card__media-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(135deg, #F6F6F7 0 8px, #ECECEE 8px 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 11px/1.4 monospace;
  color: var(--sb-ink-400);
  text-align: center;
  padding: var(--sb-2);
}

.sb-card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
}

.sb-card__fav {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--sb-ink-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sb-ink-900);
  box-shadow: 0 1px 2px rgba(23, 23, 26, 0.06);
}

.sb-card__fav svg {
  display: block;
}

.sb-card__fav:hover {
  border-color: var(--sb-ink-200);
  color: var(--sb-magenta-500);
}

/* Botão de favoritar na página de produto (mesmo visual redondo do card). */
.sb-product-summary {
  position: relative;
}

.sb-product-fav {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--sb-ink-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sb-ink-900);
  box-shadow: 0 1px 2px rgba(23, 23, 26, 0.06);
}

.sb-product-fav svg {
  display: block;
}

.sb-product-fav:hover {
  border-color: var(--sb-ink-200);
  color: var(--sb-magenta-500);
}

/* Integração TI WooCommerce Wishlist. O ícone é um ::before no próprio <a>
   (.tinvwl-icon-heart); o wrapper .tinv-wishlist vira uma caixa flex que
   centraliza esse link no tamanho natural dentro do nosso botão redondo. */
.sb-card__fav--wishlist,
.sb-product-fav--wishlist {
  padding: 0;
  overflow: hidden;
  line-height: 0;
}

.sb-card__fav--wishlist .tinv-wishlist,
.sb-product-fav--wishlist .tinv-wishlist {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
}

.sb-card__fav--wishlist .tinvwl_add_to_wishlist_button,
.sb-product-fav--wishlist .tinvwl_add_to_wishlist_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: none;
  border: 0;
  box-shadow: none;
  color: inherit;
  line-height: 1;
  text-indent: 0;
}

.sb-card__fav--wishlist .tinvwl_add_to_wishlist_button {
  font-size: 16px;
}

.sb-product-fav--wishlist .tinvwl_add_to_wishlist_button {
  font-size: 19px;
}

/* O TI posiciona o glifo com position:absolute; top/left:50%, o que o joga
   pro canto e impede o flex de centralizar. Neutralizamos e deixamos o flex
   do <a> cuidar do alinhamento. */
.sb-card__fav--wishlist .tinvwl_add_to_wishlist_button::before,
.sb-product-fav--wishlist .tinvwl_add_to_wishlist_button::before {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  display: block;
  margin: 0 !important;
  line-height: 1 !important;
}

.sb-card__fav--wishlist .tinvwl_add_to_wishlist-text,
.sb-product-fav--wishlist .tinvwl_add_to_wishlist-text,
.sb-card__fav--wishlist .tinvwl-tooltip,
.sb-product-fav--wishlist .tinvwl-tooltip {
  display: none !important;
}

/* Estado "favoritado" (classe fica no próprio <a>) e hover — coração em magenta. */
.sb-card__fav--wishlist .tinvwl-product-in-list,
.sb-product-fav--wishlist .tinvwl-product-in-list,
.sb-card__fav--wishlist .tinvwl_add_to_wishlist_button:hover,
.sb-product-fav--wishlist .tinvwl_add_to_wishlist_button:hover {
  color: var(--sb-magenta-500);
}

.sb-card__sold-out {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px;
  text-align: center;
  background: rgba(23, 23, 26, 0.85);
  color: #fff;
  font: 700 12px/1 var(--sb-font);
}

.sb-card.is-sold-out .sb-card__body {
  opacity: 0.62;
}

.sb-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 15px;
  flex: 1;
}

.sb-card__eyebrow {
  color: var(--sb-ink-400);
  font-size: 10px;
}

.sb-card__title {
  color: var(--sb-ink-900);
}

.sb-card__rating {
  font-size: 12px;
  color: var(--sb-ink-500);
  display: flex;
  align-items: center;
  gap: 4px;
}

.sb-card__swatches {
  display: flex;
  gap: 5px;
  align-items: center;
}

.sb-card__price-block {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sb-card__price-old {
  font-size: 13px;
  color: var(--sb-ink-400);
  text-decoration: line-through;
}

.sb-card__price-now {
  color: var(--sb-ink-900);
}

.sb-card__price-now.is-promo {
  color: var(--sb-magenta-600);
}

.sb-card__installment {
  font: 400 11.5px/1.3 var(--sb-font);
  color: var(--sb-ink-500);
}

.sb-card__cta {
  margin-top: var(--sb-1);
}

/* ---- Modo catálogo (body.sublim-catalog / .sublim-price-*) ---- */
/* "Sob consulta" não é um número de preço — não usa o tamanho grande do .sb-price. */
.sb-card__price-block .sb-price--quote {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.sb-card__price-block .sb-price-from {
  display: block;
  font: 600 11.5px/1.3 var(--sb-font);
  color: var(--sb-ink-500);
}

/* "Pedir orçamento" é mais longo que "Comprar" — reduz a fonte do CTA no catálogo. */
body.sublim-catalog .sb-card__cta {
  font-size: 0.8125rem;
}

/* ============================================================================
   EFEITOS DE HOVER DO BOTÃO DO CARD — escolhidos via data-sb-fx (no PHP).
   Estrutura: dois rótulos sobrepostos (.sb-cta-face base / .sb-cta-fill hover).
   A caixa externa continua sendo um .sb-btn normal (mesma altura/padding/raio
   dos demais botões); as camadas só se sobrepõem por dentro.
   ============================================================================ */
.sb-card__cta[data-sb-fx] {
  position: relative;
}

/* rótulo base fica no fluxo normal do botão (herda padding/altura do .sb-btn) */
.sb-card__cta[data-sb-fx] .sb-cta-face {
  position: relative;
  z-index: 1;
}

/* camada de hover cobre o botão inteiro e centraliza o próprio rótulo */
.sb-card__cta[data-sb-fx] .sb-cta-fill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- OPÇÃO A: "drip" — gota com borda ondulada (port fiel do Splatoon UI) ----------
   O clip-path com curvas (--drip-*) é gerado por assets/js/drip.js (a "matemática do
   preenchimento"). As transições de estado seguem o data-drip-state setado por lá.
   Fonte: YoungSx/splatoon-ui — button.module.css + drip-math.ts                            */
.sb-card__cta[data-sb-fx=drip] {
  /* repouso PREENCHIDO na cor de marca (--brand, por modo). A tinta CMY (--fill-color)
     escorre no hover e é trocada pelo JS (ciclo C→M→Y). */
  --brand: var(--sb-action);
  --fill-color: var(--cmy-m);
  --fill-text: #fff;
  /* tinta CMY: C e M escuros p/ contrastar com os botões; Y vivo (nenhum botão é amarelo) */
  --cmy-c: var(--sb-cyan-700);
  --cmy-m: var(--sb-magenta-600);
  --cmy-y: var(--sb-yellow-300);
  --drip-speed-factor: 1;
  overflow: hidden;
  background: var(--brand);
  color: #fff;
}

/* Comprar (pronto) = magenta; Personalizar (custom) = cyan — conforme o handoff. */
.sb-card[data-sb-modo=pronto] .sb-card__cta[data-sb-fx=drip] {
  --brand: var(--sb-action);
}

.sb-card[data-sb-modo=custom] .sb-card__cta[data-sb-fx=drip] {
  --brand: var(--sb-custom);
}

.sb-card__cta[data-sb-fx=drip] .sb-cta-face {
  position: relative;
  z-index: 1;
}

/* camada de hover que "enche" o botão via clip-path ondulado.
   inset negativo: cobre ~1.5px além da borda p/ eliminar o fio de artefato nas beiras. */
.sb-card__cta[data-sb-fx=drip] .sb-cta-fill {
  position: absolute;
  inset: -1.5px;
  z-index: 2;
  overflow: hidden;
  background-color: var(--fill-color);
  color: var(--fill-text);
  opacity: 0;
  pointer-events: none;
  clip-path: var(--drip-out-end, polygon(0 100%, 0 100%, 100% 100%, 100% 100%));
  animation: sb-splat-drip-leave calc(1.8s * var(--drip-speed-factor)) ease forwards;
}

.sb-cta-fill__frame {
  display: none;
}

.sb-cta-fill__label {
  position: relative;
  z-index: 1;
}

/* estados (data-drip-state setado pelo JS) */
.sb-card__cta[data-sb-fx=drip][data-drip-state=entering] .sb-cta-fill,
.sb-card__cta[data-sb-fx=drip][data-drip-state=entered] .sb-cta-fill,
.sb-card__cta[data-sb-fx=drip][data-drip-state=leaving] .sb-cta-fill {
  opacity: 1;
}

.sb-card__cta[data-sb-fx=drip][data-drip-state=entering] .sb-cta-fill {
  animation: sb-splat-drip-enter calc(1.8s * var(--drip-speed-factor)) ease forwards;
}

.sb-card__cta[data-sb-fx=drip][data-drip-state=entered] .sb-cta-fill {
  animation: none;
  clip-path: var(--drip-in-end);
}

.sb-card__cta[data-sb-fx=drip][data-drip-state=leaving] .sb-cta-fill {
  animation: sb-splat-drip-leave calc(1.8s * var(--drip-speed-factor)) ease forwards;
}

@keyframes sb-splat-drip-enter {
  0% {
    clip-path: var(--drip-in-start);
  }
  100% {
    clip-path: var(--drip-in-end);
  }
}
@keyframes sb-splat-drip-leave {
  0% {
    clip-path: var(--drip-out-start);
  }
  100% {
    clip-path: var(--drip-out-end);
  }
}
/* fallback sem JS (ou reduced-motion): mostra a face cyan e, no hover, enche reto */
.sb-card__cta[data-sb-fx=drip]:not([data-drip-state]) .sb-cta-fill {
  animation: none;
}

@media (hover: hover) {
  .sb-card__cta[data-sb-fx=drip]:not([data-drip-state]):hover .sb-cta-fill {
    opacity: 1;
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    transition: clip-path 0.5s ease, opacity 0.2s ease;
  }
}
/* ---------- OPÇÃO B: "onda" — enchimento líquido CMY que ondula ao subir ---------- */
.sb-card__cta[data-sb-fx=onda] .sb-cta-fill {
  display: none;
} /* onda usa só a face + pseudos */
.sb-card__cta[data-sb-fx=onda] .sb-cta-face {
  position: relative;
  z-index: 1;
}

.sb-card__cta[data-sb-fx=onda] {
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s ease 0.2s;
}

/* Duas camadas de líquido (::before magenta = crista; ::after amarelo = corpo). */
.sb-card__cta[data-sb-fx=onda]::before,
.sb-card__cta[data-sb-fx=onda]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translateY(101%);
  transition: transform 0.6s cubic-bezier(0.72, 0, 0.28, 1);
  /* silhueta de onda (tileável em 140px) recortando a cor sólida da camada */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 40' preserveAspectRatio='none'%3E%3Cpath d='M0 14C23 4 47 4 70 14 93 24 117 24 140 14V40H0Z' fill='%23000'/%3E%3C/svg%3E") repeat-x 0 top/140px 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 40' preserveAspectRatio='none'%3E%3Cpath d='M0 14C23 4 47 4 70 14 93 24 117 24 140 14V40H0Z' fill='%23000'/%3E%3C/svg%3E") repeat-x 0 top/140px 100%;
  animation: sb-wave-scroll 1.7s linear infinite;
}

.sb-card__cta[data-sb-fx=onda]::after {
  background: var(--sb-yellow-400);
  animation-duration: 2.3s;
}

.sb-card__cta[data-sb-fx=onda]::before {
  background: var(--sb-magenta-500);
}

.sb-card__cta[data-sb-fx=onda]:hover {
  color: var(--sb-ink-900);
}

.sb-card__cta[data-sb-fx=onda]:hover::before {
  transform: translateY(0);
}

.sb-card__cta[data-sb-fx=onda]:hover::after {
  transform: translateY(0);
  transition-delay: 0.12s;
}

@keyframes sb-wave-scroll {
  to {
    -webkit-mask-position: -140px top;
    mask-position: -140px top;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sb-card__cta[data-sb-fx=onda]::before,
  .sb-card__cta[data-sb-fx=onda]::after,
  .sb-card__cta[data-sb-fx=drip] .sb-cta-fill {
    animation: none;
    transition: none;
  }
  .sb-card__cta[data-sb-fx=drip]:hover .sb-cta-fill {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  }
}
/* ---------- Loader (spinner gooey CMYK) ---------- */
/* Adaptado de codepen ainalem/eYmGLyp com as cores da marca. Ver sublima_loader(). */
.sb-loader-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.sb-loader__stop1 {
  stop-color: var(--sb-magenta-500);
}

.sb-loader__stop2 {
  stop-color: var(--sb-yellow-300);
}

.sb-loader {
  --sb-loader-size: 48px;
  position: relative;
  display: inline-flex;
  width: var(--sb-loader-size);
  height: var(--sb-loader-size);
}

.sb-loader__snurra,
.sb-loader__skugga {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sb-loader__snurra {
  filter: url(#sb-loader-goo);
  z-index: 1;
}

/* sombra atrás do spinner nítido (senão a cópia borrada fica por cima) */
.sb-loader__skugga {
  filter: blur(4px);
  opacity: 0.3;
  transform: translate(2px, 2px);
  z-index: 0;
}

.sb-loader__halvan {
  animation: sb-loader-spin 10s infinite linear;
  stroke-dasharray: 180 800;
  fill: none;
  stroke: url(#sb-loader-gradient);
  stroke-width: 23;
  stroke-linecap: round;
}

.sb-loader__strecken {
  animation: sb-loader-spin 3s infinite linear;
  stroke-dasharray: 26 54;
  fill: none;
  stroke: url(#sb-loader-gradient);
  stroke-width: 23;
  stroke-linecap: round;
}

.sb-loader__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@keyframes sb-loader-spin {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -403px;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Loaders precisam comunicar atividade; mantemos só o giro simples do traço. */
  .sb-loader__halvan {
    animation: none;
  }
  .sb-loader__strecken {
    animation-duration: 1.5s;
  }
}
/* Overlay do loader sobre uma área que está carregando (ex.: grid da listagem). */
.sb-loader-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.55);
}

.sb-loader-overlay[hidden] {
  display: none;
}

/* Sobre um viewer 3D (produto/shortcode) ou no mini-cart: centralizado e opaco. */
.sb-loader-overlay--viewer,
[data-sb-cart-loading] {
  align-items: center;
  padding-top: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 5;
}

.sb-loader-overlay--viewer .sb-loader,
[data-sb-cart-loading] .sb-loader {
  --sb-loader-size: 56px;
}