/** Shopify CDN: Minification failed

Line 216:6 Unexpected "{"
Line 216:15 Expected ":"

**/


/* CSS from section stylesheet tags */
/* ---------- Container isolado ---------- */
  .xss-container{
    width:min(100%, 83%);
    margin-inline:auto;
  }

  /* ---------- Slider base ---------- */
  .xss-slider{ position:relative; width:100%; }
  .xss-viewport{ position:relative; overflow:hidden; width:100%; }
  .xss-track{ width:100%; height:100%; position:relative; }

  .xss-slide{
    width:100%;
    height:100%;
  }

  .xss-slide__inner{
    position:relative;
    width:100%;
    height:100%;
    display:grid;
    place-items:center; /* fallback */
  }

  /* ---------- Media (imagem/video) ---------- */
  .xss-media{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
  }

  /* preserve_ratio usa aspect-ratio; no mobile troca para a razão mobile se existir */
  .xss--preserve-ratio .xss-media{
    aspect-ratio: var(--xss-aspect-desktop, 2 / 1);
    height:auto;
  }
  @media (max-width: 749px){
    .xss--preserve-ratio .xss-media{
      aspect-ratio: var(--xss-aspect-mobile, var(--xss-aspect-desktop, 2 / 1));
    }
  }

.xss-slider {margin-top:-2px}

  .xss-picture, .xss-img{
    display:block;
    width:100%;
    height:100%;
  }
  .xss-picture{ position:absolute; inset:0; }
  .xss-img{ object-fit:cover; object-position:center; }

  .xss-overlay{
    position:absolute; inset:0; pointer-events:none;
    background: var(--xss-overlay, transparent);
  }

  .xss-link-cover{
    position:absolute; inset:0; z-index: 3;
  }

  /* ---------- Conteúdo ---------- */
  .xss-content{
    position:absolute; inset:0; z-index:4;
    display:grid;
    padding: clamp(12px, 4vw, 48px);
    color: var(--xss-text, #fff);
  }
  .xss-title{ font-size: clamp(1.5rem, 3.5vw, 3rem); line-height:1.1; margin:0 0 .5em 0; }
  .xss-text{ font-size: clamp(1rem, 1.5vw, 1.125rem); margin:0 0 1rem 0; max-width: 60ch; }
  .xss-button{
    display:inline-block; padding: .85em 1.25em; border-radius: 8px;
    background: var(--xss-btn-bg, #fff);
    color: var(--xss-btn-color, #000);
    text-decoration:none; font-weight:600;
  }

  /* Posições (desktop). No mobile centraliza. */
  .xss-pos--top-left .xss-content{ align-content:start; justify-items:start; }
  .xss-pos--top-center .xss-content{ align-content:start; justify-items:center; }
  .xss-pos--top-right .xss-content{ align-content:start; justify-items:end; }
  .xss-pos--middle-left .xss-content{ align-content:center; justify-items:start; }
  .xss-pos--middle-center .xss-content{ align-content:center; justify-items:center; }
  .xss-pos--middle-right .xss-content{ align-content:center; justify-items:end; }
  .xss-pos--bottom-left .xss-content{ align-content:end; justify-items:start; }
  .xss-pos--bottom-center .xss-content{ align-content:end; justify-items:center; }
  .xss-pos--bottom-right .xss-content{ align-content:end; justify-items:end; }

  @media (max-width: 749px){
    .xss-content{ align-content:center !important; justify-items:center !important; text-align:center; }
    .xss-text{ margin-left:auto; margin-right:auto; }
  }

  /* ---------- Alturas (size != preserve_ratio) ---------- */
  .xss--small  .xss-media{ min-height: clamp(280px, 45vh, 520px); }
  .xss--medium .xss-media{ min-height: clamp(320px, 65vh, 680px); }
  .xss--large  .xss-media{ min-height: clamp(360px, 85vh, 860px); }

  /* ---------- Dots ---------- */
/* ---------- Dots (redondos e configuráveis) ---------- */
.xss-dots{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:15px; z-index:5;
  align-items:center;           /* evita esticar vertical */
  --dot: 12px;                  /* tamanho padrão */
  --dot-active: 12px;           /* tamanho quando ativo (pode ser > para “pulsar”) */
}

.xss-dots .xss-dot{
  flex: 0 0 auto;               /* não deixa o flex esticar */
  width: var(--dot);
  aspect-ratio: 1 / 1;          /* garante círculo usando só width */
  border-radius: 9999px;        /* círculo perfeito */
  border: 0;
  padding: 0;
  line-height: 0;
  display: inline-block;
  background: rgba(255,255,255,.45);
  -webkit-appearance: none;     /* mata estilo nativo do botão (iOS/Safari) */
  appearance: none;
  box-sizing: border-box;
  cursor: pointer;
}

.xss-dots .xss-dot.is-active{
  width: var(--dot-active);
  background:#32c65a;
}

/* Fallback para browsers sem aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .xss-dots .xss-dot{ height: var(--dot); }
  .xss-dots .xss-dot.is-active{ height: var(--dot-active); }
}

  /* ---------- Efeitos ---------- */

  /* SLIDE: track em linha, translateX */
  .xss--effect-slide .xss-track{
    display:flex;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .xss--effect-slide .xss-slide{
    flex: 0 0 100%;
  }

  /* FADE: slides sobrepostos */
  .xss--effect-fade .xss-track{
    position:relative;
  }
  .xss--effect-fade .xss-slide{
    position:absolute; inset:0; opacity:0; transition: opacity .5s ease;
  }
  .xss--effect-fade .xss-slide.is-active{ opacity:1; position:absolute; inset:0; }


/* habilita gesto horizontal sem bloquear o scroll vertical da página */
.xss-viewport{ touch-action: pan-y; }

/* durante o arrasto, não permitir clique de navegação e muda cursor */
.is-dragging .xss-link-cover{ pointer-events: none; }
.is-dragging, .is-dragging *{ cursor: grabbing !important; }

/* gesto horizontal suave sem travar o scroll vertical */
.xss-viewport{ touch-action: pan-y; }

/* estado durante o arrasto (bloqueia clique nos links de cobertura) */
.is-dragging .xss-link-cover{ pointer-events: none; }
.is-dragging, .is-dragging *{ cursor: grabbing !important; }

/* setas sem fundo (apenas ícone) — visíveis só no desktop */
.xss-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; background:transparent; padding:.25rem;
  color:#fff; cursor:pointer; z-index:6; line-height:0;
}
.xss-arrow:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
.xss-prev{ left:12px; } .xss-next{ right:12px; }
@media (max-width: 989px){ .xss-arrow{ display:none; } }

/* melhora suavidade do translate */
.xss--effect-slide .xss-track{ will-change: transform; }

/* cor de fundo leve para evitar “flash branco” até a imagem pintar */
.xss-img{ background-color: rgba(0,0,0,.04); }

.xss--effect-slide .xss-track{ will-change: transform; }
.xss-img{ background-color: rgba(0,0,0,.04); }

/* garante que as setas recebam o clique mesmo com overlays */
.xss-arrow{ pointer-events:auto; }


/* quando a equalização estiver ativa, usa a menor altura (maior aspect) para todos */
.xss--preserve-ratio[data-equalize-active="true"] .xss-media{
  aspect-ratio: var(--xss-eq-aspect-desktop, 2/1);
}
@media (max-width: 749px){
  .xss--preserve-ratio[data-equalize-active="true"] .xss-media{
    aspect-ratio: var(--xss-eq-aspect-mobile, var(--xss-eq-aspect-desktop, 2/1));
  }
}
.xss-section:not(.xss--edge2edge) .xss-viewport{ overflow:hidden; }
.xss-section:not(.xss--edge2edge) .xss-picture{ left:1px; right:-1px; }

#xss-{{ section.id }} .xss-slider[data-booting] .xss-track{
  transition: none !important;
}