.wc-block-cart__sidebar { border: 1px solid $core-grey-light-600; border-width: 1px 0; min-width: 15rem; padding-bottom: $gap-largest; } .wc-block-cart__item-count { float: right; } table.wc-block-cart-items th, table.wc-block-cart-items td { // Override Storefront theme gray table background. background: none !important; } table.wc-block-cart-items th { padding: 0.5rem 0; } table.wc-block-cart-items td { border-top: 1px solid $core-grey-light-600; padding: $gap 0; } table.wc-block-cart-items { border-bottom: 1px solid $core-grey-light-600; } .wc-block-cart-items__header { display: none; text-transform: uppercase; } .wc-block-cart-items__header-total, .wc-block-cart-item__total { text-align: right; } .wc-block-cart-item__product-wrapper { display: flex; flex-direction: row; // Fixes a Safari-specific issue - product images display stretched vertically (full image height). // https://stackoverflow.com/questions/57516373/image-stretching-in-flexbox-in-safari align-items: flex-start; } .wc-block-cart-item__product img { max-width: $cart-image-width; } .wc-block-cart-item__product-details { margin-left: $gap; } .wc-block-cart-item__product-name { color: $core-grey-dark-600; font-size: 16px; } .wc-block-cart-item__product-metadata { color: $core-grey-dark-400; font-size: 12px; } .wc-block-cart-item__quantity { display: none; } .wc-block-cart-item__quantity-stacked { display: block; } .wc-block-cart-item__total { vertical-align: bottom; } .wc-block-cart-item__full-price { color: $core-grey-light-800; text-decoration: line-through; } .wc-block-cart__totals-footer { color: #000; font-size: 1.25em; > .wc-block-totals-table-item__label { font-weight: normal; } } // Added extra class and label for specificity. .wc-block-cart fieldset.wc-block-cart__shipping-options-fieldset { background-color: transparent; margin: 0; padding: 0; } .wc-block-cart__shipping-options { .wc-block-radio-control__label { flex-basis: 100%; line-height: 16px; } .wc-block-radio-control__description { flex-basis: 100%; } .wc-block-radio-control__option { padding-left: $gap-large; &:last-child { border-bottom: none; } } .wc-block-radio-control__input { left: 0; top: $gap; } } @include breakpoint( "<782px" ) { .wc-block-cart__totals-title { display: none; } } @include breakpoint( ">782px" ) { .wc-block-cart__sidebar { max-width: 374px; } .wc-block-cart { display: flex; } .wc-block-cart__main { flex-grow: 4; margin-right: 3em; } .wc-block-cart__sidebar { flex-grow: 1; } .wc-block-cart-items { table-layout: fixed; } .wc-block-cart-items__header { display: table-row; } .wc-block-cart-items__header-product { width: 60%; } .wc-block-cart-item__quantity { display: block; } .wc-block-cart-item__quantity-stacked { display: none; } .wc-block-cart-item__product img { margin-left: $gap; } .wc-block-cart-item__total { vertical-align: top; } }