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

Space Vanta Theme 1.0

Module:
Cart Summary

File:
public/cart/cs/summary.css

Version:
1.2

Phase:
CART-FRAME-001

Purpose:

- Cart Summary visual hierarchy
- Summary alignment
- Summary spacing
- Summary total presentation
- Summary action structure

Responsibilities:

- Summary visual system
- Summary content alignment
- Summary action hierarchy

Does NOT handle:

- Cart calculation
- Checkout logic
- Cart mutation
- Product item styling

DNA:

Spatial
Geometric
Constructed
Restrained Metallic
Editorial Commerce

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


/* =================================================
01. SUMMARY ROOT
================================================= */

.sv-cart-summary {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  box-sizing: border-box;

  text-align: center;

  color:
    var(
      --sv-color-text-primary,
      #2D2D2B
    );
}


/* =================================================
02. SUMMARY DIVIDER
================================================= */

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

  margin-bottom:
    clamp(28px, 4vw, 42px);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(110, 118, 126, 0.34) 18%,
      rgba(110, 118, 126, 0.22) 50%,
      rgba(110, 118, 126, 0.34) 82%,
      transparent
    );

  opacity: 0.9;
}


/* =================================================
03. ITEM COUNT
================================================= */

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

  margin: 0;

  text-align: center;

  font-size: 10px;

  line-height: 1.5;

  font-weight: 400;

  letter-spacing: 0.105em;

  text-transform: uppercase;

  color:
    var(
      --sv-color-text-secondary,
      #6F6C65
    );

  opacity: 0.62;
}


/* =================================================
04. TOTAL
================================================= */

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

  margin-top: 7px;

  text-align: center;

  font-size: 18px;

  line-height: 1.35;

  font-weight: 400;

  letter-spacing: 0.008em;

  color:
    var(
      --sv-color-text-primary,
      #2D2D2B
    );

  opacity: 0.88;
}


/* =================================================
05. ACTION GROUP
================================================= */

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

  width:
    min(100%, 300px);

  margin-top:
    clamp(24px, 3vw, 32px);

  box-sizing: border-box;

  gap: 0;
}


/* =================================================
06. MOBILE
================================================= */

@media (max-width: 767px) {

  .sv-cart-summary__divider {
    margin-bottom: 24px;
  }


  .sv-cart-summary__count {
    font-size: 9px;

    letter-spacing: 0.095em;
  }


  .sv-cart-summary__total {
    margin-top: 6px;

    font-size: 16px;
  }


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

    margin-top: 22px;
  }
}