.woocommerce-cart { .site-main { .woocommerce { display: flex; flex: 1; flex-wrap: wrap; .cart-empty { width: 100%; font-size: 0.8em; .dropcap { float: none; margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } }//.cart-empty .woocommerce-notices-wrapper { width: 100%; }//.woocommerce-notices-wrapper .woocommerce-cart-form { width: calc(100% - 430px); padding-right: 60px; table.shop_table { border: none; margin: 0; border-collapse: collapse; border-radius: 0; thead { display: none; }//thead tbody { tr { background: none; }//tr td { padding: 20px 10px; .remove { font-family: $primary_font; color: $white_color !important; background: rgba($black_color, 0.5); width: 20px; height: 20px; font-size: 1em; line-height: 18px; font-weight: 400; text-indent: 1px; &:hover { background: red; } }//.remove img { width: 75px; }//img a { text-transform: uppercase; color: $black_color; font-size: 0.7em; font-weight: 700; letter-spacing: 1px; }//a .woocommerce-Price-amount { color: rgba($black_color, 0.5); font-weight: 400; }//.woocommerce-Price-amount input[type="number"] { max-width: 100px; width: 100%; border: none; font-weight: 600; font-size: 1em; }//input[type="number"] &.product-subtotal { .woocommerce-Price-amount { color: $black_color; font-weight: 700; }//.woocommerce-Price-amount }//&.product-subtotal &.actions { border-top: none; padding-left: 0; padding-right: 0; .coupon { border: 1px dashed rgba($black_color, 0.15); position: relative; padding-left: 50px; width: 350px; &::before { content: ""; background-image: url('data:image/svg+xml; utf-8, '); width: 25px; height: 25px; position: absolute; top: 12px; left: 20px; background-repeat: no-repeat; background-position: center; } #coupon_code { background: none; width: calc(100% - 50px); border: none; margin-right: 0; }//#coupon_code .button { border-radius: 0; padding: 0; background-color: transparent; border-left: 1px dashed rgba($black_color, 0.15); width: 50px; height: 50px; overflow: hidden; text-indent: 60px; white-space: nowrap; background-image: url('data:image/svg+xml;utf-8, '); background-repeat: no-repeat; background-position: center; background-size: 18px; &:hover { background-color: $secondary_color; background-image: url('data:image/svg+xml;utf-8, '); } }//.button }//.coupon > .button { font-size: 0.7em; font-weight: 700; letter-spacing: 1px; padding: 5px 30px; height: 50px; background: $black_color; border-radius: 0; color: $white_color; &:disabled, &:disabled[disabled] { background: $black_color; opacity: 0.2; filter: alpha(opacity=20); } &:hover { background: $secondary_color; } }//> .button }//&.actions }//td }//tbody }//table.shop_table }//.woocommerce-cart-form .cart-collaterals { width: 430px; display: flex; flex: initial; flex-direction: column; overflow: hidden; .cart_totals { float: none; width: 100%; background: #F6F8F8; position: relative; padding: 30px; &::before, &::after { content: ""; background-image: url('images/decoration.png'); position: absolute; top: -10px; left: 0; width: 100%; height: 20px; } &::after { top: auto; bottom: -10px; } > h2 { margin-top: 10px; margin-bottom: 30px; border-bottom: 1px solid rgba($black_color, 0.05); padding-bottom: 10px; font-size: 0.9em !important; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; } .shop_table { border: none; margin: 0; border-collapse: collapse; border-radius: 0; tr { background: none; th, td { border: none; font-size: 0.8em; color: $black_color; } th { padding-left: 0; } td { padding-right: 0; } &.order-total { border-top: 1px solid rgba($black_color, 0.05); th, td { text-transform: uppercase; padding-top: 20px; } td { text-align: right; } } } }//.shop_table .checkout-button { font-size: 0.7em; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0; border-radius: 0; background: $secondary_color; padding: 20px; &:hover { background: $black_color; } }//.checkout-button }//.cart_totals }//.cart-collaterals }//.woocommerce }//.site-main &:not(.full-width) { .site-main { .woocommerce { .woocommerce-cart-form { width: calc(100% - 320px); padding-right: 40px; } .cart-collaterals { width: 320px; }//.cart-collaterals }//.woocommerce }//.site-main }//&:not(.full-width) }//.woocommerce-cart @include media(lg) { .woocommerce-cart { &:not(.full-width) { .site-main { .woocommerce { .woocommerce-cart-form { width: 100%; padding-right: 0; margin-bottom: 40px; } .cart-collaterals { width: 350px; margin-left: auto; }//.cart-collaterals }//.woocommerce }//.site-main }//&:not(.full-width) }//.woocommerce-cart }//media(lg) @include media(sm) { .woocommerce-cart { .site-main { .woocommerce { flex-direction: column; .woocommerce-cart-form { width: 100%; padding-right: 0; margin-bottom: 40px; }//.woocommerce-cart-form .cart-collaterals { margin-left: auto; }//.cart-collaterals }//.woocommerce }//.site-main }//.woocommerce-cart }//media(sm) @media screen and (max-width: 768px) { .woocommerce #content table.cart .product-thumbnail, .woocommerce table.cart .product-thumbnail, .woocommerce-page #content table.cart .product-thumbnail, .woocommerce-page table.cart .product-thumbnail { display: block; text-align: center !important; } .woocommerce #content table.cart .product-thumbnail::before, .woocommerce table.cart .product-thumbnail::before, .woocommerce-page #content table.cart .product-thumbnail::before, .woocommerce-page table.cart .product-thumbnail::before { display: none; } .woocommerce table.cart td.actions .coupon, .woocommerce-page #content table.cart td.actions .coupon, .woocommerce-page table.cart td.actions .coupon { padding-bottom: 0; } .woocommerce table.cart td.actions .coupon .button, .woocommerce-page #content table.cart td.actions .coupon .button, .woocommerce-page table.cart td.actions .coupon .button { width: 50px; } .woocommerce table.cart td.actions .button, .woocommerce-page #content table.cart td.actions .button, .woocommerce-page table.cart td.actions .button { width: auto; margin-left: auto; } .woocommerce table.shop_table_responsive tr:nth-child(2n) td, .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td { background: none; } } @include media(xs) { .woocommerce-cart { .site-main { .woocommerce { flex-direction: column; .woocommerce-cart-form { padding-right: 0; width: 100%; table.shop_table { tbody { td.actions { .coupon { width: 100%; }//.coupon }//td.actions }//tbody }//table.shop_table }//.woocommerce-cart-form .cart-collaterals { width: 100%; margin-top: 60px; }//.cart-collaterals }//.woocommerce }//.site-main &:not(.full-width) .site-main .woocommerce .cart-collaterals { width: 100%; } }//.woocommerce-cart }//media(xs)