/* =========================================================
   HOUSE OF SVARA — CART
   ========================================================= */

.cart-hero {
  padding:
    4.5rem
    max(6vw, 2rem)
    3.5rem;

  text-align: center;

  background:
    linear-gradient(
      135deg,
      #f7efe8 0%,
      #ead8c4 48%,
      #dbc1cf 100%
    );
}


.cart-hero h1 {
  margin: 0;

  color: var(--purple-950);

  font-size:
    clamp(
      3.2rem,
      6vw,
      5.5rem
    );

  font-weight: 500;
}


.cart-hero > p:last-child {
  margin:
    1rem auto 0;

  color: var(--muted);
}


.cart-page {
  width:
    min(
      1240px,
      calc(100% - 2rem)
    );

  margin: 0 auto;

  padding:
    5rem 0 7rem;
}

/* Respect the HTML hidden state.
   .cart-layout uses display:grid, so make the empty/populated
   cart states mutually exclusive explicitly. */
.cart-layout[hidden],
.cart-empty[hidden] {
  display: none !important;
}
.cart-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    360px;

  gap: 2rem;

  align-items: start;
}


.cart-items-panel,
.cart-summary {
  border:
    1px solid
    var(--line);

  border-radius: 26px;

  background: white;

  box-shadow:
    0 14px 42px
    rgba(42,16,59,.07);
}


.cart-items-panel {
  padding: 2rem;
}


.cart-heading {
  display: flex;

  align-items: end;
  justify-content: space-between;

  gap: 1rem;

  padding-bottom: 1.5rem;

  border-bottom:
    1px solid
    var(--line);
}


.cart-heading h2,
.cart-summary h2 {
  font-size: 2.5rem;
  font-weight: 500;
}


#cart-count {
  color: var(--muted);

  font-size: .85rem;
}


.cart-item {
  display: grid;

  grid-template-columns:
    110px
    minmax(0,1fr)
    auto
    120px;

  gap: 1.4rem;

  align-items: center;

  padding: 1.5rem 0;

  border-bottom:
    1px solid
    var(--line);
}


.cart-item:last-child {
  border-bottom: 0;
}


.cart-item-image {
  width: 110px;
  height: 130px;

  padding: 7px;

  border-radius: 16px;

  overflow: hidden;

  background:
    var(--beige-100);
}


.cart-item-image img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


.cart-item-info h3 {
  margin: 0 0 .4rem;

  color: var(--purple-950);

  font-size: 1.45rem;
}


.cart-item-variant,
.cart-item-code {
  display: block;

  color: var(--muted);

  font-size: .75rem;
}


.cart-remove {
  margin-top: .7rem;

  padding: 0;

  border: 0;

  background: transparent;

  color: var(--purple-700);

  font-size: .74rem;
  font-weight: 700;

  text-decoration: underline;
}


.cart-item-quantity > span,
.cart-item-price > span {
  display: block;

  margin-bottom: .45rem;

  color: var(--muted);

  font-size: .68rem;
}


.quantity-control {
  display: flex;

  align-items: center;

  border:
    1px solid
    var(--line);

  border-radius: 999px;

  overflow: hidden;

  background: white;
}


.quantity-control button {
  width: 34px;
  height: 34px;

  border: 0;

  background: transparent;

  color: var(--purple-900);
}


.quantity-control button:disabled {
  opacity: .35;
}


.quantity-control strong {
  min-width: 28px;

  text-align: center;

  font-size: .8rem;
}


.cart-item-price {
  text-align: right;
}


.cart-item-price strong {
  display: block;

  color: var(--purple-900);

  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  font-size: 1rem;
}


.cart-summary {
  position: sticky;

  top: 125px;

  padding: 2rem;
}


.summary-row {
  display: flex;

  justify-content: space-between;

  gap: 1rem;

  padding: 1.1rem 0;

  border-bottom:
    1px solid
    var(--line);
}


.summary-row strong {
  color: var(--purple-900);
}


.summary-shipping > span:last-child {
  text-align: right;

  font-weight: 600;
}


.summary-shipping small {
  display: block;

  color: var(--muted);

  font-size: .65rem;
  font-weight: 400;
}


.cart-summary-note {
  margin: 1.3rem 0;

  color: var(--muted);

  font-size: .75rem;
  line-height: 1.6;
}


.cart-checkout-button {
  width: 100%;
}


.cart-checkout-button:disabled {
  opacity: .55;

  cursor: not-allowed;

  transform: none;
}


.checkout-coming-note {
  margin: .7rem 0 0;

  text-align: center;

  color: var(--muted);

  font-size: .68rem;
}


.cart-continue-link {
  display: block;

  margin-top: 1.4rem;

  text-align: center;

  color: var(--purple-800);

  font-size: .78rem;
  font-weight: 700;
}


.cart-empty {
  max-width: 650px;

  margin: 0 auto;

  padding: 4rem 2rem;

  text-align: center;

  border:
    1px solid
    var(--line);

  border-radius: 28px;

  background: white;
}


.cart-empty h2 {
  font-size: 2.8rem;
}


.cart-empty p {
  color: var(--muted);

  margin-bottom: 1.7rem;
}


@media (max-width: 900px) {

  .cart-layout {
    grid-template-columns: 1fr;
  }


  .cart-summary {
    position: static;
  }

}


@media (max-width: 640px) {

  .cart-page {
    padding:
      3rem 0 5rem;
  }


  .cart-items-panel {
    padding: 1.25rem;
  }


  .cart-item {
    grid-template-columns:
      82px
      1fr;

    gap: 1rem;
  }


  .cart-item-image {
    width: 82px;
    height: 100px;
  }


  .cart-item-quantity {
    grid-column: 2;
  }


  .cart-item-price {
    grid-column: 2;

    text-align: left;
  }


  .cart-heading {
    align-items: start;
  }

}
.cart-stock-error {
  grid-column: 2 / -1;

  margin:
    -0.4rem 0
    0.5rem;

  padding:
    0.7rem 0.9rem;

  border:
    1px solid
    rgba(154, 59, 51, 0.18);

  border-radius: 12px;

  background:
    #fff4f1;

  color:
    #8a332c;

  font-size: 0.74rem;
  font-weight: 600;
}


@media (max-width: 640px) {

  .cart-stock-error {
    grid-column:
      1 / -1;
  }

}