/* =========================================
   CART DRAWER
========================================= */

body.drawer-open {
  overflow: hidden;
}


.cart-drawer {

  position:
    fixed;

  z-index:
    100;

  top:
    0;

  right:
    0;

  width:
    min(
      460px,
      100%
    );

  height:
    100dvh;

  display:
    flex;

  flex-direction:
    column;

  background:
    white;

  box-shadow:
    -20px
    0
    70px
    rgba(0, 0, 0, .20);

  transform:
    translateX(100%);

  transition:
    transform .28s ease;

}


.cart-drawer.open {

  transform:
    translateX(0);

}


/* =========================================
   CART HEADER
========================================= */

.cart-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  flex-shrink:
    0;

  padding:
    24px;

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

}


.cart-header h2 {

  margin:
    0;

  font-size:
    1.3rem;

}


.cart-close {

  width:
    40px;

  height:
    40px;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    10px;

  color:
    var(--ink);

  background:
    transparent;

  font-size:
    2rem;

  line-height:
    1;

}


.cart-close:hover {

  color:
    var(--red);

  background:
    var(--surface);

}


/* =========================================
   CART ITEMS
========================================= */

.cart-items {

  flex:
    1;

  min-height:
    0;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  padding:
    12px
    24px;

}


.cart-empty {

  height:
    100%;

  display:
    grid;

  place-content:
    center;

  justify-items:
    center;

  text-align:
    center;

  color:
    var(--muted);

}


.cart-empty span {
  font-size: 3rem;
}


.cart-empty strong {

  margin-top:
    14px;

  color:
    var(--ink);

}


.cart-empty p {

  margin:
    8px
    0
    0;

  font-size:
    .82rem;

}


/* =========================================
   CART ITEM
========================================= */

.cart-item {

  display:
    grid;

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

  gap:
    14px;

  align-items:
    center;

  padding:
    16px
    0;

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

}


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


/* =========================================
   CART ITEM IMAGE
========================================= */

.cart-item-image {

  width:
    72px;

  height:
    72px;

  overflow:
    hidden;

  flex-shrink:
    0;

  border-radius:
    10px;

  background:
    #171717;

}


.cart-item-image img {

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

}


/* =========================================
   CART ITEM CONTENT
========================================= */

.cart-item-name {

  margin:
    0
    0
    5px;

  font-size:
    .85rem;

  font-weight:
    800;

}


.cart-item-price {

  color:
    var(--muted);

  font-size:
    .75rem;

}


/* =========================================
   QUANTITY CONTROL
========================================= */

.qty-control {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  margin-top:
    8px;

}


.qty-control button {

  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

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

  border-radius:
    7px;

  color:
    var(--ink);

  background:
    white;

  font-size:
    1rem;

  font-weight:
    700;

}


.qty-control button:hover {

  color:
    white;

  background:
    var(--red);

  border-color:
    var(--red);

}


.qty-control strong {

  min-width:
    20px;

  text-align:
    center;

  font-size:
    .8rem;

}


/* =========================================
   ITEM TOTAL
========================================= */

.cart-item-total {

  font-weight:
    900;

  font-size:
    .82rem;

  text-align:
    right;

  white-space:
    nowrap;

}


/* =========================================
   REMOVE ITEM
========================================= */

.remove-item {

  display:
    block;

  margin:
    7px
    0
    0
    auto;

  padding:
    0;

  border:
    0;

  color:
    var(--muted);

  background:
    transparent;

  font-size:
    .7rem;

}


.remove-item:hover {

  color:
    var(--red);

}


/* =========================================
   CART SUMMARY
========================================= */

.cart-summary {

  flex-shrink:
    0;

  padding:
    22px
    24px
    28px;

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

  background:
    white;

}


.cart-summary > div {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    20px;

  margin-bottom:
    18px;

  font-weight:
    900;

}


.checkout-button {

  width:
    100%;

}


/* =========================================
   BACKDROP
========================================= */

.drawer-backdrop {

  position:
    fixed;

  z-index:
    90;

  inset:
    0;

  background:
    rgba(0, 0, 0, .55);

  opacity:
    0;

  pointer-events:
    none;

  transition:
    opacity .28s ease;

}


.drawer-backdrop.open {

  opacity:
    1;

  pointer-events:
    auto;

}


/* =========================================
   CART RESPONSIVE
========================================= */

@media (max-width: 760px) {

  .cart-drawer {

    width:
      min(
        100%,
        460px
      );

  }


  .cart-header {

    padding:
      20px
      18px;

  }


  .cart-items {

    padding:
      8px
      18px;

  }


  .cart-summary {

    padding:
      18px
      18px
      24px;

  }

}


@media (max-width: 480px) {

  .cart-item {

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

    gap:
      10px;

  }


  .cart-item-image {

    width:
      64px;

    height:
      64px;

  }


  .cart-item-name {

    font-size:
      .82rem;

  }


  .cart-item-price {

    font-size:
      .7rem;

  }


  .cart-item-total {

    font-size:
      .78rem;

  }

}