#fw-section-custom-html-e9e16d34-bacb-4081-8501-cec28813c218 {

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700&display=swap');

.zv-about-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 650px;
  overflow: hidden;
  background: transparent;
  color: #111111;
  font-family: "Inter", sans-serif;
}

.zv-about-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.zv-about-track {
  display: flex;
  width: 700%;
  height: 100%;
  will-change: transform;
  touch-action: pan-y;
  cursor: grab;
}

.zv-about-track.is-dragging {
  cursor: grabbing;
}

.zv-about-slide {
  position: relative;
  flex: 0 0 14.285714%;
  width: 14.285714%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background: transparent;
}

.zv-about-noise,
.zv-about-glow {
  display: none;
}


/* =========================================================
   SHARED TYPOGRAPHY
   ========================================================= */

.zv-about-slide-content,
.zv-about-purpose-grid,
.zv-about-world-inner,
.zv-about-code-inner,
.zv-about-point-inner,
.zv-about-contact-grid {
  position: relative;
  z-index: 3;
}

.zv-about-kicker {
  margin: 0 0 18px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.2;
  color: #111111;
}

.zv-about-heading-line,
.zv-about-heading-accent {
  display: block;
}

.zv-about-heading-accent {
  color: #111111;
}

.zv-about-bg-word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  white-space: nowrap;
  font-family: "Archivo Black", sans-serif;
  font-size: 17vw;
  line-height: 0.8;
  letter-spacing: -0.07em;
  color: rgba(17, 17, 17, 0.035);
  pointer-events: none;
  user-select: none;
}


/* =========================================================
   01 — INTRO
   ========================================================= */

.zv-about-slide--intro .zv-about-slide-content {
  position: absolute;
  left: 8%;
  top: 43%;
  transform: translateY(-50%);
  max-width: 850px;
}

.zv-about-slide--intro h1 {
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: 7vw;
  line-height: 0.88;
  letter-spacing: -0.055em;
  color: #111111;
}

.zv-about-slide--intro h1 span {
  display: block;
}

.zv-about-intro-line {
  width: 75px;
  height: 2px;
  margin: 30px 0 20px;
  background: #111111;
}

.zv-about-small-copy {
  max-width: 430px;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #333333;
}

.zv-about-bottom-label {
  position: absolute;
  left: 8%;
  bottom: 8%;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #111111;
}

.zv-about-bottom-arrow {
  font-size: 16px;
  line-height: 1;
}


/* =========================================================
   02 — IDENTITY
   ========================================================= */

.zv-about-slide--identity .zv-about-slide-content {
  position: absolute;
  left: 10%;
  top: 43%;
  transform: translateY(-50%);
  max-width: 900px;
}

.zv-about-slide--identity h2,
.zv-about-slide--purpose h2,
.zv-about-slide--world h2,
.zv-about-slide--code h2,
.zv-about-slide--point h2,
.zv-about-slide--contact h2 {
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: 6.4vw;
  line-height: 0.9;
  letter-spacing: -0.055em;
  color: #111111;
}

.zv-about-slide-description {
  max-width: 440px;
  margin: 30px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: #333333;
}


/* =========================================================
   03 — PURPOSE
   ========================================================= */

.zv-about-purpose-grid {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  align-items: center;
}

.zv-about-purpose-heading h2 {
  font-size: 6vw;
}

.zv-about-purpose-content {
  max-width: 520px;
}

.zv-about-large-copy {
  margin: 0 0 24px;
  font-family: "Archivo Black", sans-serif;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #111111;
}

.zv-about-body-copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #333333;
}

.zv-about-purpose-line {
  width: 100%;
  height: 1px;
  margin: 30px 0 18px;
  background: rgba(17, 17, 17, 0.25);
}

.zv-about-purpose-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.zv-about-purpose-tags span {
  padding: 8px 12px;
  border: 1px solid rgba(17, 17, 17, 0.25);
  border-radius: 100px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #111111;
}


/* =========================================================
   04 — WORLD
   ========================================================= */

.zv-about-world-inner {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
}

.zv-about-world-header {
  margin-bottom: 35px;
}

.zv-about-world-header h2 {
  font-size: 5vw;
}

.zv-about-world-list {
  width: 100%;
  border-top: 1px solid rgba(17, 17, 17, 0.2);
}

.zv-about-world-item {
  display: grid;
  grid-template-columns: 70px 1fr 40px;
  align-items: center;
  min-height: 58px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
  text-decoration: none;
  color: #111111;
  transition:
    padding 300ms ease,
    background 300ms ease;
}

.zv-about-world-item:hover {
  padding-left: 14px;
}

.zv-about-world-number {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  opacity: 0.55;
}

.zv-about-world-name {
  font-family: "Archivo Black", sans-serif;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.zv-about-world-arrow {
  font-size: 18px;
  text-align: right;
  transition: transform 300ms ease;
}

.zv-about-world-item:hover .zv-about-world-arrow {
  transform: translate(4px, -4px);
}


/* =========================================================
   05 — CODE
   ========================================================= */

.zv-about-code-inner {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 10%;
  align-items: center;
}

.zv-about-code-header h2 {
  font-size: 6vw;
}

.zv-about-code-list {
  border-top: 1px solid rgba(17, 17, 17, 0.2);
}

.zv-about-code-item {
  display: grid;
  grid-template-columns: 55px 1fr;
  gap: 15px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
}

.zv-about-code-number {
  padding-top: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.55;
}

.zv-about-code-text h3 {
  margin: 0 0 5px;
  font-family: "Archivo Black", sans-serif;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.zv-about-code-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #444444;
}


/* =========================================================
   06 — POINT OF VIEW
   ========================================================= */

.zv-about-point-inner {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.zv-about-point-inner h2 {
  font-size: 8vw;
}

.zv-about-point-line {
  width: 100px;
  height: 2px;
  margin: 30px 0 25px;
  background: #111111;
}

.zv-about-point-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #444444;
}

.zv-about-point-copy strong {
  font-family: "Archivo Black", sans-serif;
  color: #111111;
}


/* =========================================================
   07 — CONTACT
   ========================================================= */

.zv-about-contact-grid {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 10%;
  align-items: center;
}

.zv-about-contact-intro h2 {
  font-size: 8vw;
}

.zv-about-contact-copy {
  max-width: 390px;
  margin: 28px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #444444;
}

.zv-about-contact-form-wrap {
  width: 100%;
  max-width: 560px;
  justify-self: end;
}

.zv-about-field {
  margin-bottom: 20px;
}

.zv-about-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #111111;
}

.zv-about-field input,
.zv-about-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.3);
  border-radius: 0;
  outline: none;
  padding: 10px 0;
  background: transparent;
  color: #111111;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  resize: none;
  transition: border-color 250ms ease;
}

.zv-about-field textarea {
  min-height: 110px;
}

.zv-about-field input:focus,
.zv-about-field textarea:focus {
  border-bottom-color: #111111;
}

.zv-about-field input::placeholder,
.zv-about-field textarea::placeholder {
  color: #777777;
  opacity: 1;
}

#zvAboutSubmit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 190px;
  margin-top: 5px;
  padding: 14px 20px;
  border: 1px solid #111111;
  border-radius: 0;
  background: #111111;
  color: #eeeeee;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition:
    background 250ms ease,
    color 250ms ease,
    transform 250ms ease;
}

#zvAboutSubmit:hover {
  background: transparent;
  color: #111111;
  transform: translateY(-2px);
}

#zvAboutSubmit:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.zv-about-submit-arrow {
  font-size: 16px;
  line-height: 1;
}

.zv-about-form-status {
  min-height: 20px;
  margin-top: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.zv-about-form-status.is-success {
  color: #111111;
}

.zv-about-form-status.is-error {
  color: #555555;
}


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

.zv-about-navigation {
  position: absolute;
  z-index: 20;
  right: 5%;
  bottom: 5%;
  display: flex;
  align-items: center;
  gap: 12px;
}

.zv-about-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.35);
  border-radius: 50%;
  background: transparent;
  color: #111111;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 250ms ease,
    color 250ms ease,
    transform 250ms ease,
    opacity 250ms ease;
}

.zv-about-nav:hover {
  background: #111111;
  color: #eeeeee;
  transform: translateY(-2px);
}

.zv-about-nav.is-disabled {
  opacity: 0.25;
  pointer-events: none;
}

.zv-about-progress {
  position: relative;
  width: 80px;
  height: 1px;
  overflow: hidden;
  background: rgba(17, 17, 17, 0.2);
}

.zv-about-progress span {
  display: block;
  width: 14.285714%;
  height: 100%;
  background: #111111;
  transition: width 500ms cubic-bezier(.77,0,.18,1);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .zv-about-slide--intro .zv-about-slide-content,
  .zv-about-slide--identity .zv-about-slide-content {
    left: 7%;
    top: 40%;
  }

  .zv-about-purpose-grid,
  .zv-about-code-inner,
  .zv-about-contact-grid {
    left: 7%;
    right: 7%;
    gap: 6%;
  }

  .zv-about-world-inner {
    left: 7%;
    right: 7%;
    top: 45%;
  }

  .zv-about-point-inner {
    left: 7%;
  }

  .zv-about-slide--intro h1 {
    font-size: 9vw;
  }

  .zv-about-slide--identity h2,
  .zv-about-purpose-heading h2,
  .zv-about-code-header h2 {
    font-size: 8vw;
  }

  .zv-about-point-inner h2,
  .zv-about-contact-intro h2 {
    font-size: 10vw;
  }

  .zv-about-world-header h2 {
    font-size: 7vw;
  }

  .zv-about-purpose-grid {
    top: 45%;
  }

  .zv-about-code-inner,
  .zv-about-contact-grid {
    top: 45%;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .zv-about-slider {
    min-height: 600px;
  }


  /* =======================================================
     01 — WHO WE ARE
     ======================================================= */

  .zv-about-slide--intro .zv-about-slide-content {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 70px !important;
    transform: none !important;
    max-width: none;
  }


  /* =======================================================
     02 — THE IDEA
     ======================================================= */

  .zv-about-slide--identity .zv-about-slide-content {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 70px !important;
    transform: none !important;
    max-width: none;
  }


  /* =======================================================
     03 — THE PURPOSE
     ======================================================= */

  .zv-about-purpose-grid {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 70px !important;
    transform: none !important;
    display: block;
  }


  /* =======================================================
     04 — THE WORLD
     ======================================================= */

  .zv-about-world-inner {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 70px !important;
    transform: none !important;
  }


  /* =======================================================
     05 — THE CODE
     ======================================================= */

  .zv-about-code-inner {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 70px !important;
    transform: none !important;
    display: block;
  }


  /* =======================================================
     06 — POINT OF VIEW
     ======================================================= */

  .zv-about-point-inner {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 70px !important;
    transform: none !important;
  }


  /* =======================================================
     07 — LET'S TALK
     
     KEEPING THE EXISTING GOOD POSITION
     ======================================================= */

  .zv-about-contact-grid {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 43%;
    transform: translateY(-50%);
    display: block;
  }


  /* =======================================================
     MOBILE TYPOGRAPHY
     ======================================================= */

  .zv-about-slide--intro h1 {
    font-size: 13vw;
    line-height: 0.9;
  }

  .zv-about-slide--identity h2,
  .zv-about-purpose-heading h2,
  .zv-about-code-header h2 {
    font-size: 12vw;
    line-height: 0.92;
  }

  .zv-about-slide-description {
    margin-top: 22px;
    font-size: 13px;
    line-height: 1.6;
  }

  .zv-about-kicker {
    margin-bottom: 14px;
    font-size: 9px;
  }

  .zv-about-small-copy {
    max-width: 320px;
    font-size: 13px;
    line-height: 1.55;
  }

  .zv-about-intro-line {
    width: 55px;
    margin: 22px 0 15px;
  }

  .zv-about-bottom-label {
    left: 7%;
    bottom: 7%;
    font-size: 8px;
  }

  .zv-about-bg-word {
    font-size: 24vw;
  }


  /* =======================================================
     PURPOSE
     ======================================================= */

  .zv-about-purpose-content {
    margin-top: 25px;
    max-width: none;
  }

  .zv-about-large-copy {
    margin-bottom: 17px;
    font-size: 22px;
  }

  .zv-about-body-copy {
    font-size: 12px;
    line-height: 1.65;
  }

  .zv-about-purpose-line {
    margin: 22px 0 14px;
  }

  .zv-about-purpose-tags {
    gap: 7px;
  }

  .zv-about-purpose-tags span {
    padding: 6px 9px;
    font-size: 8px;
  }


  /* =======================================================
     WORLD
     ======================================================= */

  .zv-about-world-header {
    margin-bottom: 22px;
  }

  .zv-about-world-header h2 {
    font-size: 11vw;
  }

  .zv-about-world-item {
    grid-template-columns: 40px 1fr 25px;
    min-height: 50px;
  }

  .zv-about-world-number {
    font-size: 8px;
  }

  .zv-about-world-name {
    font-size: 11px;
  }

  .zv-about-world-arrow {
    font-size: 15px;
  }


  /* =======================================================
     CODE
     ======================================================= */

  .zv-about-code-list {
    margin-top: 25px;
  }

  .zv-about-code-item {
    grid-template-columns: 35px 1fr;
    gap: 10px;
    padding: 13px 0;
  }

  .zv-about-code-number {
    font-size: 8px;
  }

  .zv-about-code-text h3 {
    font-size: 13px;
  }

  .zv-about-code-text p {
    font-size: 11px;
  }


  /* =======================================================
     POINT
     ======================================================= */

  .zv-about-point-inner h2 {
    font-size: 15vw;
  }

  .zv-about-point-line {
    width: 65px;
    margin: 22px 0 18px;
  }

  .zv-about-point-copy {
    font-size: 12px;
  }


  /* =======================================================
     CONTACT
     ======================================================= */

  .zv-about-contact-intro h2 {
    font-size: 16vw;
  }

  .zv-about-contact-copy {
    max-width: 330px;
    margin-top: 18px;
    font-size: 12px;
    line-height: 1.55;
  }

  .zv-about-contact-form-wrap {
    max-width: none;
    margin-top: 25px;
  }

  .zv-about-field {
    margin-bottom: 14px;
  }

  .zv-about-field label {
    margin-bottom: 5px;
    font-size: 8px;
  }

  .zv-about-field input,
  .zv-about-field textarea {
    padding: 8px 0;
    font-size: 12px;
  }

  .zv-about-field textarea {
    min-height: 80px;
  }

  #zvAboutSubmit {
    min-width: 165px;
    padding: 12px 15px;
    font-size: 8px;
  }


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

  .zv-about-navigation {
    right: 7%;
    bottom: 5%;
    gap: 8px;
  }

  .zv-about-nav {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .zv-about-progress {
    width: 55px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

  /* Keep the first six slides at the same top anchor */

  .zv-about-slide--intro .zv-about-slide-content,
  .zv-about-slide--identity .zv-about-slide-content,
  .zv-about-purpose-grid,
  .zv-about-world-inner,
  .zv-about-code-inner,
  .zv-about-point-inner {
    top: 50px !important;
    transform: none !important;
  }


  /* Keep LET'S TALK where it currently works */

  .zv-about-contact-grid {
    top: 40%;
    transform: translateY(-50%);
  }

  .zv-about-contact-intro h2 {
    font-size: 17vw;
  }

  .zv-about-contact-form-wrap {
    margin-top: 20px;
  }

}
}

#fw-section-custom-html-0fbcf1ef-0045-40fc-9e5c-e4d40bab0237 {

.zv-collections-index {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px 32px 90px;
  box-sizing: border-box;
  color: inherit;
}

.zv-ci-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 58px;
}

