<style>
/*** Global styles ***/

[id^="DP--"] {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-transform: unset;
  letter-spacing: unset;
  margin: unset;
  padding: unset;
  z-index: 1;
}

.fbs-pck__section * {
  box-sizing: border-box !important;
}

.fbs-pck__section img {
  max-width: 100%;
}

[class^="webs_pack_-_fixed"] {
  display: none;
}

.fbs-pck__section h1,
.fbs-pck__section h2,
.fbs-pck__section h3,
.fbs-pck__section h4,
.fbs-pck__section h5,
.fbs-pck__section h6 {
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
}

.fbs-pck__rte,
.fbs-pck__rte p,
.fbs-pck__rte a,
.fbs-pck__rte a:hover,
.fbs-pck__rte a:visited,
.fbs-pck__rte a:focus {
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
}

.fbs-pck__rte a {
  text-decoration: underline;
}

.fbs-pck__rte p {
  margin-bottom: 0.8em;
}

.fbs-pck__rte p:last-of-type {
  margin-bottom: 0;
}

.fbs-pck__rte ul {
  margin: 1em 0;
  padding-left: 40px;
}

.fbs-pck__rte li {
  list-style: unset;
}

.fbs-pck__absolute-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 2;
}

.fbs-pck__relative {
  position: relative;
}

h1.fbs-pck__rte,
h2.fbs-pck__rte,
h3.fbs-pck__rte,
h4.fbs-pck__rte,
h5.fbs-pck__rte,
h6.fbs-pck__rte {
  margin-bottom: 1.2rem;
}

.fbs-pck__text {
  margin: 0;
  color: inherit;
}

.fbs-pck__button {
  font-family: inherit;
  cursor: pointer;
  text-transform: unset;
  -webkit-appearance: none;
}

.fbs-pck__button::after {
  display: none;
}

.fbs-pck__section button,
.fbs-pck__section input[type="text"],
.fbs-pck__section input[type="email"] {
  -webkit-appearance: none;
}

.fbs-pck__sizer {
  margin-left: auto;
  margin-right: auto;
}

.fbs-pck__height-sizer {
  display: table;
}

.fbs-pck__height--x-small {
  height: 125px;
}

.fbs-pck__height--small {
  height: 300px;
}

.fbs-pck__height--medium {
  height: 475px;
}

.fbs-pck__height--large {
  height: 650px;
}

.fbs-pck__height--x-large {
  height: 775px;
}

@media only screen and (max-width: 767px) {
  .fbs-pck__height--x-small {
    height: 94px;
  }

  .fbs-pck__height--small {
    height: 225px;
  }

  .fbs-pck__height--medium {
    height: 357px;
  }

  .fbs-pck__height--large {
    height: 488px;
  }

  .fbs-pck__height--x-large {
    height: 582px;
  }
}

/*** Videos ***/

.fbs-pck__video__wrapper video[loading=lazy],
.fbs-pck__background-video[loading=lazy] {
  opacity: 1;
}

/*** Images ***/
.fbs-pck__image__wrapper {
  display: grid;
  position: relative;
  margin: 0;
}

.fbs-pck__image__wrapper svg {
  display: block;
}

.fbs-pck__image__wrapper:not(.fbs-pck__image__wrapper--contain) svg {
  width: inherit;
  height: inherit;
}

.fbs-pck__image__wrapper > * {
  grid-area: 1 / 1 / 2 / 2;
}

