/** Shopify CDN: Minification failed

Line 191:31 Unexpected "*"

**/
/*
 * Design tokens do tema legado (oest-shopify) usados pelas sections
 * portadas para a página Oest Única. Nomes exclusivos, sem conflito com os
 * tokens nativos do tema Flawless (--color-text, --heading-font-size-*, etc.).
 * Valores extraídos do tema antigo em produção para fidelidade visual exata.
 *
 * Exceção: --color-background, --gradient-background, --font-body-scale e
 * --font-heading-scale NÃO estão aqui de propósito — esses 4 nomes colidem
 * com variáveis que o layout/theme.liquid nativo do Flawless já define
 * globalmente a partir do admin (cor do tema, escala de fonte). Declará-las
 * aqui em :root sobrescreveria o valor nativo em QUALQUER página que carregue
 * este arquivo, mudando o fundo/tipografia de sections do tema novo que nada
 * têm a ver com esta migração. Onde uma section portada realmente precisa de
 * um desses valores no padrão do tema antigo, a variável é declarada local,
 * escopada à classe daquela section (ver assets/section-multicolumn.css,
 * assets/oest-about-text.css, assets/oest-unica-price.css).
 */

/*
 * O tema Flawless já carrega estas mesmas fontes (globalmente, via
 * header-group -> oest-custom.css) sob os nomes "Oest DM Sans"/"Oest Young
 * Serif". As sections portadas do tema antigo, porém, usam os nomes originais
 * 'DM Sans'/'Young Serif' (hardcoded e via --font-primary/--font-secondary
 * abaixo). Sem este @font-face, esses nomes não resolvem para nenhuma fonte
 * carregada e caem no fallback do navegador. Reaproveita os mesmos arquivos
 * .woff2 já existentes no tema, só sob os nomes que as sections esperam —
 * mesma declaração (sem faixa de peso) usada no theme.liquid do tema antigo.
 */
