/* ---- globals ---- */
/* inputs */
/* categories navigation */
/* compare products */
/* page structure */
/* mechanics and animations */
/* --- components ---- */
/* no image icon */
/* basic dropdowns (dropdowns from init.js) */
/* miniboxes */
/* waiting circle */
/* newsletter */
/* header */
/* stepper */
/* tables */
/* tooltips */
/* tooltips and modals */
/* ---- pages ---- */
/* product list */
/* product details */
/* message bars and texts */
/* cart */
/* editing order stuff */
/* Other */
* {
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
padding: 0;
}
h1 {
font-family: Inter;
font-size: 32px;
font-weight: 500;
line-height: 40px;
text-align: left;
}
h2 {
font-family: Inter;
font-size: 24px;
font-weight: 500;
line-height: 32px;
text-align: left;
}
h3 {
font-family: Inter;
font-size: 18px;
font-weight: 600;
line-height: 24px;
text-align: left;
}
h4 {
font-family: Inter;
font-size: 16px;
font-weight: 600;
line-height: 20px;
text-align: left;
}
p {
font-family: Inter;
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-align: left;
}
html {
position: relative;
min-height: 100%;
font-size: 16px;
}
.container {
width: 93%;
margin: auto;
}
body {
margin: 0;
font-family: Inter, sans-serif;
background: rgba(255,255,255,1.00);
font-weight: 400;
overflow-y: scroll;
line-height: 1.5em;
color: rgba(46,46,46,1.00);
}
body .docket {
position: absolute;
margin-top: 30px;
color: #717171;
font-size: 13px;
}
@media screen and (max-width: 1280px) {
body .docket {
margin-top: 20px;
font-size: 11px;
line-height: 1.5;
}
}
img {
max-width: 100%;
}
i {
color: rgba(33,90,60,1.00);
cursor: inherit !important;
}
i:hover {
cursor: pointer;
}
a {
color: rgba(33,90,60,1.00);
font-weight: 600;
text-decoration: none;
}
a svg {
fill: rgba(33,90,60,1.00);
}
mark {
background: #fdd835;
}
a:hover {
color: rgba(33,90,60,1.00);
}
a:hover svg {
fill: rgba(33,90,60,1.00);
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.ulCLassFilterList {
padding-bottom: 60px;
}
input[type=password]::-ms-reveal,
input[type=password]::-ms-clear {
display: none;
}
:invalid, :-moz-submit-invalid, :-moz-invalid {
box-shadow: none;
}
.close-button {
border: none;
background: transparent;
fill: #696666;
padding: 0;
cursor: pointer;
}
.close-button:hover {
background: transparent;
fill: rgba(33,90,60,1.00);
}
.dropdown-arrow {
transform: rotate(360);
transition: transform 800ms !important;
display: inline-block;
}
.close-dropdown-js .dropdown-arrow {
transform: rotate(180deg);
transition: transform 800ms;
}
.hidden-js {
display: none !important;
}
.scroll-container-js {
overflow-y: auto;
overflow-x: hidden;
}
.attached-js {
position: absolute;
left: 0;
right: 0;
}
[readonly] {
color: #b0b0b0 !important;
cursor: default;
pointer-events: none;
user-select: none;
border-color: #b0b0b0 !important;
}
input::-ms-clear {
display: none;
}
h4:first-child {
margin-top: 0;
}
.expanded-js.dropdown-arrow, .expanded-js .dropdown-arrow {
transform: rotate(180deg);
transition: transform 800ms !important;
}
.slided-right-js {
transform: translateX(-100%);
}
.slided-position-right-js {
left: -110%;
}
.hidden-besides-left-js {
transform: translateX(-110%) !important;
}
/* waiting for ajax modal */
.during-ajax-modal, .during-ajax-modal-js {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(255,255,255,1.00);
display: flex;
opacity: 0.9;
z-index: 1000;
}
.during-ajax-modal .loader, .during-ajax-modal-js .loader {
margin: auto;
}
.expandable-js {
height: 0;
overflow: hidden;
transition: height 800ms;
}
.expandable-js.expanded-js {
height: auto;
}
.expandable-js.no-animation-js {
transition: none;
}
.product-list {
position: relative;
}
/* ---- PAGE STRUCTURE ----*/
.page-container {
position: relative;
}
.main-content {
width: 100%;
position: relative;
}
.message-popup-background {
cursor: default;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10vw;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1001;
}
.message-popup-background:not(.hidden-js) + .message-popup-background:not(.unsuccessfull-post-message-js) {
display: none;
}
.message-popup-background .popup-container {
position: relative;
max-width: 100%;
width: max-content;
margin: 0 auto;
padding: 24px;
border-radius: 5px;
box-shadow: 0px 0px 4px 0px #ddd;
background-color: rgba(255,255,255,1.00);
color: rgba(46,46,46,1.00);
transform: translateY(-50%);
top: 50%;
left: 0px;
right: 0px;
z-index: 999;
}
.message-popup-background .popup-container .data-form__header {
display: flex;
justify-content: space-between;
color: rgba(46,46,46,1.00);
font-size: 24px;
font-weight: 500;
line-height: 32px;
margin-bottom: 24px;
gap: 16px;
}
.message-popup-background .popup-container .data-form__info {
border-bottom: 1px solid #E7E7E7;
margin-bottom: 24px;
padding-bottom: 32px;
}
.message-popup-background .popup-container .data-form .primary-action-button {
width: 100%;
}
.seach-by-type-and-area-container {
display: inline-block;
width: 590px;
}
.social-container {
width: 93%;
margin-top: 32px;
}
.social-container .CustomerContentSection {
margin-top: 16px;
display: flex;
flex-direction: column;
}
.social-container .CustomerContentSection .CustomerSocialButton {
display: inline-flex !important;
box-shadow: 0px 1px 1px 1px lightgray;
justify-content: center;
align-items: center;
width: calc(10% - 11px);
min-width: 300px;
height: 46px;
color: #232323;
font-size: 12px;
line-height: 16px;
text-transform: uppercase;
font-weight: 400;
margin-bottom: 20px;
padding: 17px;
text-align: center;
cursor: pointer;
letter-spacing: 1px;
}
.social-container .CustomerContentSection .CustomerSocialButtonGoogle {
background-color: #FFFFFF;
}
.social-container .CustomerContentSection .CustomerSocialButtonFacebook {
background-color: #FFFFFF;
}
.social-container .CustomerContentSection .CustomerSocialButton:hover {
box-shadow: 0 0 4px #4285F4;
transition: 1s;
}
.social-container .CustomerContentSection .GFbLinkIcon {
margin-right: 10px;
width: 24px;
height: 24px;
}
.isInCartPopup {
position: fixed;
min-height: 40px;
width: auto;
padding: 0 20px;
background-color: rgba(255,255,255,1.00);
z-index: 100;
box-shadow: 2px 2px 3px 0 #b0b0b0;
color: rgba(46,46,46,1.00);
font-size: 15px;
line-height: 40px;
border-radius: 8px;
}
.isInCartPopup span {
color: rgba(33,90,60,1.00);
}
.isInCartPopup.isInCart--variants-js {
margin-top: 5px;
position: absolute;
}
@media screen and (min-width: 1280px) {
.isInCartPopup.isInCart--variants-js {
min-width: 270px;
}
}
@media screen and (max-width: 1279px) {
.isInCartPopup.isInCart--variants-js {
left: 50%;
transform: translate(-50%, 0);
}
}
.svgIcon-inCart {
width: 20px;
height: 20px;
cursor: pointer;
display: inline-flex;
vertical-align: middle;
margin-right: 5px;
margin-left: 5px;
}
.svgIcon-inCart--PL {
position: absolute;
left: 5px;
top: 50%;
transform: translate(0, -50%);
}
.successfull-post-message {
color: rgba(46,46,46,1.00);
}
.successfull-post-message .message-header {
text-align: center;
font-size: 24px;
font-weight: 500;
line-height: 32px;
margin: auto;
background-color: rgba(255,255,255,1.00);
display: flex;
align-items: center;
}
.successfull-post-message .message-header i {
font-size: 30px !important;
}
.successfull-post-message .message-header p {
color: rgba(46,46,46,1.00);
font-size: 18px;
}
.successfull-post-message .message-header + .info {
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
padding: 24px 0 24px 0;
text-align: left !important;
}
button {
padding: 0;
}
.primary-action-button {
display: flex;
text-align: center;
height: 40px;
padding: 8px 32px;
justify-content: center;
align-items: center;
gap: 10px;
background-color: rgba(33,90,60,1.00);
color: rgba(255,255,255,1.00);
border-radius: 5px;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
cursor: pointer;
border: none;
outline: none;
transition: 200ms;
}
@media screen and (min-width: 768px) {
.primary-action-button:hover {
transition: 200ms;
background-color: rgba(33,90,60,1.00);
color: rgba(255,255,255,1.00);
}
.primary-action-button:hover svg {
fill: rgba(255,255,255,1.00);
}
}
@media screen and (max-width: 768px) {
.primary-action-button:active {
transition: 200ms;
background-color: rgba(33,90,60,1.00);
color: rgba(255,255,255,1.00);
}
.primary-action-button:active svg {
fill: rgba(255,255,255,1.00);
}
}
.primary-action-button:disabled {
background-color: #F3F3F3;
pointer-events: none;
color: #959595;
cursor: initial;
transition: 200ms;
}
.primary-action-button svg {
fill: rgba(255,255,255,1.00);
}
.secondary-action-button {
display: flex;
font-size: 14px;
font-weight: 600;
line-height: 20px;
text-align: center;
height: 40px;
padding: 8px 32px;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
border: 2px solid rgba(33,90,60,1.00);
background-color: rgba(255,255,255,1.00);
color: rgba(33,90,60,1.00);
border-radius: 5px;
cursor: pointer;
}
.secondary-action-button svg {
fill: rgba(228,98,48,1.00);
}
@media screen and (min-width: 768px) {
.secondary-action-button:hover {
transition: 200ms;
color: rgba(228,98,48,1.00);
border: 2px solid rgba(228,98,48,1.00);
}
.secondary-action-button:hover svg {
fill: rgba(228,98,48,1.00);
}
}
@media screen and (max-width: 767px) {
.secondary-action-button:active {
transition: 200ms;
border: 2px solid rgba(33,90,60,1.00);
background-color: rgba(255,255,255,1.00);
color: rgba(33,90,60,1.00);
}
.secondary-action-button:active svg {
fill: rgba(33,90,60,1.00);
}
}
.secondary-action-button:disabled {
border: 2px solid #959595;
color: #959595;
pointer-events: none;
cursor: initial;
transition: 200ms;
}
.pure-button {
display: flex;
align-items: center;
gap: 4px;
color: rgba(33,90,60,1.00);
background: none;
border: none;
cursor: pointer;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}
.pure-button svg {
fill: rgba(33,90,60,1.00);
}
.pure-button:hover {
transition: 200ms;
color: rgba(228,98,48,1.00);
}
.pure-button:hover svg {
fill: rgba(228,98,48,1.00);
}
.contact-validation-error {
text-align: left;
color: rgba(218,36,66,1.00);
margin-left: 25px;
}
.error p {
color: rgba(218,36,66,1.00);
}
.small-input-error {
display: table;
text-align: left;
color: rgba(218,36,66,1.00);
font-size: 14px;
margin-left: 3px;
}
.validation-info__container {
font-size: 12px;
font-weight: 400;
line-height: 18px;
text-align: left;
color: rgba(218,36,66,1.00);
margin: 0 16px 0 16px;
}
.validation-info__container .svgIcon {
width: 16px;
height: 16px;
fill: rgba(218,36,66,1.00);
margin-right: 4px;
}
.validation-info__container .validation-info__element {
display: flex;
align-items: center;
}
.validation-info__container .validation-info__container .valid-data-js {
color: rgba(0,137,69,1.00);
}
.validation-info__container .valid-data-js .svgIcon {
fill: rgba(0,137,69,1.00);
}
.validation-info__container .valid-data-js span {
color: rgba(0,137,69,1.00);
}
input,
select,
textarea {
font-family: Inter, sans-serif;
outline: none;
background-color: inherit;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 100px rgba(255,255,255,1.00) inset !important;
-webkit-text-fill-color: rgba(46,46,46,1.00) !important;
}
select {
background-image: url("data:image/svg+xml,<svg height='18px' width='18px' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'><path d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/></svg>");
background-repeat: no-repeat;
background-position-x: 95%;
background-position-y: 50%;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 30px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
}
.number-input {
width: 60px !important;
padding: 0 4px 0 14px !important;
}
textarea {
width: 100%;
height: 96px;
background-color: inherit;
color: rgba(46,46,46,1.00);
padding: 18px 16px 24px !important;
border-radius: 5px;
border: 1px solid rgba(74,74,74,1.00);
font-size: 15px;
resize: vertical;
max-height: 300px;
min-height: 96px;
}
textarea::placeholder {
color: #696666;
font-size: 14px;
line-height: 20px;
}
.characters-length {
margin: -6px 0 0 24px;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: #5b5858;
text-align: left;
position: relative;
}
.form input {
border: none;
outline: none;
border-bottom: 1px solid rgba(255,255,255,1.00);
font-size: 14px;
color: rgba(255,255,255,1.00);
width: 100%;
box-sizing: border-box;
padding: 10px 0;
margin-bottom: 10px;
transition: all 1s ease;
}
.form input::placeholder {
color: #696666;
}
.form-container {
background-color: rgba(255,255,255,1.00);
width: 30rem;
min-height: auto;
padding: 2rem 3rem;
box-sizing: border-box;
}
.form-container .primary-action-button {
width: 100%;
height: 50px;
justify-content: center;
}
.form__header {
color: rgba(46,46,46,1.00);
opacity: 0.65;
text-align: center;
margin-bottom: 20px;
font-weight: normal;
}
.form__required-fields {
margin: 8px 0 24px;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: #5b5858;
text-align: left;
}
.form__wrapper {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.form__wrapper > .form__input-wrapper {
width: 49%;
}
.form__wrapper.first-short > .form__input-wrapper {
width: 69%;
}
.form__wrapper.first-short > .form__input-wrapper:first-child {
width: 29%;
}
.form__input-wrapper {
padding: 0 1px;
display: block;
position: relative;
width: 100%;
background-color: inherit;
margin-bottom: 24px;
}
.form__input-wrapper:focus-within label {
color: rgba(33,90,60,1.00);
}
.form__input-wrapper label {
color: #696666;
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
transition: 0.2s ease all;
font-size: 14px;
}
.form__input-wrapper > label, .form__input-wrapper > .form__input-info {
color: #696666;
}
.form__input-wrapper .form__input-value:disabled + label {
color: #696666;
}
.form__input-wrapper .validation-error {
color: rgba(218,36,66,1.00) !important;
}
.form__input-wrapper.textarea .form__invalid-input {
margin: -10px 0;
}
.form__input-value {
width: 100%;
padding: 6px 16px;
background-color: inherit;
color: rgba(46,46,46,1.00);
border: 1px solid rgba(74,74,74,1.00);
border-radius: 5px;
height: 40px;
box-sizing: border-box;
}
.form__input-value:hover {
border-color: rgba(228,98,48,1.00);
}
.form__input-value:focus {
border-color: rgba(33,90,60,1.00);
box-shadow: 0 0 0 1px rgba(33,90,60,1.00);
transition: 0.3s all;
}
.form__input-value:disabled {
border-color: #696666;
}
.form__input-value .select__options {
left: 0;
top: 40px;
}
.form__input-value--clear-button {
display: none;
position: absolute;
top: 10px;
right: 5px;
padding-left: 5px;
background: white;
cursor: pointer;
}
.form__input-value--clear-button svg {
fill: rgba(33,90,60,1.00);
width: 20px !important;
height: 20px !important;
}
.form__input-value.has-value + .form__input-value--clear-button {
display: block;
}
.form__input-info {
left: 16px;
position: absolute;
pointer-events: none;
padding: 0 4px;
background-color: rgba(255,255,255,1.00);
transition: 0.2s ease all;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
font-weight: 400;
line-height: 20px;
z-index: 1;
}
.form__input-info.disabled {
top: 1px;
font-size: 12px;
line-height: 16px;
padding: 0 4px;
z-index: 100;
}
.form__validation-info-js, .form__validation-tin-js, .form__validation-required-js, .form__invalid-input {
color: rgba(218,36,66,1.00);
font-size: 12px;
display: block;
position: absolute;
margin: -3px 0;
}
.form__validation-info-js.validation-zip-code-js, .form__validation-tin-js.validation-zip-code-js, .form__validation-required-js.validation-zip-code-js, .form__invalid-input.validation-zip-code-js {
position: static;
}
.form__icons {
color: #696666;
position: absolute;
left: 0;
}
.form .form__icon_left, .form__icon_left {
left: 2.5rem;
}
.form .form__icon_padding, .form__icon_padding {
padding-left: 2.5rem;
}
.form__textarea_height {
top: 125px !important;
}
.form__preview {
left: auto;
top: 0.5rem;
right: 0.5rem;
cursor: pointer;
color: #696666;
fill: #696666;
}
.form__preview .svgIcon {
width: 24px;
height: 24px;
}
.form__requiredFields--info {
color: #4b4848;
font-size: 12px;
}
.form > button {
width: 100%;
margin: 15px 0;
}
.checkBoxes__container input {
display: none;
}
.checkBoxes__container input[disabled] + label::before {
opacity: 0.7;
user-select: none;
}
.checkBoxes__container input[disabled] + label {
pointer-events: none;
opacity: 0.7;
}
.checkBoxes__container input + label {
display: flex;
align-items: baseline;
column-gap: 0.8em;
cursor: pointer;
position: relative;
background-color: transparent;
color: rgba(46,46,46,1.00);
transition: all 200ms ease;
}
.checkBoxes__container label:hover::before {
border: solid 1px #7C3033;
}
.checkBoxes__container input + label:before {
content: "";
display: inline-block;
min-width: 16px;
width: 16px;
height: 16px;
border-radius: 4px;
border: solid 1px rgba(221,221,221,1.00);
transform: translateY(0.25em);
background-color: rgba(255,255,255,1.00);
box-sizing: border-box;
transition: all 200ms ease;
}
.checkBoxes__container input + label:before:hover {
border: solid 1px rgba(33,90,60,1.00);
}
.checkBoxes__container input + label .checkBoxes__checkIcon {
display: none;
}
.checkBoxes__container input:checked + label .checkBoxes__checkIcon {
display: block;
position: absolute;
left: 2px;
top: -2px;
transform: translateY(0.25em);
}
.checkBoxes__container input + label .checkBoxes__checkIcon svg {
fill: rgba(255,255,255,1.00);
width: 12px;
height: 12px;
}
.checkBoxes__container label.validation-error-js:before {
border: 1px solid rgba(218,36,66,1.00) !important;
}
.checkBoxes__container input:checked + label:before {
content: "";
text-align: center;
background-color: rgba(33,90,60,1.00);
overflow: hidden;
border: solid 1px rgba(33,90,60,1.00);
}
.checkBoxes__container--radio input + label .checkBoxes__checkIcon svg {
fill: rgba(33,90,60,1.00);
}
.checkBoxes__container--radio input + label:before {
border-radius: 50%;
}
.checkBoxes__container--radio input:checked + label:before {
background-color: rgba(255,255,255,1.00);
}
.button__icon {
display: flex;
width: 24px;
height: 24px;
justify-content: center;
align-items: center;
}
.button__group {
display: flex;
flex-direction: row;
width: 100%;
flex-wrap: nowrap;
gap: 8px;
}
.button__group .primary-action-button {
flex-grow: 1;
}
.button__group .secondary-action-button {
flex-shrink: 0;
flex-grow: unset;
height: 40px;
width: 40px;
padding: 8px;
}
.connected {
gap: 0;
}
.connected > .button:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.connected > .button:last-child {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.page-padding {
padding: 0 9%;
}
@media only screen and (max-width: 1439px) {
.page-padding {
padding: 0 32px;
}
}
@media only screen and (max-width: 768px) {
.page-padding {
padding: 0 5%;
}
}
.required-fields {
margin: 8px 0 24px 0;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: #5b5858;
text-align: left;
}
.arrow {
display: flex;
width: 48px;
height: 48px;
max-width: 48px;
max-height: 48px;
box-sizing: border-box;
aspect-ratio: 1/1;
background: rgba(255,255,255,1.00);
border-radius: 4px;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
border: none;
}
.arrow__icon {
fill: rgba(33,90,60,1.00);
}
.arrow.shadowed {
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
}
.arrow.small {
width: 24px;
height: 24px;
max-width: 24px;
max-height: 24px;
}
.swiper-button-disabled {
display: none !important;
}
.characters-counter-js {
position: relative;
bottom: 23px;
right: -12px;
font-size: 12px;
color: #666;
opacity: 0;
transition: opacity 0.2s;
height: 16px;
background: #fff;
display: flex;
width: calc(100% - 35px);
align-items: center;
justify-content: flex-end;
}
.scrollable {
position: absolute;
top: 1px;
right: 24px;
height: 16px;
background: #fff;
display: flex;
width: calc(100% - 35px);
align-items: center;
justify-content: flex-end;
}
.characters-counter-js:not(.hidden-js) {
opacity: 1;
}
::-webkit-scrollbar {
height: 4px;
width: 4px;
border-radius: 2.5px;
opacity: 49%;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px transparent;
opacity: 17%;
}
::-webkit-scrollbar-thumb {
background-color: rgba(149, 149, 149, 0.5);
outline: none;
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #959595;
}
.ai-generated-content {
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 16px;
text-align: left;
color: #727272;
}
[name=quantity] {
display: block;
float: left;
line-height: 1.5em;
height: 40px;
width: 40px;
text-align: center;
border: 1px solid #DDDDDD;
padding: 0;
}
.archival {
background: #D5D5D5;
}
.Promotion, .Free {
background: rgba(218,36,66,1.00);
}
.BestRated {
background: rgba(133,95,198,1.00);
}
.NewProduct {
background: rgba(37,58,117,1.00);
}
.PromotionalProduct {
background: rgba(118,118,118,1.00);
}
.RecommendedProduct {
background: rgba(0,137,69,1.00);
}
.VendorRecomendation {
background: rgba(27,111,177,1.00);
}
.GreatPrice {
background: rgba(151,99,81,1.00);
}
.GreatQuality {
background: rgba(102,231,219,1.00);
}
.Sale {
background: rgba(245,166,35,1.00);
}
.Reward {
background: rgba(250,119,25,1.00);
}
.quantity-flag {
background: rgba(33,90,60,1.00);
color: rgba(255,255,255,1.00);
}
/* ---- components ---- */
.flag {
position: relative;
background-color: rgba(255,255,255,1.00);
background-image: url(../css/img/flags.png);
display: inline-block;
width: 31px;
height: 19px;
padding: 7px;
vertical-align: text-top !important;
}
.flag-be {
background-position: -2px -5px;
}
.flag-bg {
background-position: -2px -27px;
}
.flag-cs {
background-position: -2px -52px;
}
.flag-da {
background-position: -2px -76px;
}
.flag-de {
background-position: -2px -101px;
}
.flag-el {
background-position: -2px -125px;
}
.flag-en {
background-position: -2px -150px;
}
.flag-es {
background-position: -2px -174px;
}
.flag-et {
background-position: -2px -199px;
}
.flag-fi {
background-position: -2px -224px;
}
.flag-fr {
background-position: -2px -248px;
}
.flag-hr {
background-position: -2px -273px;
}
.flag-hu {
background-position: -2px -298px;
}
.flag-is {
background-position: -2px -322px;
}
.flag-it {
background-position: -2px -347px;
}
.flag-ja {
background-position: -2px -371px;
}
.flag-ka {
background-position: -2px -396px;
}
.flag-lt {
background-position: -2px -421px;
}
.flag-lv {
background-position: -2px -445px;
}
.flag-mk {
background-position: -2px -470px;
}
.flag-nl {
background-position: -2px -495px;
}
.flag-no {
background-position: -2px -519px;
}
.flag-pl {
background-position: -2px -544px;
}
.flag-pt {
background-position: -2px -568px;
}
.flag-ro {
background-position: -2px -593px;
}
.flag-ru {
background-position: -2px -617px;
}
.flag-sk {
background-position: -2px -642px;
}
.flag-sl {
background-position: -2px -667px;
}
.flag-sq {
background-position: -2px -691px;
}
.flag-sr {
background-position: -2px -716px;
}
.flag-sv {
background-position: -2px -740px;
}
.flag-tr {
background-position: -2px -765px;
}
.flag-uk {
background-position: -2px -790px;
}
.pagination {
display: flex;
padding: 24px 0;
font-size: 14px;
font-style: normal;
line-height: 20px;
align-items: center;
justify-content: flex-end;
}
.pagination .change-quantity {
background: none;
border: none;
padding: 0 8px;
width: auto;
color: #696666;
cursor: pointer;
}
.pagination .change-quantity__active {
color: rgba(46,46,46,1.00) !important;
font-weight: 600;
}
.pagination .change-quantity-button {
border: none;
padding: 0;
height: 24px;
display: flex;
align-items: center;
background: none;
color: rgba(33,90,60,1.00);
font-weight: 600;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.pagination .change-quantity-button span {
display: none;
}
}
.pagination .change-quantity-button[disabled] {
color: #696666;
cursor: default;
}
.pagination .change-quantity-button[disabled] svg {
fill: #696666;
}
.pagination .change-quantity-button svg {
width: 16px;
height: 16px;
fill: rgba(33,90,60,1.00);
}
@media screen and (max-width: 768px) {
.pagination .change-quantity-button svg {
width: 24px;
height: 24px;
}
}
.pagination .page-amount {
display: block;
float: left;
}
.pagination > *:not(:first-child) {
margin-left: 8px;
}
/* ---- partial pages ---- */
.homepage {
display: flex;
flex-direction: column;
padding: 16px 0;
overflow: hidden;
}
.homepage section {
margin: 16px 0;
}
@media screen and (min-width: 769px) and (max-width: 1439px) {
.homepage {
padding: 16px 0;
}
}
@media screen and (max-width: 768px) {
.homepage {
padding: 16px 0;
}
}