.zv-ci-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .58;
  line-height: 1.4;
}

.zv-ci-kicker span {
  opacity: .55;
}

.zv-ci-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: clamp(32px, 4vw, 62px);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .86;
  text-transform: uppercase;
}


/* =========================================================
   DESKTOP INDEX
   ========================================================= */

.zv-ci-stage {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(460px, 1.18fr);
  gap: 62px;
  align-items: start;
}

.zv-ci-list {
  width: 100%;
}

.zv-ci-item {
  position: relative;

  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 28px;

  align-items: center;

  min-height: 72px;
  width: 100%;

  border-top: 1px solid rgba(127,127,127,.25);

  color: inherit;
  text-decoration: none;

  overflow: hidden;

  transition:
    opacity .35s ease,
    padding-left .42s cubic-bezier(.16,.72,.2,1);
}

.zv-ci-item:last-child {
  border-bottom: 1px solid rgba(127,127,127,.25);
}

.zv-ci-item:not(.is-active) {
  opacity: .42;
}

.zv-ci-item:hover,
.zv-ci-item:focus-visible,
.zv-ci-item.is-active {
  opacity: 1;
  padding-left: 7px;
}

.zv-ci-number {
  font-size: 10px;
  letter-spacing: .12em;
  opacity: .48;

  transition:
    opacity .35s ease,
    transform .4s cubic-bezier(.16,.72,.2,1);
}

.zv-ci-item:hover .zv-ci-number,
.zv-ci-item.is-active .zv-ci-number {
  opacity: .82;
  transform: translateX(1px);
}

.zv-ci-name {
  font-size: clamp(16px,1.35vw,20px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;

  transition:
    transform .45s cubic-bezier(.16,.72,.2,1);
}

.zv-ci-item:hover .zv-ci-name,
.zv-ci-item.is-active .zv-ci-name {
  transform: translateX(3px);
}

.zv-ci-arrow {
  justify-self: end;

  font-size: 17px;
  line-height: 1;

  opacity: .4;

  transform: translateX(0);

  transition:
    transform .45s cubic-bezier(.16,.72,.2,1),
    opacity .35s ease;
}

.zv-ci-item:hover .zv-ci-arrow,
.zv-ci-item:focus-visible .zv-ci-arrow,
.zv-ci-item.is-active .zv-ci-arrow {
  opacity: 1;
  transform: translateX(4px);
}


/*
 * ACTIVE EDITORIAL LINE
 */

.zv-ci-active-line {
  position: absolute;

  left: 0;
  bottom: 0;

  width: 0;
  height: 1px;

  background: currentColor;

  opacity: .65;

  transition:
    width .55s cubic-bezier(.16,.72,.2,1),
    opacity .35s ease;
}

.zv-ci-item.is-active .zv-ci-active-line,
.zv-ci-item:hover .zv-ci-active-line,
.zv-ci-item:focus-visible .zv-ci-active-line {
  width: 54px;
}


/* =========================================================
   DESKTOP IMAGE
   ========================================================= */

.zv-ci-visual {
  min-width: 0;
}

.zv-ci-image-frame {
  position: relative;

  display: block;

  width: 100%;
  aspect-ratio: 1.18 / 1;

  overflow: hidden;

  text-decoration: none;

  background: #111;

  isolation: isolate;
}

.zv-ci-image {
  --zv-depth-x: 0%;
  --zv-depth-y: 0%;

  position: absolute;

  inset: -2.5%;

  width: 105%;
  height: 105%;

  display: block;

  object-fit: cover;
  object-position: center;

  filter:
    contrast(1.07)
    saturate(.86)
    brightness(.94);

  transform:
    translate3d(
      var(--zv-depth-x),
      var(--zv-depth-y),
      0
    )
    scale(1.015);

  opacity: 1;

  transition:
    transform 1.35s cubic-bezier(.16,.72,.2,1),
    filter .8s ease,
    opacity .23s ease;
}


/*
 * NORMAL CAMERA PUSH
 */

.zv-ci-image-frame:hover .zv-ci-image {
  transform:
    translate3d(
      var(--zv-depth-x),
      var(--zv-depth-y),
      0
    )
    scale(1.045);

  filter:
    contrast(1.09)
    saturate(.9)
    brightness(.97);
}


/*
 * IMAGE EXIT
 */

.zv-ci-image.is-changing-out {
  opacity: 0;

  transform:
    translate3d(-2.8%,0,0)
    scale(1.045);

  transition:
    opacity .23s cubic-bezier(.4,0,.8,1),
    transform .23s cubic-bezier(.4,0,.8,1);
}


/*
 * IMAGE ENTRANCE
 */

.zv-ci-image.is-changing-in {
  animation:
    zvPremiumDesktopImageEnter
    1.2s
    cubic-bezier(.16,.72,.2,1)
    both;
}

@keyframes zvPremiumDesktopImageEnter {

  0% {
    opacity: 0;

    transform:
      translate3d(3.4%,0,0)
      scale(1.075);
  }

  38% {
    opacity: 1;
  }

  100% {
    opacity: 1;

    transform:
      translate3d(0,0,0)
      scale(1.015);
  }

}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.zv-ci-image-overlay {
  position: absolute;
  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,0) 32%,
      rgba(0,0,0,.08) 58%,
      rgba(0,0,0,.56) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.18) 0%,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,.08) 100%
    );
}


/* =========================================================
   GRAIN
   ========================================================= */

.zv-ci-image-grain {
  position: absolute;
  inset: 0;

  z-index: 3;

  pointer-events: none;

  opacity: .11;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");

  mix-blend-mode: soft-light;
}


/* =========================================================
   IMAGE META
   ========================================================= */

.zv-ci-image-meta {
  position: absolute;

  left: 24px;
  right: 24px;
  bottom: 22px;

  z-index: 4;

  display: flex;
  align-items: center;

  gap: 13px;

  color: #fff;

  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;

  text-shadow: 0 1px 12px rgba(0,0,0,.35);

  transition:
    opacity .4s ease,
    transform .5s cubic-bezier(.16,.72,.2,1);
}

.zv-ci-meta-line {
  width: 38px;
  height: 1px;

  background: rgba(255,255,255,.65);

  transform-origin: left center;

  transition:
    width .6s cubic-bezier(.16,.72,.2,1);
}


/* =========================================================
   DESKTOP COPY
   ========================================================= */

.zv-ci-copy {
  padding-top: 22px;
}

.zv-ci-copy-label {
  margin-bottom: 9px;

  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;

  opacity: .45;
}

