@import "../components/_form-afGafjG.css";
@import "../components/_modal-kHB7fex.css";

.cart-product picture {
  width: 48px;
  height: 48px;
}

#page.ecommerce.cart section.cart-container {
  --size-aside: 350px;
  width: calc(100% - var(--space-l) * 2);
  margin: var(--space-l);
  display: flex;
  align-items: start;
  gap: var(--space-l);
}

#page.ecommerce.cart section.cart-container .cart-legend {
  padding: var(--space-s);
}

#page.ecommerce.cart section.cart-container .cart-table {
  width: calc(100% - var(--size-aside));
}

#page.ecommerce.cart section.cart-container .cart-table .cart-details,
#page.ecommerce.cart section.cart-container .cart-table .cart-header {
  padding: var(--space-s);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
}

#page.ecommerce.cart section.cart-container .cart-table .cart-details .cart-product-info picture,
#page.ecommerce.cart section.cart-container .cart-table .cart-header .cart-product-info picture {
  aspect-ratio: 1/1;
  object-fit: contain;
  max-width: fit-content;
  width: 48px;
  height: 48px;
}

#page.ecommerce.cart section.cart-container aside {
  width: var(--size-aside);
  position: sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: calc(var(--header-main) + var(--space-m));
}

#page.ecommerce.cart section.cart-container aside button,
#page.ecommerce.cart section.cart-container aside .button {
  width: 100%;
}

#page.ecommerce.cart section.cart-container aside .payement svg.icon {
  --size-svg: 30px;
}

#page.ecommerce.checkout #address-show,
#page.ecommerce.checkout #shipping-show,
#page.ecommerce.checkout #payment-show {
  display: none;
}

#page.ecommerce.checkout .same-address:has(input[type=checkbox]:checked)~.billing-address {
  display: none;
  visibility: collapse;
}

#page.ecommerce.checkout aside {
  position: sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: calc(var(--header-main) + var(--space-m));
  height: fit-content;
}

@media screen and (max-width: 1024px) {
  #page.ecommerce.cart section.cart-container {
    --size-aside: 100%;
    width: calc(100% - var(--space-m) * 2);
    margin: var(--space-m);
    flex-direction: column;
    gap: var(--space-m);
  }

  #page.ecommerce.cart section.cart-container .cart-table {
    width: 100%;
  }

  #page.ecommerce.cart section.cart-container .cart-table .cart-header {
    display: none;
  }

  #page.ecommerce.cart section.cart-container .cart-table .cart-details {
    padding: var(--space-s);
    align-items: flex-start;
  }

  #page.ecommerce.cart section.cart-container aside {
    position: relative;
    top: auto;
  }
}

@media screen and (max-width: 768px) {
  #page.ecommerce.checkout .grid-elements {
    flex-direction: column-reverse;
  }

  #page.ecommerce.checkout .grid-elements aside {
    top: 0;
    position: relative;
  }

  #page.ecommerce.checkout .grid-elements aside .shadow {
    box-shadow: none;
  }
}

@media screen and (max-width: 640px) {
  #page.ecommerce.cart section.cart-container .cart-table .cart-details {
    padding: var(--space-l);
  }

  #page.ecommerce.cart section.cart-container .cart-table .cart-details>*:nth-child(1) {
    width: auto;
  }

  #page.ecommerce.cart section.cart-container .cart-table .cart-details>*:nth-child(1) .price-total {
    display: inline-flex;
    visibility: visible;
  }

  #page.ecommerce.cart section.cart-container .cart-table .cart-details>*:nth-child(2) {
    width: 42px;
    flex-direction: column-reverse;
    align-content: center;
  }

  #page.ecommerce.cart section.cart-container .cart-table .cart-details>*:nth-child(2) fieldset {
    justify-content: center;
    flex-direction: column-reverse;
  }

  #page.ecommerce.cart section.cart-container .cart-table .cart-details>*:nth-child(3) {
    display: none;
    visibility: hidden;
  }
}