/**
* Responsive winkelwagenpagina (Commerce cart – cart.html)
* Alleen voor de echte winkelwagenpagina, niet voor het mini-cart.
*
* GEBRUIK:
* 1. Kopieer dit bestand naar een plek die vanaf de site bereikbaar is,
* bijv. assets/css/cart-page-responsive.css
* 2. In de MODX-template die de cart-resource gebruikt (de pagina cart.html),
* voeg in de toe:
*
* Of met vast pad:
*/
@media (max-width: 767px) {
.c-checkout-cart .c-cart-items-form,
.c-cart .c-cart-items-form {
overflow: visible;
}
.c-checkout-cart .c-cart-items,
.c-cart .c-cart-items {
width: 100%;
}
.c-checkout-cart .c-cart-items thead,
.c-cart .c-cart-items thead {
display: none !important;
}
.c-checkout-cart .c-cart-items tbody tr,
.c-checkout-cart .c-cart-items tfoot tr,
.c-cart .c-cart-items tbody tr,
.c-cart .c-cart-items tfoot tr {
display: block !important;
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid #e0e0e0;
border-radius: 3px;
background: #f5f5f5;
}
.c-checkout-cart .c-cart-items tbody tr.c-cart-item-even,
.c-checkout-cart .c-cart-items tfoot tr.c-cart-item-even,
.c-cart .c-cart-items tbody tr.c-cart-item-even,
.c-cart .c-cart-items tfoot tr.c-cart-item-even {
background: #ebebeb;
}
.c-checkout-cart .c-cart-items tbody td,
.c-checkout-cart .c-cart-items tfoot td,
.c-cart .c-cart-items tbody td,
.c-cart .c-cart-items tfoot td {
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.5rem 0;
border: none;
text-align: left;
}
.c-checkout-cart .c-cart-items tbody td::before,
.c-checkout-cart .c-cart-items tfoot td::before,
.c-cart .c-cart-items tbody td::before,
.c-cart .c-cart-items tfoot td::before {
content: attr(data-label);
font-weight: bold;
text-transform: uppercase;
font-size: 0.75rem;
color: #555;
flex: 0 0 auto;
}
.c-checkout-cart .c-cart-items tbody td[data-label=""]::before,
.c-checkout-cart .c-cart-items tfoot td[data-label=""]::before,
.c-cart .c-cart-items tbody td[data-label=""]::before,
.c-cart .c-cart-items tfoot td[data-label=""]::before {
display: none;
}
.c-checkout-cart .c-cart-items .c-cart-item-image,
.c-cart .c-cart-items .c-cart-item-image {
justify-content: flex-start;
}
.c-checkout-cart .c-cart-items .c-cart-item-image::before,
.c-cart .c-cart-items .c-cart-item-image::before {
display: none;
}
.c-checkout-cart .c-cart-items .c-cart-item-image img,
.c-cart .c-cart-items .c-cart-item-image img {
max-width: 80px !important;
max-height: 80px !important;
object-fit: contain;
}
.c-checkout-cart .c-cart-items .c-cart-item-name,
.c-cart .c-cart-items .c-cart-item-name {
flex-direction: column;
align-items: flex-start;
}
.c-checkout-cart .c-cart-items .c-cart-item-name::before,
.c-cart .c-cart-items .c-cart-item-name::before {
margin-bottom: 0.25rem;
}
.c-checkout-cart .c-cart-items .c-cart-item-quantity .c-cart-item-quantity-input,
.c-cart .c-cart-items .c-cart-item-quantity .c-cart-item-quantity-input {
width: 4rem;
margin-left: auto;
}
.c-checkout-cart .c-cart-items .c-cart-item-remove,
.c-cart .c-cart-items .c-cart-item-remove {
justify-content: flex-end;
padding-top: 0.75rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.c-checkout-cart .c-cart-items .c-cart-item-remove .c-cart-item-remove-button,
.c-cart .c-cart-items .c-cart-item-remove .c-cart-item-remove-button {
margin-left: auto;
}
.c-checkout-cart .c-cart-items tfoot td,
.c-cart .c-cart-items tfoot td {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
padding-top: 0.75rem;
}
.c-checkout-cart .c-cart-items tfoot td::before,
.c-cart .c-cart-items tfoot td::before {
display: none;
}
.c-checkout-cart .c-cart-items tfoot .c-button,
.c-cart .c-cart-items tfoot .c-button {
width: 100%;
margin: 0;
}
.c-checkout-cart .c-cart-totals td,
.c-checkout-cart .c-cart-totals th,
.c-cart .c-cart-totals td,
.c-cart .c-cart-totals th {
padding: 0.4rem 0.5rem;
font-size: 0.95rem;
}
}