@keyframes slide-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.carousel .toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
}
.carousel .toolbar:not(.fullbleed-carousel .toolbar) {
  align-items: center;
}
.carousel .toolbar span {
  grid-column: 1;
  grid-row: 1;
}
.carousel .toolbar [role=progressbar] {
  width: 100%;
  grid-column: 1/-1;
  grid-row: 2;
  position: relative;
  height: 3px;
  background: #E9E9E9;
}
.carousel .toolbar [role=progressbar]:not(.fullbleed-carousel .toolbar [role=progressbar]) {
  margin-top: 2rem;
}
.carousel .toolbar [role=progressbar] > div {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 6px;
  width: 0;
  transition: width 0.35s ease;
  background: var(--accent);
}
.carousel .toolbar > div:not([role]) {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
}
.carousel .toolbar div:has(> button) {
  gap: 4rem;
}
.carousel .toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
}
.carousel .toolbar button.previous:after {
  transform: rotate(180deg);
}
.carousel .toolbar button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .carousel .cell:has(> .view-all) {
    display: flex;
    justify-content: flex-end;
  }
}

.accordion-carousel {
  --nav-li: 1.8rem;
}
.accordion-carousel nav a,
.accordion-carousel nav li {
  font: 400 var(--nav-li)/2.25 var(--para);
  letter-spacing: -0.1rem;
  display: block;
  width: 100%;
  padding: 1rem 3rem;
  text-align: left;
  cursor: pointer;
}
.accordion-carousel nav li[aria-selected=true] {
  background: var(--accent);
  font: 500 var(--nav-li)/2.25 var(--heading);
}
.accordion-carousel article {
  width: 100%;
}
.accordion-carousel article:not([hidden]) {
  display: flex;
  animation: slide-fade-in 0.55s ease both;
}
.accordion-carousel article figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media (min-width: 1024px) {
  .accordion-carousel {
    --nav-li: 2.4rem;
  }
}