@font-face {
  font-family: 'DM Sans';
  src: url('oest-dmsans.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Young Serif';
  src: url('oest-youngserif.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* espaçamento */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-xsm: 6px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 64px;

  /* tipografia */
  --font-primary: 'DM Sans';
  --font-secondary: 'Young Serif';
  --font-size-xxs: 12px;
  --font-size-xs: 14px;
  --font-size-sm: 18px;
  --font-size-md: 24px;
  --font-size-lg: 32px;
  --font-size-xl: 48px;
  --font-size-xxl: 80px;
  --line-height-xxs: 150%;
  --line-height-xs: 150%;
  --line-height-sm: 150%;
  --line-height-md: 130%;
  --line-height-lg: 130%;
  --line-height-xl: 120%;
  --line-height-xxl: 120%;
  /* cores */
  --color-primary-dark: #480426;
  --color-primary-medium: #731946;
  --color-primary-light: #db95b8;
  --color-cta-medium: #e6beaa;
  --color-white: #fafafa;
  --color-gray-light: #e5e9ea;
  --color-gray-dark: #646c6f;
  --color-gray-medium: #99a6ab;
  --color-gray-xdark: #2e3233;
  --color-foreground: #eebcd8cc;
  --color-accessory-1: #d4d8ff;
  --color-alert-dark: #892e38;
  --color-alert-light: #fadbdf;
  --color-error-dark: #892e38;
  --color-warning-light: #feedb4;
  --color-warning-medium: #b2911e;

  /* layout */
  --page-width: 1200px;
  --screen-max-width: 1440px;
  --grid-desktop-horizontal-spacing: 8px;
  --grid-desktop-vertical-spacing: 8px;
  --grid-mobile-horizontal-spacing: 4px;
  --grid-mobile-vertical-spacing: 4px;
  --desktop-margin-left-first-item: 0px;

  /* botões */
  --button-default-height: 48px;
  --button-compact-height: 36px;
  --button-cta-default-background: url(https://oest-ecommerce.myshopify.com/cdn/shop/files/Vector.png?v=1739140628);
  --button-cta-hover-background: url(https://oest-ecommerce.myshopify.com/cdn/shop/files/button-cta-hover.png?v=1739141925);
  --button-cta-focus-background: url(https://oest-ecommerce.myshopify.com/cdn/shop/files/button-cta-focus.png?v=1739151162);
  --button-cta-pressed-background: url(https://oest-ecommerce.myshopify.com/cdn/shop/files/button-cta-pressed.png?v=1739151433);
  --button-primary-default-background: url(https://oest-ecommerce.myshopify.com/cdn/shop/files/button-primary-default.png?v=1739151939);
  --button-primary-hover-background: url(https://oest-ecommerce.myshopify.com/cdn/shop/files/button-primary-hover.png?v=1739151957);
  --button-primary-focus-background: url(https://oest-ecommerce.myshopify.com/cdn/shop/files/button-primary-focus.png?v=1739151949);
  --button-primary-pressed-background: url(https://oest-ecommerce.myshopify.com/cdn/shop/files/button-primary-pressed.png?v=1739151964);
  --button-secondary-default-background: url(https://oest-ecommerce.myshopify.com/cdn/shop/files/button-secondary-default_a859fcf0-e536-4b91-8c35-5c42505e5d98.png?v=1743009292);
  --button-secondary-hover-background: url(https://oest-ecommerce.myshopify.com/cdn/shop/files/button-secondary-hover_7e5816ac-8bcb-440c-b8bb-c964fdce8fbc.png?v=1743009366);
  --button-secondary-focus-background: url(https://oest-ecommerce.myshopify.com/cdn/shop/files/button-secondary-focused.png?v=1743009584);
  --button-secondary-pressed-background: url(https://oest-ecommerce.myshopify.com/cdn/shop/files/button-secondary-pressed_b000a657-133d-4dab-bda0-48b02bc772c2.png?v=1743009679);
  --button-link-pressed-background: url(https://oest-ecommerce.myshopify.com/cdn/shop/files/button-link-focus.png?v=1743006284);

  /* sombra (desligada no tema antigo: opacidade 0 em todos os presets) */
  --shadow-blur-radius: 5px;
  --shadow-padding-top: 0px;
  --shadow-padding-bottom: 4px;
  --shadow-vertical-offset: 4px;
  --shadow-visible: 0;
  --text-boxes-border-width: 1px;
  --text-boxes-radius: 0px;
  --focus-outline-padding: 3px;
  --progress-bar-height: 12px;
  --inputs-radius: 0px;
}

/*
 * Utilitárias .show-desktop/.show-mobile do Dawn (tema antigo). O base.css
 * do Flawless é outro sistema e não as define, então sem isto as duas versões
 * de uma imagem (ex.: os shapes desktop/mobile do black-friday-landing-page)
 * ficam visíveis ao mesmo tempo em vez de alternar por breakpoint.
 */
.show-mobile {
  display: block;
}
.show-desktop {
  display: none;
}
@media screen and (min-width: 750px) {
  .show-mobile {
    display: none;
  }
  .show-desktop {
    display: block;
  }
}

/*
 * Classe utilitária .page-width do tema legado: não existe no Flawless
 * (que usa .container/var(--container-width) para o mesmo fim). Várias
 * sections portadas dependem dela para centralizar/limitar o conteúdo.
 *
 * Só padding-left/right (não o atalho "padding: 0 15px" do tema antigo):
 * este arquivo é carregado de novo por cada uma das 15 sections portadas
 * (no tema antigo .page-width vinha uma única vez no <head>, então o
 * padding-bottom de ".section-xxx-padding" de cada section sempre vencia
 * por vir depois). Aqui, com múltiplos <link> repetidos página abaixo, um
 * atalho que zera padding-top/bottom acabava sobrescrevendo o padding
 * vertical de sections anteriores sempre que outra section mais abaixo
 * recarregava o arquivo. Sem tocar em padding-top/bottom aqui, essa
 * colisão deixa de existir.
 */
.page-width {
  max-width: var(--screen-max-width);
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media screen and (min-width: 750px) {
  .page-width {
    padding-left: 50px;
    padding-right: 50px;
  }
}

.isolate {
  position: relative;
  z-index: 0;
}

/*
 * Componente .media do Dawn ("component-media"), usado por image-banner.liquid
 * e testimony-card.liquid para cortar/ajustar a imagem dentro do contêiner.
 * O base.css do Flawless não define essa classe (usa outro sistema,
 * .media-ratio-*/.media-size--*). Sem isto, o <img> renderiza no tamanho
 * natural (largura pedida ao CDN, até 3840px) em vez de 100%/100% com
 * object-fit: cover, estourando por cima do que vem depois na página.
 */
.media {
  display: block;
  background-color: rgba(var(--color-foreground), 0.1);
  position: relative;
  overflow: hidden;
}

.media--transparent {
  background-color: transparent;
}

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media--square {
  padding-bottom: 100%;
}

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

.media--16-9 {
  padding-bottom: 56.25%;
}

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.hidden {
  display: none !important;
}

/*
 * .title-wrapper--self-padded-mobile do Dawn: dá padding horizontal ao título
 * no mobile (fora de um .page-width) e remove no desktop. Não existe no
 * Flawless — sem isto, títulos como o de oest-testimony/oest-how-it-works
 * ficavam colados na borda da tela no mobile.
 */
.title-wrapper--self-padded-mobile {
  padding-left: 15px;
  padding-right: 15px;
}
@media screen and (min-width: 750px) {
  .title-wrapper--self-padded-mobile {
    padding-left: 0;
    padding-right: 0;
  }
}

/*
 * Reset base do componente .button do tema legado (normalmente vem do
 * base.css do Dawn). Sem isto, botões herdam o estilo padrão do navegador
 * (borda 3D cinza) por cima do gradiente/cor definidos em button.css.
 *
 * background-color: transparent é essencial aqui — o Dawn original tem essa
 * mesma linha (via var(--color-button)/var(--alpha-button-background), que
 * não portamos por serem tokens de um sistema de botão que o button.css do
 * Oest já substitui inteiro). Sem zerar o background-color, o cinza padrão
 * do navegador para <button> (appearance:none não reseta isso sozinho neste
 * motor) aparecia nos cantos transparentes do PNG do formato do botão.
 */
.button {
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-decoration: none;
  background-color: transparent;
}

/*
 * Tipografia base do tema legado (Dawn). O Flawless não redefine h1-h5/p/li
 * com esses tokens (usa seu próprio sistema), então sections antigas ficavam
 * com o tamanho/fonte padrão do navegador em vez do visual esperado.
 *
 * Escopado a "main": todas as sections portadas renderizam dentro de <main>
 * (ver layout/theme.liquid), enquanto o header/announcement-bar e o footer
 * ficam FORA dele. Sem esse escopo, essas regras (seletores de tag h1-h5/p/li,
 * sem nenhuma classe) vazavam para qualquer h2/h3/p do header e do footer
 * nativos, deixando esses textos escuros em vez da cor branca esperada ali.
 */
main h2,
main h3,
main h4,
main h5,
main .h0,
main .h1,
main .h2,
main .h3,
main .h4,
main .h5 {
  color: var(--color-gray-xdark);
  word-break: break-word;
}

main .display {
  font-family: var(--font-secondary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  color: var(--color-primary-medium);
  margin: 0;
}
@media screen and (min-width: 750px) {
  main .display {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xxl);
  }
}

main .display-small {
  font-family: var(--font-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-primary-medium);
  margin: 0;
}
@media screen and (min-width: 750px) {
  main .display-small {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-xl);
  }
}

main h1,
main .h1 {
  font-family: var(--font-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  margin: 0;
}
@media screen and (min-width: 750px) {
  main h1,
  main .h1 {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
  }
}

main h2,
main .h2 {
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: var(--line-height-md);
  margin: 0;
}
@media screen and (min-width: 750px) {
  main h2,
  main .h2 {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
  }
}

main h3,
main .h3 {
  font-family: var(--font-secondary);
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: var(--line-height-sm);
  margin: 0;
}
@media screen and (min-width: 750px) {
  main h3,
  main .h3 {
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
  }
}

main h4,
main .h4 {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: var(--line-height-sm);
  margin: 0;
}
@media screen and (min-width: 750px) {
  main h4,
  main .h4 {
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
  }
}

main .p,
main p,
main li {
  color: var(--color-gray-xdark);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: var(--line-height-sm);
  margin: 0;
}

main label,
main .label {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-gray-xdark);
  font-weight: 600;
}

main .caption {
  font-family: var(--font-primary);
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-xxs);
  color: var(--color-gray-xdark);
  letter-spacing: 0.7px;
}

main .caption-link {
  font-family: var(--font-primary);
  font-size: var(--font-size-xs);
  color: var(--color-gray-dark);
  text-decoration: none;
}

/*
 * Sistema de grid flex do tema legado (.grid/.grid__item + variantes
 * --N-col/--N-col-desktop/--N-col-tablet-down), usado por oest-testimony
 * e oest-how-it-works para organizar cards em colunas.
 */
.grid {
  display: flex;
  margin-bottom: 20px;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}
@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--spacing-md);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}
.grid:last-child {
  margin-bottom: 0;
}

.grid__item {
  width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  flex-grow: 1;
  flex-shrink: 0;
}
@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

.grid--1-col .grid__item {
  max-width: 100%;
  width: 100%;
}

.grid--3-col .grid__item {
  width: calc(33.33% - var(--grid-mobile-horizontal-spacing) * 2 / 3);
}
@media screen and (min-width: 750px) {
  .grid--3-col .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }
}

.grid--2-col .grid__item {
  width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}
@media screen and (min-width: 750px) {
  .grid--2-col .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
  .grid--4-col-tablet .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }
  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }
  .grid--2-col-tablet .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}
@media screen and (max-width: 989px) {
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 990px) {
  .grid--6-col-desktop .grid__item {
    width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
    max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
  }
  .grid--5-col-desktop .grid__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
    max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
  }
  .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }
  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }
  .grid--2-col-desktop .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
  .grid--1-col-desktop {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .grid--1-col-desktop .grid__item {
    width: 100%;
    max-width: 100%;
  }
}