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

.CartPage {
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0A0A0A;
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
}

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

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

.CartLogo {
  width: 260px;
  height: 32px;
  position: absolute;
  left: 0;
  top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.CartHeaderShop,
.CartHeaderHome,
.CartHeaderCart {
  color: #F2F2F0;
  text-decoration: none;
}

.CartHeaderShop {
  width: 260px;
  position: absolute;
  left: 340px;
  top: 24px;
}

.CartHeaderHome {
  width: 260px;
  position: absolute;
  left: 600px;
  top: 24px;
}

.CartHeaderCart {
  width: 260px;
  height: 32px;
  position: absolute;
  left: 940px;
  top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.CartHeaderCartText {
  width: 260px;
  text-align: center;
}

.CartHeaderCart .ShoppingBasket {
  width: 24px;
  height: 24px;
  left: 23px;
  top: 4px;
  position: absolute;
  overflow: hidden;
  transform-origin: center;
}

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

.CartBreadcrumb {
  position: absolute;
  left: 50%;
  top: 136px;
  transform: translateX(-555px);
  color: #8C8C8C;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.48px;
}

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

.CartContent {
  width: 1200px;
  margin: 0 auto;
  padding-top: 360px;
  padding-bottom: 80px;
}

.CartTitleRow {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.CartTitle {
  margin: 0;
  color: #F2F2F0;
  font-size: 28px;
  font-weight: 400;
  line-height: 38px;
}

.CartContinueShopping {
  margin-top: 3px;
  color: #F2F2F0;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   FILLED CART
   ========================================================= */

.CartFilledState {
  width: 100%;
  margin-top: 80px;
}

.CartTableHeader {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 300px 189px;
  color: #8C8C8C;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}

.CartTableHeader > div:nth-child(2) {
  text-align: center;
}

.CartTableHeader > div:nth-child(3) {
  text-align: right;
}

.CartLine {
  width: 100%;
  height: 1px;
  margin-top: 40px;
  background: #292929;
}

.CartProduct {
  min-height: 331px;
  position: relative;
  display: grid;
  grid-template-columns: 274px 1fr 180px 100px 189px;
  column-gap: 30px;
  align-items: center;
}

.CartProductImage {
  width: 274px;
  height: 274px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.CartProductImage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 4px 40px rgba(0, 0, 0, 0.8));
}

.CartProductInfo {
  align-self: center;
}

.CartProductName,
.CartProductPrice {
  color: #F2F2F0;
  font-size: 28px;
  font-weight: 500;
  line-height: 38px;
}

.CartProductSize {
  margin-top: 16px;
  color: #F2F2F0;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.96px;
}

.CartQuantity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  color: #F2F2F0;
  font-size: 24px;
  line-height: 32px;
}

.CartQuantityButton {
  padding: 0;
  border: 0;
  background: transparent;
  color: #F2F2F0;
  font-family: inherit;
  font-size: 28px;
  font-weight: 400;
  line-height: 38px;
  cursor: pointer;
  transition:
    color 300ms ease,
    transform 300ms ease;
}

.CartQuantityButton:hover {
  color: #C63436;
  transform: translateY(-2px);
}

.CartRemove {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  justify-self: center;
  transition: transform 300ms ease;
}

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

.CartRemove:hover {
  transform: translateY(-2px) rotate(-6deg);
}

.CartProductTotal {
  color: #F2F2F0;
  font-size: 28px;
  font-weight: 500;
  line-height: 38px;
  text-align: right;
}

.CartLineBottom {
  margin-top: 0;
}

/* =========================================================
   SUMMARY
   ========================================================= */

.CartSummary {
  min-height: 220px;
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-top: 78px;
}

.CartSummaryNote {
  width: 418px;
  color: #8C8C8C;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.CartSummaryRight {
  width: 418px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.CartSummaryLabel,
.CartSummaryTotal {
  color: #F2F2F0;
  font-size: 28px;
  line-height: 38px;
  text-align: right;
}

.CartSummaryLabel {
  font-weight: 400;
}

.CartSummaryTotal {
  margin-top: 16px;
  font-weight: 500;
}

.CartOrderButton {
  width: 289px;
  height: 59px;
  margin-top: 48px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 15px;
  background: #E8E8E8;
  color: #0A0A0A;
  font-family: inherit;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.72px;
  cursor: pointer;
  overflow: visible;
  transition:
    width 800ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 800ms cubic-bezier(0.22, 1, 0.36, 1),
    color 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.CartOrderButton span {
  position: relative;
  z-index: 2;
  transition:
    color 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.CartOrderButton::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  right: 18px;
  top: 50%;
  z-index: 3;
  background: url("../../images/arrow.svg") center / contain no-repeat;
  opacity: 0;
  transform: translate(-15px, -50%) rotate(180deg);
  transition:
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.CartOrderButton:hover {
  width: 390px;
  background-color: #7F1F1E;
  color: #F2F2F0;
}

.CartOrderButton:hover span {
  transform: translateX(-35px);
}

.CartOrderButton:hover::after {
  opacity: 1;
  transform: translate(0, -50%) rotate(180deg);
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.CartEmptyState {
  width: 100%;
  min-height: 480px;
  margin-top: 105px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.CartEmptyTitle {
  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 56px;
}

.CartEmptyText {
  margin-top: 28px;
  color: #8C8C8C;
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
}

.CartEmptyButton {
  width: 300px;
  height: 59px;
  margin-top: 48px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: #E8E8E8;
  color: #0A0A0A;
  text-decoration: none;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.72px;
  overflow: hidden;
  transition:
    width 800ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.CartEmptyButton span {
  position: relative;
  z-index: 2;
  transition:
    color 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.CartEmptyButton::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  right: 18px;
  top: 50%;
  background: url("../../images/arrow.svg") center / contain no-repeat;
  opacity: 0;
  transform: translate(-15px, -50%) rotate(180deg);
  transition:
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.CartEmptyButton:hover {
  width: 390px;
  background-color: #7F1F1E;
}

.CartEmptyButton:hover span {
  color: #F2F2F0;
  transform: translateX(-35px);
}

.CartEmptyButton:hover::after {
  opacity: 1;
  transform: translate(0, -50%) rotate(180deg);
}

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

.CartFooter {
  width: 100%;
  height: 280px;
  margin-top: auto;
  position: relative;
  overflow: hidden;
  background: #141414;
}

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

.CartFooterBrand {
  position: absolute;
  left: 120px;
  top: 42.7px;
  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

.CartFooterTagline {
  position: absolute;
  left: 120px;
  top: 82.7px;
  color: #F2F2F0;
  font-size: 20px;
  line-height: 30px;
}

.CartFooterCopyright,
.CartFooterDrop {
  position: absolute;
  left: 120px;
  color: #F2F2F0;
  font-size: 20px;
  line-height: 30px;
}

.CartFooterCopyright {
  top: 188.7px;
}

.CartFooterDrop {
  top: 222.7px;
}

.CartFooterNav {
  position: absolute;
  left: 460px;
  top: 32.7px;
  width: 520px;
  display: grid;
  grid-template-columns: 260px 260px;
  grid-template-rows: 32px 32px;
  row-gap: 34px;
}

.CartFooterNav a {
  width: 260px;
  color: #F2F2F0;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.48px;
  text-align: center;
  text-decoration: none;
}

.CartFooterSocials {
  position: absolute;
  right: 120px;
  top: 32.7px;
  width: 199px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.CartFooterSocial {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: #F2F2F0;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.48px;
  text-decoration: none;
}

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

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

.CartFooterLanguage {
  position: absolute;
  right: 120px;
  top: 206.3px;
  width: 144px;
  height: 36px;
  display: flex;
  gap: 16px;
}

.CartFooterLanguage button {
  width: 64px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.72px;
  cursor: pointer;
}

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

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

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

@media (max-width: 1199px) {
  .CartPage {
    min-height: 100vh;
  }

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

  .CartHeaderShop,
  .CartHeaderHome,
  .CartHeaderCart {
    width: calc((100% - 32px) / 3);
  }

  .CartHeaderShop {
    left: calc((100% - 32px) / 3 + 16px);
  }

  .CartHeaderHome {
    left: calc(2 * ((100% - 32px) / 3 + 16px));
  }

  .CartHeaderCart {
    left: auto;
    right: 0;
  }

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

  .CartProduct {
    grid-template-columns: 220px minmax(180px, 1fr) 150px 50px 150px;
    column-gap: 20px;
  }

  .CartProductImage {
    width: 220px;
    height: 220px;
  }

  .CartFooterBrand,
  .CartFooterTagline,
  .CartFooterCopyright,
  .CartFooterDrop {
    left: 48px;
  }

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

  .CartFooterSocials,
  .CartFooterLanguage {
    right: 48px;
  }
}

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

@media (max-width: 767px) {
  .CartPage {
    min-height: 100vh;
    overflow: hidden;
  }

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

  .CartLogo {
    width: 100%;
    left: 0;
    top: 0;
  }

  .CartLogo img {
    width: 140px;
  }

  .CartHeaderShop,
  .CartHeaderHome {
    width: 50%;
    font-size: 14px;
    line-height: 20px;
  }

  .CartHeaderShop {
    left: 50%;
    top: 0;
  }

  .CartHeaderHome {
    left: 50%;
    top: 32px;
  }

  .CartHeaderCart {
    display: none;
  }

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

  .CartContent {
    width: calc(100% - 32px);
    padding-top: 220px;
    padding-bottom: 48px;
  }

  .CartTitleRow {
    display: block;
  }

  .CartTitle {
    font-size: 20px;
    line-height: 28px;
  }

  .CartContinueShopping {
    display: inline-block;
    margin-top: 20px;
    font-size: 16px;
    line-height: 24px;
  }

  .CartFilledState {
    margin-top: 48px;
  }

  .CartTableHeader {
    grid-template-columns: 1fr 90px;
    font-size: 14px;
    line-height: 20px;
  }

  .CartTableHeader > div:first-child {
    grid-column: 1 / -1;
  }

  .CartTableHeader > div:nth-child(2) {
    text-align: left;
    margin-top: 12px;
  }

  .CartTableHeader > div:nth-child(3) {
    text-align: right;
    margin-top: 12px;
  }

  .CartLine {
    margin-top: 24px;
  }

  .CartProduct {
    min-height: 0;
    padding: 28px 0;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
  }

  .CartProductImage {
    width: 120px;
    height: 120px;
  }

  .CartProductInfo {
    align-self: start;
  }

  .CartProductName,
  .CartProductPrice {
    font-size: 17px;
    line-height: 24px;
  }

  .CartProductSize {
    margin-top: 10px;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.5px;
  }

  .CartQuantity {
    justify-content: flex-start;
    gap: 24px;
    font-size: 18px;
    line-height: 26px;
  }

  .CartQuantityButton {
    font-size: 24px;
    line-height: 30px;
  }

  .CartRemove {
    justify-self: end;
    align-self: center;
  }

  .CartProductTotal {
    grid-column: 2;
    font-size: 20px;
    line-height: 28px;
  }

  .CartSummary {
    min-height: 0;
    display: block;
    padding-top: 40px;
  }

  .CartSummaryNote {
    width: 100%;
    font-size: 14px;
    line-height: 22px;
  }

  .CartSummaryRight {
    width: 100%;
    margin-top: 36px;
    align-items: flex-end;
  }

  .CartSummaryLabel,
  .CartSummaryTotal {
    font-size: 20px;
    line-height: 28px;
  }

  .CartSummaryTotal {
    margin-top: 10px;
  }

  .CartOrderButton {
    width: 220px;
    height: 52px;
    margin-top: 28px;
    font-size: 17px;
    line-height: 24px;
  }

  .CartOrderButton:hover {
    width: 280px;
  }

  .CartEmptyState {
    min-height: 400px;
    margin-top: 80px;
  }

  .CartEmptyTitle {
    font-size: clamp(26px, 8vw, 40px);
    line-height: 1.2;
  }

  .CartEmptyText {
    margin-top: 20px;
    font-size: 16px;
    line-height: 25px;
  }

  .CartEmptyButton {
    width: 250px;
    height: 52px;
    margin-top: 32px;
    font-size: 16px;
    line-height: 24px;
  }

  .CartEmptyButton:hover {
    width: 290px;
  }

  .CartFooter {
    height: 500px;
  }

  .CartFooterLine {
    top: 270px;
  }

  .CartFooterBrand,
  .CartFooterTagline,
  .CartFooterCopyright,
  .CartFooterDrop {
    left: 16px;
  }

  .CartFooterBrand {
    top: 30px;
    font-size: 20px;
    line-height: 28px;
  }

  .CartFooterTagline {
    top: 65px;
    font-size: 15px;
    line-height: 24px;
  }

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

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

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

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

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

  .CartFooterCopyright {
    top: 390px;
    font-size: 14px;
    line-height: 22px;
  }

  .CartFooterDrop {
    top: 420px;
    font-size: 14px;
    line-height: 22px;
  }
}


/* =========================================================
   CART — SPECIFIC BUTTON FIXES
   ========================================================= */

/* Empty cart: keep the full phrase on one line. */
.CartEmptyButton {
  width: 390px;
  white-space: nowrap;
}

.CartEmptyButton:hover {
  width: 470px;
}

.CartEmptyButton:hover span {
  transform: translateX(-25px);
}

.CartEmptyButton::after {
  right: 28px;
}

/* Filled cart: keep the arrow closer to "ЗАМОВИТИ". */
.CartOrderButton:hover {
  width: 390px;
}

.CartOrderButton:hover span {
  transform: translateX(-20px);
}

.CartOrderButton::after {
  right: 48px;
}

/* Existing product photo — straighten the original image slightly. */
.CartProductImage img {
  transform: rotate(9deg);
  transform-origin: center;
}


/* =========================================================
   CART — STATE VISIBILITY FIX
   The HTML uses the native [hidden] attribute. These explicit
   rules prevent page-specific display:flex from overriding it.
   ========================================================= */

.CartEmptyState[hidden],
.CartFilledState[hidden] {
  display: none !important;
}