.fbs-pck__image__wrapper img,
.fbs-pck__image__wrapper .fbs-pck__placeholder {
  object-fit: cover;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.fbs-pck__image__wrapper--contain img {
  object-fit: contain;
}

.wbs_pck__image-link {
  display: block;
  overflow: hidden;
}

/*** Widths ***/

div.DP__widths {
  display: inline-block !important;
  vertical-align: top;
  font-size: 0;
  margin-left: auto;
  margin-right: auto;
}

div.DP__widths * {
  font-size: initial;
}

@media (max-width: 767px) {
  div.DP__widths {
    width: 100% !important;
  }
}

/*** Flex ***/
.fbs-pck__flex {
  display: flex;
}

.fbs-pck__flex-wrap {
  flex-wrap: wrap;
}

.fbs-pck__flex--1-per-row .fbs-pck__flex-item {
  flex-basis: 100%;
}

.fbs-pck__flex--2-per-row .fbs-pck__flex-item {
  flex-basis: 50%;
}

.fbs-pck__flex--3-per-row .fbs-pck__flex-item {
  flex-basis: 33.3333%;
}

.fbs-pck__flex--4-per-row .fbs-pck__flex-item {
  flex-basis: 25%;
}

.fbs-pck__flex--5-per-row .fbs-pck__flex-item {
  flex-basis: 20%;
}

.fbs-pck__flex--6-per-row .fbs-pck__flex-item {
  flex-basis: 16.6666%;
}

.fbs-pck__flex--7-per-row .fbs-pck__flex-item {
  flex-basis: 14.3%;
}

.fbs-pck__flex--8-per-row .fbs-pck__flex-item {
  flex-basis: 12.5%;
}

.fbs-pck__flex-row-reverse {
  flex-direction: row-reverse;
}

.fbs-pck__grid-row-reverse {
  direction: rtl;
}

.fbs-pck__grid-row-reverse * {
  direction: ltr;
}

.fbs-pck__justify-left {
  justify-content: flex-start;
  text-align: left;
}

.fbs-pck__justify-center {
  justify-content: center;
  text-align: center;
}

.fbs-pck__justify-right {
  justify-content: flex-end;
  text-align: right;
}

.fbs-pck__justify-justify {
  justify-content: space-between;
  text-align: justify;
}

.fbs-pck__align-top {
  align-items: flex-start;
}

.fbs-pck__align-center {
  align-items: center;
}

.fbs-pck__align-bottom {
  align-items: flex-end;
}

/** Text alignment **/

.fbs-pck__text-alignment-left {
  text-align: left;
}

.fbs-pck__text-alignment-center {
  text-align: center;
}

.fbs-pck__text-alignment-right {
  text-align: right;
}

.fbs-pck__text-alignment-justify {
  text-align: justify;
}

/*** Grid ***/
.fbs-pck__grid {
  display: grid;
}

.fbs-pck__grid--1-per-row {
  grid-template-columns: 1fr;
}

.fbs-pck__grid--2-per-row {
  grid-template-columns: 1fr 1fr;
}

.fbs-pck__grid--3-per-row {
  grid-template-columns: 1fr 1fr 1fr;
}

.fbs-pck__grid--4-per-row {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.fbs-pck__grid--5-per-row {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.fbs-pck__grid--6-per-row {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.fbs-pck__grid--7-per-row {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.fbs-pck__grid--8-per-row {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.fbs-pck__grid-reverse {
  direction: rtl;
}

.fbs-pck__grid-reverse * {
  direction: ltr;
}

/*** Helpers ***/
.fbs-pck__unset {
  font-family: unset;
  font-size: unset;
  letter-spacing: unset;
  line-height: unset;
  margin: unset;
  padding: unset;
  list-style: none;
}

.fbs-pck__force-full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.fbs-pck__visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.fbs-pck__recaptcha-message {
  margin-top: 0.8em;
  font-size: 0.8em;
}

.fbs-pck__recaptcha-message a,
.fbs-pck__recaptcha-message a:hover,
.fbs-pck__recaptcha-message a:focus {
  font-style: italic;
  color: inherit;
  font-size: inherit;
}

/** Pages **/
.fbs-pck__page-intro {
  width: 100%;
}

/** Theme editor warnings **/

.fbs-pck__no-app-warning {
  position: relative;
  overflow: hidden;
  padding: 1em;
}

.fbs-pck__no-app-warning-text {
  position: relative;
  background: #ff0;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px;
  max-width: 50%;
  margin: 0 auto;
}

.fbs-pck__no-app-warning-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 130%;
  background: repeating-linear-gradient(-45deg, #ff0, #ff0 20px, #000 20px, #000 40px);
  animation: fbs-pck__warning-background 1s linear infinite;
}

@keyframes fbs-pck__warning-background {
  to {
    transform: translateX(-56px);
  }
}

/** Animations **/

[style*="--fbs-pck-animate"] {
  will-change: transform;
  transform: translateZ(0);
  opacity: 0;
}

.fbs-pck__animation-applied {
  overflow: hidden;
}

.fbs-pck__animation-applied [style*="--fbs-pck-animate"] {
  --fbs-pck-animation-multiplier: 0.3s;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: calc(var(--fbs-pck-animation-multiplier) * var(--fbs-pck-animate));
}

@keyframes fbs-pck__animation--fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fbs-pck__animation--fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(10%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fbs-pck__animation--fade-in-right {
  0% {
    opacity: 0;
    transform: translateX(-10%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fbs-pck__animation--fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fbs-pck__animation--fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/** Parallax **/
.fbs-pck__parallax {
  position: relative;
  z-index: 1;
}

.fbs-pck__parallax > .fbs-pck__parallax-img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/** Responsive helpers **/

.fbs-pck__desktop--visible {
  display: inherit;
}

.fbs-pck__desktop--hidden {
  display: none !important;
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
  .fbs-pck__tablet--visible {
    display: block !important;
  }

  .fbs-pck__tablet--hidden {
    display: none !important;
  }
}

/* Landscape phones and down */
@media (max-width: 480px) {
  .fbs-pck__mobile--visible {
    display: block !important;
  }

  .fbs-pck__mobile--hidden {
    display: none !important;
  }
}

/** Theme specific **/

/* Dawn */
[class*="fbs-pck"]:empty {
  display: inherit;
}

/* Debut - offset margin from the header */
/* .main-content[id="MainContent"] .shopify-section[class*="DP__"]:first-child,
.main-content[id="MainContent"] [id*="DP__"] {
  margin-top: -35px;
}

@media only screen and (min-width: 750px) {
  .main-content[id="MainContent"] .shopify-section[class*="DP__"]:first-child,
  .main-content[id="MainContent"] .DP__widths.DP__width--half:first-child,
  .main-content[id="MainContent"] .DP__widths.DP__width--half:first-child + .DP__widths.DP__width--half,
  .main-content[id="MainContent"] [id*="DP__"] {
    margin-top: -55px;
  }
} */

/* Brooklyn - prevent default margins (but leave them on theme sections) */
.index-sections [class*="DP__"] {
  margin-top: 0;
}

.index-sections [class*="DP__"].shopify-section:first-child:not(.shopify-section--full-width) {
  margin-top: 0;
}

/* Impulse - prevent default margins (but leave them on theme sections) */
.main-content [class*="DP__"] {
  margin-top: 0;
  margin-bottom: 0;
}

/* Cornerstone - override overflow: hidden */
[class*="DP__"].shopify-section {
  overflow: unset;
}

  
</style>

{%- comment -%} Assign: Preview section js fix {%- endcomment -%}
{%- assign section_id = section.id | replace: '+', '' -%}

{% comment %} Blocks: check specific block types {% endcomment %}
{% assign videos = section.blocks | where: 'type', 'video' %}

{%- comment -%} Images: all placeholders {%- endcomment -%}
{%- assign background_placeholder_video_id = '4fea0ee64133481da872def53b4eddea' -%} 


{%- comment -%} Images: check image crop aspect ratio {%- endcomment -%}
{%- if section.settings.image_crop == 'none' -%}
  {%- assign image_crop_width = section.settings.aspect_ratio | split: ':' | first | times: 1000 -%}
  {%- assign image_crop_height = section.settings.aspect_ratio | split: ':' | last | times: 1000 -%}
{%- else -%}
  {%- assign image_crop_width = section.settings.image_crop | split: ':' | first | times: 1000 -%}
  {%- assign image_crop_height = section.settings.image_crop | split: ':' | last | times: 1000 -%}
{%- endif -%}

{% comment %} Images: responsive image widths {% endcomment %}
{%- assign widths = '180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1950, 2100, 2260, 2450, 2700, 3000, 3350, 3750, 4100' -%}

{%- comment -%} Layout: has user entered measurement value into max-width field? {%- endcomment -%}
{%- if section.settings.max_width contains 'px' or section.settings.max_width contains '%' -%}
  {%- assign max_width = section.settings.max_width -%}
{%- else -%}
  {%- assign max_width = section.settings.max_width | append: 'px' -%}
{%- endif -%}

{%- comment -%} Text: custom font_picker values {%- endcomment -%}
{%- capture font_settings_list -%}
{{ section.settings.main_font | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}
{%- endcapture -%}
{%- assign font_array = font_settings_list | split: '~' -%}

{%- capture minify -%}
{%- comment -%} CSS {%- endcomment -%}
<style>
/*! Flickity v2.2.2
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0;box-shadow: none;}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}

{%- if section.settings.override_theme_font != blank -%}
  {%- for font in font_array -%}
    {%- unless font contains 'error' -%}var(--custom-font-check){{- font -}}{%- endunless -%}
  {%- endfor -%}
  #DP--{{ section_id }} {
    --main-font: {{ section.settings.main_font.family }}, {{ section.settings.main_font.fallback_families }};
    --main-font-weight: {{ section.settings.main_font.weight }};
    --main-font-style: {{ section.settings.main_font.style }};
    --heading-font: {{ section.settings.heading_font.family }}, {{ section.settings.heading_font.fallback_families }};
    --heading-font-weight: {{ section.settings.heading_font.weight }};
    --heading-font-style: {{ section.settings.heading_font.style }};
  }
{%- endif -%}

#DP--{{ section_id }} {
  --cell-align: "center";
  {% if section.blocks.size > 4 %}
  --wrap-around: true;
  --draggable: ">1";
  {% else %}
    --wrap-around: false;
    --draggable: false;
  {% endif %}
  --arrow-color: {{ section.settings.text_color }};
  background: {{ section.settings.background_color }};
  margin-top: {{ section.settings.outer_margin }}px;
  margin-bottom: {{ section.settings.outer_margin }}px;
  overflow-x: hidden;
}

#DP--{{ section_id }} .fbs-pck__sizer {
  padding-top: {{ section.settings.inner_padding }}px;
  padding-bottom: {{ section.settings.inner_padding }}px;
  width: {{ section.settings.base_width }}%;
  max-width: {{ max_width }};
}

#DP--{{ section_id }} .fbs-pck__flex--main {
  position: relative;
  align-items: center;
  grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
  grid-auto-rows: 50%;
  grid-auto-columns: minmax(0, auto);
}

#DP--{{ section_id }} .fbs-pck__content {
  flex: 1 0 40%;
  padding: 20px;
}

#DP--{{ section_id }} .fbs-pck__inner-content {
  width: min(400px, 80%);
  margin: auto;
}

#DP--{{ section_id }} .fbs-pck__small-heading {
  margin: 0;
  text-align: left;
  color: {{ section.settings.text_color }};
  {%- if section.settings.override_theme_font != blank -%}
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  {%- endif -%}
  font-size: calc(var(--dp-g-heading-size, var(--dp-heading-size, 18px)) * 0.9);
  line-height: var(--dp-g-small-heading-line-height, var(--dp-small-heading-line-height, calc(3px + 2ex + 3px)));
}

{% comment %} Block styling {% endcomment %}
#DP--{{ section_id }} .fbs-pck__block .fbs-pck__small-heading {
  font-size: calc(var(--dp-g-small-heading-size, var(--dp-small-heading-size, 24px)) * {{ section.settings.text_size | times: 0.01 }});
  {%- if section.settings.override_theme_font != blank -%}
    font-family: var(--heading-font);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
  {%- endif -%}
}

#DP--{{ section_id }} .fbs-pck__rte p,
#DP--{{ section_id }} .fbs-pck__rte ul {
  line-height: var(--dp-g-body-line-height, var(--dp-body-line-height, calc(3px + 2.5ex + 3px)));
  color: {{ section.settings.text_color }};
  font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
  {%- if section.settings.override_theme_font != blank -%}
  font-family: var(--main-font);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-style);
  {%- endif -%}
}

#DP--{{ section_id }} .fbs-pck__block {
  color: {{ section.settings.text_color }};
}

#DP--{{ section_id }} .fbs-pck__block + .fbs-pck__block {
  margin-top: 15px;
}
{% comment %} End block styling {% endcomment %}

/* Slider */
#DP--{{ section_id }} .fbs-pck__videos {
  flex: 1 0 60%;
}

#DP--{{ section_id }} .fbs-pck__video-slider {
  margin: auto;
  overflow: visible;
}

#DP--{{ section_id }} .fbs-pck__item {
  --slide-width: {{ section.settings.slide_width }}px;
  --final-slide-width: calc(var(--slide-width) - {{ section.settings.gap }}px);
  --slide-height: calc(var(--final-slide-width) * calc({{ image_crop_height }}/{{image_crop_width }}) - 30px);
  --selected-slide-height: calc(var(--final-slide-width) * calc({{ image_crop_height }}/{{image_crop_width }}));
  height: auto;
  width: var(--final-slide-width);
  margin: 0 {{ section.settings.gap | divided_by: 2.0 }}px;
  display: inline-block;
}

#DP--{{ section_id }} .fbs-pck__item > a {
  text-decoration: none;
}

#DP--{{ section_id }} .fbs-pck__stretch-height .fbs-pck__item {
  height: 100%;
}

#DP--{{ section_id }} .is-selected .fbs-pck__video-wrapper {
  padding-top: 0;
}

#DP--{{ section_id }} .fbs-pck__video-inner {
    width: 100%;
}

#DP--{{ section_id }} .is-selected .fbs-pck__hosted-video {
  width: 100%;
  min-height: var(--selected-slide-height);
  display: block;
  object-fit: cover;
}

#DP--{{ section_id }} .fbs-pck__video {
  height: 100%;
  display: flex;
  text-align: center;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}

#DP--{{ section_id }} .fbs-pck__video-wrapper {
  width: 100%;
  padding-top: calc(var(--selected-slide-height) - var(--slide-height));
  transition: all 0.5s ease;
  position: relative;
}

#DP--{{ section_id }} .fbs-pck__hosted-video {
  width: 100%;
  min-height: var(--slide-height);
  display: block;
  object-fit: cover;
  border-radius: {{ section.settings.border_radius }}px;
  transition: all 0.5s ease;
}

