@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Poppins:wght@500;600;700&display=swap");

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

:root {
  --background: 0 0% 100%;
  --foreground: 210 22% 17%;
  --card: 0 0% 100%;
  --card-foreground: 210 22% 17%;
  --popover: 0 0% 100%;
  --popover-foreground: 210 22% 17%;
  --primary: 27 89% 48%;
  --primary-foreground: 0 0% 100%;
  --secondary: 120 22% 96%;
  --secondary-foreground: 120 24% 28%;
  --muted: 120 20% 96%;
  --muted-foreground: 210 15% 35%;
  --accent: 120 24% 28%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 120 22% 85%;
  --input: 120 22% 85%;
  --ring: 120 24% 28%;
  --radius: 0.5rem;
  --dark-support: 224 40% 14%;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
  --font-heading: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;
  /* Brand palette (Javali 4.0 — "Floresta & Ação"). Os nomes de token são
       herdados da base (cream/graphite/champagne) mas os VALORES são a paleta
       Javali. Usados via arbitrary values, ex.: tw-text-[color:var(--champagne)].
         cream         = off-white esverdeado (fundo base)
         cream-soft    = verde muito claro (fundo de seções/vitrines)
         cream-deep    = verde claro (superfícies)
         graphite      = carvão esverdeado (topbar, rodapé, texto forte)
         champagne     = verde floresta (acento em fundo claro: ícones, links, hover, preços)
         champagne-soft= verde vibrante (destaque, pop sobre fundo escuro) */
  --cream: #F0F8F0;
  --cream-soft: #E6F1E6;
  --cream-deep: #D8EAD8;
  --graphite: #283030;
  --champagne: #385838;
  --champagne-soft: #88C888;
  /* Ação (laranja) — CTAs, "comprar", promoções. */
  --action: #EA720C;
  /* Amarelo de destaque (cards / faixas de benefício, se necessário). */
  --highlight: #F5E800;
  /* Borda verde suave (= --border em HEX; o --border do projeto é triplet HSL
       reservado p/ hsl(var(--border))). */
  --cream-border: #CFE0CF;
}

*{
  border-color: hsl(var(--border));
}

body{
  background-color: hsl(var(--background));
  font-family: Inter, sans-serif;
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
  font-family: var(--font-heading);
}

.tw-container{
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}

@media (min-width: 1400px){
  .tw-container{
    max-width: 1400px;
  }
}

.tw-pointer-events-none{
  pointer-events: none;
}

.tw-absolute{
  position: absolute;
}

.tw-relative{
  position: relative;
}

.tw-inset-0{
  inset: 0px;
}

.tw-bottom-0{
  bottom: 0px;
}

.tw-bottom-6{
  bottom: 1.5rem;
}

.tw-left-0{
  left: 0px;
}

.tw-left-6{
  left: 1.5rem;
}

.tw-m-0{
  margin: 0px;
}

.tw-mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}

