@import "./splide.css";

/* Button */
.btn.btn--primary.btn--solid,
.btn.il-button-primary {
  --btn-bg-hover: var(--il-color-button-primary-bg-hover);
  font: var(--il-font-subheading-base);
  letter-spacing: var(--il-typography-letter-spacing-05);
  background-color: var(--il-color-button-primary-bg-default);
  color: var(--il-color-button-primary-text);
  height: var(--il-responsive-button-height);
  padding-inline: var(--il-responsive-padding-dynamic-small);
  padding-block: 0;
  border-radius: var(--il-size-radius-100);
  border: 0;
  span {
    height: 100%;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    transition: var(--il-animation-default);
    justify-self: center;
    justify-content: center;
    align-content: center;
  }
  &:before,
  &:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
  }
  &:before {
    content: attr(data-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--il-animation-default);
    background: var(--il-color-button-primary-bg-hover);
  }
}

.btn--primary.btn--outline,
.shopify-payment-button .btn--outline.shopify-payment-button__button,
.btn--outline.shopify-payment-button__button--unbranded {
  --btn-bg-hover: var(--il-color-button-primary-bg-hover);
  font: var(--il-font-subheading-base);
  letter-spacing: var(--il-typography-letter-spacing-05);
  background-color: var(--il-color-button-primary-bg-default);
  color: var(--il-color-button-primary-text);
  height: var(--il-responsive-button-height);
  padding-inline: var(--il-responsive-padding-dynamic-small);
  padding-block: 0;
  border-radius: var(--il-size-radius-100);
  border: 0;
  span {
    height: 100%;
    display: flex !important;
    align-items: center;
    transition: var(--il-animation-default);
  }
  &:before,
  &:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
  }
  &:before {
    content: attr(data-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--il-animation-default);
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 750px) {
  .btn.btn--primary.btn--solid,
  .btn.btn--primary.btn--solid,
  .btn.il-button-primary,
  .btn--primary.btn--outline,
  .shopify-payment-button .btn--outline.shopify-payment-button__button,
  .btn--outline.shopify-payment-button__button--unbranded {
    &:hover span {
      transform: translateY(-100%);
      &.span-fixed {
        transform: translateY(0);
      }
    }
    &:hover:after,
    &:hover:before {
      transform: translateY(0%);
    }
  }
}

 
/* Layout */
.il-grid {
  display: grid;
  gap: var(--il-responsive-page-gutter);
  grid-template-columns: var(--il-grid);
  grid-template-rows: 1fr;
}

.il-flex-col {
  display: flex;
  flex-direction: column;
  & > * {
    margin: 0;
  }
}

.il-flex-row {
  display: flex;
  flex-direction: row;
  & > * {
    margin: 0;
  }
}

.il-align-center {
  align-items: center;
}

.il-gap-100 {
  gap: var(--il-size-space-100);
}

.il-gap-200 {
  gap: var(--il-size-space-200);
}

.il-gap-300 {
  gap: var(--il-size-space-300);
}

.il-gap-400 {
  gap: var(--il-size-space-400);
}
.il-gap-600 {
  gap: var(--il-size-space-600);
}
.il-gap-800 {
  gap: var(--il-size-space-800);
}
.self-start {
  align-self: start;
}
.flex-1 {
  flex: 1;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}

/* Accordion */
.il-accordion {
  position: relative;
}
.il-accordion input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.il-accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: var(--il-animation-default);
}
.il-accordion__grid {
  display: grid;
  grid-template-rows: 0fr;
  transition: var(--il-animation-default);
  transition: grid-template-rows 0.5s ease;
}
.il-accordion__grid_inner {
  overflow: hidden;
}
.il-accordion input:checked ~ .il-accordion__content {
  max-height: 12rem;
}
.il-accordion input:checked ~ .il-accordion__grid {
  grid-template-rows: 1fr;
}
.il-accordion__read-less {
  display: none;
}
.il-accordion input:checked ~ label .il-accordion__read-more {
  display: none;
}
.il-accordion input:checked ~ label .il-accordion__read-less {
  display: inline;
}

/* Visual styles */
.il-accordion__label {
  display: flex;
  cursor: pointer;
  justify-content: space-between;
  padding-block: 1rem;
  border-bottom: 1px solid var(--il-color-border);
}
.il-accordion__label .il-icon-minus {
  display: none;
}
.il-accordion input:checked ~ .il-accordion__label {
  .il-icon-minus {
    display: block;
  }
  .il-icon-plus {
    display: none;
  }
}

body .il-header-sections .header__wrapper::after {
  content: "";
  width: 100%;
  height: var(--il-header-height);
  position: absolute;
  top: 0;
  z-index: -5;
  transition: var(--il-animation-default);
  background: var(--il-color-white-1000);
}

body.template-collection,
body.template-search {
  .il-header-sections .header__wrapper::after {
    background: none;
  }
}

body.template-collection,
body.template-search {
  .il-header-sections .js__header__stuck .header__wrapper::after {
    background: var(--il-color-white-1000);
  }
}