.zv-ci-copy-title {
  margin-bottom: 8px;

  font-size: clamp(25px,2.5vw,40px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .95;

  text-transform: uppercase;

  will-change: transform, opacity;
}

.zv-ci-copy-description {
  max-width: 470px;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: .09em;
  line-height: 1.5;

  text-transform: uppercase;

  opacity: .58;

  will-change: transform, opacity;
}


/*
 * TEXT TRANSITION
 */

.zv-copy-leave {
  animation:
    zvCopyLeave
    .22s
    cubic-bezier(.4,0,.8,1)
    both;
}

.zv-copy-enter {
  animation:
    zvCopyEnter
    .62s
    cubic-bezier(.16,.72,.2,1)
    both;
}

@keyframes zvCopyLeave {

  from {
    opacity: 1;
    transform: translate3d(0,0,0);
  }

  to {
    opacity: 0;
    transform: translate3d(-8px,0,0);
  }

}

@keyframes zvCopyEnter {

  from {
    opacity: 0;
    transform: translate3d(9px,0,0);
  }

  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

.zv-ci-mobile {
  display: none;
}


@media (max-width:800px) {

  .zv-collections-index {
    padding: 48px 18px 62px;
  }

  .zv-ci-stage {
    display: none;
  }

  .zv-ci-top {
    margin-bottom: 38px;
  }

  .zv-ci-kicker {
    font-size: 9px;
    letter-spacing: .14em;
  }

  .zv-ci-heading {
    font-size: clamp(29px,9vw,44px);
    line-height: .88;
    letter-spacing: -.06em;
  }

  .zv-ci-mobile {
    display: block;
    width: 100%;
  }

  .zv-ci-mobile-index {
    width: 100%;
  }

  .zv-ci-mobile-entry {
    width: 100%;
  }


  /* MOBILE ROW */

  .zv-ci-mobile-row {
    appearance: none;
    -webkit-appearance: none;

    position: relative;

    display: grid;
    grid-template-columns: 34px minmax(0,1fr) 20px;

    align-items: center;

    width: 100%;
    min-height: 64px;

    margin: 0;
    padding: 0;

    border: 0;
    border-top: 1px solid rgba(127,127,127,.25);

    background: transparent;
    color: inherit;

    font: inherit;
    text-align: left;

    cursor: pointer;

    transition:
      opacity .3s ease,
      padding-left .3s ease;
  }

  .zv-ci-mobile-entry:last-child .zv-ci-mobile-row {
    border-bottom: 1px solid rgba(127,127,127,.25);
  }

  .zv-ci-mobile-row:focus-visible {
    outline: none;
  }

  .zv-ci-mobile-number {
    font-size: 9px;
    letter-spacing: .12em;

    opacity: .42;

    transition:
      opacity .3s ease,
      transform .4s ease;
  }

  .zv-ci-mobile-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1;
    text-transform: uppercase;

    transition:
      transform .4s cubic-bezier(.16,.72,.2,1),
      opacity .3s ease;
  }

  .zv-ci-mobile-row em {
    display: flex;
    align-items: center;
    justify-content: center;

    width: auto;
    height: auto;

    margin: 0;

    font-family: Arial,sans-serif;
    font-size: 23px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;

    opacity: .42;

    transform: translateY(-1px);

    transition:
      transform .4s cubic-bezier(.16,.72,.2,1),
      opacity .35s ease;
  }

  .zv-ci-mobile-entry.is-open .zv-ci-mobile-row {
    padding-left: 4px;
  }

  .zv-ci-mobile-entry.is-open .zv-ci-mobile-number {
    opacity: .8;
    transform: translateX(1px);
  }

  .zv-ci-mobile-entry.is-open .zv-ci-mobile-name {
    transform: translateX(3px);
  }

  .zv-ci-mobile-entry.is-open .zv-ci-mobile-row em {
    opacity: 1;
    transform: translateY(2px);
  }


  /* MOBILE PANEL */

  .zv-ci-mobile-panel {
    display: none;

    width: 100%;

    padding: 0 0 27px;
  }

  .zv-ci-mobile-entry.is-open .zv-ci-mobile-panel {
    display: block;
  }

  .zv-ci-mobile-image-link {
    display: block;

    width: 100%;

    text-decoration: none;
  }


  /* MOBILE IMAGE */

  .zv-ci-mobile-image-wrap {
    position: relative;

    width: 100%;

    aspect-ratio: 1.12 / 1;

    overflow: hidden;

    background: #111;

    isolation: isolate;
  }

  .zv-ci-mobile-image-wrap img {
    position: absolute;

    inset: -2.5%;

    display: block;

    width: 105%;
    height: 105%;

    object-fit: cover;
    object-position: center;

    filter:
      contrast(1.07)
      saturate(.84)
      brightness(.94);

    transform:
      translate3d(0,0,0)
      scale(1.05);
  }


  /*
   * MOBILE IMAGE ENTRANCE
   */

  .zv-ci-mobile-image-enter {
    animation:
      zvPremiumMobileImageEnter
      1.18s
      cubic-bezier(.16,.72,.2,1)
      both;
  }

  @keyframes zvPremiumMobileImageEnter {

    0% {
      opacity: 0;

      transform:
        translate3d(4%,0,0)
        scale(1.09);
    }

    38% {
      opacity: 1;
    }

    100% {
      opacity: 1;

      transform:
        translate3d(0,0,0)
        scale(1.05);
    }

  }


  /* MOBILE IMAGE SHADE */

  .zv-ci-mobile-image-shade {
    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.04) 0%,
        rgba(0,0,0,0) 35%,
        rgba(0,0,0,.52) 100%
      ),
      linear-gradient(
        90deg,
        rgba(0,0,0,.12),
        rgba(0,0,0,0) 48%,
        rgba(0,0,0,.08)
      );
  }


  /* MOBILE GRAIN */

  .zv-ci-mobile-image-grain {
    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    opacity: .1;

    background-image:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");

    mix-blend-mode: soft-light;
  }


  /* MOBILE META */

  .zv-ci-mobile-image-meta {
    position: absolute;

    left: 17px;
    right: 17px;
    bottom: 17px;

    z-index: 4;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #fff;

    font-size: 8px;
    font-weight: 600;
    letter-spacing: .13em;
    line-height: 1.2;

    text-transform: uppercase;

    text-shadow: 0 1px 10px rgba(0,0,0,.45);

    animation:
      zvMobileMetaEnter
      .7s
      .22s
      cubic-bezier(.16,.72,.2,1)
      both;
  }

  @keyframes zvMobileMetaEnter {

    from {
      opacity: 0;
      transform: translateY(7px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }

  }

  .zv-ci-mobile-meta-line {
    width: 27px;
    height: 1px;

    flex-shrink: 0;

    background: rgba(255,255,255,.68);

    transform-origin: left center;

    animation:
      zvMobileMetaLine
      .75s
      .3s
      cubic-bezier(.16,.72,.2,1)
      both;
  }

  @keyframes zvMobileMetaLine {

    from {
      width: 0;
      opacity: 0;
    }

    to {
      width: 27px;
      opacity: 1;
    }

  }


  /* MOBILE COPY */

  .zv-ci-mobile-copy {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 20px;

    padding-top: 15px;
  }

  .zv-ci-mobile-copy > span {
    max-width: 220px;

    font-size: 9px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.5;

    text-transform: uppercase;

    opacity: .55;

    animation:
      zvMobileCopyEnter
      .65s
      .18s
      cubic-bezier(.16,.72,.2,1)
      both;
  }

  .zv-ci-mobile-copy > a {
    flex-shrink: 0;

    color: inherit;
    text-decoration: none;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.2;

    text-transform: uppercase;
    white-space: nowrap;

    opacity: .72;

    transition:
      opacity .25s ease,
      transform .25s ease;

    animation:
      zvMobileCopyEnter
      .65s
      .28s
      cubic-bezier(.16,.72,.2,1)
      both;
  }

  @keyframes zvMobileCopyEnter {

    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: .72;
      transform: translateY(0);
    }

  }

  .zv-ci-mobile-copy > a:hover {
    opacity: 1;
    transform: translateX(2px);
  }


  /* MOBILE CLOSING */

  .zv-ci-mobile-closing {
    display: flex;
    flex-direction: column;

    margin-top: 76px;
    padding-top: 25px;

    border-top: 1px solid rgba(127,127,127,.25);
  }

  .zv-ci-mobile-closing span,
  .zv-ci-mobile-closing strong {
    display: block;

    font-size: clamp(27px,9vw,42px);
    font-weight: 800;
    letter-spacing: -.06em;
    line-height: .9;

    text-transform: uppercase;
  }

  .zv-ci-mobile-closing strong {
    margin-top: 2px;
  }

  .zv-ci-mobile-closing a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    width: fit-content;

    margin-top: 27px;

    color: inherit;
    text-decoration: none;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;

    text-transform: uppercase;

    opacity: .62;

    transition:
      opacity .25s ease,
      transform .25s ease;
  }

  .zv-ci-mobile-closing a:hover {
    opacity: 1;
    transform: translateX(3px);
  }

  .zv-ci-mobile-closing a span {
    display: inline;

    font-size: 14px;
    line-height: 1;
    letter-spacing: 0;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:420px) {

  .zv-collections-index {
    padding-left: 15px;
    padding-right: 15px;
  }

  .zv-ci-top {
    margin-bottom: 32px;
  }

  .zv-ci-mobile-row {
    min-height: 59px;

    grid-template-columns:
      30px
      minmax(0,1fr)
      18px;
  }

  .zv-ci-mobile-name {
    font-size: 14px;
  }

  .zv-ci-mobile-image-wrap {
    aspect-ratio: 1.08 / 1;
  }

  .zv-ci-mobile-image-meta {
    left: 14px;
    right: 14px;
    bottom: 14px;

    gap: 8px;

    font-size: 7px;
  }

  .zv-ci-mobile-meta-line {
    width: 23px;
  }

  .zv-ci-mobile-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }

  .zv-ci-mobile-copy > span {
    max-width: 250px;
  }

  .zv-ci-mobile-closing {
    margin-top: 64px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .zv-ci-image,
  .zv-ci-item,
  .zv-ci-arrow,
  .zv-ci-number,
  .zv-ci-name,
  .zv-ci-mobile-row,
  .zv-ci-mobile-name,
  .zv-ci-mobile-row em,
  .zv-ci-mobile-copy > a,
  .zv-ci-mobile-closing a {
    transition: none !important;
  }

  .zv-ci-image.is-changing-out,
  .zv-ci-image.is-changing-in,
  .zv-ci-mobile-image-enter,
  .zv-ci-mobile-image-meta,
  .zv-ci-mobile-meta-line,
  .zv-ci-mobile-copy > span,
  .zv-ci-mobile-copy > a,
  .zv-ci-copy-title,
  .zv-ci-copy-description {
    animation: none !important;
    transition: none !important;
  }

}
}
#fw-section-custom-html-9f050eca-0714-400d-9829-47b99125ad65 {

/* =========================================================
   ZEVANTTE — SHOP ALL
   PREMIUM MASTER CATALOG
   ========================================================= */

#zv-all-products-root {
  width: 100%;
  padding: 0 0 65px;
  box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.zv-shopall-header {
  width: calc(100% - 64px);
  max-width: 1400px;
  margin: 0 auto 32px;
  box-sizing: border-box;
}

.zv-shopall-header__top {
  width: 100%;
  padding: 34px 0 20px;
}

.zv-shopall-heading {
  text-align: left;
}

.zv-shopall-kicker {
  display: block;
  margin: 0 0 10px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.45;
}

.zv-shopall-heading h1 {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  color: inherit;
}

.zv-shopall-heading p {
  margin: 14px 0 0;
  padding: 0;
  font-size: 0.68rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.48;
}


/* =========================================================
   META
   ========================================================= */

.zv-shopall-meta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0 0;
  border-top: 1px solid currentColor;
  opacity: 0.7;
}

.zv-shopall-count {
  flex: 0 0 auto;
  font-size: 0.64rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.13em;
  white-space: nowrap;
}

.zv-shopall-meta-line {
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: 0.1;
}

