/* =========================================================
   JADORE WEB STUDIO — MONE'S CURVY CLOSET CART
   Self-contained cart layout modeled after success.html
   ========================================================= */
* { box-sizing: border-box; }

body.cart-page {
  min-height: 100dvh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)),
    url("../images/background.png") center top / cover fixed;
  color: #fff;
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}

.cart-page a { color: inherit; text-decoration: none; }

.cart-header {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cart-brand { line-height: .85; }
.cart-brand span {
  display: block;
  color: #ff0a78;
  font-family: "Bebas Neue", sans-serif;
  font-size: 34px;
  letter-spacing: .02em;
}
.cart-brand small {
  display: block;
  margin-top: 9px;
  color: #00e7e7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .42em;
}

.continue-shopping {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.continue-shopping:hover { color: #00e7e7; }

.cart-main { min-height: 0; padding: 24px 0 58px; }
.cart-wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.cart-heading { margin-bottom: 20px; }
.cart-eyebrow {
  margin: 0 0 8px;
  color: #00e7e7;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cart-heading h1 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: .96;
  letter-spacing: -.04em;
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .65fr);
  gap: 28px;
  align-items: start;
}
.cart-items { display: grid; gap: 12px; }

.cart-item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  background: rgba(3,3,3,.94);
  border: 1.5px solid #ff0a78;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(255,10,120,.08);
}
.cart-item:nth-child(even) {
  border-color: #00e7e7;
  box-shadow: 0 0 12px rgba(0,231,231,.08);
}
.cart-item-image {
  width: 112px;
  height: 112px;
  object-fit: contain;
  display: block;
  background: #f4f4f4;
  border-radius: 8px;
}
.cart-item-copy { min-width: 0; }
.cart-item-name {
  margin: 0 0 4px;
  font-family: "Playfair Display", serif;
  font-size: 21px;
  line-height: 1.1;
}
.cart-unit-price { color: #ff0a78; font-weight: 900; }
.cart-variants { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 11px; }
.cart-variant {
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #e4e4e4;
  font-size: 10px;
  font-weight: 800;
}
.cart-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.cart-controls button {
  min-width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.22);
  background: #0d0d0d;
  color: #fff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.cart-controls button:hover { border-color: #00e7e7; color: #00e7e7; }
.cart-controls .remove-button {
  width: auto;
  padding: 0 12px;
  border-color: #ff0a78;
  color: #ff0a78;
  font-size: 10px;
  text-transform: uppercase;
}
.cart-quantity { min-width: 24px; text-align: center; font-weight: 900; }
.cart-line-total { padding-left: 12px; font-size: 16px; white-space: nowrap; }

.order-summary {
  position: sticky;
  top: 20px;
  padding: 26px;
  background: rgba(3,3,3,.96);
  border: 1.5px solid #00e7e7;
  border-radius: 14px;
  box-shadow: 0 0 16px rgba(0,231,231,.14);
}
.order-summary h2 {
  margin: 0 0 18px;
  font-family: "Playfair Display", serif;
  font-size: 29px;
}
.summary-row[hidden] { display: none; }
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
}
.subtotal-row strong { color: #00e7e7; font-size: 17px; }
.muted-row { color: #c7c7c7; }
.muted-row span:last-child { max-width: 130px; text-align: right; }

.discount-block { padding: 14px 0 16px; border-top: 1px solid rgba(255,255,255,.12); }
.discount-block label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.discount-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.discount-row input {
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 5px;
  background: #0d0d0d;
  color: #fff;
  font: inherit;
  font-size: 12px;
  outline: none;
}
.discount-row input:focus { border-color: #00e7e7; }
.discount-row button {
  height: 40px;
  padding: 0 16px;
  border: 1px solid #ff0a78;
  border-radius: 5px;
  background: transparent;
  color: #ff0a78;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}
.discount-row button:hover { background: #ff0a78; color: #fff; }
.discount-message { min-height: 16px; margin: 7px 0 0; color: #aaa; font-size: 10px; }

.checkout-note { margin: 16px 0; color: #aaa; font-size: 11px; line-height: 1.55; }
.checkout-button {
  width: 100%;
  min-height: 48px;
  border: 1px solid #ff0a78;
  background: #ff0a78;
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
}
.checkout-button:hover { background: transparent; color: #ff0a78; }
.checkout-button:disabled { opacity: .55; cursor: not-allowed; }
.checkout-message { min-height: 18px; margin: 9px 0 0; color: #ff7fb5; font-size: 11px; }
.secure-note { margin-top: 14px; color: #bdbdbd; font-size: 10px; text-align: center; }
.secure-note i { color: #00e7e7; }

.cart-empty {
  padding: 44px 28px;
  background: rgba(3,3,3,.94);
  border: 1.5px solid #ff0a78;
  border-radius: 14px;
  text-align: center;
}
.cart-empty i { color: #ff0a78; font-size: 36px; }
.cart-empty h3 { margin: 12px 0 7px; font-family: "Playfair Display", serif; font-size: 28px; }
.cart-empty p { color: #bbb; }
.cart-empty a { display: inline-block; margin-top: 8px; color: #00e7e7; font-size: 11px; font-weight: 900; text-transform: uppercase; }

body.cart-page footer { margin-top: 0 !important; }

@media (max-width: 850px) {
  .cart-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }
}
@media (max-width: 560px) {
  .cart-header, .cart-wrap { width: min(100% - 20px, 1180px); }
  .cart-header { align-items: flex-start; }
  .continue-shopping { font-size: 9px; text-align: right; }
  .cart-item { grid-template-columns: 78px minmax(0,1fr); gap: 12px; }
  .cart-item-image { width: 78px; height: 90px; }
  .cart-line-total { grid-column: 2; padding-left: 0; }
  .cart-item-name { font-size: 18px; }
  .order-summary { padding: 20px; }
}


/* =========================================================
   MONE'S CURVY CLOSET — CART / SUCCESS HEADER MATCH + COMPACT HEADING
   ========================================================= */

/* The global .site-header from style.css now supplies the same
   navigation/header used on success.html. */
.cart-main {
  min-height: 0;
  padding: 22px 0 58px !important;
}

.cart-topline {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 22px;
}

.continue-shopping {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cart-heading {
  margin-bottom: 16px !important;
}

.cart-heading h1 {
  margin: 0 !important;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.6rem, 4.5vw, 3.7rem) !important;
  line-height: .96 !important;
  letter-spacing: -.04em;
}

.cart-eyebrow {
  margin-bottom: 6px !important;
}

.cart-layout {
  margin-top: 0 !important;
}

@media (max-width: 850px) {
  .cart-main { padding-top: 18px !important; }
  .cart-topline { margin-bottom: 18px; }
}

@media (max-width: 560px) {
  .cart-heading h1 {
    font-size: clamp(2.2rem, 11vw, 3rem) !important;
  }
}

/* =========================================================
   MONE'S CURVY CLOSET — CART PAGE FINAL POLISH 
   ========================================================= */

/* 1. CIMONE' LOGO — HOT PINK */
body.cart-page .site-header .brand span {
  color: #ff0a78 !important;
}

/* GRINNAGE STAYS TEAL */
body.cart-page .site-header .brand small {
  color: #00e7e7 !important;
}

/* 2. HEADER SOCIAL ICONS — HOT PINK */
body.cart-page .site-header .header-socials a,
body.cart-page .site-header .header-socials i {
  color: #ff0a78 !important;
}

/* Optional little teal hover */
body.cart-page .site-header .header-socials a:hover,
body.cart-page .site-header .header-socials a:hover i {
  color: #00e7e7 !important;
}


/* =========================================================
   3. ALIGN PRODUCT CARDS WITH "READY TO CHECKOUT"
   ========================================================= */

/*
   The cards currently have a tiny bit of extra horizontal
   indentation. Pull ONLY the left product column over.
*/
@media (min-width: 851px) {
  body.cart-page .cart-layout > section {
    margin-left: -14px !important;
  }


  /* =======================================================
     4. MOVE ORDER SUMMARY DOWN TO FIRST PRODUCT CARD
     ======================================================= */

  body.cart-page .order-summary {
    margin-top: 20px !important;
  }
}

/* =========================================================
   MONE'S CURVY CLOSET — CART BUTTON NEON HOVER EFFECTS
   ========================================================= */

/* Smooth animation for all cart buttons */
.cart-controls button,
#apply-discount-button,
.checkout-button {
  transition:
    background-color .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease !important;
}

/* =========================================================
   PRODUCT QUANTITY + REMOVE BUTTONS
   Pink product rows
   ========================================================= */

.cart-item:nth-child(odd) .cart-controls button:hover {
  border-color: #ff0a78 !important;
  color: #fff !important;
  background: rgba(255, 10, 120, .14) !important;

  box-shadow:
    0 0 6px rgba(255, 10, 120, .95),
    0 0 14px rgba(255, 10, 120, .65),
    0 0 26px rgba(255, 10, 120, .35) !important;

  transform: translateY(-1px);
}

/* =========================================================
   PRODUCT QUANTITY + REMOVE BUTTONS
   Teal product rows
   ========================================================= */

.cart-item:nth-child(even) .cart-controls button:hover {
  border-color: #00e7e7 !important;
  color: #fff !important;
  background: rgba(0, 231, 231, .14) !important;

  box-shadow:
    0 0 6px rgba(0, 231, 231, .95),
    0 0 14px rgba(0, 231, 231, .65),
    0 0 26px rgba(0, 231, 231, .35) !important;

  transform: translateY(-1px);
}

/* =========================================================
   APPLY DISCOUNT — PINK NEON
   ========================================================= */

#apply-discount-button:hover {
  background: #ff0a78 !important;
  border-color: #ff0a78 !important;
  color: #fff !important;

  box-shadow:
    0 0 7px rgba(255, 10, 120, 1),
    0 0 16px rgba(255, 10, 120, .75),
    0 0 30px rgba(255, 10, 120, .45) !important;

  transform: translateY(-1px);
}

/* =========================================================
   SECURE CHECKOUT — BIG MONEY BUTTON GLOW 😂
   ========================================================= */

.checkout-button:hover {
  background: #ff0a78 !important;
  border-color: #ff0a78 !important;
  color: #fff !important;

  box-shadow:
    0 0 8px rgba(255, 10, 120, 1),
    0 0 20px rgba(255, 10, 120, .85),
    0 0 38px rgba(255, 10, 120, .55) !important;

  transform: translateY(-2px);
}