.cart #cart { display: block; } #cart { display: none; } #cart .steps { width: 100%; border-bottom: 1px solid #666; font-size: 0; display: flex; flex-direction: row; } #cart .steps div { display: flex; font-size: 1rem; text-align: center; color: #888; width: 33%; position:relative; height: 48px; justify-content: center; align-items: center; } #cart .steps div span { pointer-events: none; } .summary_step, .shipping_step { border-right: 1px solid #666; } #cart.summary .summary_step, #cart.payment .payment_step, #cart.shipping .shipping_step { color: #000; } #cart_summary, #cart_shipping, #cart_payment, #cart_confirm, #cart_thanks, #cart_error { height: calc(100vh - 187px); overflow: hidden; position: relative; } .vscroll #cart_summary, .vscroll #cart_shipping, .vscroll #cart_payment, .vscroll #cart_confirm, .vscroll #cart_thanks, .vscroll #cart_error { overflow: auto; } #cart.summary #cart_summary { display: block } #cart_summary { display: none; } .full .cart_body { display: block; } .empty .cart_empty { display: block; } #cart h1 .full_msg, #cart h1 .empty_msg { display: none } .cart_body { display: none; } .cart_empty { display: none; text-align: center; margin: 0; } #cart.payment #cart_payment { display: block } #cart_payment { display: none; } #cart.shipping #cart_shipping { display: block } #cart_shipping { display: none; } #cart.confirm #cart_confirm { display: block } #cart_confirm { display: none; } #cart_confirm .shipping_address, #cart_confirm .shipping_method, #cart_confirm .payment_name, #cart_confirm .payment_method { width: calc(100vw - 30px); margin: 0 auto; } #cart_thanks { display: none; } #cart_error { display: none; } #cart.thanks #cart_thanks, #cart.error #cart_error { display: flex; align-items: center; justify-content: center; } #cart .copy { min-height:50px; max-width: 50%; text-align: center; font-size: 1.125rem; } .summary-container { top:0px; } .billing-container { min-height:calc(100vh - 210px); top:16px; } #cart h3 { padding-left: 5px; height: 48px; display: flex; justify-content: flex-start; align-items: center; font-size: 1rem; } .cart_item_row { display:table; position:relative; width:calc(100vw - 30px); margin:0 auto; box-sizing:border-box; padding-top:20px; } .cart_item_info, .cart_item_price { display:table-cell; vertical-align:bottom; box-sizing:border-box } .cart_item_image { display:table-cell; vertical-align:middle; box-sizing:border-box } .cart_item_image img { max-width:calc(33vw - 25px); padding-right:30px; } .cart_item_info { padding-bottom:5px; position:relative; width:100% } .cart_item_price { text-align:right; position:relative; padding-bottom:5px; padding-left:5px; } .cart_item_price .remove { display:block; width:48px; height:48px; border:1px solid #b2b2b2; float:right; margin-bottom:10px; position:relative; } .cart_item_price .remove:after { content:''; width:1px; height:48px; background:#333; position:absolute; top:50%; left:50%; z-index:3; transform-origin:top left; transform:rotate(45deg) translateX(-50%) translateY(-50%) } .cart_item_price .remove:before { content:''; width:1px; height:48px; background:#333; position:absolute; top:50%; left:50%; z-index:3; transform-origin:top left; transform:rotate(-45deg) translateX(-50%) translateY(-50%) } .cart_item_price .price { font-size: 1rem; font-weight:bold; display:block } .cart_item_info .sku { font-size: 1rem; font-weight:bold; display:block; } .cart_item_info .title { font-size: 1rem; font-weight:bold; display:block; line-height:1.4em; text-transform:uppercase; } .cart_item_info .type { font-size: 1rem; font-weight:bold; display:block; text-transform:capitalize; } .cart_item_info .meta { padding-top:5px; letter-spacing: 0.047rem; font-size:0.875rem; } .order_section .rows { width:calc(100vw - 30px); margin:0 auto; } .order_section h2 { width:calc(100vw - 30px); margin:15px auto; text-decoration:underline; font-size: 0.688rem; } .order_section_container { width:calc(100vw - 30px); margin:15px auto 2px; } .cart-summary { width:calc(100vw - 30px); margin:0 auto; display:table; color:#666; font-size: 1rem; } .cart-summary-row { display:table-row; } .cart-summary span { display:table-cell; padding-top:20px; vertical-align:bottom; } .order_section .cart-summary-row span { padding-top:1px; } .order_section .cart-summary { padding-top:15px; } .order_section .cart-summary-row:last-child > span { padding-top:15px!important; font-weight:bold!important; } .order_section .cart-summary .cart-summary-row span:nth-of-type(2) { color:#000; } #orders .order_section { padding-bottom: 16px; border-bottom: 1px solid #666; } .cart-summary-row span:not(.label) { text-align:right } .cart-summary-row .label { font-weight:bold } .cart-summary-row:last-child { color:#000; } .dropdown-wrapper { position:relative; text-align:right; width:calc(100vw - 10px); margin:0 auto 20px 0; box-sizing:border-box; display: flex; flex-direction: column; } .dropdown-wrapper .add_edit { padding:10px; letter-spacing:0.5px; font-size: 0.75rem; color:#a9a9a9; box-sizing:border-box; } .dropdown-wrapper .dropdown { font-size: 1rem; box-sizing:border-box; display: flex; justify-content: center; align-items: center; text-align: center; height: 48px; margin-left: 3px; padding:0; border:1px solid #a9a9a9; position:relative; } .dropdown-wrapper .dropdown::before { content:''; box-sizing:border-box; right:25px; width:1px; top:50%; transform:translateY(-50%) rotate(45deg); height:12px; background:#a9a9a9; position:absolute; z-index:999; transform-origin:bottom left; } .dropdown-wrapper .dropdown::after { content:''; box-sizing:border-box; right:25px; width:1px; top:50%; transform:translateY(-50%) rotate(-45deg); transform-origin:bottom right; height:12px; background:#a9a9a9; position:absolute; z-index:999; } #cart_shipping .address { display: none; } .address .save_as_default { display: none; } #cart_shipping h3 { margin-left:5px; margin-bottom:6px; } #cart .cc_confirm h3 { justify-content: center } #cart_shipping input:first-child { margin-top:10px } #cart_shipping .half-input input { margin-top:0px } #cart .scroll, #payment .scroll, #shipping .scroll, #signup .scroll { min-height:calc(100% + 250px) }