.zv-shopall-meta-label {
  flex: 0 0 auto;
  font-size: 0.59rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.17em;
  opacity: 0.45;
  white-space: nowrap;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.zv-product-grid {
  width: calc(100% - 64px);
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 40px;
  align-items: start;
  box-sizing: border-box;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.zv-shopall-product {
  width: 100%;
  min-width: 0;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Stagger first products without calc/min */

.zv-shopall-product:nth-child(1) {
  transition-delay: 0s;
}

.zv-shopall-product:nth-child(2) {
  transition-delay: 0.04s;
}

.zv-shopall-product:nth-child(3) {
  transition-delay: 0.08s;
}

.zv-shopall-product:nth-child(4) {
  transition-delay: 0.12s;
}

.zv-shopall-product:nth-child(5) {
  transition-delay: 0.16s;
}

.zv-shopall-product:nth-child(6) {
  transition-delay: 0.20s;
}

.zv-shopall-product:nth-child(n + 7) {
  transition-delay: 0.08s;
}

.zv-shopall-product.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   PRODUCT LINK
   ========================================================= */

.zv-shopall-product__link {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.zv-shopall-product__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: rgba(127, 127, 127, 0.025);
}

.zv-shopall-product__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.zv-shopall-product:hover .zv-shopall-product__media img {
  transform: scale(1.035);
}


/* =========================================================
   PRODUCT INFO
   ========================================================= */

.zv-shopall-product__info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 1px 0;
}

.zv-shopall-product__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 0.76rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: inherit;
}

.zv-shopall-product__price {
  flex: 0 0 auto;
  padding-top: 1px;
  font-size: 0.69rem;
  line-height: 1.3;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0.62;
  color: inherit;
}


/* =========================================================
   TABLET — 3 COLUMNS
   ========================================================= */

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

  .zv-shopall-header {
    width: calc(100% - 40px);
  }

  .zv-product-grid {
    width: calc(100% - 40px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 15px;
    row-gap: 34px;
  }

}


/* =========================================================
   MOBILE — 2 COLUMNS
   ========================================================= */

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

  #zv-all-products-root {
    padding-bottom: 42px;
  }

  .zv-shopall-header {
    width: calc(100% - 28px);
    margin-bottom: 24px;
  }

  .zv-shopall-header__top {
    padding: 25px 0 16px;
  }

  .zv-shopall-kicker {
    margin-bottom: 9px;
    font-size: 8px;
    letter-spacing: 0.19em;
  }

  .zv-shopall-heading h1 {
    font-size: clamp(2.1rem, 11vw, 3rem);
    line-height: 0.9;
  }

  .zv-shopall-heading p {
    margin-top: 11px;
    font-size: 0.55rem;
    letter-spacing: 0.13em;
  }

  .zv-shopall-meta {
    gap: 10px;
    padding-top: 9px;
  }

  .zv-shopall-count {
    font-size: 0.55rem;
    letter-spacing: 0.09em;
  }

  .zv-shopall-meta-label {
    font-size: 0.51rem;
    letter-spacing: 0.11em;
  }

  .zv-product-grid {
    width: calc(100% - 20px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 9px;
    row-gap: 26px;
  }

  .zv-shopall-product__info {
    display: block;
    padding-top: 8px;
  }

  .zv-shopall-product__title {
    font-size: 0.67rem;
    line-height: 1.28;
  }

  .zv-shopall-product__price {
    display: block;
    margin-top: 4px;
    font-size: 0.61rem;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

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

  .zv-shopall-header {
    width: calc(100% - 22px);
  }

  .zv-shopall-heading h1 {
    font-size: 2rem;
  }

  .zv-product-grid {
    width: calc(100% - 14px);
    column-gap: 7px;
    row-gap: 22px;
  }

  .zv-shopall-product__title {
    font-size: 0.63rem;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .zv-shopall-product {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .zv-shopall-product__media img {
    transition: none;
  }

}
}
#fw-section-collection-template-collection-default {

/* =========================================================
   ZEVANTTE — PRODUCT CARD DESIGN
   EDITORIAL / PREMIUM CATALOG
   ========================================================= */


/* =========================================================
   CARD CONTAINER
   ========================================================= */

main
[class*="grid"]:has(
  a[href*="/products/"]
)
> * {

  position: relative;

  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(128, 128, 128, 0.14);

  border-radius:
    2px;

  background:
    transparent;

  box-sizing:
    border-box;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}


/* =========================================================
   CARD HOVER
   ========================================================= */

main
[class*="grid"]:has(
  a[href*="/products/"]
)
> *:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(128, 128, 128, 0.32);

  box-shadow:
    0 14px 35px
    rgba(0, 0, 0, 0.10);
}


/* =========================================================
   PRODUCT LINK
   ========================================================= */

main
[class*="grid"]:has(
  a[href*="/products/"]
)
> * a[href*="/products/"] {

  display:
    block;

  width:
    100%;

  color:
    inherit;

  text-decoration:
    none;
}


/* =========================================================
   IMAGE AREA
   ========================================================= */

main
[class*="grid"]:has(
  a[href*="/products/"]
)
> * a[href*="/products/"] img {

  display:
    block;

  width:
    100%;

  height:
    auto;

  aspect-ratio:
    1 / 1;

  object-fit:
    cover;

  transform:
    scale(1);

  transition:
    transform
    0.7s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

main
[class*="grid"]:has(
  a[href*="/products/"]
)
> *:hover
a[href*="/products/"] img {

  transform:
    scale(1.035);
}


/* =========================================================
   PRODUCT INFO AREA
   ========================================================= */

/*
   Most Fourthwall themes place the title/price
   directly after the image. Give that area a
   deliberate editorial treatment.
*/

main
[class*="grid"]:has(
  a[href*="/products/"]
)
> * a[href*="/products/"] > div {

  box-sizing:
    border-box;
}


/* =========================================================
   TITLE
   ========================================================= */

main
[class*="grid"]:has(
  a[href*="/products/"]
)
> * a[href*="/products/"] h2,

main
[class*="grid"]:has(
  a[href*="/products/"]
)
> * a[href*="/products/"] h3,

main
[class*="grid"]:has(
  a[href*="/products/"]
)
> * a[href*="/products/"] h4 {

  margin:
    0 !important;

  padding:
    13px 13px 0 !important;

  font-family:
    inherit !important;

  font-size:
    0.76rem !important;

  line-height:
    1.3 !important;

  font-weight:
    650 !important;

  letter-spacing:
    0.005em;

  color:
    inherit !important;
}


/* =========================================================
   PRICE
   ========================================================= */

main
[class*="grid"]:has(
  a[href*="/products/"]
)
> * a[href*="/products/"]
[class*="price"],

main
[class*="grid"]:has(
  a[href*="/products/"]
)
> * a[href*="/products/"]
[class*="Price"] {

  display:
    block;

  padding:
    5px 13px 13px !important;

  margin:
    0 !important;

  font-size:
    0.68rem !important;

  line-height:
    1.2 !important;

  font-weight:
    500 !important;

  opacity:
    0.55;
}


/* =========================================================
   SUBTLE TOP ACCENT
   ========================================================= */

main
[class*="grid"]:has(
  a[href*="/products/"]
)
> *::before {

  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    0;

  height:
    1px;

  background:
    currentColor;

  opacity:
    0.65;

  z-index:
    5;

  transition:
    width
    0.45s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


main
[class*="grid"]:has(
  a[href*="/products/"]
)
> *:hover::before {

  width:
    42px;
}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

main
[class*="grid"]:has(
  a[href*="/products/"]
)
> * a[href*="/products/"] {

  position:
    relative;
}


/* =========================================================
   DESKTOP GRID
   ========================================================= */

main
[class*="grid"]:has(
  a[href*="/products/"]
) {

  display:
    grid !important;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    ) !important;

  gap:
    22px 16px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

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

  main
  [class*="grid"]:has(
    a[href*="/products/"]
  ) {

    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      ) !important;

    gap:
      20px 14px !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

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

  main
  [class*="grid"]:has(
    a[href*="/products/"]
  ) {

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;

    gap:
      16px 9px !important;
  }


  main
  [class*="grid"]:has(
    a[href*="/products/"]
  )
  > * {

    border-radius:
      1px;
  }


  main
  [class*="grid"]:has(
    a[href*="/products/"]
  )
  > * a[href*="/products/"]
  h2,

  main
  [class*="grid"]:has(
    a[href*="/products/"]
  )
  > * a[href*="/products/"]
  h3,

  main
  [class*="grid"]:has(
    a[href*="/products/"]
  )
  > * a[href*="/products/"]
  h4 {

    padding:
      9px 9px 0 !important;

    font-size:
      0.65rem !important;

    line-height:
      1.28 !important;
  }


  main
  [class*="grid"]:has(
    a[href*="/products/"]
  )
  > * a[href*="/products/"]
  [class*="price"],

  main
  [class*="grid"]:has(
    a[href*="/products/"]
  )
  > * a[href*="/products/"]
  [class*="Price"] {

    padding:
      4px 9px 9px !important;

    font-size:
      0.59rem !important;
  }

}


/* =========================================================
   SMALL PHONE
   ========================================================= */

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

  main
  [class*="grid"]:has(
    a[href*="/products/"]
  ) {

    gap:
      13px 7px !important;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {

  main
  [class*="grid"]:has(
    a[href*="/products/"]
  )
  > *,

  main
  [class*="grid"]:has(
    a[href*="/products/"]
  )
  > * a[href*="/products/"] img {

    transition:
      none !important;
  }

}
}
#fw-section-custom-html-d3c28fcc-1831-4774-a45f-d3b173d11b29 {

.zv-hero {
  position: relative;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

.zv-hero-stage {
  position: relative;
  width: 100%;
  height: 600px;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  overflow: hidden;
}

.zv-hero-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  height: 500px;
  margin: -250px 0 0 -175px;
  border-radius: 2px;
  overflow: hidden;
  background: #111;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
}

.zv-hero-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.zv-hero-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  width: 92%;
  max-width: 900px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  pointer-events: auto;
  color: rgba(255, 255, 255, .88);
  mix-blend-mode: difference;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility 0s linear .55s;
}

.zv-hero-copy.zv-text-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity .45s ease, visibility 0s linear 0s;
}

.zv-hero-kicker {
  margin: 0 0 14px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .30em;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  opacity: 0;
  transform: translateY(16px) scale(.97);
  filter: blur(4px);
  transition:
    opacity .55s cubic-bezier(.22, 1, .36, 1) .25s,
    transform .65s cubic-bezier(.22, 1, .36, 1) .25s,
    filter .65s cubic-bezier(.22, 1, .36, 1) .25s;
}

.zv-hero-copy h1 {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 90px;
  line-height: .86;
  letter-spacing: -.065em;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .90);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .20);
  overflow: visible;
}

.zv-hero-copy h1 > span {
  display: block;
  white-space: nowrap;
}

.zv-kinetic-letter {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 50px, 0) rotateX(-65deg) rotateZ(2deg) scale(.84);
  filter: blur(7px);
  transform-origin: 50% 100%;
  will-change: transform, opacity, filter;
  transition:
    opacity .55s cubic-bezier(.22, 1, .36, 1),
    transform .75s cubic-bezier(.16, 1, .3, 1),
    filter .75s cubic-bezier(.16, 1, .3, 1);
}

.zv-hero-copy.zv-text-animate .zv-kinetic-letter {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(0deg) scale(1);
  filter: blur(0);
  transition-delay: var(--letter-delay);
}

.zv-hero-copy.zv-text-animate .zv-hero-kicker {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.zv-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
  margin-bottom: 0;
  min-width: 175px;
  padding: 16px 27px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .94);
  color: #111;
  border: 1px solid rgba(255, 255, 255, .90);
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .17em;
  line-height: 1;
  opacity: 0;
  transform: translateY(18px) scale(.95);
  filter: blur(4px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .25);
  mix-blend-mode: normal;
  transition:
    opacity .55s cubic-bezier(.22, 1, .36, 1) .85s,
    transform .65s cubic-bezier(.16, 1, .3, 1) .85s,
    filter .65s cubic-bezier(.16, 1, .3, 1) .85s,
    background .3s ease,
    box-shadow .3s ease;
}

.zv-hero-copy.zv-text-animate .zv-hero-button {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.zv-hero-button:hover {
  background: #111;
  color: #fff;
  border-color: #111;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .30);
}

.zv-hero-button span {
  font-size: 17px;
  line-height: 0;
  transition: transform .3s ease;
}

.zv-hero-button:hover span {
  transform: translateX(4px);
}

.zv-hero-dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 0;
}

.zv-hero-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  cursor: pointer;
  transition:
    transform .25s ease,
    background .25s ease,
    opacity .25s ease;
}

.zv-hero-dot:hover {
  background: rgba(255, 255, 255, .75);
}

.zv-hero-dot.is-active {
  background: #fff;
  transform: scale(1.35);
}


/* TABLET */
@media (max-width: 1000px) {
  .zv-hero-stage {
    height: 540px;
  }

  .zv-hero-copy h1 {
    font-size: 72px;
  }
}


/* MOBILE */
@media (max-width: 700px) {

  .zv-hero {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
  }

  .zv-hero-stage {
    width: 100%;
    height: 400px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    perspective: 1100px;
    perspective-origin: 50% 50%;
    overflow: hidden;
  }

  .zv-hero-card {
    width: 230px;
    height: 330px;
    margin: -165px 0 0 -115px;
  }

  .zv-hero-copy {
    left: 50%;
    top: 48%;
    width: 94%;
    padding: 0 !important;
    margin: 0 !important;
  }

  .zv-hero-kicker {
    margin: 0 0 11px;
    padding: 0;
    font-size: 10px;
    letter-spacing: .24em;
  }

  .zv-hero-copy h1 {
    font-size: 43px;
    line-height: .88;
    letter-spacing: -.055em;
  }

  .zv-hero-button {
    margin-top: 20px;
    margin-bottom: 0;
    min-width: 155px;
    padding: 14px 22px;
    font-size: 10px;
    letter-spacing: .15em;
  }

  .zv-hero-button span {
    font-size: 15px;
  }

  .zv-hero-dots {
    left: 50%;
    bottom: 8px;
    gap: 8px;
    margin: 0;
    padding: 0;
  }

  .zv-hero-dot {
    width: 6px;
    height: 6px;
  }
}


/* SMALL PHONES */
@media (max-width: 380px) {

  .zv-hero {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .zv-hero-stage {
    height: 385px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .zv-hero-copy {
    top: 48%;
    padding: 0 !important;
    margin: 0 !important;
  }

  .zv-hero-copy h1 {
    font-size: 38px;
  }

  .zv-hero-kicker {
    font-size: 9px;
    letter-spacing: .20em;
  }

  .zv-hero-button {
    margin-top: 18px;
    padding: 13px 20px;
  }

  .zv-hero-dots {
    bottom: 6px;
  }
}


/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .zv-kinetic-letter,
  .zv-hero-kicker,
  .zv-hero-button {
    transition: none !important;
    animation: none !important;
  }
}
}
#fw-section-custom-html-d1b16260-ae84-4c79-ad4a-488afa4cd1ae {

/* =========================================================
   ZEVANTTE — JUST DROPPED
   FULL-WIDTH EDITORIAL PRODUCT SYSTEM
   ========================================================= */

.zv-new-drop {
  width: 100%;
  overflow: hidden;
  padding: 58px 0 58px;
  position: relative;
}


/* =========================================================
   HEADING
   ========================================================= */

.zv-drop-heading {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 24px;

  padding: 0 30px 24px;

  box-sizing: border-box;
}

.zv-drop-heading > span {
  flex: 1;

  height: 1px;

  background: currentColor;

  opacity: .18;
}

.zv-heading-center {
  text-align: center;

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;
}


/* =========================================================
   LATEST RELEASES
   ========================================================= */

.zv-heading-eyebrow {
  margin-bottom: 10px;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .30em;

  line-height: 1;

  opacity: .48;

  white-space: nowrap;
}


/* =========================================================
   JUST DROPPED
   ========================================================= */

.zv-drop-heading h2 {
  margin: 0;
  padding: 0;

  white-space: nowrap;

  font-size: 30px;

  line-height: .95;

  font-weight: 750;

  letter-spacing: 2.5px;

  position: relative;

  text-transform: uppercase;
}


/* =========================================================
   VIEW ALL
   ========================================================= */

