/* source-sans-pro-regular - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: url('/public/assets/fonts/source-sans-pro-v21-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Source Sans Pro'), url('/public/assets/fonts/source-sans-pro-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/public/assets/fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/public/assets/fonts/source-sans-pro-v21-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/public/assets/fonts/source-sans-pro-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/public/assets/fonts/source-sans-pro-v21-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* source-sans-pro-italic - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 400; src: url('/public/assets/fonts/source-sans-pro-v21-latin-italic.eot'); /* IE9 Compat Modes */ src: local('Source Sans Pro'), url('/public/assets/fonts/source-sans-pro-v21-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/public/assets/fonts/source-sans-pro-v21-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/public/assets/fonts/source-sans-pro-v21-latin-italic.woff') format('woff'), /* Modern Browsers */ url('/public/assets/fonts/source-sans-pro-v21-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/public/assets/fonts/source-sans-pro-v21-latin-italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* source-sans-pro-600 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; src: url('/public/assets/fonts/source-sans-pro-v21-latin-600.eot'); /* IE9 Compat Modes */ src: local('Source Sans Pro'), url('/public/assets/fonts/source-sans-pro-v21-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/public/assets/fonts/source-sans-pro-v21-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('/public/assets/fonts/source-sans-pro-v21-latin-600.woff') format('woff'), /* Modern Browsers */ url('/public/assets/fonts/source-sans-pro-v21-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('/public/assets/fonts/source-sans-pro-v21-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* source-sans-pro-600italic - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 600; src: url('/public/assets/fonts/source-sans-pro-v21-latin-600italic.eot'); /* IE9 Compat Modes */ src: local('Source Sans Pro'), url('/public/assets/fonts/source-sans-pro-v21-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/public/assets/fonts/source-sans-pro-v21-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/public/assets/fonts/source-sans-pro-v21-latin-600italic.woff') format('woff'), /* Modern Browsers */ url('/public/assets/fonts/source-sans-pro-v21-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/public/assets/fonts/source-sans-pro-v21-latin-600italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } .visually-hidden { border: 0; height: 1px; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 1px; z-index: -1; } * { box-sizing: border-box; margin: 0px; padding: 0px; } button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: 0; cursor: pointer; } h1, h2, h3, h4, h5, h6, p { line-height: calc(1em + 6px); } html { -moz-osx-font-smoothing: auto; -webkit-font-smoothing: antialiased; } body { font-family: "Source Sans Pro", sans-serif; color: #333; } .masthead-container { width: 100%; display: flex; flex-basis: auto; justify-content: space-between; padding-bottom: 12.5px; padding-top: 12.5px; max-width: 1290px; padding-left: calc(16.27906976744186px + 1.1627906976744187%); padding-right: calc(16.27906976744186px + 1.1627906976744187%); } .c-header__link:visited { color: #222222; } .c-header__link { white-space: nowrap; min-height: 40px; font-size: 18px; text-decoration: none; color: #222222; } .live-area { display: flex; flex-direction: row; justify-content: center; width: 100%; } .live-area>.shell { flex-grow: 1; width: 100%; max-width: 1290px; } .live-area>.shell>.core { display: flex; flex-wrap: wrap; height: 100%; width: 100%; padding: 0 calc(-42.926829268292686px + 4.878048780487805%); } .has-aside>.live-area.main-content>.shell>.core { flex-direction: row-reverse; } *::-ms-backdrop, .live-area>.shell>.core { padding-left: 0px; padding-right: 0px; } .cell { flex-shrink: 1; padding: calc(11.97674418604651px + 4.069767441860465%) calc(16.27906976744186px + 1.1627906976744187%); position: relative; } .has-aside .main-content *::-ms-backdrop, .has-aside .main-content>.shell>.core>*>.shell>.core { padding-right: 0px; } .has-aside .main-content>.shell>.core>*>.shell>.core { padding-right: calc(-308.57142857142856px + 51.42857142857142%); } main { flex-basis: auto; width: 615px; flex-grow: 3; flex-shrink: 1; padding: calc(11.97674418604651px + 4.069767441860465%) calc(16.27906976744186px + 1.1627906976744187%); max-width: 817px; } aside { flex-basis: auto; width: 365px; flex-grow: 1; flex-shrink: 1; padding: calc(11.97674418604651px + 4.069767441860465%) calc(16.27906976744186px + 1.1627906976744187%); } .cell[min-width~="120px"] h1, .cell[min-width~="120px"] h2, .cell[min-width~="120px"] h3, .cell[min-width~="120px"] h4, .cell[min-width~="120px"] h5, .cell[min-width~="120px"] h6, .cell[min-width~="120px"] p, *[min-width] .cell[min-width~="120px"] h1, *[min-width] .cell[min-width~="120px"] h2, *[min-width] .cell[min-width~="120px"] h3, *[min-width] .cell[min-width~="120px"] h4, *[min-width] .cell[min-width~="120px"] h5, *[min-width] .cell[min-width~="120px"] h6, *[min-width] .cell[min-width~="120px"] p, *[min-width] *[min-width] .cell[min-width~="120px"] h1, *[min-width] *[min-width] .cell[min-width~="120px"] h2, *[min-width] *[min-width] .cell[min-width~="120px"] h3, *[min-width] *[min-width] .cell[min-width~="120px"] h4, *[min-width] *[min-width] .cell[min-width~="120px"] h5, *[min-width] *[min-width] .cell[min-width~="120px"] h6, *[min-width] *[min-width] .cell[min-width~="120px"] p { line-height: calc(1em + 3px); } .cell[min-width~="320px"] h1, .cell[min-width~="320px"] h2, .cell[min-width~="320px"] h3, .cell[min-width~="320px"] h4, .cell[min-width~="320px"] h5, .cell[min-width~="320px"] h6, .cell[min-width~="320px"] p, *[min-width] .cell[min-width~="320px"] h1, *[min-width] .cell[min-width~="320px"] h2, *[min-width] .cell[min-width~="320px"] h3, *[min-width] .cell[min-width~="320px"] h4, *[min-width] .cell[min-width~="320px"] h5, *[min-width] .cell[min-width~="320px"] h6, *[min-width] .cell[min-width~="320px"] p, *[min-width] *[min-width] .cell[min-width~="320px"] h1, *[min-width] *[min-width] .cell[min-width~="320px"] h2, *[min-width] *[min-width] .cell[min-width~="320px"] h3, *[min-width] *[min-width] .cell[min-width~="320px"] h4, *[min-width] *[min-width] .cell[min-width~="320px"] h5, *[min-width] *[min-width] .cell[min-width~="320px"] h6, *[min-width] *[min-width] .cell[min-width~="320px"] p { line-height: calc(1em + 5px); } .cell[min-width~="480px"] h1, .cell[min-width~="480px"] h2, .cell[min-width~="480px"] h3, .cell[min-width~="480px"] h4, .cell[min-width~="480px"] h5, .cell[min-width~="480px"] h6, .cell[min-width~="480px"] p, *[min-width] .cell[min-width~="480px"] h1, *[min-width] .cell[min-width~="480px"] h2, *[min-width] .cell[min-width~="480px"] h3, *[min-width] .cell[min-width~="480px"] h4, *[min-width] .cell[min-width~="480px"] h5, *[min-width] .cell[min-width~="480px"] h6, *[min-width] .cell[min-width~="480px"] p, *[min-width] *[min-width] .cell[min-width~="480px"] h1, *[min-width] *[min-width] .cell[min-width~="480px"] h2, *[min-width] *[min-width] .cell[min-width~="480px"] h3, *[min-width] *[min-width] .cell[min-width~="480px"] h4, *[min-width] *[min-width] .cell[min-width~="480px"] h5, *[min-width] *[min-width] .cell[min-width~="480px"] h6, *[min-width] *[min-width] .cell[min-width~="480px"] p { line-height: calc(1em + 6px); } .cell[min-width~="569px"] h1, .cell[min-width~="569px"] h2, .cell[min-width~="569px"] h3, .cell[min-width~="569px"] h4, .cell[min-width~="569px"] h5, .cell[min-width~="569px"] h6, .cell[min-width~="569px"] p, *[min-width] .cell[min-width~="569px"] h1, *[min-width] .cell[min-width~="569px"] h2, *[min-width] .cell[min-width~="569px"] h3, *[min-width] .cell[min-width~="569px"] h4, *[min-width] .cell[min-width~="569px"] h5, *[min-width] .cell[min-width~="569px"] h6, *[min-width] .cell[min-width~="569px"] p, *[min-width] *[min-width] .cell[min-width~="569px"] h1, *[min-width] *[min-width] .cell[min-width~="569px"] h2, *[min-width] *[min-width] .cell[min-width~="569px"] h3, *[min-width] *[min-width] .cell[min-width~="569px"] h4, *[min-width] *[min-width] .cell[min-width~="569px"] h5, *[min-width] *[min-width] .cell[min-width~="569px"] h6, *[min-width] *[min-width] .cell[min-width~="569px"] p { line-height: calc(1em + 7px); } .cell[min-width~="768px"] h1, .cell[min-width~="768px"] h2, .cell[min-width~="768px"] h3, .cell[min-width~="768px"] h4, .cell[min-width~="768px"] h5, .cell[min-width~="768px"] h6, .cell[min-width~="768px"] p, *[min-width] .cell[min-width~="768px"] h1, *[min-width] .cell[min-width~="768px"] h2, *[min-width] .cell[min-width~="768px"] h3, *[min-width] .cell[min-width~="768px"] h4, *[min-width] .cell[min-width~="768px"] h5, *[min-width] .cell[min-width~="768px"] h6, *[min-width] .cell[min-width~="768px"] p, *[min-width] *[min-width] .cell[min-width~="768px"] h1, *[min-width] *[min-width] .cell[min-width~="768px"] h2, *[min-width] *[min-width] .cell[min-width~="768px"] h3, *[min-width] *[min-width] .cell[min-width~="768px"] h4, *[min-width] *[min-width] .cell[min-width~="768px"] h5, *[min-width] *[min-width] .cell[min-width~="768px"] h6, *[min-width] *[min-width] .cell[min-width~="768px"] p { line-height: calc(1em + 8px); } .cell[min-width~="100px"] p, *[min-width] .cell[min-width~="100px"] p, *[min-width] *[min-width] .cell[min-width~="100px"] p { font-size: 14px; } .cell[min-width~="240px"] p, *[min-width] .cell[min-width~="240px"] p, *[min-width] *[min-width] .cell[min-width~="240px"] p { font-size: 15px; } .cell[min-width~="320px"] p, *[min-width] .cell[min-width~="320px"] p, *[min-width] *[min-width] .cell[min-width~="320px"] p { font-size: 16px; } h1 { font-size: 28px; font-weight: normal; font-family: Georgia, serif; } h2, body.thankyou main .core>section>div>h3 { font-size: 20px; font-weight: 600; font-family: Georgia, serif; } h3 { font-size: 16px; font-weight: 600; font-family: "Source Sans Pro", sans-serif; } html { display: flex; flex-direction: column; min-height: 100%; } body { display: flex; flex-direction: column; flex-grow: 1; } input { -moz-appearance: textfield; } input::-webkit-outer-spin-button { margin: 0px; -webkit-appearance: none; } input::-webkit-inner-spin-button { margin: 0px; -webkit-appearance: none; } .root { display: flex; flex-direction: column; flex-grow: 1; } .main-content.live-area { flex-grow: 1; } .masthead { background-color: #fff; background-image: linear-gradient(180deg, rgba(242, 242, 242, 0.5), #e6e6e6); border-bottom: 1px solid #ccc; } .masthead .cell { padding-bottom: 12.5px; padding-top: 12.5px; } .main-content {} /* .main-content>.shell>.core>*>.shell>.core>*+*:not(.visually-hidden, aside .your-items), .main-content>.shell>.core>main>.shell>.core>*>*:not(.visually-hidden)+*, .visible-fields>*:not(.visually-hidden)+*, .address-form-fields { margin-top: 30px; } */ body.account .main-content>.shell>.core>*>.shell>.core>h1+p:not(.visually-hidden, aside .your-items) { margin-top: 10px; } body.account .main-content>.shell>.core>*>.shell>.core>*+*:not(.visually-hidden, aside .your-items) { margin-top: 25px; } body.account .main-content>.shell>.core>*>.shell>.core>h1:nth-child(n+3):not(.visually-hidden, aside .your-items) { margin-top: 75px; } /* .main-content .c-status-message__message { margin-top: 0px; } */ aside .input-options { display: none; } aside>.shell { margin: calc(calc(8.13953488372093px + 0.5813953488372093%) * -1); } aside>.shell>.core>* { padding: calc(8.13953488372093px + 0.5813953488372093%); } body:not(.address):not(.verify) aside {} body:not(.address):not(.verify) aside>.shell>.core>* {} @media (min-width: 990px) { aside .select-options { display: none; align-items: center; } aside .input-options { display: block; align-items: center; } } main .shipping-address { margin-top: 20px; position: relative; } main .shipping-address label.hasShippingAddress { color: #333; padding: 10px 30px; box-shadow: 0 0 0 1px #FED81F inset; background-color: #FFFADB; display: block; } main .shipping-address .shipping-address-form { margin-top: 30px; } main .shipping-address #form-input_hasShippingAddress { position: absolute; top: 14px; left: 10px; } main .shipping-address #form-input_hasShippingAddress:checked+.shipping-address-form { display: none; } main .shipping-address #form-input_hasShippingAddress:not(:checked)+.shipping-address-form { display: block; } main .input-options { display: none; } @media (min-width: 990px) { main .your-items { background-color: #fff; } } .ordered-itmes { display: none; } body.thankyou .ordered-itmes{ display: block; padding: 0px; } body:not(.thankyou, .your-cart) main .your-items { display: none; } body.your-cart main .your-items form { margin-top: 0 !important; } @media (min-width: 990px) { body:not(.thankyou) main .your-items { display: block; } body:not(.thankyou) main .your-items .select-options { display: none; } body:not(.thankyou) main .your-items .input-options { display: block; } } .error-message { background-color: #fcfcfc; border: 1px solid #c40606; padding: 20px; } .legal-info-buy>*+* { margin-top: 15px; } .legal-info-buy p a { color: #0161a1; text-decoration: none; } .legal-info-buy[class] p { font-size: 14px; } .consent[class] p { font-size: 14px; } .consent p a { color: #0161a1; } .consent-checkbox-agreement { color: #333; display: block; position: relative; padding-left: 20px; margin-bottom: 20px; } .consent-checkbox-agreement input { position: absolute; top: 2px; left: 0px; } input#consentCheck+span::before { content: ""; display: inline-block; width: 14px; height: 14px; border: 2px solid #f00; position: absolute; left: -2px; top: 0; } .consent-info-digital, .consent-terms-and-conditions, .consent-unsubscribe-info { margin-bottom: 20px !important; } .consent-check { margin: 0; } .consent-check-wrapper.missing-check { border: 2px solid #c40606; } .consent-missing-check-error { color: #c40606; font-weight: bold; margin-bottom: 15px; position: relative; right: 3px; } address { font-style: normal; } .legal-info address:first-line { font-weight: bold; } .legal-info[class], .legal-info[class] p { font-size: 14px; } .legal-info { margin-top: 30px; } .success p { padding-top: 15px; } p.success[class] { font-family: Georgia, serif; font-size: 17px; } /* p.note[class] { color: #c40606; font-size: 13px; } */ .failure { color: #c40606; } .failure.error-box { border: 1px solid; padding: 1rem 2rem; } .error-messages a { color: #c40606; } .error-messages ul { background-color: rgba(196, 6, 6, 0.04); border: 1px solid; padding: 12px 15px; list-style: none; } .error-messages li { padding-left: 1em; position: relative; } .error-messages li::before { content: "\2013"; left: 0; position: absolute; } .error-messages li+li { margin-top: 3px; } .error-messages h2 { font-family: "Source Sans Pro", sans-serif; font-size: 18px; } .error-messages>*+* { margin-top: 15px; } main a { color: #0176c3; } .root { background-color: #fff; } .root.has-aside { background-image: linear-gradient(90deg, #fff 0, #fff 50%, #f2f2f2 0, #f2f2f2); } .root.your-cart.has-aside { background-image: none; } main { background-color: #fff; } aside { background-color: #f2f2f2; } main nav { margin-bottom: 7.4%; } .progress-step-indicator { display: flex; justify-content: space-between; list-style: none; overflow: hidden; padding: 0px; width: 100%; } .progress-step-indicator li { position: relative; flex-grow: 1; flex-basis: auto; padding-top: 30px; text-align: center; font-size: 14px; font-weight: 600; color: #444; } .progress-step-indicator li a { display: block; padding-top: 40px; -webkit-transform: translateY(-40px); transform: translateY(-40px); margin-bottom: -40px; position: relative; z-index: 2; } .progress-step-indicator li:first-child { text-align: left; padding-right: 10px; } .progress-step-indicator li:last-child { text-align: right; padding-left: 10px; } .progress-step-indicator li::before { background-color: #fff; border-radius: 50%; content: ""; position: absolute; height: 20px; width: 20px; top: 0px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 2; box-shadow: 0 0 0 2px #ccc inset; } .progress-step-indicator li:first-child::before { left: 0px; -webkit-transform: translateX(0); transform: translateX(0); } .progress-step-indicator li:last-child::before { left: auto; right: 0px; -webkit-transform: translateX(0); transform: translateX(0); } .progress-step-indicator li::after { background-color: #e8e8e8; content: ""; position: absolute; width: 9999px; height: 2px; top: 10px; z-index: 0; right: 50%; } .progress-step-indicator li.current-step { color: #0176c3; } .progress-step-indicator li.current-step::before { background-color: #0176c3; box-shadow: 0 0 0 2px #0072bd inset; } .progress-step-indicator li.current-step::after { background-color: #0176c3; z-index: 1; } .progress-step-indicator li.past-step { color: #0176c3; } .progress-step-indicator li.past-step::before { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZmlsbD0iIzAxNzZjMyIgZD0iTTEwLjcwNywxMy4yOTMsMTYsOGwxLjQxNCwxLjQxNC02LjcwNyw2LjcwN0w3LDEyLjQxNCw4LjQxNCwxMVoiLz4KPC9zdmc+Cg==); background-size: 120%; background-position: 50% 38%; } .progress-step-indicator li.past-step a { text-decoration: none; } .progress-step-indicator li.past-step a:hover { text-decoration: underline; } .progress-step-indicator li.past-step::before { box-shadow: 0 0 0 2px #0176C3 inset; } .progress-step-indicator li:first-child::after { right: 100%; } .progress-step-indicator li:last-child::after { right: 0%; } .progress-step-indicator li:nth-last-child(4):not(:first-child) { margin-right: 3%; margin-left: -3%; } .progress-step-indicator li:nth-last-child(2) { margin-right: -4%; margin-left: 4%; } .cart .quantity-input-field, .your-items .quantity-input-field { width: 35px; padding: 3px 5px; margin: 0 15px 0 5px; -moz-appearance: textfield; } .cart .quantity-select-field, .your-items .quantity-select-field { padding: 3px 5px; margin: 0 15px 0 5px; } .cart-items>*+* { border-top: 1px solid #d9d9d9; } .cart-items { list-style: none; padding: 0px; } .cart-item { padding: calc(7.162790697674419px + 1.5116279069767442%) 0; } .cart-item img { display: block; } .cart-item>.shell { margin: 0 calc(calc(1.2790697674418605px + 1.1627906976744187%) * -1); } *::-ms-backdrop, .cart-item>.shell { margin: 0 calc((1.2790697674418605px + 1.1627906976744187%) * -1); } .cart-item>.shell>.core { display: flex; flex-wrap: wrap; font-size: 14px; } .cart-item>.shell>.core>* { padding: calc(1.2790697674418605px + 1.1627906976744187%); } .cart-item--description { flex-basis: auto; flex-grow: 1; width: 154px; } .cart-item--description dt { position: absolute; z-index: -1; } .cart-item--description .product-title a { text-decoration: none; } .cart-item--description .product-title a:hover { text-decoration: underline; } .cart-item--description>*+*, .cart-item--description>*>*+* { margin-top: 6px; } .cart-item--description .product-title a { text-decoration: none; color: inherit; } aside .cart-item--description .product-info, aside .cart-item--description .product-variants, aside .cart-item--reference-number { display: none; } main .cart-item--description .product-type { display: none; } main .cart-item--description .pre-order-info { display: none; } .cart-item--quantity { display: flex; position: relative; } .cart-item--quantity .quantity-section { display: flex; align-items: center; } .cart-item--quantity .quantity-label, .cart-item--reference-number .reference-number-label { color: #333; font-weight: 600; } .cart-item--quantity .quantity-information, .cart-item--reference-number .reference-number-information { margin: 0 20px 0 5px; } .cart-item--quantity .save-options { display: block; height: 26px; position: absolute; top: 27px; left: 30px; border: 1px solid; border-color: #b3b3b3; background-color: #fff; } .cart-item--price { flex-grow: 0.2; font-weight: 600; text-align: right; } .cart-item--price .discount-list-price { color: #666; text-decoration: line-through; } .cart-item--discount-price { color: #c40606; font-weight: bold; } .cart-item--discount-info-text { color: #c40606; margin-bottom: 20px; } .cart-item--cover { flex-basis: auto; flex-grow: 0.5; width: 40px; display: none; } .your-cart .cart-item--cover, .thankyou .cart-item--cover { display: block; } @media (min-width: 990px) { .cart-item--cover { display: block; } } .cart-item--cover img { width: 100%; } .cart-item--action { display: flex; align-items: center; } .cart-item--actions { width: 100%; } .order-footer { font-size: 14px; padding: calc(7.162790697674419px + 1.5116279069767442%) 0; } .order-footer .total { font-weight: bold; margin-top: 4%; } .order-footer .total dt { font-size: 18px; } .order-footer .total dd { font-size: 22px; } .order-footer .taxes .product-vat-info { font-size: 14px; } .order-footer p.error-message-coupon { margin-top: 2px; font-size: 14px; } .order-footer .row .core { display: flex; align-items: baseline; } .order-footer .row .core dt, .order-footer .row .core dd { flex-basis: auto; width: 100px; } .order-footer .row .core dt { flex-grow: 1; text-align: left; } .order-footer .row .core [min-width~="400px"] dt { text-align: right; } .order-footer .row .core dd { text-align: right; } .order-footer .total .core dt { width: 80px; } .order-footer .total .core dd { width: 120px; } .order-footer .discount-savings .core dt, .order-footer .discount-savings .core dd { width: 90px; } .order-footer .discount-savings .core dd { font-weight: 700; color: #c40606; } aside .order-footer .coupon-link { color: #0161a1; } .product {} .product-meta { color: #666; margin-bottom: 6px; } aside .product-meta { margin-bottom: 0px; } .product-type { font-size: 12px; } .pre-order-info { font-size: 12px; color: #323232; } .product-variants { color: #323232; } .btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #3365A4; background-image: linear-gradient(180deg, #4d78af 0%, #3365a4 100%); border: 1px solid rgba(0, 63, 141, 0.5); border-radius: 2px; display: inline-block; padding: 14px; width: 100%; text-decoration: none; max-width: 380px; font-weight: 700; text-align: center; } .btn.inline { margin-right: 10px; width: auto; } .btn[disabled] { opacity: 0.3; } .btn>.shell { color: #fff; font-size: 14px; display: block; margin-bottom: -6.25px; -webkit-transform: translateY(-3.55px); transform: translateY(-3.55px); } .btn.secondary { background-color: #f2f2f2; background-image: linear-gradient(180deg, #fcfcfc 0%, #f2f2f2 100%); border: 1px solid #b3b3b3; } .btn.secondary {} .btn.secondary>.shell { color: #0176c3; } .btn-edit, .btn-remove { color: #0176c3; font-size: 16px; position: relative; text-decoration: none; } aside .btn-edit, aside .btn-remove { font-size: 13px; color: #0161a1; } .btn-remove { margin-top: 0px; } .btn-remove::after { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cG9seWdvbiBmaWxsPSIjMDE3NmMzIiBwb2ludHM9IjEzLjQyNCAxMi4wMDcgMTYuMjU3IDE0Ljg0MSAxNC44NDEgMTYuMjU3IDEyLjAwNyAxMy40MjQgOS4xNzQgMTYuMjU3IDcuNzU3IDE0Ljg0MSAxMC41OTEgMTIuMDA3IDcuNzU3IDkuMTc0IDkuMTc0IDcuNzU3IDEyLjAwNyAxMC41OTEgMTQuODQxIDcuNzU3IDE2LjI1NyA5LjE3NCAxMy40MjQgMTIuMDA3Ii8+Cjwvc3ZnPgo=); background-size: contain; background-repeat: no-repeat; content: ""; display: inline-block; height: 22px; width: 22px; position: absolute; right: -22px; bottom: -2px; } aside .btn-remove::after { height: 20px; width: 20px; right: -19px; } .btn-edit {} .btn-edit::after { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMSI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcgLTYpIj4KICAgIDxwYXRoIGQ9Ik0xNS40IDEwLjRMMTMuMyA4LjMgMTQuOSA2LjcgMTcgOC44IDE1LjQgMTAuNFpNOS45IDE1LjlMNy41IDE2LjIgNy44IDEzLjggMTIuOCA4LjggMTQuOSAxMC45IDkuOSAxNS45WiIgZmlsbD0iIzAxNzZjMyIgLz4KICA8L2c+Cjwvc3ZnPgo=); background-size: contain; background-repeat: no-repeat; content: ""; display: inline-block; height: 10px; width: 11px; position: absolute; right: -18px; bottom: 5px; } .btn-cancel { height: 24px; background: none; border: 0px; padding: 0px; width: auto; } .btn-cancel::before { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cG9seWdvbiBmaWxsPSIjMDE3NmMzIiBwb2ludHM9IjEzLjQyNCAxMi4wMDcgMTYuMjU3IDE0Ljg0MSAxNC44NDEgMTYuMjU3IDEyLjAwNyAxMy40MjQgOS4xNzQgMTYuMjU3IDcuNzU3IDE0Ljg0MSAxMC41OTEgMTIuMDA3IDcuNzU3IDkuMTc0IDkuMTc0IDcuNzU3IDEyLjAwNyAxMC41OTEgMTQuODQxIDcuNzU3IDE2LjI1NyA5LjE3NCAxMy40MjQgMTIuMDA3Ii8+Cjwvc3ZnPgo=); background-size: contain; background-repeat: no-repeat; background-color: #f2f2f2; content: ""; display: inline-block; height: 20px; width: 20px; cursor: pointer; margin: 2px; } .btn-check { height: 24px; background: none; border: 0px; padding: 0px; width: auto; } .btn-check::before { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZmlsbD0iIzAxNzZjMyIgZD0iTTEwLjcwNywxMy4yOTMsMTYsOGwxLjQxNCwxLjQxNC02LjcwNyw2LjcwN0w3LDEyLjQxNCw4LjQxNCwxMVoiLz4KPC9zdmc+Cg==); background-size: contain; background-repeat: no-repeat; background-color: #f2f2f2; content: ""; display: inline-block; height: 20px; width: 20px; margin: 2px; } .btn-quantity { height: 30px; } .btn-quantity::before { background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDE3NmMzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNiAyNiIgd2lkdGg9IjM0cHgiIGhlaWdodD0iMzRweCI+PHBhdGggZD0iTSAxMy44MTI1IDAgQyA3Ljg3ODkwNiAwIDQuMDgyMDMxIDQuMjkyOTY5IDQgMTAgTCAwLjUgMTAgQyAwLjMwMDc4MSAxMCAwLjA5Mzc1IDEwLjExMzI4MSAwLjA5Mzc1IDEwLjMxMjUgQyAtMC4wMDc4MTI1IDEwLjUxMTcxOSAtMC4wMDc4MTI1IDEwLjcxMDkzOCAwLjA5Mzc1IDEwLjgxMjUgTCA2LjA5Mzc1IDE4LjUgQyA2LjE5NTMxMyAxOC42MDE1NjMgNi4zMDA3ODEgMTguNjg3NSA2LjUgMTguNjg3NSBDIDYuNjk5MjE5IDE4LjY4NzUgNi44MDQ2ODggMTguNjAxNTYzIDYuOTA2MjUgMTguNSBMIDEyLjkwNjI1IDEwLjgxMjUgQyAxMy4wMDc4MTMgMTAuNzEwOTM4IDEzLjAwNzgxMyAxMC41MTE3MTkgMTIuOTA2MjUgMTAuMzEyNSBDIDEyLjgwNDY4OCAxMC4xMTMyODEgMTIuNjAxNTYzIDEwIDEyLjUgMTAgTCA5IDEwIEMgOS4wNjY0MDYgMi40NjQ4NDQgMTIuOTIxODc1IDAuNzg5MDYzIDEzLjgxMjUgMC4wOTM3NSBDIDE0LjAxMTcxOSAtMC4wMDc4MTI1IDE0LjAxMTcxOSAwIDEzLjgxMjUgMCBaIE0gMTkuNSA3LjM0Mzc1IEMgMTkuMzUxNTYzIDcuMzQzNzUgMTkuMTk1MzEzIDcuMzk4NDM4IDE5LjA5Mzc1IDcuNSBMIDEzLjA5Mzc1IDE1LjE4NzUgQyAxMi45OTIxODggMTUuMzg2NzE5IDEzIDE1LjU4NTkzOCAxMyAxNS42ODc1IEMgMTMuMTAxNTYzIDE1Ljg4NjcxOSAxMy4zMDQ2ODggMTYgMTMuNDA2MjUgMTYgTCAxNyAxNiBDIDE2LjkzMzU5NCAyMy41MzUxNTYgMTMuMDc4MTI1IDI1LjIxMDkzOCAxMi4xODc1IDI1LjkwNjI1IEMgMTEuOTg4MjgxIDI2LjAwNzgxMyAxMS45ODgyODEgMjYgMTIuMTg3NSAyNiBDIDE4LjEyMTA5NCAyNiAyMS45MTc5NjkgMjEuNzA3MDMxIDIyIDE2IEwgMjUuNDA2MjUgMTYgQyAyNS42MDU0NjkgMTYgMjUuODEyNSAxNS44ODY3MTkgMjUuODEyNSAxNS42ODc1IEMgMjYuMDExNzE5IDE1LjQ4ODI4MSAyNi4wMDc4MTMgMTUuMjg5MDYzIDI1LjkwNjI1IDE1LjE4NzUgTCAxOS45MDYyNSA3LjUgQyAxOS44MDQ2ODggNy4zOTg0MzggMTkuNjQ4NDM4IDcuMzQzNzUgMTkuNSA3LjM0Mzc1IFoiLz48L3N2Zz4K); background-size: contain; background-repeat: no-repeat; content: ""; display: inline-block; height: 20px; width: 20px; margin-left: 5px; margin-top: 5px; } .back-link { color: #0161a1; display: block; position: relative; padding-left: 24px; } .back-link::before { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDguNSI+CiAgPHBhdGggZmlsbD0iIzAxNzZjMyIgZD0iTTUsNy41bC0xLDFMLjIwOCw0Ljc0OGEuNy43LDAsMCwxLDAtMUw0LDAsNSwxLDEuNzE1LDQuMjVaIi8+Cjwvc3ZnPgo=); background-size: contain; background-repeat: no-repeat; content: ""; display: inline-block; height: 10px; width: 10px; position: absolute; left: 9px; bottom: 5px; } body.your-cart main .back-link, body.your-cart main .back-link::before { font-size: 21px; font-weight: bold; text-decoration: none; background-image: none; padding-left: 0; } .btn-coupon { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #f2f2f2; background-image: linear-gradient(180deg, #FCFCFC 0%, #F2F2F2 100%); border: 1px solid #B3B3B3; border-radius: 2px; display: inline-block; padding: 14px; width: 100%; text-decoration: none; max-width: 120px; } .btn-coupon.inline { margin-right: 10px; width: auto; } .btn-coupon[disabled] { opacity: 0.3; cursor: default; } .btn-coupon>.shell { color: #0176c3; font-size: 14px; display: block; margin-bottom: -6.25px; -webkit-transform: translateY(-3.55px); transform: translateY(-3.55px); } .hyperlink-btn { text-decoration: underline; font: inherit; color: inherit; } .field-group { width: 100%; } .field-group>.shell { margin: -2% calc(calc(3.1395348837209305px + 0.5813953488372093%) * -1); } *::-ms-backdrop, .field-group>.shell { margin: -2% calc((3.1395348837209305px + 0.5813953488372093%) * -1); } .field-group>.shell>.core { display: flex; flex-wrap: wrap; } label { color: #333; font-weight: 600; font-size: 14px; } input[type="text"]+label, input[type="password"]+label, input[type="tel"]+label, input[type="email"]+label, select+label, .coupon-label>span { margin-bottom: 6px; } input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="number"], select { font-family: 'Source Sans Pro', sans-serif; border-radius: 2px; border: 1px solid #b3b3b3; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #323232; font-size: 16px; padding: 9px 10px; } input[type="text"][name="coupon"] { color: #b3b3b3; } .visible-fields>*+* { margin-top: 2%; } .field-group.actions {} .field-group.actions:last-of-type { margin-top: 4%; } .field-group.actions:last-of-type>.shell>.core>*>.shell>.core { flex-direction: row-reverse; } .form-field { flex-grow: 1; flex-shrink: 1; flex-basis: auto; width: 200px; padding: 2% calc(3.1395348837209305px + 0.5813953488372093%); } .form-field--small { flex-basis: 0; } .form-field--large { width: 240px; } .form-field>.shell>.core, .form-field>.shell>.core>.coupon-label { display: flex; flex-direction: column-reverse; position: relative; } .form-field.failure input { background-color: rgba(196, 6, 6, 0.04); border: 1px solid #c40606; } .form-field.failure .error { font-size: 13px; } .form-field.options {} .form-field.options>.shell>.core::after { content: "\25BC"; position: absolute; bottom: 11px; right: 15px; font-size: 10px; color: #333; -webkit-transform: scaleY(.8); transform: scaleY(.8); pointer-events: none; } .form-field--radio { flex-basis: 100%; } .form-field--radio input[type="radio"] { position: absolute; z-index: -1; } .form-field--radio input[type="radio"]+label { box-shadow: 0 0 0 1px #b3b3b3; border-radius: 2px; padding: calc(11.279069767441861px + 1.1627906976744187%); } .form-field--radio input[type="radio"]+label img[alt^="american"] { width: 25px; } .form-field--radio input[type="radio"]+label img[alt^="mastercard"] { width: 32px; margin-left: 20px; } .form-field--radio input[type="radio"]+label img[alt^="Visa"] { width: 40px; margin-left: 15px; } @media (max-width: 320px) { .form-field--radio input[type="radio"]+label { padding: calc(5px + 1.2%); } .form-field--radio input[type="radio"]+label img[alt^="american"] { width: 20px; } .form-field--radio input[type="radio"]+label img[alt^="mastercard"] { width: 22px; margin-left: 15px; } .form-field--radio input[type="radio"]+label img[alt^="Visa"] { width: 32px; margin-left: 10px; } } .form-field--radio input[type="radio"]+label .core { padding-left: 30px; position: relative; } .form-field--radio input[type="radio"]+label .core>*+* { margin-top: 15px; } .form-field--radio input[type="radio"]+label b { color: #323232; font-size: 16px; display: flex; align-items: center; } .form-field--radio input[type="radio"]+label b span { flex-grow: 1; } .single-payment-option-only .form-field--radio input[type="radio"]+label .core { padding-left: 0px; } .single-payment-option-only .form-field--radio input[type="radio"]+label b span { padding-left: 10px; } .single-payment-option-only .form-field--radio input[type="radio"]+label b { flex-direction: row-reverse; } .single-payment-option-only .form-field--radio input[type="radio"]:checked+label, .single-payment-option-only .form-field--radio input[type="radio"]:focus+label { box-shadow: 0 0 0 1px #b3b3b3; } .single-payment-option-only .form-field--radio input[type="radio"]+label>.shell>.core> :first-child::before { display: none; } .form-field--radio input[type="radio"]+label p { display: none; } .form-field--radio input[type="radio"]+label>.shell>.core> :first-child::before { content: ""; display: inline-block; width: 11px; height: 11px; background-color: #fff; border-radius: 50%; border: 4px solid #fff; margin-right: 6px; box-shadow: 0 0 0 2px #222; position: absolute; left: 0px; } .form-field--radio input[type="radio"]:checked+label {} .form-field--radio input[type="radio"]:checked+label p { display: block; } .form-field--radio input[type="radio"]:checked+label>.shell>.core> :first-child::before { background-color: #0176c3; } .form-field--radio input[type="radio"]:checked+label, .form-field--radio input[type="radio"]:focus+label { box-shadow: 0 0 0 2px #0176c3; } .form-field--radio input[type="radio"]:checked+label>.shell>.core> :first-child::before, .form-field--radio input[type="radio"]:focus+label>.shell>.core> :first-child::before { box-shadow: 0 0 0 2px #0176c3; } .form-field input:not([required])+label::after, .form-field select:not([required])+label::after { color: #b3b3b3; content: " (optional)"; } .customer-address { margin-top: 4%; } .customer-address .labels .form-field label { border: 1px solid #b3b3b3; color: #323232; font-size: 16px; font-weight: bold; cursor: pointer; height: 100%; text-align: center; padding: 20px 15px; } .customer-address .labels .form-field label span { position: relative; display: inline-block; padding-left: 30px; } .customer-address .labels .form-field label span::before { content: ""; display: inline-block; width: 11px; height: 11px; background-color: #fff; border-radius: 50%; border: 4px solid #fff; margin-right: 6px; box-shadow: 0 0 0 1px #b3b3b3; position: absolute; left: 0px; } .customer-address .labels .form-field>.shell { background-color: #fff; height: 100%; } .customer-address .labels .form-field>.shell>.core { height: 100%; } .customer-address .labels .form-field:first-child { padding-right: 0px; } .customer-address .labels .form-field:first-child label { border-right: 1px solid transparent; border-bottom-left-radius: 2px; border-top-left-radius: 2px; } .customer-address .labels .form-field:last-child { padding-left: 0px; } .customer-address .labels .form-field:last-child label { border-left: 1px solid transparent; border-bottom-right-radius: 2px; border-top-right-radius: 2px; } .customer-address .field-group--toggle .form-field { width: 0px; } .address-form-fields { } .customer-address .address-form-fields { margin-top: 2%; } .address-form-fields>.shell { margin: -2% 0; } .address-form-fields .field-group { padding: 2% 0; } .customer-address #form-input_billing_customer-type-corporate:checked~*+.address-form-fields .form-field--for-corporate-customer, .customer-address #form-input_shipping_customer-type-corporate:checked~*+.address-form-fields .form-field--for-corporate-customer { display: flex; } .customer-address #form-input_billing_customer-type-corporate~*+.address-form-fields .form-field--for-corporate-customer, .customer-address #form-input_shipping_customer-type-corporate~*+.address-form-fields .form-field--for-corporate-customer { display: none; } .customer-address #form-input_billing_customer-type-corporate + label, .customer-address #form-input_shipping_customer-type-corporate + label { margin-left: 10px; } .coupon-field { margin-right: 20px; } .coupon-label {} .coupon-label::after { display: none; } .coupon-section { align-items: flex-end; display: flex; } .coupon-link { padding: calc(3.1395348837209305px + 0.5813953488372093%) 0; cursor: pointer; color: #0176c3; display: none; font-size: 14px; } #login-page-terms-and-conditions { padding: 10px 0 0 0; } #sprcom-login-form .error-messages, #sprcom-register-form .error-messages, #sprcom-guest-form .error-messages, #sprcom-snid-login-form .error-messages, #sprcom-snid-guest-form .error-messages { margin-bottom: 1.5em; } .login-success-container .btn , #sprcom-login-form .btn, #sprcom-register-form .btn, #sprcom-guest-form .btn, #sprcom-snid-login-form .btn, #sprcom-snid-guest-form .btn { max-width: 100%; margin-top: 20px; } #sprcom-login-form .actions .form-field, #sprcom-register-form .actions .form-field #sprcom-guest-form .actions .form-field {} #sprcom-login-form .form-field p, #sprcom-register-form .form-field p, #sprcom-guest-form .form-field p, #sprcom-snid-login-form .form-field p, #sprcom-snid-guest-form .form-field p { width: 100%; margin-top: 5px; } #sprcom-login-form .actions .form-field>.shell>.core, #sprcom-register-form .actions .form-field>.shell>.core, #sprcom-guest-form .actions .form-field>.shell>.core, #sprcom-snid-login-form .actions .form-field>.shell>.core, #sprcom-snid-guest-form .actions .form-field>.shell>.core { align-items: baseline; } #sprcom-login-form .actions>.shell>.core, #sprcom-register-form .actions>.shell>.core, #sprcom-guest-form .actions>.shell>.core, #sprcom-snid-guest-form .actions>.shell>.core { align-items: center; } #sprcom-login-form .visible-fields {} #sprcom-guest-form .visible-fields>.shell, #sprcom-login-form .visible-fields>.shell, #sprcom-register-form .visible-fields>.shell { background-color: #f8f8f8; border: 1px solid #ddd; } #sprcom-guest-form .visible-fields>.shell>.core, #sprcom-snid-guest-form .visible-fields>.shell>.core, #sprcom-login-form .visible-fields>.shell>.core, #sprcom-snid-login-form .visible-fields>.shell>.core, #sprcom-register-form .visible-fields>.shell>.core { padding: 4% 8%; } #sprcom-login-form .error-messages { margin-bottom: 1.5em; } #sprcom-login-form label { text-align-last: justify; } #sprcom-login-form .external-link { display: inline-block; font-size: 14px; font-weight: 400; } #sprcom-login-form .actions .form-field { flex-grow: 0; } #sprcom-login-form .actions>.shell>.core { flex-direction: row-reverse; } #sprcom-login-form .field-group.credentials .form-field, #sprcom-register-form .field-group.credentials .form-field, #sprcom-snid-guest-form .field-group.credentials .form-field, #sprcom-guest-form .field-group.credentials .form-field { width: 100%; } footer .addresses {} footer .addresses>.shell>.core { display: flex; flex-wrap: wrap; } footer .addresses>.shell { margin: -4px -15px; } footer .addresses article { flex-basis: auto; flex-grow: 0.25; padding: 4px 15px; width: 240px; } footer .footer-contact { flex-grow: 1; } footer .footer-meta { flex-basis: auto; width: 260px; } footer .payment-providers dt { display: none; } footer .payment-providers dd { -webkit-filter: grayscale(100%); filter: grayscale(100%); flex-basis: auto; opacity: 0.5; width: 30px; } footer .payment-providers dd img { display: block; width: 100%; } footer .payment-providers>.shell>.core { align-items: center; display: flex; justify-content: space-around; padding-bottom: 15px; padding-right: 9%; padding-top: 15px; } footer .contact-field {} footer .contact-field>.shell>.core { display: flex; flex-wrap: wrap; } footer .contact-field dt { margin-right: 0.25em; } footer .contact-field.email dt { display: none; } footer .contact-field--description { width: 100%; } footer>.live-area h4 { color: #444; margin-bottom: 10px; } footer>.live-area a { color: #222; text-decoration: underline; } footer>.live-area section { font-size: 14px; } footer>.live-area nav a { text-decoration: none; } footer>.live-area nav dt { display: none; } footer>.live-area:first-child { background-color: #fff; border-bottom: 1px solid #d9d9d9; border-top: 1px solid #d9d9d9; color: #666; } footer>.live-area:first-child>.shell>.core>* { padding-bottom: 5%; padding-top: 3%; width: 100%; } footer>.live-area:first-child p { font-size: 14px; } footer>.live-area:last-child { background-color: #f2f2f2; } footer>.live-area:last-child .logo { flex-basis: auto; width: calc(111.3953488372093px + 5.813953488372093%); } footer>.live-area:last-child .logo img { display: block; width: 100%; } footer>.live-area:last-child p { color: #222; font-size: 12px; } footer>.live-area>.shell>.core>* { padding-bottom: 15px; padding-top: 15px; width: 100%; } footer>.live-area>.shell>.core>*>.shell>.core { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; } footer>.live-area>.shell>.core>*>.shell { margin: -4px -15px; } footer>.live-area>.shell>.core>*>.shell>.core>* { padding: 4px 15px; } .order-details { margin-top: 30px; } .order-details section { flex-basis: auto; flex-grow: 1; padding: 10px; width: 195px; } .order-details .payment-details { width: 230px; } .order-details h2, .order-details .your-items { margin-top: 25px; padding: 10px; width: 100%; } .order-details .payment-details .payment-detail { display: flex; flex-wrap: wrap; } .order-details .payment-details .payment-detail dt { flex-basis: auto; width: 135px; } .order-details>.shell>.core { display: flex; flex-wrap: wrap; } .order-details>.shell { margin: -10px; } .root.verify .order-details h2 { position: absolute; width: auto; z-index: -1; } .colour-wrap { display: flex; flex-flow: row wrap; justify-content: flex-start; } .colour-box { margin-top: 20px; padding: 10px; } .colour { width: 150px; height: 80px; } .colour-hex { display: block; max-width: 150px; } .phone-input-field>.shell>.core { flex-direction: row; flex-wrap: wrap; } .phone-input-field>.shell>.core> :nth-child(1) { order: 2; width: 90px; margin-right: -5px; } .phone-input-field>.shell>.core> :nth-child(2) { border-bottom-left-radius: 0; border-top-left-radius: 0; flex: 1; order: 3; } .phone-input-field label { order: 1; width: 100%; } /* Elements Design System */ /* https://github.com/springernature/frontend-toolkits/tree/main/toolkits/global/packages/global-status-message */ /** * Status Message * Default branding for component */ /* .c-status-message { display: flex; align-items: center; /* in-between adjustment (legacy link checkout styling) */ /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; */ /* font-size: 1rem; */ /* position: relative; width: 100%; box-sizing: border-box; } */ /* .c-status-message *:last-child { margin-bottom: 0px; } .c-status-message--boxed { background-color: white; border-radius: 2px; border: 1px solid #cccccc; line-height: 1.4; padding: 16px; } */ /* .c-status-message__heading { */ /* in-between adjustment (legacy link checkout styling) */ /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; */ /* font-size: 1rem; */ /* font-weight: 700; } */ /* .c-status-message__icon { fill: currentColor; transform: translate(0, 0); display: inline-block; vertical-align: text-top; width: 1.5em; height: 1.5em; flex: 0 0 auto; margin-right: 8px; } */ /* .c-status-message__icon--top { align-self: flex-start; } */ /* .c-status-message--info .c-status-message__icon { */ /* in-between adjustment (legacy link checkout styling) */ /* color: #003f8d; */ /* color: #0176c3; } */ /* .c-status-message--boxed.c-status-message--info { */ /* in-between adjustment (legacy link checkout styling) */ /* border-bottom: 4px solid #003f8d; */ /* border-bottom: 4px solid #0176c3; } */ /* .c-status-message--error .c-status-message__icon { color: #c40606; } .c-status-message--boxed.c-status-message--error { border-bottom: 4px solid #c40606; } */ /* .c-status-message--success .c-status-message__icon { color: #00b8b0; } .c-status-message--boxed.c-status-message--success { border-bottom: 4px solid #00b8b0; } .c-status-message--warning .c-status-message__icon { color: #edbc53; } .c-status-message--boxed.c-status-message--warning { border-bottom: 4px solid #edbc53; } */ /* .c-status-message p { margin-top: 0 !important; } */ .login-choice-container { border: 1px solid #979797; margin-top: 30px; } .login-choice-container .login-choice-item:not(:first-child) { margin-top: 15px !important; } .login-choice-item { background-color: #F2F2F2; cursor: default; container-type: inline-size; container-name: loginItem; } .login-choice-heading { position: relative; font-weight: 400; } .login-option-button { font-family: 'Source Sans Pro'; font-weight: 500; font-size: 13px; } .login-choice-item h2.login-choice-heading::before { content: ""; display: inline-block; width: 11px; height: 11px; background-color: #fff; border-radius: 50%; border: 4px solid #fff; margin-top: 8px; margin-right: 6px; box-shadow: 0 0 0 1px #b3b3b3; position: absolute; left: -30px; top: -3px; vertical-align: baseline; } .login-choice-item.checked h2.login-choice-heading::before { box-shadow: 0 0 0 2px #0176c3; background-color: #0176c3; } .login-choice-item.checked { background-color: #fff; } .login-choice-title { padding: 4% 8%; } .login-choice-title .heading-info { padding-top: 10px; } @container loginItem (max-width: 400px) { .login-choice-title { padding-left: 40px; } h2::before { left: -40px; } } .login-choice-item.checked .login-choice-form { display: block; } .login-choice-item.unchecked .login-choice-form { display: none; } .login-choice-form .visible-fields>.shell { border: none !important; } .login-choice-divider { margin-top: 0px; margin-bottom: 0px; margin-left: 8%; margin-right: 8%; } .login-choice-item.checked .login-choice-form .visible-fields>.shell { background-color: #fff !important; } .login-choice-form .visible-fields>.shell>.core { padding-top: 0 !important; } .login-choice-item .login-choice-form { transition: opacity 0.3s; } .login-choice-item.invisible .login-choice-form { opacity: 0; } .login-choice-item.visible .login-choice-form { opacity: 1; } .login-label-info { color: #646464; padding-bottom: 10px; } .login-success-container { border: 1px solid #979797; padding: 4% 4% 9% 4%; } .login-success-heading { position: relative; font-weight: 400; display: flex; align-items: center; } .login-success-heading::before { background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iaS1zdWNjZXNzIiB2aWV3Qm94PSIwIDAgMTggMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTkgMGM0Ljk3MDU2MjcgMCA5IDQuMDI5NDM3MjUgOSA5IDAgNC45NzA1NjI3LTQuMDI5NDM3MyA5LTkgOS00Ljk3MDU2Mjc1IDAtOS00LjAyOTQzNzMtOS05IDAtNC45NzA1NjI3NSA0LjAyOTQzNzI1LTkgOS05em0zLjQ4NjAxOTggNC45ODE2MzE2MS00LjcxODAyOTY4IDUuNTA2NTc4NTktMi42MjgzNDE2OC0yLjAyMzAwMDI0Yy0uNDI4NjI0MjEtLjM2NzMwNTQ0LTEuMDY1NjQ5OTMtLjMwNzc1MzQ2LTEuNDIyODM2NzcuMTMzMDEzMDctLjM1NzE4Njg1LjQ0MDc2NjUzLS4yOTkyNzU0MiAxLjA5NTgzODMuMTI5MzQ4NzkgMS40NjMxNDM3N2wzLjQwNzM1NTA4IDIuNzMyMzA2M2MuNDIyMTU4MDEuMzM4NTIyMSAxLjAzNzAwOTUxLjI3OTgyNTIgMS4zODc0OTE4OS0uMTMyNDU3MWw1LjM4NDUwNTI3LTYuMzMzOTQ1NDljLjM2MTM1MTMtLjQzNzE2MjI2LjMwOTY1NzMtMS4wOTI3ODM4Mi0uMTE1NDYyLTEuNDY0MzcxNzUtLjQyNTExOTItLjM3MTU4NzkyLTEuMDYyNjc5Ni0uMzE4NDI5NDEtMS40MjQwMzA5LjExODczMjg1eiIgZmlsbD0iIzAwQjhCMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+Cg==); content: ""; display: inline-block; height: 20px; width: 20px; margin-right: 10px; } .login-success-info { margin-top: 10px; } .login-success-info span { font-weight: bold; } /* https://github.com/springernature/frontend-toolkits/tree/main/toolkits/global/packages/global-forms */ .c-forms__error { display: block; } .c-forms__error { font-weight: normal; } .c-forms__error { /* color: $global-forms-message-color-error; */ color: #c40606; display: flex; align-items: flex-start; } label+.c-forms__error, .c-forms__error+label { /* margin-top: $global-forms-input-stack-spacing; */ margin-top: .25rem; } .c-forms__error .c-forms__icon { /* color: $global-forms-message-color-error; */ color: #c40606; } .c-forms__icon svg { /* height: $global-forms-message-icon-size; */ height: 1rem; /* width: $global-forms-message-icon-size; */ width: 1rem; /* vertical-align: calc((#{$global-forms-input-padding-inline} / 8) * -1); */ vertical-align: calc(.0625rem * -1); overflow: visible; pointer-events: none; } .c-forms__error-summary { /* line-height: $global-forms-line-height; */ line-height: 1.4; } .c-forms__error-summary { /* font-size: $global-forms-input-font-size; */ font-size: 1rem; } .c-forms__error-summary { /* max-width: $global-forms-input-width-maximum; */ max-width: 70ch; } *+.c-forms__error-summary { /* margin-top: $global-forms-field-stack-spacing; */ margin-top: 1.5rem; } .c-forms__error-summary { /* background-color: $global-forms-input-background-color; */ background-color: #ffffff; box-sizing: border-box; display: flex; /* gap: $global-forms-input-padding-inline; */ gap: .5rem; /* padding: $global-forms-input-padding-inline; */ padding: .5rem; /* color: $global-forms-message-color-error; */ color: #c40606; /* border: $global-forms-input-border-width solid $global-forms-indent-border-color; */ border: 1px solid #dadada; /* border-bottom: 4px solid $global-forms-message-color-error; */ border-bottom: 4px solid #c40606; /* edit */ margin-bottom: 1rem; width: auto; } .c-forms__error-summary .c-forms__icon svg { /* width: #{$global-forms-input-font-size * 2}; */ width: 2rem; /* height: #{$global-forms-input-font-size * 2}; */ height: 2rem; } .c-forms__error-summary-errors { padding: 0; margin-bottom: 0; /* margin-top: $global-forms-input-padding-block; */ margin-top: .5rem; list-style: none; } .c-forms__error-summary-errors a { color: inherit; text-decoration: underline; } .c-forms__error-summary-title { color: initial; font-weight: bold; } .c-forms__error-summary-errors li+li { /* margin-top: $global-forms-input-stack-spacing; */ margin-top: 1.5rem; } .subs-promotion { background: var(--colours-greyblue-200, #EBF1F5); margin-top: 32px; display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .main-promotion { flex: 1; margin: 12px; overflow-wrap: normal; } .promotion-new-text { color: #002B58; font-weight: 700; font-size: 12px; } .promotion-new { border-radius: 4px; background: var(--colours-greyblue-300, #CEDBE0); padding: 2px 4px; display: inline-flex; align-items: flex-start; gap: 10px; } .main-promotion p { padding-bottom: 12px; } .promotion-img-container { flex: 0; font-size:0; line-height:0; display: none; } .promotion-img-container { flex: 0; font-size:0; line-height:0; } .promotion-img { max-width: 180px; } .u-btn { cursor: pointer; display: inline-block; background-color: #183642; color: #fff; font-weight: bold; padding: 0.25rem 1rem; font-size: 1rem; line-height: 1.5; border-radius: 24px; text-align: center; border: none; max-width: 300px; text-decoration: none; } .u-btn svg { vertical-align: middle; } .u-btn:hover, .u-btn:focus { color: #01324b; background-color: white; background-image: none; } .u-btn:hover { box-shadow: 0 0 0 1px #01324b; text-decoration: none; } @media (min-width: 710px) { .promotion-img-container { display: inline; } .main-promotion { margin: 12px 24px 12px 24px; } } /* modal CSS overwrite on cart page */ .your-cart main .message .message-body, .your-cart main .message a { display: none; } .your-cart main .message { border-bottom: 4px solid #00b8b0; border-radius: 2px; } .your-cart main .message-title { align-items: center; padding: 16px; } .your-cart main .message-title::before { background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iaS1zdWNjZXNzIiB2aWV3Qm94PSIwIDAgMTggMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTkgMGM0Ljk3MDU2MjcgMCA5IDQuMDI5NDM3MjUgOSA5IDAgNC45NzA1NjI3LTQuMDI5NDM3MyA5LTkgOS00Ljk3MDU2Mjc1IDAtOS00LjAyOTQzNzMtOS05IDAtNC45NzA1NjI3NSA0LjAyOTQzNzI1LTkgOS05em0zLjQ4NjAxOTggNC45ODE2MzE2MS00LjcxODAyOTY4IDUuNTA2NTc4NTktMi42MjgzNDE2OC0yLjAyMzAwMDI0Yy0uNDI4NjI0MjEtLjM2NzMwNTQ0LTEuMDY1NjQ5OTMtLjMwNzc1MzQ2LTEuNDIyODM2NzcuMTMzMDEzMDctLjM1NzE4Njg1LjQ0MDc2NjUzLS4yOTkyNzU0MiAxLjA5NTgzODMuMTI5MzQ4NzkgMS40NjMxNDM3N2wzLjQwNzM1NTA4IDIuNzMyMzA2M2MuNDIyMTU4MDEuMzM4NTIyMSAxLjAzNzAwOTUxLjI3OTgyNTIgMS4zODc0OTE4OS0uMTMyNDU3MWw1LjM4NDUwNTI3LTYuMzMzOTQ1NDljLjM2MTM1MTMtLjQzNzE2MjI2LjMwOTY1NzMtMS4wOTI3ODM4Mi0uMTE1NDYyLTEuNDY0MzcxNzUtLjQyNTExOTItLjM3MTU4NzkyLTEuMDYyNjc5Ni0uMzE4NDI5NDEtMS40MjQwMzA5LjExODczMjg1eiIgZmlsbD0iIzAwYjhiMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+Cg==); background-size: contain; background-repeat: no-repeat; content: ""; display: inline-block; height: 20px; width: 20px; margin-right: 10px; } /* modal CSS overwrite end */ .c-error-text { text-align: center; } .c-error-spacing { margin-top: 30px; } .c-error-link { color: #fff !important; } .c-error-flex { display: flex; justify-content: center; gap: 20px; } .c-error-img { display: block; margin: auto; }