#DP--{{ section_id }} .fbs-pck__video-content {
  width: 100%;
  margin: 10px auto;
  display: flex;
  justify-content: center;
  gap: 15px;
  border-radius: {{ section.settings.border_radius }}px;
  border: thin solid {{ section.settings.border_color }};
  height: 100%;
  padding: 10px;
  position: relative;
  transition: all 0.2s linear;
}

#DP--{{ section_id }} .fbs-pck__video-content:hover {
  border-width: 2px;
}

#DP--{{ section_id }} .fbs-pck__sound-button {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 35px;
  height: 35px;
  margin: 10px;
  padding: 5px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M18 23l-9.305-5.998.835-.651 7.47 4.815v-10.65l1-.781v13.265zm0-15.794l5.384-4.206.616.788-23.384 18.264-.616-.788 5.46-4.264h-2.46v-10h5.691l9.309-6v6.206zm-11.26 8.794l1.26-.984v-7.016h-4v8h2.74zm10.26-8.013v-5.153l-8 5.157v6.244l8-6.248z'/%3E%3C/svg%3E");
  background-size: 65%;
  background-position: center center;
  background-repeat: no-repeat;
}

#DP--{{ section_id }} .fbs-pck__sound-button--on {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M15 23l-9.309-6h-5.691v-10h5.691l9.309-6v22zm-9-15.009v8.018l8 5.157v-18.332l-8 5.157zm14.228-4.219c2.327 1.989 3.772 4.942 3.772 8.229 0 3.288-1.445 6.241-3.77 8.229l-.708-.708c2.136-1.791 3.478-4.501 3.478-7.522s-1.342-5.731-3.478-7.522l.706-.706zm-2.929 2.929c1.521 1.257 2.476 3.167 2.476 5.299 0 2.132-.955 4.042-2.476 5.299l-.706-.706c1.331-1.063 2.182-2.729 2.182-4.591 0-1.863-.851-3.529-2.184-4.593l.708-.708zm-12.299 1.299h-4v8h4v-8z'/%3E%3C/svg%3E");
}

