/* =========================================================
   VEXEN — MOBILE SHOP
   Based on the supplied mobile Figma shop blueprint
   and the finished VEXEN mobile landing system.
   ========================================================= */

/* =========================================================
   LOCAL FONTS
   ========================================================= */

@font-face {
  font-family: "e-Ukraine";
  src: url("../../fonts/e-Ukraine/e-Ukraine-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("../../fonts/e-Ukraine/e-Ukraine-UltraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("../../fonts/e-Ukraine/e-Ukraine-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("../../fonts/e-Ukraine/e-Ukraine-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("../../fonts/e-Ukraine/e-Ukraine-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("../../fonts/e-Ukraine/e-Ukraine-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded/Unbounded-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded/Unbounded-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded/Unbounded-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded/Unbounded-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded/Unbounded-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded/Unbounded-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("../../fonts/Space_Mono/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("../../fonts/Space_Mono/SpaceMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #0A0A0A;
}

body {
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   MAIN 393px FIGMA FRAME
   ========================================================= */

.Shop {
  width: 393px;
  height: 1739px;
  min-height: 1739px;
  margin: 0 auto;
  position: relative;
  display: block;
  justify-content: initial;
  align-items: initial;
  transition: none;
  overflow: hidden;
  background: #0A0A0A;
  color: #F2F2F0;
}

/* =========================================================
   MOBILE ROOT OVERRIDES
   The desktop `.Shop` class is also used by the desktop header
   component. On mobile the same class is the page root, so its
   desktop flex/hover behavior must be neutralized.
   ========================================================= */

.VexenMobileView .Shop:hover > div {
  color: inherit;
  transform: none;
}

.VexenMobileView .Shop > div {
  transition: none;
}

/* =========================================================
   ANNOUNCEMENT BAR
   Same mobile system as the finished landing:
   34px high, centered text.
   ========================================================= */

.AnnouncementBar {
  width: 393px;
  height: 34px;
  position: absolute;
  left: 0;
  top: 0;
  background: #3A0D10;
}

.Drop00125 {
  position: absolute;
  left: 0;
  top: 11px;
  width: 393px;
  color: #F2F2F0;
  text-align: center;
  font-family: "e-Ukraine", sans-serif;
  font-size: 9px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 0.36px;
  white-space: nowrap;
}

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

.MobileHeader {
  width: 393px;
  height: 32px;
  position: absolute;
  left: 0;
  top: 60px;
}

.MobileLogo {
  width: 121.43px;
  height: 20.67px;
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  display: block;
}

.MobileLogo img {
  width: 121.43px;
  height: 20.67px;
  display: block;
  object-fit: contain;
}

.MobileMenu {
  width: 32px;
  height: 32px;
  position: absolute;
  left: 42px;
  top: 0;
  border: 2px solid #F2F2F0;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.67px;
  padding: 0;
}

.MobileMenu span {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: #F2F2F0;
}

.MobileCart {
  width: 32px;
  height: 32px;
  position: absolute;
  left: 320px;
  top: 0;
  display: block;
}

.MobileCart img {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
}

/* =========================================================
   BREADCRUMB
   ========================================================= */

.ShopBreadcrumb {
  position: absolute;
  left: 0;
  top: 94px;
  width: 393px;
  color: #8C8C8C;
  text-align: center;
  font-family: "e-Ukraine", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.24px;
}

/* =========================================================
   CURRENT DROP
   ========================================================= */

.CurrentDrop {
  width: 393px;
  height: 780px;
  position: absolute;
  left: 0;
  top: 0;
}

.CurrentDropTitle {
  position: absolute;
  left: 0;
  top: 190px;
  width: 393px;
  text-align: center;
  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  transform: none !important;
}

.CurrentDropDash {
  font-family: "e-Ukraine", sans-serif;
  font-weight: 400;
}

.CurrentDropTitle strong {
  font-family: "Space Mono", monospace;
  font-size: 18px;
  font-weight: 700;
  line-height: 19px;
}

/* Product card */

.CurrentProductCard {
  width: 353px;
  height: 430px;
  position: absolute;
  left: 20px !important;
  transform: none !important;
  top: 254px;
  overflow: hidden;
  background: #171717;
  border: 0.35px solid #292929;
  border-radius: 35px;
}

.ProductCounter {
  position: absolute;
  left: 34px;
  top: 30px;
  color: #F2F2F0;
  text-align: right;
  font-family: "e-Ukraine", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 11.34px;
  letter-spacing: 0.32px;
  z-index: 2;
}

/*
  No shadow here.
  The supplied mobile blueprint had a shadow on this image,
  but the finished VEXEN mobile landing intentionally removed
  product shadows to keep the garment clean.
*/
.CurrentProductImage {
  width: 283px;
  height: 377px;
  position: absolute;
  left: 35px;
  top: 53px;
  display: block;
  object-fit: contain;
  opacity: 0.80;
  box-shadow: none;
  z-index: 1;
}

.CurrentProductDrop {
  position: absolute;
  left: 35px;
  top: 310px;
  width: 164px;
  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 27.22px;
  font-weight: 500;
  line-height: 30.62px;
  white-space: nowrap;
  z-index: 3;
}

.CurrentProductDrop strong {
  font-family: "Space Mono", monospace;
  font-size: 28.92px;
  font-weight: 700;
}

.CurrentProductName {
  position: absolute;
  left: 35px;
  top: 347px;
  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 20.41px;
  font-weight: 500;
  line-height: 23.82px;
  white-space: nowrap;
  z-index: 3;
}

.CurrentProductPrice {
  position: absolute;
  right: 19px;
  top: 332px;
  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 15.31px;
  font-weight: 500;
  line-height: 18.71px;
  white-space: nowrap;
  z-index: 3;
}

.CurrentProductLimited {
  position: absolute;
  left: 0;
  top: 395px;
  width: 353px;
  color: #8C8C8C;
  text-align: center;
  font-family: "e-Ukraine", sans-serif;
  font-size: 12.76px;
  font-weight: 400;
  line-height: 17.01px;
  white-space: nowrap;
  z-index: 3;
}

/* =========================================================
   CTA
   ========================================================= */

.MobileCta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E8E8E8;
  color: #0A0A0A;
  border-radius: 11.70px;
  font-family: "e-Ukraine", sans-serif;
  font-size: 18.72px;
  font-weight: 500;
  line-height: 24.96px;
  letter-spacing: 0.56px;
  white-space: nowrap;
}

.CurrentDropCta {
  width: 236.34px;
  height: 46.02px;
  position: absolute;
  left: 79px;
  top: 716px;
}

/* =========================================================
   PREVIOUS DROPS
   ========================================================= */

.PreviousDrops {
  width: 393px;
  height: 180px;
  position: absolute;
  left: 0;
  top: 1002.02px;
  text-align: center;
}

.PreviousDropsTitle {
  position: absolute;
  left: 0;
  top: 0;
  width: 393px;
  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

.PreviousDropsEmpty {
  position: absolute;
  left: 0;
  top: 48px;
  width: 393px;
  color: #8C8C8C;
  font-family: "e-Ukraine", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  white-space: nowrap;
}

/* =========================================================
   FOOTER
   ========================================================= */

.MobileFooter {
  width: 393px;
  height: 430px;
  position: absolute;
  left: 0;
  top: 1309.02px;
  overflow: hidden;
  background: #141414;
}

.FooterBrand {
  position: absolute;
  left: 42px;
  top: 30px;
}

.FooterLogoText {
  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 14.40px;
  font-weight: 500;
  line-height: 19.20px;
}

.FooterTagline {
  position: static;
  left: auto;
  top: auto;
  margin-top: 4.80px;
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.FooterLanguage {
  position: absolute;
  left: 244px;
  top: 36px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: "e-Ukraine", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.54px;
}

.LangEn,
.LangUa {
  width: 48px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7.50px;
}

.LangEn {
  color: #818181;
  background: #242424;
}

.LangUa {
  color: #0A0A0A;
  background: #E8E8E8;
}

.FooterNav {
  position: absolute;
  left: 23px;
  top: 152px;
  width: 347px;
  display: grid;
  grid-template-columns: 160px 160px;
  column-gap: 27px;
  row-gap: 38px;
}

.FooterNav a {
  width: 160px;
  color: #F2F2F0;
  text-align: center;
  font-family: "e-Ukraine", sans-serif;
  font-size: 17.28px;
  font-weight: 500;
  line-height: 23.04px;
  letter-spacing: 0.35px;
}

.FooterSocials {
  position: absolute;
  left: 44px;
  top: 316px;
  width: 305px;
  display: flex;
  justify-content: space-between;
}

.FooterSocials a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.36px;
}

.FooterSocials img {
  width: 19.5px;
  height: 19.5px;
  display: block;
  object-fit: contain;
}

.FooterLine {
  width: 401px;
  height: 1px;
  position: absolute;
  left: 0;
  top: 356.48px;
  background: #292929;
}

.FooterBottom {
  position: absolute;
  left: 44px;
  right: 44px;
  top: 380px;
  display: flex;
  justify-content: space-between;
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
  white-space: nowrap;
}

/* =========================================================
   MOBILE WIDTH BEHAVIOUR
   Keep 393px as the source-of-truth frame.
   ========================================================= */

@media (max-width: 392px) {
  .Shop {
    transform-origin: top center;
    transform: scale(calc(100vw / 393));
  }

  body {
    min-height: calc(1739px * (100vw / 393));
  }
}


/* =========================================================
   MOBILE MENU — HEADER CONTROLS WHILE DRAWER IS OPEN
   ========================================================= */
body.vexen-menu-open .MobileMenu,
body.vexen-menu-open .MobileCart,
body.vexen-menu-open .MobileLogo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* =========================================================
   VEXEN — FINAL INTERACTION LAYER
   Header controls must sit above the page content.
   ========================================================= */

.MobileHeader {
  z-index: 1000;
}

.MobileMenu,
.MobileLogo,
.MobileCart {
  z-index: 1001;
  pointer-events: auto !important;
}

.MobileMenu {
  cursor: pointer;
}

.MobileCart {
  cursor: pointer;
}

/* The drawer must always sit above every page section. */
.VexenMobileMenu {
  z-index: 99999 !important;
}

/* =========================================================
   FINAL MOBILE SHOP ISOLATION
   Keep the mobile shop independent from legacy desktop rules.
   ========================================================= */

@media (max-width: 767px) {
  .VexenMobileView .Shop {
    width: 393px !important;
    height: 1739px !important;
    min-height: 1739px !important;
    margin: 0 auto !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    display: block !important;
    overflow: hidden !important;
  }

  /* Announcement: exactly the same mobile treatment as index.html. */
  .VexenMobileView .AnnouncementBar {
    width: 393px !important;
    height: 34px !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
  }

  .VexenMobileView .Drop00125 {
    width: 393px !important;
    height: 12px !important;
    left: 0 !important;
    top: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    color: #F2F2F0 !important;
    text-align: center !important;
    font-family: "e-Ukraine", sans-serif !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 12px !important;
    letter-spacing: 0.36px !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    overflow: hidden !important;
    pointer-events: none !important;
    user-select: none !important;
  }

  /* Keep the current drop itself centered in the 393px mobile frame. */
  .VexenMobileView .CurrentDrop {
    width: 393px !important;
    left: 0 !important;
    transform: none !important;
  }

  .VexenMobileView .CurrentProductCard {
    width: 353px !important;
    height: 430px !important;
    left: 50% !important;
    margin-left: -176.5px !important;
    right: auto !important;
    transform: none !important;
  }
}

@media (max-width: 392px) {
  .VexenMobileView .Shop {
    transform-origin: top center !important;
    transform: scale(calc(100vw / 393)) !important;
  }
}