.zv-view-all {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 11px;

  width: fit-content;

  margin: 0 auto 38px;

  padding: 13px 23px;

  border: 1px solid currentColor;

  border-radius: 999px;

  background: transparent;

  color: inherit;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .28em;

  line-height: 1;

  text-decoration: none;

  opacity: .62;

  transition:
    opacity .3s ease,
    transform .35s cubic-bezier(.16,1,.3,1),
    background-color .3s ease,
    color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


/* =========================================================
   VIEW ALL — VISIBLE HOVER
   ========================================================= */

.zv-view-all:hover {
  opacity: 1;

  transform:
    translateY(-2px);

  background: #f9f1ec;

  color: #000;

  border-color: #f9f1ec;

  box-shadow:
    0 8px 24px rgba(0,0,0,.18);
}

.zv-view-arrow {
  display: inline-block;

  font-size: 13px;

  line-height: 1;

  letter-spacing: 0;

  transition:
    transform .3s cubic-bezier(.16,1,.3,1);
}

.zv-view-all:hover .zv-view-arrow {
  transform:
    translateX(4px);
}


/* =========================================================
   MARQUEE
   ========================================================= */

.zv-marquee {
  width: calc(100% - 60px);

  margin: 0 auto;

  overflow: hidden;

  position: relative;

  cursor: grab;

  touch-action: pan-y;
}

.zv-marquee.is-dragging {
  cursor: grabbing;
}


/* =========================================================
   EDGE FADE
   ========================================================= */

.zv-edge {
  position: absolute;

  top: 0;
  bottom: 0;

  width: 90px;

  z-index: 100;

  pointer-events: none;
}

.zv-edge-left {
  left: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.12),
      transparent
    );
}

.zv-edge-right {
  right: 0;

  background:
    linear-gradient(
      -90deg,
      rgba(0,0,0,.12),
      transparent
    );
}


/* =========================================================
   TRACK
   ========================================================= */

.zv-track {
  display: flex;

  width: max-content;

  will-change: transform;
}


/* =========================================================
   GROUP
   ========================================================= */

.zv-group {
  display: flex;

  flex-shrink: 0;

  gap: 24px;

  padding-right: 24px;

  box-sizing: border-box;
}


/* =========================================================
   CARD
   ========================================================= */

.zv-card {
  position: relative;

  display: block;

  width: 285px;

  flex: 0 0 285px;

  color: inherit;

  text-decoration: none;

  perspective: 1200px;

  transition:
    transform .45s cubic-bezier(.16,1,.3,1);
}

.zv-card:hover {
  transform:
    translateY(-7px);
}


/* =========================================================
   IMAGE STAGE
   ========================================================= */

.zv-image-wrap {
  position: relative;

  width: 100%;

  height: 350px;

  overflow: hidden;

  box-sizing: border-box;

  border-radius: 20px;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255,255,255,.085) 0%,
      rgba(255,255,255,.035) 24%,
      rgba(255,255,255,0) 68%
    );

  isolation: isolate;

  transform:
    perspective(1200px)
    rotateX(var(--zv-rotate-x, 0deg))
    rotateY(var(--zv-rotate-y, 0deg))
    translateZ(0);

  transition:
    transform .18s ease-out,
    box-shadow .45s cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   PREMIUM BORDER
   ========================================================= */

.zv-image-wrap::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 25;

  border-radius: inherit;

  border: 1px solid rgba(255,255,255,.075);

  box-shadow:
    inset 0 0 50px rgba(255,255,255,.025);

  pointer-events: none;

  transition:
    border-color .4s ease,
    box-shadow .4s ease;
}


/* =========================================================
   CINEMATIC LOWER FADE
   ========================================================= */

.zv-image-wrap::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 42%;

  z-index: 12;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.22),
      transparent
    );

  opacity: .5;

  pointer-events: none;

  transition:
    opacity .4s ease;
}


/* =========================================================
   CARD LIGHT
   ========================================================= */

.zv-card-light {
  position: absolute;

  width: 220px;
  height: 220px;

  left: 50%;
  top: 43%;

  transform:
    translate(-50%,-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.10),
      rgba(255,255,255,.025) 38%,
      transparent 70%
    );

  filter: blur(10px);

  opacity: .65;

  z-index: 0;

  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    opacity .4s ease;
}


/* =========================================================
   PRODUCT SHADOW
   ========================================================= */

.zv-product-shadow {
  position: absolute;

  left: 50%;

  bottom: 43px;

  width: 48%;

  height: 24px;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(0,0,0,.32),
      transparent 72%
    );

  filter: blur(8px);

  opacity: .35;

  z-index: 1;

  transition:
    width .55s cubic-bezier(.16,1,.3,1),
    opacity .4s ease,
    transform .55s cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   IMAGES
   ========================================================= */

.zv-image-wrap img {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  padding: 22px;

  box-sizing: border-box;

  background: transparent;

  pointer-events: none;

  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    opacity .4s ease,
    filter .4s ease;
}

.zv-front {
  z-index: 3;

  opacity: 1;

  filter:
    drop-shadow(
      0 18px 24px rgba(0,0,0,.15)
    );
}

.zv-back {
  z-index: 4;

  opacity: 0;

  filter:
    drop-shadow(
      0 18px 24px rgba(0,0,0,.15)
    );
}


/* =========================================================
   CARD NUMBER
   ========================================================= */

.zv-card-number {
  position: absolute;

  top: 15px;
  left: 16px;

  z-index: 30;

  font-size: 9px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: .15em;

  opacity: .35;

  transition:
    opacity .35s ease,
    transform .35s ease;
}

.zv-card-number::before {
  content: "ZV / ";

  opacity: .55;
}

.zv-card:hover .zv-card-number {
  opacity: .8;

  transform: translateX(3px);
}


/* =========================================================
   CORNER DETAIL
   ========================================================= */

.zv-card-corner {
  position: absolute;

  top: 15px;
  right: 16px;

  width: 9px;
  height: 9px;

  z-index: 30;

  border-top: 1px solid rgba(255,255,255,.35);

  border-right: 1px solid rgba(255,255,255,.35);

  opacity: .4;

  transition:
    width .35s ease,
    height .35s ease,
    opacity .35s ease;
}

.zv-card:hover .zv-card-corner {
  width: 12px;
  height: 12px;

  opacity: .75;
}


/* =========================================================
   HOVER CARD
   ========================================================= */

.zv-card:hover .zv-image-wrap {
  box-shadow:
    0 22px 50px rgba(0,0,0,.18),
    0 0 35px rgba(255,255,255,.02);
}

.zv-card:hover .zv-image-wrap::before {
  border-color: rgba(255,255,255,.14);

  box-shadow:
    inset 0 0 45px rgba(255,255,255,.035);
}

.zv-card:hover .zv-image-wrap::after {
  opacity: .62;
}

.zv-card:hover .zv-card-light {
  opacity: .82;

  transform:
    translate(-50%,-50%)
    scale(1.08);
}

.zv-card:hover .zv-product-shadow {
  width: 51%;

  opacity: .40;

  transform:
    translateX(-50%)
    scaleY(.9);
}


/* =========================================================
   PRODUCT ZOOM
   ========================================================= */

.zv-card:hover .zv-front {
  transform:
    scale(1.035)
    translateY(-2px);
}


/* =========================================================
   FRONT → BACK
   ========================================================= */

.zv-card:hover .zv-back {
  opacity: 1;

  transform:
    scale(1.035)
    translateY(-2px);
}

.zv-card:hover .zv-front {
  opacity: 0;
}


/* =========================================================
   PRODUCT INFORMATION
   ========================================================= */

.zv-card-info {
  position: relative;

  min-height: 62px;

  padding: 15px 3px 5px;

  box-sizing: border-box;
}


/* =========================================================
   TITLE
   ========================================================= */

.zv-product-title {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 14px;

  line-height: 1.35;

  font-weight: 600;

  letter-spacing: .015em;

  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    opacity .35s ease;
}


/* =========================================================
   PRICE
   ========================================================= */

.zv-product-price {
  margin-top: 5px;

  font-size: 13px;

  line-height: 1.3;

  opacity: .62;

  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    opacity .35s ease;
}


/* =========================================================
   PRODUCT ACTION
   ========================================================= */

.zv-card-action {
  position: absolute;

  right: 3px;

  bottom: 6px;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .13em;

  opacity: 0;

  transform:
    translateX(8px);

  transition:
    opacity .35s ease,
    transform .35s cubic-bezier(.16,1,.3,1);
}

.zv-card-action span {
  display: inline-block;

  margin-left: 4px;

  transition:
    transform .25s ease;
}

.zv-card:hover .zv-card-action {
  opacity: .65;

  transform:
    translateX(0);
}

.zv-card:hover .zv-card-action span {
  transform:
    translateX(3px);
}


/* =========================================================
   INFO HOVER
   ========================================================= */

.zv-card:hover .zv-product-title {
  transform:
    translateX(3px);

  opacity: 1;
}

.zv-card:hover .zv-product-price {
  transform:
    translateX(3px);

  opacity: .9;
}


/* =========================================================
   NEW SEASON — MOVE DIFFERENT
   ========================================================= */

.zv-drop-footer {
  display: flex;

  align-items: center;

  gap: 18px;

  width: 100%;

  padding:
    38px 30px 0;

  box-sizing: border-box;
}

.zv-footer-line {
  flex: 1;

  height: 1px;

  background: currentColor;

  opacity: .14;
}

.zv-footer-text {
  font-size: 10px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: .28em;

  white-space: nowrap;

  opacity: .48;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .zv-new-drop {
    padding: 35px 0 45px;
  }

  .zv-drop-heading {
    gap: 12px;

    padding:
      0 16px 20px;
  }

  .zv-heading-eyebrow {
    font-size: 7px;

    letter-spacing: .23em;

    margin-bottom: 8px;
  }

  .zv-drop-heading h2 {
    font-size: 22px;

    letter-spacing: 1.8px;
  }

  .zv-view-all {
    margin-bottom: 28px;

    padding:
      12px 19px;

    font-size: 8px;

    letter-spacing: .23em;

    gap: 8px;
  }

  .zv-view-arrow {
    font-size: 11px;
  }

  .zv-view-all:hover {
    background: #f9f1ec;

    color: #000;

    border-color: #f9f1ec;

    box-shadow:
      0 6px 18px rgba(0,0,0,.16);
  }

  .zv-marquee {
    width: 100%;

    margin: 0;
  }

  .zv-group {
    gap: 15px;

    padding-right: 15px;
  }

  .zv-card {
    width: 195px;

    flex: 0 0 195px;
  }

  .zv-image-wrap {
    height: 250px;

    border-radius: 15px;
  }

  .zv-image-wrap img {
    padding: 16px;
  }

  .zv-card-light {
    width: 150px;
    height: 150px;
  }

  .zv-product-shadow {
    bottom: 30px;
  }

  .zv-card-info {
    padding-top: 11px;
  }

  .zv-product-title {
    font-size: 13px;
  }

  .zv-product-price {
    font-size: 12px;
  }

  .zv-card-action {
    display: none;
  }

  .zv-drop-footer {
    gap: 10px;

    padding:
      28px 16px 0;
  }

  .zv-footer-text {
    font-size: 7px;

    letter-spacing: .20em;
  }

  .zv-edge {
    width: 35px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .zv-card,
  .zv-image-wrap,
  .zv-image-wrap img,
  .zv-card-light,
  .zv-product-shadow,
  .zv-product-title,
  .zv-product-price,
  .zv-card-action,
  .zv-view-all {
    transition: none !important;
  }
}
}
#fw-section-custom-html-9a7345e0-bc3e-465d-a0fd-8ee943afa77b {

.zv-campaign {
  position: relative;
  width: 100%;
  height: 720px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

.zv-campaign-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.zv-campaign-image-wrap {
  position: absolute;

  left: -18%;
  top: -18%;

  width: 136%;
  height: 136%;

  transform: translate3d(0, 0, 0);

  will-change: transform;

  transform-origin: center center;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.zv-campaign-media img {
  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 100%;

  max-width: none;

  display: block;

  object-fit: cover;

  object-position: center center;

  user-select: none;

  -webkit-user-drag: none;

  transform:
    scale(1.06)
    rotate(-0.1deg);

  transform-origin: center center;

  will-change: transform;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}


/* =========================================================
   CINEMATIC VIGNETTE
   ========================================================= */

.zv-campaign-vignette {
  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      transparent 42%,
      rgba(0, 0, 0, 0.12) 68%,
      rgba(0, 0, 0, 0.42) 100%
    );
}


/* =========================================================
   SOFT LIGHT
   ========================================================= */

.zv-campaign-light {
  position: absolute;

  inset: 0;

  z-index: 3;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 48% 42%,
      rgba(255, 255, 255, 0.08),
      transparent 42%
    );

  mix-blend-mode: screen;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.zv-campaign-overlay {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 5;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding:
    34px
    42px
    30px;

  box-sizing: border-box;

  color: #fff;

  pointer-events: none;
}


/* =========================================================
   TOP / BOTTOM
   ========================================================= */

.zv-campaign-top,
.zv-campaign-bottom {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.65);
}