.services-accordion {
  --h3: 1.4rem;
  --gap: 1.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.services-accordion li .icon-after {
  align-items: center;
  color: var(--background-dark);
  font: 400 var(--h3)/1 var(--para);
}
.services-accordion li .icon-after::after {
  content: "";
  margin-left: auto;
  display: inline-block;
  width: 1.75rem;
  height: 1.5rem;
  background-image: url("/wp-content/themes/storefront/assets/images/icons/chevron.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform: rotate(90deg);
  transition: transform 0.25s ease;
}
.services-accordion li .icon-after[aria-expanded=true] {
  font: 500 var(--h3)/1 var(--heading);
}
.services-accordion li .icon-after[aria-expanded=true]::after {
  transform: rotate(-90deg);
}
.services-accordion li div {
  flex-direction: column;
  gap: var(--gap);
  padding-bottom: var(--gap);
}
.services-accordion__trigger {
  background: none;
  border: none;
  cursor: pointer;
  appearance: none;
}
.services-accordion__panel:not([hidden]) {
  display: flex;
}
.services-accordion__images figure {
  margin: 0;
}
.services-accordion__images figure:not([hidden]) {
  display: block;
  animation: slide-fade-in 0.55s ease both;
}
.services-accordion__images figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .services-accordion {
    --gap: 3rem;
    --h3: 2.4rem;
  }
  .services-accordion li .icon-after::after {
    width: 2.8rem;
    height: 1.5rem;
  }
  .full-bleed-image .text {
    padding-top: var(--padding);
    padding-bottom: var(--padding);
  }
  .full-bleed-image div:has(> figure) {
    width: calc(50vw - 4rem);
    max-width: calc(50vw - 4rem);
    height: 100%;
  }
  .full-bleed-image div:has(> figure) figure {
    height: 100%;
    width: 100%;
    margin: 0;
  }
  .full-bleed-image div:has(> figure) figure img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

.products-carousel {
  --gap: 1.1rem;
}
.products-carousel .view-all {
  display: block;
  text-align: right;
}
.products-carousel ul {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap);
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.products-carousel li {
  flex: 0 0 calc(25% - var(--gap));
  width: calc(25% - var(--gap));
  min-width: 0;
}
.products-carousel li article figure {
  margin: 0;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.products-carousel li article figure img {
  display: block;
  min-width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}
.products-carousel li article {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.products-carousel li article p:has(+ .button) {
  margin-bottom: 2rem;
}
.products-carousel li .button {
  margin-top: auto;
}
@media screen and (max-width: 63.9375em) {
  .products-carousel li {
    flex: 0 0 calc(50% - var(--gap));
    width: calc(50% - var(--gap));
  }
}
@media screen and (max-width: 39.9375em) {
  .products-carousel li {
    flex: 0 0 calc(80% - var(--gap));
    width: calc(80% - var(--gap));
  }
}
@media (min-width: 1024px) {
  .products-carousel {
    --gap: 3rem;
  }
  .products-carousel .grid-x:has(.cell):has(.toolbar) {
    align-items: end;
  }
}

.fullbleed-carousel {
  --padding: 3rem;
  --h2: 1.6rem;
  --p: 1.4rem;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.fullbleed-carousel .toolbar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  padding-bottom: 3rem !important;
}
.fullbleed-carousel figure,
.fullbleed-carousel article {
  position: absolute;
  inset: 0;
}
.fullbleed-carousel article {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
.fullbleed-carousel article::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 20%, rgb(0, 0, 0) 100%);
}
.fullbleed-carousel article figure {
  opacity: 0;
  transition: opacity 1.1s ease;
}
.fullbleed-carousel article .text {
  opacity: 0;
  transition: opacity 0.55s ease;
}
.fullbleed-carousel article .text h2 {
  font-size: var(--h2);
  text-transform: uppercase;
}
.fullbleed-carousel article .text ul, .fullbleed-carousel article .text p {
  font-size: var(--p);
}
.fullbleed-carousel article.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
.fullbleed-carousel article.is-active figure {
  opacity: 1;
}
.fullbleed-carousel article.is-active .text {
  opacity: 1;
}
.fullbleed-carousel figure,
.fullbleed-carousel img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.fullbleed-carousel .text {
  margin-top: auto;
  position: relative;
  z-index: 2;
  padding-bottom: var(--padding) !important;
}
.fullbleed-carousel:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(0deg, #000 0.11%, rgba(0, 0, 0, 0.9) 21.9%, rgba(102, 102, 102, 0) 100%);
}
.fullbleed-carousel .toolbar div:has(> button) {
  position: absolute;
  right: var(--gutter);
  top: 0;
}
.fullbleed-carousel .toolbar div:has(> button) button:after {
  filter: invert(1);
}
@media (min-width: 1024px) {
  .fullbleed-carousel {
    --padding: 5rem;
    --h2: 2.4rem;
    --p: 2rem;
  }
  .fullbleed-carousel article .cell {
    display: flex;
  }
  .fullbleed-carousel article .cell:has(.button) {
    justify-content: flex-end;
  }
  .fullbleed-carousel article .cell:has(.button) .button {
    margin-top: auto;
  }
  .fullbleed-carousel article .cell:not(.fullbleed-carousel article .cell:has(.button)) {
    flex-direction: column;
    gap: 2.4rem;
  }
  .fullbleed-carousel article .cell ul {
    padding-left: 1.6rem;
  }
  .fullbleed-carousel article .cell ul li {
    list-style-type: disc;
  }
}
@media (max-width: 1023px) {
  .fullbleed-carousel:after {
    height: 80%;
  }
  .fullbleed-carousel .text > .grid-x, .fullbleed-carousel .text > .grid-x > .cell {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .fullbleed-carousel .text .cell:has(p + ul) {
    margin-top: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .accordion-carousel article:not([hidden]) {
    animation: none;
  }
  .services-accordion__images figure:not([hidden]) {
    animation: none;
  }
  .products-carousel ul {
    transition: none;
  }
  .fullbleed-carousel article figure,
  .fullbleed-carousel article .text {
    transition: none;
  }
}

/*# sourceMappingURL=accordion-carousel.css.map */