#DP--{{ section_id }} .fbs-pck__text-area {
  flex: 1;
  text-align: {{ section.settings.text_alignment }};
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: {{ section.settings.text_alignment }};
}

#DP--{{ section_id }} .fbs-pck__videos-nav {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

#DP--{{ section_id }} .fbs-pck__nav-button {
  cursor: pointer;
}

#DP--{{ section_id }} .fbs-pck__rte p,
#DP--{{ section_id }} .fbs-pck__rte ul {
  color: {{ section.settings.text_color }};
}

#DP--{{ section_id }} .fbs-pck__small-heading {
  color: {{ section.settings.text_color }};
}

#DP--{{ section_id }} .fbs-pck__image {
  width: 25%;
  overflow: hidden;
  border-radius: {{ section.settings.border_radius }}px;
}

#DP--{{ section_id }} .fbs-pck__videos-wrapper:after {
  content: 'flickity';
  display: none;
}

#DP--{{ section_id }} .fbs-pck__videos-wrapper:not(.flickity-enabled) {
  display: flex;
  gap: 10px;
}

#DP--{{ section_id }} .fbs-pck__videos-wrapper:not(.flickity-enabled) .fbs-pck__item:nth-child(n+{{ section.settings.per_row | plus: 1 }}){
  display: none;
}