.il-header-sections .drawer__inner {
  top: var(--il-announcement-bar-height);
  background-color: transparent;
  height: calc(100% - var(--il-announcement-bar-height)); 
}

.il-header-sections .js__header__stuck .drawer__inner {
  top: 0;
  height: 100%; 
}

.header__wrapper:has(.theme__header.header--hidden)::before,
.header__wrapper:has(.theme__header.header--hidden)::after {
  transform: translateY(-100%);
}

@media (min-width: 1200px) {
  .il-header-sections:has(.drawer--header.is-open) .drawer__inner {
    display: none
  }
}

@media (max-width: 1199px) {
  nav .drawer__inner {
    --DRAWER-WIDTH: 100%;
  }
  .il-header-sections {
    height: 100dvh;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 2002;
  }

  .il-header-sections > * {
    pointer-events: visible;
    &:has(.header--hidden) {
      pointer-events: none;
    }
  }

  .il-header-sections:has(.drawer--header) .drawer--header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--il-color-cream-500);
    z-index: -1;
    opacity: 1;
    transition: var(--il-animation-default);
  }

  .il-header-sections:has(.drawer--header) .drawer__body {
    padding-inline: var(--outer);
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
  }

  .il-header-sections:has(.drawer--header.is-open),
  [data-scroll-locked] .il-header-sections:has(.drawer--header.is-open) {
    height: 100svh;
    .page-header {
      flex: 1;
      height: calc(100% - var(--il-announcement-bar-height));
      &.js__header__stuck {
        height: 100%;
      }
    }
    .header__wrapper {
      display: flex;
      flex-direction: column;
      height: 100dvh;
    }
    .theme__header {
      position: relative;
      z-index: 2401;
      &.header--hidden {
        transform: translate(0) !important;
      }
    }
    .drawer--header {
      flex: 1;
      margin-top: calc(var(--il-header-height) * -1);
      height: 100%;
      pointer-events: none;
      &::after {
        height: 100%;
      }
    }
  }

  .il-header-sections:has(.drawer--header.is-open),
  [data-scroll-locked] .il-header-sections:has(.drawer--header.is-open) {
    .drawer__head {
      padding: 0 var(--il-responsive-page-margin);
    }
    .drawer__bottom.mobile {
      display: block;
    }
  }
  
  

  .js__header__stuck {
    .il-header-sections:has(.drawer--header.is-open),
    [data-scroll-locked] .il-header-sections {
      .header__wrapper {
        height: calc(100svh - var(--il-announcement-bar-height));
      }
    }
  }
  
  [data-scroll-locked]:has(.collection__sidebar__slide-out.expanded) {
    .theme__header.header--hidden {
      transform: translateY(-100%) !important;
    }
  }

  [data-scroll-locked] .il-header-sections .header__wrapper:has(.drawer--header.is-open)::before,
  .header__wrapper:has(.drawer--header.is-open)::before {
    height: 100dvh;
    height: 100%;
  }

  .has-header-transparent .page-header:not(.js__header__stuck) .header__wrapper::after {
    display: none;
  }

  [data-site-container].container {
    padding-top: calc(var(--il-announcement-bar-height) + var(--il-header-height));
  }

  .has-header-transparent [data-site-container].container {
    padding-top: var(--il-announcement-bar-height);
  }

}

.product-card {
  .splide__slide {
    backface-visibility: hidden;
  }
  .splide__pagination {
    position: relative;
    bottom: var(--il-size-space-300);
    left: var(--il-size-space-300);
    display: flex;
    gap: var(--il-size-space-100);
    flex-direction: row;
    justify-content: flex-start;
    margin: 0;
    opacity: 0;
    li {
      font-size: 0;
    }

    button {
      height: var(--il-size-space-050);
      width: var(--il-size-space-200);
      padding: 0;
      background-color: var(--il-color-text-primary);
      opacity: 0.3;
      border: none;
      transition: var(--il-animation-default);
      &.is-active {
        background-color: var(--il-color-text-primary);
        opacity: 1;
        width: var(--il-size-space-600);
      }
    }
  }

  

  .splide__arrows {
    z-index: 2;
    pointer-events: none;
    justify-content: space-between;
    display: flex;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    opacity: 0;
    color: var(--il-color-text-primary);
    transition: opacity .3s;
    pointer-events: visible;
    .splide__arrow {
      cursor: pointer;
      svg {
        background-color: transparent;
      }
    }
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 750px) {
  .product-card {
    &:hover .splide__arrows,
    &:hover .splide__pagination {
      opacity: 1;
    }
  }
}

@media (max-width: 749px) and (hover: none) {
  .product-card {
    .splide__pagination {
      opacity: 1;
    }
  }
}


.aspect-portrait {
  --aspect-ratio: 0.75 !important;
  aspect-ratio: var(--aspect-ratio);
  .image-wrapper {
    --aspect-ratio: 0.75;
    padding-top: calc(1 / 0.75 * 100%);
  }
  .image-wrapper img {
    object-fit: cover;
  }
}