/* ============================================================
   Phosphor Icons — fontes locais (CSP-safe, assets do tema)
   @font-face definido inline no template via {% asset_url %}
   ============================================================ */
#bb-cd .ph {
  font-family: "Phosphor" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga";
  font-feature-settings: "liga";
  font-variant-ligatures: discretionary-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media(max-width:990px){
.product-card-price .text-sm,
.product-card-price .text-sm *{font-size:11px!important}
.absolute .bite-label{font-size:10px!important}
}

#bb-cd .ph-fill {
  font-family: "Phosphor-Fill" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga";
  font-feature-settings: "liga";
  font-variant-ligatures: discretionary-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Icones usados neste tema */
#bb-cd .ph.ph-barbell:before              { content: "\e0b6"; }
#bb-cd .ph.ph-bone:before                 { content: "\e7f2"; }
#bb-cd .ph.ph-chats:before                { content: "\e17c"; }
#bb-cd .ph.ph-check:before                { content: "\e182"; }
#bb-cd .ph.ph-hourglass:before            { content: "\e2b2"; }
#bb-cd .ph.ph-leaf:before                 { content: "\e2da"; }
#bb-cd .ph.ph-lightning:before            { content: "\e2de"; }
#bb-cd .ph.ph-paw-print:before            { content: "\e648"; }
#bb-cd .ph.ph-prohibit:before             { content: "\e3de"; }
#bb-cd .ph.ph-scales:before               { content: "\e750"; }
#bb-cd .ph.ph-shield-check:before         { content: "\e40c"; }
#bb-cd .ph.ph-shopping-cart-simple:before { content: "\e420"; }
#bb-cd .ph.ph-warning:before              { content: "\e4e0"; }
#bb-cd .ph.ph-warning-octagon:before      { content: "\e4e4"; }
#bb-cd .ph.ph-x:before                    { content: "\e4f6"; }
#bb-cd .ph.ph-x-circle:before             { content: "\e4f8"; }
#bb-cd .ph-fill.ph-star:before            { content: "\e46a"; }

/* ============================================================
   Parent site overrides
   ============================================================ */
html, body { margin: 0; }
#barraNewsletter { margin: 0 !important; }
#corpo { padding: 0 !important; margin: 0 !important; }
.caixa-sombreada,
.caixa-sombreada > div { box-shadow: none !important; border: none !important; }

/* ============================================================
   Base reset
   ============================================================ */
#bb-cd {
  overflow: visible;
  box-sizing: border-box;
}
#bb-cd *, #bb-cd *::before, #bb-cd *::after { box-sizing: inherit; }

/* ============================================================
   Fade-in (IntersectionObserver adiciona .visible via JS)
   ============================================================ */
#bb-cd .fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
#bb-cd .fade-in.visible { opacity: 1; transform: none; }

@media (max-width: 767px) {
  #bb-cd .fade-in {
    transform: translateY(16px);
  }
  header picture img{height:40px;}
}
#floating-buy-button{
      border: 0;
    background: transparent;
    border-radius: 0;
    width: 100%;
    bottom: 0;
}

/* ============================================================
   Bite strength label — #bb-products
   ============================================================ */
.bite-label {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.5;
}
@media(max-width:990px){
  .bite-label{
    font-size:.5rem
  }
}
#bb-products .bite-label--mod  { background: rgba(212,160,23,.15); color: #c8960a; }
#bb-products .bite-label--str  { background: rgba(232,124,43,.15); color: #e87c2b; }
#bb-products .bite-label--xstr { background: rgba(192,57,43,.15);  color: #c0392b; }

/* ============================================================
   Botoes (definidos aqui pois sao reutilizados via classe)
   ============================================================ */

#bb-cd .btn-primary {
  display: inline-block;
  background-color: #c8de3a;
  color: #1b3a2d;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .75rem 1rem;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: filter .15s ease, transform .1s ease;
  text-decoration: none;
  line-height: 1.2;
  height:auto;
}
#bb-cd #bb-products product-card .btn-primary{
    background-color: transparent;
    color: #1b3a2d;
    border: 1px solid;
}
#bb-cd #bb-products product-card:hover .btn-primary{
  background-color: #1b3a2d;
  color:#fff;
}
#bb-cd .btn-primary:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}
#bb-cd .btn-primary:active { transform: none; }

#bb-cd .btn-outline {
  display: inline-block;
  background-color: transparent;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .75rem 1.75rem;
  border-radius: 8px;
  border: 2px solid #ffffff;
  cursor: pointer;
  transition: background-color .15s ease;
  text-decoration: none;
}
#bb-cd .btn-outline:hover { background-color: rgba(255,255,255,0.12); }

/* ============================================================
   Hero - imagem de fundo via variavel Liquid (CSS var)
   ============================================================ */
