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

Space Vanta Theme 1.0

Module:
Cart Item Information

File:
public/cart/cs/information.css

Version:
1.1

Phase:
CART-FRAME-001

Responsibilities:

- Product title
- Product SKU
- Information typography
- Information hierarchy

Does NOT handle:

- Cart layout
- Product image
- Pricing
- Quantity
- Remove
- Variant matching

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


/* =================================================
01. INFORMATION
================================================= */

.sv-cart-item__info {

  display: flex;

  flex-direction: column;

  min-width: 0;
}


/* =================================================
02. PRODUCT TITLE
================================================= */

.sv-cart-item__title {

  margin: 0;
  padding: 0;

  font-size:
    clamp(19px, 1.55vw, 24px);

  line-height: 1.22;

  font-weight: 500;

  letter-spacing:
    -0.008em;

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


/* =================================================
03. TITLE LINK
================================================= */

.sv-cart-item__title-link {

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

  text-decoration: none;

  transition:
    opacity var(--sv-transition-fast, 160ms ease),
    color var(--sv-transition-fast, 160ms ease);
}


.sv-cart-item__title-link:hover {

  opacity: 0.72;
}


/* =================================================
04. SKU
================================================= */

.sv-cart-item__sku {

  margin-top: 7px;

  font-size: 11px;

  line-height: 1.5;

  letter-spacing: 0.055em;

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

  opacity: 0.68;
}


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

@media (max-width: 767px) {

  .sv-cart-item__title {

    /*
         * Slightly larger than the previous mobile
         * version so the Product Frame has a clear
         * information anchor.
         */
    font-size: 17px;

    line-height: 1.24;

    letter-spacing:
      -0.006em;
  }


  .sv-cart-item__sku {

    margin-top: 5px;

    font-size: 10px;

    line-height: 1.45;

    letter-spacing: 0.055em;
  }
}


/* =================================================
06. VERY SMALL MOBILE
================================================= */

@media (max-width: 390px) {

  .sv-cart-item__title {

    font-size: 16px;
  }
}