/* ------------------------------------------------------------------
 * porto-10-winkelwagen.css  (10 van 10)
 *
 * De winkelwagenpagina stond nog volledig in Porto-stijl: een zwarte
 * rechthoekige knop naar de checkout terwijl elke andere hoofdknop op de
 * site groen met ronde hoeken is, koppen in kapitalen, en op telefoon-
 * formaat één product dat ruim 700px hoog werd doordat alle kolommen
 * gecentreerd onder elkaar vielen.
 * ------------------------------------------------------------------ */

/* --- 1. Koppen: geen kapitalen meer -------------------------------- */

.checkout-cart-index .page-title-wrapper .page-title,
.checkout-cart-index .cart-summary .summary.title,
.checkout-cart-index .cart-summary .title,
.checkout-cart-index #block-shipping .title strong {
    color: #101828;
    text-transform: none;
}

.checkout-cart-index .page-title-wrapper .page-title {
    font-size: 26px;
    font-weight: 700;
}

.checkout-cart-index .cart-summary .summary.title {
    font-size: 17px;
    font-weight: 700;
}

/* --- 2. Naar de kassa: dezelfde groene knop als overal ------------- */

/* Porto zet hier bijna-zwart (#222529) met rechte hoeken. Op id en met
   dezelfde opbouw als de knop in de lade en de checkout. */
.checkout-cart-index .checkout-methods-items .action.primary.checkout,
.checkout-cart-index .cart-summary .action.primary.checkout,
.cart-empty .action.primary,
.checkout-cart-index .cart-empty .action.primary,
/* Het lege mandje gebruikt een eigen knop: a.action.btn-go-shop. */
.checkout-cart-index .cart-empty .btn-go-shop {
    display: block;
    width: 100%;
    padding: 15px 20px;
    border: 0;
    border-radius: 6px;
    background: #55ba29;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    box-shadow: none;
}

.checkout-cart-index .checkout-methods-items .action.primary.checkout:hover,
.checkout-cart-index .checkout-methods-items .action.primary.checkout:focus,
.checkout-cart-index .cart-summary .action.primary.checkout:hover,
.cart-empty .action.primary:hover,
.cart-empty .action.primary:focus,
.checkout-cart-index .cart-empty .btn-go-shop:hover,
.checkout-cart-index .cart-empty .btn-go-shop:focus {
    background: #4aa423;
    color: #fff;
}

/* Bij een leeg mandje staat de knop midden op de pagina; daar hoort hij
   niet de volle breedte te vullen. */
.checkout-cart-index .cart-empty .btn-go-shop {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* --- 3. Overige knoppen: rustig en gelijk ------------------------- */

.checkout-cart-index .cart.main.actions button,
.checkout-cart-index .cart.main.actions .action,
.checkout-cart-index .action.update,
.checkout-cart-index .action.continue {
    height: auto;
    padding: 10px 16px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #fff;
    color: #344054;
    font-size: 13.5px;
    font-weight: 600;
    text-transform: none;
    box-shadow: none;
}

.checkout-cart-index .cart.main.actions button:hover,
.checkout-cart-index .action.update:hover,
.checkout-cart-index .action.continue:hover {
    border-color: #98a2b3;
    background: #f9fafb;
    color: #101828;
}

.checkout-cart-index .cart.main.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Kortingscode: zelfde knop als de andere hulpacties, en de kop van de
   tabel in gewone tekst in plaats van kapitalen. */
.checkout-cart-index #discount-coupon-form .action.apply,
.checkout-cart-index .cart-discount .action.apply,
.checkout-cart-index .cart-discount .action.cancel {
    padding: 10px 16px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #fff;
    color: #344054;
    font-size: 13.5px;
    font-weight: 600;
    text-transform: none;
    box-shadow: none;
}

.checkout-cart-index #discount-coupon-form .action.apply:hover,
.checkout-cart-index .cart-discount .action.apply:hover {
    border-color: #98a2b3;
    background: #f9fafb;
    color: #101828;
}

/* Magento's eigen regel is `.cart.table-wrapper .cart thead tr th.col`;
   die telt drie elementnamen mee, dus die moeten hier ook in. */
.checkout-cart-index .cart.table-wrapper .cart thead tr th.col {
    color: #667085;
    font-size: 13px;
    font-weight: 600;
    /* capitalize in plaats van none: in het Nederlands en Frans staan de
       vertalingen ("prijs", "prix") met een kleine letter in de taalpakketten. */
    text-transform: capitalize;
}

/* --- 4. Telefoonformaat: één compacte regel per product ------------ */

@media only screen and (max-width: 767px) {
    .checkout-cart-index .cart.table-wrapper .cart.item .col {
        padding: 8px 0;
        text-align: left;
    }

    /* Foto links, naam rechts ernaast in plaats van alles gecentreerd
       onder elkaar. Het label "Item" voegt daar niets toe. */
    .checkout-cart-index .cart.table-wrapper .cart.item .col.item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding-top: 14px;
    }

    .checkout-cart-index .cart.table-wrapper .cart.item .col.item:before {
        display: none;
    }

    .checkout-cart-index .cart.table-wrapper .cart.item .product-item-photo {
        display: block;
        flex: 0 0 72px;
        width: 72px;
        max-width: 72px;
        padding: 0;
        position: static;
    }

    .checkout-cart-index .cart.table-wrapper .cart.item .product-item-details {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
    }

    .checkout-cart-index .cart.table-wrapper .cart.item .product-item-name {
        margin: 0 0 4px;
        font-size: 14px;
        line-height: 1.35;
    }

    /* Prijs, aantal en subtotaal als labelregels: label links, waarde
       rechts, met een dun lijntje ertussen. */
    .checkout-cart-index .cart.table-wrapper .cart.item .col.price,
    .checkout-cart-index .cart.table-wrapper .cart.item .col.qty,
    .checkout-cart-index .cart.table-wrapper .cart.item .col.subtotal {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #eef1f5;
    }

    .checkout-cart-index .cart.table-wrapper .cart.item .col.price:before,
    .checkout-cart-index .cart.table-wrapper .cart.item .col.qty:before,
    .checkout-cart-index .cart.table-wrapper .cart.item .col.subtotal:before {
        float: none;
        width: auto;
        padding: 0;
        color: #667085;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
        text-transform: none;
    }

    .checkout-cart-index .cart.table-wrapper .cart.item .col.qty .control.qty,
    .checkout-cart-index .cart.table-wrapper .cart.item .col.qty .field.qty {
        margin: 0;
    }

    .checkout-cart-index .cart.table-wrapper .cart.item .col.subtotal .price {
        font-size: 16px;
        font-weight: 700;
    }

    /* Bewerken en verwijderen rechts uitgelijnd onder de regel. */
    .checkout-cart-index .cart.table-wrapper .cart.item .item-actions .actions-toolbar {
        display: flex;
        justify-content: flex-end;
        gap: 14px;
        padding: 6px 0 0;
    }
}