{# Clientshare - Storylane Full Width Showcase module #}
{% set embed_url = module.storylane_embed_url|default("https://app.storylane.io/demo/crwyml22weiw?embed=inline") %}
{% set section_id = module.section_id|default("product-tour") %}
{% set module_styles = module.module_styles %}
{% set section_styles = module_styles.section_styles %}
{% set tour_sizing = section_styles.tour_sizing %}
{% set section_bg = section_styles.section_background_color %}
{% require_css %}
<style>
  # {
    {% if section_bg.css %}background-color: ;{% endif %}
    {% if tour_sizing.desktop_tour_height %}--cs-tour-desktop-height: px;{% endif %}
    {% if tour_sizing.tablet_tour_height %}--cs-tour-tablet-height: px;{% endif %}
    {% if tour_sizing.mobile_tour_height %}--cs-tour-mobile-height: px;{% endif %}
    {% if section_styles.section_padding.css %}{% endif %}
  }
  # .cs-storylane-tour__inner {
    {% if section_styles.max_width %}max-width: px;{% endif %}
  }
  # .cs-storylane-tour__header {
    {% if section_styles.header_gap %}margin-bottom: px;{% endif %}
  }
</style>
{% end_require_css %}
<section id="" class="cs-storylane-tour">
  <div class="cs-storylane-tour__inner">
    {% if module.intro_rich_text %}
      <div class="cs-storylane-tour__header">
        
      </div>
    {% endif %}
    <div class="cs-storylane-tour__frame-wrap">
      <div class="cs-storylane-tour__embed">
        <script async src="https://js.storylane.io/js/v2/storylane.js" data-verify-origin=""></script>
        <iframe
          loading="lazy"
          class="cs-storylane-tour__iframe sl-demo"
          src=""
          name="sl-embed"
          title=""
          allow="fullscreen"
          allowfullscreen
        ></iframe>
      </div>
    </div>
    {% if module.bottom_note %}
      <div class="cs-storylane-tour__note">
        
      </div>
    {% endif %}
  </div>
</section>
.cs-storylane-tour__frame-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 16px !important;
}

.cs-storylane-tour__embed {
  position: relative;
  width: 100%;
  height: var(--cs-tour-desktop-height, 760px) !important;
  min-height: 700px;
  overflow: hidden;
  border-radius: 16px !important;
}

.cs-storylane-tour__iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 700px;
  border: 0;
  border-radius: 16px !important;
}

@media (max-width: 980px) {
  .cs-storylane-tour__embed {
    height: var(--cs-tour-tablet-height, 560px) !important;
    min-height: 520px;
  }

  .cs-storylane-tour__iframe {
    min-height: 520px;
  }
}

@media (max-width: 767px) {
  .cs-storylane-tour__embed {
    height: var(--cs-tour-mobile-height, 430px) !important;
    min-height: 430px;
  }

  .cs-storylane-tour__iframe {
    min-height: 430px;
  }
}
.cs-storylane-tour__frame-wrap {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  box-shadow:
    0 30px 80px rgba(18, 35, 63, 0.34),
    0 12px 28px rgba(18, 35, 63, 0.22),
    0 0 0 1px rgba(18, 35, 63, 0.08);
}

.cs-storylane-tour__embed,
.cs-storylane-tour__iframe {
  overflow: hidden !important;
  border-radius: 18px !important;
  background: transparent !important;
}

.cs-storylane-tour__iframe {
  clip-path: inset(0 round 18px);
}