/** Shopify CDN: Minification failed

Line 243:0 Unexpected "<"
Line 250:9 Unexpected "{"
Line 250:18 Expected ":"
Line 251:9 Unexpected "{"
Line 251:18 Expected ":"
Line 258:9 Unexpected "{"
Line 258:18 Expected ":"
Line 265:0 Unexpected "<"
Line 270:11 Unexpected "{"
Line 270:20 Expected ":"
... and 23 more hidden warnings

**/
/* ==== INÍCIO: assets/home-shelf-pro.css =====================================

   Home Shelf Pro — estilos globais e reutilizáveis
   - Mobile base: 1 card por “página”
   - Tablet: 3 por página
   - Desktop: 4 por página
   - Flags por classe na section:
       .hshelf--peek        → mostra “mordidinha” do próximo card (mobile)
       .hshelf--flush-right → encosta a vitrine no lado direito (mobile)
       .hshelf--no-clip     → garante que nada corte a imagem ao rolar (iOS)

============================================================================= */

:root{
  --hshelf-gutter-desktop: 64px; /* espaço lateral onde a seta vive (desktop) */
  --hshelf-gutter-tablet:  48px; /* idem tablet */
  --hshelf-gutter-mobile:  20px; /* respiro à ESQUERDA no mobile */
  --hshelf-arrow-shift:    80%;  /* quão “fora” do card ficam as setas */
}

/* ===== Estrutura base ===================================================== */

.hshelf{ position: relative; }
.section-[class*="padding"]{} /* apenas para manter consistência com o tema */

.hshelf-head{ margin-bottom: 18px; }
.hshelf-head--left   { text-align: left; }
.hshelf-head--center { text-align: center; }
.hshelf-head--right  { text-align: right; }
.hshelf-title{ margin:0; font-size: clamp(20px, 2vw, 28px); font-weight: 800; }
.hshelf-subtitle{ margin-top: 6px; opacity:.8; }

.hshelf-viewport{
  position: relative;
  overflow: visible; /* MUITO importante: não cortar durante o scroll */
}