.tw-mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.tw-my-1{
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.tw-mb-0{
  margin-bottom: 0px;
}

.tw-mb-4{
  margin-bottom: 1rem;
}

.tw-mb-5{
  margin-bottom: 1.25rem;
}

.tw-mb-6{
  margin-bottom: 1.5rem;
}

.tw-mb-8{
  margin-bottom: 2rem;
}

.tw-mb-\[6px\]{
  margin-bottom: 6px;
}

.tw-mt-2{
  margin-top: 0.5rem;
}

.tw-mt-4{
  margin-top: 1rem;
}

.tw-mt-5{
  margin-top: 1.25rem;
}

.tw-mt-6{
  margin-top: 1.5rem;
}

.tw-mt-\[14px\]{
  margin-top: 14px;
}

.tw-mt-\[18px\]{
  margin-top: 18px;
}

.tw-block{
  display: block;
}

.tw-flex{
  display: flex;
}

.tw-inline-flex{
  display: inline-flex;
}

.tw-grid{
  display: grid;
}

.tw-hidden{
  display: none;
}

.tw-aspect-video{
  aspect-ratio: 16 / 9;
}

.tw-h-10{
  height: 2.5rem;
}

.tw-h-14{
  height: 3.5rem;
}

.tw-h-3\.5{
  height: 0.875rem;
}

.tw-h-4{
  height: 1rem;
}

.tw-h-5{
  height: 1.25rem;
}

.tw-h-6{
  height: 1.5rem;
}

.tw-h-7{
  height: 1.75rem;
}

.tw-h-8{
  height: 2rem;
}

.tw-h-9{
  height: 2.25rem;
}

.tw-h-\[18px\]{
  height: 18px;
}

.tw-h-\[22px\]{
  height: 22px;
}

.tw-h-full{
  height: 100%;
}

.tw-w-10{
  width: 2.5rem;
}

.tw-w-3\.5{
  width: 0.875rem;
}

.tw-w-4{
  width: 1rem;
}

.tw-w-5{
  width: 1.25rem;
}

.tw-w-6{
  width: 1.5rem;
}

.tw-w-7{
  width: 1.75rem;
}

.tw-w-8{
  width: 2rem;
}

.tw-w-9{
  width: 2.25rem;
}

.tw-w-\[18px\]{
  width: 18px;
}

.tw-w-\[22px\]{
  width: 22px;
}

.tw-w-full{
  width: 100%;
}

.tw-max-w-2xl{
  max-width: 42rem;
}

.tw-max-w-3xl{
  max-width: 48rem;
}

.tw-max-w-4xl{
  max-width: 56rem;
}

.tw-max-w-7xl{
  max-width: 80rem;
}

.tw-max-w-\[310px\]{
  max-width: 310px;
}

.tw-max-w-xl{
  max-width: 36rem;
}

.tw-shrink-0{
  flex-shrink: 0;
}

.tw-list-none{
  list-style-type: none;
}

.tw-grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.tw-grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tw-grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tw-flex-col{
  flex-direction: column;
}

.tw-flex-wrap{
  flex-wrap: wrap;
}

.tw-place-items-center{
  place-items: center;
}

.tw-items-start{
  align-items: flex-start;
}

.tw-items-center{
  align-items: center;
}

.tw-justify-center{
  justify-content: center;
}

.tw-gap-1\.5{
  gap: 0.375rem;
}

.tw-gap-10{
  gap: 2.5rem;
}

.tw-gap-2{
  gap: 0.5rem;
}

.tw-gap-3{
  gap: 0.75rem;
}

.tw-gap-4{
  gap: 1rem;
}

.tw-gap-6{
  gap: 1.5rem;
}

.tw-gap-8{
  gap: 2rem;
}

.tw-gap-x-6{
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.tw-gap-y-2{
  row-gap: 0.5rem;
}

.tw-space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.tw-overflow-hidden{
  overflow: hidden;
}

.tw-rounded-2xl{
  border-radius: 1rem;
}

.tw-rounded-\[3px\]{
  border-radius: 3px;
}

.tw-rounded-full{
  border-radius: 9999px;
}

.tw-rounded-lg{
  border-radius: var(--radius);
}

.tw-rounded-md{
  border-radius: calc(var(--radius) - 2px);
}

.tw-rounded-xl{
  border-radius: 0.75rem;
}

.tw-border{
  border-width: 1px;
}

.tw-border-b{
  border-bottom-width: 1px;
}

.tw-border-t{
  border-top-width: 1px;
}

.tw-border-solid{
  border-style: solid;
}

.tw-border-\[\#88C88855\]{
  border-color: #88C88855;
}

.tw-border-\[\#EAF3EA33\]{
  border-color: #EAF3EA33;
}

.tw-border-\[\#EAF3EA66\]{
  border-color: #EAF3EA66;
}

.tw-border-\[color\:var\(--cream-border\)\]{
  border-color: var(--cream-border);
}

.tw-border-border{
  border-color: hsl(var(--border));
}

.tw-border-white\/10{
  border-color: rgb(255 255 255 / 0.1);
}

.tw-bg-\[\#88C8881F\]{
  background-color: #88C8881F;
}

.tw-bg-\[color\:var\(--champagne\)\]{
  background-color: var(--champagne);
}

.tw-bg-\[color\:var\(--cream\)\]{
  background-color: var(--cream);
}

.tw-bg-\[color\:var\(--cream-soft\)\]{
  background-color: var(--cream-soft);
}

.tw-bg-\[color\:var\(--graphite\)\]{
  background-color: var(--graphite);
}

.tw-bg-white\/70{
  background-color: rgb(255 255 255 / 0.7);
}

.tw-bg-white\/75{
  background-color: rgb(255 255 255 / 0.75);
}

.tw-p-0{
  padding: 0px;
}

.tw-px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.tw-px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.tw-px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.tw-py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.tw-py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.tw-py-14{
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.tw-py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.tw-py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.tw-py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.tw-pb-14{
  padding-bottom: 3.5rem;
}

.tw-pt-10{
  padding-top: 2.5rem;
}

.tw-text-center{
  text-align: center;
}

.tw-font-body{
  font-family: Inter, sans-serif;
}

.tw-font-heading{
  font-family: Poppins, sans-serif;
}

.tw-font-serif{
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.tw-text-\[11px\]{
  font-size: 11px;
}

.tw-text-\[12px\]{
  font-size: 12px;
}

.tw-text-\[13px\]{
  font-size: 13px;
}

.tw-text-\[14px\]{
  font-size: 14px;
}

.tw-text-\[15px\]{
  font-size: 15px;
}

.tw-text-\[16px\]{
  font-size: 16px;
}

.tw-text-\[18px\]{
  font-size: 18px;
}

.tw-text-\[22px\]{
  font-size: 22px;
}

.tw-text-\[26px\]{
  font-size: 26px;
}

.tw-text-\[28px\]{
  font-size: 28px;
}

.tw-text-\[38px\]{
  font-size: 38px;
}

.tw-text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.tw-text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.tw-text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.tw-font-bold{
  font-weight: 700;
}

.tw-font-semibold{
  font-weight: 600;
}

.tw-uppercase{
  text-transform: uppercase;
}

.tw-leading-5{
  line-height: 1.25rem;
}

.tw-leading-\[1\.05\]{
  line-height: 1.05;
}

.tw-leading-none{
  line-height: 1;
}

.tw-leading-relaxed{
  line-height: 1.625;
}

.tw-leading-snug{
  line-height: 1.375;
}

.tw-leading-tight{
  line-height: 1.25;
}

.tw-tracking-\[0\.18em\]{
  letter-spacing: 0.18em;
}

.tw-tracking-wide{
  letter-spacing: 0.025em;
}

.tw-tracking-wider{
  letter-spacing: 0.05em;
}

.tw-text-\[\#DCEBDC\]{
  --tw-text-opacity: 1;
  color: rgb(220 235 220 / var(--tw-text-opacity, 1));
}

.tw-text-\[\#EAF3EA\]{
  --tw-text-opacity: 1;
  color: rgb(234 243 234 / var(--tw-text-opacity, 1));
}

.tw-text-\[color\:var\(--champagne\)\]{
  color: var(--champagne);
}

.tw-text-\[color\:var\(--champagne-soft\)\]{
  color: var(--champagne-soft);
}

.tw-text-\[color\:var\(--cream\)\]{
  color: var(--cream);
}

.tw-text-\[color\:var\(--graphite\)\]{
  color: var(--graphite);
}

.tw-text-accent{
  color: hsl(var(--accent));
}

.tw-text-foreground{
  color: hsl(var(--foreground));
}

.tw-text-muted-foreground{
  color: hsl(var(--muted-foreground));
}

.tw-text-primary{
  color: hsl(var(--primary));
}

.tw-text-primary-foreground{
  color: hsl(var(--primary-foreground));
}

.tw-text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.tw-text-white\/80{
  color: rgb(255 255 255 / 0.8);
}

.tw-text-white\/90{
  color: rgb(255 255 255 / 0.9);
}

.tw-shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.tw-shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.tw-transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.tw-transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Footer: usa a MESMA cor do header (--header-background do painel), para que
   topo e rodapé fiquem visualmente iguais. A regra do tema `footer.footer-colors`
   (especificidade 0,1,1) aplicaria --footer-bg; este seletor 0,2,1 prevalece.
   Fallback na verde da marca caso o header não tenha cor definida no painel. */

footer.js-footer.footer-colors {
  background-color: var(--header-background, var(--champagne));
  color: var(--cream);
}

/* Aviso "Acompanhe aqui seu último pedido" (snipplets/notification.tpl): a base
   do tema deixa `.notification` em z-index 10 e `.notification-fixed` não corrige,
   então o header sticky (z-index 1040) passa por cima. 1050 põe o aviso acima do
   header e ainda bem abaixo de modais (10000) e do overlay do carrinho (20000).
   Seletor 0,2,0 para vencer o `.notification` (0,1,0) da base. */

.notification.notification-fixed {
  z-index: 1050;
}

/* Preço com desconto por meio de pagamento (ex.: "R$ 4.987,50 com Pix").
   O componente nativo sai em `text-accent` — o mesmo laranja do botão de compra —
   e passa a competir com o CTA. Aqui vai no verde da marca, que a paleta já
   reserva para preços em fundo claro. Os seletores de descendente (0,1,1) vencem
   o `.text-accent` (0,1,0) que o componente injeta nos filhos. */

.payment-discount-brand,
.payment-discount-brand span,
.payment-discount-brand .text-accent {
  color: var(--champagne);
}

/* Vitrine de produtos na home: padding vertical enxuto e SIMÉTRICO (topo = base).
   O tema aplica espaçamento inconsistente nessa seção (padding:0 forçado +
   --section-distance), deixando o título colado no topo e um vão grande embaixo.
   tailwind.css carrega por último, então este override prevalece. */

.section-home.section-featured-home {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (min-width: 768px) {
  .section-home.section-featured-home {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

.hover\:tw-scale-\[1\.02\]:hover{
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:tw-border-\[color\:var\(--champagne\)\]:hover{
  border-color: var(--champagne);
}

.hover\:tw-border-\[color\:var\(--champagne-soft\)\]:hover{
  border-color: var(--champagne-soft);
}

.hover\:tw-text-\[color\:var\(--champagne\)\]:hover{
  color: var(--champagne);
}

.hover\:tw-text-\[color\:var\(--champagne-soft\)\]:hover{
  color: var(--champagne-soft);
}

@media (max-width: 480px){
  .max-\[480px\]\:tw-block{
    display: block;
  }

  .max-\[480px\]\:tw-hidden{
    display: none;
  }

  .max-\[480px\]\:tw-pt-0{
    padding-top: 0px;
  }
}

@media (min-width: 640px){
  .sm\:tw-my-\[22px\]{
    margin-top: 22px;
    margin-bottom: 22px;
  }

  .sm\:tw-flex-row{
    flex-direction: row;
  }

  .sm\:tw-flex-wrap{
    flex-wrap: wrap;
  }

  .sm\:tw-px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:tw-py-5{
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 768px){
  .md\:tw-mx-0{
    margin-left: 0px;
    margin-right: 0px;
  }

  .md\:tw-mb-10{
    margin-bottom: 2.5rem;
  }

  .md\:tw-h-\[30px\]{
    height: 30px;
  }

  .md\:tw-grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:tw-gap-12{
    gap: 3rem;
  }

  .md\:tw-py-14{
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .md\:tw-py-20{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .md\:tw-py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .md\:tw-pb-16{
    padding-bottom: 4rem;
  }

  .md\:tw-pt-12{
    padding-top: 3rem;
  }

  .md\:tw-text-left{
    text-align: left;
  }

  .md\:tw-text-\[12px\]{
    font-size: 12px;
  }

  .md\:tw-text-\[14px\]{
    font-size: 14px;
  }

  .md\:tw-text-\[16px\]{
    font-size: 16px;
  }

  .md\:tw-text-\[18px\]{
    font-size: 18px;
  }

  .md\:tw-text-\[19px\]{
    font-size: 19px;
  }

  .md\:tw-text-\[20px\]{
    font-size: 20px;
  }

  .md\:tw-text-\[24px\]{
    font-size: 24px;
  }

  .md\:tw-text-\[34px\]{
    font-size: 34px;
  }

  .md\:tw-text-\[40px\]{
    font-size: 40px;
  }

  .md\:tw-text-\[42px\]{
    font-size: 42px;
  }

  .md\:tw-text-\[52px\]{
    font-size: 52px;
  }
}

@media (min-width: 1024px){
  .lg\:tw-mt-\[22px\]{
    margin-top: 22px;
  }

  .lg\:tw-flex{
    display: flex;
  }

  .lg\:tw-hidden{
    display: none;
  }

  .lg\:tw-grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:tw-gap-12{
    gap: 3rem;
  }

  .lg\:tw-py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .lg\:tw-py-28{
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .lg\:tw-text-\[64px\]{
    font-size: 64px;
  }
}

@media (min-width: 1025px){
  .min-\[1025px\]\:tw-mx-0{
    margin-left: 0px;
    margin-right: 0px;
  }

  .min-\[1025px\]\:tw-mb-0{
    margin-bottom: 0px;
  }

  .min-\[1025px\]\:tw-mt-\[12px\]{
    margin-top: 12px;
  }

  .min-\[1025px\]\:tw-grid{
    display: grid;
  }

  .min-\[1025px\]\:tw-hidden{
    display: none;
  }

  .min-\[1025px\]\:tw-rounded-none{
    border-radius: 0px;
  }

  .min-\[1025px\]\:tw-border-x-0{
    border-left-width: 0px;
    border-right-width: 0px;
  }

  .min-\[1025px\]\:tw-border-y{
    border-top-width: 1px;
    border-bottom-width: 1px;
  }

  .min-\[1025px\]\:tw-py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

.\[\&_svg\]\:tw-h-4 svg{
  height: 1rem;
}

.\[\&_svg\]\:tw-h-5 svg{
  height: 1.25rem;
}

.\[\&_svg\]\:tw-w-4 svg{
  width: 1rem;
}

.\[\&_svg\]\:tw-w-5 svg{
  width: 1.25rem;
}

.\[\&_svg\]\:tw-text-\[color\:var\(--cream\)\] svg{
  color: var(--cream);
}