#DP--{{ section_id }} .flickity-slider {
  top: 0;
}

#DP--{{ section_id }} .flickity-enabled {
  position: relative;
}

{%- if section.settings.custom_css != blank -%}
  {%- assign custom_section_declarations = section.settings.custom_css | split: '}' -%}
  {%- for declaration in custom_section_declarations -%}
    {%- if declaration contains '{' -%}
      #DP--{{ section_id }} {{ declaration }} }
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}

/* Landscape phones and down */
@media (max-width: 480px) {
  #DP--{{ section_id }} {
    margin-top: {{ section.settings.outer_margin | divided_by: 2 }}px;
    margin-bottom: {{ section.settings.outer_margin | divided_by: 2 }}px;
    --draggable: ">1";
    --wrap-around: true;
  }

  #DP--{{ section_id }} .fbs-pck__sizer {
    margin: 0 auto;
    padding-top: {{ section.settings.inner_padding | divided_by: 2 }}px;
    padding-bottom: {{ section.settings.inner_padding | divided_by: 2 }}px;
  }

  #DP--{{ section_id }} .fbs-pck__item {
    --slide-width: 300px;
  }

  {%- if section.settings.mobile_custom_css != blank -%}
    {%- assign mobile_custom_declarations = section.settings.mobile_custom_css | split: '}' -%}
    {%- for declaration in mobile_custom_declarations -%}
      {%- if declaration contains '{' -%}
        #DP--{{ section_id }} {{ declaration }} }
      {%- endif -%}
    {%- endfor -%}
  {%- endif -%}

}
</style>

{%- liquid
  if videos.size == 0
    break
  endif
-%}