.hshelf-track{
  display: grid;
  grid-auto-flow: column;
  gap: var(--hshelf-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;  /* IE/Edge legado */
  scrollbar-width: none;     /* Firefox */
}
.hshelf-track::-webkit-scrollbar{ display: none; } /* Chrome/Safari */

.hshelf-item{
  scroll-snap-align: start;
  list-style: none;
  min-width: 0;
}

/* ===== Wrapper com gutter (onde as setas “vivem”) ========================= */

.hshelf-inner{
  position: relative;
  max-width: var(--hshelf-max, 1200px);
  margin: 0 auto;
  padding-inline: var(--hshelf-gutter-desktop);
  overflow: visible; /* setas podem “sair” sem recorte */
}

/* layer das setas cobre só a área útil (descontando o gutter) */
.hshelf-ctrl{
  position: absolute;
  inset: 0;
  left:  var(--hshelf-gutter-desktop);
  right: var(--hshelf-gutter-desktop);
  pointer-events: none;
  z-index: 5;
}

/* Setas “pílula” (desktop/tablet) */
.hshelf-ctrl .hshelf-nav{
  pointer-events: auto;
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 999px;
  background: #fff;
  color: #222;
  border: 2px solid rgba(0,0,0,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.hshelf-ctrl .hshelf-nav:hover{
  border-color: rgba(0,0,0,.2);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.hshelf-ctrl .hshelf-nav[disabled]{ opacity:.35; cursor: default; box-shadow: none; }

/* Encostadas no bordo interno do gutter */
.hshelf-ctrl .hshelf-nav--prev{ left: 0; }
.hshelf-ctrl .hshelf-nav--next{ right: 0; }

/* Leve deslocamento para “fora” visualmente (controle fino) */
.hshelf-ctrl .hshelf-nav--prev{
  left: -20px;
  transform: translate(calc(-1 * var(--hshelf-arrow-shift)), -50%);
}
.hshelf-ctrl .hshelf-nav--next{
  right: -20px;
  transform: translate(var(--hshelf-arrow-shift), -50%);
}

/* ===== Higiene ============================================================ */

.hshelf-track{ padding: 0; }
.hshelf-item{ margin: 0; }

/* Em desktops muito largos, impede arredondamento das contas do grid */
@media (min-width: 1024px){
  .hshelf-track{ contain: inline-size; }
}

/* ===== Mobile (≤ 749.98px) =============================================== */
/* Base: 1 card por “página”. A mordidinha é habilitada pela flag .hshelf--peek */

@media (max-width: 749.98px){
  .hshelf-track{ grid-auto-columns: 100%; }
  .hshelf-nav{ display: none; }   /* swipe-only no mobile */
  .hshelf-ctrl{ display: none; }  /* sem setas no mobile */
  .hshelf-inner{ padding-inline: var(--hshelf-gutter-mobile); }

  /* Mordidinha do próximo card (depende da flag .hshelf--peek) */
  .hshelf.hshelf--peek .hshelf-track{
    grid-auto-columns: calc(100% - var(--hshelf-peek, 24px)) !important;
    scroll-padding-inline: 0 var(--hshelf-peek, 24px);
  }

  /* Encosta à DIREITA; mantém 20px à ESQUERDA */
  .hshelf.hshelf--flush-right .hshelf-inner{
    padding-right: 0 !important;
    padding-left: var(--hshelf-gutter-mobile, 20px) !important;
  }
}

/* Preview no editor (iframe às vezes > 750px, mas queremos manter o visual) */
body.shopify-design-mode .hshelf.hshelf--flush-right .hshelf-inner{
  padding-right: 0 !important;
  padding-left: var(--hshelf-gutter-mobile, 20px) !important;
}
body.shopify-design-mode .hshelf.hshelf--flush-right .hshelf-viewport{
  padding-right: var(--hshelf-peek, 24px) !important;
}

/* ===== Tablet (≥ 750px e < 1024px) ======================================= */

@media (min-width: 750px) and (max-width: 1023.98px){
  .hshelf-track{
    grid-auto-columns: calc((100% - 2*var(--hshelf-gap)) / 3);
  }
  .hshelf-inner{ padding-inline: var(--hshelf-gutter-tablet); }
  .hshelf-ctrl{
    left:  var(--hshelf-gutter-tablet);
    right: var(--hshelf-gutter-tablet);
  }

  #MainContent .hshelf .cpro-btn{
    min-width: 132px;
    height: 46px;
    padding: 0 14px;
    font-weight: 800;
  }
}

/* ===== Desktop (≥ 1024px) ================================================= */

@media (min-width: 1024px){
  .hshelf-track{
    grid-auto-columns: calc((100% - 3*var(--hshelf-gap)) / 4);
  }
  .hshelf-inner{ padding-inline: var(--hshelf-gutter-desktop); }
  .hshelf-ctrl{
    left:  var(--hshelf-gutter-desktop);
    right: var(--hshelf-gutter-desktop);
  }
}

/* ===== Integração com botão do card (sem bordas fantasmas) =============== */

#MainContent .hshelf .cpro-btn,
#MainContent .hshelf .cpro-btn:hover,
#MainContent .hshelf .cpro-btn:focus,
#MainContent .hshelf .cpro-btn:active{
  border:0 !important; box-shadow:none !important; outline:0 !important;
}

/* ===== Anti-clip universal (iOS/Safari/Chrome mobile) ===================== */
/* NUNCA deixe ancestral recortar a imagem; o arredondado fica NA IMAGEM.   */

.hshelf.hshelf--no-clip .cpro-media-wrap,
.hshelf.hshelf--no-clip .cpro-media-wrap > *{
  overflow: visible !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  border-radius: 0 !important;
  background: transparent;
}

/* Fundo arredondado decorativo (sem usar overflow) */
.hshelf.hshelf--no-clip .cpro-media-wrap{ position: relative; }
.hshelf.hshelf--no-clip .cpro-media-wrap::before{
  content:""; position:absolute; inset:0;
  border-radius: var(--hshelf-card-radius,16px);
  background: var(--cpro-media-bg, #efefef); /* ajuste se a cor do card for outra */
  pointer-events:none; z-index:0;
}

/* A imagem recebe o recorte e fica em layer própria */
.hshelf.hshelf--no-clip .cpro-media{
  position: relative; z-index:1;
  display:block; width:100%; height:auto;
  border-radius: var(--hshelf-card-radius,16px);
  clip-path: inset(0 round var(--hshelf-card-radius,16px));
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform: translateZ(0); will-change: transform;
  outline: 1px solid rgba(0,0,0,.02); outline-offset:-1px; /* remove “costura” 1px */
}

/* ==== FIM: assets/home-shelf-pro.css ===================================== */

<style>
/* =========================================================================
   ESCOPADO: SOMENTE para #hshelf-{{ section.id }}
   Correções de layout do card para esta vitrine, sem afetar o restante.
   ========================================================================= */

/* 1) Anti-clipping extra (se algum ratio-box teimar em cortar) */
#hshelf-{{ section.id }} .cpro-media-wrap,
#hshelf-{{ section.id }} .cpro-media-wrap > *{
  overflow: visible !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  border-radius: 0 !important;
  background: transparent;
}
#hshelf-{{ section.id }} .cpro-media{
  border-radius: var(--hshelf-card-radius);
  clip-path: inset(0 round var(--hshelf-card-radius));
  transform: translateZ(0);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

<style>
/* ====== MOBILE (≤ 749.98px) — botão AO LADO do preço ====== */
@media (max-width: 749.98px){

  /* título + descrição seguem iguais */
  #hshelf-{{ section.id }} .cpro-title{
    margin: 0 20px !important;
    min-height: calc(22px * 2);
  }
  #hshelf-{{ section.id }} .cpro-desc{
    display: block !important;
    margin: 6px 20px 0 !important;
  }

  /* PREÇO + BOTÃO: 2 colunas (preço | botão) */
  #hshelf-{{ section.id }} .cpro-price-row{
    grid-template-columns: 1fr auto;     /* ← lado a lado */
    align-items: center !important;
    gap: 12px;
    margin: 10px 20px 0 !important;
  }

  /* preço não precisa “reservar” tanto espaço quando está ao lado */
  #hshelf-{{ section.id }} .cpro-price{
    align-items: end !important;         /* números encostam em baixo */
    --cpro-compare-h: 16px !important;
    --cpro-install-h: 16px !important;
  }

  /* BOTÃO: pílula compacta, largura automática */
  #hshelf-{{ section.id }} .cpro-btn{
    width: auto !important;              /* nada de 100% */
    min-width: 140px !important;         /* pode ajustar para 120–160 */
    height: 44px !important;
    padding: 0 14px !important;
    border-radius: var(--btn-radius) !important;
    margin-top: 0 !important;
  }
  #hshelf-{{ section.id }} .cpro-btn__icon{
    display: inline-flex !important;
    position: static !important;
    width: auto !important; height: auto !important;
  }
  #hshelf-{{ section.id }} .cpro-btn__label{
    display: inline !important;
    position: static !important;
    width: auto !important; height: auto !important;
    clip: auto !important; margin: 0 !important;
    white-space: nowrap !important;      /* evita quebrar em 2 linhas */
    font-size: 16px !important;
  }
  #hshelf-{{ section.id }} .cpro-btn .sr-only{
    position: static !important; width: auto !important; height: auto !important;
    clip: auto !important; margin: 0 !important; overflow: visible !important;
  }

  /* ultra-estreito (≤360px): deixa encolher um tiquinho */
  @media (max-width: 360px){
    #hshelf-{{ section.id }} .cpro-btn{
      min-width: 120px !important;
      padding: 0 12px !important;
    }
    #hshelf-{{ section.id }} .cpro-btn__label{ font-size: 15px !important; }
  }
}

/* segurança: z-index para nada cobrir o clique */
#hshelf-{{ section.id }} .cpro-price-row{ position: relative; z-index: 1; }
#hshelf-{{ section.id }} .cpro-price-row .cpro-btn{ position: relative; z-index: 2; }
</style>