<style>
/* ================================
SCROLLBAR (GSAP ScrollSmoother-friendly)
================================ */

/* Chrome / Edge / Safari */
html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background: rgb(0, 0, 0);
  /* Only visible if you actually set a border */
  border: 1px solid rgb(255, 255, 255);
}

html::-webkit-scrollbar-thumb {
  background: rgb(255, 255, 255);
  border: 2px solid rgb(0, 0, 0);
}

/* Optional: hover state */
html::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.85);
}

/* Firefox fallback */
html {
  scrollbar-width: thin;
  /* auto | thin | none */
  scrollbar-color: #fff #000;
  /* thumb track */
}

/* If you want to be extra safe, you can mirror to body too */
body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  background: rgb(0, 0, 0);
  border: 1px solid rgb(255, 255, 255);
}

body::-webkit-scrollbar-thumb {
  background: rgb(255, 255, 255);
  border: 2px solid rgb(0, 0, 0);
}

body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.85);
}

/* ================================
   NAVIGATION
   ================================ */

[data-twostep-nav] {
  --cubic-default: cubic-bezier(0.625, 0.05, 0, 1);
  --animation-ease: 0.2s ease;

  --duration-default: 0.5s;
  --duration-default-long: 0.75s;
  --duration-default-half: 0.25s;

  --animation-default: var(--duration-default) var(--cubic-default);
  --animation-default-long: var(--duration-default-long) var(--cubic-default);
  --animation-default-half: var(--duration-default-half) var(--cubic-default);
}

/* Menu button */
.twostep-nav__toggle-bar {
  transition: transform var(--animation-default);
  transform: translateY(-0.25em) rotate(0.001deg);
}

.twostep-nav__toggle:hover .twostep-nav__toggle-bar {
  transform: translateY(0.25em) rotate(0.001deg);
}

.twostep-nav__toggle .twostep-nav__toggle-bar:nth-child(2) {
  transform: translateY(0.15em) rotate(0.001deg);
}

.twostep-nav__toggle:hover .twostep-nav__toggle-bar:nth-child(2) {
  transform: translateY(-0.15em) rotate(0.001deg);
}

[data-nav-status="active"] .twostep-nav__toggle .twostep-nav__toggle-bar {
  transform: translateY(0em) rotate(45deg);
}

[data-nav-status="active"] .twostep-nav__toggle .twostep-nav__toggle-bar:nth-child(2) {
  transform: translateY(0em) rotate(-45deg);
}

/* Page dark overlay */
.twostep-nav__bg {
  transition: opacity var(--animation-default), visibility var(--animation-default);
}

[data-nav-status="active"] .twostep-nav__bg {
  opacity: 1;
  visibility: visible;
}

/* Inner bar grow */
.twostep-nav__bar {
  transition: max-width var(--animation-default-long) 0.2s;
}

[data-nav-status="active"] .twostep-nav__bar {
  transition: max-width var(--animation-default) 0s;
  max-width: 100%;
}

/* Thin line in nav bar */
.twostep-nav__top-line {
  transition: all var(--animation-default) 0s;
  opacity: 0;
}

[data-nav-status="active"] .twostep-nav__top-line {
  transition: all var(--animation-default) 0.1s;
  opacity: 1;
}

@media screen and (max-width: 767px) {

  .twostep-nav__top-line {
    inset: auto 1em -0.5em;
  }

  [data-nav-status="active"] .twostep-nav__top-line {
    transition: all var(--animation-default) 0.2s;
    inset: auto 0em -0.5em;
  }
}

/* Nav bar background */

/* Back bg active */
[data-nav-status="active"] .twostep-nav__back-bg {
  background-color: var(--_theme---nav-container);
}

.twostep-nav__bar__bg,
.twostep-nav__back-bg {
  transition: background-color var(--animation-ease);
}

.twostep-nav__back {
  transition: all var(--animation-default);
  inset: 0em;
}

[data-nav-status="active"] .twostep-nav__back {
  inset: -0.25em;
}

@media screen and (max-width: 767px) {

  [data-nav-status="active"] .twostep-nav__back {
    inset: -1.25em;
  }

}

/* Nav bottom */
.twostep-nav__bottom {
  transition: grid-template-rows var(--animation-default) 0s;
}

[data-nav-status="active"] .twostep-nav__bottom {
  transition: grid-template-rows var(--animation-default-long) 0.25s;
  grid-template-rows: 1fr;
}

@media screen and (max-width: 767px) {

  .twostep-nav__bottom {
    transition: grid-template-rows var(--animation-default) 0s, transform var(--animation-default) 0s;
    transform: translateY(-0.625em);
  }

  [data-nav-status="active"] .twostep-nav__bottom {
    transition: grid-template-rows var(--animation-default-long) 0.25s, transform var(--animation-default) 0.25s;
    transform: translateY(0em);
  }
}

/* Nav columns reveal */
.twostep-nav__bottom-row>* {
  transition: all var(--animation-default) 0s;
  transform: translateY(2em);
  opacity: 0;
}

.twostep-nav__bottom-row>*:nth-child(2) {
  transition-delay: 0.075s;
}

[data-nav-status="active"] .twostep-nav__bottom-row>* {
  transition: all var(--animation-default-long) 0.25s;
  transform: translateY(0em);
  opacity: 1;
}

[data-nav-status="active"] .twostep-nav__bottom-row>*:nth-child(2) {
  transition-delay: 0.25s;
}

/* ##########
  ## GRID FLIP
  ############*/
[data-grid-flip="grid"] {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

[data-grid-flip="grid"][data-grid-flip-size="large"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* [data-grid-flip="grid"],
[data-grid-flip="card"] {
  transition: none !important;
} */

[data-grid-flip="card"] {
  transition: none !important;
}

[data-grid-flip="grid"]:not([fs-list-element="list"]) {
  transition: none !important;
}

@media (max-width: 991px) {
  [data-grid-flip="grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-grid-flip="grid"][data-grid-flip-size="large"] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.view-toggle {
  display: flex;
  align-items: center;
  gap: 1rem;
  user-select: none;
}

.view-toggle__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.view-toggle__label {
  cursor: pointer;
}

.view-toggle__track {
  transition: background 0.2s ease;
}

.view-toggle__thumb {
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.2, 1);
}

/* Checked state */
.view-toggle__input:checked+.view-toggle__label .view-toggle__track {
  background: rgba(0, 0, 0, 0.28);
}

.view-toggle__input:checked+.view-toggle__label .view-toggle__thumb {
  transform: translateX(1.125rem);
}

/* Text clarity */
.view-toggle__text {
  display: flex;
}

.view-toggle__state {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.view-toggle__input:not(:checked)+.view-toggle__label .view-toggle__state--small {
  opacity: 1;
}

.view-toggle__input:checked+.view-toggle__label .view-toggle__state--large {
  opacity: 1;
}

/* Keyboard focus */
.view-toggle__input:focus-visible+.view-toggle__label .view-toggle__track {
  outline: 2px solid rgba(0, 0, 0, 0.6);
  outline-offset: 3px;
}

/* ── List filter animation ── */

/* List filter animation — target the Collection List Wrapper */
.layout_grid_flip {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  will-change: opacity, transform;
}

.layout_grid_flip.is-list-filtering {
  opacity: 0;
  transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
  .layout_grid_flip {
    transition: none;
  }
}

</style>
