/* Heading & Paragraph Styles */ #commerce h1 { margin: 0% 0% 1.563rem 0%; padding: 0%; font-size: 1.5rem; line-height: 2.25rem; font-weight: 700; text-transform: none; color: #8C1C1E; } /* Button Styles */ #commerce .button, #commerce button { margin: 0%; padding: 5px 19px 7px 17px; min-width: 0px; font-family: 'Lato', sans-serif; font-size: 1rem; line-height: 1.5rem; font-weight: 400; text-transform: uppercase; display: inline-block; color: #FFFFFF; background-color: #1E2F23; border: 1px solid transparent; border-radius: 8px; letter-spacing: 0px; overflow: hidden; transition: all 0.3s ease; } #commerce .color-1st { color: #FFFFFF; background-color: #8C1C1E; border-color: #8C1C1E; } #commerce .color-1st:hover { color: #FFFFFF; background-color: #BC6567; border-color: #BC6567; } #commerce .color-2nd { color: #FFFFFF; background-color: #1E2F23; border-color: #1E2F23; } #commerce .color-2nd:hover { color: #FFFFFF; background-color: #395341; border-color: #395341; } #commerce .color-3rd { color: #FFFFFF; background-color: #117362; border-color: #117362; } #commerce .color-3rd:hover { color: #FFFFFF; background-color: #158C79; border-color: #158C79; } #commerce input, #commerce select, #commerce textarea { padding: 0.375rem 0.5rem; font-family: 'Lato', sans-serif; font-size: 1rem; line-height: 1.5rem; font-weight: 400; color: #002C2A; background-color: #FFFFFF; border: 1px solid #C3CCCC; border-radius: 1px; } #commerce select { padding: 0.438rem 0.5rem 0.5rem 0.5rem; } /* Basket Items Styles */ #commerce #basket-items { padding: 12px 48px 24px 0%; width: 74%; 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: #8C1C1E; border: 1px solid #8C1C1E; } #commerce #basket-items #checkout:hover { color: #FFFFFF; background-color: #BC6567; border-color: #BC6567; } #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%; padding: 3px 8px 5px 8px; min-width: 32px; 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; } #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: #117362; } #commerce #basket-summary #heading { font-size: 1.125rem; line-height: 1.5rem; font-weight: 400; text-transform: uppercase; color: #FFFFFF; } #commerce #basket-summary table tr { border-bottom: 1px solid rgba(255,255,255,0.5); } #commerce #basket-summary table th { padding: 12px 8px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; color: #FFFFFF; border-bottom: 0px; } #commerce #basket-summary table td { padding: 12px 8px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; color: #FFFFFF; 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: block; color: #FFFFFF; } #commerce #basket-summary p.delivery_text strong { margin: 0% 0% 6px 0%; font-weight: 700; display: block; } #commerce #basket-summary br { } #commerce #basket-summary div.button { margin: 22px 0% 0% 0%; padding: 0%; width: 100%; display: block; text-align: center; background-color: transparent; border: 0px; } #commerce #basket-summary div.button a { padding: 8px 16px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; text-transform: none; border: 1px solid #FFFFFF; border-radius: 8px; } #commerce #basket-summary div.button a:hover { color: #117362; background-color: #FFFFFF; } #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; background-color: #8C1C1E; border: 1px solid #8C1C1E; } #commerce #basket-summary button.continue-checkout:hover { color: #117362; background-color: #FFFFFF; border-color: #FFFFFF; } /* Checkout Details Styles */ #commerce #checkout-details { padding: 0%; } #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 #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 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%; background-color: transparent; } #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 div.add_address { margin: 0% 0% 0% 12px; } #commerce #billing-address div.add_address button { margin: 5px 0% 0% 0%; padding: 6px 19px 6px 17px; font-size: 0.875rem; } #commerce #total-to-pay { padding: 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 0%; width: 60%; background-color: transparent; } #commerce #total-to-pay div.promocode p { padding: 0% 0% 16px 8px; } #commerce #total-to-pay div.summary { padding: 24px 24px 30px 24px; width: 40%; background-color: #117362; border-left: 0px; } #commerce #total-to-pay table tr { border-bottom: 1px solid rgba(255,255,255,0.5); } #commerce #total-to-pay table th { padding: 12px 8px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; color: #FFFFFF; border-bottom: 0px; } #commerce #total-to-pay table td { padding: 12px 8px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; color: #FFFFFF; border-bottom: 0px; } #commerce #total-to-pay table tr:last-of-type { border-bottom: 0px; } #commerce #total-to-pay div.cta-buttons { padding: 0%; width: 100%; display: block; } #commerce #total-to-pay div.cta-buttons button { 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: #8C1C1E; border: 1px solid #8C1C1E; } #commerce #total-to-pay div.cta-buttons button:hover { color: #117362; background-color: #FFFFFF; border-color: #FFFFFF; } #commerce #terms div.terms-group label { margin: 0%; padding: 0% 0% 0% 28px; position: relative; color: #FFFFFF; } #commerce #terms div.terms-group input[type=checkbox] { margin: 0%; top: 4px; left: 2px; position: absolute; } div.popup-panel.alert button { margin: 36px 0% 0% 0%; padding: 6px 28px 8px 25px; min-width: 0px; font-family: 'Lato', sans-serif; font-size: 1rem; line-height: 1.5rem; font-weight: 400; text-transform: uppercase; display: inline-block; color: #FFFFFF; background-color: #8C1C1E; border-radius: 8px; } /* 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 table td { padding: 32px 8px 32px 8px; text-align: left; } #commerce #basket-items table td.image { display: none; } #commerce #basket-items table td.item { padding-bottom: 28px; width: 100%; } #commerce #basket-items table td.pricetotal { margin: -68px 0% 0% 0%; padding: 6px 10px 8px 10px; } /* #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; } */ /* Basket Summary Styles */ #commerce #basket-summary { padding: 24px 18px 30px 18px; width: 100%; } /* 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; } /* 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%; } }