/*
 * EMZA homepage layout.
 * The homepage is flow-based and Flexbox-first. Absolute positioning is kept
 * only where an element must genuinely overlay another element (the two hero
 * orbs, the arrow strokes, and the cart-count badge).
 */

html:has(body.emza-html-home),
body.emza-html-home {
  margin: 0;
  padding: 0;
  background: #000;
}

body.emza-html-home {
  min-width: 0;
  overflow-x: hidden;
  color: #fff;
  font-family: var(--emza-font-body);
  direction: ltr;
}

body.emza-html-home .emza-footer-area,
body.emza-html-home .site-footer {
  display: none !important;
}

.emza-home-header,
.emza-home-main,
.emza-home-header__canvas,
.emza-home-main__canvas {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  box-sizing: border-box;
}

/* --------------------------------------------------
   Header — Flexbox, 150px from the top
   -------------------------------------------------- */
.emza-home-header-container {
  align-items: stretch;
}

.emza-home-header__canvas {
  display: flex;
  width: 100%;
  min-height: 280px;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 78px);
  padding: 150px 0 70px;
}

.emza-home-menu {
  display: flex;
  flex: 0 0 auto;
  width: 220px;
  min-width: 0;
  height: 60px;
  align-items: center;
  gap: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.emza-home-menu__lines {
  display: flex;
  width: 78px;
  height: 39px;
  flex: 0 0 78px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
}

.emza-home-menu__lines i {
  display: block;
  height: 7px;
  background: #fff;
}

.emza-home-menu__lines i:first-child { width: 78px; }
.emza-home-menu__lines i:last-child { width: 38px; }

.emza-home-menu__label {
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.emza-home-socials {
  display: flex;
  flex: 0 0 auto;
  min-height: 41px;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
}

.emza-home-social {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  color: #fff;
  line-height: 0;
}

.emza-home-social svg {
  display: block;
  width: auto;
  max-width: none;
  height: auto;
}

.emza-home-social--pinterest { width: 32px; height: 41px; }
.emza-home-social--linkedin { width: 32px; height: 32px; }
.emza-home-social--instagram { width: 40px; height: 40px; }

.emza-home-actions {
  display: flex;
  flex: 0 0 488px;
  width: 488px;
  height: 60px;
  align-items: stretch;
  box-sizing: border-box;
  border: 1.8px solid #fff;
}

.emza-home-login {
  display: flex;
  width: 240px;
  height: 100%;
  flex: 0 0 240px;
  align-items: center;
  padding: 0 18px;
  box-sizing: border-box;
  background: #fff;
  color: #000;
}

.emza-home-user-svg {
  display: flex;
  width: 38px;
  height: 37px;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.emza-home-user-svg svg {
  display: block;
  width: 38px;
  height: 37px;
}

.emza-home-login__divider {
  display: block;
  width: 2px;
  height: 47.5px;
  flex: 0 0 2px;
  margin-left: 25px;
  background: #000;
}

.emza-home-login__text {
  display: block;
  margin-left: 18px;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.emza-home-wishlist,
.emza-home-bag {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.emza-home-wishlist {
  width: 105px;
  flex: 0 0 105px;
  margin-left: 40px;
}

.emza-home-wishlist svg {
  display: block;
  width: 46px;
  height: 36px;
}

.emza-home-bag {
  position: relative;
  width: 101px;
  flex: 1 1 101px;
}

.emza-home-bag > svg {
  display: block;
  width: 31px;
  height: 35px;
}

/* Overlay is intentional: the badge sits on the bag icon. */
.emza-home-bag .bag-count {
  position: absolute;
  right: 9px;
  bottom: 5px;
  display: none;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 10px;
  line-height: 17px;
  text-align: center;
}

.emza-home-bag.has-items .bag-count { display: block; }

/* --------------------------------------------------
   Collection links — Flexbox
   -------------------------------------------------- */
.emza-home-main__canvas {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Shared real container used by every homepage section. */
.emza-home-container {
  margin: 0 auto;
  width: 1620px;
  display: flex;
  box-sizing: border-box;
}

.emza-home-collection-container {
  margin-top: 64.448px;
}

.emza-home-collection-links {
  display: flex;
  width: 100%;
  align-items: flex-start;
}

.emza-home-collection-link {
  display: flex;
  width: auto;
  max-width: 100%;
  align-items: flex-start;
  color: #fff;
  font-size: 20.3px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

/* These flex bases reproduce the original three starting columns without
   taking the links out of normal flow. */
.emza-home-collection-link--women { flex: 0 1 622px; }
.emza-home-collection-link--men { flex: 0 1 546px; }
.emza-home-collection-link--accessories {
  display: flex;
  flex: 1 1 456px;
  flex-direction: column;
  white-space: normal;
}

.emza-home-collection-link__title {
  display: flex;
  align-items: flex-start;
  white-space: nowrap;
}

.emza-home-link-arrow {
  display: inline-flex;
  width: 26px;
  height: 26px;
  margin-left: 6px;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.emza-home-link-arrow svg {
  display: block;
  width: 26px;
  height: 26px;
  max-width: none;
}

.emza-home-collection-link--accessories small {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.15;
}

/* --------------------------------------------------
   Hero — two Flexbox columns inside the shared 1620px container
   -------------------------------------------------- */
.emza-home-hero-container {
  margin-top: 109px;
}

.emza-home-hero {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(70px, 10vw, 300px);
  box-sizing: border-box;
}

.emza-home-hero__content {
  display: flex;
  width: min(590px, 42vw);
  flex: 0 1 590px;
  flex-direction: column;
  align-items: flex-start;
}

.emza-home-brand {
  display: block;
  width: 590px;
  max-width: 100%;
  height: auto;
  color: #fff;
  line-height: 0;
}

.emza-home-logo-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.emza-home-new {
  display: flex;
  width: 597px;
  max-width: 100%;
  flex-direction: column;
  margin-top: 411px;
}

.emza-home-new h1 {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  color: #fff;
  font-size: 61px;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 0.88;
}

.emza-home-new__top,
.emza-home-new__bottom,
.emza-home-new__year {
  display: block;
}

.emza-home-new__bottom {
  font-size: 0.94em;
  letter-spacing: -0.035em;
}

/* The arrow lives in the same flex row as 2025, so its vertical center is
   always exactly opposite the year rather than being positioned by top/left. */
.emza-home-new__year-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 38px;
}

.emza-home-outline-arrow {
  position: relative;
  display: block;
  width: auto;
  height: 62.1px;
  flex: 0 0 236.4px;
  box-sizing: border-box;
  color: #fff;
}
img.emza-z-index {
    height: 68px;
    width: 160px;
}
/* Absolute positioning is intentional only for the two strokes drawn inside
   the arrow button itself. */
.emza-home-outline-arrow span::before {
  position: absolute;
  top: 50%;
  left: 16px;
  width: calc(100% - 40px);
  height: 4px;
  background: currentColor;
  content: "";
  transform: translateY(-50%);
}

.emza-home-outline-arrow span::after {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 21px;
  height: 21px;
  border-top: 4px solid currentColor;
  border-right: 4px solid currentColor;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.emza-home-hero__media {
  display: flex;
  width: 587.65px;
  max-width: 42vw;
  flex: 0 1 587.65px;
  flex-direction: column;
  align-items: stretch;
}

/* Relative positioning is needed only as the containing block for the two
   decorative orbs that overlap the photograph. */
.emza-home-visual {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  color: #fff;
  line-height: 0;
}

.emza-home-visual__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 587.65 / 734.562;
  max-width: none;
  object-fit: cover;
}

/* Genuine overlays: these remain absolute by design. */
.emza-home-visual__orb {
  position: absolute;
  z-index: 2;
  display: block;
  width: min(197px, 33.53%);
  height: auto;
  max-width: none;
  pointer-events: none;
}

.emza-home-visual__orb--light {
  top: 41.25%;
  right: -12.31%;
}

.emza-home-visual__orb--dark {
  top: 40.98%;
  right: -12.65%;
}

.emza-home-progress {
  display: flex;
  width: 100%;
  height: 7px;
  gap: 36.91px;
  margin-top: 54px;
}

.emza-home-progress i {
  display: block;
  height: 6.44px;
  flex: 1 1 0;
  border-radius: 999px;
  background: #4d4d4d;
}

.emza-home-progress i:first-child { background: #fff; }

/* --------------------------------------------------
   Bottom navigation — Flexbox
   -------------------------------------------------- */
.emza-home-bottom-nav-wrap {
  width: 100%;
  margin-top: 79px;
  background: #1a1a1a;
}

.emza-home-bottom-container {
  align-items: stretch;
}

.emza-home-bottom-nav {
  display: flex;
  width: 100%;
  min-height: 197px;
  align-items: flex-start;
  gap: 4vw;
  padding: 73px 0 50px;
  box-sizing: border-box;
}

.emza-home-bottom-nav a {
  display: flex;
  height: 74px;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.emza-home-menu:hover,
.emza-home-social:hover,
.emza-home-collection-link:hover,
.emza-home-brand:hover,
.emza-home-visual:hover {
  opacity: 0.72;
}

.emza-home-bottom-nav a:hover,
.emza-home-outline-arrow:hover {
  background: #fff;
  color: #000;
}

/* --------------------------------------------------
   Laptop
   -------------------------------------------------- */
@media (max-width: 1600px) and (min-width: 1101px) {
  .emza-home-header__canvas {
    gap: 30px;
  }

  .emza-home-menu { width: auto; }

  .emza-home-actions {
    flex-basis: min(488px, 35vw);
    width: min(488px, 35vw);
  }

  .emza-home-login {
    width: 49%;
    flex-basis: 49%;
  }

  .emza-home-wishlist {
    width: 25.5%;
    flex-basis: 25.5%;
    margin-left: 0;
  }

  .emza-home-bag {
    width: 25.5%;
    flex-basis: 25.5%;
  }

  .emza-home-login__divider { margin-left: 16px; }
  .emza-home-login__text { margin-left: 14px; font-size: 22px; }

  .emza-home-collection-links {
    align-items: flex-start;
  }

  .emza-home-hero {
    gap: clamp(55px, 7vw, 150px);
  }

  .emza-home-hero__content,
  .emza-home-hero__media {
    max-width: 43vw;
  }

  .emza-home-new { margin-top: clamp(280px, 25vw, 411px); }

  .emza-home-new h1 { font-size: clamp(48px, 3.8vw, 61px); }

  .emza-home-new__year-row { gap: clamp(18px, 2vw, 38px); }

  .emza-home-outline-arrow {
    width: clamp(175px, 16vw, 236.4px);
    flex-basis: clamp(175px, 16vw, 236.4px);
  }

  .emza-home-bottom-nav {
    gap: 3vw;
  }
}

/* --------------------------------------------------
   Tablet
   -------------------------------------------------- */
@media (max-width: 1100px) {
  .emza-home-header__canvas {
    min-height: 315px;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 20px 24px;
    padding: 24px;
  }

  .emza-home-menu {
    width: auto;
    order: 1;
  }

  .emza-home-socials {
    order: 2;
    margin-left: auto;
  }

  .emza-home-actions {
    width: 100%;
    flex: 0 0 100%;
    order: 3;
  }

  .emza-home-login {
    width: 50%;
    flex-basis: 50%;
  }

  .emza-home-wishlist {
    width: 25%;
    flex-basis: 25%;
    margin-left: 0;
  }

  .emza-home-bag {
    width: 25%;
    flex-basis: 25%;
  }

  .emza-home-container {
    width: 100%;
  }

  .emza-home-collection-container {
    margin-top: 56px;
  }

  .emza-home-collection-links {
    gap: 24px;
  }

  .emza-home-collection-link--women,
  .emza-home-collection-link--men,
  .emza-home-collection-link--accessories {
    min-width: 0;
    flex: 1 1 0;
    font-size: clamp(15px, 2vw, 20px);
    white-space: normal;
  }

  .emza-home-collection-link__title { white-space: normal; }

  .emza-home-link-arrow {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  .emza-home-link-arrow svg { width: 22px; height: 22px; }

  .emza-home-hero-container {
    margin-top: 96px;
  }

  .emza-home-hero {
    flex-direction: column;
    gap: 32px;
  }

  .emza-home-hero__content,
  .emza-home-hero__media {
    width: 100%;
    max-width: none;
    flex-basis: auto;
  }

  .emza-home-brand {
    width: min(590px, 100%);
  }

  .emza-home-new {
    width: 100%;
    margin-top: 100px;
  }

  .emza-home-new h1 { font-size: clamp(48px, 8vw, 72px); }

  .emza-home-new__year-row {
    width: min(100%, 640px);
    gap: clamp(22px, 4vw, 38px);
  }

  .emza-home-outline-arrow {
    width: min(236.4px, 32vw);
    flex-basis: min(236.4px, 32vw);
  }

  .emza-home-visual__photo {
    aspect-ratio: 4 / 5;
  }

  .emza-home-visual__orb {
    width: clamp(112px, 20vw, 197px);
  }

  .emza-home-visual__orb--light { right: -1px; }
  .emza-home-visual__orb--dark { right: -3px; }

  .emza-home-progress {
    gap: 20px;
    margin-top: 40px;
  }

  .emza-home-bottom-nav-wrap {
    margin-top: 72px;
  }

  .emza-home-bottom-nav {
    min-height: 0;
    gap: 14px;
    padding: 42px 0;
  }

  .emza-home-bottom-nav a {
    height: 68px;
    font-size: clamp(15px, 2vw, 20px);
  }
}

/* --------------------------------------------------
   Mobile
   -------------------------------------------------- */
@media (max-width: 680px) {
  .emza-home-header__canvas {
    gap: 18px 12px;
    min-height: 0;
  }
	.emza-home-main__canvas {
    padding: 0 24px;
}

  .emza-home-menu { gap: 12px; }

  .emza-home-menu__lines {
    width: 48px;
    flex-basis: 48px;
  }

  .emza-home-menu__lines i:first-child { width: 48px; }
  .emza-home-menu__label { font-size: 18px; }

  .emza-home-socials {
    gap: 14px;
    transform: scale(0.88);
    transform-origin: right top;
  }

  .emza-home-login {
    width: 52%;
    flex-basis: 52%;
    padding: 0 12px;
  }

  .emza-home-wishlist {
    width: 24%;
    flex-basis: 24%;
  }

  .emza-home-bag {
    width: 24%;
    flex-basis: 24%;
  }

  .emza-home-user-svg {
    width: 31px;
    flex-basis: 31px;
    transform: scale(0.82);
    transform-origin: left center;
  }

  .emza-home-login__divider {
    height: 42px;
    margin-left: 8px;
  }

  .emza-home-login__text {
    margin-left: 10px;
    font-size: 18px;
  }

  .emza-home-container {
    width: 100%;
  }

  .emza-home-collection-container {
    margin-top: 48px;
  }

  .emza-home-collection-links {
    flex-direction: column;
    gap: 26px;
  }

  .emza-home-collection-link--women,
  .emza-home-collection-link--men,
  .emza-home-collection-link--accessories {
    width: 100%;
    flex: 0 0 auto;
    font-size: 18px;
  }

  .emza-home-hero-container {
    margin-top: 80px;
  }

  .emza-home-hero {
    gap: 28px;
  }

  .emza-home-new {
    margin-top: 78px;
  }

  .emza-home-new h1 {
    font-size: clamp(46px, 16vw, 70px);
    line-height: 0.9;
  }

  .emza-home-new__year-row {
    width: 100%;
    gap: 14px;
  }

  .emza-home-outline-arrow {
    width: min(236.4px, 48vw);
    height: 56px;
    flex: 1 1 auto;
  }

  .emza-home-outline-arrow span::before {
    left: 12px;
    width: calc(100% - 32px);
  }

  .emza-home-visual__photo { aspect-ratio: 4 / 5; }

  .emza-home-progress {
    gap: 12px;
    margin-top: 30px;
  }

  .emza-home-bottom-nav-wrap {
    margin-top: 54px;
  }

  .emza-home-bottom-nav {
    flex-direction: column;
    gap: 12px;
    padding: 34px 0;
  }

  .emza-home-bottom-nav a {
    width: 100%;
    height: 62px;
    flex: 0 0 62px;
    font-size: 17px;
  }
}

@media (max-width: 420px) {
  .emza-home-menu__label { display: none; }

  .emza-home-socials {
    gap: 10px;
    transform: scale(0.74);
  }

  .emza-home-login {
    width: 54%;
    flex-basis: 54%;
  }

  .emza-home-wishlist {
    width: 23%;
    flex-basis: 23%;
  }

  .emza-home-bag {
    width: 23%;
    flex-basis: 23%;
  }

  .emza-home-login__text { font-size: 16px; }

  .emza-home-new__year-row { gap: 10px; }

  .emza-home-outline-arrow {
    min-width: 0;
    height: 52px;
  }
}

/* --------------------------------------------------
   Selective Arial typography — only the UI shown in the supplied references.
   All other homepage/theme typography keeps its original font.
   -------------------------------------------------- */
body.emza-html-home .emza-home-menu__label,
body.emza-html-home .emza-home-login__text,
body.emza-html-home .emza-home-collection-link,
body.emza-html-home .emza-home-collection-link small,
body.emza-html-home .emza-home-bottom-nav a,
body.emza-html-home .menu-drawer .drawer-close span,
body.emza-html-home .menu-drawer nav .drawer-menu > li > a,
body.emza-html-home .menu-drawer .drawer-account span {
  font-family: "Peyda", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* --------------------------------------------------
   Homepage collection slider
   -------------------------------------------------- */
.emza-home-slider{position:relative;width:100%;overflow:visible}
.emza-home-slider__track{position:relative;width:100%;aspect-ratio:587.65/734.562;overflow:hidden}
.emza-home-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.025);transition:opacity .7s ease,transform 1.1s ease,visibility .7s ease}
.emza-home-slide.is-active{z-index:1;opacity:1;visibility:visible;transform:scale(1)}
.emza-home-slide:nth-child(2) .emza-home-visual__photo{object-position:54% center}
.emza-home-slide:nth-child(3) .emza-home-visual__photo{object-position:46% center}
.emza-home-slider .emza-home-visual__orb--png{top:41%;right:-12.65%;z-index:4}
.emza-home-progress button{display:block;height:6.44px;flex:1 1 0;padding:0;border:0;border-radius:999px;background:#4d4d4d;cursor:pointer;transition:background-color .25s ease,transform .25s ease}
.emza-home-progress button.is-active{background:#fff}
.emza-home-progress button:hover{transform:scaleY(1.35)}
@media (prefers-reduced-motion:reduce){.emza-home-slide{transition:none}}
