/*
 * Cart panel ("Your Cart") and cart page on phones.
 * Loaded on its own, after the main stylesheet, so it needs no asset build.
 *
 * On a wide screen each cart line is a table row: item | price | qty | subtotal, under column
 * headings. On a phone the headings are hidden and the columns were simply stacked, so the
 * unit price and the line subtotal looked like the same price written twice.
 * Here each line becomes: the item, then "Price: ..." in small text, then the quantity
 * buttons with "Subtotal: ..." beside them. The two labels come from the layout
 * (--cart-label-price / --cart-label-subtotal), in the page's language.
 */
@media (max-width: 767px) {
  .your_cart_modal .cart_item,
  .cart_page .cart_item {
    padding: 14px;
    border-radius: 16px;
    margin-bottom: 12px;
  }
  .your_cart_modal .cart_item > .row,
  .cart_page .cart_item > .row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    row-gap: 10px;
    column-gap: 12px;
    margin: 0;
  }
  .your_cart_modal .cart_item > .row > [class*="col-"],
  .cart_page .cart_item > .row > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
  }
  /* 1: the item (picture, name, remove / wishlist) */
  .your_cart_modal .cart_item > .row > :nth-child(1),
  .cart_page .cart_item > .row > :nth-child(1) {
    grid-column: 1 / -1;
  }
  .your_cart_modal .cart_item .cart_icon img,
  .cart_page .cart_item .cart_icon img {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    object-fit: contain;
    background: #f3f5fb;
    border-radius: 10px;
    margin: 0;
    margin-inline-end: 12px;
  }
  .your_cart_modal .cart_item .card_body,
  .cart_page .cart_item .card_body {
    min-width: 0;
  }
  .your_cart_modal .cart_item .card_body h5,
  .cart_page .cart_item .card_body h5 {
    font-size: 1rem;
    line-height: 1.35;
    margin: 0 0 6px;
  }
  .your_cart_modal .cart_item .card_body .option,
  .cart_page .cart_item .card_body .option {
    justify-content: flex-start;
    gap: 16px;
  }
  .your_cart_modal .cart_item .card_body .option a,
  .cart_page .cart_item .card_body .option a {
    font-size: 0.9rem;
    margin: 0;
  }

  /* 2: the unit price, small, with its label */
  .your_cart_modal .cart_item > .row > :nth-child(2),
  .cart_page .cart_item > .row > :nth-child(2) {
    grid-column: 1 / -1;
  }
  .your_cart_modal .cart_item .cart_price,
  .cart_page .cart_item .cart_price {
    text-align: start;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.4;
  }
  .your_cart_modal .cart_item .cart_price::before,
  .cart_page .cart_item .cart_price::before {
    content: var(--cart-label-price, "Price") ": ";
  }
  .your_cart_modal .cart_item .cart_price h4,
  .your_cart_modal .cart_item .cart_price h6,
  .cart_page .cart_item .cart_price h4,
  .cart_page .cart_item .cart_price h6 {
    display: inline;
    margin: 0;
    margin-inline-end: 8px;
    color: inherit;
    font-size: 0.9rem;
    font-weight: 400;
  }

  /* 3 and 4: quantity buttons, with the line subtotal beside them */
  .your_cart_modal .cart_item > .row > :nth-child(3),
  .cart_page .cart_item > .row > :nth-child(3) {
    grid-column: 1;
  }
  .your_cart_modal .cart_item > .row > :nth-child(4),
  .cart_page .cart_item > .row > :nth-child(4) {
    grid-column: 2;
  }
  .your_cart_modal .cart_item .increase_decrease,
  .cart_page .cart_item .increase_decrease {
    width: 122px;
    margin: 0;
  }
  .your_cart_modal .cart_item .cart_total,
  .cart_page .cart_item .cart_total {
    text-align: end;
  }
  .your_cart_modal .cart_item .cart_total::before,
  .cart_page .cart_item .cart_total::before {
    content: var(--cart-label-subtotal, "Subtotal");
    display: block;
    color: #6b7280;
    font-size: 0.78rem;
    line-height: 1.2;
  }
  .your_cart_modal .cart_item .cart_total h4,
  .cart_page .cart_item .cart_total h4 {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0;
  }
}

/* phones: readable text on the panel's buttons and summary */
@media (max-width: 600px) {
  .your_cart_modal .items_in_cart .items_cart_option {
    margin-top: 18px;
  }
  .your_cart_modal .items_in_cart .items_cart_option a,
  .your_cart_modal .items_in_cart .place_order,
  .summery_box .place_order {
    font-size: 16px;
    line-height: 1.3;
    padding: 13px 12px;
  }
  .your_cart_modal .items_in_cart .summery_box {
    margin: 22px 0;
    padding: 18px 20px;
  }
  .your_cart_modal .items_in_cart .summery_box h5 {
    font-size: 20px;
    font-weight: 700;
  }
  .your_cart_modal .items_in_cart .summery_box li,
  .your_cart_modal .items_in_cart .summery_box li span {
    font-size: 15px;
  }
}