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

Space Vanta Theme 1.0

Module:
Cart Item

File:
public/cart/cs/item.css

Version:
1.1

Phase:
CART-FRAME-001

Responsibilities:

- Cart Item internal rhythm
- Information vertical rhythm
- Item action placement

Does NOT handle:

- Overall Cart layout
- Product image
- Product title typography
- SKU typography
- Pricing typography
- Quantity control
- Remove button visual system

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


/* =================================================
01. CART ITEM
================================================= */

.sv-cart-item {
  color:
    var(--sv-color-text-primary);
}


/* =================================================
02. INFORMATION RHYTHM
================================================= */

.sv-cart-item__information {

  display: flex;

  flex-direction: column;

  min-width: 0;

  /*
     * Give the information area enough vertical
     * presence without forcing a fixed height.
     */
  gap:
    var(--sv-space-3, 12px);
}


/* =================================================
03. QUANTITY
================================================= */

.sv-cart-item__quantity {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 2px;
}


.sv-cart-item__quantity-label {

  flex: 0 0 auto;

  font-size: 10px;
  line-height: 1.4;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  opacity: 0.52;
}


/* =================================================
04. ACTIONS
================================================= */

.sv-cart-item__actions {

  display: flex;

  align-items: center;

  justify-content: flex-start;

  margin-top: 2px;
}


/* =================================================
05. MOBILE RHYTHM
================================================= */

@media (max-width: 767px) {

  .sv-cart-item__information {

    /*
         * Mobile frame should use its vertical space
         * naturally instead of stretching around a
         * large image.
         */
    justify-content: flex-start;

    gap: 8px;
  }


  .sv-cart-item__quantity {

    margin-top: 4px;

    gap: 8px;
  }


  .sv-cart-item__actions {

    margin-top: 2px;
  }
}