/* Default Commerce Styles */ #commerce { padding: 9px 0% 48px 0%; } /* Basket Styles */ #commerce h1 { margin: 0% 0% 0.938rem 0%; padding: 0%; font-family: 'Lato', sans-serif; font-size: 1.5rem; line-height: 2rem; font-weight: 900; text-transform: uppercase; color: #2B2B2B; background-color: transparent; } /* Basket Items Styles */ /* 1A67AB 5389B9 */ #commerce #basket-items { padding: 24px 48px 24px 8px; width: 74%; color: #222222; background-color: transparent; } #commerce #basket-items #basket-count { margin: 0%; display: inline-block; vertical-align: middle; float: none; } #commerce #basket-items #continue-shopping { margin: 0%; width: 28%; display: inline-block; vertical-align: middle; float: none; } #commerce #basket-items #checkout { margin: 0%; padding: 8px 16px; width: 20%; font-size: 1rem; line-height: 1.5rem; font-weight: 400; text-transform: none; display: inline-block; vertical-align: middle; background-color: #1A67AB; border: 1px solid #1A67AB; border-radius: 0px; letter-spacing: 0px; transition: all 0.3s ease; } #commerce #basket-items #checkout:hover { color: #FFFFFF; background-color: #1A67AB; border-color: #1A67AB; } #commerce #basket-items table { margin: 32px 0% 0% 0%; } #commerce #basket-items table th { padding: 12px 8px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; vertical-align: middle; } #commerce #basket-items table th.items { text-align: left; } #commerce #basket-items table td { padding: 12px 8px; vertical-align: middle; } #commerce #basket-items table td.image { padding: 18px 8px; } #commerce #basket-items table td.item strong { font-weight: 900; } #commerce #basket-items table td.item button { display: none; } #commerce #basket-items table td.pricetotal { font-weight: 900; } #commerce #basket-items table td button { margin: 0%; min-width: 24px; text-align: center; } #commerce #basket-items button > span.icon { min-width: 20px; font-size: 0.875rem; line-height: 1.25rem; } #commerce #basket-items div.error_message { margin: 32px 0% 0% 0%; padding: 22px 16px 22px 78px; font-size: 1.063rem; line-height: 1.75rem; position: relative; color: #FFFFFF; background-color: #B72D2D; border-radius: 8px; } #commerce #basket-items div.error_message span.minimum_requirement { margin: 0% 0% 12px 0%; display: block; } #commerce #basket-items div.error_message span.notice { display: block; } #commerce #basket-items div.error_message:before { content: '\f06a'; top: 28px; left: 24px; font-family: 'Font Awesome 5 Pro'; font-size: 2rem; line-height: 2rem; display: block; position: absolute; } /* Basket Summary Styles */ #commerce #basket-summary { padding: 24px 24px 30px 24px; width: 26%; background-color: #F0F0F0; border-radius: 0px; } #commerce #basket-summary #heading { font-size: 1.125rem; line-height: 1.5rem; font-weight: 400; text-transform: uppercase; color: #1A67AB; } #commerce #basket-summary table tr { border-bottom: 1px solid rgba(171,136,143,0.3); } #commerce #basket-summary table th { padding: 12px 8px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; color: #222222; border-bottom: 0px; } #commerce #basket-summary table td { padding: 12px 8px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; color: #222222; border-bottom: 0px; } #commerce #basket-summary table tr:last-of-type { border-bottom: 0px; } #commerce #basket-summary p.delivery_text { font-size: 0.875rem; display: none !important; color: #FFFFFF; } #commerce #basket-summary p.delivery_text strong { margin: 0% 0% 6px 0%; font-weight: 700; display: block; } #commerce #basket-summary br { display: none; } #commerce #basket-summary div.button { margin: 22px 0% 0% 0%; padding: 0%; width: 100%; display: block; text-align: center; background-color: transparent; } #commerce #basket-summary div.button a { padding: 8px 16px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; text-transform: none; color: #FFFFFF; background-color: #5389B9; border: 1px solid #5389B9; border-radius: 0px; letter-spacing: 0px; transition: all 0.3s ease; } #commerce #basket-summary div.button a:hover { color: #FFFFFF; background-color: #7E9DB9; border-color: #7E9DB9; } #commerce #basket-summary button.continue-checkout { margin: 12px 0% 0% 0%; padding: 8px 16px; width: 100%; font-size: 1rem; line-height: 1.5rem; font-weight: 400; text-transform: none; display: block; color: #FFFFFF; background-color: #1A67AB; border: 1px solid #1A67AB; border-radius: 0px; letter-spacing: 0px; transition: all 0.3s ease; } #commerce #basket-summary button.continue-checkout:hover { color: #FFFFFF; background-color: #1A67AB; border-color: #1A67AB; } /* Checkout Details Styles */ #commerce #checkout-details { padding: 0% 8px; } #commerce #checkout-details table { margin: 0%; } #commerce #checkout-details table th { padding: 12px 8px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; vertical-align: middle; } #commerce #checkout-details table th.items { text-align: left; } #commerce #checkout-details table td { padding: 12px 8px; vertical-align: middle; } #commerce #checkout-details table td.image { padding: 18px 8px; } #commerce #checkout-details table td.pricetotal { font-weight: 900; } #commerce #checkout-details h3.order_notes { margin: 16px 0% 0% 0%; padding: 12px 8px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; vertical-align: middle; } #commerce #checkout-details textarea { padding: 8px 12px; font-size: 1em; line-height: 1.25em; border: 1px solid #BABABA; border-radius: 2px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } #commerce #delivery-panel { padding: 0%; border-bottom: 0px; } #commerce #delivery-address { padding: 28px 48px 28px 0%; width: 60%; } #commerce #delivery-address h3 { margin: 16px 0% 0% 0%; padding: 12px 8px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; vertical-align: middle; } #commerce #delivery-address select { margin: 0%; padding: 8px 12px; font-size: 1em; line-height: 1.25em; border: 1px solid #BABABA; border-radius: 2px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } #commerce #delivery-address div.add_address { margin: 0% 0% 0% 12px; } #commerce #delivery-options { padding: 28px 0%; width: 40%; border-left: 0px; } #commerce #delivery-options h3 { margin: 16px 0% 0% 0%; padding: 12px 8px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; vertical-align: middle; } #commerce .guest-checkout-panel { padding: 0% 8px; background-color: transparent; } #commerce .guest-checkout-panel button { padding: 7px 16px 6px 16px; width: auto; font-size: 1rem; line-height: 1.5rem; font-weight: 400; text-transform: none; display: block; background-color: #1A67AB; border: 1px solid #1A67AB; border-radius: 0px; letter-spacing: 0px; transition: all 0.3s ease; } #commerce .guest-checkout-panel button:hover { color: #FFFFFF; background-color: #1A67AB; border-color: #1A67AB; } #commerce #billing-address { padding: 28px 0%; } #commerce #billing-address h3 { margin: 16px 0% 0% 0%; padding: 12px 8px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; vertical-align: middle; } #commerce #billing-address select { margin: 0%; padding: 8px 12px; font-size: 1em; line-height: 1.25em; border: 1px solid #BABABA; border-radius: 2px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } #commerce #billing-address div.add_address { margin: 0% 0% 0% 12px; } #commerce #total-to-pay { padding: 0% 48px 0% 0%; border-top: 0px; } #commerce #total-to-pay h3 { margin: 0%; padding: 0% 8px 12px 8px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; vertical-align: middle; } #commerce #total-to-pay div.promocode { padding: 24px 48px 24px 8px; width: 60%; background-color: transparent; } #commerce #total-to-pay div.promocode p { padding: 0% 0% 16px 8px; } #commerce #total-to-pay div.promocode input { margin: 0%; padding: 8px 12px; font-size: 1em; line-height: 1.25em; border: 1px solid #BABABA; border-radius: 2px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } #commerce #total-to-pay div.promocode button { padding: 7px 16px 6px 16px; width: auto; font-size: 1rem; line-height: 1.5rem; font-weight: 400; text-transform: none; display: block; background-color: #1A67AB; border: 1px solid #1A67AB; border-radius: 0px; letter-spacing: 0px; transition: all 0.3s ease; } #commerce #total-to-pay div.promocode button:hover { color: #FFFFFF; background-color: #1A67AB; border-color: #1A67AB; } #commerce #total-to-pay div.summary { padding: 24px 24px 30px 24px; width: 40%; background-color: #F0F0F0; border: 0px; border-radius: 0px; } #commerce #total-to-pay table tr { border-bottom: 1px solid rgba(171,136,143,0.3); } #commerce #total-to-pay table th { padding: 12px 8px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; color: #222222; border-bottom: 0px; } #commerce #total-to-pay table td { padding: 12px 8px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; color: #222222; border-bottom: 0px; } #commerce #total-to-pay table tr:last-of-type { border-bottom: 0px; } #commerce #total-to-pay button.checkout { margin: 12px 0% 0% 0%; padding: 8px 16px; width: 100%; max-width: 100%; font-size: 1rem; line-height: 1.5rem; font-weight: 400; text-transform: none; display: block; background-color: #1A67AB; border: 1px solid #1A67AB; border-radius: 0px; letter-spacing: 0px; transition: all 0.3s ease; } #commerce #total-to-pay button.checkout:hover { color: #FFFFFF; background-color: #1A67AB; border-color: #1A67AB; } #commerce #total-to-pay div.cta-buttons { padding: 0%; width: 100%; display: block; } #commerce #terms div.terms-group label { margin: 0%; padding: 0% 0% 0% 28px; position: relative; color: #222222; } #commerce #terms div.terms-group input[type=checkbox] { margin: 0%; top: 4px; left: 2px; position: absolute; } div.checkout_address button.add_address_submit { margin-left: 10%; } /* 1240px Resolution Specific Behaviour */ @media only screen and (min-width: 0px) and (max-width: 1240px) { /* Basket Styles */ #commerce h1 { padding: 29px 8px; } /* Basket Items Styles */ #commerce #basket-items { padding: 24px 48px 24px 8px; width: 72%; } /* Basket Summary Styles */ #commerce #basket-summary { width: 28%; } /* Checkout Details Styles */ #commerce #checkout-details { padding: 0% 8px; } #commerce .guest-checkout-panel { padding: 0% 8px; } #commerce #total-to-pay { padding: 0% 8px 0% 0%; } #commerce #total-to-pay div.promocode { padding: 24px 48px 24px 8px; } /* 800px Resolution Specific Behaviour */ } @media only screen and (min-width: 0px) and (max-width: 800px) { /* Basket Styles */ #commerce h1 { padding: 0%; text-align: center; } /* Basket Items Styles */ #commerce #basket-items { padding: 32px 0% 24px 0%; width: 100%; text-align: center; background-color: transparent; } #commerce #basket-items #basket-count { margin: 0% 0% 16px 0%; width: 100%; display: block; } #commerce #basket-items #continue-shopping { width: 48%; } #commerce #basket-items #checkout { width: 48%; } #commerce #basket-items div.item_description { padding: 10% 0% 0% 0%; text-align: left; position: absolute; } #commerce #basket-items td.qty { margin-top: 6px; padding: 0%; max-width: 148px; float: right; clear: none !important; } #commerce #basket-items table td.pricetotal { padding-top: 16px; font-size: 1rem; } #commerce #basket-items div.error_message { padding: 22px 16px; } #commerce #basket-items div.error_message:before { display: none; } #commerce #basket-items table td.image { display: none; } #commerce #basket-items td.item { padding: 32px 0% 0% 0%; width: 100%; } #commerce #basket-items div.item_description { padding: 0%; width: 70%; text-align: left; } #commerce #basket-items table td { padding: 5rem 0% 32px 0%; text-align: left; } #commerce #basket-items table td.pricetotal { margin-top: -64px; padding-top: 0px; } /* Basket Summary Styles */ #commerce #basket-summary { padding: 24px 18px 30px 18px; width: 100%; background-color: #F0F0F0; border-radius: 0px; } /* Checkout Details Styles */ #commerce .checkout-left { padding: 24px 0% 0% 0%; } #commerce #checkout-details { padding: 0%; } #commerce #delivery-address { padding: 0%; width: 100%; } #commerce #delivery-options { padding: 0% 0% 24px 0%; width: 100%; } #commerce .guest-checkout-panel { padding: 0%; } #commerce #billing-address { padding: 0%; } #commerce #billing-address select { float: none; } #commerce #total-to-pay { padding: 0%; } #commerce #total-to-pay div.promocode { padding: 24px 0%; width: 100%; border-bottom: 0px; } #commerce #total-to-pay div.summary { margin: 24px 0% 0% 0%; padding: 24px 18px; width: 100%; } #commerce #total-to-pay div.cta-buttons { float: none; } #commerce #checkout-details td.item { padding-top: 18px; width: 60%; float: left; text-align: left; } #commerce #checkout-details td.line-qty { padding-top: 20px; } #commerce #checkout-details td.pricetotal { margin-top: -12px; } #commerce #checkout-details table td { float: right; text-align: right; } #commerce #checkout-details table td.image { padding: 12px 8px; } /* 600px Resolution Specific Behaviour */ } @media only screen and (min-width: 0px) and (max-width: 600px) { /* Checkout Details Styles */ #commerce #delivery-address div.add_address { margin: 16px 0% 0% 0%; } #commerce #billing-address div.add_address { margin: 16px 0% 0% 0%; } #commerce #total-to-pay div.promocode button.left { margin: 16px 0% 0% 0%; } }