#bb-cd .bb-hero--img {
  background-image:
    linear-gradient(rgba(17,42,32,.68), rgba(27,58,45,.68)),
    var(--hero-img);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
/* Circulos decorativos */
#bb-cd .bb-hero::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: rgba(200,222,58,.07);
  pointer-events: none;
}
#bb-cd .bb-hero::after {
  content: '';
  position: absolute;
  bottom: 0px; left: -60px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(200,222,58,.05);
  pointer-events: none;
}

/* ============================================================
   Comparativo - proporcoes customizadas (nao disponivel no Tailwind)
   ============================================================ */
#bb-cd .bb-compare-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.3fr;
}

/* ============================================================
   Scallop dividers
   ============================================================ */
#bb-cd .scallop-bottom,
#bb-cd .scallop-top {
  line-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* ============================================================
   FAQ - indicador abrir/fechar
   ============================================================ */
#bb-cd .bb-faq-summary { list-style: none; user-select: none; }
#bb-cd .bb-faq-summary::-webkit-details-marker { display: none; }
#bb-cd .bb-faq-summary::after {
  content: "+";
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  color: #2e6b46;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
#bb-cd details[open] > .bb-faq-summary::after { content: "-"; }

/* ============================================================
   Density Cards (composicao) - gradientes complexos
   ============================================================ */
#bb-cd .bb-density-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-bottom: 2.5rem;
}
#bb-cd .bb-density-card {
  border-radius: 16px;
  padding: 1.4rem 1.25rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  border: 1px solid transparent;
}
#bb-cd .bb-density-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 40px rgba(0,0,0,.16) !important;
}
#bb-cd .bb-dens--mod {
  background: linear-gradient(135deg, #fff9e0 0%, #fffef6 100%);
  border-color: rgba(212,160,23,.3);
  box-shadow: 0 4px 20px rgba(212,160,23,.16);
}
#bb-cd .bb-dens--str {
  background: linear-gradient(135deg, #fff4e8 0%, #fffaf5 100%);
  border-color: rgba(232,124,43,.3);
  box-shadow: 0 4px 20px rgba(232,124,43,.16);
}
#bb-cd .bb-dens--xstr {
  background: linear-gradient(135deg, #fff0f0 0%, #fffbfb 100%);
  border-color: rgba(192,57,43,.3);
  box-shadow: 0 4px 20px rgba(192,57,43,.16);
}
/* Barra de acento esquerda */
#bb-cd .bb-dens-accent {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 5px;
}
#bb-cd .bb-dens--mod  .bb-dens-accent { background: linear-gradient(to bottom, #f0c030, #b88a10); }
#bb-cd .bb-dens--str  .bb-dens-accent { background: linear-gradient(to bottom, #f09848, #d05a10); }
#bb-cd .bb-dens--xstr .bb-dens-accent { background: linear-gradient(to bottom, #e06050, #a01818); }
/* Icone em circulo colorido */
#bb-cd .bb-dens-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#bb-cd .bb-dens-top .dp-dot {
  font-size: 1.6rem;
  line-height: 1;
  width: 2.8rem; height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
#bb-cd .bb-dens--mod  .dp-dot { background: rgba(212,160,23,.15); color: #c8960a; }
#bb-cd .bb-dens--str  .dp-dot { background: rgba(232,124,43,.15); color: #e87c2b; }
#bb-cd .bb-dens--xstr .dp-dot { background: rgba(192,57,43,.15);  color: #c0392b; }
/* Barras de intensidade */
#bb-cd .bb-dens-bars { display: flex; gap: 4px; align-items: flex-end; }
#bb-cd .bb-dens-b { width: 9px; border-radius: 4px; background: rgba(0,0,0,.1); }
#bb-cd .bb-dens-b:nth-child(1) { height: 12px; }
#bb-cd .bb-dens-b:nth-child(2) { height: 18px; }
#bb-cd .bb-dens-b:nth-child(3) { height: 24px; }
#bb-cd .bb-dens--mod  .bb-dens-b.active { background: #c8960a; }
#bb-cd .bb-dens--str  .bb-dens-b.active { background: #e87c2b; }
#bb-cd .bb-dens--xstr .bb-dens-b.active { background: #c0392b; }
/* Labels */
#bb-cd .bb-density-card .dp-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: .92rem;
  text-transform: uppercase;
  color: #1a1a1a;
  letter-spacing: .07em;
}
#bb-cd .bb-density-card .dp-desc { font-size: .75rem; color: #505050; line-height: 1.5; }
@media (max-width: 560px) {
  #bb-cd .bb-density-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Urgency bar fixa no rodapé
   ============================================================ */


#bb-urgency-bar .btn-primary {
  padding: .4rem .875rem;
  font-size: .8rem;
}

main{background:#f4f9f6}