.zv-campaign-bottom {
  opacity: 0.9;
}


/* =========================================================
   CENTER
   ========================================================= */

.zv-campaign-center {
  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  width: 90%;

  max-width: 760px;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  pointer-events: auto;
}


/* =========================================================
   SMALL TITLE
   ========================================================= */

.zv-campaign-small {
  margin-bottom: 12px;

  font-size: 18px;

  font-weight: 600;

  letter-spacing: 0.42em;

  text-transform: uppercase;

  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.75);
}


/* =========================================================
   MAIN HEADLINE
   ========================================================= */

.zv-campaign-headline {
  margin: 0;

  font-size: 92px;

  line-height: 0.88;

  font-weight: 800;

  letter-spacing: -0.055em;

  text-transform: uppercase;

  color:
    rgba(255, 255, 255, 0.98);

  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75),
    0 3px 8px rgba(0, 0, 0, 0.65),
    0 8px 25px rgba(0, 0, 0, 0.40),
    0 0 14px rgba(255, 255, 255, 0.22),
    0 0 32px rgba(255, 255, 255, 0.12);
}


/* =========================================================
   DECODE TEXT
   ========================================================= */

.zv-decode-text {
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      rgba(255, 255, 255, 0.96) 46%,
      rgba(255, 255, 255, 0.82) 100%
    );

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;
}


/* =========================================================
   BRAND
   ========================================================= */

.zv-campaign-brand {
  margin-top: 20px;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.48em;

  text-transform: uppercase;

  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.75);
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.zv-campaign-description {
  margin-top: 15px;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.32em;

  text-transform: uppercase;

  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.75);
}


/* =========================================================
   SUBTITLE
   ========================================================= */

.zv-campaign-subtitle {
  margin-top: 9px;

  font-size: 9px;

  font-weight: 500;

  letter-spacing: 0.24em;

  text-transform: uppercase;

  opacity: 0.92;

  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.75);
}


/* =========================================================
   BUTTON
   ========================================================= */

.zv-campaign-button {
  margin-top: 26px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 178px;

  height: 42px;

  padding: 0 25px;

  border:
    1px solid
    rgba(255, 255, 255, 0.75);

  background:
    rgba(0, 0, 0, 0.18);

  color: #fff;

  text-decoration: none;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.20em;

  text-transform: uppercase;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.zv-campaign-button:hover {
  background: #fff;

  color: #000;

  border-color: #fff;

  transform:
    translateY(-2px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .zv-campaign {
    height: 620px;
  }

  .zv-campaign-image-wrap {
    left: -22%;
    top: -22%;

    width: 144%;
    height: 144%;
  }

  .zv-campaign-overlay {
    padding:
      24px
      20px
      22px;
  }

  .zv-campaign-top,
  .zv-campaign-bottom {
    font-size: 8px;

    letter-spacing: 0.18em;
  }

  .zv-campaign-small {
    font-size: 13px;

    letter-spacing: 0.34em;

    margin-bottom: 8px;
  }

  .zv-campaign-headline {
    font-size: 58px;

    letter-spacing: -0.05em;
  }

  .zv-campaign-brand {
    margin-top: 15px;

    font-size: 10px;

    letter-spacing: 0.38em;
  }

  .zv-campaign-description {
    margin-top: 12px;

    font-size: 9px;

    letter-spacing: 0.22em;
  }

  .zv-campaign-subtitle {
    margin-top: 8px;

    font-size: 7px;

    letter-spacing: 0.17em;
  }

  .zv-campaign-button {
    margin-top: 22px;

    min-width: 165px;

    height: 40px;

    padding: 0 20px;

    font-size: 9px;

    letter-spacing: 0.17em;
  }

}
}
#fw-section-custom-html-cd689f43-edbb-449b-a41c-029e8a38bda3 {

/* =========================================================
   ZEVANTTE — COLLECTIONS
   PREMIUM EDITORIAL COLLECTION SLIDER
   ========================================================= */

.zv-collections {
  width: 100%;
  position: relative;
  overflow: hidden;

  padding: 58px 0 68px;

  background: transparent;

  box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.zv-collections-header {
  width: 100%;

  padding: 0 5%;
  margin-bottom: 28px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  box-sizing: border-box;
}


.zv-collections-title-wrap {
  display: flex;
  flex-direction: column;
}


.zv-collections-kicker {
  display: block;

  margin-bottom: 7px;

  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.28em;

  color: #111;
}


.zv-collections-title-wrap h2 {
  margin: 0;

  font-size: 31px;
  line-height: 1;

  font-weight: 800;

  letter-spacing: -0.045em;

  color: #111;

  text-transform: uppercase;
}


/* =========================================================
   HEADER META
   ========================================================= */

.zv-collections-meta {
  display: flex;
  align-items: center;

  gap: 25px;
}


.zv-collections-counter {
  display: flex;
  align-items: center;

  gap: 9px;

  font-size: 11px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.08em;

  color: #111;
}


.zv-counter-line {
  width: 24px;
  height: 1px;

  display: block;

  background: #111;
}


.zv-collections-numbers {
  display: flex;
  align-items: center;

  gap: 12px;
}


.zv-number {
  font-size: 11px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.06em;

  color: #111;

  opacity: 0.28;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}


.zv-number.active {
  opacity: 1;
}


/* =========================================================
   COLLECTION WINDOW
   ========================================================= */

.zv-collections-window {
  width: 100%;

  overflow: hidden;

  box-sizing: border-box;
}


.zv-collections-track {
  width: 200%;

  display: flex;

  transform: translate3d(0, 0, 0);

  transition:
    transform 0.75s cubic-bezier(0.77, 0, 0.175, 1);

  will-change: transform;

  touch-action: pan-y;

  box-sizing: border-box;
}


.zv-collections-slide {
  width: 50%;
  flex: 0 0 50%;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  padding: 0 5%;

  box-sizing: border-box;
}


/* =========================================================
   COLLECTION CARD
   ========================================================= */

.zv-collection-card {
  position: relative;

  display: block;

  width: 100%;
  height: 390px;

  overflow: hidden;

  text-decoration: none;

  background: #111;

  box-sizing: border-box;
}


.zv-collection-card img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transform: scale(1.01);

  transition:
    transform 0.9s cubic-bezier(0.2, 0.65, 0.2, 1);
}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.zv-card-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04) 20%,
      rgba(0, 0, 0, 0.12) 45%,
      rgba(0, 0, 0, 0.78) 100%
    );

  z-index: 1;

  transition:
    background 0.4s ease;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.zv-card-content {
  position: absolute;

  left: 25px;
  right: 25px;
  bottom: 24px;

  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.zv-card-number {
  margin-bottom: 9px;

  font-size: 10px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.18em;

  color: #fff;

  opacity: 0.72;
}


.zv-card-content h3 {
  margin: 0;

  max-width: 100%;

  font-size: 22px;
  line-height: 1.02;

  font-weight: 800;

  letter-spacing: -0.025em;

  color: #fff;

  text-transform: uppercase;
}


.zv-card-link {
  margin-top: 14px;

  font-size: 9px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.18em;

  color: #fff;

  opacity: 0.85;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}


/* =========================================================
   DESKTOP HOVER
   ========================================================= */

@media (min-width: 769px) {

  .zv-collection-card:hover img {
    transform: scale(1.06);
  }


  .zv-collection-card:hover .zv-card-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.04) 10%,
        rgba(0, 0, 0, 0.18) 42%,
        rgba(0, 0, 0, 0.86) 100%
      );
  }


  .zv-collection-card:hover .zv-card-link {
    opacity: 1;

    transform: translateX(5px);
  }

}


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

.zv-collections-navigation {
  width: 90%;

  margin: 27px auto 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;

  box-sizing: border-box;
}


.zv-collections-progress {
  flex: 1;

  max-width: 480px;
}


.zv-progress-bar {
  position: relative;

  display: block;

  width: 100%;
  height: 1px;

  background: rgba(17, 17, 17, 0.16);

  overflow: hidden;
}


.zv-progress-fill {
  display: block;

  width: 50%;
  height: 100%;

  background: #111;

  transition:
    width 0.75s cubic-bezier(0.77, 0, 0.175, 1);
}


/* =========================================================
   NEXT / BACK BUTTON
   ========================================================= */

.zv-next-collections {
  position: relative;

  min-width: 190px;
  min-height: 48px;

  padding: 0 25px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  border: 1px solid #111;

  background: #111;

  color: #fff;

  font-family: inherit;

  font-size: 10px;
  line-height: 1;

  font-weight: 800;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  cursor: pointer;

  appearance: none;

  -webkit-appearance: none;

  box-sizing: border-box;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


.zv-button-text {
  position: relative;

  z-index: 2;

  color: inherit;
}


.zv-button-arrow {
  position: relative;

  z-index: 2;

  color: inherit;

  font-size: 14px;

  line-height: 1;

  transition:
    transform 0.25s ease;
}


/* =========================================================
   BUTTON HOVER
   HIGH VISIBILITY
   ========================================================= */

.zv-next-collections:hover,
.zv-next-collections:focus,
.zv-next-collections:active {
  background: #111 !important;

  color: #fff !important;

  border-color: #111 !important;

  opacity: 1 !important;
}


.zv-next-collections:hover .zv-button-text,
.zv-next-collections:hover .zv-button-arrow,
.zv-next-collections:focus .zv-button-text,
.zv-next-collections:focus .zv-button-arrow,
.zv-next-collections:active .zv-button-text,
.zv-next-collections:active .zv-button-arrow {
  color: #fff !important;
}


.zv-next-collections:hover .zv-button-arrow {
  transform: translateX(4px);
}


.zv-next-collections:active {
  transform: translateY(1px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .zv-collections {
    padding: 45px 0 55px;
  }


  .zv-collections-header {
    padding: 0 5%;

    margin-bottom: 22px;

    align-items: flex-end;
  }


  /* KEEP TITLE ON ONE ROW */

  .zv-collections-title-wrap h2 {
    font-size: 21px;

    line-height: 1;

    white-space: nowrap;

    letter-spacing: -0.04em;
  }


  .zv-collections-kicker {
    font-size: 9px;

    margin-bottom: 6px;
  }


  .zv-collections-meta {
    gap: 14px;
  }


  .zv-collections-counter {
    font-size: 10px;

    gap: 7px;
  }


  .zv-counter-line {
    width: 17px;
  }


  .zv-collections-numbers {
    display: none;
  }


  .zv-collections-slide {
    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

    padding: 0 5%;
  }


  .zv-collection-card {
    height: 315px;
  }


  .zv-card-content {
    left: 14px;
    right: 14px;
    bottom: 16px;
  }


  .zv-card-number {
    font-size: 8px;

    margin-bottom: 7px;
  }


  .zv-card-content h3 {
    font-size: 14px;

    line-height: 1.04;
  }


  .zv-card-link {
    margin-top: 9px;

    font-size: 7px;

    letter-spacing: 0.13em;
  }


  /* Disable hover-like effects on mobile */

  .zv-collection-card:hover img {
    transform: scale(1.01);
  }


  .zv-collection-card:hover .zv-card-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.04) 20%,
        rgba(0, 0, 0, 0.12) 45%,
        rgba(0, 0, 0, 0.78) 100%
      );
  }


  .zv-collection-card:hover .zv-card-link {
    opacity: 0.85;

    transform: none;
  }


  .zv-collections-navigation {
    width: 90%;

    margin-top: 22px;

    gap: 14px;

    align-items: center;
  }


  .zv-collections-progress {
    max-width: none;
  }


  .zv-next-collections {
    min-width: 165px;

    min-height: 48px;

    padding: 0 18px;

    font-size: 9px;

    letter-spacing: 0.13em;

    gap: 9px;
  }


  .zv-button-arrow {
    font-size: 13px;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

  .zv-collections {
    padding-top: 38px;
  }


  .zv-collections-title-wrap h2 {
    font-size: 18px;

    white-space: nowrap;
  }


  .zv-collections-header {
    margin-bottom: 18px;
  }


  .zv-collection-card {
    height: 280px;
  }


  .zv-card-content {
    left: 11px;
    right: 11px;
    bottom: 13px;
  }


  .zv-card-content h3 {
    font-size: 11px;
  }


  .zv-card-number {
    font-size: 7px;
  }


  .zv-card-link {
    font-size: 6px;

    margin-top: 7px;
  }


  .zv-next-collections {
    min-width: 150px;

    padding: 0 14px;

    font-size: 8px;
  }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 340px) {

  .zv-collections-slide {
    gap: 6px;
  }


  .zv-collection-card {
    height: 260px;
  }


  .zv-card-content h3 {
    font-size: 10px;
  }


  .zv-next-collections {
    min-width: 140px;

    font-size: 7px;
  }

}
}
#fw-section-custom-html-fd2c64f4-8297-48d9-a02c-9cf30372b839 {

