/* =========================================================
   VEXEN — SWORD TEE PRODUCT PAGE
   Page-specific styles only.
   Global fonts / reset are inherited from style.css.
   ========================================================= */

.SwordProductPage {
  width: 100%;
  min-height: 2158px;
  position: relative;
  overflow: hidden;
  background: #0A0A0A;
  color: #F2F2F0;
}


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

.SwordProductHeader {
  width: 1200px;
  height: 120px;
  left: 50%;
  top: 64px;
  transform: translateX(-50%);
  position: absolute;

  display: grid;
  grid-template-columns: 260px 260px 260px;
  column-gap: 210px;
  align-items: center;

  font-family: "e-Ukraine", sans-serif;
}

.SwordProductLogo {
  width: 260px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.SwordProductLogo img {
  display: block;
  width: 170px;
  height: auto;
}

.SwordProductNavLink,
.SwordProductCartText {
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.48px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.SwordProductNavLink {
  width: 260px;
}

.SwordProductCart {
  width: 260px;
  height: 32px;
  position: relative;
  cursor: pointer;
  color: inherit;
  text-decoration: none;

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

.SwordProductCartText {
  width: 260px;
}

.SwordProductCartIcon {
  width: 24px;
  height: 24px;
  left: 23px;
  top: 4px;
  position: absolute;
  overflow: hidden;
}

.SwordProductCartIcon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.SwordProductBreadcrumb {
  position: absolute;
  left: 50%;
  top: 136px;
  transform: translateX(-558px);

  color: #8C8C8C;
  font-family: "e-Ukraine", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.48px;
}


/* =========================================================
   MAIN PRODUCT AREA
   ========================================================= */

.SwordProductMain {
  width: 1200px;
  height: 850px;
  left: 50%;
  top: 360px;
  transform: translateX(-50%);
  position: absolute;
}

.SwordProductImageArea {
  position: absolute;
  left: 2px;
  top: 71px;
  width: 700px;
  height: 620px;
}

.SwordProductImageFrame {
  width: 586px;
  height: 648px;
  position: absolute;
  left: 0;
  top: 0;

  border: 1px solid #292929;
  border-radius: 90px;
  overflow: hidden;
}

.SwordProductMainImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.SwordProductImageControls {
  position: absolute;
  left: 159px;
  top: 558px;
  width: 267px;
  height: 64px;

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

.SwordProductArrow {
  width: 64px;
  height: 64px;
  position: relative;
  flex: 0 0 64px;

  border: 1px solid #292929;
  border-radius: 20px;
  background: #141414;
  cursor: pointer;
}

.SwordProductArrow img {
  width: 32px;
  height: 32px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  object-fit: contain;
}

.SwordProductArrowPrev img {
  transform: translate(-50%, -50%);
}

.SwordProductArrowNext img {
  transform: translate(-50%, -50%) rotate(180deg);
}

.SwordProductImageCounter {
  width: 24px;
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 38px;
  text-align: center;
}

.SwordProductModelInfo {
  position: absolute;
  left: 610px;
  top: 558px;
  width: 282px;

  color: #8C8C8C;
  font-family: "e-Ukraine", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.SwordProductModelLabel {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.72px;
}


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

.SwordProductInfo {
  position: absolute;
  right: 0;
  top: 124px;
  width: 510px;
  height: 600px;
  text-align: right;
}

.SwordProductColor {
  width: 64px;
  height: 64px;
  position: absolute;
  left: -70px;
  top: 0;

  background: #463331;
  border: 1px solid #292929;
  border-radius: 9999px;
}

.SwordProductDrop {
  position: absolute;
  right: 0;
  top: -13px;

  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 64px;
  font-weight: 500;
  line-height: 72px;
  white-space: nowrap;
}

.SwordProductDrop strong {
  font-family: "Space Mono", monospace;
  font-size: 68px;
  font-weight: 700;
  line-height: 72px;
}

.SwordProductName {
  margin: 0;
  position: absolute;
  right: 0;
  top: 75px;

  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 56px;
  white-space: nowrap;
}

.SwordProductPrice {
  position: absolute;
  right: 0;
  top: 179px;

  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 44px;
  white-space: nowrap;
}

.SwordProductDescription {
  position: absolute;
  right: 0;
  top: 279px;

  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 38px;
  text-align: right;
  white-space: nowrap;
}

.SwordProductSize {
  position: absolute;
  right: 0;
  top: 511px;
  height: 90px;
}

.SwordProductSizeLabel {
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 38px;
  margin-bottom: 16px;
}

.SwordProductSizeOption {
  width: 64px;
  height: 36px;
  margin-left: auto;
  display: block;

  border: 0;
  border-radius: 10px;
  background: #E8E8E8;
  color: #0A0A0A;

  font-family: "e-Ukraine", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.72px;
  cursor: pointer;
}


/* =========================================================
   SIZE GUIDE
   ========================================================= */

.SwordProductSizeGuide {
  width: 1200px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 1165px;
  transform: translateX(-50%);
}

.SwordProductSizeGuide h2 {
  width: 401px;
  margin: 0;
  position: absolute;
  left: 399px;
  top: 0;

  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.72px;
  text-align: center;
}

.SwordProductSizeGuideVisual {
  width: 237px;
  height: 188px;
  position: absolute;
  left: 0px;
  top: 100px;

  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.SwordProductSizeGuideVisual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.SwordProductTable {
  width: 920px;
  position: absolute;
  left: 281px;
  top: 118px;

  display: grid;
  grid-template-columns: repeat(4, 230px);
  grid-auto-rows: 84px;
}

.SwordProductTableHeader,
.SwordProductTableValue {
  display: flex;
  align-items: center;
  justify-content: center;

  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  text-align: center;
}

.SwordProductTableHeader {
  font-size: 28px;
  font-weight: 400;
  line-height: 38px;
}

.SwordProductTableValue {
  font-size: 28px;
  font-weight: 500;
  line-height: 38px;
}

/* Table dividers */
.SwordProductTableHeader {
  border-bottom: 6px solid #1C1C1C;
}

.SwordProductTableHeader:nth-child(1),
.SwordProductTableHeader:nth-child(2),
.SwordProductTableHeader:nth-child(3) {
  border-right: 6px solid #1C1C1C;
}

.SwordProductTableValue:nth-child(5),
.SwordProductTableValue:nth-child(6),
.SwordProductTableValue:nth-child(7) {
  border-right: 6px solid #1C1C1C;
}


/* =========================================================
   PURCHASE
   ========================================================= */

.SwordProductPurchase {
  width: 600px;
  height: 150px;
  position: absolute;
  left: 50%;
  top: 1513px;
  transform: translateX(-50%);

  text-align: center;
}

.SwordProductAddButton {
  width: 393.9px;
  height: 76.7px;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);

  border: 0;
  border-radius: 19.5px;
  background: #E8E8E8;
  color: #0A0A0A;

  font-family: "e-Ukraine", sans-serif;
  font-size: 31.2px;
  font-weight: 500;
  line-height: 41.6px;
  letter-spacing: 0.94px;

  cursor: pointer;
  text-decoration: none;
}

.SwordProductAddButton:hover {
  background: #F2F2F0;
}

.SwordProductStock {
  position: absolute;
  width: 215px;
  left: 50%;
  top: 92px;
  transform: translateX(-50%);

  color: #8C8C8C;
  font-family: "e-Ukraine", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}


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

.SwordProductFooter {
  width: 100%;
  height: 280px;
  position: absolute;
  left: 0;
  top: 1877.7px;
  overflow: hidden;
  background: #141414;
}

.SwordProductFooterLine {
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  top: 164.7px;
  background: #292929;
}

.SwordProductFooterBrand {
  position: absolute;
  left: 120px;
  top: 42.7px;

  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

.SwordProductFooterTagline {
  position: absolute;
  left: 120px;
  top: 82.7px;

  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.SwordProductFooterCopyright {
  position: absolute;
  left: 120px;
  top: 188.7px;

  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.SwordProductFooterDrop {
  position: absolute;
  left: 120px;
  top: 222.7px;

  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.SwordProductFooterNav {
  position: absolute;
  left: 460px;
  top: 32.7px;
  width: 520px;

  display: grid;
  grid-template-columns: 260px 260px;
  grid-template-rows: 32px 32px;
  row-gap: 34px;
}

.SwordProductFooterNav a {
  width: 260px;
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.48px;
  text-align: center;
  text-decoration: none;
}

.SwordProductSocials {
  position: absolute;
  right: 120px;
  top: 32.7px;
  width: 199px;

  display: flex;
  flex-direction: column;
  gap: 34px;
}

.SwordProductSocial {
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.48px;
  text-decoration: none;
}

.SwordProductSocialIcon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}

.SwordProductSocialIcon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.SwordProductLanguage {
  position: absolute;
  right: 120px;
  top: 206.3px;
  width: 144px;
  height: 36px;

  display: flex;
  gap: 16px;
}

.SwordProductLanguage button {
  width: 64px;
  height: 36px;
  border: 0;
  border-radius: 10px;

  font-family: "e-Ukraine", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.72px;
  cursor: pointer;
}

.SwordProductLanguage .is-inactive {
  background: #242424;
  color: #818181;
}

.SwordProductLanguage .is-active {
  background: #E8E8E8;
  color: #0A0A0A;
}


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

@media (max-width: 1199px) {
  .SwordProductPage {
    min-height: 1800px;
  }

  .SwordProductHeader {
    width: calc(100% - 48px);
    grid-template-columns: repeat(3, 1fr);
    column-gap: 16px;
  }

  .SwordProductLogo,
  .SwordProductNavLink,
  .SwordProductCart {
    width: 100%;
  }

  .SwordProductNavLink,
  .SwordProductCartText {
    font-size: 20px;
  }

  .SwordProductBreadcrumb {
    left: 24px;
    transform: none;
  }

  .SwordProductMain {
    width: calc(100% - 48px);
  }

  .SwordProductImageArea {
    left: 0;
    transform: scale(0.78);
    transform-origin: left top;
  }

  .SwordProductInfo {
    right: 0;
    transform: scale(0.78);
    transform-origin: right top;
  }

  .SwordProductSizeGuide {
    width: calc(100% - 48px);
  }

  .SwordProductFooterCopyright,
  .SwordProductFooterDrop,
  .SwordProductFooterBrand,
  .SwordProductFooterTagline {
    left: 48px;
  }

  .SwordProductFooterNav {
    left: 50%;
    transform: translateX(-50%);
  }

  .SwordProductSocials,
  .SwordProductLanguage {
    right: 48px;
  }
}


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

@media (max-width: 767px) {
  .SwordProductPage {
    min-height: 1900px;
  }

  .SwordProductHeader {
    width: calc(100% - 32px);
    height: 64px;
    top: 40px;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 32px 32px;
    column-gap: 16px;
    row-gap: 8px;
  }

  .SwordProductLogo {
    width: 100%;
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .SwordProductLogo img {
    width: 140px;
  }

  .SwordProductNavLink {
    width: 100%;
    grid-column: 2;
    grid-row: 1;
    font-size: 14px;
    line-height: 20px;
  }

  .SwordProductCart {
    display: none;
  }

  .SwordProductBreadcrumb {
    left: 16px;
    top: 120px;
    font-size: 16px;
    line-height: 24px;
  }

  .SwordProductMain {
    width: calc(100% - 32px);
    height: 1030px;
    top: 165px;
  }

  .SwordProductImageArea {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: min(100%, 586px);
    height: 640px;
  }

  .SwordProductImageFrame {
    width: 100%;
    height: min(520px, 86vw);
    left: 0;
    top: 0;
    border-radius: 48px;
  }

  .SwordProductImageControls {
    left: 50%;
    top: calc(min(520px, 86vw) + 20px);
    transform: translateX(-50%);
    width: 220px;
  }

  .SwordProductModelInfo {
    left: 50%;
    top: calc(min(520px, 86vw) + 104px);
    transform: translateX(-50%);
    width: 282px;
    text-align: center;
  }

  .SwordProductInfo {
    width: 100%;
    height: 430px;
    right: auto;
    left: 0;
    top: 700px;
    transform: none;
    text-align: right;
  }

  .SwordProductColor {
    width: 48px;
    height: 48px;
    right: auto;
    left: 0;
    top: 4px;
  }

  .SwordProductDrop {
    top: 0;
    right: 0;
    font-size: clamp(38px, 11vw, 54px);
    line-height: 1.05;
  }

  .SwordProductDrop strong {
    font-size: clamp(42px, 12vw, 58px);
    line-height: 1.05;
  }

  .SwordProductName {
    top: 70px;
    right: 0;
    font-size: clamp(27px, 8vw, 42px);
    line-height: 1.15;
  }

  .SwordProductPrice {
    top: 130px;
    right: 0;
    font-size: clamp(22px, 6.5vw, 32px);
    line-height: 1.2;
  }

  .SwordProductDescription {
    top: 190px;
    right: 0;
    font-size: 19px;
    line-height: 28px;
  }

  .SwordProductSize {
    top: 315px;
    right: 0;
  }

  .SwordProductSizeLabel {
    font-size: 19px;
    line-height: 28px;
  }

  .SwordProductSizeOption {
    width: 56px;
    height: 34px;
    font-size: 18px;
  }

  .SwordProductSizeGuide {
    width: calc(100% - 32px);
    height: 420px;
    top: 1220px;
  }

  .SwordProductSizeGuide h2 {
    width: 100%;
    left: 0;
    top: 0;
    font-size: 20px;
    line-height: 28px;
  }

  .SwordProductSizeGuideVisual {
    display: none;
  }

  .SwordProductTable {
    width: 100%;
    left: 0;
    top: 70px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 70px;
  }

  .SwordProductTableHeader,
  .SwordProductTableValue {
    font-size: 13px;
    line-height: 20px;
  }

  .SwordProductPurchase {
    width: calc(100% - 32px);
    height: 150px;
    top: 1580px;
  }

  .SwordProductAddButton {
    width: min(100%, 393.9px);
    height: 64px;
    border-radius: 16px;
    font-size: 20px;
    line-height: 40px;
    letter-spacing: 0.6px;
  }

  .SwordProductStock {
    top: 80px;
    font-size: 16px;
    line-height: 24px;
  }

  .SwordProductFooter {
    height: 500px;
    top: 1710px;
  }

  .SwordProductFooterLine {
    top: 270px;
  }

  .SwordProductFooterBrand {
    left: 16px;
    top: 30px;
    font-size: 20px;
    line-height: 28px;
  }

  .SwordProductFooterTagline {
    left: 16px;
    top: 65px;
    font-size: 15px;
    line-height: 24px;
  }

  .SwordProductFooterNav {
    left: 16px;
    top: 125px;
    width: calc(100% - 32px);
    transform: none;
    grid-template-columns: 1fr 1fr;
    row-gap: 21px;
  }

  .SwordProductFooterNav a {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
  }

  .SwordProductSocials {
    right: 16px;
    top: 225px;
    width: auto;
    gap: 16px;
  }

  .SwordProductSocial {
    font-size: 16px;
    line-height: 24px;
    height: 28px;
  }

  .SwordProductLanguage {
    left: 16px;
    right: auto;
    top: 310px;
  }

  .SwordProductFooterCopyright {
    left: 16px;
    top: 390px;
    font-size: 14px;
    line-height: 22px;
  }

  .SwordProductFooterDrop {
    left: 16px;
    top: 420px;
    font-size: 14px;
    line-height: 22px;
  }
}

/* =========================================================
   GALLERY ARROW PRESS FEEDBACK
   Short physical press: shrink + lighten, then return.
   ========================================================= */

.SwordProductArrow {
  transition: background-color 120ms ease-out;
}

.SwordProductArrow.is-pressed {
  animation: swordArrowPress 180ms ease-out;
}

@keyframes swordArrowPress {
  0% {
    transform: scale(1);
    background-color: #141414;
  }

  35% {
    transform: scale(0.90);
    background-color: #292929;
  }

  100% {
    transform: scale(1);
    background-color: #141414;
  }
}