{%- comment -%} HTML {%- endcomment -%}
<section id="DP--{{ section_id }}" class="DP--{{ section_id }} fbs-pck__videos-slider fbs-pck__section">
  {%- if section.settings.anchor_id != blank -%}
    <div id="{{ section.settings.anchor_id | remove: '#' | handleize }}" class="fbs-pck__anchor-id" style="height: 0; overflow: hidden;"></div>
  {%- endif -%}
  <div class="fbs-pck__sizer">
    <div class="fbs-pck__flex fbs-pck__flex--main">
      <div class="fbs-pck__videos">
        <div id="slider-{{ section_id }}" class="fbs-pck__videos-wrapper fbs-pck__video-slider">
          {%- for block in videos -%}
            <div class="fbs-pck__item fbs-pck__item fbs-pck__video-{{ forloop.index }} fbs-pck__block-{{ block.id }}" {{ block.shopify_attributes }}>
              <div class="fbs-pck__video">
                <div class="fbs-pck__video-inner">
                  {%- if block.settings.html5_video != blank -%}
                    <div class="fbs-pck__video-wrapper">
                      {%- assign video = block.settings.html5_video -%}
                      <video class="fbs-pck__hosted-video" width="{{ video.aspect_ratio | times: 100 }}" height="100" playsinline loop muted loading="lazy" poster="{{ video.preview_image | image_url: width: 2800 }}">
                        {%- for source in video.sources -%}
                          {%- if source.format == 'mp4' or source.format == 'mov' -%}<source src="{{ source.url }}">{%- endif -%}
                        {%- endfor -%}
                      </video>
                      <div class="fbs-pck__sound-button"></div>
                    </div>
                  {%- else -%}
                  {% comment %} Placeholder {% endcomment %}
                  <div class="fbs-pck__video-wrapper">
                    <video
                      class="fbs-pck__hosted-video"
                      width="2000" height="100"
                      playsinline loop muted loading="lazy">
                        <source src="https://cdn.shopify.com/videos/c/o/v/{{ background_placeholder_video_id }}.mp4" data-fbs-pck-default-src>
                    </video>
                    <div class="fbs-pck__sound-button"></div>
                  </div>
                  {%- endif -%}
                  {%- unless block.settings.product == blank and block.settings.collection == blank -%}
                    {%- assign collection = collections[block.settings.collection] -%}
                    <div class="fbs-pck__video-content">
                      <a href="{{ block.settings.product.url | default: collection.url }}" class="fbs-pck__absolute-link"></a>
                      {%- if block.settings.product.featured_image != blank or block.settings.collection.featured_image != blank -%}
                        {%- assign image = block.settings.product.featured_image | default: collection.featured_image -%}
                        {%- comment -%} Crop based on initial image width and height{%- endcomment -%}
                        {%- if section.settings.image_crop == 'none' -%}
                          {%- assign image_crop_width = image.width -%}
                          {%- assign image_crop_height = image.height -%}
                        {%- endif -%}
                        {%- if image != blank -%}
                          <div class="fbs-pck__image fbs-pck__image--{{ section.settings.image_crop }}">
                            <div class="fbs-pck__image__wrapper">
                              <svg class="fbs-pck__svg-sizer" viewBox="0 0 {{ image_crop_width | default: 1000 }} {{ image_crop_height | default: 1000 }}"></svg>
                              {%- capture sizes -%}
                                (max-width: 480px) {{ section.settings.base_width | append: 'vw' | default: '90vw' }}, {{ section.settings.base_width | divided_by: section.settings.per_row | divided_by: 2 | append: 'vw' | default: '33vw' }}
                              {%- endcapture -%}
                              {{ image | image_url: width: 1000 | image_tag:  widths: widths, sizes: sizes }}
                            </div>
                          </div>
                        {%- endif -%}
                      {%- endif -%}
                      <div class="fbs-pck__text-area">
                        <div class="fbs-pck__text fbs-pck__rte">
                          <p>{{ block.settings.product.title | default: collection.title }}</p>
                        </div>
                      </div>
                    </div>
                  {%- endunless -%}
                </div>
              </div>
            </div>
          {%- endfor -%}
        </div>
        {%- if section.settings.show_arrows != blank -%}
          <div class="fbs-pck__videos-nav">
            <div class="fbs-pck__nav-button fbs-pck__nav-button--prev">
              <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm0 1c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11zm3 5.753l-6.44 5.247 6.44 5.263-.678.737-7.322-6 7.335-6 .665.753z" fill="{{ section.settings.border_color }}"/></svg>
            </div>
            <div class="fbs-pck__nav-button fbs-pck__nav-button--next">
              <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm0 1c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11zm-3 5.753l6.44 5.247-6.44 5.263.678.737 7.322-6-7.335-6-.665.753z" fill="{{ section.settings.border_color }}"/></svg>
            </div>
          </div>
        {%- endif -%}
      </div>
    </div>
  </div>