/* =========================================================
   ZEVANTTE — THE ZEVANTTE STANDARD
   PREMIUM COMPACT BENEFITS SECTION
   ========================================================= */

.zv-features {
  width: 100%;
  background: transparent;
  color: inherit;

  padding: 8px 30px 30px;

  font-family: inherit;

  overflow: hidden;
  box-sizing: border-box;
}


/* =========================================================
   EDITORIAL HEADING
   ========================================================= */

.zv-features__heading {
  width: 100%;
  max-width: 1250px;

  margin: 0 auto 16px;

  text-align: left;
}

.zv-features__eyebrow {
  position: relative;

  display: inline-block;

  margin: 0;
  padding: 0 0 7px;

  color: inherit;

  font-family: inherit;

  font-size: 11px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.20em;

  text-transform: uppercase;
}


/* subtle editorial underline */

.zv-features__eyebrow::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 32px;
  height: 1px;

  background: currentColor;

  opacity: 0.45;
}


/* =========================================================
   FEATURES ROW
   ========================================================= */

.zv-features__inner {
  width: 100%;
  max-width: 1250px;

  margin: 0 auto;

  display: flex;
  align-items: stretch;
  justify-content: center;
}


/* =========================================================
   FEATURE
   ========================================================= */

.zv-feature {
  position: relative;

  flex: 1 1 0;
  min-width: 0;

  display: grid;

  grid-template-columns: 64px 1fr;
  grid-template-rows: auto auto;

  column-gap: 15px;

  align-items: center;

  padding: 4px 28px;

  text-align: left;

  opacity: 0;

  transform: translate3d(0, 16px, 0);

  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   REVEAL DELAYS
   ========================================================= */

.zv-feature:nth-of-type(1) {
  transition-delay: 0s;
}

.zv-feature:nth-of-type(3) {
  transition-delay: 0.10s;
}

.zv-feature:nth-of-type(5) {
  transition-delay: 0.20s;
}

.zv-feature.is-visible {
  opacity: 1;

  transform: translate3d(0, 0, 0);
}


/* =========================================================
   ICON
   ========================================================= */

.zv-feature__icon {
  width: 64px;
  height: 64px;

  margin: 0;

  grid-column: 1;
  grid-row: 1 / 3;

  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.zv-feature__icon img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;

  filter:
    drop-shadow(
      0 6px 14px rgba(0, 0, 0, 0.10)
    );

  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.zv-feature:hover .zv-feature__icon {
  transform: translate3d(0, -2px, 0);
}

.zv-feature:hover .zv-feature__icon img {
  transform: scale(1.05) rotate(1deg);

  filter:
    drop-shadow(
      0 10px 18px rgba(0, 0, 0, 0.15)
    );
}


/* =========================================================
   TITLE
   ========================================================= */

.zv-feature__title {
  grid-column: 2;
  grid-row: 1;

  margin: 0;

  color: inherit;

  font-family: inherit;

  font-size: 0.92rem;
  line-height: 1.2;

  font-weight: 700;

  letter-spacing: 0.02em;

  text-transform: uppercase;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.zv-feature__text {
  grid-column: 2;
  grid-row: 2;

  max-width: 28ch;

  margin: 4px 0 0;

  color: inherit;

  opacity: 0.62;

  font-family: inherit;

  font-size: 0.76rem;

  line-height: 1.35;

  font-weight: 400;
}


/* =========================================================
   DESKTOP DIVIDERS
   ========================================================= */

.zv-features__divider {
  flex: 0 0 1px;

  width: 1px;

  margin: 8px 0;

  background: currentColor;

  opacity: 0.09;
}


/* =========================================================
   TABLET
   ========================================================= */

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

  .zv-features {
    padding: 8px 20px 26px;
  }

  .zv-features__heading {
    margin-bottom: 13px;
  }

  .zv-features__eyebrow {
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  .zv-feature {
    grid-template-columns: 56px 1fr;

    column-gap: 12px;

    padding: 4px 18px;
  }

  .zv-feature__icon {
    width: 56px;
    height: 56px;
  }

  .zv-feature__title {
    font-size: 0.86rem;
  }

  .zv-feature__text {
    font-size: 0.72rem;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

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

  .zv-features {
    padding: 6px 16px 20px;
  }

  .zv-features__heading {
    margin-bottom: 10px;
  }

  .zv-features__eyebrow {
    font-size: 10px;

    letter-spacing: 0.16em;

    padding-bottom: 6px;
  }

  .zv-features__eyebrow::after {
    width: 26px;
  }

  .zv-features__inner {
    flex-direction: column;

    gap: 0;
  }

  .zv-feature {
    width: 100%;

    display: grid;

    grid-template-columns: 58px 1fr;
    grid-template-rows: auto auto;

    column-gap: 14px;

    align-items: center;

    text-align: left;

    padding: 8px 6px;

    box-sizing: border-box;
  }

  .zv-feature__icon {
    width: 58px;
    height: 58px;

    margin: 0;

    grid-column: 1;
    grid-row: 1 / 3;
  }

  .zv-feature__title {
    grid-column: 2;
    grid-row: 1;

    margin: 0;

    font-size: 0.90rem;

    line-height: 1.2;
  }

  .zv-feature__text {
    grid-column: 2;
    grid-row: 2;

    max-width: none;

    margin: 4px 0 0;

    font-size: 0.74rem;

    line-height: 1.35;

    opacity: 0.62;
  }


  /* MOBILE DIVIDER */

  .zv-feature + .zv-features__divider {
    display: block;

    width: calc(100% - 78px);

    height: 1px;

    max-width: none;

    margin: 2px 0 2px 72px;

    flex: none;

    opacity: 0.08;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

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

  .zv-features {
    padding: 5px 14px 17px;
  }

  .zv-features__heading {
    margin-bottom: 8px;
  }

  .zv-features__eyebrow {
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .zv-feature {
    grid-template-columns: 50px 1fr;

    column-gap: 12px;

    padding: 7px 4px;
  }

  .zv-feature__icon {
    width: 50px;
    height: 50px;
  }

  .zv-feature__title {
    font-size: 0.84rem;
  }

  .zv-feature__text {
    font-size: 0.69rem;
  }

  .zv-feature + .zv-features__divider {
    width: calc(100% - 62px);

    margin-left: 62px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .zv-feature {
    opacity: 1;

    transform: none;

    transition: none;
  }

  .zv-feature__icon,
  .zv-feature__icon img {
    transition: none;
  }
}
}





#fw-section-header {
--color-primary: #f9f5f5;
--color-primary-rgb: 249, 245, 245;
--color-background: #070202;
--color-background-rgb: 7, 2, 2;
--color-on-background: #f5eded;
--color-on-background-rgb: 245, 237, 237;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-product-image-background: #e9e9e7;
--color-background-brightness: 3;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #f9f5f5;
--primary-btn-text: #000000;
--primary-btn-border-color: #f5eded;
--secondary-btn-bg: transparent;
--secondary-btn-text: #f5eded;
--secondary-btn-border-color: #f5eded;
/* =========================================================
   ZEVANTTE — CLEAN PROFESSIONAL HEADER
   ========================================================= */


/* =========================================================
   HEADER COLORS
   ========================================================= */

header .header__nav .header__link,
header .header__nav .header__list-item > .header__link,
header .header__logo-link,
header .header__logo .text-logo,
header .header__icons .header__link,
header .header__icons svg,
header .header__icons path,
header .header__mobile-menu .header__icon,
header .header__mobile-menu svg,
header .header__mobile-menu path {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* =========================================================
   ZEVANTTE LOGO
   ========================================================= */

/* Text logo */

header .header__logo,
header .header__logo-link,
header .header__logo .text-logo {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  fill: #000 !important;
  opacity: 1 !important;
}


/* If ZEVANTTE is an image/SVG logo */

header .header__logo img,
header .header__logo-link img {
  filter: brightness(0) !important;
  opacity: 1 !important;
}


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

header .header__nav .header__list {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  column-gap: 30px !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* Every navigation item behaves identically */

header .header__nav .header__list-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* Every navigation link */

header .header__nav .header__list-item > .header__link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 1 !important;
  vertical-align: middle !important;

  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}


/* =========================================================
   SHOP
   ========================================================= */

/* Hide original SHOP text but keep navigation link */

header .header__nav .header__list-item:first-child > .header__link {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 34px !important;
  min-width: 34px !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 1 !important;

  text-indent: -9999px !important;
  overflow: visible !important;
}


/* Create SHOP */

header .header__nav .header__list-item:first-child > .header__link::after {
  content: "SHOP" !important;

  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  transform: translate(-50%, -50%) !important;

  display: block !important;

  width: max-content !important;
  white-space: nowrap !important;

  color: #000 !important;
  -webkit-text-fill-color: #000 !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: 1 !important;

  text-indent: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;
}


/* =========================================================
   HOVER
   ========================================================= */

header .header__nav .header__link:hover,
header .header__logo-link:hover,
header .header__icons .header__link:hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 1 !important;
}


header .header__nav .header__link:hover::after {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}


/* =========================================================
   ICONS
   ========================================================= */

header .header__icons svg,
header .header__icons path {
  fill: #000 !important;
  stroke: #000 !important;
  color: #000 !important;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-menu .mobile-menu__link,
.mobile-menu .mobile-menu__link-icon,
.mobile-menu svg,
.mobile-menu path,
.mobile-menu .mobile-menu__link:hover,
.mobile-menu .mobile-menu__link:hover svg,
.mobile-menu .mobile-menu__link:hover path {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* =========================================================
   CURRENCY DROPDOWN
   ========================================================= */

/* Currency dropdown panel */

header .header__list-item:has(
  > .header__link[aria-label*="Currency selector"]
) .header__dropdown {
  background: #fff !important;
  color: #000 !important;

  opacity: 1 !important;
  visibility: visible !important;

  z-index: 999999 !important;

  border: 1px solid #e5e5e5 !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}


/* Currency dropdown inner list */

header .header__list-item:has(
  > .header__link[aria-label*="Currency selector"]
) .header__dropdown-inner {
  background: #fff !important;
  color: #000 !important;

  opacity: 1 !important;
  visibility: visible !important;

  margin: 0 !important;
  padding: 6px 0 !important;
}


/* Currency rows */

header .header__list-item:has(
  > .header__link[aria-label*="Currency selector"]
) .header__dropdown-item {
  background: #fff !important;
  color: #000 !important;

  opacity: 1 !important;
  visibility: visible !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* Currency links
   USD / EUR / CAD / GBP / AUD / NZD / SEK / NOK /
   DKK / PLN / INR / JPY / MYR / SGD / MXN / BRL / CHF
*/

header .header__list-item:has(
  > .header__link[aria-label*="Currency selector"]
) .header__dropdown-link {
  display: block !important;

  background: #fff !important;

  color: #000 !important;
  -webkit-text-fill-color: #000 !important;

  opacity: 1 !important;
  visibility: visible !important;

  padding: 8px 14px !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1.4 !important;

  white-space: nowrap !important;
}


/* Currency hover */

header .header__list-item:has(
  > .header__link[aria-label*="Currency selector"]
) .header__dropdown-link:hover {
  background: #f2f2f2 !important;

  color: #000 !important;
  -webkit-text-fill-color: #000 !important;

  opacity: 1 !important;
  visibility: visible !important;
}


/* Keep currency selector above everything */

header .header__list-item:has(
  > .header__link[aria-label*="Currency selector"]
) {
  position: relative !important;
  z-index: 999999 !important;
}


/* =========================================================
   CURRENCY DROPDOWN SCROLLBAR
   ========================================================= */

/* Firefox */

header .header__list-item:has(
  > .header__link[aria-label*="Currency selector"]
) .header__dropdown-inner {
  scrollbar-width: auto !important;
  scrollbar-color: #777 #e5e5e5 !important;
}


/* Chrome / Edge / Safari */

header .header__list-item:has(
  > .header__link[aria-label*="Currency selector"]
) .header__dropdown-inner::-webkit-scrollbar {
  width: 8px !important;
}


/* Scrollbar track */

header .header__list-item:has(
  > .header__link[aria-label*="Currency selector"]
) .header__dropdown-inner::-webkit-scrollbar-track {
  background: #e5e5e5 !important;

  border-radius: 10px !important;
}


/* Scrollbar thumb */

header .header__list-item:has(
  > .header__link[aria-label*="Currency selector"]
) .header__dropdown-inner::-webkit-scrollbar-thumb {
  background: #777 !important;

  border-radius: 10px !important;

  border: 2px solid #e5e5e5 !important;
}


/* Scrollbar hover */

header .header__list-item:has(
  > .header__link[aria-label*="Currency selector"]
) .header__dropdown-inner::-webkit-scrollbar-thumb:hover {
  background: #333 !important;
}


/* =========================================================
   HIDE YOUTUBE
   ========================================================= */

header a[href*="youtube" i],
aside a[href*="youtube" i],
[aria-label*="youtube" i],
[title*="youtube" i],
[class*="youtube" i] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
}


#fw-section-product-product-zevantte-product-editorial {

/* =========================================================
   ZEVANTTE — PRODUCT TEMPLATE V8
   PRODUCT INFORMATION HIERARCHY
   ========================================================= */


/* =========================================================
   GLOBAL
   ========================================================= */

* {
  box-sizing: border-box !important;
}

html {
  scroll-behavior: smooth !important;
}

body {
  overflow-x: hidden !important;
}


/* =========================================================
   PRODUCT
   ========================================================= */

[class*="product" i] {
  background: transparent !important;
  color: #111 !important;
}

[class*="product" i] a {
  color: inherit !important;
  text-decoration: none !important;
}


/* =========================================================
   GALLERY
   NATIVE FOURTHWALL HOVER PRESERVED
   ========================================================= */

[class*="gallery" i] {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

[class*="gallery" i]::before {
  content: "ZEVANTTE / PRODUCT" !important;
  position: absolute !important;
  top: 15px !important;
  left: 15px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  color: rgba(17,17,17,.68) !important;
  mix-blend-mode: multiply !important;
}

[class*="gallery" i] img {
  display: block !important;
  width: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: cover !important;
}

/*
   IMPORTANT:
   No transform is applied here.
   Fourthwall's native front/back hover stays intact.
*/

[class*="gallery" i] img:hover {
  opacity: .985 !important;
}


/* =========================================================
   PRODUCT INFORMATION AREA
   ========================================================= */

[class*="product" i] {
  --zv-black: #111;
  --zv-muted: #555;
  --zv-line: rgba(17,17,17,.15);
}


/* =========================================================
   PRODUCT IDENTITY LABEL
   ========================================================= */

[class*="product" i] [class*="title" i]::before {
  content: "ZEVANTTE / ORIGINALS" !important;
  display: block !important;
  margin-bottom: 17px !important;
  color: #777 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  letter-spacing: .16em !important;
}


/* =========================================================
   TITLE
   ========================================================= */

[class*="title" i] {
  color: #111 !important;
  font-size: clamp(36px, 3.5vw, 60px) !important;
  font-weight: 700 !important;
  line-height: .92 !important;
  letter-spacing: -.06em !important;
  margin-top: 0 !important;
  margin-bottom: 15px !important;
  max-width: 680px !important;
}


/* =========================================================
   PRICE
   ========================================================= */

[class*="price" i] {
  color: #111 !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -.015em !important;
  margin-top: 0 !important;
  margin-bottom: 28px !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

[class*="product" i] [class*="description" i] {
  max-width: 555px !important;
  color: #3d3d3d !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
  letter-spacing: -.003em !important;
}

[class*="product" i] [class*="description" i] p {
  margin-bottom: 11px !important;
}

[class*="product" i] p {
  color: #3d3d3d !important;
}


/* =========================================================
   OPTION SECTION
   ========================================================= */

[class*="option" i] {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   OPTION BUTTONS
   ========================================================= */

[class*="option" i] button,
[class*="option" i] label {
  min-height: 46px !important;
  border-radius: 0 !important;
  border: 1px solid rgba(17,17,17,.25) !important;
  background: transparent !important;
  color: #111 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease !important;
}

[class*="option" i] button:hover,
[class*="option" i] label:hover {
  background: rgba(17,17,17,.035) !important;
  border-color: #111 !important;
}

[class*="option" i] button[aria-selected="true"],
[class*="option" i] button[aria-checked="true"],
[class*="option" i] label:has(input:checked) {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}


/* =========================================================
   SIZE SELECTOR
   ========================================================= */

[class*="product" i] input[type="radio"] {
  accent-color: #111 !important;
}

[class*="product" i] input[type="radio"] + label {
  border-radius: 0 !important;
}


/* =========================================================
   SIZE GUIDE / SELECT
   ========================================================= */

[class*="product" i] select {
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 0 !important;
  border: 1px solid rgba(17,17,17,.28) !important;
  background: transparent !important;
  color: #111 !important;
  padding: 0 15px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  outline: none !important;
  box-shadow: none !important;
}

[class*="product" i] select:focus {
  border-color: #111 !important;
  box-shadow: 0 0 0 1px #111 !important;
}


/* =========================================================
   ALL BUTTONS
   ========================================================= */

[class*="product" i] button {
  font-family: inherit !important;
  transition:
    background-color .22s ease,
    color .22s ease,
    border-color .22s ease,
    transform .22s ease !important;
}


/* =========================================================
   ADD TO CART
   ========================================================= */

[class*="product" i] button[type="submit"],
[class*="product" i] [class*="cart" i] button {
  width: 100% !important;
  min-height: 57px !important;
  border-radius: 0 !important;
  border: 1px solid #111 !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: .085em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

[class*="product" i] button[type="submit"]:hover,
[class*="product" i] [class*="cart" i] button:hover {
  background: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.10) !important;
}


/* =========================================================
   DETAILS
   ========================================================= */

[class*="product" i] details {
  border-top: 1px solid rgba(17,17,17,.15) !important;
  border-bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

[class*="product" i] details:last-child {
  border-bottom: 1px solid rgba(17,17,17,.15) !important;
}

[class*="product" i] summary {
  min-height: 62px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #111 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  list-style: none !important;
}

[class*="product" i] summary::-webkit-details-marker {
  display: none !important;
}

[class*="product" i] details[open] summary {
  padding-bottom: 14px !important;
}

[class*="product" i] details > div,
[class*="product" i] details > p {
  color: #444 !important;
  font-size: 13px !important;
  line-height: 1.72 !important;
  padding-bottom: 22px !important;
}


/* =========================================================
   PRODUCT LIST
   ========================================================= */

[class*="product" i] ul {
  padding-left: 18px !important;
}

[class*="product" i] li {
  color: #444 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}


/* =========================================================
   GUARANTEE / RETURNS
   ========================================================= */

[class*="product" i] [class*="return" i],
[class*="product" i] [class*="guarantee" i] {
  color: #333 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}


/* =========================================================
   RELATED PRODUCTS
   ========================================================= */

[class*="product" i] [class*="related" i] {
  margin-top: 95px !important;
  padding-top: 48px !important;
  border-top: 1px solid rgba(17,17,17,.14) !important;
}

[class*="product" i] [class*="related" i] img {
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: opacity .25s ease !important;
}

[class*="product" i] [class*="related" i] img:hover {
  opacity: .82 !important;
}

[class*="product" i] [class*="related" i] [class*="title" i] {
  font-size: 13px !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
  font-weight: 600 !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 750px) {

  [class*="gallery" i] {
    margin-right: 20px !important;
  }

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1100px) {

  [class*="title" i] {
    font-size: clamp(42px, 3.7vw, 62px) !important;
    max-width: 660px !important;
  }

  [class*="price" i] {
    margin-bottom: 30px !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 749px) {

  [class*="gallery" i] {
    width: 100% !important;
    margin: 0 0 25px 0 !important;
  }

  [class*="gallery" i]::before {
    top: 11px !important;
    left: 11px !important;
    font-size: 8px !important;
  }

  [class*="product" i] [class*="title" i]::before {
    margin-bottom: 14px !important;
    font-size: 8px !important;
    letter-spacing: .14em !important;
  }

  [class*="title" i] {
    font-size: 30px !important;
    line-height: .96 !important;
    letter-spacing: -.045em !important;
    margin-bottom: 12px !important;
  }

  [class*="price" i] {
    font-size: 17px !important;
    margin-bottom: 20px !important;
  }

  [class*="product" i] [class*="description" i] {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  [class*="option" i] button,
  [class*="option" i] label {
    min-height: 44px !important;
    font-size: 12px !important;
  }

  [class*="product" i] select {
    min-height: 48px !important;
  }

  [class*="product" i] button[type="submit"],
  [class*="product" i] [class*="cart" i] button {
    min-height: 53px !important;
    font-size: 11px !important;
    letter-spacing: .075em !important;
  }

  [class*="product" i] summary {
    min-height: 58px !important;
    font-size: 10px !important;
  }

  [class*="product" i] [class*="related" i] {
    margin-top: 58px !important;
    padding-top: 32px !important;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

}
}
#fw-section-product-recommendations-product-zevantte-product-editorial {

/* =========================================================
   ZEVANTTE — SIZE GUIDE V10
   PREMIUM EDITORIAL SIZE GUIDE
   ========================================================= */


/* ---------------------------------------------------------
   SIZE GUIDE CONTAINER
   --------------------------------------------------------- */

[class*="product" i] [class*="size" i] {
  color: #111 !important;
}


/* ---------------------------------------------------------
   SIZE GUIDE TITLE
   --------------------------------------------------------- */

[class*="product" i] [class*="size" i] h1,
[class*="product" i] [class*="size" i] h2,
[class*="product" i] [class*="size" i] h3 {
  color: #111 !important;
  font-weight: 700 !important;
  letter-spacing: -.045em !important;
}


/* ---------------------------------------------------------
   IN / CM TOGGLE
   --------------------------------------------------------- */

[class*="product" i] [class*="size" i] button {
  min-width: 46px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 0 !important;
  border: 1px solid rgba(17,17,17,.25) !important;
  background: transparent !important;
  color: #111 !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease !important;
}

[class*="product" i] [class*="size" i] button:hover {
  border-color: #111 !important;
  background: rgba(17,17,17,.04) !important;
}


/* Selected unit */

[class*="product" i] [class*="size" i] button[aria-selected="true"],
[class*="product" i] [class*="size" i] button[aria-pressed="true"] {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}


/* ---------------------------------------------------------
   SIZE GUIDE IMAGE
   --------------------------------------------------------- */

[class*="product" i] [class*="size" i] img {
  display: block !important;
  width: 100% !important;
  max-width: 620px !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* ---------------------------------------------------------
   SIZE TABLE
   --------------------------------------------------------- */

[class*="product" i] [class*="size" i] table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin-top: 22px !important;
  color: #111 !important;
  font-size: 12px !important;
}


/* Table cells */

[class*="product" i] [class*="size" i] th,
[class*="product" i] [class*="size" i] td {
  height: 48px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(17,17,17,.13) !important;
  text-align: center !important;
  vertical-align: middle !important;
}


/* Header */

[class*="product" i] [class*="size" i] th {
  height: 42px !important;
  color: #777 !important;
  font-size: 9px !important;
  font-weight: 650 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}


/* First column */

[class*="product" i] [class*="size" i] th:first-child,
[class*="product" i] [class*="size" i] td:first-child {
  text-align: left !important;
  font-weight: 650 !important;
}


/* Measurement values */

[class*="product" i] [class*="size" i] td {
  color: #333 !important;
  font-weight: 450 !important;
}


/* ---------------------------------------------------------
   SIZE ROW HOVER
   --------------------------------------------------------- */

[class*="product" i] [class*="size" i] tbody tr {
  transition: background-color .2s ease !important;
}

[class*="product" i] [class*="size" i] tbody tr:hover {
  background: rgba(17,17,17,.035) !important;
}


/* ---------------------------------------------------------
   SIZE GUIDE DESCRIPTION
   --------------------------------------------------------- */

[class*="product" i] [class*="size" i] p {
  max-width: 680px !important;
  color: #555 !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}


/* ---------------------------------------------------------
   MEASUREMENT EXPLANATIONS
   --------------------------------------------------------- */

[class*="product" i] [class*="size" i] strong {
  color: #111 !important;
  font-weight: 650 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 749px) {

  [class*="product" i] [class*="size" i] button {
    min-width: 44px !important;
    min-height: 38px !important;
    font-size: 9px !important;
    padding: 0 12px !important;
  }

  [class*="product" i] [class*="size" i] table {
    font-size: 11px !important;
    margin-top: 18px !important;
  }

  [class*="product" i] [class*="size" i] th,
  [class*="product" i] [class*="size" i] td {
    height: 43px !important;
    padding: 0 8px !important;
  }

  [class*="product" i] [class*="size" i] th {
    font-size: 8px !important;
  }

  [class*="product" i] [class*="size" i] p {
    font-size: 11px !important;
    line-height: 1.65 !important;
  }

}
}