.digr_ss_icon_wrapper span {
    line-height: 1em;
}


/* .digr_ss_btn_inner {
    display: flex;
    justify-content: center;
    align-items: center;
} */

.digr_social_share_title {
    display: flex;
    align-items: center;
}

.digr_social_share_btn {
    cursor: pointer;
}

.digr_social_share_container {
    display: flex;
    box-sizing: border-box;
    flex: 0 1 auto;
    flex-wrap: wrap;
}

.digr_social_share_container .digr_social_share_btn .digr_ss_content {
    display: flex;
    align-items: center;
}

.digr_social_share_container .digr_ss_content {
    color: #fff;

}

.digr_ss_layout_classic .digr_ss_content {
    width: 100%;
}

.digr_social_share .digr_ss_btn_inner .digr_ss_content {
    padding: 10px 20px;
}

.digr_ss_icon_arrow svg {
    position: absolute;
    z-index: 2;
    top: 50%;
    height: 37%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}


.digr_ss_btn_inner {
    align-items: center;
    justify-content: center;
    display: flex;
}




/* 
  :root{
    --et_global_heading_font:'Instrument Serif', serif;
    --ink:#0C0D0F; --ink2:#3A3D45; --ink3:#8A8F9C;
    --bg2:#F3F2EE; --white:#FFFFFF;
    --accent:#2A5AFF; --accent-light:#EEF2FF; --accent-mid:#C7D2FF;
    --border:#E4E2DC; --border2:#D0CEC7;
    --shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
  }

  html{
    scroll-behavior:smooth;
  }
  a{
    color:inherit; 
    text-decoration:none;
  }
  button{
    font-family:inherit; 
    cursor:pointer;
  }

  h1,h2,h3,h4{
    font-family:var(--et_global_heading_font); 
    font-weight:500; 
    margin:0; 
    letter-spacing:-.01em;
  }
  h1 em, h2 em{
    font-style:italic; 
    color:var(--accent); 
    font-weight:400;
  }

  .reveal{
    opacity:0; 
    transform:translateY(18px); 
    transition:opacity .6s ease, transform .6s ease;
  }
  .reveal.in{
    opacity:1; 
    transform:none;
  }
  @media (prefers-reduced-motion: reduce){ 
    .reveal{
      opacity:1; 
      transform:none; 
      transition:none;
    } 
    html{
      scroll-behavior:auto;
    } 
  }


  .product-tabs{
    display:flex; 
    flex-wrap:wrap; 
    gap:12px; 
    justify-content:center; 
    margin:44px 0 48px;
  }
  .product-tab{
    display:flex; 
    align-items:center; 
    gap:12px; 
    padding:14px 22px; 
    border-radius:16px;
    border:1.5px solid var(--border2); 
    background:var(--white); 
    cursor:pointer; 
    transition:.18s; 
    text-align:left;
  }
  .product-tab:hover{
    border-color:var(--accent-mid);
  }
  .product-tab.active{
    border-color:var(--accent);
    background:var(--accent-light); b
    ox-shadow:var(--shadow);}
  .product-tab .icon{
    width:38px; 
    height:38px; 
    border-radius:10px; 
    background:var(--bg2); 
    color:var(--ink2); 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    flex:none;}
  .product-tab.active .icon{
    background:var(--accent); 
    color:#fff;}
  .product-tab .icon svg{
    width:19px; 
    height:19px;
  }
  .product-tab .txt b{
    display:block; 
    font-size:14.5px; 
    font-weight:700;
  }
  .product-tab .txt span{
    font-size:12px; 
    color:var(--ink3);
  }
  .product-tab.bundle{
    border-style:dashed;
  }

  .pricing-panel{
    display:none;
  }
  .pricing-panel.active{
    display:flex;
  }

  
  .inner-toggle{
    display:inline-flex; 
    background:var(--bg2); 
    border:1px solid var(--border); 
    border-radius:999px; 
    padding:4px; 
    margin:0 auto 44px;
  }
  .inner-toggle-wrap{
    text-align:center;
    width:100%;
  }
  .inner-toggle button{
    padding:10px 22px; 
    border-radius:999px; 
    font-weight:700; 
    font-size:13.5px; 
    color:var(--ink3); 
    background:transparent; 
    border:none;
  }
  .inner-toggle button.active{
    background:var(--white); 
    color:var(--ink); 
    box-shadow:var(--shadow);
  }
  .view{
    display:none;
  }
  .view.active{
    display:flex;
  } */






/* <div class="product-tabs reveal in">
      <button class="product-tab active" data-panel="panel-gallery">
        <span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><path d="M21 15l-5-5L5 21"></path></svg></span>
        <span class="txt"><b>HappyDivi Gallery</b><span>From $25/yr</span></span>
      </button>
      <button class="product-tab" data-panel="panel-form">
        <span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 4h16v16H4z"></path><path d="M4 6l8 7 8-7"></path></svg></span>
        <span class="txt"><b>HappyDivi Form</b><span>Free to start</span></span>
      </button>
     <button class="product-tab bundle" data-panel="panel-bundle">
        <span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M20 12v9H4v-9M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C9 2 12 7 12 7z"></path></svg></span>
        <span class="txt"><b>All-Access Bundle</b><span>Every product, one price</span></span>
      </button>

    </div> */

 /* <div class="pricing-panel active" id="panel-gallery">
      <div class="inner-toggle-wrap">
        <div class="inner-toggle">
          <button class="toggle-btn active" data-view="gallery-yearly">Yearly</button>
          <button class="toggle-btn" data-view="gallery-lifetime">Lifetime</button>
        </div>
      </div>
</div> */

/* <script>
document.addEventListener('DOMContentLoaded', function () {
  const revealEls = document.querySelectorAll('.reveal');
  if('IntersectionObserver' in window){
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });
    }, {threshold:.12});
    revealEls.forEach(el => io.observe(el));
  } else { revealEls.forEach(el => el.classList.add('in')); }

  const tabs = document.querySelectorAll('.product-tab');
  const panels = document.querySelectorAll('.pricing-panel');
  const slugToPanel = {gallery:'panel-gallery', form:'panel-form', bundle:'panel-bundle'};
  const panelToSlug = {'panel-gallery':'gallery', 'panel-form':'form', 'panel-bundle':'bundle'};

  function activatePanel(panelId, updateHash){
    tabs.forEach(t => t.classList.toggle('active', t.dataset.panel === panelId));
    panels.forEach(p => p.classList.toggle('active', p.id === panelId));
    if(updateHash) history.replaceState(null, '', '#' + panelToSlug[panelId]);
  }
  tabs.forEach(tab => tab.addEventListener('click', () => activatePanel(tab.dataset.panel, true)));

  const initialHash = window.location.hash.replace('#','');
  activatePanel(slugToPanel[initialHash] || 'panel-gallery', false);

  document.querySelectorAll('.toggle-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const group = btn.closest('.inner-toggle');
      group.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      const target = btn.dataset.view;
      document.querySelectorAll('.view').forEach(v => v.classList.toggle('active', v.id === target));
    });
  });
});
</script> */