/* ────────────────────────────────────────────────────────────────
   Complemento do theme.css (que é o arquivo original do tema, intocado).

   1. O que na Shopify vinha em <style> dentro da página: fontes, as variáveis
      de cor do editor de tema, tamanho da logo, o botão de WhatsApp.
   2. Ajustes da vitrine nova (marcados como "novo"), poucos e pequenos.
   ──────────────────────────────────────────────────────────────── */

/* 1. Fontes — Poppins, servida daqui em vez do CDN da Shopify */
@font-face { font-family: Poppins; font-weight: 400; font-style: normal; font-display: fallback; src: url("fontes/poppins_n4.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 600; font-style: normal; font-display: fallback; src: url("fontes/poppins_n6.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 700; font-style: normal; font-display: fallback; src: url("fontes/poppins_n7.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 400; font-style: italic; font-display: fallback; src: url("fontes/poppins_i4.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 700; font-style: italic; font-display: fallback; src: url("fontes/poppins_i7.woff2") format("woff2"); }

/* Variáveis do editor de tema (cópia fiel da loja original) */
:root {
  --default-text-font-size : 15px;
  --base-text-font-size    : 15px;
  --heading-font-family    : Poppins, sans-serif;
  --heading-font-weight    : 400;
  --heading-font-style     : normal;
  --text-font-family       : Poppins, sans-serif;
  --text-font-weight       : 400;
  --text-font-style        : normal;
  --text-font-bolder-weight: 600;
  --text-link-decoration   : underline;

  --text-color               : #000000;
  --text-color-rgb           : 0, 0, 0;
  --heading-color            : #000000;
  --border-color             : #1a1a1a;
  --border-color-rgb         : 26, 26, 26;
  --form-border-color        : #0d0d0d;
  --accent-color             : #000000;
  --accent-color-rgb         : 0, 0, 0;
  --link-color               : #000000;
  --link-color-hover         : #000000;
  --background               : #ffffff;
  --secondary-background     : #ffffff;
  --secondary-background-rgb : 255, 255, 255;
  --accent-background        : rgba(0, 0, 0, 0.08);
  --corstars                 : #ffce00;
  --cordabarra               : #ffffff;
  --cordotexto               : #000000;

  --error-color       : #f71b1b;
  --error-background  : rgba(247, 27, 27, 0.07);
  --success-color     : #00d864;
  --success-background: rgba(0, 216, 100, 0.11);

  --primary-button-background      : #000000;
  --primary-button-background-rgb  : 0, 0, 0;
  --primary-button-text-color      : #ffffff;
  --secondary-button-background    : #000000;
  --secondary-button-background-rgb: 0, 0, 0;
  --secondary-button-text-color    : #FFFFFF;

  --footer-background        : #000000;
  --footer-text-color        : #ffffff;

  --header-background      : #000000;
  --header-text-color      : #ffffff;
  --header-light-text-color: #333333;
  --header-border-color    : rgba(51, 51, 51, 0.3);
  --header-accent-color    : #f71b1b;

  --flickity-arrow-color: #000000;
  --product-on-sale-accent           : #00d864;
  --product-on-sale-accent-rgb       : 0, 216, 100;
  --product-on-sale-color            : #ffffff;
  --product-cor-do-preco             : #00d864;
  --product-cor-do-preco-riscado     : #000000;
  --product-cor-dos-titles           : #000000;
  --product-in-stock-color           : #00d864;
  --product-low-stock-color          : #ee0000;
  --product-sold-out-color           : #000000;
  --product-custom-label-1-background: #ff6128;
  --product-custom-label-1-color     : #ffffff;
  --product-custom-label-2-background: #a95ebe;
  --product-custom-label-2-color     : #ffffff;
  --product-review-star-color        : #ffb647;

  --mobile-container-gutter : 20px;
  --desktop-container-gutter: 40px;

  --header-is-sticky: 0;
  --header-inline-navigation: 0;
  --colorzap-color: #702dfa;
}

/* Cabeçalho (era o <style> da seção header) */
#shopify-section-header { position: relative; z-index: 5; }
.header__logo-image { max-width: 50px !important; height: auto; }
@media screen and (min-width: 641px) { .header__logo-image { max-width: 70px !important; } }
@media screen and (min-width: 1000px) { .search-bar.is-expanded .search-bar__top { box-shadow: 0 -1px #464646 inset; } }
.logodorodape .header__logo-image { max-width: none !important; width: auto; max-height: 130px; }

/* Botão e janela do WhatsApp (era o <style> do app de WhatsApp do tema) */
.hidden { display: none; }
.sticky-button {
  position: fixed; bottom: 20px; right: 20px; border-radius: 50px;
  box-shadow: 0 0px 12px 0 rgb(0 0 0 / 10%); z-index: 20;
  display: flex; align-items: center; justify-content: center;
  width: 55px; height: 55px; transition: all 0.2s ease-out;
}
.sticky-button img { width: 55px; height: 55px; }
.sticky-button svg { margin: auto; fill: #fff; width: 35px; height: 35px; }
.sticky-button a, .sticky-button label { cursor: pointer; display: flex; align-items: center; width: 55px; height: 65px; transition: all .3s ease-out; }
.sticky-button label svg.close-icon { display: none; }
.sticky-chat { position: fixed; bottom: 85px; right: 20px; width: 320px; max-width: calc(100vw - 40px); transition: all .3s ease-out; z-index: 21; opacity: 0; visibility: hidden; }
.sticky-chat a { text-decoration: none; color: #505050; }
.sticky-chat svg { width: 35px; height: 35px; }
.sticky-chat .chat-content { border-radius: 14px; background-color: #bac1d1b8; backdrop-filter: blur(5px); overflow: hidden; font-family: var(--text-font-family); font-weight: 400; }
.sticky-chat .chat-header { position: relative; display: flex; align-items: center; padding: 15px 20px; background-color: var(--colorzap-color); overflow: hidden; }
.sticky-chat .chat-header:after { content: ''; display: block; position: absolute; bottom: 0; right: 0; width: 80px; height: 75px; background: rgba(0,0,0,.040); border-radius: 70px 0 5px 0; }
.sticky-chat .chat-header svg { width: 35px; height: 35px; flex: 0 0 auto; fill: #fff; }
.sticky-chat .chat-header .title { padding-left: 15px; font-size: 14px; font-weight: 600; font-family: var(--heading-font-family); color: #fff; }
.sticky-chat .chat-header .title span { font-size: 11px; font-weight: 400; display: block; line-height: 1.58em; margin: 0; color: #f4f4f4; }
.sticky-chat .chat-text { display: flex; flex-wrap: wrap; margin: 30px 20px; font-size: 12px; }
.sticky-chat .chat-text span { display: inline-block; margin-right: auto; padding: 10px; height: fit-content; background-color: #f0f5fb; border-radius: 0px 15px 15px; }
.sticky-chat .chat-text span:after { content: 'agora mesmo'; display: inline-block; margin-left: 10px; font-size: 9px; color: #989b9f; }
.sticky-chat .chat-text span.typing { margin: 15px 0 0 auto; padding: 4px; border-radius: 15px 0px 15px 15px; }
.sticky-chat .chat-text span.typing:after { display: none; }
.sticky-chat .chat-text span.typing svg { height: 13px; fill: #505050; }
.sticky-chat .chat-button { display: block; margin-top: 5px; padding: 10px; border-radius: 14px; background-color: #bac1d1b8; backdrop-filter: blur(5px); overflow: hidden; font-size: 12px; font-family: var(--text-font-family); font-weight: 400; }
.sticky-chat .chat-button svg { width: 20px; height: 20px; fill: #505050; margin-left: auto; transform: rotate(40deg); }
.chat-menu:checked + .sticky-button label { transform: rotate(360deg); }
.chat-menu:checked + .sticky-button label img { display: none; }
.chat-menu:checked + .sticky-button { background: #4dc247; }
.chat-menu:checked + .sticky-button label svg.close-icon { display: table-cell; }
.chat-menu:checked + .sticky-button + .sticky-chat { bottom: 88px; right: 18px; opacity: 1; visibility: visible; }
.wa-chat-widget-send form { display: flex; margin: 0; }
.wa-chat-widget-send input { background: #f0f5fb; border: 0; border-right: 1px solid #dee6ef; color: #505050; padding: 0.5rem 1.2rem; width: 100%; border-radius: 10px 0 0 10px; }
.wa-chat-widget-send button { background-color: #f0f5fb; padding: 11px 15px 0.5rem 0.5rem; border-radius: 0 10px 10px 0; border: none; fill: #ffffff; }
@media (max-width: 768px) {
  .sticky-button { bottom: 64px; }
  .chat-menu:checked + .sticky-button + .sticky-chat { bottom: 125px; right: 21px; }
}

/* 2. Novo — sem os scripts do tema, alguns estados passam a ser só CSS */

/* Faixa do modo ensaio (LOJA_ENSAIO=1) */
.vitrine-ensaio { background: #fff3cd; color: #664d03; text-align: center; font-size: 12px; padding: 4px 12px; }

/* Etiqueta "Esgotado" no cartão (o tema original não tinha produto esgotado) */
.vitrine-esgotado { background: #000; color: #fff; }

/* Selo azul ao lado do nome do produto */
.vitrine-selo svg { width: 20px; height: 20px; }

/* Links de política no rodapé */
.vitrine-rodape-links { margin-top: 18px; font-size: 12px; text-align: center; opacity: .8; }
.vitrine-rodape-links a { color: var(--footer-text-color); }

/* Estado vazio de coleção e busca */
.vitrine-vazio { padding: 30px 20px; text-align: center; }
.vitrine-busca-pagina { display: flex; gap: 10px; max-width: 480px; margin: 20px auto 0; }
.vitrine-busca-pagina .form__field { flex: 1; }

/* Seletor de valor (ordenar / por página): no tema eram botões que o JS
   transformava em navegação; aqui são links de verdade. */
a.value-picker__choice-item { display: block; text-decoration: none; }

/* Zoom da foto do produto ao passar o mouse (o tema fazia com JS e uma
   cópia ampliada; aqui a própria foto aumenta dentro da moldura). */
.product-gallery__carousel-item.vitrine-zoom .aspect-ratio { overflow: hidden; cursor: zoom-in; }
.product-gallery__carousel-item.vitrine-zoom img { transition: transform .15s ease-out; }

/* Carrinho: botão de remover e aviso de item que saiu da loja */
.line-item__quantity-remove { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.vitrine-aviso-carrinho { margin: 0 0 16px; padding: 10px 14px; border-radius: 6px; background: var(--error-background); color: var(--error-color); font-size: 13px; }
.cart-recap__price-line--highlight { color: var(--product-on-sale-accent); }

/* Os pontos do carrossel usam o estilo do tema (.flickity-page-dots); só a
   posição dependia do Flickity. */
.slideshow { position: relative; }
.slideshow .dot { cursor: pointer; }

/* Páginas de política: a Shopify injetava esta moldura na página; o tema só
   definia a largura máxima. */
.shopify-policy__container { margin: 0 auto 40px; padding: 0 var(--mobile-container-gutter); }
.shopify-policy__body h2 { margin-top: 1.4em; }

/* /collections: grade de coleções com a foto do primeiro produto */
.vitrine-colecoes .product-item__title { text-align: center; }

/* ════════════════════════════════════════════════════════════════
   HERO da home — composição em HTML, no lugar do carrossel de banners.

   Veio da Estilo de Artista (28/09/2026), adaptado à marca daqui: lá o
   acento é volt sobre roxo, aqui a marca é preto e branco, então o
   destaque é o próprio branco e o fundo é um grafite frio.

   O fundo é CSS puro — gradiente + foco de luz atrás do tênis — e custa
   0 KB. A foto do par é o LCP; o filme entra por cima DEPOIS do load,
   só se a rede deixar, e o hero funciona inteiro sem ele.
   ──────────────────────────────────────────────────────────────── */
.hero-g {
  position: relative; overflow: hidden; background: #0b0a0f; color: #fff;
  padding: 34px 16px 38px;
}
@media (min-width: 900px) {
  .hero-g { padding: 56px 26px 60px; min-height: min(78vh, 700px);
            display: grid; align-items: center; }
}
.hero-g-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% 32%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(90% 70% at 12% 8%, rgba(255,255,255,.05), transparent 58%),
    linear-gradient(168deg, #1b1b20 0%, #0d0d11 58%, #070709 100%);
}
/* Foco de luz: separa o tênis do fundo sem recorte e sem imagem. */
.hero-g-luz {
  z-index: 2; position: absolute; left: 50%; top: 52%;
  width: min(86vw, 560px); aspect-ratio: 1; transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 62%);
}
@media (min-width: 900px) { .hero-g-luz { left: 72%; top: 50%; } }

/* A ordem do HTML é a do CELULAR: texto, produto, oferta, botão.
   No computador as mesmas áreas viram duas colunas. */
.hero-g-in {
  position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; width: 100%;
  display: grid; gap: 18px; justify-items: center; text-align: center;
  grid-template-areas: 'tx' 'prod' 'of' 'cta';
}
@media (min-width: 900px) {
  .hero-g-in {
    grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
    grid-template-areas: 'tx prod' 'of prod' 'cta prod';
    column-gap: 44px; row-gap: 20px; align-content: center;
    justify-items: start; text-align: left;
  }
}
.hero-g-tx   { grid-area: tx; }
.hero-g-prod { grid-area: prod; }
.hero-g-of   { grid-area: of; }
.hero-g-acao { grid-area: cta; }

.hero-g-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .26em;
  color: #b8b8c0; text-transform: uppercase;
}
.hero-g-eyebrow::before { content: ''; width: 22px; height: 1.5px; background: #fff; }

/* A headline entra linha por linha, cada uma saindo da própria caixa. */
.hero-g-h1 {
  margin: 12px 0 0; font-size: clamp(36px, 10.5vw, 72px); line-height: .92;
  font-weight: 800; letter-spacing: -.04em; text-transform: uppercase; color: #fff;
}
.hero-g-h1 span { display: block; overflow: hidden; }
.hero-g-h1 i { display: block; font-style: normal; white-space: nowrap;
  transform: translateY(105%); transition: transform .85s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 90ms); }
.hero-g.pronto .hero-g-h1 i { transform: none; }

.hero-g-of {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: center; margin: 2px 0 0;
  font-size: clamp(16px, 4.4vw, 21px); font-weight: 600; color: #e6e6ea;
}
@media (min-width: 900px) { .hero-g-of { justify-content: flex-start; } }
.hero-g-of b { color: #fff; font-weight: 800; letter-spacing: -.02em; }
.hero-g-of .f {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #0b0a0f;
  background: #fff; border-radius: 999px; padding: 5px 11px;
}

.hero-g-acao { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
@media (min-width: 900px) { .hero-g-acao { justify-content: flex-start; } }
.hero-g-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 32px; border-radius: 999px; background: #fff; color: #0b0a0f;
  font-weight: 800; font-size: 14.5px; letter-spacing: .04em; text-decoration: none;
  box-shadow: 0 18px 34px -18px rgba(255,255,255,.55);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s cubic-bezier(.2,.8,.3,1);
}
.hero-g-cta:hover { text-decoration: none; color: #0b0a0f; transform: translateY(-2px);
  box-shadow: 0 22px 40px -18px rgba(255,255,255,.75); }
.hero-g-cta:active { transform: scale(.985); }
.hero-g-cta .ar { display: inline-block; transition: transform .2s cubic-bezier(.2,.8,.3,1); }
.hero-g-cta:hover .ar { transform: translateX(4px); }
.hero-g-tag {
  font-size: 12.5px; color: #b8b8c0; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.hero-g-tag:hover { color: #fff; border-color: #fff; text-decoration: none; }

/* ---- o produto ---- */
.hero-g-prod { position: relative; display: grid; place-items: center; width: 100%; }
.hero-g-palco {
  position: relative; width: 100%; max-width: min(92vw, 430px);
  display: grid; place-items: center;
}
@media (min-width: 900px) { .hero-g-palco { max-width: min(46vw, 540px); } }
.hero-g-palco picture { display: block; width: 100%; }
/* A arte já vem com fundo de estúdio escuro. A máscara radial dissolve esse
   fundo no fundo do hero: o par aparece flutuando, sem recorte em PNG. */
.hero-g-palco img {
  width: 100%; height: auto; display: block;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 52%, #000 58%, transparent 82%);
          mask-image: radial-gradient(ellipse 62% 58% at 50% 52%, #000 58%, transparent 82%);
  animation: heroGFlutua 7s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes heroGFlutua { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* O filme fica POR CIMA da foto, com a mesma máscara e enquadramento. Nasce
   invisível e sem src: a foto é o LCP e continua sendo o que aparece se o
   vídeo não carregar ou for recusado pelo navegador. */
.hero-g-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; pointer-events: none; transition: opacity .85s cubic-bezier(.2,.8,.3,1);
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 52%, #000 58%, transparent 82%);
          mask-image: radial-gradient(ellipse 62% 58% at 50% 52%, #000 58%, transparent 82%);
}
.hero-g-video.on { opacity: 1; }
/* Com o filme visível a foto para de flutuar — quem se move é o vídeo. */
.hero-g-palco.filmando img { animation: none; }
.hero-g-sombra {
  position: absolute; left: 50%; bottom: 9%; width: 46%; height: 20px;
  transform: translateX(-50%); border-radius: 50%; filter: blur(7px);
  background: radial-gradient(ellipse at center, rgba(0,0,0,.85), transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-g-palco img { animation: none; }
  .hero-g-h1 i { transform: none; transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   SACOLA — o carrinho em gaveta, no modelo da Estilo de Artista
   (pedido do dono, 09/10/2026).

   Antes, "adicionar" levava para /cart e tirava a pessoa de onde ela
   estava — herança do tema (cartType "page"). Agora a sacola desliza
   por cima: quem adicionou vê o que tem e volta a comprar com um
   toque. A página /cart continua existindo e funcionando igual; ela é
   o destino de quem chega por link ou com o JS fora do ar.
   ──────────────────────────────────────────────────────────────── */
.sac-scrim {
  position: fixed; inset: 0; background: rgba(11,10,15,.5); z-index: 90;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.sac-scrim.on { opacity: 1; visibility: visible; }

.sac {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91; width: 100%;
  background: #fff; display: flex; flex-direction: column;
  transform: translate3d(100%,0,0); visibility: hidden;
  transition: transform .38s cubic-bezier(.16,1,.3,1), visibility .38s;
  box-shadow: -18px 0 50px -24px rgba(0,0,0,.45);
}
.sac.on { transform: none; visibility: visible; }
@media (min-width: 760px) { .sac { max-width: 440px; } }

.sac-hd {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 14px; border-bottom: 1px solid #ecebf0;
}
.sac-hd h2 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sac-hd .n {
  font-size: 11.5px; font-weight: 700; color: #fff; background: #111214;
  border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sac-x {
  margin-left: auto; background: none; border: none; cursor: pointer; color: #6e6a78;
  font-size: 26px; line-height: 1; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; transition: background .15s ease, color .15s ease;
}
.sac-x:hover { background: #f4f3f7; color: #0b0a0f; }

.sac-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 4px 16px 16px;
}
.sac-vazio { text-align: center; padding: 52px 10px; }
.sac-vazio p { color: #6e6a78; margin: 0 0 20px; }

.sac-line {
  display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 13px;
  padding: 14px 0; border-bottom: 1px solid #f1f0f4;
}
.sac-line.nova { animation: sacLinhaEntra .3s cubic-bezier(.16,1,.3,1) backwards; }
@keyframes sacLinhaEntra { from { opacity: 0; transform: translateY(8px); } }
.sac-line img { width: 78px; height: 78px; object-fit: cover; border-radius: 10px; background: #f4f3f7; display: block; }
.sac-line .t { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #0b0a0f; text-decoration: none; display: block; }
.sac-line .t:hover { text-decoration: underline; }
.sac-line .v { font-size: 12px; color: #6e6a78; margin-top: 3px; }
.sac-line .p { font-size: 13.5px; font-weight: 700; margin-top: 4px; }
.sac-line .p s { color: #9a96a3; font-weight: 500; margin-right: 6px; }
.sac-line .ln { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.sac-qt { display: inline-flex; align-items: center; border: 1px solid #e3e1e8; border-radius: 999px; overflow: hidden; }
.sac-qt button {
  background: none; border: none; cursor: pointer; width: 30px; height: 30px;
  font-size: 16px; line-height: 1; color: #0b0a0f; display: grid; place-items: center;
}
.sac-qt button:hover { background: #f4f3f7; }
.sac-qt button:disabled { color: #c3c0cb; cursor: default; background: none; }
.sac-qt span { min-width: 26px; text-align: center; font-size: 13px; font-weight: 700; }
.sac-rm {
  background: none; border: none; padding: 0; cursor: pointer; margin-left: auto;
  font-size: 12px; color: #6e6a78; text-decoration: underline;
}
.sac-rm:hover { color: #0b0a0f; }

.sac-aviso { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #fdf2f2; color: #a33; font-size: 12.5px; }
.sac-dica { margin: 12px 0 0; padding: 11px 13px; border-radius: 8px; background: #f5f4f8; color: #4a4754; font-size: 12.5px; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .sac, .sac-scrim { transition: none; }
  .sac-line.nova { animation: none; }
}

/* ---- painéis da promoção dentro da sacola ----
   O combo é o que esta loja vende: 2 pares por R$ 149,90 em vez de 199,80,
   com a regra proporcional que faz o 3º e o 4º par entrarem pelo mesmo
   desconto. Sem estes painéis a sacola seria uma lista, e o cliente não
   teria como saber que levar mais um par sai mais barato. */
.sac-of {
  margin: 16px 0 4px; border: 1.5px solid #e6186f; border-radius: 16px;
  overflow: hidden; background: #fff;
}
.sac-of-tp {
  background: #e6186f; color: #fff; padding: 10px 14px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.sac-of-in { padding: 14px; background: #fdf2f7; }
.sac-of-in h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #0b0a0f; line-height: 1.25; }
.sac-of-in h3 b { color: #e6186f; }
.sac-of-in p { margin: 0; font-size: 12.5px; color: #5c5866; line-height: 1.45; }
.sac-of-eco {
  display: inline-flex; align-items: baseline; gap: 8px; margin-top: 10px;
  background: #fff; border-radius: 10px; padding: 7px 11px; font-size: 13px; font-weight: 700;
}
.sac-of-eco s { color: #9a96a4; font-weight: 500; }
.sac-of .sac-go { margin-top: 12px; }

/* Combo fechado: o verde é o sinal de que a promoção entrou. */
.sac-ok {
  margin: 16px 0 4px; border: 1.5px solid #1d7a4c; border-radius: 16px;
  background: #f2fbf5; padding: 14px;
}
.sac-ok-tt {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 13.5px; font-weight: 800; color: #1d7a4c; line-height: 1.3;
}
.sac-ok-tt svg { flex: none; }
.sac-ok p { margin: 3px 0 0; font-size: 12.5px; color: #3d4a42; line-height: 1.45; }
.sac-ok p s { color: #8d9a92; }
.sac-ok p b { color: #0b0a0f; }

/* ---- rodapé ---- */
.sac-ft {
  flex: none; border-top: 1px solid #ecebf0; padding: 14px 16px 16px; background: #fff;
}
.sac-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13.5px; color: #4a4754; margin-bottom: 6px;
}
.sac-row .desc { color: #e6186f; font-weight: 600; }
.sac-row.tot { font-size: 16px; font-weight: 700; color: #0b0a0f; margin: 10px 0 12px; }
.sac-row.tot b { font-size: 23px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sac-frete, .sac-seg {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 9px 0 0; font-size: 11.5px; color: #6e6a78;
}
.sac-frete { color: #1d7a4c; font-weight: 600; }
.sac-go {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 16px; border: none; border-radius: 999px; background: #111214; color: #fff;
  font-weight: 800; font-size: 14px; letter-spacing: .03em; cursor: pointer; text-decoration: none;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), opacity .18s ease;
}
.sac-go:hover { color: #fff; text-decoration: none; transform: translateY(-1px); }
.sac-go:active { transform: scale(.99); }
.sac-go:disabled { opacity: .6; cursor: default; transform: none; }
.sac-go .ar { display: inline-block; transition: transform .18s cubic-bezier(.2,.8,.3,1); }
.sac-go:hover .ar { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .sac, .sac-scrim, .sac-go { transition: none; }
  .sac-line.nova { animation: none; }
}