</section>
{%- endcapture -%}
{{ minify | strip_newlines }}

{% schema %}
{
  "name": "Video carousel",
  "class": "DP__video-carousel",
  "settings": [
    {
      "type": "paragraph",
      "content": "Add a minumum of 5 videos for best results"
    },
    {
      "type": "range",
      "id": "slide_width",
      "label": "Slide width",
      "min": 300,
      "max": 500,
      "step": 5,
      "default": 300,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "image_crop",
      "label": "Video aspect ratio",
      "default": "none",
      "options": [
        {
          "value": "16:9",
          "label": "Cinema (16:9)"
        },
        {
          "value": "4:3",
          "label": "Landscape (4:3)"
        },
        {
          "value": "2:3",
          "label": "Portrait (2:3)"
        },
        {
          "value": "1:1",
          "label": "Square (1:1)"
        },
        {
          "value": "none",
          "label": "Custom aspect ratio (see below)"
        }
      ]
    },
    {
      "type": "text",
      "id": "aspect_ratio",
      "label": "Aspect ratio",
      "default": "9:16",
      "info": "Will only be applied if 'Custom aspect ratio' is selected as banner height. eg. '9:16' or '3:2'"
    },
    {
      "type": "range",
      "id": "autoplay",
      "label": "Change slide every",
      "min": 0,
      "max": 12,
      "step": 1,
      "default": 8,
      "unit": "sec",
      "info": "Set to '0' to disable autoplay"
    },
    {
      "type": "range",
      "id": "gap",
      "min": 0,
      "max": 40,
      "label": "Spacing gap",
      "unit": "px",
      "default": 10
    },
    {
      "type": "checkbox",
      "id": "show_arrows",
      "label": "Show arrows",
      "default": false
    },
    {
      "type": "header",
      "content": "Text appearance"
    },
    {
      "type": "range",
      "id": "text_size",
      "label": "Text size",
      "min": 60,
      "max": 120,
      "step": 5,
      "default": 100,
      "unit": "%"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text alignment",
      "default": "left",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "header",
      "content": "webs"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#121212"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border",
      "default": "#121212"
    },
    {
      "type": "color_background",
      "id": "background_color",
      "label": "Background"
    },
    {
      "type": "range",
      "id": "border_radius",
      "label": "Rounded corners",
      "min": 0,
      "max": 30,
      "step": 1,
      "default": 10,
      "unit": "px"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "base_width",
      "label": "Size",
      "min": 80,
      "max": 100,
      "step": 5,
      "default": 100,
      "unit": "%"
    },
    {
      "type": "text",
      "id": "max_width",
      "label": "Maximum width",
      "placeholder": "eg. 1200px",
      "info": "Sets width constraint for content."
    },
    {
      "type": "range",
      "id": "inner_padding",
      "label": "Inner padding",
      "info": "Only applies to top and bottom.",
      "min": 0,
      "max": 100,
      "default": 40,
      "step": 5,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "outer_margin",
      "label": "Outer margin",
      "info": "Only applies to top and bottom.",
      "min": 0,
      "max": 100,
      "default": 0,
      "step": 5,
      "unit": "px"
    },
    {
      "type": "header",
      "content": "Advanced"
    },
    {
      "type": "liquid",
      "id": "custom_css",
      "label": "CSS"
    },
    {
      "type": "liquid",
      "id": "mobile_custom_css",
      "label": "Mobile CSS",
      "info": "Applied on screens less than 480px."
    },
    {
      "type": "text",
      "id": "anchor_id",
      "label": "Link anchor id",
      "placeholder": "#webs-pack-section",
      "info": "Enter a unique value to jump to this section from same page using a link or button. Eg. #webs-pack-section"
    },
    {
      "type": "checkbox",
      "id": "override_theme_font",
      "label": "Override default theme font",
      "default": false
    },
    {
      "type": "font_picker",
      "id": "heading_font",
      "label": "Heading",
      "default": "serif"
    },
    {
      "type": "font_picker",
      "id": "main_font",
      "label": "Text",
      "default": "sans-serif"
    }
  ],
  "blocks": [
    {
      "type": "video",
      "name": "Video",
      "settings": [
        {
          "type": "video",
          "id": "html5_video",
          "label": "Hosted video"
        },
        {
          "type": "product",
          "id": "product",
          "label": "Product"
        },
        {
          "type": "collection",
          "id": "collection",
          "label": "Collection"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Video carousel",
      "blocks": [
        {
          "type": "video"
        },
        {
          "type": "video"
        },
        {
          "type": "video"
        },
        {
          "type": "video"
        },
        {
          "type": "video"
        }
      ]
    }
  ]
}
{% endschema %}
{%- comment -%} JSON Settings {%- endcomment -%}
<script type="application/json" data-fbs-pck="{{ section_id }}">
  {
    "id": {{ section_id | json }},
    "autoplay": {{ section.settings.autoplay | times: 1000 | json }}
  }
</script>

{%- comment -%} External scripts {%- endcomment -%}
<script data-fbs-pck-external-js="{{ section_id }}" src="https://cdn.shopify.com/s/files/1/0877/3884/3451/files/flickity-2.3.0.pkgd.min.js?v=1735273781.js?v=1671485005" defer></script>
{%- comment -%} JavaScript {%- endcomment -%}
<script data-fbs-pck-js="{{ section_id }}" type="module" defer>
(function(){

  const websPack = {
    settings: {},
    load: function(section){
      const elem = section.querySelector(`#slider-${websPack.settings.id}`);

      websPack.flkty = new Flickity( elem, {
        cellAlign: JSON.parse(getComputedStyle(section).getPropertyValue('--cell-align')),
        autoPlay: this.settings.autoplay,
        draggable: JSON.parse(getComputedStyle(section).getPropertyValue('--draggable')),
        contain: true,
        wrapAround: JSON.parse(getComputedStyle(section).getPropertyValue('--wrap-around')),
        adaptiveHeight: false,
        watchCSS: false,
        imagesLoaded: true,
        prevNextButtons: false,
        pageDots: false,
        on: {
          staticClick: function( event, pointer, cellElement, cellIndex ) {
            if ( typeof cellIndex == 'number' ) {
              this.selectCell( cellIndex );
              const videos = section.querySelectorAll('video');
              if (videos.length) {
                videos.forEach(video => video.pause());
                videos[cellIndex].play();
                const activeCheck = videos[cellIndex].parentNode.querySelector('.fbs-pck__sound-button').classList.contains('fbs-pck__sound-button--on');
                if (activeCheck) {
                  videos[cellIndex].muted = false;
                }
              }
            }

          },
          change: function() {
            const cellIndex = this.selectedIndex;

            const videos = section.querySelectorAll('video');
            if (videos.length) {
              videos.forEach(video => video.pause());
              videos[cellIndex].play();
              const activeCheck = videos[cellIndex].parentNode.querySelector('.fbs-pck__sound-button').classList.contains('fbs-pck__sound-button--on');
              if (activeCheck) {
                videos[cellIndex].muted = false;
              }
            }
          },
          ready: () => {
            setTimeout(() => {
              elem.classList.add('fbs-pck__stretch-height');
              const videos = section.querySelectorAll('video');
              if (videos.length) {
                videos[0].play();
              }
            }, 500);
          }
        }
      });

      var previousButton = section.querySelector('.fbs-pck__nav-button--prev');
      if (typeof previousButton != 'undefined' && previousButton != null) {
        previousButton.addEventListener( 'click', function() {
          websPack.flkty.previous();
        });
      }

      var nextButton = section.querySelector('.fbs-pck__nav-button--next');
      if (typeof nextButton != 'undefined' && nextButton != null) {
        nextButton.addEventListener( 'click', function() {
          websPack.flkty.next();
        });
      }

      var soundButtons = section.querySelectorAll('.fbs-pck__sound-button');
      if (typeof soundButtons != 'undefined' && soundButtons != null) {
        soundButtons.forEach((button, index) => {
          button.addEventListener('click', function() {
            const videos = section.querySelectorAll('video');
            if (videos.length) {
              videos.forEach(video => video.muted = true);
              const selectedVideo = videos[websPack.flkty.selectedIndex];

              if (button.classList.contains('fbs-pck__sound-button--on')) {
                // Unmute video
                selectedVideo.muted = true;
              } else {
                // Mute video
                selectedVideo.muted = false;
              }

              soundButtons.forEach(button => button.classList.toggle('fbs-pck__sound-button--on'));
            }
            return false;
          });
        });
      }

    },
    unload: function(section){
    }
  }

  window.addEventListener('shopify:section:unload', function (e) {
    const settings = document.querySelector(`[data-fbs-pck="${e.detail.sectionId}"]`);
    const sectionId = e.detail.sectionId;
    const section = document.querySelector(`#DP--${e.detail.sectionId}`);
    if (sectionId == websPack.settings.id){
      websPack.unload(section);
    }
  });

  websPack.settings = JSON.parse(document.querySelector('[data-fbs-pck="{{ section_id }}"]').innerHTML);
  const sectionId = {{ section_id | json }};
  const section = document.querySelector(`#DP--${sectionId}`);

  if (sectionId == websPack.settings.id){
    websPack.load(section);
  }
})()
</script>