/*
================================================

Space Vanta Theme 1.0

Module:
Cart

File:
public/cart/cs/layout.css

Version:
1.1

Phase:
CART-FRAME-001

Responsibilities:

- Cart page layout
- Cart content width
- Cart item desktop structure
- Cart item mobile structure
- Cart summary placement
- Responsive layout

Does NOT handle:

- Product typography
- Image visual treatment
- Price typography
- Quantity styling
- Remove styling

================================================
*/


/* =================================================
01. CART ROOT
================================================= */

.sv-cart {
  width: 100%;
}


.sv-cart-content {
  width: min(100%,
      var(--sv-container-max, 1440px));

  margin: 0 auto;

  padding:
    var(--sv-space-10, 64px) var(--sv-container-gutter-desktop, 34px) var(--sv-space-12, 96px);
}


/* =================================================
02. CART HEADER
================================================= */

.sv-cart-header {
  width: 100%;
  margin-bottom: var(--sv-space-9, 48px);
}


.sv-cart-header__title {
  margin: 0;
  padding: 0;

  color:
    var(--sv-color-text-primary);

  font-size:
    clamp(28px, 3vw, 44px);

  line-height: 0.95;

  font-weight: 500;

  letter-spacing:
    0.015em;
}


/* =================================================
03. CART ITEMS
================================================= */

.sv-cart-items {
  width: 100%;
}


.sv-cart-items__list {
  display: flex;
  flex-direction: column;

  gap:
    clamp(42px, 5vw, 72px);

  width: 100%;
}


/* =================================================
04. CART ITEM — DESKTOP
================================================= */

.sv-cart-item {
  position: relative;

  display: grid;

  /*
     * Keep the existing spatial split.
     *
     * Image remains visually dominant,
     * Information gets more usable width.
     */
  grid-template-columns:
    minmax(300px, 42%) minmax(0, 1fr);

  column-gap:
    clamp(34px, 5vw, 72px);

  align-items: stretch;

  width: 100%;
  min-width: 0;
}


/* =================================================
05. IMAGE / INFORMATION DIVIDER
================================================= */

.sv-cart-item__divider {
  position: absolute;

  top: 0;
  bottom: 0;

  left:
    calc(42% + (clamp(34px, 5vw, 72px) / 2));

  width: 1px;

  background:
    linear-gradient(to bottom,
      transparent,
      rgba(110, 118, 126, 0.28) 14%,
      rgba(110, 118, 126, 0.28) 86%,
      transparent);

  pointer-events: none;
}


/* =================================================
06. INFORMATION POSITION
================================================= */

.sv-cart-item__information {
  min-width: 0;

  /*
     * Desktop information should occupy a
     * meaningful visual proportion of the image
     * rather than sit as a small text cluster.
     */
  align-self: center;

  width: 100%;

  max-width: 720px;

  padding-left:
    clamp(8px, 1vw, 18px);
}


/* =================================================
07. SUMMARY
================================================= */

.sv-cart-summary {
  width: 100%;

  margin-top:
    clamp(56px, 7vw, 96px);

  padding-left: 0;


  box-sizing: border-box;
}


.sv-cart-summary__divider {
  width: 100%;
  height: 1px;

  margin-bottom:
    var(--sv-space-6, 24px);

  background:
    linear-gradient(to right,
      transparent,
      rgba(110, 118, 126, 0.32),
      transparent);
}


.sv-cart-summary__actions {
  display: flex;
  flex-direction: column;

  gap: var(--sv-space-3, 12px);

  margin-top:
    var(--sv-space-6, 24px);
}


/* =================================================
08. MOBILE
================================================= */

@media (max-width: 767px) {

  .sv-cart-content {

    padding:
      32px var(--sv-container-gutter-mobile, 20px) 64px;
  }


  .sv-cart-header {

    margin-bottom:
      30px;
  }


  .sv-cart-header__title {

    font-size: 30px;
    line-height: 0.95;
  }


  .sv-cart-items__list {

    gap: 18px;
  }


  /* ---------------------------------------------
       Mobile Product Frame
       --------------------------------------------- */

  .sv-cart-item {

    /*
         * The Cart Item itself becomes the Product Frame.
         *
         * 34% image
         * 66% information
         */
    grid-template-columns:
      minmax(0, 36%) minmax(0, 64%);

    column-gap: 0;

    align-items: stretch;

    width: 100%;

    padding:
      14px;

    box-sizing: border-box;

    border:
      1px solid rgba(126, 134, 143, 0.34);

    border-radius:
      var(--sv-radius-md, 4px);

    background:
      linear-gradient(145deg,
        rgba(239, 240, 241, 0.92),
        rgba(216, 219, 222, 0.62));

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 8px 24px rgba(54, 60, 68, 0.055);

    overflow: hidden;
  }


  /*
     * Subtle metallic reflection.
     * No glass effect.
     * No strong blue glow.
     */

  .sv-cart-item::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
      linear-gradient(112deg,
        transparent 22%,
        rgba(255, 255, 255, 0.32) 46%,
        rgba(157, 180, 205, 0.07) 51%,
        transparent 68%);

    transform:
      translateX(-120%);

    transition:
      transform 700ms var(--sv-ease-brand, cubic-bezier(.22, .61, .36, 1));
  }


  @media (hover: hover) and (pointer: fine) {

    .sv-cart-item:hover::before {

      transform:
        translateX(120%);
    }
  }


  /*
     * Mobile no longer uses the desktop divider.
     */

  .sv-cart-item__divider {

    display: none;
  }


  /*
     * Information occupies the remaining 66%.
     */

  .sv-cart-item__information {

    align-self: stretch;

    width: 100%;
    max-width: none;

    min-width: 0;

    padding-left: 14px;

    box-sizing: border-box;
  }


  /*
     * Summary returns to normal document flow.
     */

  .sv-cart-summary {

    margin-top: 42px;

    padding-left: 0;
  }


  .sv-cart-summary__divider {

    margin-bottom: 20px;
  }


  .sv-cart-summary__actions {

    gap: 10px;

    margin-top: 20px;
  }
}


/* =================================================
09. VERY SMALL MOBILE
================================================= */

@media (max-width: 390px) {

  .sv-cart-content {

    padding-left: 14px;
    padding-right: 14px;
  }


  .sv-cart-item {

    padding: 11px;
  }


  .sv-cart-item__information {

    padding-left: 11px;
  }
}


/* =================================================
10. REDUCED MOTION
================================================= */

@media (prefers-reduced-motion: reduce) {

  .sv-cart-item::before {

    transition: none;
  }
}