/*
|--------------------------------------------------------------------------
| Global
|--------------------------------------------------------------------------
*/
body {
background-color: #393939;
min-width: 350px;
}
main {
background:#fff;
}
/*
|--------------------------------------------------------------------------
| Global > Typography
|--------------------------------------------------------------------------
*/
body, input, textarea, button {
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: #131313;
}
h1, h2, h3, h4, h5, h6, .h1-style {
margin: 0 0 10px 0;
color: #131313;
}
h1, .h1-style {
font-size: 48px;
}
h2 {
font-size: 42px;
}
h3 {
font-size: 36px;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 17px;
}
p, ul, ol {
line-height: 20px;
margin: 0 0 15px 0;
}
ul, ol {
margin-left:20px;
}
li {
margin:0 0 2px 0;
}
/*
|--------------------------------------------------------------------------
| Global > Links
|--------------------------------------------------------------------------
*/
a {
color: #e10e1e;
display: inline-block;
-webkit-transition: background .3s ease, border .3s ease, opacity .3s ease, color .3s ease;
transition: background .3s ease, border .3s ease, opacity .3s ease, color .3s ease;
text-decoration: none;
}
a:hover {
color: #131313;
}
.category-add > .button {
margin-top: 10px;
padding: 4px 10px;
width: 100%;
display: block;
font-size: 13px;
}
/*
|--------------------------------------------------------------------------
| Global > Layout
|--------------------------------------------------------------------------
*/
.row {
margin: 0 0 15px 0;
}
/*
|--------------------------------------------------------------------------
| Global > Inputs
|--------------------------------------------------------------------------
*/
.input-grid {
margin: 0 -1px 0 0;
}
.input-grid .input {
padding: 0 1px 0 0;
}
.input-divide {
padding-bottom: 9px;
}
.input {
position: relative;
clear: both;
margin: 0 0 1px 0;
display: flex;
}
.input-label {
position: absolute;
top: 4px;
left: 9px;
font-size: 12px;
color: #131313;
pointer-events: none;
}
.input input[type="text"],
.input input[type="email"],
.input input[type="search"],
.input input[type="tel"],
.input input[type="password"],
.input input[type="number"],
.input textarea,
.input-file-dummy,
.input-text-dummy {
width: 100%;
padding: 22px 8px 6px 8px;
color: #131313;
/* border: 2px solid #e7e7e7; */
resize: none;
background-color: #f1f1f1;
}
.input-text-dummy {
padding: 0;
height: 48px;
background: #fff;
}
#card-element {
padding: 12px 8px;
height: auto;
}
.input-borderless input[type="text"],
.input-borderless input[type="email"],
.input-borderless input[type="search"],
.input-borderless input[type="tel"],
.input-borderless input[type="number"],
.input-borderless input[type="password"],
.input-borderless textarea {
border: 0;
background-color: #fff;
}
.input-white input[type="text"],
.input-white input[type="email"],
.input-white input[type="search"],
.input-white input[type="tel"],
.input-white input[type="number"],
.input-white input[type="password"],
.input-white textarea,
.input-white .select2-container--default .select2-selection--single {
border: 1px solid #FFF!important;
background-color: #fff;
}
.input-white .select2-basic--container.select2-selection--single .select2-selection__rendered {
background-color: transparent;
}
.input-borderless select {
border: 0;
}
.input textarea {
min-height: 120px;
}
.input input[type="text"]:focus,
.input input[type="email"]:focus,
.input input[type="search"]:focus,
.input input[type="tel"]:focus,
.input input[type="number"]:focus,
.input input[type="password"]:focus,
.input textarea:focus,
.input .braintree-hosted-fields-focused,
.input .stripe-hosted-fields-focused,
.input input[type="text"]:focus.validate-border,
.input input[type="email"]:focus.validate-border,
.input input[type="search"]:focus.validate-border,
.input input[type="tel"]:focus.validate-border,
.input input[type="number"]:focus.validate-border,
.input input[type="password"]:focus.validate-border,
.input textarea:focus.validate-border {
/* border-color: #e10e1e!important; */
}
.input input[type="text"]:focus ~ label,
.input input[type="email"]:focus ~ label,
.input input[type="search"]:focus ~ label,
.input input[type="tel"]:focus ~ label,
.input input[type="number"]:focus ~ label,
.input input[type="password"]:focus ~ label,
.input textarea:focus ~ label,
.input .braintree-hosted-fields-focused ~ label {
color: #e10e1d;
}
.input .braintree-hosted-fields-invalid {
border-color: #b62f3f!important;
}
.input .braintree-hosted-fields-invalid ~ label {
color: #b62f3f;
}
.input .button {
/* position: absolute; */
/* top: 4px;
right: 4px;
bottom: 4px; */
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-grid .input .button {
/* right: 19px; */
/* right: 4px; */
right: 0;
}
.input.input-row {
display: flex;
align-items: center;
}
.input.input-row > label {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.01em;
margin-right: 8px;
}
.input-row input,
.input-row .input-inc {
flex: 1;
}
.label-inline .input-label {
position: absolute;
width: 40px;
top: 50%;
left: 0;
transform: translateY(-50%);
text-align: center;
padding: 0 6px 0 14px;
font-size: 13px;
color: #767676;
}
.input.label-inline input[type="text"],
.input.label-inline input[type="email"],
.input.label-inline input[type="search"],
.input.label-inline input[type="tel"],
.input.label-inline input[type="number"],
.input.label-inline input[type="password"],
.input.label-inline textarea {
padding: 5px 5px 4px 40px;
font-weight: 600;
font-size: 13px;
}
.input.input-row input[type="text"],
.input.input-row input[type="email"],
.input.input-row input[type="search"],
.input.input-row input[type="tel"],
.input.input-row input[type="number"],
.input.input-row input[type="password"],
.input.input-row textarea {
padding: 5px;
font-weight: 400;
font-size: 13px;
}
.input-qty {
max-width: 90px;
max-height: 28px;
line-height: 0.9;
}
.input-qty input[type="number"]::-webkit-inner-spin-button,
.input-qty input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: inner-spin-button;
color: #131313;
opacity: 1;
margin-left: 5px;
}
.input-qty input[type="number"] {
text-align: right;
}
.qty-2 {
display: flex;
}
.qty-2__button {
font-size: 18px;
color: #131313;
background-color: #f1f1f1;
height: 40px;width: 35px;
text-align: center;
line-height: 40px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
cursor: pointer;
}
.qty-2__button:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.qty-2__button.disabled {
background-color: #D8D8D8;
}
.qty-2__input {
width: 50px;
background-color: #fff;
height: 40px;
font-size: 18px;
font-weight: 600;
padding: 5px 5px 4px;
}
.qty-2__input input {
width: 100%;
text-align: center;
}
.basket-qty {
padding-top: 20px;
}
.textarea {
position: relative;
width: 100%;
}
.input textarea {
padding-top: 25px;
}
.input-grid .input textarea ~ .input-label {
/* right: 15px; */
right: 0;
}
.input textarea ~ .input-label {
/* position: relative;*/
background-color: #f1f1f1;
left: 0; right: 0; top: 0;
padding: 4px 8px;
/* border: 2px solid #e7e7e7; */
border-bottom: 0;
}
.checkout-segment .input textarea ~ .input-label {
background-color: #fff;
border: 1px solid #f1f1f1;
border-bottom: none;
}
.input textarea:focus ~ .input-label {
/* border-color: #2ab6f7; */
}
.input textarea.validate-border ~ .input-label {
border-color: #b62f3f;
-webkit-animation-name: shake;
animation-name: shake;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.input textarea.validate-border:focus {
border-color: #b62f3f!important;
}
.required-fields {
color: #e10e1e;
}
.select2-basic--container {
border: 1px solid #e7e7e7!important;
}
.select2-container--open .select2-basic--container {
/* border: 1px solid #e10e1e!important; */
}
.select2-basic--borderless,
.select2-basic--borderless.select2-basic--container,
.select2-basic--borderless.select2-basic--dropdown {
border: 0 !important;
}
.select2-basic--container.select2-selection--single .select2-selection__rendered {
padding: 22px 8px 6px 8px;
background-color: #f1f1f1;
}
.select2-basic--container.select2-selection--single {
border: none !important
}
.select2-basic--dropdown {
/* border: 1px solid #e10e1e!important; */
border: 1px solid #f1f1f1!important;
/* border: none; */
border-top: none!important;
}
.select2-dropdown--above {
border-bottom: none!important;
border-top: 1px solid #e10e1e!important;
}
.select2-container--open ~ label {
color: #e10e1e;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
width: 30px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
/* border-color: #131313 transparent transparent transparent; */
border: none;
width: 16px;height: 10px;
background: url(/images/style/ptm/icon-chevron-dark.png) no-repeat center center / contain;
margin-left: 0;
margin-top: 0;
top: auto;left: auto;
bottom: 13px;right: 11px;
transition: transform .3s ease;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border: none;
transform: rotate(180deg);
}
.label-inline .select2-basic--container.select2-selection--single .select2-selection__rendered {
padding: 10px 8px 8px 60px;
}
.label-inline .select2-basic--container {
height:36px;
}
/* File upload input */
.no-js .input-file > input[type="file"] {
display: block;
}
.input-file > input[type="file"] {
display: none;
}
/* No labels */
.input.label-none input[type="text"],
.input.label-none input[type="email"],
.input.label-none input[type="search"],
.input.label-none input[type="tel"],
.input.label-none input[type="number"],
.input.label-none input[type="password"],
.input.label-none textarea,
.label-none .select2-basic--container.select2-selection--single .select2-selection__rendered {
padding: 9px 8px;
}
.input-inc {
display: flex;
text-align: center;
overflow: hidden;
border-radius: 4px;
background-color: #131313;
}
.input .input-inc input[type="number"] {
background-color: #FFF;
border-top: 1px solid #131313;
border-bottom: 1px solid #131313;
text-align: center;
padding: 2px 5px;
max-height: 24px;
max-width: 40px;
}
.input-inc--minus {
background: url('data:image/svg+xml,') no-repeat center / auto;
}
.input-inc--plus {
background: url('data:image/svg+xml,') no-repeat center / auto;
}
.input-inc--minus, .input-inc--plus {
background-color: #131313;
width: 22px;
cursor: pointer;
-webkit-transition: ease-in-out .2s;
transition: ease-in-out .2s;
}
.input-inc--minus:hover, .input-inc--plus:hover {
opacity: 0.7;
}
/*Input Placeholders*/
::-webkit-input-placeholder { /* WebKit browsers */
/* replace this with desired color */
opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
/* replace this with desired color */
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
/* replace this with desired color */
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
/* replace this with desired color */
opacity: 1;
}
.input-rounded-sm input[type="text"]:first-child:last-child,
.input-rounded-sm .select2-container--default .select2-selection--single {
border-radius: 4px;
}
.input-rounded-sm input[type="text"]:first-child:not(:last-child) {
border-radius: 4px 0 0 4px;
}
/*
|--------------------------------------------------------------------------
| Global > Checkboxes
|--------------------------------------------------------------------------
*/
.checkbox {
display: inline-block;
position: relative;
background-color: #fff;
width: 18px;
height: 18px;
border: 1px solid #c0bfbf;
border-radius: 2px;
margin-bottom:-4px;
cursor: pointer;
}
.checkbox:after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
/* background: url(/images/style/ptm/icon-tick-black.png) no-repeat center center #fff; */
background: url(/images/style/ptm/icon-tick-black-new.png) no-repeat center center / 12px #fff;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: transform 150ms ease;
transition: transform 150ms ease;
}
.checked .checkbox:after {
-webkit-transform: scale(1);
transform: scale(1);
transition: transform 300ms ease;
}
.checkbox-label {
color: #131313;
font-size: 13px;
cursor: pointer;
padding: 0 0 0 6px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.checkbox-label .form-note {
display:initial;
}
/*
|--------------------------------------------------------------------------
| Global > Buttons
|--------------------------------------------------------------------------
*/
.button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 15px;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.1em;
color: #fff;
text-transform: uppercase;
background-color: #e30614;
-webkit-transition: .3s all ease-out;
transition: .3s all ease-out;
cursor: pointer;
outline: none;
text-align: center;
border-radius: 3px;
}
.button:hover {
background-color: #b00712;
color: #fff;
}
.button-secondary {
background-color: #3fa663;
}
.button-secondary:hover {
background-color: #268D4A;
}
.button-orange {
background-color: #ff8c00;
color: #ffffff;
}
.button-orange:hover {
background-color: #d47400;
}
.button-grey {
background-color: #6a6a6a;
}
.button-grey:hover {
background-color: #545454;
}
.button-black {
background-color: #131313;
font-size: 15px;
letter-spacing: 0.125em;
color: #fff;
padding: 6px 18px;
}
.button-black:hover {
background-color: #fff;
color: #131313;
opacity: 0.8;
}
.button-white {
background-color: #fff;
color: #131313;
}
.button-white:hover {
background-color: #131313;
color: #fff;
}
.button-special svg {
fill: #fff;
width: 16px;height: 16px;
margin-right: 8px;
}
.button-special:hover svg {
fill: #131313;
}
/* Button size modifiers */
.button-small {
padding: 6px 15px;
font-size: 12px;
}
.button-xsmall,
.button-xsmall-wide {
padding: 4px 10px;
font-size: 12px;
font-weight: normal;
line-height: normal;
}
.button-xsmall-wide {
padding: 8px 20px;
}
.button-medium {
padding: 12px 25px;
font-size: 14px;
}
.button-large {
padding: 16px 40px 13px 40px;
font-size: 18px;
}
.button-block {
display: block;
/* need width: 100% to actually fill all the space */
width: 100%;
font-size: 16px;
letter-spacing: 0.1em;
}
.button-block--slim {
padding: 4px 10px;
font-size: 13px;
}
/* Disabled Button */
.button:disabled {
background: #8C8C8C;
cursor: not-allowed;
}
.button-wishlist {
}
.button-v2 {
font-weight: 500;
letter-spacing: 0.01em;
padding: 4px 12px;
min-height: 36px;
}
/*
|--------------------------------------------------------------------------
| Global > Stock Statuses
|--------------------------------------------------------------------------
*/
.stock-status {
padding: 0 0 0 12px;
background-size: 10px 8px;
background-repeat: no-repeat;
background-position: left center;
}
.in-stock {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath fill-rule='evenodd' fill='%233fa663' d='M5.52 10.38L2.33 7.1.58 8.91l4.2 4.3.77.8L17.42 1.82 15.63 0 5.53 10.38z'/%3E%3C/svg%3E");
color: #3fa663;
}
.out-of-stock {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill-rule='evenodd' fill='%23b32020' d='M15 1.96L13.03 0 7.49 5.57 1.96 0 0 1.96l5.58 5.55L0 13.14 1 14.16l.86.84L7.49 9.4 13.12 15l.85-.84L15 13.14 9.41 7.51l5.6-5.55z'/%3E%3C/svg%3E");
color: #b32020;
background-size: 10px 10px;
padding: 0 0 0 14px;
}
.stock-pending {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath fill-rule='evenodd' fill='%23fcab3e' d='M5.52 10.38L2.33 7.1.58 8.91l4.2 4.3.77.8L17.42 1.82 15.63 0 5.53 10.38z'/%3E%3C/svg%3E");
color: #fcab3e;
}
.listing-stock .stock-status {
background-size: 20px 16px;
padding: 0 0 0 24px;
font-size: 18px;
}
/*
|--------------------------------------------------------------------------
| Global > Jumbotron
|--------------------------------------------------------------------------
*/
.jumbotron {
position: relative;
height: 80px;
text-align: center;
color: #fff;
overflow: hidden;
background-color: #e10e1e;
padding: 14px 0;
display: table;
width: 100%;
}
.jumbotron-small {
height: 184px;
}
.jumbotron--title {
margin: 0;
color: #fff;
font-size: 26px;
}
.jumbotron--content {
width: 100%;
padding: 10px 0 0 0;
margin: 0 auto;
max-width: 700px;
color: #fff;
font-weight: 700;
font-size: 16px;
text-align: center;
}
.jumbotron--content p {
color: #fff;
}
.jumbotron--inner {
padding: 0 30px;
display: table-cell;
vertical-align: middle;
}
/*
|--------------------------------------------------------------------------
| Global > UI Elements
|--------------------------------------------------------------------------
*/
.spinner {
margin: 0 auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
.spinner,
.spinner:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
/*
|--------------------------------------------------------------------------
| Global > Messages
|--------------------------------------------------------------------------
*/
.message {
position: relative;
padding: 15px;
margin: 0 0 10px;
color: #fff;
text-align: center;
font-size: 12px;
background: #e10e1e;
}
.message a {
color:#fff;
text-decoration:underline;
}
.message-error {
background: #e1181e;
}
.message-success {
background: #37af56;
}
.message-warn {
background: #caa53a;
}
.message-close {
position: absolute;
top: 0; right: 0;
height: 30px;
width: 30px;
text-align: center;
line-height: 30px;
color: #fff;
font-size: 10px;
cursor: pointer;
z-index: 1;
}
.message-notice {
font-size: 16px;
}
.message-float {
position: absolute;
top: 0; right: 0; left: 0;
}
.flash-message {
position: fixed;
left: 10px;
top: 10px;
right: 10px;
z-index: 99999;
pointer-events: none;
}
.flash-message .message {
max-width: 400px;
margin: 0 auto;
display: none;
pointer-events: auto;
}
/*
|--------------------------------------------------------------------------
| Global > Tooltip
|--------------------------------------------------------------------------
*/
.core-tooltip {
position: absolute;
padding: 8px;
background-color: #e10e1e;
color: #fff;
font-size: 12px;
text-align: center;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
max-width: 400px;
border-radius: 3px;
}
.core-tooltip:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #e10e1e transparent transparent transparent;
left: 50%;
bottom: -5px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.core-tooltip__black {
background-color: rgba(0,0,0,0.8);
max-width: 220px;
font-size: 11px;
line-height: 11px;
padding: 8px 10px 10px;
}
.core-tooltip__black:after {
border-color: rgba(0,0,0,0.8) transparent transparent transparent;
}
/*
|--------------------------------------------------------------------------
| Global > Navtrail
|--------------------------------------------------------------------------
*/
.breadcrumb-trail {
color: #fff;
line-height: 1.1;
}
.breadcrumb-trail a,
.breadcrumb-trail span {
margin: 0 6px;
}
.breadcrumb-trail > :first-child {
margin-left: 0;
}
.breadcrumb-trail a {
color: #fff;
}
.breadcrumb-trail a:hover {
color: #fff;
}
.breadcrumb-trail span {
color:#e10e1e;
}
.mobile-breadcrumb-trail {
display: none;
}
/*
|--------------------------------------------------------------------------
| Global > Countdown Timer
|--------------------------------------------------------------------------
*/
.countdown-timer--doughnut {
position: relative;
width: 35px;
height: 35px;
float: left;
transition: transform 1s ease;
margin: 0 0 0 10px;
}
.countdown-timer--doughnut-inner {
content: '';
position: absolute;
left: 50%;top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 28px;
height: 28px;
background-color: #131313;
border-radius: 28px;
text-align: center;
font-weight: 700;
color: #fff;
}
.countdown-timer--doughnut strong,
.countdown-timer--doughnut strong span {
font-size: 13px;
top: 0;
font-weight: 600;
}
.countdown-timer--doughnut strong {
position: relative;
top: 2px;
display: block;
color: #fff;
}
.countdown-timer--doughnut span {
display: block;
font-size: 9px;
position: relative;
top: -4px;
}
.countdown-timer--doughnut svg {
width: 35px;
height: 35px;
-webkit-transform: rotate(-89.9deg);
background: #131313;
border-radius: 50%;
}
.countdown-timer--doughnut circle {
position: relative;
fill: #131313;
stroke: #fff;
stroke-width: 6px;
stroke-dasharray: 38 100;
transition: stroke-dasharray 1s ease;
}
.quote-side .ui-datepicker-inline {
background-color: #fff;
}
/*
|--------------------------------------------------------------------------
| Frequently bought together
|--------------------------------------------------------------------------
*/
.frequent-section {
background-color: #262626;
padding: 30px 60px;
}
.frequent-title {
font-size: 18px;
font-weight: 600;
color: #fff;
margin-bottom: 10px;
}
.frequent-table {
border: 1px solid #131313;
}
.frequent-row {
border-bottom: 1px solid #131313;
}
.frequent-row:last-child {
border-bottom: 0;
}
.frequent-image {
width: 66px;
background-color: #fff;
}
.frequent-image img {
display: block;
width: 100%;
}
.frequent-text {
background-color: #1c1c1c;
color: #fff;
padding: 12px 15px;
}
.frequent-row.active .frequent-text {
background-color: #262626;
}
.frequent-table--title {
font-size: 15px;
margin-bottom: 3px;
}
.frequent-price {
font-size: 16px;
}
.frequent-price span {
font-size: 10px;
padding-left: 3px;
}
.frequent-toggle {
width: 29px;height: 29px;
margin-left: 10px;
background: #717171;
position: relative;
cursor: pointer;
transition: background .3s ease;
}
.frequent-toggle:hover,
.frequent-row.active .frequent-toggle {
background-color: #3fa663;
}
.frequent-toggle::before {
content: '';
position: absolute;
top: 1px;right: 1px;bottom: 1px;left: 1px;
border: 2px solid #262626;
}
.frequent-toggle::after {
content: '';
position: absolute;
top: calc(50% + 1px);left: 50%;
transform: translate(-50%, -50%);
width: 16px;height: 14px;
background-size: contain;
background-image: url(/images/style/ptm/icon-tick-white.png);
background-repeat: no-repeat;
}
.frequent-totals {
padding-top: 10px;
}
.frequent-totals--total {
font-weight: 600;
font-size: 18px;
color: #fff;
}
.frequent-totals--total span {
font-size: 24px;
font-weight: 400;
padding-left: 3px;
}
.frequent-totals--vat {
font-size: 10px;
color: #767676;
position: relative;
top: 4px;
padding-left: 3px;
}
.frequent-totals--save {
font-size: 16px;
color: #3fa663;
}
.frequent-totals--save div {
padding: 0 7px 0 12px;
}
/*
|--------------------------------------------------------------------------
| Listing USPs
|--------------------------------------------------------------------------
*/
.listing-usps {
position: relative;
border-top: 1px solid #393939;
}
.listing-usps.show-line::after {
content: '';
position: absolute;
top: 0;bottom: 0;left: 50%;
width: 1px;
background-color: #393939;
}
.listing-usp {
padding: 16px;
color: #fff;
font-size: 10px;
letter-spacing: 0.1em;
}
.listing-usp--text {
padding-left: 5px;
text-transform: uppercase;
}
.listing-usp--icon svg {
fill: #fff;
width: 100%;
}
.listing-usp--icon.delivery-icon {
width: 21px;height: 16px;
}
.listing-usp--icon.cursor-icon {
width: 19px;height: 19px;
}
/*
|--------------------------------------------------------------------------
| Listing Videos
|--------------------------------------------------------------------------
*/
.listing-video {
padding: 40px 80px 80px;
}
.listing-video iframe {
width: 100%;height: 473px;
max-width: 840px;
margin: 0 auto;
display: block;
}
/*
|--------------------------------------------------------------------------
| Listing Appears in categories
|--------------------------------------------------------------------------
*/
.listing-cats-appear > * {
padding: 0 10px 10px 0;
}
.listing-cats-appear {
padding-top: 20px;
margin: 0 -10px -10px 0;
}
.listing-cats-appear a {
padding: 10px;
background-color: #131313;
color: #fff;
font-family: Poppins;
font-size: 12px;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
border-radius: 3px;
}
.listing-categories-list > strong {
color: #040707;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
/*
|--------------------------------------------------------------------------
| Template
|--------------------------------------------------------------------------
*/
.vertical-padding {
padding: 40px 20px;
}
/*
|--------------------------------------------------------------------------
| Template > Cookie Notification
|--------------------------------------------------------------------------
*/
.cookie_note_bkg {
background: url(/images/style/ptm/cookie_olay.png);
position: fixed;
top: 0;
width: 100%;
left: 0;
height: 45px;
color: #FFF;
text-align: center;
line-height: 45px;
z-index: 10000
}
/*
|--------------------------------------------------------------------------
| Template > Header
|--------------------------------------------------------------------------
*/
header {
background-color: #f1f1f1;
position: relative;
z-index: 15;
}
.mobile-menu--btn-cont {
display: none;
position: absolute;
top: 0; bottom: 0; left: 0;
height: 90px;
width: 98px;
}
.mobile-cart--btn-cont {
display: none;
position: absolute;
top: 20px;right: 25px;
width: 50px;height: 50px;
border-radius: 3px;
}
.mobile-cart--btn-cont > svg {
fill: #131313;
width: 30px; height: 28px;
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
}
.mobile-menu--btn {
width: 40px;
margin: 30px auto;
}
.mobile-menu--btn div {
margin: 0 0 7px;
-webkit-transition: transform 300ms ease;
transition: transform 300ms ease;
}
.mobile-menu--btn div span:first-child {
border-radius: 2px 0 0 2px;
}
.mobile-menu--btn div span:last-child {
border-radius: 0 2px 2px 0;
}
.mobile-menu--btn span {
float: left;
width: 50%;
background-color: #131313;
height: 5px;
display: block;
-webkit-transition: -webkit-transform 300ms ease, opacity 300ms ease, color 300ms ease;
transition: transform 300ms ease, opacity 300ms ease, color 300ms ease;
}
.mobile-menu--btn.open span {
background-color: #e10e1e;
}
.mobile-menu--btn.open div:nth-child(1) { -webkit-transform: translateY(7px); transform: translateY(7px); }
.mobile-menu--btn.open div:nth-child(1) span:first-child { -webkit-transform: translateX(5px) rotateZ(45deg); transform: translateX(5px) rotateZ(45deg); }
.mobile-menu--btn.open div:nth-child(1) span:last-child { -webkit-transform: translateX(-5px) rotateZ(-45deg); transform: translateX(-5px) rotateZ(-45deg); }
.mobile-menu--btn.open div:nth-child(2) span:first-child { -webkit-transform: translateX(-15px); transform: translateX(-15px); opacity: 0; }
.mobile-menu--btn.open div:nth-child(2) span:last-child { -webkit-transform: translateX(15px); transform: translateX(15px); opacity: 0; }
.mobile-menu--btn.open div:nth-child(3) { -webkit-transform: translateY(-7px); transform: translateY(-7px); }
.mobile-menu--btn.open div:nth-child(3) span:first-child { -webkit-transform: translateX(5px) rotateZ(-45deg); transform: translateX(5px) rotateZ(-45deg); }
.mobile-menu--btn.open div:nth-child(3) span:last-child { -webkit-transform: translateX(-5px) rotateZ(45deg); transform: translateX(-5px) rotateZ(45deg); }
/*
|--------------------------------------------------------------------------
| Template > Header > Top
|--------------------------------------------------------------------------
*/
.header-top {
display: none;
background-color: #131313;
}
.header-top-bar {
background-color: #131313;
display: flex;
justify-content: flex-end;
}
.header-top-bar.collection-mode-fix {
justify-content: space-between;
}
.header-top-bar .trustpilot-widget {
padding-top: 5px;
display: flex;
justify-content: flex-start;
flex: 1;
}
.header-top-bar .trustpilot-widget iframe {
max-width: max-content;
}
.header-top-nav {
display: flex;
}
.header-top-nav-item {
border-left: 1px solid #5C5C5C;
}
.header-top-nav-link {
padding: 5px 24px;
color: #FFF;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.header-top-nav-link:hover {
color: rgba(255, 255, 255, 0.4);
}
.header-top .segment-50:first-child {
border-right: 1px solid #393939;
}
.header-top--item {
font-size: 13px;
color: #fff;
padding: 6px;
}
.header-top--item:hover {
color: #fff;
}
.header-top--item svg {
fill: #fff;
margin-right: 5px;
}
.search-mobile svg {
width: 18px;height: 18px;
}
.account-mobile svg {
width: 16px;height: 16px;
}
.home-banners--slider {
display: flex!important;
}
.home-banners--slider .slick-list {
width: 100%;
}
.home-banners--slider:not(.slick-initialized) {
flex-wrap: wrap;
}
.home-banners--slider:not(.slick-initialized) .home-banners--slider--item {
width: 33.33333333%;
}
.home-banners--slider--item {
padding: 20px;
border-right: 1px solid #393939;
border-bottom: 1px solid #393939;
}
.home-banners--slider .slick-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
height: 41px;
width: 41px;
border-radius: 20px;
overflow: hidden;
text-indent: -1000px;
background-color: #131313;
-webkit-transition: ease-in-out .2s;
transition: ease-in-out .2s;
opacity: 0.6;
}
.home-banners--slider:hover .slick-arrow {
opacity: 1;
}
.home-banners--slider .slick-prev {
left: 24px;
background-image: url('data:image/svg+xml,');
}
.home-banners--slider .slick-next {
right: 24px;
background-image: url('data:image/svg+xml,');
}
.home-banners--slider .slick-arrow {
background-position: center;
background-repeat: no-repeat;
background-size: 11px 17px;
}
/*
|--------------------------------------------------------------------------
| Template > Header > Collection mode toggle
|--------------------------------------------------------------------------
*/
.header-collection {
padding: 5px 20px;
}
.toggle-switch {
position: relative;
padding: 0;
color: #FFF;
font-size: 14px;
font-weight: 600;
line-height: 1;
}
.toggle-switch > div {
margin-left: 10px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-switch--slider {
display: block;
position: relative;
width: 45px;height: 22px;
cursor: pointer;
top: 0;right: 0;bottom: 0;left: 0;
background-color: #e10e1e;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.toggle-switch--slider:before {
position: absolute;
content: "";
height: 15px;
width: 15px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked + .toggle-switch--slider {
background-color: #1AC70B;
}
input:focus + .toggle-switch--slider {
box-shadow: 0 0 1px #1AC70B;
}
input:checked + .toggle-switch--slider:before {
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
/*
|--------------------------------------------------------------------------
| Template > Header > Main
|--------------------------------------------------------------------------
*/
.logo {
width: 530px;
}
.logo a,
.logo img {
display: block;
width: 100%;
}
.header-main {
padding: 25px 40px;
max-width: 2200px;
margin: 0 auto;
position: relative;
}
.header-search .input.label-none input {
height: 50px;
background-color: #fff;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border: 1px solid #131313;
border-right: none;
font-size: 16px;
padding: 0 20px;
appearance: none;
}
.header-search input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #131313;
}
.header-search input::-moz-placeholder { /* Firefox 19+ */
color: #131313;
}
.header-search input:-ms-input-placeholder { /* IE 10+ */
color: #131313;
}
.header-search input:-moz-placeholder { /* Firefox 18- */
color: #131313;
}
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #131313;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #131313;
}
input:-ms-input-placeholder { /* IE 10+ */
color: #131313;
}
input:-moz-placeholder { /* Firefox 18- */
color: #131313;
}
.header-search .button {
top: 0;right: 0;bottom: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
width: 50px;
-webkit-appearance: none;
appearance: none;
}
.header-search .button svg {
fill: #fff;
position: relative;
}
.header-search {
width: 350px;
}
.header-action {
border: 1px solid #131313;
border-radius: 3px;
}
.header-account {
color: #131313;
padding: 12px 25px;
font-weight: 600;
}
.header-account svg {
width: 22px;height: 22px;
fill: #131313;
}
.header-account svg,
.header-basket svg {
margin-right: 10px;
}
.header-basket {
color: #fff;
padding: 12px 25px;
font-weight: 400;
}
.header-basket:hover {
color: #fff;
}
.header-basket strong {
font-weight: 600;
margin-right: 15px;
}
.header-basket svg {
width: 25px;height: 22px;
fill: #fff;
}
.header-basket-pipe {
font-size: 16px;
}
.header-nav--item {
flex-grow: 1;
display: flex;
justify-content: center;
}
.header-nav--item:first-child .header-nav--link {
/* padding-left: 40px; */
}
.header-nav--link {
padding: 15px 8px 14px;
text-transform: uppercase;
color: #fff;
font-size: 14px;
font-weight: 600;
}
.header-nav--link:hover {
color: rgba(255, 255, 255, 0.7);
}
.header-usps {
background-color: #fff;
border-bottom: 1px solid #ededed;
}
.header-usp--item {
font-size: 13px;
letter-spacing: 0.1em;
color: #131313;
border-right: 1px solid #ededed;
text-transform: uppercase;
text-align: center;
}
.header-usp--item > a,
.header-usp--item .flex {
height: 100%;
}
.header-usp--item .flex {
padding: 12px 12px 6px;
}
.header-usp--item .flex > span {
margin-bottom: 6px;
line-height: 1.4;
}
.header-usp--item a{
display: block;
color: #131313;
}
.header-usp--item:last-child {
border-right: 0;
}
.header-usp--item svg {
fill: #131313;
margin: -2px 10px 6px 0;
}
.header-usp--item .alt-align svg {
margin: -2px 0 0 10px;
order: 2;
}
.header-usp--item .svg_klarna{
margin: -3px 10px 0 0;
}
.header-usp--item .alt-align .svg_klarna {
margin: -3px 0 6px 10px;
display: block!important;
}
.header-nav {
position: relative;
}
.header-nav--dropdown {
/* pointer-events: none; */
visibility: hidden;
position: absolute;
top: 100%;left: 0;
width: 100%;
padding: 35px 0;
background-color: #fff;
box-shadow: 0 20px 20px 0 rgb(0 0 0 / 50%);
z-index: 15;
transition: 0.2s .1s; /* delay of 1 seconds on hover off */
}
.header-nav--parent:hover .header-nav--dropdown {
/* display: block; */
visibility: visible;
pointer-events: all;
transition-delay: 0.14s;
}
.header-nav--parent:hover .header-nav--link {
background-color: #fff;
color: #131313;
}
.header-nav-dropdown--item {
padding: 5px 0;
}
.header-nav-dropdown--item:first-child {
padding-top: 0;
}
.header-nav-dropdown--item:last-child {
padding-bottom: 0;
}
.dropdown-main--link {
font-size: 21px;
font-weight: 600;
color: #131313;
margin-bottom: 5px;
}
.mobile-menu-account {
display: none;
}
/*
|--------------------------------------------------------------------------
| Header > FAQ Drop down
|--------------------------------------------------------------------------
*/
.header-action--faq:hover .header-action--faq-drop {
display: block;
}
.header-action--faq-main {
border-right: 1px solid #131313;
}
.header-action--faq-main svg {
fill: #e10e1e;
}
.header-action--faq-main .header-account {
height: 49px;
}
.header-action--faq-drop {
display: none;
position: absolute;
top: 100%;left: 0;
width: 180px;
background-color: #131313;
padding: 20px;
z-index: 5;
}
.header-action--faq {
position: relative;
}
.header-action--item {
padding-bottom: 25px;
}
.header-action--item:last-child {
padding-bottom: 0;
}
.header-action--link {
font-size: 15px;
color: #fff;
}
.header-action--link:hover {
color: #fff;
}
/*
|--------------------------------------------------------------------------
| Template > Header > Search Dropdown
|--------------------------------------------------------------------------
*/
.changed_search,
.original_search {
padding-left: 50px;
}
.changed_search a,
.original_search a {
text-transform: none;
}
.search_dropdown .shop--navtrail {
display: none;
}
.search_dropdown {
position: absolute;
top: 100%;
left: 0;
/* right: 0; */
width: 750px;
padding: 0;
margin: 10px 0 0 0;
opacity: 0;
z-index: -1;
transition: .3s ease;
background: #fff;
border: 2px solid #e7e7e7;
box-shadow: 0px 13px 22px 0px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.search_dropdown .container {
width: auto;
}
.focus ~ .search_dropdown, .focus .search_dropdown {
opacity: 1;
transition-delay: 0s;
z-index: 999;
}
a.search_item_title, a.search_cat_title, a.search_suggestion_title {
text-transform: none;
width: 78%;
display: inline-block;
overflow: hidden;
}
.search_prod_title {
color: #5a5a5a;
font-weight: 700;
}
a.search_item_title .inner_title {
width: 500px;
}
a.search_cat_title {
max-width: 100%;
}
a.search_cat_title .full_cat {
color: #a0a0a0;
}
.search_section_left, .search_section_right {
text-align: left;
width: 50%;
height: 100%;
}
.search_section_left .search_section, .search_section_right .search_section {
padding: 15px 15px 20px;
}
.search_section_right {
float: right;
}
.search_section_left .search_section {
border-right: 2px solid #e7e7e7;
height: 100%;
}
.search_section_right .search_section:nth-child(2) {
border-top: 2px solid #e7e7e7;
}
.search_dropdown, .search_dropdown a {
color: #131313;
}
a.search_item_title, .search_cat_title, .search_suggestion_title {
white-space: nowrap;
position: relative;
font-weight: 700;
}
a.search_item_title, a.search_suggestion_title {
padding-left: 7px;
}
.search_section_title.search_suggestion_title {
padding: 0;
margin: 0;
margin-top: -3px;
margin-bottom: 8px;
}
a.search_cat_title, a.search_suggestion_title {
width: 95%;
}
a.search_item_title span {
color: #a0a0a0;
}
.search_dropdown .search_price {
float: right;
color: #666666;
position: relative;
font-weight: 700;
}
.search_dropdown .light {
color: #a0a0a0;
}
.search_section_left.no_result .search_section {
border-right: none;
}
.search_item_cont, .search_cat_cont, .search_suggestion_cont, .search_section_title {
margin-top: 5px;
}
.search_section_title {
padding-bottom: 4px;
}
.search_cat_cont {
padding-left: 7px;
}
.mobile-search--input .spinner {
right: 75px;
height: 32px;
width: 32px;
top: 20px;
}
.mobile-search .search_dropdown, .search-inputs .spinner {
display: none;
}
.original_search.no_prod {
margin-bottom: 30px;
}
.changed_search, .original_search {
padding-left: 50px;
}
.original_search {
padding-bottom: 12px;
}
.changed_search {
margin-top: 15px;
}
a.dropdown_show_all {
color: #fff;
display: inline-block;
background: #3479b1;
box-shadow: 0 1px 1px #175e8e,0 2px 1px #175e8e;
height: 24px;
line-height: 24px;
margin-top: 13px;
padding: 0 15px;
}
.search_item_cont, .search_cat_cont {
position: relative;
}
.search_section_left .last::after, .search_section_right .last::after {
content: "";
height: 100%;
width: 100%;
background: -moz-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,0.8) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.8) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
display: block;
position: absolute;
bottom: 0;
}
a.search_item_title::before, .search_cat_title::before, .search_suggestion_title::before {
content: "";
height: 100%;
width: 20px;
background: -moz-linear-gradient(left, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,0.7) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
display: block;
position: absolute;
right: 0;
}
.search-inner-container {
margin: 0 auto;
max-width: 1200px;
padding: 20px;
}
.search-inner-container .message {
margin-bottom: 0;
}
/*
|--------------------------------------------------------------------------
| Template > Cookie Notification
|--------------------------------------------------------------------------
*/
.cookie-pref-overlay {
position: fixed;
background-color: #131313;
width: 420px;
left: 100%;
height: 100%;
transition: ease-in-out .5s;
padding: 30px;
font-size: 15px;
z-index: 9999999999999999;
color: #FFF;
}
.cookie-pref--top {
font-size: 18px;
line-height: 1.2;
color: #FFF;
margin-bottom: 15px;
}
.cookie-pref--top .title {
flex: 1;
}
.cookie-pref--close {
position: relative;
margin-left: 20px;
margin-top: 2px;
width: 30px;
cursor: pointer;
}
.cookie-pref--close::before, .cookie-pref--close::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 3px;
height: 15px;
background-color: #FFF;
border-radius: 3px;
}
.cookie-pref--close::before {
transform: translate(-50%, -50%) rotate(-45deg);
}
.cookie-pref--close::after {
transform: translate(-50%, -50%) rotate(45deg);
}
.cookie-pref--text {
margin-bottom: 8px;
font-size: 14px;
}
.cookie-pref--text * {
line-height: 1.5;
}
.cookie-pref-overlay .cookie-bar--submit, .cookie-pref-overlay .cookie-bar--reject, .cookie-pref-save {
width: 100%;
margin-top: 16px;
}
.cookie-pref-overlay--actions {
flex: 1;
}
.show-pref .cookie-pref-overlay {
margin-left: -420px;
}
.show-pref .cookie-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(0 0 0 / 65%);
}
.cookie-pref-form {
}
.cookie-bar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 9999999999999998;
overflow: hidden;
display: flex;
align-items: center;
padding: 25px 30px;
}
.cookie-bar--inner {
position: absolute;
max-width: 550px;
padding: 20px !important;
background-color: #fff;
width: 90%;
margin: 0 auto;
top: 100px;
left: 50%;
transform: translateX(-50%);
color: #222;
font-size: 14px;
}
.cookie-bar--text {
flex: 1;
margin-right: 30px;
font-size: 14px;
color: #FFF;
}
.cookie-bar--text * {
line-height: 1.5;
}
.cookie-bar--action {
display: flex;
align-items: center;
}
.show-cookie-pref {
color: #FFF!important;
text-decoration: underline;
cursor: pointer;
margin-left: 12px;
}
.show-cookie-pref:hover {
opacity: 0.8;
}
.cookie-bar--submit, .cookie-bar--reject, .cookie-pref-save {
text-align: center;
cursor: pointer;
transition: ease-in-out .2s;
color: #FFF;
padding: 12px 15px 8;
border-radius: 4px;
font-size: 14px;
}
.cookie-bar--action .button:not(:first-child) {
margin-left: 10px;
}
.cookie-bar .toggle-switch {
margin-top: -3px;
}
.cookie-bar--pref-table {
border: 1px solid #e0dede;
margin-top: 16px;
font-size: 14px;
}
.cookie-bar--table {
display: none;
margin-bottom: 15px;
}
.cookie-bar--table > .title {
margin-bottom: 5px;
}
.cookie-settings {
text-decoration: underline;
cursor: pointer;
}
.cookie-pref-form .toggle-switch {
display: flex;
align-items: center;
}
.cookie-bar--action__table {
width: 100%;
}
.cookie-bar--action__table .title {
font-size: 14px;
font-weight: 600;
}
.cookie-bar--pref-table > div {
display: flex;
flex-direction: column;
padding: 12px;
line-height: 1.1;
}
.cookie-pref-active {
font-weight: 600;
color: #1AC70B;
text-align: right;
margin-left: 4px;
}
.cookie-bar--pref-table > div:not(:last-child) {
border-bottom: 1px solid #e0dede;
}
.cookie-pref-more {
cursor: pointer;
font-weight: 500;
}
.cookie-pref-more--icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
margin-right: 8px;
}
.cookie-pref-more--icon::before,
.cookie-pref-more--icon::after {
content: '';
position: absolute;
height: 12px; width: 2px;
background-color: #FFF;
-webkit-transition: ease-in-out .2s;
transition: ease-in-out .2s;
}
.cookie-pref-more.open .cookie-pref-more--icon::before,
.cookie-pref-more--icon::after {
transform: rotate(-90deg);
}
.cookie-pref-more--text {
display: none;
margin-top: 8px;
}
.cookie-bar--text > p {
color: #FFF;
}
.cookie-bar--text > p:last-child {
margin-bottom: 0;
}
.cookie-bar--text a {
text-decoration: underline;
}
.cookie-bar--text a:hover {
color: #FFF;
}
.cookie-bar--text > .title {
font-size: 16px;
font-weight: 600;
color: #FFF;
margin-bottom: 5px;
}
.cookie-pref-reopen {
position: fixed;
display: flex;
align-items: center; justify-content: center;
bottom: 12px;
left: 12px;
height: 56px;
width: 56px;
background-color: #e10e1e;
border-radius: 100px;
cursor: pointer;
box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.05);
z-index: 999999999999999;
-webkit-transition: ease-in-out .2s;
transition: ease-in-out .2s;
padding: 12px;
}
.cookie-pref-reopen:hover {
background-color: #b00712;
}
.cookie-pref-reopen svg {
max-width: 100%; max-height: 100%;
fill: #FFF;
}
/*
|--------------------------------------------------------------------------
| Template > Footer
|--------------------------------------------------------------------------
*/
.newsletter-title {
font-size: 30px;
margin-bottom: 25px;
text-align: center;
}
.footer-news--input.input {
padding-right: 1px;
background-color: #f1f1f1;
margin-bottom: 0;
}
.footer-news--input.input input {
width: 100%;
background-color: #fff;
}
.footer-news--consent {
padding: 10px;
}
.footer-news--consent label,
.footer-news--consent > input {
cursor: pointer;
}
.footer-news--consent label {
color: #131313;
padding-left: 8px;
}
.footer-main {
border-top: 1px solid #393939;
}
.footer-main--section {
border-right: 1px solid #393939;
padding: 60px;
}
.footer-main--section:nth-child(2n) {
border-right: none;
}
.footer-section--title {
font-size: 13px;
color: #777777;
letter-spacing: 0.1em;
margin-bottom: 25px;
}
.footer-nav--item {
padding: 12px 0;
}
.footer-nav--item:first-child {
padding-top: 0;
}
.footer-nav--item:last-child {
padding-bottom: 0;
}
.footer-nav--link {
font-size: 16px;
color: #fff;
}
.footer-nav--link:hover {
opacity: 0.7;
color: #fff;
}
.footer-contact--item {
font-size: 16px;
color: #fff;
padding-bottom: 20px;
}
.footer-contact--item a,
.footer-contact--item strong {
font-weight: 600;
color: #fff;
}
.footer-social svg {
fill: #fff;
transition: opacity .3s ease;
}
.footer-social a:hover svg {
opacity: 0.7;
}
.footer-social a {
margin-right: 18px;
}
.footer-insta {
width: 28px;height: 28px;
}
.footer-facebook {
width: 16px;height: 28px;
}
.footer-bottom {
padding: 30px 40px 80px;
}
.footer-bottom,
.footer-bottom a {
font-size: 11px;
color: #fff;
}
/*
|--------------------------------------------------------------------------
| Template > Mobile Menu
|--------------------------------------------------------------------------
*/
@-webkit-keyframes mobileMenuOpen {
from {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
to {
-webkit-transform: translateX(390px);
transform: translateX(390px);
}
}
@keyframes mobileMenuOpen {
from {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
to {
-webkit-transform: translateX(390px);
transform: translateX(390px);
}
}
@-webkit-keyframes mobileMenuClose {
from {
-webkit-transform: translateX(390px);
transform: translateX(390px);
}
to {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes mobileMenuClose {
from {
-webkit-transform: translateX(390px);
transform: translateX(390px);
}
to {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.page-slide-container {
overflow: hidden;
}
.page-slide {
position: relative;
/* transform: translate(0, 0);
-webkit-transform: translate(0, 0); */
}
.page-title {
font-size: 48px;
margin-bottom: 20px;
}
.basket-title {
margin-bottom: 30px;
}
.mobile-menu {
position: absolute;
top: 0; left: -390px; bottom: 0;
display: none;
width: 390px;
background:#f1f1f1;
/* background-size: 515.5px 511.5px; */
border-right: 1px solid #131313;
z-index: 999;
}
.mobile-search--submit {
}
.mobileMenuItemFade {
-webkit-animation: mobileMenuItemFade 1s ease forwards; /* Safari 4+ */
-moz-animation: mobileMenuItemFade 1s ease forwards; /* Fx 5+ */
-o-animation: mobileMenuItemFade 1s ease forwards; /* Opera 12+ */
animation: mobileMenuItemFade 1s ease forwards; /* IE 10+, Fx 29+ */
}
.mobile-search {
padding: 10px;
}
.mobile-search--input {
overflow: hidden;
}
.mobile-store {
padding: 20px 0 0 20px;
display: none;
}
.mobile-nav .mobile-store--link {
display: block;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
color: #c0bfbf;
padding: 6px 0;
margin: 0 0 8px;
}
.mobile-store--link:last-child {
color: #e10e1e;
}
.mobile-store--link:nth-last-child(2) {
color: #e10e1e;
}
.mobile-store--cont > a {
display: block;
background: url(/images/style/ptm/icon-mobile-dropdown-down.png) no-repeat right 8px;
}
.mobile-store--cont.open > a {
display: block;
background: url(/images/style/ptm/icon-mobile-dropdown.png) no-repeat right 8px;
}
.mobile-store--cont.open .mobile-store {
display: block;
}
.mobile-search--input {
width: 100%;
color: #c0bfbf;
font-size: 21px;
background: none;
line-height: 55px;
padding: 18px 30px 17px;
}
.onpage-search__input {
width: 100%;
font-size: 20px;
background: none;
line-height: 25px;
padding: 10px 20px 10px;
}
.onpage-search__submit {
height: 60px;
width: 60px;
background-color: #e10e1e;
}
.onpage-search__submit svg {
width: 24px;
height: 24px;
fill: #fff;
position: relative;
top: 1px;
}
.mobile-nav {
background-color: #fff;
}
.mobile-nav--item {
border-bottom: 1px solid #f1f1f1;
}
.mobile-nav--link {
padding: 20px 30px;
font-size: 20px;
font-weight: 600;
color: #131313;
text-transform: uppercase;
}
.mobile-nav--link > span {
display: inline-block;
padding-right: 5px;
}
.mobile-nav--link svg {
width: 12px;height: 20px;
}
.mobile-nav--item.bg-red .mobile-nav--link,
.mobile-nav--item.bg-orange .mobile-nav--link {
color: #fff;
}
.mobile-nav--item.bg-red .mobile-nav--link svg,
.mobile-nav--item.bg-orange .mobile-nav--link {
fill: #fff;
}
.mobile-nav--mini {
padding: 30px;
border-bottom: 1px solid #fff;
}
.mobile-nav--mini-item {
padding: 15px 0;
}
.mobile-nav--mini-item:first-child {
padding-top: 0;
}
.mobile-nav--mini-item:last-child {
padding-bottom: 0;
}
.mobile-nav--mini-link {
font-size: 18px;
color: #131313;
}
.mobile-bottom {
padding: 30px;
}
.mobile-tel--block {
font-size: 24px;
padding-bottom: 20px;
}
.mobile-tel--label {
}
.mobile-tel {
font-weight: 600;
color: #131313;
}
.mobile-social--icon {
fill: #e30614;
margin-right: 15px;
}
.mobile-social--icon.icon-instagram {
width: 36px;height: 36px;
}
.mobile-social--icon.icon-facebook {
width: 21px;height: 36px;
}
.mobile-social-title {
font-size:24px;
color:#fff;
text-align:center;
padding-bottom:15px;
}
#page_numbers {
text-align: center;
}
.page_numbers_inner {
padding: 32px;
}
.page_number_sel,
.previous_page,
.page_number,
.next_page {
display: inline-block;
}
#page_numbers a {
padding: 8px 10px;
background-color: #fff;
font-size: 12px;
font-weight: 700;
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
#page_numbers .page_number_sel a {
background-color: #e10e1e;
color: #fff;
}
.lazy-load {
clear: both;
padding: 15px 0;
}
.lazy-load .spinner {
border-top: 1.1em solid rgba(0, 0, 0, 0.2);
border-right: 1.1em solid rgba(0, 0, 0, 0.2);
border-bottom: 1.1em solid rgba(0, 0, 0, 0.2);
border-left: 1.1em solid #000000;
}
.onpage-search {
background-color: #fff;
position: relative;
border: 1px solid #eaeaea;
display: flex;
margin-top: 30px;
}
#mbl-filters-sub {
display:block;
}
/*
|--------------------------------------------------------------------------
| Template > Overlay
|--------------------------------------------------------------------------
*/
#olay {
display: none;
}
#olay_back {
background: #000;
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
z-index: 10000;
filter: alpha(opacity=70);
opacity: .7;
width: 100%;
}
#olay_box_container {
width: 90%;
max-width: 720px;
position: fixed;
top: 10%; left: 50%;
z-index: 10010;
}
#olay_box {
background: #fff;
width: 100%;
padding: 30px;
margin: 0 0 0 -50%;
border-radius:10px;
-webkit-box-shadow: 0px 0px 12px #333;
box-shadow: 0px 0px 12px #333;
}
#olay_close,
#search_results_close {
background:url(/images/style/ptm/olay_close.jpg) no-repeat;
width:26px;
height:25px;
float: right;
cursor: pointer;
}
/*
|--------------------------------------------------------------------------
| Home > Slider
|--------------------------------------------------------------------------
*/
.home-slide {
min-height: 520px;
position: relative;
}
.home-slider .slick-list {
width: 100%;
}
.home-slider .home-slide {
display: flex;
align-items: center;
/* justify-content: center; */
/* text-align: center; */
background-position: left;
}
.no-js .home-slider .home-slide {
display: none;
}
.no-js .home-slider .home-slide:first-child {
display: flex;
}
/* Home Slick Slider arrows */
.arrow-styles .slick-arrow,
.home-slider .slick-arrow {
position: absolute;
bottom: 40px;right: 90px;
width: 41px;height: 41px;
border-radius: 50%;
background-color: #131313;
z-index: 2;
}
.arrow-styles .slick-arrow {
background-color: #fff;
position: relative;
top: auto;right: auto;bottom: auto;left: auto;
margin-top: 30px;
}
.arrow-styles {
/* position: relative;
width: 92px;height: 41px;
margin-top: 30px; */
width: 92px;
display: flex;
justify-content: space-between;
}
.arrow-styles .slick-next {
right: 0;
left: auto;
}
.home-slider .slick-next {
right: 40px;
}
.arrow-styles .slick-arrow svg,
.home-slider .slick-arrow svg {
fill: #fff;
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
width: 11px;height: 17px;
}
.arrow-styles .slick-arrow svg {
fill: #131313;
}
.home-slider .slick-arrow:after {}
.home-slider .slick-next:after {}
.home-slider .slick-disabled {}
/* Home Slick Slider dots */
.home-slider .slick-dots {}
.home-slider .slick-dots li {}
.home-slider .slick-dots .slick-active button {}
.home-slider .slick-dots button {}
.home-slide--inner {
padding: 20px 0 20px 70px;
max-width: 60%;
width: 100%;
}
.home-slide--title {
font-size: 72px;
line-height: 1;
}
.home-slide--subtitle {
font-size: 30px;
margin-bottom: 10px;
line-height: 1.1;
}
.home-slider--button {
margin-top: 18px;
}
.home-slider--button + .home-slider--button {
margin-left: 10px;
}
/*
|--------------------------------------------------------------------------
| Home > Featured Categories
|--------------------------------------------------------------------------
*/
.home-featured .product-inner--title,
.flash-deals .product-inner--title,
.home-feat-brands .product-inner--title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
padding-bottom: 0;
margin-bottom: 8px;
}
.home-feat--item {
width: 21.6667%;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
text-align: center;
padding: 20px;
}
.home-feat--item.home-feat--item-kit img{
display: block;
width: 100%;
max-width: 200px;
margin: 0 auto;
}
.home-feat--item.home-feat--large {
width: 35%;
text-align: left;
}
.home-feat--image {
max-width: 300px;
width: 100%;
}
.home-feat--item.home-feat--large .home-feat--image {
align-self: flex-end;
}
.home-feat--item:nth-child(4n) {
border-right: none;
}
.home-feat--title {
font-size: 18px;
color: #131313;
width: 100%;
}
.home-feat--item.home-feat--large .home-feat--title {
font-size: 30px;
}
.new-home .home-cat--featured {
display: none;
border-top: 2px solid #131313;
}
.new-home > .home-featured {
/* border-top: none; */
}
.new-home .trustpilot-widget {
margin-top: 5px;
}
.home-cat--featured-subtitle {
font-size: 16px;
padding-bottom: 14px;
}
.home-cat--featured-title {
font-size: 48px;
line-height: 1.1;
margin-bottom: 15px;
}
.home-cat--featured-text {
font-size: 18px;
}
.home-cat--featured-main {
width: 400px;
}
.home-cat--featured-main-inner {
height: 100%;
padding: 30px 70px;
text-align: center;
}
.home-cat--button {
background-color: #fff;
border-radius: 41px;
width: 41px;height: 41px;
position: relative;
margin-top: 40px;
}
.home-cat--button svg {
fill: #131313;
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
width: 11px;height: 18px;
}
.header-usps > *, main > *, .footer-main > div {
max-width: 2200px;
margin: 0 auto;
}
/*
|--------------------------------------------------------------------------
| Home > Klarna
|--------------------------------------------------------------------------
*/
.home-klarna {
background-color: #f6a9c0;
border-bottom: 1px solid #fff;
text-transform: uppercase;
font-size: 18px;
}
.home-klarna a{
display: block;
padding: 35px 20px;
color: #131313;
}
.home-klarna svg {
fill: #131313;
width: 107px;
}
.home-klarna strong {
font-family: 'Viga', sans-serif;
padding: 0 15px;
}
/*
|--------------------------------------------------------------------------
| Home > Banners
|--------------------------------------------------------------------------
*/
.home-banners {
border-top: 1px solid #fff;
overflow: hidden;
}
.home-banners > div {
margin-right: -1px;
}
.home-banners img,
.home-banners a {
display: block;
width: 100%;
}
.home-banner--item {
padding: 20px;
border-right: 1px solid #393939;
border-bottom: 1px solid #393939;
}
.home-banner--item.is-mob {
display: none;
}
/*
|--------------------------------------------------------------------------
| Home > Socials
|--------------------------------------------------------------------------
*/
.home-banners + .home-socials {
/* border-top: 1px solid #393939; */
}
.home-social--item {
padding: 30px 20px;
border-right: 1px solid #393939;
font-size: 18px;
line-height: 1.1;
/* text-align: center; */
}
.home-social--item:last-child {
border-right: none;
}
.home-social--item a {
color: #e30614;
}
.home-social--item a:hover {
opacity: 0.7;
color: #e30614;
}
.home-social--item svg {
fill: #fff;
width: 100%;
}
.home-social--instagram {
width: 40px;height: 40px;
margin-right: 18px;
flex-shrink: 0;
}
.home-social--facebook {
width: 24px;height: 40px;
margin-right: 18px;
flex-shrink: 0;
}
/*
|--------------------------------------------------------------------------
| Home > Product Sliders
|--------------------------------------------------------------------------
*/
.home-featured--text + form {
width: calc(100% - 400px);
}
.home-featured--text {
flex-shrink: 0;
width: 400px;
}
.featured-brand-image .button-black {
display: block;
}
.home-featured--text-cont {
padding: 20px 40px;
text-align: center;
}
.home-featured--text + .button {
margin-top: 5px;
}
.home-featured--title {
font-size: 42px;
}
.home-featured--text {
font-size: 18px;
}
.home-featured--slider .flex.slick-slide {
display: flex;
}
.featured-grid .product-grid--item,
.home-featured--slider .product-grid--item {
border-bottom: none;
}
.featured-grid .product-grid--item:nth-child(4n),
.home-featured--slider .product-grid--item:nth-child(4n) {
border-right: none;
}
.home-featured--slider-prod .home-featured--text-cont {
/* padding-bottom: 40px; */
}
.home-featured--slider-prod .arrow-filler {
margin-top: 10px;
}
.home-featured--slider-prod .slick-arrow {
/* position: absolute;
bottom: 30px;left: 54px; */
display: inline-block;
margin-right: 10px;
position: relative;
width: 41px;height: 41px;
border-radius: 50%;
background-color: #131313;
z-index: 2;
}
.home-featured--slider-prod .slick-arrow.slick-next {
/* left: 104px; */
margin-right: 0;
}
.home-featured--slider-prod .slick-arrow svg {
fill: #fff;
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
width: 11px;height: 17px;
}
/*
|--------------------------------------------------------------------------
| Home > USP
|--------------------------------------------------------------------------
*/
.home-usps {
padding: 30px 20px;
}
.home-usp--item {
font-size: 21px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.home-usp--item > a {
color: #FFF;
width: 100%;
height: 100%;
}
.home-usp--item svg {
fill: #131313;
width: 43px;height: 32px;
margin: 0 12px 0 0;
flex-shrink: 0;
}
.home-usp--item svg.svg_klarna {
width: 84px;
margin-top: -2px!important;
}
.home-usp--item .alt-align svg {
order: 2;
margin: 0 0 0 12px;
}
.home-usps-slider--container {
padding: 0!important;
}
.home-usps--slider .slick-track {
display: flex!important;
}
.home-usps--slider .home-usp--item {
padding: 30px 20px;
height: inherit!important;
}
.home-usps--slider .home-usp--item > a, .home-usps--slider .home-usp--item .flex {
height: 100%;
}
/*
|--------------------------------------------------------------------------
| Home > Featured
|--------------------------------------------------------------------------
*/
.featured--title {
margin-bottom: 40px;
font-size: 42px;
text-align: center;
}
.featured-grid {
padding: 0 70px;
}
.featured-grid .product-grid--item {
padding: 0;
}
.featured-grid .slick-arrow {
position: absolute;
top: 50%;left: -54px;
width: 41px;height: 41px;
border-radius: 50%;
background-color: #131313;
transform: translateY(-50%);
z-index: 2;
}
.featured-grid .slick-next {
right: -54px;
left: auto;
}
.featured-grid .slick-arrow svg {
fill: #fff;
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
width: 11px;height: 17px;
}
/*
|--------------------------------------------------------------------------
| Home > Bottom
|--------------------------------------------------------------------------
*/
.home-welcome {}
.home-welcome__title {
font-size: 32px;
}
.home-welcome__action {
margin: 12px 0 0 0;
}
/*
|--------------------------------------------------------------------------
| Home > New home > Flash Deals
|--------------------------------------------------------------------------
*/
.home-flash--deals {
position: relative;
overflow: hidden;
padding: 30px 0;
background: url(/images/style/ptm/flash-deals-bg-v2.png) no-repeat center center / cover #e10e1d;
}
.container.flash-single {
max-width: 1440px;
}
.flash-container {
position: relative;
z-index: 2;
}
.flash-text-col {
width: 360px;
flex: 1;
flex-shrink: 0;
color: #fff;
}
.flash-banner {
display: inline-block;
background-color: #f1bf12;
padding: 10px 20px;
font-size: 20px;
font-family: 'Viga', sans-serif;
color: #fff;
border-radius: 3px;
}
.flash-banner svg {
height: 25px;
fill: #fff;
}
.flash-banner span {
margin-left: 3px;
}
.mobile-ftitle {
display: none;
}
.home-upsells .featured-brand-image {
display: flex;
flex-direction: column;
justify-content: center;
}
.flash-titles-cont + .button,
.flash-title + .flash-subtitle,
.flash-banner + .flash-title,
.flash-titles-cont {
margin-top: 16px;
}
.flash-title {
font-family: 'Viga', sans-serif;
line-height: 1;
font-size: 36px;
text-transform: uppercase;
}
.flash-subtitle {
font-size: 21px;
line-height: 1.2;
}
.flash-deal--item {
background-color: #fff;
}
.flash-deal--full .flash-deal--image {
width: 43.992%;
}
.flash-deal--full .flash-deal--details {
flex: 1 ;
}
.flash-deal--image {
position: relative;
margin: 10px;
}
.flash-deal--image img {
display: block;
width: 100%;
}
.flash-deal--full .flash-deal--details {
border-left: 1px solid #ededed;
padding: 45px;
}
.flash-deal--title {
font-family: 'Viga', sans-serif;
color: #131313;
}
.flash-deal--subtitle {
color: #767676;
}
.flash-deal--full .flash-deal--title {
font-size: 26px;
line-height: 1.2;
}
.flash-deal--full .flash-deal--subtitle {
font-size: 16px;
line-height: 1.3;
}
.flash-deal--full .flash-deal--title + .flash-deal--subtitle {
margin-top: 20px;
}
.flash-deal--full .flash-deal--details {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.flash-deal--full .product-price-web {
font-size: 36px;
}
.flash-deal--full .product-price-web-ex {
font-size: 18px;
}
.flash-deal--full .product-vat {
padding-bottom: 4px;
}
.flash-deal--full .product-price-rrp strong {
font-size: 18px;
}
.flash-deal--full .stock-status {
font-size: 16px;
background-size: 13px 12px;
}
.home-flash--deals .product-overlay-top--button {
display: none !important;
}
.flash-deals .product-grid--item {
padding: 10px;
background-color: #fff;
}
.flash-deals .product-grid--item,
.flash-deals .category-grid--item {
border-right: 1px solid #f1f1f1!important;
}
.flash-deal--full .stock-status {
padding: 0 0 0 16px;
}
.flash-quad .flash-deals {
margin-right: 100px;
}
.flash-deals-slider .slick-slider .slick-arrow {
right: unset;
left: 100%;
margin-left: 40px;
}
.flash-single .flash-deals-slider .slick-slider .slick-arrow {
display: none!important;
}
/*
|--------------------------------------------------------------------------
| Home > New home > Featured Cats
|--------------------------------------------------------------------------
*/
.new-home .home-feat--item {
width: 12.5%;
border-color: #f1f1f1;
}
.new-home .home-feat--item {
font-size: 18px;
}
.new-home .home-feat--item:nth-child(4n) {
border-right: 1px solid #f1f1f1;
}
/*
|--------------------------------------------------------------------------
| Home > New home > USPs
|--------------------------------------------------------------------------
*/
.new-home .home-usps {
background-color: #131313;
color: #fff;
}
.new-home .home-usp--item svg {
fill: #fff;
}
/*
|--------------------------------------------------------------------------
| Home > New home > Special Offer
|--------------------------------------------------------------------------
*/
.flash-banner.special-offer {
background-color: #131313; /*e10e1d*/
}
.flash-banner.special-offer svg {
width: 20px;height: 20px;
margin-right: 5px;
}
.special-offer-title {
font-size: 34px;
color: #fff;
}
.special-offer-title + .flash-subtitle {
color: #fff;
}
.home-featured--2.home-featured--text {
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column!important;
}
.home-featured--2 .special-offer-title {
font-size: 62px;
}
.home-featured--2 .special-offer-title + .flash-subtitle {
font-size: 42px;
text-transform: uppercase;
font-weight: 500;
font-family: 'Viga',sans-serif;
margin-top: 5px
}
.home-featured--2 .home-brand--action:last-child {
margin-top: 20px;
}
.home-featured--2 .home-brand--action .button {
background-color: #131313;
color: #fff!important;
}
.home-featured--2 .home-brand--action .button:hover {
background-color: #050505;
}
.home-brand-auth img {
display: block;
}
.home-brand-auth {
padding: 10px 0 10px;
}
/*
|--------------------------------------------------------------------------
| Home > New home > Brand sliders
|--------------------------------------------------------------------------
*/
.home-brands {
border-top: 1px solid #fff;
padding: 20px 0;
}
.home-brands .segment-20 + form {
width: 80%;
}
.home-brands .product-grid--item.slick-slide {
border: none;
padding: 0 1px 0 0;
}
.home-brands > .flex {
width: 100%;
}
.home-brand-slider > .slick-list {
padding-right: 130px;
position: relative;
}
.home-brand-slider > .slick-list::after {
content: '';
position: absolute;
top: 0;bottom: 0;right: 0;
width: 130px;
background-color: rgba(255, 255, 255, 0.8);
}
.flash-deals-slider .slick-arrow,
.home-brand-slider .slick-arrow {
position: absolute;
width: 41px;
height: 41px;
top: 50%;right: 40px;
transform: translateY(-50%);
border-radius: 50%;
background-color: #131313;
z-index: 2;
}
.flash-deals-slider .slick-arrow.slick-disabled,
.home-brand-slider .slick-arrow.slick-disabled {
background-color: #a6a6a6;
}
.flash-deals-slider .slick-arrow svg,
.home-brand-slider .slick-arrow svg {
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
fill: #fff;
width: 11px;height: 17px;
}
.flash-deals-slider .slick-next,
.home-brand-slider .slick-next {
margin-top: -25px;
}
.flash-deals-slider .slick-prev,
.home-brand-slider .slick-prev {
margin-top: 25px;
}
.home-brand--action .button + .button {
margin-top: 5px;
}
.home-featured--text {
padding: 30px 50px;
}
.featured-brand--new {
margin-top: 10px;
font-size: 25px;
font-weight: 400;
color: #fff;
}
.home-brand-themedark .featured-brand--new {
color: #131313;
}
.home-brand-themewera .button-black{
background:#414141;
}
.home-brand-themewera .button-black:hover{
background:#00b28d;
color:#fff;
}
.home-brand-themewera .button-special:hover svg{
fill:#fff;
}
/*
|--------------------------------------------------------------------------
| Home > New home > Bottom Banners
|--------------------------------------------------------------------------
*/
.home-bottom-banners {
padding: 20px;
}
.home-bottom-banners > .flex {
margin: 0 -20px -20px 0;
}
.home-bottom-banner-item {
flex: 1 0 50%;
padding: 0 20px 20px 0;
}
.home-bottom-banner,
.home-bottom-banner img {
display: block;
width: 100%;
}
/*
|--------------------------------------------------------------------------
| CMS > Template
|--------------------------------------------------------------------------
*/
.page-subtitle {
text-align: center;
font-size: 21px;
color: #e10e1e;
}
/*
|--------------------------------------------------------------------------
| CMS > Template >
|--------------------------------------------------------------------------
*/
.category-title {
font-size: 60px;
padding-bottom: 40px;
}
.category-list--item {
padding: 40px 20px;
min-height: 200px;
}
.category-list--title {
font-size: 21px;
line-height: 1.1;
text-transform: uppercase;
margin: 5px 0 0;
color: #131313;
}
.category-list--subtitle {
font-size: 14px;
color: #767676;
}
.cms-category--lower {
padding-top: 40px;
}
.customer-contact--item {
font-size: 16px;
margin-bottom: 10px;
}
.customer-contact--item a {
font-weight: 600;
color: #131313;
}
/*
|--------------------------------------------------------------------------
| CMS > About Us
|--------------------------------------------------------------------------
*/
.about-heading--main {
padding: 20px;
}
.about-heading--inner {
max-width: 670px;
margin: 0 auto;
padding: 20px;
}
.about-title {
font-size: 72px;
color: inherit;
}
.content-image {
max-width: 500px;
}
.content-image img {
display: block;
width: 100%;
}
.content-title {
font-size: 40px;
color: #131313;
margin-bottom: 14px;
}
.panel--texts {
overflow: hidden;
}
.panel--texts .panel {
background-color: #f1f1f1;
}
.panel--texts .panel:nth-child(even) {
background-color: #fff;
}
.panel--texts .panel:nth-child(even) .content-image {
order: 1;
}
.page-bottom--item {
padding: 60px 40px;
border-right: 1px solid #fff;
}
.page-bottom--item:nth-child(3n) {
border-right: none;
}
.page-bottom--title {
font-size: 20px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 12px;
}
.page-bottom--social svg {
fill: #e30614;
}
.page-bottom--social a:first-child {
margin-right: 18px;
}
/*
|--------------------------------------------------------------------------
| CMS > Blog
|--------------------------------------------------------------------------
*/
.blog {
overflow: hidden;
}
.blog-nav--mobile-btn {
display: none;
}
.blog-top {
padding: 11px;
position: relative;
z-index: 2;
}
.blog-nav {
/* padding: 7px 0 0 0; */
}
.blog-nav li {
display: inline-block;
padding: 0 25px 0 0;
}
.blog-nav li:last-child {
padding: 0;
}
.blog-nav a {
color: #fff;
font-size: 16px;
opacity: 1;
transition:opacity 0.2s ease;
}
.blog-nav a:hover {
opacity:0.5;
}
.blog-nav .sel a {
font-weight: 600;
}
.blog-search {
max-width: 300px;
float: right;
}
.blog-search input {
width: 100%;
line-height: 30px;
padding: 0 8px;
}
.blog-search button {
float: right;
width: 30px;
height: 30px;
vertical-align: middle;
text-align: center;
background-color: #f1f1f1;
}
.blog-search svg {
fill: #131313;
position: relative;
top: 2px;
}
.blog-intro {
padding: 50px 0 30px;
}
.blog-intro > svg {
position: absolute;
top: -120px;
right: -380px;
}
.blog-title {
padding-right: 20px;
}
.blog-content {
padding-bottom: 30px;
}
.blog-posts {
position: relative;
z-index: 2;
}
.news-item--grid {
/* margin: 0 -32px 0 0; */
}
.news-item {
display: flex;
flex-direction: column;
width: 25%;
color: #131313;
}
.news-item--image {
width: 100%;
display: block;
}
.news-item--title,
.news-item--category a {
color: #131313;
}
.news-item--info {
background-color: #fff;
padding: 20px;
flex: 1;
}
.news-item--title-cont {
padding-bottom: 18px;
}
.news-item--title {
font-size: 15px;
}
.news-item--published-on,
.news-item--category {
opacity: .5;
text-transform: uppercase;
font-size: 13px;
}
.news-item--published-on ~ .news-item--category {
position: relative;
padding: 0 0 0 3px;
}
.news-item--published-on ~ .news-item--category:before {
content: '';
position: absolute;
left: 3px;
top: 3px; bottom: 3px;
width: 1px;
background-color: #fff;
opacity: .5;
}
.news-item--action {
padding: 7px 0 0 0;
}
.news-item--image {
background-position: center;
background-size: cover;
height: 182px;
}
.news-item--image img {
visibility: hidden;
width: 100%;
}
.comments-title {
text-align: center;
font-size: 40px;
letter-spacing: -0.025em;
}
.cms-page--upper {
padding: 40px 60px;
border: 1px solid #ededed;
}
.dd-section {
padding: 25px 60px;
border-bottom: 1px solid #ededed;
}
.blog-posts > .message.message-error {
text-align: left;
background: transparent;
color: #222;
padding: 0!important;
font-size: 13px;
}
/*
|--------------------------------------------------------------------------
| CMS > Article
|--------------------------------------------------------------------------
*/
.article > svg {
position: absolute;
top: -120px;
right: -380px;
z-index: 1;
}
.article > .container {
position: relative;
z-index: 2;
}
.article-inner {
background-color: #fff;
}
.article-wrap {
}
.article > .container,
.comments > .container {
max-width: 980px;
}
.article-side {
width: 180px;
float: left;
border-right: 1px solid #ededed;
}
.article-side--upper {
border-bottom: 1px solid #ededed;
padding: 30px;
}
.article-main {
padding: 60px;
}
.article--content iframe {
width: 100%!important;
}
.article-side--cat {
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0 0 4px;
}
.article-side--date {
font-size: 13px;
color: #adadad;
text-transform: uppercase;
}
.article--title {
font-size: 36px;
letter-spacing: -0.025em;
line-height: 1.1;
padding: 0 0 20px;
}
.article-author {
border: 1px solid #e9e9e9;
padding: 19px;
margin: 40px 0 0 0;
}
.article-author--image {
width: 75px;
height: 75px;
border-radius: 75px;
float: left;
}
.article-author--wrap {
overflow: hidden;
padding: 0 0 0 20px;
}
.article-author--name {
font-size: 13px;
color: #b2b2b2;
text-transform: uppercase;
}
.article-author--name span {
color: #156799;
font-weight: 600;
}
.article-author--text {
padding: 6px 0 0 0
}
.article-author--text,
.article-author--text p {
font-size: 13px;
font-weight: 600;
line-height: 1.4;
}
.article-social {
padding: 30px 0 10px;
text-align: center;
}
.addthis_default_style .addthis_separator,
.addthis_default_style .at4-icon,
.addthis_default_style .at300b,
.addthis_default_style .at300bo,
.addthis_default_style .at300bs,
.addthis_default_style .at300m {
float: none!important;
}
.comments {
}
.comment,
.comment-overflow .comment:first-child {
padding: 18px;
border: 1px solid #e9e9e9;
font-size: 14px;
color: #1a1a1a;
line-height: 1.4;
border-top: none;
}
.comment:first-child {
border-top: 1px solid #e9e9e9;
}
.comment-author {
font-size: 14px;
color: #232359;
padding: 10px 0 0;
text-transform: uppercase;
font-weight: 600;
}
.comments-form--title {
font-size: 24px;
color: #fff;
padding: 0 0 5px;
}
.comment-overflow-toggle {
display: block;
width: 100%;
text-align: center;
background-color: #ededed;
padding: 4px;
color: #e10e1d;
cursor: pointer;
font-size: 13px;
letter-spacing: -0.025em;
}
.comment-overflow-toggle:hover {
color: #fff;
}
.comment-overflow-toggle svg {
vertical-align: middle;
margin: 0 0 0 4px;
}
.comment-overflow-toggle .open ~ svg {
transform: rotate(-180deg);
}
.comments-form {
background-color: #131313;
padding: 30px;
margin: 30px 0 0 0;
}
.comment-success {
margin-top: 20px;
}
.comments-form .button {
float: right;
}
.error {
box-shadow: -3px 0px 0px red;
}
.blog-related--title {
font-size: 30px;
text-align: center;
padding: 0 0 30px;
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin: 30px 0 0 0;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.article-brand--image {
border: 1px solid #e9e9e9;
text-align: center;
width: 100%;
margin: 40px 0 0 0;
}
.article-brand .product-price-web {
font-size: 14px;
}
.article-brand .stock-status {
font-size: 11px;
}
.article-brand .options-avail {
border: none;
}
.article-brand .product-grid--item {
width: 100%!important;
padding: 0 0 15px 15px;
}
.article-listings .vertical-padding {
padding: 0;
}
.article-brand--image-svg {
position: relative;
height: 16px;
width: 16px;
vertical-align: middle;
display: inline-block;
background-color: #156799;
border-radius: 8px;
text-align: center;
top: -1px;
}
.article-brand--image > span {
padding: 10px;
display: block;
}
.article-brand--image-svg svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
vertical-align: middle;
}
.article-listings {
padding: 20px 0 0 0;
}
.blog-image img {
display: block;
width: 100%;
}
.blog-image--gallery {
padding: 40px 0;
}
.blog-author {
border: 1px solid #ededed;
padding: 20px;
}
.blog-author--image {
border-radius: 50%;
width: 75px;
margin-right: 20px;
}
.blog-author img {
display: block;
width: 100%;
}
/*
|--------------------------------------------------------------------------
| CMS > Sidebar
|--------------------------------------------------------------------------
*/
.mobile-arrow {
display: none;
}
.cms-sidebar {
width: 350px;
padding-right: 30px;
}
.cms-sidebar--title {
font-size: 24px;
padding: 25px;
border-bottom: 1px solid #393939;
}
.cms-sidebar--list {
padding: 20px 25px;
}
.cms-sidebar--item {
padding: 10px 0;
}
.cms-sidebar--item:first-child {
padding-top: 0;
}
.cms-sidebar--item:last-child {
padding-bottom: 0;
}
.cms-sidebar--link {
font-size: 15px;
line-height: 1.2;
color: #fff;
}
.cms-sidebar--link:hover {
color: #fff;
opacity: 0.7;
}
.cms-sidebar--link.sel {
font-weight: 600;
opacity: 1;
}
/*
|--------------------------------------------------------------------------
| CMS > Contact Us
|--------------------------------------------------------------------------
*/
.contact-page--main {
width: 100%;
float: none;
/*border-right: 1px solid #ededed;*/
padding: 50px 60px;
}
.contact-details {
padding-top: 30px;
}
.contact-details--value {
font-weight: 600;
margin-bottom: 16px;
}
.contact-details--value:last-child {
margin-bottom: 0;
}
.contact-form--wrapper {
padding: 50px 60px;
}
/*
|--------------------------------------------------------------------------
| CMS > FAQ
|--------------------------------------------------------------------------
*/
.dd-section {
/* padding: 40px 0 0 0; */
}
.dd-section--title {
font-size: 18px;
font-weight: 600;
color: #131313;
text-transform: uppercase;
}
li.dd-block {
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
}
li.dd-block:first-child {
border-top: 1px solid #ededed;
}
li.dd-block:last-child {
border-bottom: 0;
}
.dd-title {
position: relative;
color: #e10e1d;
font-size: 15px;
padding: 18px 20px 18px 0;
cursor: pointer;
}
.delivery-section--title:before,
.dd-title:before {
content: '';
position: absolute;
top: 25px; right: 23px;
width: 17px;height: 10px;
background: url(/images/style/ptm/icon-chevron.png) no-repeat center center / contain;
-webkit-transition: .5s all ease-out;
transition: .5s all ease-out;
}
.delivery-section--title:before {
top: 50%;
transform: translateY(-50%);
background-image: url(/images/style/ptm/icon-chevron-dark.png);
}
.dd-open:before {
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
.dd-text {
padding: 0 20px 18px 0;
color: #131313;
font-size: 12px;
}
.dd-text p {
color: #131313;
font-size: 12px;
}
.dd-title span {
display: block;
padding: 0 20px 0 0;
}
/*
|--------------------------------------------------------------------------
| CMS > Deliver & Returns
|--------------------------------------------------------------------------
*/
.delivery-text--section {
border-top: 1px solid #ededed;
}
.delivery-section {
padding: 30px 60px;
border-bottom: 1px solid #ededed;
}
.delivery-section--title {
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
position: relative;
cursor: pointer;
}
.delivery-section--text {
padding: 18px 0 0;
}
.delivery-section--section {
border-bottom: 1px solid #ededed;
padding-bottom: 18px;
}
.delivery-section--section p{
word-break: break-word;
}
.delivery-section--section + .delivery-section--section {
padding-top: 18px;
}
.delivery-section--section:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.button-container {
padding-top: 10px;
}
.delivery-section--section .content,
.delivery-section--section .content p {
font-size: 13px;
}
/*
|--------------------------------------------------------------------------
| CMS > Deliver & Returns
|--------------------------------------------------------------------------
*/
.warranty-image {
width: 120px;
margin-right: 20px;
}
.warranty-image img {
display: block;
width: 100%;
}
/*
|--------------------------------------------------------------------------
| Shop > Category
|--------------------------------------------------------------------------
*/
.category-heading--image {
max-height: 300px;
}
.category-heading--image img {
visibility: hidden;
display: block;
width: 100%;
}
.cat-title {
font-size: 34px;
margin-bottom: 0;
}
.cat-title + .content {
margin-top: 10px;
}
.category-heading--main {
padding: 40px 20px;
}
.category-heading--main.category-heading--main-padding {
padding: 40px 60px;
}
.sidebar {
width: 270px;
flex-shrink: 0;
background-color: #131313;
}
.sidebar__segment {
padding: 12px 15px;
border-bottom: 1px solid #131313;
}
.sidebar__segment:last-child {
border-bottom: 0;
}
.sidebar-content {
overflow: hidden;
width: 100%;
}
.category-grid--item {
border: 1px solid #f1f1f1;
border-left: none;
border-top: none;
padding: 10px;
}
.category-grid--item:nth-child(5n) {
border-right: none;
}
.category-grid--item > a {
display: block;
width: 100%;
}
.category-grid--image {
max-width: 284px;
margin: 0 auto;
}
.category-grid--image img {
display: block;
width: 100%;
}
.category-grid--text {
padding: 10px;
}
.category-grid--title {
font-size: 20px;
color: #131313;
}
.category-main--bar {
padding: 15px 20px;
border-bottom: 1px solid #f1f1f1;
}
.search-within-form-cat {
width:50%;
}
.search-within-divide {
padding-top: 10px;
}
#search-within {
/* border-top: 1px solid #131313; */
border-bottom: 1px solid #131313;
padding-left: 20px;
}
#search-within input[type="text"] {
font-size: 13px;
padding: 6px 18px 6px 0;
width: calc(100% - 50px);
background-color: #1d1d1d;
color: #fff;
font-family: 'Viga', sans-serif;
border-bottom: 1px solid #fff;
}
#search-within input[type="text"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #fff;
}
#search-within input[type="text"]::-moz-placeholder { /* Firefox 19+ */
color: #fff;
}
#search-within input[type="text"]:-ms-input-placeholder { /* IE 10+ */
color: #fff;
}
#search-within input[type="text"]:-moz-placeholder { /* Firefox 18- */
color: #fff;
}
#search-within .button {
background-color: #1d1d1d;
}
#search-within svg {
fill: #fff;
position: relative;
top: 2px;
}
.search-within-clear {
position: relative;
padding: 5px 0 4px 24px;
font-weight: 700;
font-size: 13px;
color: #fff;
}
.search-within-clear::after{
content: '';
position: absolute;
height: 14px;
width: 14px;
top: 7px;
left: 0;
background: url(/images/style/ptm/icon-tick-2x.png) no-repeat center center #e10e1e;
background-size: 10px 8px;
border: none;
}
.search-within-clear:hover {
color: #fff;
}
/*
|--------------------------------------------------------------------------
| Shop > Kit builder
|--------------------------------------------------------------------------
*/
.kitbuilder-sidebar--header {
font-size: 24px;
color: #fff;
padding: 17px;
border-bottom: 1px solid #393939;
flex-wrap: wrap;
}
.kitbuilder-sidebar--header svg {
width: 40px;height: 40px;
fill: #fff;
}
.kitbuilder-sidebar--header svg + span {
padding-left: 12px;
}
.kitbuilder-sidebar--header--brand {
width: 100%;
margin-top: 10px;
font-size: 18px;
text-align: center;
}
.kitbuilder-sidebar--stage {
padding: 17px;
min-height: 78px;
border-bottom: 1px solid #393939;
color: #767676;
transition: color .3s ease;
font-size: 16px;
}
.kitbuilder-sidebar--stage.active {
color: #fff;
}
.kitbuilder-sidebar--action {
padding: 20px;
color: #fff;
}
.kitbuilder-sidebar--price-total {
font-weight: 600;
font-size: 18px;
}
.kitbuilder-sidebar--price-price {
font-size: 24px;
}
.kitbuilder-sidebar--price-ex {
font-size: 14px;
}
.kitbuilder-sidebar--action span {
color: #767676;
font-size: 10px;
padding-left: 5px;
}
.kitbuilder-sidebar--button {
width: 100%;
margin-top: 20px;
}
.button-disabled:hover,
.button-disabled {
background-color: #262626;
color: rgba(255, 255, 255, 0.5);
cursor: not-allowed;
}
.kitbuilder-header {
padding: 40px;
}
.kitbuilder-header--inner {
max-width: 1200px;
margin: 0 auto;
}
.kitbuilder-header--image {
padding-right: 20px;
}
.kitbuilder-header--image img {
display: block;
width: 100%;
}
.kitbuilder-header--image-inner {
max-width: 490px;
}
.kitbuilder-title {
font-size: 72px;
line-height: 1.1;
margin-bottom: 0;
}
.kitbuilder-subtitle p {
font-size: 30px;
line-height: 1.1;
margin: 5px 0 0 0;
}
.button-kitstart {
margin-top: 25px;
}
.button-kitstart svg {
width: 16px;height: 10px;
fill: #fff;
}
.kitbuilder-usp {
text-align: center;
padding: 18px 15px;
border-right: 1px solid #f1f1f1;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.1em;
}
.kitbuilder-usp:last-child {
border-right: none;
}
.kitbuilder-stage {
padding: 25px;
}
.kitbuilder-counter {
width: 33px;
min-width: 33px;
height: 33px;
background-color: #131313;
border-radius: 33px;
text-align: center;
line-height: 33px;
color: #fff;
font-size: 24px;
}
.kitbuilder-counter--item > span {
font-size: 24px;
letter-spacing: 0.05em;
padding-left: 15px;
}
.kitbuilder-usp {
border-right: 1px solid #f1f1f1;
}
.kitbuilder-usp:last-child {
border-right: none;
}
.kitbuilder-options--option {
height: 340px;
border-right: 1px solid #fff;
}
.kitbuilder-options--option a {
width: 100%;
height: 100%;
padding-bottom: 10px;
}
.kitbuilder-options--option:nth-child(4n) {
border-right: none;
}
.kitbuilder-options--option-subtitle {
font-size: 16px;
color: #fff;
text-align: center;
margin: 20px;
}
.kitbuilder-options--action {
width: 230px;
margin: 0 auto;
padding: 8px 10px;
background-color: #fff;
border-radius: 3px;
color: #131313;
text-transform: uppercase;
text-align: center;
}
.kitbuilder-options--option a:hover .kitbuilder-options--action {
color: #fff;
background-color: #131313;
}
.kitbuilder-brand-header .kitbuilder-header--inner {
max-width: 100%;
padding: 50px;
}
.kitbuilder-header--logo-inner {
width: 260px;
margin: 0 auto;
}
.kitbuilder-header--logo img {
display: block;
width: 100%;
}
.kitbuilder-header--logo {
width: 400px;
}
.kitbuilder-back {
background-color: #fff;
padding: 8px 20px 6px;
border-radius: 3px;
color: #131313;
font-size: 16px;
white-space: nowrap;
margin-right: 20px;
}
.kitbuilder-back:hover {
background: #c1c1c1;
}
.kitbuilder-back svg {
width: 9px;
height: 15px;
}
.kitbuilder-back span {
position: relative;
top: -1px;
padding-left: 5px;
}
.kitbuilder-product-type-title {
font-size: 20px;
color: #1a1a1a;
}
.kitbuilder-product-type {
border-right: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1;
}
.kitbuilder-product-type a {
display: block;
position: relative;
height: 100%;
width: 100%;
padding: 10px 20px 65px;
}
.kitbuilder-product-type a:hover .kitbuilder-select {
background: #c1c1c1;
}
.kitbuilder-product-type-image {
max-width: 284px;
margin: 0 auto;
}
.kitbuilder-product-type-image img {
display: block;
width: 100%;
}
.kitbuilder-select {
display: block;
font-size: 16px;
color: #131313;
padding: 6px;
background-color: #f1f1f1;
text-align: center;
cursor: pointer;
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.kitbuilder-header-prod-empty,
.kitbuilder-header--prod-inner {
height: 0;
padding-bottom: 100%;
background-color: #fff;
}
.kitbuilder-header-prod-empty {
opacity: 0.25;
}
.kitbuilder-header--prod-inner {
position: relative;
}
.kitbuilder-header--prod-qty {
position: absolute;
top: 10px;left: 10px;
background-color: #e30614;
width: 31px;height: 31px;
border-radius: 31px;
text-align: center;
font-size: 20px;
font-weight: 600;
color: #fff;
}
.kitbuilder-header--prod-close {
position: absolute;
top: 10px;right: 10px;
width: 10px;height: 10px;
cursor: pointer;
background: url(/images/style/ptm/close-icon.png) no-repeat center center / contain;
}
.kitbuilder-sidebar--save-percentage {
margin-top: 10px;
font-size: 14px;
color: #3fa663;
}
.kitbuilder-sidebar--save-price {
font-size: 14px;
color: #767676;
}
.kitbuilder-sidebar--prod {
background-color: #1d1d1d;
border-top: 1px solid #131313;
position: relative;
padding-right: 30px;
}
.kitbuilder-sidebar--prod-close {
position: absolute;
top: 50%;right: 10px;
transform: translateY(-50%);
width: 12px;height: 12px;
background: url(/images/style/ptm/close-icon-white.png) no-repeat center center / contain;
}
.kitbuilder-sidebar--prod .recent-image {
position: relative;
}
.kitbuilder-sidebar--prod-qty {
position: absolute;
top: 2px;left: 2px;
width: 20px;height: 20px;
background-color: #e30614;
border-radius: 20px;
text-align: center;
line-height: 21px;
font-size: 13px;
font-weight: 600;
color: #fff;
}
.kitbuilder-prod--action .button {
display: block;
width: 100%;
max-width: 145px;
}
.kitbuilder-increment {
display: flex;
background-color: #f1f1f1;
border: 1px solid #f1f1f1;
max-width: 130px;
height: 39px;
}
.kitbuilder-increment--action {
width: 36px;
height: 37px;
position: relative;
flex-shrink: 0;
cursor: pointer;
transition: background .3s ease;
}
.kitbuilder-increment--action:hover {
background-color: #D8D8D8;
}
.kitbuilder-increment--action[data-action="decrease"]::after,
.kitbuilder-increment--action[data-action="increase"]::before,
.kitbuilder-increment--action[data-action="increase"]::after {
content: '';
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
width: 2px;height: 10px;
background-color: #393939;
}
.kitbuilder-increment--action[data-action="increase"]::after,
.kitbuilder-increment--action[data-action="decrease"]::after {
width: 10px;height: 2px;
}
.kitbuilder-increment .input {
margin-bottom: 0;
width: 100%;
text-align: center;
}
.kitbuilder-increment .input input {
padding: 2px;
text-align: center;
}
.kitbuilder-header .cat-title {
margin: 30px 0;
text-align: center;
}
.kitbuilder-stage {
padding: 7px 25px 25px;
}
.kitbuilder-back {
margin: 18px 20px 0 0;
}
.kitbuilder-counter--item {
margin: 18px 0 0;
}
.kitbuilder-counter--item > span {
padding-left: 0;
white-space: nowrap;
}
.kitbuilder-stage.sticky {
background: #f1f1f1;
z-index: 8;
}
.kitbuilder-stage.sticky.js-is-sticky--change {
padding: 0 25px 10px;
}
.kitbuilder-stage.sticky.js-is-sticky--change .kitbuilder-back {
margin: 10px 20px 0 0;
}
.kitbuilder-stage.sticky.js-is-sticky--change .kitbuilder-counter--item {
margin: 10px 0 0;
}
.kitbuilder-sidebar {
display: flex;
flex-direction: column;
}
.kitbuilder-sidebar--header.sticky {
z-index: 8;
background: #131313;
max-width: 270px;
}
.kitbuilder-sidebar--header.sticky.js-is-sticky--change {
padding: 10px 17px;
}
.kitbuilder-sidebar--header.sticky.js-is-sticky--change svg {
width: 34px;
height: 34px;
}
.kitbuilder-sidebar--items--outer {
display: flex;
flex-direction: column;
flex: 1;
}
.kitbuilder-sidebar--items--container {
flex: 1;
}
.kitbuilder-sidebar--prod .options-loading .spinner {
height: 64px;
width: 64px;
border-width: 0.8em;
}
.kitbuilder-sidebar--modify {
display: none;
font-size: 16px;
font-weight: 600;
color: #ffffff;
text-align: center;
padding: 10px;
border-bottom: 1px solid #393939;
cursor: pointer;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.kitbuilder-sidebar--modify span {
display: inline-block;
width: 16px;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.4 9.64' width='16px' height='10px'%3E%3Cpath d='M1.44,0,0,1.44l8.2,8.2,8.2-8.2L15,0,8.2,6.77Z' fill='%23ffffff'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
margin-left: 6px;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.kitbuilder-sidebar--modify.open span {
transform: rotate(180deg);
}
.kitbuilder-sidebar--modify:hover {
color: #cccccc;
}
.kitbuilder-sidebar--modify:hover span {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.4 9.64' width='16px' height='10px'%3E%3Cpath d='M1.44,0,0,1.44l8.2,8.2,8.2-8.2L15,0,8.2,6.77Z' fill='%23cccccc'%3E%3C/path%3E%3C/svg%3E");
}
.recent-image + .flex-item {
padding-left: 10px;
padding-right: 18px;
}
.kitbuilder-sidebar--action {
padding: 20px;
color: #fff;
position: sticky;
bottom: 60px;
left: 0;
background: #131313;
}
.kitbuilder-main .product-grid--item {
position: relative;
}
.kitbuilder-main .search-within-cat-form {
display: none;
}
.kitbuilder-main .product-grid--item .options-loading {
z-index: 7;
}
.kitbuilder-main .product-grid--item.selected,
.kitbuilder-main .product-grid--item.selected .product-grid--item-inner {
background-color: #f4fbf0;
}
/*
.kitbuilder-main .kitbuilder-options,
*/
.kitbuilder-main .category-main--list {
margin-bottom: 60px;
}
.kitbuilder-main .product-overlay {
z-index: 6;
}
.kitbuilder-product-type a {
position: relative;
padding: 10px 20px;
}
.kitbuilder-product-type a::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
z-index: 1;
opacity: 0;
-webkit-transition: opacity 300ms ease;
transition: opacity 300ms ease;
}
.kitbuilder-product-type a:hover::before {
opacity: 0.05;
}
.kitbuilder-product-type-title {
margin-top: 8px;
text-align: center;
-webkit-transition: color 300ms ease;
transition: color 300ms ease;
}
.kitbuilder-prod--action .button {
background-color: #ff8c00;
}
.kitbuilder-prod--action .button:hover {
background-color: #d47400;
}
.kitbuilder-prod--action .button.button:disabled {
background: #8C8C8C;
cursor: not-allowed;
}
.kitbuilder-increment--action.disabled[data-action="decrease"]::after {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M9 19c0 .552-.448 1-1 1s-1-.448-1-1v-10c0-.552.448-1 1-1s1 .448 1 1v10zm4 0c0 .552-.448 1-1 1s-1-.448-1-1v-10c0-.552.448-1 1-1s1 .448 1 1v10zm4 0c0 .552-.448 1-1 1s-1-.448-1-1v-10c0-.552.448-1 1-1s1 .448 1 1v10zm5-17v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.315c0 .901.73 2 1.631 2h5.712zm-3 4v16h-14v-16h-2v18h18v-18h-2z'/%3E%3C/svg%3E");
background-size: cover;
background-repeat: no-repeat;
height: 16px;
width: 16px;
}
/*
|--------------------------------------------------------------------------
| Shop > Filters
|--------------------------------------------------------------------------
*/
.filter-subcategories .filter-title, #sidebar--mbl-filters {
display: none;
}
.grid-filters-subcategories {
display: block;
}
.filter-subcategories {
display: none;
}
.filters .sidebar__segment {
padding: 0;
}
.filters {
background-color: #1d1d1d;
}
.filters__title {
font-size: 20px;
padding: 20px;
color: #fff;
border-bottom: 1px solid #131313;
}
.filters__title svg {
display: none;
flex-shrink: 0;
fill: #fff;
width: 11px;
height: 7px;
}
.filter-title {
padding: 15px 20px;
cursor: pointer;
font-size: 14px;
color: #fff;
}
.filter-title {
text-transform: uppercase;
}
#mbl-filters span, .filter-title span {
display: block;
position: relative;
flex: 1;
}
.filter-title svg {
width: 11px;
height: 7px;
flex-shrink: 0;
fill: #fff;
}
.filter-open .filter-title svg {
transform: rotate(-180deg)
}
.filter ul {
padding: 0 20px 15px;
}
.filter--links a {
position: relative;
padding: 5px 0 4px 20px;
font-weight: 700;
font-size: 13px;
color: #fff;
}
.filter--links a:hover {
color: #fff;
}
.filter--links a:before {
content: '';
position: absolute;
height: 14px;
width: 14px;
top: 7px;
left: 0;
background-color: #fff;
/* border: 2px solid #dde2e5; */
}
.filter--links .filter-selected a {
color: #fff;
}
.filter--links .filter-selected a:before {
background: url(/images/style/ptm/icon-tick-2x.png) no-repeat center center #e10e1e;
background-size: 10px 8px;
border: none;
}
#slider-range.ui-widget-content {
background-color: #ffffff;
height: 8px;
border: 1px solid #e7e7e7;
margin: 0 8px;
}
#slider-range .ui-widget-header {
background-color: #e7e7e7;
/*transition: left 300ms ease, width 300ms ease;*/
}
#slider-range .ui-slider-handle {
height: 14px;
width: 14px;
border-radius: 14px;
background-color: #e10e1e;
border: none;
color: #666666;
font-weight: 700;
cursor: pointer;
/*transition: left 300ms ease;*/
}
#slider-range .ui-slider-handle:last-of-type .tooltip {
right:0!important;
}
#price_filter {
padding: 14px 0 0 0;
color: #fff;
}
#price_filter .tooltip {
float: left;
font-weight: 700;
margin-bottom: 5px;
}
#price_filter #range-tooltip-2 {
float: right;
}
#price_submit {
clear: both;
}
.filter-swatch {
padding: 0 2px 2px 0;
}
.filter-swatch--inner {
position: relative;
padding: 1px;
height: 30px;width: 30px;
border-radius: 3px;
transition: background 300ms ease;
/* background: url(/images/style/ptm/icon-swatch-tick.png) no-repeat center right 8px; */
}
.filter-swatch.sel .filter-swatch--inner {
/* background-color: #1e1e1e; */
/* border: none; */
border: 1px solid #dde2e5;
}
.filter-swatch.sel .filter-swatch--inner::after{
content: '';
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
width: 12px;height: 9px;
background: url(/images/style/ptm/icon-swatch-tick.png) no-repeat center center / contain;
}
.filter-swatch.sel .filter-swatch--swatch {
top: 2px; left: 2px; bottom: 2px;
}
.filter-swatch--swatch {
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
width: 24px;
background-color: #e7e7e7;
border-radius: 3px;
border: 2px solid rgba(0,0,0,.2);
}
.sidebar-nav--item {
padding: 13px 20px;
color: #fff;
font-size: 12px;
line-height: 1;
text-transform: uppercase;
background-color: #262626;
}
.sidebar-nav--item:hover {
color: #fff;
}
.sidebar-nav--item > span {
padding-top: 1px;
}
.sidebar-nav--item svg {
fill: #fff;
margin-right: 10px;
}
.sidebar-nav--home svg {
width: 12px;height: 12px;
}
.sidebar-nav--category svg {
width: 8px;height: 12px;
}
.sidebar-nav--home {
background-color: #393939;
}
.sidebar-category--title,
.single-filters--title {
font-size: 20px;
color: #fff;
padding-bottom: 7px;
}
.sidebar-category--title > svg,
.single-filters--title > svg {
display: none;
width: 19px;
fill: #fff;
}
.sidebar-category--list,
.sidebar-brand--list {
padding: 27px 20px;
}
.sidebar-category--list li,
.single-filters li {
padding: 7px 0;
}
.sidebar-category--list a,
.single-filters a {
font-size: 14px;
text-transform: uppercase;
color: #fff;
}
.sidebar-category--show:hover,
.sidebar-category--list a:hover,
.single-filters a:hover,
.single-filters a.sel {
color: #e30614;
}
.sidebar-category--overflow {
display: none;
}
.sidebar-category--show {
display: inline-block;
font-size: 12px;
text-transform: uppercase;
color: #767676;
cursor: pointer;
transition: color .3s ease;
}
.sidebar-title--recently {
font-size: 20px;
color: #fff;
padding: 15px 20px 15px;
border-bottom: 1px solid #131313;
}
.sidebar-brand--list:not(:first-child) {
padding-top: 0;
}
.recently-viewed {
background-color: #1d1d1d;
margin-top: 20px;
}
.recent-item {
padding: 10px;
}
.recent-image {
width: 58px;height: 58px;
}
.recent-image a,
.recent-image img {
display: block;
width: 100%;
}
.recent-image + .flex-item {
padding-left: 13px;
}
.recent-text > a,
.recent-text {
font-size: 11px;
line-height: 1;
color: #fff;
}
.recent-text > a:hover {
color: #fff;
}
.recent-price {
font-size: 11px;
color: #fff;
}
.recent-price span {
color: #9b9b9b;
}
.recent-item {
display: block;
/* border-top: 1px solid #393939; */
border-bottom: 1px solid #131313
}
.recent-item:last-child{
/* border-bottom: 1px solid #393939; */
}
/*
|--------------------------------------------------------------------------
| Shop > Navtrail
|--------------------------------------------------------------------------
*/
.shop--navtrail {
}
.shop--navtrail .breadcrumb-trail {
max-width: 60%;
float: left;
}
.sort-by-container {
}
.sort-by {
position: relative;
background: #fff;
border: 1px solid #f1f1f1;
border-radius: 15px;
}
.sort-by label {
position: absolute;
top: 5px; left: 13px;
font-size: 13px;
color: #767676;
text-transform: none;
}
.sort-by .select2-container--default .select2-selection--single .select2-selection__rendered,
.sort-by .select2-container .select2-selection--single {
height: 30px;
}
.sort-by .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 30px;
right: 6px;
background: url(/images/style/ptm/icon-chevron-dark.png) no-repeat center center / 14px 8px;
}
.sort-by .select2-selection__arrow b {
display: none;
}
.sort-by .select2-container--default .select2-selection--single .select2-selection__rendered {
font-size: 13px;
padding-top: 5px;
padding-left: 65px;
padding-right: 35px;
color: #131313;
}
.sort-by .select2-container--default .select2-selection--single {
background-color: transparent;
}
.ppp-text {
font-size: 13px;
color: #131313;
}
.ppp-text span {
font-weight: 600;
color: #e10e1d;
}
/*
|--------------------------------------------------------------------------
| Shop > Category Page > Category Display
|--------------------------------------------------------------------------
*/
.product-grid {
}
.product-grid--item {
border: 1px solid #f1f1f1;
border-left: none;
border-top: none;
padding: 10px;
}
.product-grid--item:nth-child(5n) {
border-right: none;
}
.product-inner {
height: 100%;
}
.product-inner, .product-inner--info {
display: flex;
flex-direction: column;
}
.product-inner--image {
position: relative;
padding-bottom: 15px;
}
.product-image__link,
.product-inner--image img {
display: block;
width: 100%;
}
.product-inner--image img {
display: block;
max-width: 304px;
margin: 0 auto;
}
.product-image__link {
display: block;
}
.product-grid--item-inner {
position: relative;
background-color: #fff;
overflow: hidden;
}
.product-inner--titles {
padding-bottom: 20px;
flex: 1;
}
.product-inner--title {
font-size: 16px;
color: #131313;
}
.product-inner--title,
.product-inner--subtitle,
.product-inner--row {
padding: 0 0 8px 0;
}
.product-inner--subtitle {
font-size: 13px;
}
.product--option-names {
display: block;
color: #444;
}
.product--option-name {
margin: 0 8px 0 0;
}
.product-inner--swatches {
float: right;
width: 50%;
}
.product-inner--swatch {
float: right;
height: 18px;
width: 18px;
margin: 1px 1px 0 0;
border-radius: 2px;
border: 2px solid #e7e7e7;
}
.product-price {
min-height:26px;
font-weight: 700;
}
.product-price-web {
font-size: 24px;
color: #131313;
}
.product-price-web-ex {
font-size: 14px;
}
.product-vat {
font-size: 10px;
color: #767676;
padding: 0 0 3px 5px;
position: relative;
top: -2px;
min-width: max-content;
}
.product-price-web-ex .product-vat {
padding-bottom: 2px;
top: 0;
}
.product-inner--info {
padding: 0 10px 10px;
flex: 1;
}
.on-offer-badge {
position: absolute;
top: 10px; left: 50%;
transform: translateX(-50%);
width: 64px;
height: 64px;
border-radius: 32px;
background-color: #3fa663;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
font-weight: 600;
text-align: center;
pointer-events: none;
}
.product-inner--image-brand {
position: absolute;
bottom: 10px; right: 10px;
/* width: 64px;
height: 64px; */
}
.comparison-bar {
display: none;
position: fixed;
right: 0; bottom: 0; left: 0;
background-color: #e30614;
padding: 10px 30px;
z-index: 60;
color: #fff;
}
.comparison-bar--inner {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.comparison-bar--title {
display: block;
margin: 0 20px 0 0;
width: 180px;
font-weight: 600;
font-size: 16px;
line-height: 14px;
}
.animate .comparison-bar--product:last-child {
-webkit-animation: comparisionProductEntrance .5s;
animation: comparisionProductEntrance .5s;
}
@-webkit-keyframes comparisionProductEntrance {
0% { opacity: 0;transform: translateX(10px); }
100% { opacity: 1;transform: translateX(0px); }
}
@-moz-keyframes comparisionProductEntrance {
0% { opacity: 0;transform: translateX(10px); }
100% { opacity: 1;transform: translateX(0px); }
}
@-o-keyframes comparisionProductEntrance {
0% { opacity: 0;transform: translateX(10px); }
100% { opacity: 1;transform: translateX(0px); }
}
@keyframes comparisionProductEntrance {
0% { opacity: 0;transform: translateX(10px); }
100% { opacity: 1;transform: translateX(0px); }
}
.comparison-bar--products {
overflow: hidden;
}
.comparison-bar--product {
padding: 0 4px 0 0;
}
.comparison-bar--product-inner {
position: relative;
background-color: rgba(0,0,0,0.3);
/* height: 50px; */
display: flex;
align-items: center;
}
.comparison-bar--product-image {
/* float: left; */
width: 50px;
display: block;
}
.comparison-bar--products {
flex: 1;
}
.comparison-bar--products > .grid {
width: 100%;
}
.comparison-bar--product-title-cont {
flex: 1;
display: block;
padding: 4px 4px 4px 10px;
margin-right: 30px;
font-weight: 400;
float: none;
overflow: hidden;
}
.comparison-bar--product-title {
font-size: 12px;
line-height: 1;
display: inline-block;
color: #fff;
}
.comparison-bar--product-option-name {
display: none;
opacity: 1;
font-size: 11px;
padding: 2px 6px;
margin: 0 4px 0 0;
background: rgba(0,0,0,0.2);
border-radius: 2px;
white-space: nowrap;
float: left;
}
.comparison-bar--product-option-name:empty {
display: none;
}
.comparison-bar--product-overlay {
/* display: none; */
cursor: pointer;
position: absolute;
top: 10px; right: 10px;
width: 10px;height: 10px;
/* background-color: rgba(30, 30, 30, 0.9); */
z-index: 10;
}
.comparison-bar--product-overlay::after {
content: '';
position: absolute;
top: 0;right: 0;bottom: 0;left: 0;
background: url(/images/style/ptm/close-icon-white.png) no-repeat center center / contain;
}
.comparison-bar--product-inner:hover .comparison-bar--product-overlay {
/* display: block; */
}
.comparison-bar--product-overlay-inner {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.comparison-bar--product-overlay-inner .dblc {
vertical-align: middle;
font-weight: 700;
font-size: 12px;
}
.comparison-bar--product-overlay-inner span {
padding: 2px 0 0 20px;
}
.comparison-bar--loading {
display: none;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: rgba(30, 30, 30, 0.9);
color: #fff;
text-align: center;
}
.comparison-bar.loading .comparison-bar--loading {
display: block;
}
.compare-title--block {
/* padding: 45px 40px; */
border-right: 1px solid #f1f1f1;
}
.compare-table--title {
font-size: 40px;
}
.compare-table--text {
font-size: 16px;
margin-bottom: 17px;
}
.compare-buttons {
border-top: 1px solid #e9e9e9;
}
.compare-remove-button {
width: 100%;
background-color: #fff;
color: #e10e1d;
transition: background .3s ease, color .3s ease;
text-transform: uppercase;
padding: 8px 10px;
font-size: 12px;
}
.compare-remove-button:hover {
background-color: #e10e1d;
color: #fff;
}
.compare-listing--item {
border-right: 1px solid #e9e9e9;
}
.compare-listing--item:last-child {
border-right: none;
}
.compare-listing--empty {
position: relative;
/* min-height: 250px; */
}
.compare-listing--empty > .add {
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
font-size: 270px;
font-weight: 700;
color: #131313;
}
.product-stock {
text-align: right;
}
.product-price-rrp {
font-size: 13px;
color: #e30614;
}
.product-stock {
font-size: 13px;
}
.line-through {
text-decoration: line-through;
}
/*
|--------------------------------------------------------------------------
| Shop > Category Page > Category Display Hover
|--------------------------------------------------------------------------
*/
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.product-grid--item-inner:hover .product-overlay {
animation: 300ms fadeIn forwards;
}
.product-overlay {
position: absolute;
top: 0; right: 0; left: 0;
height: 44px;
overflow: hidden;
z-index: 12;
opacity: 0;
transition: transform 300ms ease;
}
.product-overlay-top {
position: absolute;
color: #c0bfbf;
height: 34px;
padding: 10px;
top: 0; right: 0; left: 0;
z-index: 8;
}
.product-overlay-top--button {
float: left;
background-color: #e10e1e;
border-radius: 5px;
padding: 4px 5px 3px;
font-size: 11px;
color: #fff;
cursor: pointer;
transition: background .3s ease;
}
.product-overlay-top--button:last-child {
float: right;
}
.product-overlay-top--button:hover {
background-color: #C80005;
}
.product-overlay-content {
position: absolute;
top: 34px; right: 0; bottom: 80px; left: 0;
}
.product-overlay-content-inner {
padding: 20px;
text-align: center;
}
.product-overlay--title {
padding: 6px 0 0 0;
}
.product-overlay--title a {
color: #fff;
text-align: center;
font-size: 15px;
}
.product-overlay-bottom {
position: absolute;
bottom: 0; left: 0; right: 0;
}
#overlay-comparison--form {
padding-bottom: 20px;
}
#overlay-comparison--form .listing-swatches--container .options_text,
#overlay-comparison--form .options_container_radio .options_text {
color: #131313;
}
/*
|--------------------------------------------------------------------------
| Category Model
|--------------------------------------------------------------------------
*/
.modal {
display: none;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 100;
}
.modal--inner {
width: 100%;
max-width: 1100px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #e7e7e7;
-webkit-transition: -webkit-transform 0.4s ease;
transition: transform 0.4s ease;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.modal--open .modal--inner {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.modal--close {
position: absolute;
top: -55px;
right: 0;
color: #fff;
font-weight: 700;
font-size: 12px;
cursor: pointer;
-webkit-transform: translateY(30px);
-moz-transform: translateY(30px);
transform: translateY(30px);
transition: transform 0.4s cubic-bezier(0.25, 0, 0.25, 1.75) 1s;
}
.modal--open .modal--close {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
.modal--backdrop {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: rgba(0, 0, 0, 0.85);
transition: background-color 300ms ease;
}
.modal--backdrop:hover {
cursor: pointer;
}
.modal--inner {
transition: opacity 300ms ease;
}
.modal--content {
overflow: hidden;
}
.modal--image {
float: right;
}
.modal--image img {
width: 100%;
}
.listing--info {
padding: 30px 30px 30px 30px;
border: 4px solid #e7e7e7;
border-top: 0;
border-bottom: none;
background: rgb(238,238,238);
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#ffffff',GradientType=0 );
}
.listing--other {
float: right;
}
.listing--review {
text-align: right;
padding: 8px 0;
}
.listing--price {
float: left;
}
.listing--price strong {
display: block;
font-weight: 700;
font-size: 30px;
color: #1e1e1e;
}
.listing--price span {
display: block;
font-weight: 700;
font-size: 13px;
color: #666666;
}
.listing--points {
color: #e10e1e;
font-weight: 700;
font-size: 13px;
}
.listing--points span {
color: #1e1e1e;
}
.listing-pricebreaks table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
margin-top: 20px;
}
.listing-pricebreaks th,
.listing-pricebreaks td {
border: 1px solid #777777;
padding: 5px;
color: #ffffff;
}
.listing-pricebreaks th {
text-align: left;
}
.button-spinner {
display: none;
width: 149px;height: 21px;
position: relative;
}
.button-spinner::after {
content: '';
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
width: 20px;height: 20px;
background: url(/images/loading.gif) no-repeat center center / cover;
}
.modal--button {
display: block;
width: 100%;
text-align: center;
font-size: 18px;
}
.modal--button-details {
background-color: #b34834;
font-size: 12px;
}
.modal-overview--cont {
padding: 30px 30px 0;
}
.modal-overview {
height: 510px;
width: 420px;
padding: 0 0 124px 0;
overflow: scroll;
}
.modal-action {
position: absolute;
bottom: 0;
left: 0;
width: 420px;
}
.modal--view-full-details {
display: block;
width: 100%;
background-color: #01a4cd;
color: #fff;
padding: 11px 10px;
font-weight: 700;
font-size: 12px;
text-align: center;
}
.modal--view-full-details:hover {
background-color: #0284a5;
color: #fff;
}
/*
|--------------------------------------------------------------------------
| Listing
|--------------------------------------------------------------------------
*/
.listing-left {
width: 55.5555%;
}
.listing-page > .flex {
width: 100%;
}
.listing-images {
max-width: 700px;
margin: 0 auto;
}
.listing-images .breadcrumb-trail {
padding: 20px;
}
.listing-images .breadcrumb-trail,
.listing-images .breadcrumb-trail a {
color: #131313;
}
.listing-image--main {
position: relative;
}
.listing-image--slide {
text-align: center;
padding: 0 5px;
}
.listing-images-slider--thumbs .listing-image--slide img {
cursor: pointer;
}
.listing-images-slider--thumbs-container {
margin-top: 10px;
}
.listing-images-slider .slick-arrow {
position: absolute;
top: 50%;left: -60px;
transform: translateY(-50%);
width: 41px;height: 41px;
border-radius: 50%;
background-color: #f1f1f1;
z-index: 2;
}
.listing-images-slider .slick-arrow.slick-next {
left: auto;right: -60px;
}
.listing-images-slider .slick-arrow svg {
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
width: 11px;height: 18px;
fill: #131313;
}
.listing-main--upper {
padding: 30px 60px 35px;
}
.listing-main--section {
/* height: 100%; */
}
.listing-main--section-item.sticky-fix {
position: sticky;
top: 0;
padding-bottom: 33px;
}
.listing-title {
font-size: 28px;
color: #fff;
margin-bottom: 2px;
line-height: 1.1;
margin-top: 10px;
}
.listing-subtitle {
font-size: 21px;
color: #fff;
}
.listing-sold {
font-size: 18px;
color: #e10e1e;
display: flex;
align-items: center;
}
.listing-sold svg {
fill: #e10e1e;
width: 20px;height: 20px;
margin-left: 4px;
}
.listing-sku {
text-transform: uppercase;
font-size: 11px;
color: #767676;
}
.listing-pricing {
}
.listing-price {
color: #fff;
font-size: 24px;
padding-top: 15px;
width: 100%;
align-self: start;
}
.klarna-badge{
padding-top: 30px;
}
.listing-vat-label {
font-size: 10px;
color: #767676;
padding: 0 15px 0 4px;
position: relative;
top: -2px;
}
.price + .listing-vat-label {
top: -4px;
}
.listing-vat-label:last-child {
padding-right: 0;
}
.price-ex {
font-size: 18px;
}
.listing-klarna {
background-color: #ffb3c7;
border-radius: 4px;
padding: 10px 15px;
}
.listing-klarna-price {
font-size: 14px;
color: #131313;
padding-right: 10px;
}
.listing-klarna-price > span {
font-weight: 600;
}
.listing-klarna-icon {
width: 65px;
}
.listing-klarna-icon > svg {
width: 100%;
fill: #131313;
}
.listing-main--options {
padding: 20px 60px;
border-top: 1px solid #393939;
}
.listing-side {
position: relative;
width: 40%;
float: right;
z-index: 2;
}
.listing-main {
position: relative;
width: 60%;
float: left;
z-index: 2;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.listing-side--inner {
position: relative;
width: 100%;
float: right;
}
.listing-main--inner {
width: 100%;
padding-right:20px;
float: left;
}
.listing-overview--top-inner {
padding: 0 0 15px 0;
background-color: #fff;
}
.listing-details {
padding: 20px 0 0 0;
}
.form-options {
position: relative;
/* padding: 0 0 15px 0; */
z-index: 1;
/* background-color: #fff; */
}
.listing-rrp,
.listing-save {
display: inline-block;
text-transform: uppercase;
font-size: 16px;
color: #3fa663;
}
.listing-rrp > span {
text-decoration: line-through;
}
.listing-save {
color: #51ac5c;
text-decoration: none;
}
.rating-star {
width: 20px;
height: 18px;
display: inline-block;
margin: 0 1px;
}
.rating-star svg {
width: 20px;height: 18px;
}
.rating-star svg {
fill: #51ac5c;
}
.rating-star--empty svg {
fill: #bbbbbb;
}
.listing-personalise {
text-align: center;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
color: #1e1e1e;
background-color: #dde2e5;
line-height: 24px;
padding: 3px 0px;
cursor: pointer;
transition: background 300ms ease;
}
.listing-personalise:hover {
background-color: #e7e7e7;
}
.listing-personalise.disabled {
opacity: 0.4;
}
.listing-subscribe {
background-color: rgba(0,0,0,0.05)
}
.listing-subscribe__bottom {
background: rgba(0,0,0,0.1);
padding: 6px 10px;
}
.listing-subscribe__inner {
padding: 22px 22px 18px 22px
}
.listing-subscribe .percent {
opacity: 0.4;
font-size: 13px;
padding: 3px 0 0 0
}
.listing-subscribe__button.open {
background-color: #fa5400;
color: #fff;
border-radius: 0px;
border: 1px solid #fa5400;
}
.listing-subscribe__button span {
padding: 0 0 0 18px;
}
.listing-subscribe__button.open span {
background: url(/images/style/ptm/icons/refresh@2x.png) center left / 12px 12px no-repeat;
}
.listing-offer {
padding: 20px;
margin: 10px 0 0 0;
background: #37af56;
background-size: 515.5px 511.5px;
color: #fff;
font-weight: 700;
font-size: 16px;
border-radius: 2px;
}
.listing-offer-product {
position: relative;
margin: 15px 0 0 0;
background-color: rgba(0,0,0,0.1);
}
.listing-offer-details {
padding: 10px;
overflow: hidden;
}
.listing-offer--image {
float: left;
}
.listing-offer--image img {
display: block;
}
.listing-offer--price {
position: absolute;
bottom: 10px;
left: 92px;
font-size: 18px;
opacity: 0.8;
}
.listing-deadline {
/* margin: 0 0 15px 0; */
}
.listing-actions {
min-height: 57px;
}
.listing-deadline--details {
text-align: right;
float: left;
text-transform: uppercase;
}
.listing-deadline--title ~ .listing-deadline-doughnuts {
padding-top: 8px;
}
.listing-deadline--title {
font-size: 11px;
color: #fff;
}
.listing-deadline--subtitle {
color: #fff;
display: inline-block;
font-size: 15px;
}
.listing-deadline--date {
font-size: 15px;
font-weight: 600;
color: #fff;
display: inline-block;
}
.pulse-animation {
/*
-webkit-animation: pulse 1s infinite;
-moz-animation: pulse 1s infinite;
-o-animation: pulse 1s infinite;
animation: pulse 1s infinite;
*/
}
.listing-deadline-doughnuts {
float: right;
}
.listing-deadline-doughnut {
position: relative;
width: 35px; height: 35px;
float: left;
transition: transform 1s ease;
margin: 0 0 0 10px;
}
.listing-deadline-doughnut--inner {
content: '';
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 28px;
height: 28px;
background-color: #fff;
border-radius: 50px;
text-align: center;
font-weight: 700;
color: #1e1e1e;
}
.listing-deadline-doughnut strong {
display: block;
font-size: 21px;
position: relative;
top: 8px;
color: #1e1e1e;
}
.listing-deadline-doughnut span {
display: block;
font-size: 11px;
position: relative;
top: 4px;
}
.listing-deadline-doughnuts svg {
width: 35px; height: 35px;
-webkit-transform: rotate(-89.9deg);
transform: rotate(-89.9deg);
background: #dde2e5;
border-radius: 50%;
}
.listing-deadline-doughnuts circle {
position: relative;
fill: #131313;
stroke: #fff;
stroke-width: 6px;
stroke-dasharray: 38 100; /* for 38% */
transition: stroke-dasharray 1s ease;
}
.listing-deadline-doughnut:hover circle {
stroke-dasharray: 100 100; /* for 100% */
}
.listing-share {
padding: 10px;
background-color: rgba(0,0,0,.2);
}
.listing-share .addthis_inline_share_toolbox {
margin-bottom: -5px;
}
.listing-image {
position: relative;
}
.listing-image__brand {
position: absolute;
top: 15px;
right: 15px;
z-index: 5;
}
.listing-image__link {
display: block;
position: relative;
}
.listing-image__img {
display: block;
}
.listing-image__link:hover .listing-image__zoom__svg {
height: 40px;
width: 40px;
}
.listing-image__zoom {
position: absolute;
height: 50px;
width: 50px;
bottom: 30px;
left: 30px;
}
.listing-image__zoom__svg {
fill: #e10e1e;
position: absolute;
top: 50%;
left: 50%;
height: 35px;
width: 35px;
transition: height 200ms ease, width 200ms ease;
transform: translate(-50%, -50%);
}
.stock {
width:64%;
text-align: right;
padding: 12px 0 14px 0;
}
.options-loading {
display: none;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0, 0.6);
z-index: 9999;
}
.options-loading > .dbl {
height: 100%;
}
.options-loading .dblc {
vertical-align: middle;
}
.listing-swatches--container,
.options_container_radio {
margin-bottom: 10px;
}
.listing-swatches--container .options_text,
.options_container_radio .options_text {
font-size: 18px;
font-weight: 600;
color: #fff;
margin-bottom: 10px;
text-transform: uppercase;
}
.options_container_radio_inner {
}
.options-radios .cf {
display: flex;
padding: 10px 0 0 0;
margin: 0 0 10px;
background-color: #131313;
flex-wrap: wrap;
}
.option-radio {
flex: 1 0 220px;
}
.option-radio:hover .option-radio__inner {
/* background: rgba(0,0,0,0.2); */
}
.option-radio.checked .option-radio__inner {
background: #e10e1e;
border-color: #e10e1e;
}
.option-radio__inner {
background: #131313;
border: 1px solid #393939;
border-radius: 5px;
padding: 15px;
text-align: center;
display: block;
cursor: pointer;
font-size: 18px;
color: #fff;
}
.option-radio__inner input {
display: none;
}
.opt_radio {
width:initial;
vertical-align: middle;
margin: 0 6px .25em 10px;
}
.options_text {
color: #131313;
font-size: 16px;
}
.listing-options-option {
display: flex;
margin-bottom: 10px;
overflow: hidden;
border-radius: 4px;
}
.listing-options-option .select2,
.listing-options-option .select2 .selection,
.listing-options-option .select2 .select2-basic--container.select2-selection--single {
height: 100%;
}
.listing-options-option .select2 .select2-basic--container.select2-selection--single {
background-color: #f1f1f1;
display: flex;
align-items: center;
}
.listing-options-option .options_text {
max-width: 212px;
width: 100%;
background-color: #f1e8e9;
font-size: 16px;
color: #131313;
padding: 13px 12px;
}
.listing-options-option .input {
width: 100%;
margin-bottom: 0;
}
.listing-options-option .label-none .select2-basic--container.select2-selection--single .select2-selection__rendered {
padding: 14px 8px;
font-size: 16px;
font-weight: 600;
}
.listing-options-option .select2-container--default .select2-selection--single .select2-selection__arrow b {
/* bottom: 18px; */
transform: translateY(-50%);
top: 50%;
}
.listing-options-required {
width:100%;
background:#414141;
padding:15px 20px;
color:#fff;
border-radius:3px;
font-weight: 700;
text-align: center;
position: absolute;
margin-bottom:15px;
z-index:1000;
top:-60px;
}
.listing-options-required:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: #414141;
border-width: 10px;
margin-left: -10px;
}
.listing-options-btm {
margin-top: 9px;
}
.button-wishlist {
margin: 0 0 0 10px;
display: block;
width: 40px;
height: 40px;
padding: 0;
cursor: pointer;
position: relative;
border: 1px solid #393939;
border-radius: 4px;
background: none;
}
.button-wishlist::after {
content: '';
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
width: 14px;height: 12px;
background-image: url(/images/style/ptm/icon-heart.png);
background-size: contain;
background-repeat: no-repeat;
transition: transform 300ms cubic-bezier(0.25, 0, 0.25, 1.75);
}
.button-wishlist:hover::after {
transform: scale(1.1), translate(-50%, -50%);
}
.listing-swatches {
display: flex;
flex-wrap: wrap;
}
.listing-swatch {
padding: 0 2px 2px 0;
width: 10%
}
.listing-swatch__inner {
position: relative;
height: 0;
padding: 0 0 100% 0;
cursor: pointer;
overflow: hidden;
}
.listing-swatch__content {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
/* border: 2px solid rgba(0,0,0,0.2); */
background-repeat: no-repeat;
background-size: cover;
transition: border .4s ease;
}
.listing-swatch.sel .listing-swatch__content,
.listing-swatch__inner:hover .listing-swatch__content {
border: 3px solid #fff;
}
.listing-notify .button {
/* margin-bottom:15px; */
height: 40px;
font-size: 13px;
padding-top: 10px;
}
.listing-comments-response {
background-color: #e7e7e7;
margin: 15px 0 0 0;
padding: 20px;
}
.listing-content h1,
.listing-content h2,
.listing-content h3,
.listing-content h4,
.listing-content h5,
.listing-content h6{
font-size: 18px;
}
.listing-content ul,
.listing-content ul li,
.listing-content ul li a {
color: #131313;
}
.kitbuilder-back--container {
background: #f1f1f1;
padding: 15px 25px 15px;
z-index: 6;
}
.kitbuilder-back--container.sticky.js-is-sticky--change {
padding: 10px 25px;
}
.kitbuilder-back--container a.kitbuilder-back {
margin: 0;
}
.listing-actions--action {
flex-direction: column;
}
.listing-actions--action .kbsubmit {
margin-top: 10px;
width: 100%;
text-align: center;
}
.listing-collection-message {
padding: 18px 20px;
background: #41A763;
}
.listing-bar-message-red,
.cart-segment-message-red {
background-color: #e30614;
letter-spacing: 0.02em;
font-size: 16px;
padding: 10px 12px;
}
.cart-segment-message-red {
font-size: 14px;
}
/*
|--------------------------------------------------------------------------
| Listing > Flash Deals
|--------------------------------------------------------------------------
*/
.listing-flash-banner {
position: absolute;
top: 20px;left: 20px;
z-index: 5;
}
.listing-main--flash {
border: 5px solid #f1bf12;
}
.listing-main--flash .flash-deal-price {
display: inline-block;
margin-bottom: 10px;
}
.listing-title--flash {
display: flex;
align-items: flex-start;
}
.listing-title--flash > .listing-title--section {
flex: 1;
padding-right: 5px;
}
.listing-title--flash .flashdeal-listing {
position: relative;
background-color: #f1bf12;
color: #fff;
margin-top: 2px;
}
.listing-title--flash .flashdeal-listing--svg svg {
fill: #fff;
position: relative;
top: 2px;
}
.listing-title--flash .flashdeal-listing--svg {
margin-top: 0;
}
/*
|--------------------------------------------------------------------------
| Listing > Thumbnails
|--------------------------------------------------------------------------
*/
.listing-thumbnails {
position: relative;
padding: 4px 0 0 0;
}
.listing-thumbnails.has-arrows .listing-thumbnails--slider {
padding: 0 44px;
}
.listing-thumbnail {
margin: 0 2px;
}
.listing-thumbnail--link {
display: block;
}
.listing-thumbnails .slick-arrow {
position: absolute;
right: 0;
bottom: 0;
top: 0;
width: 40px;
background: #e10e1e;
font-size: 0;
line-height: 0;
cursor: pointer;
color: transparent;
transition: background 300ms ease;
}
.listing-thumbnails .slick-prev {
right: auto;
left: 0;
}
.listing-thumbnails .slick-arrow:after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: url(/images/style/ptm/icon-chevron-right.png) no-repeat center center;
transition: opacity 300ms ease;
}
.listing-thumbnails .slick-prev:after {
background: url(/images/style/ptm/icon-chevron-left.png) no-repeat center center;
}
.listing-thumbnails .slick-disabled {
background-color: #777777;
cursor: not-allowed;
}
.listing-thumbnails .slick-disabled:after {
opacity: 0.4;
}
/*
|--------------------------------------------------------------------------
| Listing > Tabs
|--------------------------------------------------------------------------
*/
.listing-tab--section {
padding: 20px 80px;
border-bottom: 1px solid #ededed;
}
.listing-tab--section:first-child {
border-top: 1px solid #ededed;
}
.listing-tab--button {
font-size: 18px;
font-weight: 600;
color: #040707;
cursor: pointer;
}
.listing-tab--button svg {
fill: #131313;
width: 19px;height: 10px;
transition: transform .3s ease;
}
.listing-tab--button.active svg {
transform: rotate(180deg);
}
.listing-tab {
padding-top: 20px;
}
.specification-table-label {
font-size: 13px;
width: 215px;
}
.specification-table-value {
font-size: 13px;
font-weight: 600;
}
/*
|--------------------------------------------------------------------------
| Listing > Payment methods
|--------------------------------------------------------------------------
*/
.listing-payment-methods {
padding: 20px 0;
border-bottom: 1px solid #fff;
}
.listing-payment-methods span {
padding-right: 10px;
}
/*
|--------------------------------------------------------------------------
| Listing > Recommended Accessories
|--------------------------------------------------------------------------
*/
.listing-recommended {
padding: 25px 60px;
}
.listing-recommended--title {
font-size: 18px;
font-weight: 600;
padding-bottom: 10px;
}
.listing-recommended-row {
margin-bottom: 1px;
}
.listing-recommended-image {
background-color: #fff;
width: 85px;
}
.listing-recommended-image img {
display: block;
width: 100%;
}
.listing-recommended--desc {
padding: 13px 15px;
background-color: #fff;
}
.listing-recommended--desc-title {
font-size: 15px;
color: #131313;
}
.listing-recommended--desc-title a {
color: #131313;
}
.listing-recommended--price span {
font-size: 10px;
color: #767676;
}
.listing-recommended--price-price {
font-size: 16px;
padding-right: 10px;
}
.listing-recommended--price-ex {
font-size: 12px;
}
.listing-recommended-stock {
font-size: 11px;
}
.listing-recommend-add {
width: 65px;
background-color: #3fa663;
font-size: 18px;
letter-spacing: 0.1em;
color: #fff;
}
.add-icon {
width: 16px;height: 16px;
position: relative;
}
.add-icon::before {
content: '';
position: absolute;
top: 0;bottom: 0;left: 50%;
width: 4px;
background-color: #fff;
transform: translateX(-50%)
}
.add-icon::after {
content: '';
position: absolute;
top: 50%;right: 0;left: 0;
height: 4px;
background-color: #fff;
transform: translateY(-50%);
}
/*
|--------------------------------------------------------------------------
| Listing > Related
|--------------------------------------------------------------------------
*/
.listing-related {
padding: 25px 60px;
border-top: 1px solid #fff;
}
.listing-related--title {
text-transform: uppercase;
font-size: 18px;
font-weight: 600;
}
.listing-related .product-grid {
margin: 0 -5px -5px 0;
}
.listing-related .product-grid--item {
border: none;
padding: 0 5px 5px 0;
}
/*
|--------------------------------------------------------------------------
| Listing > Tabs > Comments
|--------------------------------------------------------------------------
*/
.listing-comments-form {
padding: 20px;
margin: 20px 0 0 0;
background-color: #666666;
}
.listing-comments-title {
font-weight: 700;
font-size: 21px;
color: #fff;
float: left;
}
.listing-comment:first-child {
border-top: 2px solid #e7e7e7;
}
.listing-comment {
padding: 20px;
border: 2px solid #e7e7e7;
border-top: none;
}
.listing-comment-title {
text-transform: uppercase;
font-weight: 700;
padding: 0 0 6px 0;
}
.listing-comments-stars {
float: right;
}
.listing-comments-stars .rating-star {
float: right;
cursor: pointer;
}
.listing-comments-stars .rating-star:hover svg,
.listing-comments-stars .rating-star:hover + .rating-star svg,
.listing-comments-stars .rating-star:hover + .rating-star + .rating-star svg,
.listing-comments-stars .rating-star:hover + .rating-star + .rating-star + .rating-star svg,
.listing-comments-stars .rating-star:hover + .rating-star + .rating-star + .rating-star + .rating-star svg {
fill: rgba(81, 172, 92, 0.47);
}
.listing-comment-author {
float: left;
font-weight: 700;
text-transform: uppercase;
}
.listing-review-stars {
float: right;
}
/*
|--------------------------------------------------------------------------
| Listing > Price Breaks
|--------------------------------------------------------------------------
*/
.price-bands {
display: none;
background-color: #131313;
margin: 20px 0 0 0;
color: #fff;
}
.price-bands--table-cont {
padding: 10px;
}
.price-bands--table {
border-spacing: 16px 10px;
}
.price-bands--header {
color: #abadae;
}
/*
|--------------------------------------------------------------------------
| Listing > Overlay
|--------------------------------------------------------------------------
*/
.overlay {
display: none;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background-color: rgba(102, 102, 102, 0.85);
z-index: 100;
max-width: none;
}
.overlay-hide {
display: none !important;
}
.overlay-personalise {
background-color: rgba(0, 0, 0, 0.85);
}
.overlay.open {
display: block;
}
.overlay--close {
position: absolute;
top: -30px;
right: 0;
color: #fff;
font-weight: 400;
font-size: 12px;
cursor: pointer;
transition: transform 0.4s cubic-bezier(0.25, 0, 0.25, 1.75) 1s;
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0, 0.25, 1.75) 1s;
}
@-webkit-keyframes overlayEntrance {
0% { -webkit-transform: translate(-50%, -50%) rotateX(70deg) scale(0.7); transform: translate(-50%, -50%) rotateX(70deg) scale(0.7); opacity: 0; }
80% { -webkit-transform: translate(-50%, -50%) rotateX(0deg) scale(1.04); transform: translate(-50%, -50%) rotateX(0deg) scale(1.04); }
90% { -webkit-transform: translate(-50%, -50%) rotateX(0deg) scale(0.98); transform: translate(-50%, -50%) rotateX(0deg) scale(0.98); }
100% { -webkit-transform: translate(-50%, -50%) rotateX(0deg) scale(1); transform: translate(-50%, -50%) rotateX(0deg) scale(1); opacity: 1; }
}
@keyframes overlayEntrance {
0% { -webkit-transform: translate(-50%, -50%) rotateX(70deg) scale(0.7); transform: translate(-50%, -50%) rotateX(70deg) scale(0.7); opacity: 0; }
80% { -webkit-transform: translate(-50%, -50%) rotateX(0deg) scale(1.04); transform: translate(-50%, -50%) rotateX(0deg) scale(1.04); }
90% { -webkit-transform: translate(-50%, -50%) rotateX(0deg) scale(0.98); transform: translate(-50%, -50%) rotateX(0deg) scale(0.98); }
100% { -webkit-transform: translate(-50%, -50%) rotateX(0deg) scale(1); transform: translate(-50%, -50%) rotateX(0deg) scale(1); opacity: 1; }
}
@keyframes overlayEntranceNotVerticallyCentered {
0% { -webkit-transform: translateX(-50%) rotateX(70deg) scale(0.7); transform: translateX(-50%) rotateX(70deg) scale(0.7); opacity: 0; }
80% { -webkit-transform: translateX(-50%) scale(1.04); transform: translateX(-50%) scale(1.04); }
90% { -webkit-transform: translateX(-50%) scale(0.98); transform: translateX(-50%) scale(0.98); }
100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 1; }
}
.overlay--inner {
position: absolute;
top: 50% !important;
left: 50% !important;
width: 100%;
max-width: 446px;
padding: 20px 20px 0 20px;
background-color: #fff;
transition: all 1s cubic-bezier(0.25, 0, 0.25, 1.75);
border-radius: 2px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.overlay__blue .overlay--inner {
background-color: #e10e1e;
}
.overlay-collection--all {
display: flex;
justify-content: flex-end;
padding-bottom: 20px;
}
.overlay-collection--inner {
max-width: 1000px;
}
.overlay.open .overlay--inner {
/* -webkit-animation: overlayEntrance 1s forwards;
-moz-animation: overlayEntrance 1s forwards;
-o-animation: overlayEntrance 1s forwards;
animation: overlayEntrance 1s forwards; */
}
.overlay-personalise .overlay--inner {
background-color: #ededed;
padding: 5px 5px 0 5px;
}
.overlay--title {
display: block;
text-align: center;
font-weight: 600;
font-size: 18px;
line-height: 1.1;
color: #131313;
}
.overlay-personalise .overlay--title {
color: #131313;
padding: 14px 0 14px;
}
.overlay--input-group {
padding: 0 0 4px;
}
.overlay--input-group-padded {
padding: 10px 0 4px;
}
.overlay--submit-group {
text-align: center;
padding: 4px 0 0 0;
}
.overlay--input {
width: 100%;
padding: 6px 8px;
border-radius: 2px;
border: 1px solid rgba(0,0,0,0.2);
background-color: #fff;
text-align: left;
font-size: 13px;
color: #1e1e1e;
}
.overlay--text-input {
height: 120px;
}
.overlay--form {
padding: 20px 0;
}
#ask-a-question,
#bulk {
cursor: pointer;
}
.overlay--text {
text-align: center;
color: #fff;
font-size: 12px;
padding: 10px 0 0 0;
margin: 0;
}
.addthis_sharing_toolbox {
padding-top:4px;
float: right;
}
#product_add_content h2 {
font-size: 16px;
}
#product_add_content,
#product_add_upsell {
padding: 4px 0 10px;
text-align: center;
}
#engraving_img_container {
text-align: center;
padding-top: 14px;
}
#add-new-address-overlay .overlay--inner {
background-color: #fff;
padding: 40px;
max-width: 460px;
}
#add-new-address-overlay .overlay--title {
color: #131313;
padding: 0 0 20px 0;
display: block;
}
#add-new-address-overlay .checkout-form--has-button {
padding: 10px 0 20px 0;
}
#click-and-collect-overlay .overlay--inner {
background-color: #fff;
padding: 20px;
max-width: 980px;
}
/*
Collection overlay
*/
.overlay-collection--text {
padding: 0 20px 20px;
text-align: center;
color: #131313;
font-family: Viga;
font-size: 18px;
font-weight: 400;
line-height: 1;
}
.overlay-collection--title {
color: #131313;
font-family: Viga;
font-size: 18px;
font-weight: 400;
line-height: normal;
}
.overlay-collection--item {
border-top: 1px solid #F1F1F1;
padding: 20px;
cursor: pointer;
}
.overlay-collection--item:first-child {
border-top: 0;
}
.overlay-collection--image img {
display: block;
width: 100%;
}
.overlay-collection--image {
flex-shrink: 0;
width: 80px;
margin-right: 20px;
border: 1px solid #f1f1f1;
}
.overlay-collection--list {
max-height: 600px;
overflow-y: auto;
border: 1px solid #F1F1F1;
}
.overlay-collection--action {
padding: 20px 0;
}
.overlay-collection--item > .flex-item + .input {
margin-left: 15px;
}
.overlay-collection--action > .button {
flex-basis: 48%;
flex-grow: 1;
}
.overlay-collection--action > .button + .button {
margin-left: 5px;
}
.overlay-collection--action {
display: flex;
justify-content: space-between;
}
/*
|--------------------------------------------------------------------------
| Compare
|--------------------------------------------------------------------------
*/
.compare-table--row {
position: relative;
color: #fff;
}
/*.compare-table--row:after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: -moz-linear-gradient(top, rgba(213,86,62,0) 1%, rgba(54,22,16,0) 75%, rgba(0,0,0,0.2) 100%);
background: -webkit-linear-gradient(top, rgba(213,86,62,0) 1%,rgba(54,22,16,0) 75%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(to bottom, rgba(213,86,62,0) 1%,rgba(54,22,16,0) 75%,rgba(0,0,0,0.2) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0#e10e1e', endColorstr='#33000000',GradientType=0 );
}*/
.compare-table--cell {
padding: 15px;
background-color: #f1f1f1;
font-weight: 700;
color: #131313;
text-align: center;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
.compare-table--cell:last-child {
border-right: 0;
}
.compare-table--row-header {
background-color: #fff;
text-align: right;
color: #131313;
border-right: none;
border-bottom: 1px solid #f1f1f1;
}
.compare-table--row:last-child .compare-table--row-header {
/* border-bottom: 0; */
}
.compare-table--row:first-child .compare-table--row-header {
border-top: 1px solid #f1f1f1;
}
.compare-table--head-cell-first {
}
.product-info {
padding: 30px;
}
.compare-action--button {
padding: 20px;
}
.compare-message {
padding: 20px;
text-align: center;
width: 100%;
border-bottom: 1px solid #f1f1f1;
}
.compare-message > .message {
margin-bottom: 0;
display: inline-block;
}
.compare-listing--image {
display: block;
max-width: 373px;
margin: 0 auto;
padding: 10px;
}
.compare-listing--image img {
display: block;
width: 100%;
}
.compare-table--title-cont {
padding: 5px;
text-align: center;
}
.compare-table--title {
font-size: 36px;
/* color: #fff; */
margin: 0;
padding: 30px 10px;
}
.compare-table--head {
display: table-row;
}
.compare-table--head .compare-table--cell {
padding: 0;
text-align: left;
vertical-align: top;
background-color: #dde2e5;
}
.compare-table--head .compare-table--cell:first-child {
padding: 10px;
vertical-align: middle;
}
.compare-table--cell.compare-table--head-cell-empty {
text-align: center;
vertical-align: middle;
}
.compare-table--head-cell-empty i {
font-size: 270px;
font-style: normal;
}
.compare-undo--form {
display: inline-block;
}
/*
|--------------------------------------------------------------------------
| Basket
|--------------------------------------------------------------------------
*/
.cart--heading {
/* text-transform: uppercase; */
font-size: 18px;
color: #131313;
padding: 0 0 15px 0;
}
.cart-segment {
/* border: 2px solid #e7e7e7; */
background-color: #fff;
margin-bottom: 20px;
display: flex;
flex-direction: column;
}
.cart-segment > * {
order: 2;
}
.cart-collection-msg {
order: 1;
}
.cart-side {
counter-reset: segmentCounter;
}
.cart-side .cart--heading {
color: #fff;
position: relative;
padding: 0 0 15px 40px;
}
.cart-side .cart--heading::after {
counter-increment: segmentCounter;
content: counter(segmentCounter);
width: 28px;height: 28px;
border-radius: 28px;
background-color: #393939;
line-height: 28px;
text-align: center;
font-size: 16px;
font-weight: 500;
color: #fff;
position: absolute;
top: -2px;left: 0;
}
.cart-side .cart-segment {
/* border: 2px solid #e7e7e7; */
background-color: #131313;
border-top: 1px solid #393939;
padding: 18px 23px;
}
.cart-side .cart-segment:first-child {
border-top: 0;
}
.cart-main > .basket-title {
font-size: 32px;
margin-bottom: 10px;
}
.cart-main .cart-segment:last-child {
margin-bottom:0;
}
.cart-main .trustpilot-widget {
margin-top: 30px;
}
.cart-side .cart-segment {
margin-bottom:0;
}
.cart-segment--inner {
/* padding: 15px; */
}
.cart-segment-upsells {
border: 1px solid #fff;
margin-top: 20px;
padding: 20px 25px 25px;
}
.cart-heading--upsells {
font-weight: 600;
text-transform: uppercase;
font-size: 18px;
margin-bottom: 10px;
}
.listing-recommend-add > .button {
height: 100%;
background-color: #3fa663;
display: flex;
}
.cart-main {
width: 62%;
float: left;
}
.cart-option--images-cont {
padding: 18px 0 12px;
}
.cart-option--image-cont {
position: relative;
display: inline-block;
padding-left: 12px;
background-image: url(/images/style/ptm/plus.png);
background-position: center left;
background-repeat: no-repeat;
background-size: 8px 8px;
}
.cart-option--image {
border: 1px solid #efefef;
height: 50px;
width: 50px;
display: flex;
align-items: center;
}
.cart-option--image img {
max-height: 100%;
}
.cart-option--image-text {
display: none;
position: absolute;
bottom: calc(100% + 10px);
text-align: center;
width: 250px;
left: -88px;
color: #fff;
}
.cart-option--image-text::after {
content: "";
position: absolute;
bottom: -7px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 7px 7px 0 7px;
border-color: #131313 transparent transparent transparent;
}
.cart-option--image-text-inner {
padding: 7px 15px 5px;
font-size: 13px;
display: inline-block;
background: #131313;
}
.cart-option--image-text span {
display: block;
padding-bottom: 3px;
color: #fec800;
}
.cart-option--image-cont:hover .cart-option--image-text {
display: block;
}
.cart-option--image-qty {
position: absolute;
background: #06387f;
color: #fff;
font-size: 10px;
height: 17px;
width: 17px;
border-radius: 50%;
text-align: center;
line-height: 18px;
right: 0;
}
.basket-item-stock--message {
width: 100%;
padding-top: 10px;
}
.basket-stock {
padding-left: 10px;
}
.basket-points {
padding-top: 10px;
}
.cart-collection-msg {
font-family: 'Viga';
font-size: 16px;
padding-bottom: 20px;
color: #e30614;
}
.cart-collection-msg > * {
line-height: 1.4;
}
.no-collect-sash {
font-family: 'Viga';
margin-top: 20px;
padding: 5px 10px;
border-radius: 3px;
background-color: #e30614;
color: #FFF;
letter-spacing: 0.02em;
}
/*
|--------------------------------------------------------------------------
| Basket > Side
|--------------------------------------------------------------------------
*/
.basket-flash-banner.flash-banner {
padding: 3px 6px;
font-size: 12px;
height: 24px;
display: flex;
margin-right: 10px;
}
.basket-flash-banner.flash-banner svg {
height: 12px;
}
.basket-flash-cont + .cart-item-title {
display: block;
margin-top: 3px;
}
.flashdeal-basket.flashdeal-listing {
position: relative;
font-size: 12px;
height: 24px;
}
/*
|--------------------------------------------------------------------------
| Basket > Side
|--------------------------------------------------------------------------
*/
.cart-side {
float: right;
width: 38%;
padding: 0 0 0 40px;
}
.cart-side--option {
/* font-size: 13px;
font-weight: 700;
border: 2px solid #e7e7e7;
margin-top:15px; */
}
.cart-side--option span {
display: block;
padding: 12px;
}
.cart-side--option-trigger {
padding: 0 15px;
}
.cart-side--option__gift {
color: #51ac5c;
}
.cart-side--option__gift.sel {
background: #51ac5c;
color: #fff;
border: 2px solid #3F9649;
}
.cart-side--option__gift.sel span {
background-image: url(/images/style/ptm/icon-gift-white.png);
}
.cart-side--option-inner {
display: none;
padding: 0 20px 20px 20px;
}
/*
|--------------------------------------------------------------------------
| Basket > Totals
|--------------------------------------------------------------------------
*/
.cart-segment.cart-totals {
background-color: #393939;
/* font-weight: 700; */
color: #fff;
border-top: none;
font-size: 13px;
text-transform: uppercase;
}
.cart-segment.cart-totals .button {
margin-top: 20px;
}
.cart-ppx{
text-align:center;
padding-top:20px;
}
.cart-totals .dblc {
line-height: 1.2;
}
.cart-total--price {
text-align: right;
}
.cart-total {
font-size: 18px;
font-family: 'Viga', sans-serif;
}
.cart-total > .cart-total--label {
padding-top: 10px;
}
.cart-total + .cart-total > .cart-total--label {
padding-top: 2px;
}
.cart-total .dblc {
}
.cart-side--delivery-options {
padding: 10px 0 0;
color: #fff;
}
.cart-del-label {
width: 100%;
}
.cart-side--delivery-option {
background-color: #131313;
color: #fff;
padding: 8px 13px;
cursor: pointer;
border: 1px solid #393939;
position: relative;
}
.cart-side--delivery-option > .flex {
padding-right: 45px;
}
.cart-side--delivery-option::after {
content: '';
position: absolute;
top: 50%;right: 10px;
transform: translateY(-50%);
width: 27px;height: 27px;
border: 1px solid #393939;
}
.cart-side--delivery-option::before {
content: '';
position: absolute;
top: 50%;right: 12px;
transform: translateY(-50%);
background-color: #393939;
width: 23px;height: 23px;
}
.cart-side--delivery-option.sel::after {
border-color: #fff;
}
.cart-side--delivery-option.sel::before {
background: url(/images/style/ptm/tick-green.png)no-repeat center center / 16px 14px #fff;
}
.cart-side--delivery-option.sel {
background-color: #3fa663;
border-color: #3fa663;
color: #fff;
}
.cart-side--delivery-option.sel span {
color: #fff;
}
.cart-side--delivery-option strong {
font-size: 13px;
display: block;
}
.cart-del-name {
font-weight: 600;
}
.cart-side--delivery-option span {
display: block;
}
.cart-side--delivery-option span {
color: #fff;
}
span.cart-side--delivery-cost,
span.cart-side--delivery-cost--original {
/* float: right;
font-weight: 700;
color: #1e1e1e; */
font-weight: 600;
}
span.cart-side--delivery-cost--original {
text-decoration: line-through;
padding-right: 8px;
font-weight: normal;
}
.collection-method--container {
margin: 20px 0 0;
}
.collection-method--container .line-sides {
font-size: 18px;
width: 100%;
align-self: center;
margin-bottom: 10px;
gap: 10px;
}
.collection-method--container .line-sides:before, .line-sides:after {
display: inline-flex;
height: 1px;
content: '\a0';
background-color: #fff;
flex: 1 1 100%;
align-self: center;
}
/*
|--------------------------------------------------------------------------
| Basket > Items
|--------------------------------------------------------------------------
*/
.cart-items {
width: 100%;
/* padding: 15px; */
position: relative;
}
.cart-items > .message {
margin-bottom: 15px;
}
.basket-empty {
padding: 20px;
}
.cart-item {
position: relative;
/* margin: 0 0 15px 0; */
border-bottom: 1px solid #ededed;
display: flex;
padding: 12px 20px;
}
.cart-item:last-child {
border-bottom: 0;
margin:0;
/* padding:0; */
}
.cart-item-image {
width: 100px;
max-width: 100px;
min-width: 100px;
/* margin: 0 0 15px 0; */
}
.cart-item-image a {
border: 1px solid #ededed;
}
.cart-item-image img {
display: block;
}
.cart-item:last-child .cart-item-image {
margin:0;
}
.cart-item-content {
padding: 5px 90px 0 15px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cart-item-content .input {
display: block;
}
.cart-item-title a {
font-size: 18px;
color: #131313;
}
.cart-item-content .label-inline {
width:104px;
}
.cart-item-right {
width: 110px;
position: absolute;
top: 17px; right: 20px; bottom: 0;
float: right;
text-align: right;
}
.cart-item-price {
/* font-weight: 700; */
font-size: 18px;
color: #131313;
}
.cart-item-stock-cont {
padding-top: 7px;
}
.cart-item-unitprice, .cart-item-option {
display: block;
color: #767676;
font-size: 12px;
}
.cart-item-stock {
display: block;
font-size: 12px;
}
.cart-item-stock.stock-status {
background-size: 14px auto;
}
.cart-item-stock {
margin-top: 3px;
padding: 0 0 0 20px;
background-repeat: no-repeat;
background-position: left center;
}
.cart-item-stock-cross-amber {
background-image: url(/images/style/ptm/icon-cross-amber.png);
}
.cart-item-stock-van-green {
background-image: url(/images/style/ptm/icon-dispatch-van-green.png);
}
.cart-item-stock-warning {
background-image: url(/images/style/ptm/icon-cart-warning.png);
}
.cart-item-stock-van-orange {
background-image: url(/images/style/ptm/icon-dispatch-van-orange.png);
}
.cart-item-stock-box {
background-image: url(/images/style/ptm/icon-dispatch-box-orange.png);
}
#cart--vat-declaration-details {
display:none;
}
.remove {
background: url(/images/style/ptm/cart-remove.png) left 3px no-repeat;
background-size: 10px 10px;
padding: 0 0 0 15px;
cursor: pointer;
font-size: 11px;
text-transform: uppercase;
color: #e10e1d;
}
.cart-item-right .remove, .cart-item-right .button-small {
position: absolute;
bottom: 15px;
right: 0;
}
.cart-item:last-child .cart-item-right .button-small {
bottom:0;
}
.cart-item--stock {
padding: 0 0 0 10px;
}
.cart-free-item .cart-item-image {
width: 80px;
margin-bottom: 0;
}
.cart-free-items-title {
padding: 10px 8px;
background-color: #51ac5c;
color: #fff;
font-size: 13px;
}
.cart-free-items-block {
margin: 0 0 15px;
}
.cart-free-item {
padding: 12px 20px;
border: 2px solid #e7e7e7;
border-top: 0;
}
.cart-free-item-inner {
display: flex;
}
.cart-free-item-inner .cart-overview--item-inner {
width: 100%;
}
.cart-free-item .cart-item-content {
padding: 5px 30px 0 15px;
}
.cart-free-item .cart-item-image a {
border: 1px solid #ededed;
display: inline-block;
}
.cart-free-item .cart-item-title a {
font-size: 16px;
}
.cart-free-item .cart-item-price {
font-size: 16px;
}
.cart-free-item .cart-item-unitprice {
color: #51ac5c;
white-space: nowrap;
}
.cart-free-item-right {
margin-left: auto;
text-align: right;
padding-right: 10px;
}
.cart-free-item .cart-item-variant,
.cart-free-item .cart-item-price {
display: block;
margin-bottom: 5px;
}
.cart-free-item .cart-item-variant {
font-size: 12px;
}
.cart-overview--item.cart-free-item-inner {
border: 0;
padding: 0;
margin-bottom: 0;
}
.collection-mode-remove {
border-top: 2px solid #e7e7e7;
border-bottom: 2px solid #e7e7e7;
max-height: 500px;
overflow-y: scroll;
}
.cart-free-items-margin .cart-free-item:last-child {
border-bottom: none;
}
/*
|--------------------------------------------------------------------------
| Basket > Datepicker
|--------------------------------------------------------------------------
*/
.ui-datepicker-inline {
margin: 30px auto 0 auto;
border-radius: 0;
border-color: #e7e7e7;
padding: 4px;
}
.ui-datepicker-title {
color: #e10e1e;
}
.ui-widget-header,
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
border-color: #e10e1e;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-datepicker-title {
color: #e10e1e;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: 1px solid #019cc2;
background-color: #019cc2;
font-weight: bold;
color: #fff;
}
.ui-datepicker td a {
text-align: center;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
background-color: #e10e1e;
width: 28px;height: 28px;
cursor: pointer;
top: 2px !important;
}
.ui-datepicker .ui-datepicker-prev {
left: 2px !important;
}
.ui-datepicker .ui-datepicker-next {
right: 2px !important;
}
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
position: absolute;
top: 50%;left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: url(/images/style/ptm/icon-chevron-left.png) no-repeat center center;
margin: 0;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border-color: #019cc2;
}
.ui-datepicker .ui-datepicker-next .ui-icon {
background-image: url(/images/style/ptm/icon-chevron-right.png);
}
/*
|--------------------------------------------------------------------------
| Basket > Incentives
|--------------------------------------------------------------------------
*/
.cart-side .free-gift--cart-segment {
border-bottom-width: 0px;
background: #393939;
margin-bottom: 10px;
padding: 0;
}
.cart-side .free-gift--cart-segment .cart--heading {
padding: 18px 23px 8px 23px;
}
.cart-side .free-gift--cart-segment .cart--heading::after {
counter-increment: none;
content: unset;
display: none;
}
.cart-side .free-gift--row ~ .cart--heading {
border-top: 2px solid #fff;
}
.cart-side .free-gift--row {
position: relative;
padding: 0 23px;
padding-bottom: 16px;
color: #ffffff;
-webkit-transition: .3s all ease-out;
transition: .3s all ease-out;
}
.cart-side .free-gift--row p {
margin: 0 0 8px 0;
}
.free-gift--cart-segment .cart--heading + .free-gift--row p:first-child {
margin-top: 12px;
}
.cart-side .free-gift--row a {
color: #fff;
text-decoration: underline;
}
.cart-side .free-gift--row a:hover {
color: #e10e1e;
}
.cart-side .free-gift--row--qualified {
/*padding-bottom: 0;*/
border-bottom-width: 0;
}
.cart-side .free-gift--row.free-gift--row--qualified .free-gift--item {
cursor: pointer;
}
.cart-side .free-gift--row.free-gift--row--qualified:nth-of-type(n+3),
.cart-side .free-gift--cart-segment .cart--heading + .free-gift--row {
margin-top: -16px;
}
.cart-side .free-gift--row--qualified:last-of-type {
padding-bottom: 20px;
}
.cart-side .free-gift--row--not-qualified {
border-top: 2px solid #e9e9e9;
padding-top: 16px;
}
.free-gift--cart-segment .cart--heading + .free-gift--row.free-gift--row--not-qualified {
border-top: 0;
padding-top: 2px;
}
.cart-side .free-gift--row:first-of-type {
padding-top: 0;
border-top-width: 0px;
margin-top: 0;
}
.cart-side .free-gift--row:last-of-type {
border-bottom-width: 0px;
margin-bottom: 0;
}
.cart-side .free-gift--row .qualified-title {
display: block;
margin-top: 12px;
color: #3fa663;
}
.cart-side .free-gift--row .qualified-subtitle {
margin: 8px 0;
}
.cart-side .free-gift--row .free-gift--qualifing-text {
cursor: pointer;
}
.cart-side .free-gift--bar-outer {
height: 7px;
width: 100%;
background: #ffffff;
}
.cart-side .free-gift--bar-inner {
height: 7px;
background: #3fa663;
}
.cart-side .free-gift--bar-end {
width: 24px;
height: 24px;
border-radius: 24px;
background: #ffffff;
}
.cart-side .free-gift--bar-end.free-gift--bar-qualified {
background: #3fa663;
}
.cart-side .free-gift--item {
margin-top: 10px;
border: 1px solid #e9e9e9;
background: #ffffff;
padding: 0;
-webkit-transition: .3s all ease-out;
transition: .3s all ease-out;
}
.cart-side .free-gift--item.incentive_disabled {
opacity: 0.8;
}
.cart-side .free-gift--item--inner {
position: relative;
background: #ffffff;
}
.cart-side .free-gift--item.free-gift--selected {
/*background: #77b98e;
background: #3fa663;*/
border-color: #3fa663;
}
.cart-side .free-gift--item.incentive_disabled .free-gift--item--inner::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;
}
.cart-side .free-gift--item .free-gift-image {
position: relative;
flex: 0 1;
float: none;
/*margin: 5px 0 5px 5px;*/
padding: 0;
cursor: pointer;
/*min-width: 105px;*/
min-width: 68px;
border: 0;
}
.cart-side .free-gift--item .free-gift-image img {
border: 1px solid #ededed;
}
.cart-side .free-gift--item-content {
position: relative;
/*padding: 8px 12px;*/
padding: 5px 8px 4px;
width: 215px;
}
.cart-side .free-gift--item.incentive_disabled .free-gift-image::before,
.cart-side .free-gift--item.incentive_disabled .free-gift--item-content::before,
.cart-side .free-gift--item.incentive_disabled .free-gift-quickview::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.5);
z-index: 10;
}
.cart-side .free-gift--item.incentive_disabled .free-gift--item-content::before,
.cart-side .free-gift--item.incentive_disabled .free-gift-quickview::before {
cursor: not-allowed;
}
.cart-side .free-gift--row--qualified .free-gift--item.free-gift--not-selected::before {
pointer-events: none;
background-color: rgba(255, 255, 255, 0.35);
}
.cart-side .free-gift--item.free-gift--not-selected .input.incentive_accept--checkbox {
z-index: 11;
}
.cart-side .free-gift--item .input {
margin: 0 0 10px;
}
.cart-side .free-gift--title {
color: #414141;
cursor: pointer;
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.3;
}
.cart-side .incentive_listing_options {
width: 100%;
flex: 1 0;
}
.cart-side .incentive_listing_options .listing-options-option .options_text {
background-color: #f1f1f1;
padding: 6px;
font-size: 13px;
width: auto;
}
.cart-side .incentive_listing_options .listing-options-option .label-none
.select2-basic--container.select2-selection--single .select2-selection__rendered {
padding: 6px;
font-size: 13px;
}
.cart-side .input.incentive_accept--checkbox {
margin: 2px 0 0;
}
.cart-side .incentive_disabled .input.incentive_accept--checkbox {
visibility: hidden;
}
.cart-side .input.incentive_accept--checkbox .checkbox-label {
line-height: 1.4;
}
/*.cart-side .free-gift--row--qualified .free-gift--item.free-gift--selected .free-gift--title,
.cart-side .free-gift--row--qualified .free-gift--item.free-gift--selected .checkbox-label {
color: #ffffff;
}*/
.cart-side .free-gift-quickview {
width: 20px;
cursor: pointer;
padding: 2px;
/*background: #f1f1f1;*/
position: relative;
}
.cart-side .free-gift-quickview svg path {
fill: #e10e1d;
}
.cart-side .free-gift--item.incentive_disabled .free-gift-quickview::before {
content: '';
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTggMTB2LTRjMC0zLjMxMy0yLjY4Ny02LTYtNnMtNiAyLjY4Ny02IDZ2NGgtM3YxNGgxOHYtMTRoLTN6bS0xMCAwdi00YzAtMi4yMDYgMS43OTQtNCA0LTRzNCAxLjc5NCA0IDR2NGgtOHoiLz48L3N2Zz4=");
background-repeat: no-repeat;
background-size: 80%;
background-position: center;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.cart-side .free-gift--item.free-gift--not-selected .free-gift-quickview::before {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%233fa663' d='M12 10v-4c0-3.313-2.687-6-6-6s-6 2.687-6 6v3h2v-3c0-2.206 1.794-4 4-4s4 1.794 4 4v4h-4v14h18v-14h-12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 80%;
background-position: center;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.cart-side .free-gift--item.free-gift--selected .free-gift-quickview {
background: #3fa663;
/*background: #77b98e;*/
}
.cart-side .free-gift--item.free-gift--selected .free-gift-quickview::before {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath fill-rule='evenodd' fill='%23ffffff' d='M5.52 10.38L2.33 7.1.58 8.91l4.2 4.3.77.8L17.42 1.82 15.63 0 5.53 10.38z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 80%;
background-position: center;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.cart-side .free-gift--item.incentive_disabled .free-gift-quickview svg {
display: none;
}
#incentive-view .overlay-basket--title {
margin: 10px 0;
font-size: 16px;
}
#incentive-view .qualifying-desc {
margin: 10px 0;
}
.modal--incentive .listing-overview--top-inner {
padding: 15px 0;
background-color: #fff;
}
.modal--incentive .modal--inner {
background-color: #ffffff;
}
.modal--incentive .modal--image {
float: unset;
}
.modal--incentive .listing-image {
border: 0;
}
.modal--incentive .modal-overview {
height: auto;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
}
.modal--incentive .listing--title {
font-size: 22px;
}
.modal--incentive .listing-details {
padding: 0;
}
.modal--incentive .listing-price {
font-size: 18px;
color: #000;
margin-bottom: 10px;
}
#incentive-check-view .overlay--inner {
padding: 0;
}
#incentive-check-view .overlay--inner {
transform: translate(-50%, -50%);
max-width: 620px;
}
#incentive-check-view .overlay--header {
display: flex;
padding: 0;
}
#incentive-check-view .overlay--header .overlay-warning-icon {
width: 27px;
height: 27px;
margin-right: 20px;
}
#incentive-check-view .overlay--header .overlay-warning-icon svg {
fill: #fff;
width: 100%;
}
#incentive-check-view .overlay--basket .overlay--header--text {
flex-direction: row;
padding: 17px 20px;
}
#incentive-check-view .overlay--header--text {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#incentive-check-view .overlay--header--text {
flex-wrap: wrap;
}
#incentive-check-view .overlay--basket-title {
flex: 1;
font-size: 14px;
color: #fff;
}
#incentive-check-view .overlay--basket-header {
background-color: #f1bf12;
}
/*
|--------------------------------------------------------------------------
| Brands
|--------------------------------------------------------------------------
*/
.brand-letters--grid {
margin: 0 -1px 0 0;
padding: 14px 0;
}
.brand-letter {
text-align: center;
width: 3.703703703703704%;
float: left;
padding: 0 1px 0 0;
}
.brand-letter.disabled {
opacity: 0.4;
}
.brand-letter.disabled .brand-letter--inner {
cursor: not-allowed;
}
.brand-letter.disabled .brand-letter--inner:hover {
border: 2px solid #e7e7e7;
color: #e10e1e;
background-color: #fff;
}
.brand-letter--inner {
display: block;
border: 2px solid #e7e7e7;
color: #e10e1e;
font-weight: 700;
font-size: 21px;
padding: 4px 0;
cursor: pointer;
}
.brand-letter--inner.sel,
.brand-letter--inner:hover {
background-color: #e10e1e;
color: #fff;
border: 2px solid rgba(0,0,0,0.2);
}
.brands-list--item {
text-align: center;
width: 16.6666666666666666666%;
float: left;
padding: 0 4px 4px 0;
}
.brands-list--letter {
display: none !important;
position: relative;
color: #ffffff;
font-weight: 700;
font-size: 60px;
}
.brands-list--letter .brands-list--inner {
background-color: #1e1e1e;
}
.brands-list--letter span {
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
bottom: 0;
left: 50%;
right: 0;
height: 60px;
line-height: 60px;
}
.brands-list--inner {
position: relative;
/* height: 0;
padding: 0 0 100% 0; */
}
.brands-list--image {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 34px;
background-size: 60%;
background-color: #fff;
}
.brands-list--image img {
display: none;
}
.brands-list--text {
/* position: absolute;
right: 0; bottom: 0; left: 0; */
background-color: #e7e7e7;
font-weight: 700;
font-size: 12px;
color: #e10e1e;
padding: 10px 0;
display: block;
width: 100%;
}
/*
|--------------------------------------------------------------------------
| Checkout
|--------------------------------------------------------------------------
*/
.checkout-header {
border-bottom: 1px solid #e7e7e7;
min-height: auto;
padding: 31px 0;
}
.brand-checkout {
width: 402px;
}
.brand-checkout img {
display: block;
width: 100%;
}
.checkout-header-tel {
font-size: 16px;
color: #131313;
}
.checkout-header-tel a {
font-weight: 600;
color: #131313;
}
.checkout {
position: relative;
overflow:hidden;
}
.checkout-main {
width: 60%;
padding: 45px 70px 0 0;
background-color: #fff;
float: left;
border-right: 1px solid #e7e7e7;
}
#checkout-container, #confirm-container {
max-width:1400px;
}
#checkout-container {
padding:0 100px 0 120px;
}
#confirm-container {
padding:0 100px 0 170px;
}
.payment-methods {
margin: 0 0 15px 0;
}
.checkout-segment {
padding: 0 0 15px 0;
}
.checkout-segment .select2-basic--container.select2-selection--single .select2-selection__rendered,
.checkout-segment .input input[type="text"],
.checkout-segment .input input[type="email"],
.checkout-segment .input input[type="search"],
.checkout-segment .input input[type="tel"],
.checkout-segment .input input[type="password"],
.checkout-segment .input input[type="number"],
.checkout-segment .input textarea,
.checkout-segment .input-file-dummy,
.checkout-segment .input-text-dummy {
background-color: #fff;
border: 1px solid #f1f1f1;
}
.input-grid .input .button {
line-height: 34px;
}
.checkout-title {
font-size: 20px;
font-family: 'Viga', sans-serif;
padding: 0 0 10px 0;
margin: 0 0 15px 0;
border-bottom: 1px solid #e7e7e7;
}
.checkout-subtitle {
font-size: 18px;
padding: 0 0 15px 0;
margin: 0;
}
.checkout-sublabel {
font-size: 14px;
margin: -5px 0 15px;
}
.checkout-breadcrumbs {
display:none;
}
.checkout-breadcrumb {
position: relative;
padding: 0 20px 0 0;
font-size: 16px;
color: #131313;
}
.checkout-breadcrumb:after {
position: absolute;
top: 50%;
right: 8px;
margin: -4px 0 0 0;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 4px;
border-color: transparent transparent transparent #131313;
}
.checkout-breadcrumb:last-child:after {
display: none;
}
.checkout-breadcrumb__green {
color: #51ac5c;
}
.checkout-breadcrumb__green:after {
border-color: transparent transparent transparent #51ac5c;
}
.checkout-breadcrumb__grey {
color: #666666;
}
.checkout-breadcrumb__grey:after {
border-color: transparent transparent transparent #666666;
}
.checkout-side {
width: 40%;
float: right;
position: relative;
z-index: 1;
}
.checkout-side:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
top: 0;
width: 300%;
background: #f6f6f6;
z-index: -1;
}
.checkout-action {
border-top: 1px solid #e7e7e7;
padding: 20px 0;
}
.return-to-basket {
background-color: #fff;
color: #131313;
font-size: 16px;
font-family: 'Viga', sans-serif;
text-transform: none;
padding: 9px 0 9px 20px;
position: relative;
}
.return-to-basket::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) rotate(90deg);
height: 18px;
width: 18px;
background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 128 128' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m64 88c-1.023 0-2.047-.391-2.828-1.172l-40-40c-1.563-1.563-1.563-4.094 0-5.656s4.094-1.563 5.656 0l37.172 37.172 37.172-37.172c1.563-1.563 4.094-1.563 5.656 0s1.563 4.094 0 5.656l-40 40c-.781.781-1.805 1.172-2.828 1.172z'%3E%3C/path%3E%3C/svg%3E");
background-position: center;
background-size: cover;
}
.checkout-addressbook .input {
display: none;
}
.checkout-addressbook-button {
color: #e10e1e;
font-size: 13px;
margin-bottom: 15px;
cursor: pointer;
}
.checkout-segment .checkbox-input {
margin-top: 10px;
}
/*
|--------------------------------------------------------------------------
| Checkout > Delivery Address
|--------------------------------------------------------------------------
*/
.delivery-address {
display: block;
width: 100%;
margin: 0 0 4px 0;
border: 2px solid #e7e7e7;
cursor: pointer;
}
.delivery-address:hover {
background-color: #019dc3;
}
.delivery-address.sel {
border: 2px solid #019dc3;
}
.delivery-address:hover .delivery-address--title,
.delivery-address:hover .delivery-address--location {
color: #fff;
}
.delivery-address.sel .delivery-address--checkbox:after {
background-color: #131313;
border: 4px solid #fff;
transition: background 300ms ease;
}
.delivery-address.sel .delivery-address--title,
.delivery-address.sel .delivery-address--location {
}
.delivery-address--checkbox {
float: left;
position: relative;
height: 46px;
width: 46px;
}
.delivery-address--checkbox:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
height: 20px;
width: 20px;
-webkit-transform: translate(-10px, -10px);
transform: translate(-10px, -10px);
background-color: #e7e7e7;
border-radius: 20px;
}
.delivery-address--content {
padding: 7px;
overflow: hidden;
}
.delivery-address--title {
display: block;
font-weight: 700;
font-size: 15px;
color: #131313;
}
.delivery-address--location {
display: block;
font-size: 12px;
color: #666666;
}
.button-locate {
background-image: url(/images/style/ptm/icon-zoom-white.png);
background-size: 20px 20px;
background-repeat: no-repeat;
background-position:center center;
width: 42px;
}
.button-locate.loading {
background-image: url(/images/style/ptm/gps.svg);
}
.no-js .button-locate,
.no-js #postcode_lookup_results_container_del {
display: none;
}
.no-js .billing-address-form {
display: block !important;
}
/* Buttons displaying a spinner */
.button-loading {
position: relative;
cursor: wait;
}
.button-loading,
.button-loading span {
color: transparent !important;
-webkit-transition: 0;
-moz-transition: 0;
transition: 0;
}
.button-loading svg {
display: none;
}
.button-loading::before {
content: "";
position: absolute;
top: calc(50% - 8px);
left: calc(50% - 8px);
border: 2px solid #fff;
border-left-color: #dcdcdc;
border-radius: 50%;
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
height: 16px;
width: 16px;
}
/*
|--------------------------------------------------------------------------
| Basket > Sidebar
|--------------------------------------------------------------------------
*/
.cart-overview.fixed {
position: fixed;
top: 0;
}
.cart-overview.absolute {
position: absolute;
bottom: 0;
top: auto;
}
.checkout-side {
padding: 45px 0 0 60px;
}
.cart-overview--item {
padding: 0 0 10px 0;
margin: 0 0 10px 0;
font-weight: 700;
color: #131313;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.cart-overview--item-image {
position: relative;
max-width: 70px;
float: left;
}
.cart-overview--item-image__subscription {
display: none;
position: absolute;
height: 13px;
width: 13px;
left: 10px;
top: 10px;
background: url(/images/style/ptm/icon-calendar-blue.png) no-repeat center center;
background-size: 13px 13px;
}
.cart-overview--item-inner {
padding: 0 14px 14px 14px;
overflow: hidden;
}
.checkout-side-invoice .cart-overview--item-inner {
padding: 0;
}
.cart-overview--item-content {
overflow: hidden;
padding: 0 20px 0 0;
}
.cart-overview--item-info {
float: right;
text-align: right;
}
.cart-overview--item-qty,
.cart-overview--item-options {
color: #666;
font-size: 11px;
}
.cart-overview--item-options i {
font-style: normal;
}
.cart-overview--item-options i:last-child {
display: none;
}
.cart-overview--item-option__blue {
color: #019dc3;
}
.cart-overview--item-option__blue span {
padding: 0 4px 0;
}
.cart-overview--item-qty {
display: block;
}
.cart-promo {
padding: 10px 0 20px 0;
margin: 0 0 20px 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.cart-promo--button {
position: relative;
display: block;
color: #b12525;
background-color: #fff;
text-transform: uppercase;
font-weight: 700;
padding: 16px;
cursor: pointer;
}
.cart-promo--button span {
position: relative;
padding: 0 0 0 26px;
}
.cart-promo--button span:after {
content: '';
position: absolute;
left: 0;
height: 16px;
width: 16px;
background: url(/images/style/ptm/icon-tag.png) no-repeat center center;
transform-origin: top right;
}
@keyframes tagWiggle {
0% { transform: rotate(0); }
25% { transform: rotate(15deg); }
50% { transform: rotate(-15deg); }
75% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}
.cart-promo--button:hover span:after {
-webkit-animation: tagWiggle 1s;
-moz-animation: tagWiggle 1s;
-o-animation: tagWiggle 1s;
animation: tagWiggle 1s;
background: url(/images/style/ptm/icon-tag-white.png) no-repeat center center;
}
.cart-promo--button:hover {
background-color: #b12525;
color: #fff;
}
.cart-promo--button:active {
top: 1px;
}
.cart-promo--form {
/* padding: 10px 15px 0 15px; */
}
.cart-side--option__promo + .content {
padding-top: 10px;
}
.cart-overview-totals {
background: none;
}
.cart-overview--item-gift {
padding: 10px 0 0 0;
}
.cart-overview--item-checkbox label {
display: inline-block;
font-size: 11px;
color: #666666;
}
.checkout-login--inner {
padding:30px 0;
border-bottom: 1px solid #e7e7e7;
}
.cart-overview--item-option {
display: block;
}
.checkout-login--btn {
padding-bottom: 10px;
transition: opacity 300ms ease;
color: #e10e1e;
}
#checkout-hide-login-form {
font-size: 12px;
opacity: 1;
transition: color 300ms ease;
padding-top: 12px;
color: #e10e1e;
font-family: 'Viga', sans-serif;
}
#checkout-hide-login-form:hover {
color: #444;
}
/*
|--------------------------------------------------------------------------
| Confirm v2
|--------------------------------------------------------------------------
*/
.payment-method {
}
.payment-method--button {
position: relative;
padding: 16px 20px 16px 50px;
font-weight: 700;
font-size: 18px;
color: #131313;
border: 1px solid #e7e7e7;
margin-top: -1px;
cursor: pointer;
}
.payment-method--title {
padding: 3px 0;
font-family: 'Viga', sans-serif;
}
.payment-method--button:before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20px;
width: 18px;
height: 18px;
background-color: #e7e7e7;
border-radius: 18px;
}
.payment-method.open .payment-method--button:after {
content: '';
position: absolute;
top: 26px;
left: 24px;
width: 10px;
height: 10px;
background-color: #131313;
border-radius: 18px;
}
.payment-method--content {
display: none;
}
.payment-method__card .payment-method--title {
/* background: url(/images/style/ptm/card-logos.png) no-repeat center right; */
}
.payment-method__paypal .payment-method--title {
background: url(/images/style/ptm/paypal-logo-color.png) no-repeat center right;
}
.payment-method__paypal-credit .payment-method--title,
.payment-method__paypal-paylater .payment-method--title {
background: url(/images/style/ptm/paypal-credit.png) no-repeat center right;
}
.payment-method__klarna .payment-method--title {
background: url(/images/style/ptm/klarna.png) no-repeat center right;
background-size: auto 100%;
}
.payment-method--content {
background-color: #F1F1F1;
padding: 20px;
text-align: center;
font-size: 16px;
}
.payment-method--content .input:last-child {
margin-bottom: 0;
}
#terms-checkbox > .checkbox,
#confirm-ukims-checkbox > .checkbox {
margin-right: 10px;
flex-shrink: 0;
}
#terms-checkbox,
#confirm-ukims-checkbox {
margin-bottom: 10px;
}
#form_stripe {
width:100%;
max-width: 400px;
margin: 0 auto;
text-align:center;
padding: 50px 0;
}
#form_stripe #card-errors {
text-align: left;
margin-bottom: 15px;
}
.button-stripe {
width: 100%;
margin-top: 10px;
}
.button-stripe:disabled {
opacity: .5;
}
.button-stripe:disabled,
.button-stripe:disabled:hover {
background-color: #e10e1e;
}
.button-stripe .spinner {
font-size: 2px;
margin-top: -2px;
margin-bottom: -2px;
display: none;
}
.button-stripe:disabled .spinner {
display: block;
}
.button-stripe span {
line-height: 16px;
}
.button-stripe:disabled span {
display: none;
}
.stripe-cancel {
text-align: left;
padding: 25px 0 0;
margin-bottom: -8px;
}
.stripe-cancel a {
color: #000;
padding-top: 0;
padding-bottom: 0;
opacity: 0.5;
}
.stripe-cancel a:hover {
opacity: 0.8;
}
#braintree-paypal-loggedin,
#braintree-paypal-credit-loggedin,
#braintree-card-stored,
#ppchkout-paypal-loggedin,
#ppchkout-paypal-paylater-loggedin,
#ppchkout-paypal-credit-loggedin {
display: none;
max-width: 500px;
overflow: hidden;
padding: 16px;
margin: 0 auto;
border-top: 1px solid #d1d4d6;
border-bottom: 1px solid #d1d4d6;
text-align: left;
}
.listing-pp-messaging {
padding-top: 30px;
}
.basket-pp-messaging {
padding-bottom: 10px;
}
.bb-pp-container,
.bb-card-container {
display: table;
width: 100%;
}
.bb-pp-container > div,
.bb-card-container > div {
display: table-cell;
vertical-align: middle;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.bt-pp-name,
.bt-pp-cancel,
.bt-card-cancel {
width: 1px;
}
.bt-pp-name {
padding-left: 36px;
background-image: url("/images/style/ptm/paypal-small.svg"), none;
background-size: 13px 15px;
background-position: 4px center;
background-repeat: no-repeat;
color: #283036;
font-size: 13px;
font-weight: 800;
}
.bt-pp-email,
.bt-card-details {
padding: 0 10px;
color: #6e787f;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 0;
}
.bt-card-details {
padding-left: 0;
}
.bt-pp-cancel button,
.bt-pp-cancel a,
.bt-card-cancel a {
float: right;
color: #3d95ce;
font-size: 11px;
line-height: 20px;
padding: 0px;
margin: 0;
border: 0px;
cursor: pointer;
text-decoration: underline;
background-color: transparent;
}
.bt-pp-cancel button:hover,
.bt-pp-cancel a:hover,
.bt-card-cancel a:hover {
color: #215b83;
}
.braintree-change-method {
padding: 20px 0 0;
font-size: 11px;
color: #666;
}
.braintree-change-method a {
color: #666;
padding-bottom: 1px;
}
.braintree-change-method a:hover {
color: #333;
}
/*
|--------------------------------------------------------------------------
| Checkout > Success > Order Summary
|--------------------------------------------------------------------------
*/
.order-summary {
border: 2px solid #e7e7e7;
}
.order-summary .cart-overview--item {
padding: 0;
margin: 0;
}
.order-summary .cart-overview--item-gift {
background-color: #e7e7e7;
padding: 0;
}
.order-summary .cart-overview--item-checkbox {
padding: 5px 10px;
background: #e7e7e7;
}
.order-summary .cart-overview--item {
padding: 10px;
}
.order-summary .cart-overview--item:last-child {
border-bottom: none;
}
.order-delivery {
padding: 18px 24px;
font-weight: 700;
border-bottom: 2px solid #e7e7e7;
}
.order-delivery--title {
font-size: 18px;
color: #666;
display: block;
}
.order-delivery--address {
font-size: 12px;
color: #abadae;
display: block;
}
.order-details {
padding: 18px 24px;
font-weight: 700;
color: #666;
border-top: 2px solid #e7e7e7;
}
.order-detail {
padding: 4px 0;
}
.order-detail--title {
color: #abadae;
text-transform: uppercase;
font-size: 12px;
}
.order-detail__green {
color: #51ac5c;
}
.order-detail__red {
color: #e10e1e;
}
/*
|--------------------------------------------------------------------------
| Checkout > Stages
|--------------------------------------------------------------------------
*/
.checkout-stages {
position: absolute;
left: 0;
top: 0;
bottom: 0;
font-weight: 700;
}
.checkout-stage {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50px;
color: #777;
background:#fff;
border-right:2px solid #e7e7e7;
font-family: 'Viga', sans-serif;
}
.checkout-stage span {
display: block;
padding: 0 20px 0 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
/* font-weight: 700; */
height: 50px;
width: 300px;
text-transform: uppercase;
position: absolute;
left: -126px;
top: 126px;
line-height: 50px;
text-align: right;
}
.checkout-stage.dark,
.checkout-stage.darker,
.checkout-stage.darkest,
.checkout-stage.failed {
color: #fff;
}
.checkout-stage.dark {
background: #51ac5c;
border-right:2px solid #51ac5c;
}
.checkout-stage.darker {
background: #4a9a53;
border-right:2px solid #4a9a53;
}
.checkout-stage.darkest {
background: #468e4e;
border-right:2px solid #468e4e;
}
.checkout-stage.failed {
background: #e10e1e;
border-right:2px solid #e10e1e;
}
.checkout-stage:nth-child(2) {
left: 50px;
}
.checkout-stage:nth-child(3) {
left: 100px;
}
.checkout-stage:nth-child(4) {
left: 150px;
}
.account-overlay-form {
padding: 20px 0;
}
.account-overlay-form .button {
margin-top: 12px;
}
/*
|--------------------------------------------------------------------------
| Account > Forms
|--------------------------------------------------------------------------
*/
.account-box.full {
width: 100%;
}
.account-box-centered {
max-width:580px;
margin:0 auto;
padding:0;
}
.account-box h2 {
font-size: 18px;
}
.account-box h3, #account-box-trade h3 {
font-size: 16px;
}
.account-box.fl {
padding-right:10px;
}
.account-box.fr {
padding-left:10px;
}
.newacc-intro {
text-align: center;
margin: 0 0 30px;
}
.newacc-title {
margin: 20px 0 10px 0;
font-size: 30px;
}
.form-note {
display: block;
padding: 8px 0 0;
font-size: 11px;
color: #7a7a7a;
}
.account a.form-note:hover {
color: #7a7a7a;
text-decoration: underline;
}
.account-box .uppercase {
max-width: 150px;
}
/*
|--------------------------------------------------------------------------
| Account > Wishlist
|--------------------------------------------------------------------------
*/
.select2-account .select2-results {
border: 1px solid #019dc3;
}
.select2-options-dropdown {
border: 2px solid #019dc3;
}
.select2-account:before {
display: none;
}
.select2-container--open .select2-dropdown {
border: 1px solid #f1f1f1;
}
.wishlist {
border: 1px solid #131313;
margin: 0 0 4px;
padding: 20px;
}
.wishlist .dbl {
table-layout: auto;
}
.wishlist .dblc:first-child {
vertical-align: top;
width: 100%;
}
.wishlist .dblc:nth-child(2) {
vertical-align: middle;
white-space: nowrap;
}
.wishlist-title a {
text-transform: none;
}
.wishlist .wishlist-title a:hover {
color: #e10e1e;
text-decoration: underline;
}
.wishlist-desc {
font-size: 12px;
}
.wishlist-desc {
font-size: 12px;
color: #fff;
}
.wishlist-items,
.wishlist-del {
padding-left: 10px;
display: inline-block;
line-height: 20px;
}
.wishlist-del,
.wishlist-prod-del-button span {
cursor:pointer;
color: #e10e1e;
font-weight: 700;
}
.wishlist-del:hover,
.wishlist-prod-del-button span:hover {
color: #019cc2;
}
.wishlist-del {
padding-left: 10px;
}
.wishlist-prod-del-button span {
float: right;
}
.wishlist-items {
font-size: 11px;
text-transform: uppercase;
}
.wishlist-top {
width: 100%;
table-layout: auto;
margin-bottom: 40px;
}
.wishlist-top .wishlist-top-left h1 {
margin: 0; padding: 0;
float: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wishlist-top-left {
max-width: 0;
}
.wishlist-top-left,
.wishlist-top-right {
vertical-align: middle;
}
.wishlist-top-right {
white-space: nowrap;
width: 1px;
}
.wishlists p {
margin-bottom: 30px;
}
.account-wishlist .message-error {
margin-bottom: 0
}
/* .account a:not(.button):hover {
color: #131313;
} */
.wishlist-edit,
.wishlist-return {
display:inline-block;
color:#e10e1e;
font-size:11px;
font-weight: 700;
text-transform:uppercase;
cursor:pointer;
margin-left:10px;
}
.wishlist-edit span:hover,
.wishlist-return a:hover {
color: #e10e1e;
text-decoration: underline;
}
.address-blocks--grid {
margin: 0 -10px 0 0;
}
.wishlist-stock {
font-size: 11px;
text-transform: uppercase;
font-weight: 700;
color: #131313;
padding-top: 8px;
display: block;
}
.wishlist-stock img {
width: 15px;
}
.cart_customfield {
font-size: 12px;
font-weight: 700;
color: #666666;
}
.create-wishlist {
float: right;
}
.wishlist-prod td {
padding: 20px;
background: #fff;
border-bottom: 4px solid #131313;
}
.wishlist-prod .wishlist-prod-image {
padding-right: 0;
width: 100px;
}
.wishlist-prod-image a,
.wishlist-prod-image img {
display: block;
}
.wishlist-prod-image img {
border: 1px solid #e9e9e9;
}
.wishlist-prod a {
font-weight: 600;
font-size: 16px;
color: #e10e1e;
}
.wishlist-prod a:hover {
text-decoration: underline;
color: #e10e1e;
}
.wishlist-prod-move-button {
width: 1px;
}
.wishlist-prod-move-button span {
cursor: pointer;
color: #e10e1e;
}
.wishlist-prod-move-button span:hover {
text-decoration: underline;
}
.wishlist-prod .wishlist-prod-add-button {
width: 1px;
padding-left: 0;
padding-right: 0;
}
.wishlist-prod-add-button button {
/*font-family: 'Poppins', sans-serif;*/
letter-spacing: -0.025em;
line-height: 1;
white-space: nowrap;
}
.wishlist-prod-del-button {
width: 1px;
}
.wishlist-choose-container {
max-height: 300px;
overflow-y: auto;
}
.wishlist-choose {
background-color: #e10e1e;
margin: 4px 0;
padding: 15px;
cursor: pointer;
line-height: 1.3;
color: #fff;
-webkit-transition: .3s all ease-out;
transition: .3s all ease-out;
}
.wishlist-choose:hover {
background-color: #019cc2;
}
.wishlist-choose:first-child {
margin-top: 0;
}
.wishlist-choose:last-child {
margin-bottom: 0;
}
.wishlist-choose-title {
font-size: 15px;
}
.wishlist-choose-desc {
font-size: 12px;
opacity: .5;
}
/*
|--------------------------------------------------------------------------
| Offer Overlay
|--------------------------------------------------------------------------
*/
.offer-overlay {
position: fixed;
top: 0;right: 0;bottom: 0;left: 0;
z-index: 999;
}
.offer-overlay--bg {
position: absolute;
top: 0;right: 0;bottom: 0;left: 0;
background-color: rgba(0, 0, 0, 0.6);
}
.offer-overlay--block {
position: absolute;
top: 50%;left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 620px;
width: 95%;
border: 10px solid #fff;
border-radius: 2px;
z-index: 1;
}
.offer-overlay--upper {
background-color: #e10e1e;
padding: 60px 50px;
position: relative;
z-index: 1;
}
.offer-overlay--action {
display: block;
border-top: 10px solid #fff;
background-color: #5e9732;
padding: 10px;
text-align: center;
font-size: 21px;
color: #fff;
cursor: pointer;
}
.offer-overlay--title {
display: block;
text-align: center;
font-size: 48px;
line-height: 50px;
color: #fff;
margin-bottom: 25px;
}
.offer-overlay--sub {
display: block;
font-size: 17px;
color: #fffcd9;
margin-bottom: 30px;
text-align: center;
}
.no-js .offer-overlay {
display: none;
}
.overlay-offer--input {
width: calc(100% - 98px);height: 50px;
border: 1px solid #e6e6e6;
padding: 0 12px;
}
.offer-overlay--upper .message {
position: absolute;
top: 20px;right: 50px;left: 50px;
}
/*
|--------------------------------------------------------------------------
| Account > Order History
|--------------------------------------------------------------------------
*/
.order-history {
width: 100%;
margin: 0 0 30px;
background-color: #fff;
}
.order-history th {
background: #e10e1e;
color: #ffffff;
padding: 15px;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
.order-history td {
padding: 15px;
color: #444;
}
.order-history tr:nth-child(even) {
background-color: #e7e7e7;
}
.order-history .button {
float: right;
}
/*
|--------------------------------------------------------------------------
| Account > Order Info
|--------------------------------------------------------------------------
*/
.order-address {
margin: 0 0 30px;
overflow: hidden;
}
.oa-del,
.oa-bil {
width: 50%;
float: left;
}
.oa-del {
padding: 0 20px 0 0;
}
.order-sub {
text-align: right;
}
.order-total {
float: right;
}
/*
|--------------------------------------------------------------------------
| Account > Order Tracking
|--------------------------------------------------------------------------
*/
.tracked-order {
width: 100%;
max-width: 800px;
margin: 30px 0;
}
.tracked-qty {
width: 95px;
text-align: center;
}
.tracked-date {
text-align: right;
}
.track-again {
margin: 30px auto 0;
}
/*
|--------------------------------------------------------------------------
| Sitemap
|--------------------------------------------------------------------------
*/
.sitemap-page {
font-size: 11px;
}
.sitemap-left,
.sitemap-right {
/* width: 50%;
max-width: 450px;
padding: 0 15px;
float: left; */
}
.sitemap-right {
padding-right: 0;
}
.shop-sitemap .sitemap-cat {
margin: 15px 0 0;
}
.shop-sitemap h2 {
margin-top: 30px;
}
/*
|--------------------------------------------------------------------------
| Account v2
|--------------------------------------------------------------------------
*/
.account {}
.account-subtitle {
font-size: 18px;
padding: 0 0 20px;
color: #131313;
}
.account-sidebar--mobile-title {
display: none;
position: relative;
padding: 20px;
font-size: 16px;
color: #131313;
}
.account-sidebar--mobile-title svg {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 16px;
transform-origin: center;
}
.account-sidebar--mobile-title svg path {
fill: #131313;
}
.account-sidebar--mobile-title.open svg {
transform: rotate(-180deg) translateY(4px);
}
.account-sidebar {
width: 280px;
background-color: #e7e7e7;
float: left;
margin: 0 20px 0 0;
}
.account-sidebar nav {
padding: 20px 24px;
}
.account-sidebar-btm.mobile {
display: none;
}
.loyalty-points-dblc {
display: none;
}
.account-sidebar nav li {
padding: 5px 0;
}
.account-sidebar a {
font-size: 16px;
color: #131313;
border-bottom: 1px solid transparent;
}
.account-sidebar a:hover,
.account-sidebar .sel {
color: #e10e1e;
}
.account-sidebar .sel {
border-bottom: 1px solid #e10e1e;
}
.account-sidebar-btm {
border-top: 1px solid #777777;
padding: 18px 24px;
}
.account-sidebar-btm div {
font-size: 14px;
padding: 0 0 4px;
color: #131313;
}
.account-sidebar-btm a {
text-transform: uppercase;
font-size: 11px;
}
.account-main {
background-color: #e7e7e7;
overflow: hidden;
padding: 40px;
color: #131313;
line-height: 1.3;
}
.account-main h1 {
font-size: 24px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #131313;
padding: 0 0 20px;
margin: 0;
float: left;
}
.account-main-filter {
float: right;
height: 40px;
color: #131313;
padding: 0 20px;
background-color: transparent;
border: 1px solid #777777;
}
.account-main .input input:focus ~ label {
color: #131313;
}
.account-main .input input:focus {
border-color: #e7e7e7 !important;
}
.account-panels {
padding: 0 0 20px;
}
.account-panels--grid {
margin: 0 -10px 0 0;
}
.account-panel {
width: 33.3333333333%;
float: left;
padding: 0 10px 10px 0;
}
.account-panel--inner {
display: block;
border: 1px solid #777777;
padding: 12px 15px;
color: #131313;
}
.account-panel--inner:hover {
text-decoration: none;
}
.account-panel--label {
font-size: 12px;
color: #131313;
padding: 0 0 5px;
text-transform: uppercase;
display: block;
}
.account-panel:hover .account-panel--svg {
background: #060606;
}
.account-panel--svg {
width: 20px;
height: 20px;
float: right;
text-align: center;
background-color: #131313;
border-radius: 10px;
line-height: 22px;
transition: .3s ease;
position: relative;
}
.account-panel--svg svg {
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
}
.account-panel--svg svg path {
fill: #fff;
}
.account-panels--wide .account-panel {
width: 25%;
}
.account-table {
width: 100%;
border: 1px solid #777777;
table-layout: auto;
margin: 0 0 30px;
}
.account-table a:hover {
color: #131313;
}
.account-table .button-xsmall,
.account-table .button-xsmall:hover {
color: #fff;
text-decoration: none;
}
.account-table.no-margin {
margin: 0;
}
.account-table .dblc {
padding: 12px 15px;
color: #131313;
font-size: 12px;
border-bottom: 1px solid #777777;
}
.account-table .dblr:last-child .dblc {
border-bottom: none;
}
.account-table .dblc.small {
width: 1px;
}
.account-table .dblc.full {
width: 100%;
}
.account-table .dblr:first-child .dblc {
color: #131313;
text-transform: uppercase;
white-space: nowrap;
}
.account-table--label {
color: #131313;
font-size: 12px;
text-transform: uppercase;
}
.account-table--value {
color: #131313;
line-height: 15px;
padding: 4px 0 0;
font-size: 12px;
}
.account-invoices h1 {
margin: 0;
}
.account-invoices .message-error {
margin: 0;
}
.account-invoices-outstanding {
padding-bottom: 10px;
}
.account-invoices-outstanding .account-table-invoices {
margin: 15px 0;
}
.account-invoices-outstanding .pay-btn {
margin-bottom: 10px;
}
.account-table-invoices .dblc:first-child {
padding-right: 0;
vertical-align: middle;
}
.account-table-invoices [type="checkbox"] {
display: block;
}
.account-latest-orders {
border: 1px solid #777777;
font-size: 11px;
color: #e10e1e;
text-align: center;
padding: 12px;
border-top: none;
}
.order-totals {
border: 1px solid #777777;
padding: 15px 24px;
text-align: right;
font-size: 13px;
color: #131313;
text-transform: uppercase;
margin: 0 0 30px;
border-top: 0;
}
.order-totals .dbl {
width: 140px;
float: right;
}
.order-totals .dblc {
padding: 5px 0;
}
.order-totals .dblc:first-child {
text-align: left;
}
.order-totals .dblr:last-child {
color: #131313;
font-weight: 600;
}
.order-totals-container {
border: 1px solid #777777;
border-top: 0;
margin-bottom: 30px;
}
.order-totals-container .order-return {
padding: 20px;
}
.order-totals-container .order-totals {
flex: 1;
border: 0;
margin-bottom: 0;
}
.order-panels {
padding: 0 0 30px;
}
.order-buttons {
margin: 30px 0 0;
}
.order-panels--grid {
margin: 0 -10px 0 0;
}
.order-panels .message-error {
margin: -10px 0 30px;
}
.order-panel {
width: 33.3333333%;
padding: 0 10px 0 0;
font-size: 12px;
float: left;
}
.order-panel--inner {
border: 1px solid #777777;
padding: 12px 15px;
}
.order-panel--data {
padding: 0 0 10px;
}
.order-panel--data:last-child {
padding: 0;
}
.order-btns {
margin: 30px 0 0 0;
}
.loyalty-table-cont {
overflow: hidden;
}
.loyalty-table {
table-layout: auto;
margin-bottom: 20px;
border: 1px solid #777777;
}
.loyalty-table .dblc {
padding: 12px 15px;
font-size: 12px;
}
.loyalty-table .dblc:not(:last-child) {
border-right: 1px solid #777777;
}
.loyalty-table .full {
width: 100%;
}
.loyalty-table .small {
white-space: nowrap;
}
.loyalty-point--cont {
width: 160px;
float: left;
text-align: center;
}
.loyalty-point {
margin: 16px auto 0;
border: 1px solid #777777;
border-radius: 30px;
padding: 10px 15px;
color: #131313;
font-size: 12px;
display: inline-block;
background-color: #e7e7e7;
line-height: normal;
}
.top-loyalty {
position: relative;
padding: 0 0 40px;
z-index: 1;
}
.loyalty {
position: relative;
z-index: 1;
}
.top-loyalty--text {
border: 1px solid #777777;
overflow: hidden;
font-size: 13px;
padding: 12px 15px;
color: #131313;
}
.top-loyalty--text span {
color: #131313;
}
.top-loyalty:before,
.loyalty:before {
content: '';
z-index: -1;
width: 1px;
position: absolute;
left: 80px;
top: 0; bottom: 0;
background-color: #777777;
}
.top-loyalty .loyalty-point {
font-size: 14px;
color: #131313;
margin: 0;
}
.form-forgot .button {
margin-top: 12px;
}
.account-login--checkbox-cont span {
display: block;
font-size: 11px;
padding: 0 0 0 26px;
}
.account-login--checkbox-cont .input{
display:block;
margin-top:10px;
}
.account-details--title-text {
font-size: 12px;
color: #131313;
padding: 0 0 20px;
clear: both;
}
.account-details--block {
border: 1px solid #777777;
padding: 12px 15px;
margin: 0 0 10px;
}
.account-details--block .dblc {
padding: 5px;
}
.account-details--block-action {
padding: 5px 0 5px 0;
}
.account-login .container {
max-width: 620px;
}
.account-login--block {
padding: 30px 40px 35px;
background: #e7e7e7;
margin-bottom: 30px;
color: #131313;
}
.account-login--block:last-child {
margin-bottom: 0;
}
.account-login--block h3 {
font-size: 24px;
font-weight: normal;
padding-bottom: 8px;
color: #131313;
}
.account-login--block p {
font-size: 13px;
margin-bottom: 20px;
}
.account-login--section {
margin-bottom: 20px;
}
.account-login--block .form-note {
padding: 8px 0;
}
.account-login--buttons {
margin-top: 10px;
}
.account-login--buttons .form-note {
text-transform: uppercase;
}
.account-login--trade {
margin: 15px 0 -2px;
}
.account-comms--preferences-subtitle {
margin-bottom: 8px;
}
.account-comms--preferences {
padding: 20px;
}
.account-comms--preferences .input-grid {
padding-left: 8px;
}
.account-comms--preferences-inner {
padding: 0 0 10px 10px;
}
.quote-side,
.cart-side-quote {
width: 50%;
float: right;
}
.quote-side .cart-segment {
margin-bottom: 20px;
border: 1px solid #131313;
background: none;
}
.quote-side .cart--heading {
color: #fff;
}
.quote-side .cart-segment {
margin-bottom: 0;
}
.quote-side .cart-segment + .cart-totals {
border-top: 0;
}
.quote-side .cart-totals {
color: #131313;
}
.quote-side .cart-total {
color: #fff;
}
.payments-subtitle {
font-size: 18px;
margin: 20px 0 10px;
color: #2d2d2d;
}
/*
|--------------------------------------------------------------------------
| Account v2 > Overlays
|--------------------------------------------------------------------------
*/
.modal-account .modal--inner {
max-width: 476px;
}
.account-modal {
/* background-color: #131313; */
background-color: #fff;
padding: 30px;
}
.account-modal .checkbox-label {
/* color: #fff; */
}
.account-modal .input {
margin: 0 0 4px;
}
.account-modal--title {
font-size: 21px;
color: #131313;
padding: 0 0 12px;
}
.account-modal--action {
text-align: right;
padding: 16px 0 0 0;
}
.account-modal--action .button {
/* font-size: 14px; */
}
.address-block--grid {
margin: 0 -10px 0 0;
}
.address-block,
.address-block--add {
float: left;
padding: 0 10px 10px 0;
color: #131313;
}
.address-block--title {
font-size: 11px;
color: #131313;
padding: 0 0 4px;
}
.address-block--inner {
border: 1px solid #777777;
padding: 12px 15px;
}
.address-block__primary .address-block--inner {
border-color: #131313;
}
.address-block--address {
font-size: 12px;
}
.address-block--action {
padding: 20px 0 0 0;
}
.address-block--action a,
.address-block--action button,
.address-block--action {
font-size: 10px;
color: #131313;
}
.address-block--action button {
background: 0;
font-family: inherit;
text-align: left;
}
.address-block--action button:hover {
text-decoration: underline;
}
.account-modal--checkboxes {
padding: 14px 0 0 0;
}
.account-modal--checkboxes-title {
font-size: 11px;
color: #131313;
text-transform: uppercase;
padding: 0 0 4px;
}
.address-block--add-inner {
position: relative;
border: 1px solid #777777;
text-align: center;
height: 100px;
cursor: pointer;
transition: all .3s ease;
}
.address-block--add-wrap {
position: absolute;
top: 50%;
left: 0; right: 0;
transform: translateY(-50%);
}
.address-block--add-wrap,
.address-block--add-wrap svg path {
transition: .3s ease;
}
.address-block--add-title {
font-size: 14px;
color: #131313;
transition: all .3s ease;
}
.address-block--add-wrap svg path {
fill: #131313;
}
.address-block--add-inner:hover {
border-color: #e10e1e;
}
.address-block--add-inner:hover .address-block--add-title {
color: #e10e1e;
}
.address-block--add-inner:hover svg path {
fill: #e10e1e;
}
.no-margin {
margin: 0;
}
.mobile-cats {
display: none;
padding: 0 0 20px;
}
.mobile-cats--title {
position: relative;
font-size: 24px;
padding: 10px 16px;
background-color: #131313;
margin: 0 0 10px;
}
.mobile-cats--title svg {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 16px;
transform-origin: center;
}
.mobile-cats a {
padding: 10px;
color: #fff;
}
.mobile-cats a.sel {
color: #e10e1e;
}
.mobile-cats--cats {
display: none;
}
.mobile-cats--title.open {
color: #e10e1e;
}
.mobile-cats--title.open svg {
transform: rotate(-180deg);
}
.mobile-cats--title.open ~ .mobile-cats--cats {
display: block;
}
/*
|--------------------------------------------------------------------------
| Account v2 > Vouchers
|--------------------------------------------------------------------------
*/
.button.voucher_remove {
border-radius: 0;
padding: 12px 12px;
visibility: middle;
background-image: url(/images/style/ptm/cross-white.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 12px 12px;
background-color: #131313;
}
.button.voucher_remove:hover {
background-color: #2f2f2f;
}
.voucher.dblr .dblc {
vertical-align: middle;
}
.voucher.dblr .dblc:last-child {
text-align: right;
}
.vouchers-wrapper {
padding-top: 20px;
}
.voucher_add {
height: 50px;
}
.input #voucher_add {
right: 4px;
}
.checkout-title.no_border {
border: none;
}
.account-box--voucher .account-subtitle {
padding: 0 0 10px;
}
.account-box--voucher {
border: 1px solid #777777;
padding: 12px 15px;
margin-bottom: 12px;
}
.account-box--voucher .input {
margin-bottom: 0;
}
.account-box .xvc_input {
max-width: none;
}
.account-table.vouchers .dblc span {
display: none;
}
.account-table.vouchers .dblc.small {
width: auto;
}
.account-table.vouchers {
margin: 0 0 20px;
}
.account-modal--text {
margin-bottom: 10px;
}
.account-table.vouchers .dblc .voucher-code--small {
display: block;
font-size: 10px;
color: #717171;
line-height: normal;
}
/* Basket overlay temp */
#listing-overlay .overlay--header--text {
flex-wrap: wrap;
}
#listing-overlay .overlay--basket-title {
flex: 1;
font-size: 14px;
color: #fff;
}
#listing-overlay .cart-segment--white .cart-item:last-child .cart-item-right .button-small {
padding: 8px 15px 6px 15px;
}
#listing-overlay .overlay--header--text {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#listing-overlay .overlay--basket .overlay--header--text {
flex-direction: row;
}
.overlay--basket ~ .overlay--header-action {
padding: 20px;
display: flex;
justify-content: space-between;
}
.overlay--basket ~ .overlay--header-action .button {
width: calc(50% - 5px);
}
#listing-overlay .overlay--header {
display: flex;
padding: 0;
}
.listing-overlay-options-cont {
padding: 20px;
}
#listing-overlay .overlay--header .listing-image {
margin: 0 10px 0 0;
flex-shrink: 0;
width: 220px;
flex: none
}
#listing-overlay .overlay--header .overlay--title {
text-align: left;
}
#listing-overlay .listing-overview {
width: 100%;
}
#listing-overlay .overlay--inner {
transform: translate(-50%, -50%);
max-width: 620px;
}
#listing-overlay .listing-image--link,
#listing-overlay .listing-image--link img {
display: block;
width: 100%;
}
.overlay--basket-header {
display: flex;
align-items: center;
background-color: #51ae5c;
width: 100%;
padding: 20px;
}
.overlay--basket-header.overlay--basket-error {
background-color: #e1181e;
}
.overlay-tick-icon {
width: 27px;height: 21px;
margin-right: 20px;
}
.overlay-tick-icon svg {
fill: #fff;
width: 100%;
}
.overlay--basket-icon {
width: 105px;
padding-right: 30px;
flex-shrink: 0
}
.overlay--basket-icon svg {
fill: #37af56;
}
#listing-overlay .overlay--inner {
padding: 0;
}
.flashdeal-listing--container {
display: flex;
margin: 5px 0;
}
.flashdeal-listing {
background-color: #131313;
color: #f1bf12;
padding: 2px 6px;
font-size: 16px;
font-family: 'Viga', sans-serif;
/* color: #fff; */
border-radius: 3px;
display: flex;
align-items: center;
}
.home-brands .flashdeal-listing {
top: 10px; right: 10px;
}
.flashdeal-listing--svg {
margin: 4px 4px 0 0;
}
.flashdeal-listing--svg svg {
/* fill: white; */
fill: #f1bf12;
}
.cat-display-badge {
background-color: #f1bf12;
font-size: 16px;
display: flex;
padding: 4px 6px;
align-items: center;
position: absolute;
border-radius: 3px;
top: 0;
left: 0;
font-family: 'Viga', sans-serif;
color: #fff;
}
.cat-display-badge svg {
margin: 2px 4px 0 0;
}
.flash-deal-price, .list-special-offer {
background-color: #f1bf12;
padding: 2px 6px;
font-size: 12px;
font-family: 'Viga', sans-serif;
color: #fff;
border-radius: 3px;
}
.list-special-offer {
background-color: #e30614;
}
#dispatched_after {
color: #fff;
}
.google-address-lookup {
width: 100%;
min-height: 10px;
}
.google-address-lookup-results {
max-height: 240px;
overflow-y: auto;
margin-bottom: 5px;
}
.google-address-lookup-address {
border: 1px solid #e7e7e7;
border-top: 0;
padding-left: 5px;
}
.google-address-lookup-address:hover {
background: #e1e1e1;
cursor: pointer;
}
.packout-container {
margin: 0 auto;
}
.packout-responsive {
display: none;
}
.packout {
margin: 0 auto;
/* min-height: 100vh !important; */
/* max-height: none; */
}
.packout-logo {
width: 200px;
}
.packout-logo a,
.packout-logo img {
display: block;
width: 100%;
}
.packout-close {
font-size: 12px;
text-decoration: underline;
color: #131313;
}
.mobile-column {
display: none;
}
.video-background {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
transform: translateY(-50%);
padding-top: 67.5%;
z-index: 1;
}
.video-background.short {
padding-top: 36.5%;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.youtube-api {
overflow: hidden;
width: 100%;
aspect-ratio: 16/9;
pointer-events: none;
}
.youtube-api iframe {
opacity: 0;
transition: ease-in-out .5s;
width: 300%;
height: 100%;
margin-left: -100%;
}
.header-top-msg {
background-color: #e10e1e;
color: #FFF;
text-align: center;
padding: 5px 20px;
}
.header-top-msg a {
color: #FFF;
}
.cart-side {
display: flex;
flex-direction: column;
}
#free-gift-segment--container {
order: 1;
}
.cart-segment {
order: 2;
}
#google-merchantwidget-iframe-wrapper, #google-merchantwidget-iframe-wrapper > iframe {
z-index: 999999999 !important;
}
body #google-merchantwidget-iframe-wrapper {
margin-bottom: 43px;
margin-left: -24px;
}
body .floating-icons-horizontal ~ #google-merchantwidget-iframe-wrapper {
margin-bottom: -24px;
margin-left: 44px;
}
.home-top-banners {
display: block;
width: 100%;
}
.home-top-banners > .home-top-banners--item {
display: flex;
}
.home-top-banners--image-mbl,
.slick-slide img.home-top-banners--image-mbl {
display: none;
}
.filter-images {
display: flex;
flex-wrap: wrap;
padding: 0 0 5px 20px;
}
.filter-images--mbl-toggle {
width: 100%;
display: none;
}
.filter-images .filter-image {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
margin: 20px 20px 0 0;
width: calc(16.6666666% - 20px);
-webkit-transition: ease-in-out .2s;
transition: ease-in-out .2s;
}
.filter-images .filter-image:not(.sel):hover {
opacity: 0.8;
}
.filter-images .filter-image.sel {
transform: scale(1.06);
border: 2px solid #000;
}
.filter-image--mbl {
display: none;
}
.single-filter--show-all {
display: none;
font-size: 12px;
text-transform: uppercase;
color: #767676;
cursor: pointer;
transition: color .3s ease;
padding: 2px 0px !important;
}
.single-filter--show-all:hover {
color: #e30614;
}
.single-filter--show-all::before {
content: 'SHOW ALL +';
position: relative;
}
.single-filters ul.show-overflow > .single-filter--show-all::before {
content: 'SHOW LESS -';
}
.filter-overflow {
display: none;
}
.filter-overflow + .single-filter--show-all {
display: inline-block;
}
.page-main {
padding: 30px 30px 40px;
}
.page-main--title {
font-size: 38px;
margin-bottom: 16px;
}
.page-main--title > *:first-child:not(:last-child) {
margin-right: 30px;
}
.page-main > form .input-grid + div:last-child {
margin-top: 20px;
}
.returns-subheading {
font-size: 20px;
font-weight: 500;
}
.dbl-grey .dblr:not(.dblr-head) {
background-color: #f9f9f9!important;
}
.dbl-basic {
border-radius: 6px;
overflow: hidden;
margin-bottom: 12px;
table-layout: unset;
}
.dbl-basic .dblr:not(:last-child) .dblc {
border-bottom: 1px solid #ededed;
}
.dbl-basic .dblr.dblr-head {
background-color: #dbdbdb;
}
.dbl-basic .dblr:not(.dblr-head) {
background-color: #FFF;
}
.dbl-basic .dblc:not(:last-child) {
border-right: 1px solid #ededed;
}
.dbl-basic .dblc {
padding: 12px;
}
.dblc-return-product {
width: 330px;
font-weight: 500;
line-height: 1.2;
}
.dblc-return-product img {
margin-right: 10px;
border: 1px solid #f1f1f1;
}
.dblc-return-product small {
font-size: 13px;
font-weight: 400;
margin-top: 6px;
}
.dblc-return-check {
vertical-align: top;
width: 50px;
}
.dblc-return-return {
width: 230px;
vertical-align: top;
}
.return-inputs .input,
.return-inputs .input > * {
width: 100% !important;
}
#form_error_1 {
display: none;
}
.dbl-container-scrollable {
overflow-x: auto;
border-radius: 12px;
}
.dbl-container-scrollable::-webkit-scrollbar {
height: 10px;
}
.dbl-container-scrollable::-webkit-scrollbar-track {
background: #FFF;
border-radius: 12px;
}
.dbl-container-scrollable::-webkit-scrollbar-thumb {
background: #000;
border-radius: 12px;
}
.dbl-container-scrollable::-webkit-scrollbar-thumb:hover {
background: #333;
}
.dbl-container-scrollable {
scrollbar-color: #000 #FFF;
scrollbar-width: thin;
}
.basic-responsive-title {
display: none;
}
.view-return {
color: #e30614;
cursor: pointer;
text-decoration: underline;
-webkit-transition: ease-in-out .2s;
transition: ease-in-out .2s;
}
.view-return:hover {
opacity: 0.8;
}
.head-back-link {
font-size: 14px;
font-weight: 400;
}
.head-back-link svg {
margin: -2px 6px 0 0;
}
/* ------------------------------------------------------------------------------------*/
/*Basket V2 Styling*/
/*Idea is to
/* ------------------------------------------------------------------------------------*/
#form_cart {
display: flex;
flex-wrap: wrap;
}
.basket-v2 .cart-main {
width: 70%;
/*delete styles after on live*/
float: none;
}
.basket-v2 .cart-side {
padding: 0 0 0 80px;
flex: 1;
/*delete styles after on live*/
width: auto;
float: none;
}
.basket-v2 .cart-main > .basket-title {
text-align: center;
letter-spacing: 0.01em;
font-weight: 400;
font-size: 24px;
margin-bottom: 16px;
}
.basket-v2 .cart-segment {
border-radius: 4px;
background-color: #fff;
margin-bottom: 8px;
display: flex;
flex-direction: column;
}
.basket-v2 .cart-item {
position: relative;
border-bottom: 1px solid #f1f1f1;
display: flex;
flex-wrap: wrap;
padding: 16px;
}
.basket-v2 .cart-item:last-child {
border-bottom: 0;
}
.basket-v2 .cart-item-image {
display: flex;
width: 122px;
max-width: 122px;
min-width: 122px;
}
.basket-v2 .cart-item-image a {
padding: 10px;
display: flex;
align-items: center;
}
.basket-v2 .cart-item-content {
position: relative;
padding: 0 175px 0 15px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
}
.basket-v2 .cart-item-title a {
font-size: 16px;
color: #000;
}
.basket-v2 .cart-item-content .input {
display: flex;
}
.basket-v2 .cart-item-right {
width: 160px;
display: flex;
flex-direction: column;
align-items: flex-end;
position: absolute;
top: 0; right: 0; bottom: 0;
text-align: right;
/*delete styles after on live*/
float: unset;
}
.basket-v2 .basket-stock {
padding-left: 0;
}
.basket-v2 .cart-item-stock {
display: block;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
}
.basket-v2 .cart-item-right .remove {
padding: 4px 8px;
bottom: 0;
/*delete styles after on live*/
background-image: none;
background-color: #e30614;
color: #FFF;
}
.basket-v2 .basket-flash-cont {
margin-bottom: 8px;
}
.basket-v2 .basket-item-parts {
width: 100%;
margin-top: 16px;
border: 1px solid #000;
background-color: #F1F1F1;
border-radius: 4px;
overflow: hidden;
}
.basket-v2 .basket-item-parts--title {
background-color: #000;
padding: 4px 8px;
color: #FFF;
font-size: 12px;
}
.basket-v2 .basket-item-parts--inner {
}
.basket-v2 .basket-item-parts--inner > div {
margin: 8px;
max-width: calc(50% - 16px);
}
.basket-v2 .part-image {
border-radius: 4px;
margin-right: 8px;
width: 62px;
}
.basket-v2 .part-content {
font-weight: 600;
}
.basket-v2 .basket-button--container {
margin: 0 -8px -8px 0;
width: calc(100% + 8px);
}
.basket-v2 .basket-button--container > div {
padding: 0 8px 8px 0;
flex: 1;
min-width: max-content;
}
.basket-v2 .basket-button--container > div > *.button {
width: 100%; height: 100%;
}
.basket-v2 .cart-segment-upsells {
display: flex;
flex-direction: column;
border: 1px solid #E10F1E;
margin-top: 80px;
border-radius: 4px;
overflow: hidden;
/*delete styles after on live*/
padding: 0 0 20px;
}
.basket-v2 .cart-heading--upsells {
background-color: #E10F1E;
color: #FFF;
letter-spacing: 0.01em;
font-weight: 500;
font-size: 16px;
text-align: center;
padding: 6px;
/*delete styles after on live*/
text-transform: none;
margin-bottom: 0;
}
.basket-v2 .cart-upsells .listing-recommended-table {
padding: 16px 16px 0 16px;
}
.basket-v2 .listing-recommended-row {
background-color: #FFF;
}
.basket-v2 .listing-recommended-row > *:not(:last-child) {
margin-right: 16px;
}
.basket-v2 .listing-recommended-image {
display: flex;
padding: 4px;
width: 80px;
/*delete styles after on live*/
background-color: transparent;
}
.basket-v2 .listing-recommended--desc-title {
font-size: 14px;
color: #000;
}
.basket-v2 .listing-recommended--desc {
padding: 8px;
/*delete styles after on live*/
background-color: transparent;
}
.basket-v2 .listing-recommended--desc > *:not(:last-child) {
margin-bottom: 12px;
}
.basket-v2 .listing-recommended--price-price {
font-size: 14px;
padding-right: 16px;
}
.basket-v2 .listing-recommended--price > span {
font-size: 10px;
color: #ACACAC;
}
.basket-v2 #show-more-upsells-btn {
margin: 0 16px;
border-radius: 0 0 4px 4px;
font-weight: 500;
letter-spacing: 0.01em;
padding: 4px 12px;
min-height: 36px;
}
.basket-v2 #show-more-upsells-btn::before {
content: 'Show More';
position: relative;
}
.basket-v2 #show-more-upsells-btn.open::before {
content: 'Show Less';
}
.basket-v2 .listing-recommend-add {
width: 42px;
background-color: #3fa663;
}
.basket-v2 .listing-recommend-add > .button {
height: 100%;
width: 100%;
background-color: #3fa663;
padding: 0;
}
.basket-v2 .listing-recommend-add > .button:hover {
background-color: #348d53;
}
.basket-v2 .cart-side {
/*delete styles after on live*/
counter-reset: none;
}
.basket-v2 .cart-side .cart--heading {
background-color: #131313;
font-size: 16px;
font-family: 'Viga', sans-serif;
font-weight: 500;
color: #fff;
padding: 8px 16px;
border-radius: 4px;
margin-bottom: 16px;
}
.basket-v2 .cart-side .cart--heading::after {
/*delete styles after on live*/
display: none;
}
.basket-v2 .cart-side .cart-segment {
margin-bottom: 24px;
/*delete styles after on live*/
background-color: transparent;
border-top: 0;
padding: 0;
}
.basket-v2 .cart-segment.cart-vat-declaration {
padding: 16px;
}
.cart-side .free-gift--cart-segment {
background: #131313;
margin-bottom: 24px;
padding: 0;
/*delete styles after on live*/
border-bottom-width: 0px;
}
.basket-v2 .cart-side .free-gift--row {
position: relative;
padding: 0 16px 16px;
color: #ffffff;
-webkit-transition: .3s all ease-out;
transition: .3s all ease-out;
}
.basket-v2 .cart-side .free-gift--row.free-gift--row--not-qualified {
border-top: 4px solid #F1F1F1;
padding-top: 16px;
}
.basket-v2 .cart-side .cart--heading + .free-gift--row.free-gift--row--not-qualified {
border-top: 0;
padding-top: 2px;
}
.basket-v2 .cart-side .free-gift--cart-segment .cart--heading {
font-size: 16px;
color: #FFF;
padding: 16px 16px 10px;
background-color: transparent;
border-radius: 0;
margin-bottom: 0;
}
.basket-v2 .cart-side .free-gift--row ~ .cart--heading {
border-top: 4px solid #F1F1F1;
}
.basket-v2 .cart-side .free-gift--row .qualified-title {
display: block;
margin-top: 12px;
/*delete styles after on live*/
color: #FFF;
}
.basket-v2 .cart-side .free-gift--row p {
margin: 0 0 4px 0;
}
.basket-v2 .cart-side .free-gift--row b {
font-weight: 600;
}
.basket-v2 .cart-side .free-gift--item {
margin-top: 10px;
background: #ffffff;
padding: 0;
-webkit-transition: .3s all ease-out;
transition: .3s all ease-out;
/*delete styles after on live*/
border: none;
}
.basket-v2 .free-gift--bar-container {
margin-right: -2px;
}
.basket-v2 .cart-side .free-gift--item .free-gift-image {
position: relative;
flex: 0 1;
float: none;
padding: 0;
cursor: pointer;
min-width: 60px;
border: 0;
padding: 2px;
border-right: 1px solid #F1F1F1;
}
.basket-v2 .cart-side .free-gift--item .free-gift-image img {
border: none;
}
.basket-v2 .cart-item-content.free-gift--item-content {
position: relative;
padding: 6px;
width: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
}
.basket-v2 .cart-item-content.free-gift--item-content::after {
content: '';
position: absolute;
bottom: 4px; right: 4px;
height: 16px; width: 16px;
background: url('data:image/svg+xml,') no-repeat center / contain;
}
.basket-v2 .free-gift--item.incentive_disabled .cart-item-content.free-gift--item-content::after {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
.cart-side .free-gift--title {
color: #131313;
cursor: pointer;
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.1;
margin-bottom: 4px;
}
.basket-v2 .cart-side .input.incentive_accept--checkbox {
margin: 2px 40px 0 0;
}
.basket-v2 .cart-side .input.incentive_accept--checkbox .checkbox-label {
font-size: 12px;
}
.basket-v2 .cart-side .input.incentive_accept--checkbox .checkbox {
width: 14px;
height: 14px;
}
.basket-v2 .cart-side .input.incentive_accept--checkbox .checkbox:after {
background-size: 10px;
}
.basket-v2 .cart-side .free-gift--item:not(.free-gift--selected) .free-gift-quickview {
/*remove all other ones and make sure doesn't show if not selected*/
display: none;
}
.basket-v2 .cart-side .free-gift--item.free-gift--selected .free-gift-quickview {
display: flex;
}
.basket-v2 .cart-side .free-gift--item.free-gift--selected .free-gift-quickview::before {
content: '';
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: 12px auto;
background-position: center;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.basket-v2 .cart-side--delivery-options > div {
margin-top: 8px;
}
.basket-v2 .cart-side--delivery-option {
background-color: #FFF!important;
color: #111111;
padding: 0;
cursor: pointer;
position: relative;
border: 2px solid #FFF;
border-radius: 4px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14);
-webkit-transition: ease-in-out .2s;
transition: ease-in-out .2s;
line-height: 1.3;
}
.basket-v2 .cart-side--delivery-option.sel {
border-color: #3fa663;
}
.basket-v2 .cart-side--delivery-option:not(.sel):hover {
opacity: 0.7;
}
.basket-v2 .cart-side--delivery-option::before,
.basket-v2 .cart-side--delivery-option::after {
/*delete whole style*/
display: none!important;
}
.basket-v2 .cart-side--delivery-option--inner {
position: relative;
padding: 16px 12px 16px 34px;
}
.basket-v2 .method-popular > .cart-side--delivery-option--inner {
border-right: 24px solid #E10F1E;
border-radius: 0 2px 2px 0;
}
.basket-v2 .cart-side--delivery-option--inner > *:not(:last-child) {
margin-bottom: 5px;
}
.basket-v2 .cart-side--delivery-option--inner::before {
content: '';
position: absolute;
top: 18px;
left: 12px;
width: 14px; height: 14px;
border: 2px solid #DADADA;
border-radius: 20px;
}
.basket-v2 .sel > .cart-side--delivery-option--inner::before {
border: 4px solid #3fa663;
background-color: #FFF;
}
.basket-v2 .method-popular > .cart-side--delivery-option--inner::after {
content: 'MOST POPULAR';
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transform: rotate(-90deg);
left: 100%;
width: 100px;
margin-left: -36px;
font-size: 12px;
font-family: 'Viga', sans-serif;
height: 24px;
color: #FFF;
}
.basket-v2 .cart-side--delivery-option span {
/*delete whole style*/
color: #111111!important;
}
.basket-v2 .cart-side--delivery-option span.cart-side--delivery-cost {
width: 100%;
}
.basket-v2 .line-sides:before, .basket-v2 .line-sides:after {
background-color: #111111;
}
.basket-v2 .basket-total-container {
background-color: #FFF;
border-radius: 4px;
overflow: hidden;
}
.basket-v2 .basket-total-container--title {
background-color: #131313;
padding: 8px 16px;
font-size: 16px;
text-transform: none;
font-family: 'Viga', sans-serif;
}
.basket-v2 .basket-total-container > .dbl {
padding: 16px 12px;
color: #111;
text-transform: none;
}
.basket-v2 .basket-total-container > .dbl .dblr:not(:first-child):not(.cart-total) .dblc {
padding-top: 6px;
}
.basket-v2 .cart-total > .cart-total--label {
padding-top: 16px;
text-transform: uppercase;
}
.basket-v2 .basket-pp-messaging {
padding: 0 10px 10px;
}
.basket-v2 .cart-separator-title {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #111;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 8px;
}
.basket-v2 .cart-separator-title > span {
padding: 0 16px;
}
.basket-v2 .cart-separator-title::before, .basket-v2 .cart-separator-title::after {
content: '';
position: relative;
min-width: 1px; height: 1px;
background-color: #111;
flex: 1;
}
.basket-v2 .cart-segment.cart-totals .button {
margin-top: 20px;
padding: 6px 15px;
border-radius: 5px;
}
.basket-v2 .cart-segment.cart-totals #checkout.button {
margin-bottom: 24px;
}
.basket-v2 .cart-ppx {
/*delete whole style*/
padding-top: 0;
}
.basket-v2 .cart-ppx > #checkout-express {
background-color: #FFC53C;
height: 36px;
padding: 6px 12px;
background-image: url(/images/style/ptm/paypal-button-img.png);
background-repeat: no-repeat;
background-position: center center;
width: 100%;
overflow: hidden;
text-indent: -1000px;
margin-top: 0;
}
.basket-payment-other > *:not(:last-child):not(.cart-separator-title) {
margin-bottom: 8px;
}
.basket-v2 .cart-segment-delivery > .input.input-rounded-sm {
margin-bottom: 8px;
}
.basket-v2--scroll-to-buy {
display: none;
position: fixed;
bottom: 10px; right: 10px;
font-size: 12px;
padding: 6px 8px;
background-color: #222;
z-index: 999999;
}
.basket-v2--scroll-to-buy svg {
margin-left: 4px;
width: 12px;
}
.basket-v2--scroll-to-buy svg path {
fill: #FFF
}
.checkout-v2 {
position: relative;
overflow: unset;
}
.checkout-v2 #checkout-container {
/*remove padding from reponsive too*/
padding: 0 20px!important;
}
.checkout-v2 .checkout-main {
width: 70%;
display: flex;
flex-direction: column;
background-color: transparent;
padding: 0;
border: 0;
}
.checkout-v2 .checkout-side:before {
/*delete whole style*/
display: none;
background-color: transparent;
}
.checkout-v2 .checkout-segment {
background-color: #FFF;
border-radius: 4px;
padding: 16px;
}
.checkout-v2 .checkout-segment:not(:last-child) {
margin-bottom: 20px;
}
.checkout-v2 .checkout-title {
font-size: 22px;
font-weight: 400;
letter-spacing: 0.01em;
font-family: 'Viga', sans-serif;
padding: 0 0 16px 0;
/*delete styles after on live*/
border-bottom: 0;
margin: 0;
}
.checkout-v2 .checkout-title > *:not(:last-child) {
margin-right: 12px;
}
.checkout-v2 .checkout-title--cta {
font-size: 13px;
font-family: 'Poppins';
letter-spacing: 0;
}
.checkout-v2 .checkout-title--cta > a.button {
margin-left: 16px;
font-family: 'Viga', sans-serif;
font-size: 14px;
}
.checkout-v2 .checkout-side {
margin-left: 80px;
flex: 1;
/*delete styles after on live*/
padding: 0;
}
.checkout-v2 .cart-overview {
background-color: #FFF;
border-radius: 4px;
position: sticky;
top: 20px;
bottom: 0;
}
.checkout-v2 .cart--heading {
font-size: 16px;
font-weight: 400;
font-family: 'Viga', sans-serif;
padding: 8px 16px;
background-color: #131313;
border-radius: 4px 4px 0 0;
color: #FFF;
}
.checkout-v2 .cart-heading--cta {
display: flex;
align-items: center;
font-family: 'Poppins';
text-transform: uppercase;
font-size: 13px;
color: #FFF;
margin-bottom: -2px;
}
.checkout-v2 .cart-heading--cta::after {
content: '';
width: 16px; height: 10px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin-left: 8px;
}
.checkout-v2 .cart-overview--item {
padding: 10px;
/*delete styles after on live*/
margin: 0;
}
.checkout-v2 .cart-overview--item-cont {
display: flex;
align-items: flex-start;
}
.checkout-v2 .cart-overview--item-image {
display: flex;
position: relative;
width: 60px;
max-width: 60px;
margin-right: 8px;
padding: 6px;
border: 1px solid #F1F1F1;
/*delete styles after on live*/
float: unset;
}
.checkout-v2 .cart-overview--item-inner {
flex: 1;
/*delete styles after on live*/
padding: 0;
}
.checkout-v2 .cart-overview--item-content {
line-height: 1.2;
}
.checkout-v2 .cart-overview--item-title {
font-size: 12px;
font-family: 'Viga', sans-serif;
font-weight: 400;
}
.checkout-v2 .cart-overview--item-info {
font-size: 12px;
text-align: right;
/*delete styles after on live*/
float: right;
}
.checkout-v2 .cart-overview--item-qty {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.01em;
/*delete styles after on live*/
color: #000000;
}
.checkout-v2 .cart-overview-totals {
padding: 12px 12px 4px;
font-size: 12px;
/*delete styles after on live*/
background: none;
}
.checkout-v2 .cart-overview-totals .dblr > * {
padding-bottom: 8px;
}
.input-grid.inputs-v2 {
margin: 0 -8px -8px 0;
}
.inputs-v2 .input {
padding: 0 8px 8px 0;
}
.inputs-v2 .input .select2-basic--container.select2-selection--single .select2-selection__rendered,
.inputs-v2 .input input[type="text"],
.inputs-v2 .input input[type="email"],
.inputs-v2 .input input[type="search"],
.inputs-v2 .input input[type="tel"],
.inputs-v2 .input input[type="password"],
.inputs-v2 .input input[type="number"],
.inputs-v2 .input textarea,
.inputs-v2 .input .input-file-dummy,
.inputs-v2 .input .input-text-dummy {
border-radius: 4px;
border-width: 1px!important;
}
.checkout-v2 .input-grid .input .button {
line-height: normal;
}
.checkout-v2 .payment-methods {
margin: -12px 0 -15px;
}
.checkout-v2 .payment-method.open {
padding: 0 0 20px;
}
.checkout-v2 .payment-method--title {
display: flex;
align-items: center;
}
.checkout-v2 .payment-method--title > img {
margin-left: 12px;
}
.checkout-v2 .payment-method:first-child .payment-method--button,
.checkout-v2 #payment-methods-no-options + .payment-method .payment-method--button {
border-top: 0;
}
.checkout-v2 .payment-method:last-child .payment-method--button {
border-bottom: 0;
}
.checkout-v2 .payment-method--button {
position: relative;
padding: 16px 20px 16px 34px;
font-weight: 400;
font-size: 16px;
color: #131313;
border: 1px solid #e7e7e7;
border-width: 1px 0 1px 0;
margin-top: -1px;
cursor: pointer;
}
.checkout-v2 .payment-method.open .payment-method--button {
border-bottom: 0;
}
.checkout-v2 .payment-method--button:before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 20px;
height: 20px;
background-color: #FFF;
border: 4px solid #DADADA;
border-radius: 20px;
}
.checkout-v2 .payment-method.open .payment-method--button:before {
border: 6px solid #07BC46;
}
.checkout-v2 .payment-method.open .payment-method--button:after {
/*delete whole style*/
display: none;
}
.checkout-v2 .payment-method--content {
color: #131313;
font-weight: 500;
background-color: #F1F1F1;
padding: 20px;
text-align: center;
font-size: 14px;
border-radius: 4px;
width: 100%;
max-width: 750px;
text-transform: capitalize;
}
.checkout-v2 .checkout-segment--plain:not(:last-child) {
margin-bottom: 20px;
}
.checkout-v2 .checkout-segment--plain .checkout-segment--content {
margin-bottom: 12px;
font-size: 13px;
}
.checkout-v2 .checkout-subtitle {
font-size: 16px;
font-weight: 400;
font-family: 'Viga', sans-serif;
padding: 0 0 8px 0;
margin: 0;
}
.checkout-v2 .checkout-segment--confirm {
margin-right: 20px;
}
.checkout-v2 #terms-checkbox > .checkbox,
.checkout-v2 #confirm-ukims-checkbox > .checkbox {
margin-right: 0;
flex-shrink: 0;
}
.checkout-v2 .select2-container--default .select2-selection--single {
background-color: transparent!important;
}
.checkout-v2 .select2-container--default .select2-selection--single .select2-selection__rendered {
background-color: #FFF!important;
}
.checkout-v2 .checkout-login--inner {
background-color: #f1f1f1;
border-bottom: 0;
padding-bottom: 0;
}
.checkout-v2 .account-box-centered {
background-color: #FFF;
padding: 24px;
border-radius: 4px;
}
.checkout-v2 .checkout-login-form .input-grid {
margin-bottom: 10px;
}
.checkout-v2 .checkout-action {
border-top: 0;
padding-top: 0;
}
.checkout-v2 #pay-ppchkout-paypal, .checkout-v2 #ppchkout-paypal-button,
.checkout-v2 #pay-ppchkout-paypal-paylater, .checkout-v2 #ppchkout-paypal-paylater-button {
display: flex;
}
.checkout-v2 #ppchkout-paypal-button > div {
width: 100% !important;
max-width: unset;
min-width: 300px;
}
.checkout-v2 #ppchkout-paypal-paylater-button > div {
width: 100% !important;
max-width: unset;
min-width: 300px;
}
.checkout-v2 .payment-method--content.payment-method--klarna {
padding-bottom: 10px;
}
/* Force the height adjust not apply */
.checkout-v2 .checkout-main,
.checkout-v2 .checkout-side {
height: auto !important;
}
.checkout-v2 .button.disabled {
background: #8C8C8C;
cursor: not-allowed;
}
.checkout-v2 #checkout-hide-login-form.disabled,
.checkout-v2 #checkout-hide-login-form.disabled:hover {
color: #8C8C8C;
cursor: not-allowed;
}
.checkout-v2 select.validate-border ~ .select2-container .select2-selection__rendered {
border-color: #b62f3f;
}
.checkout-v2 select.validate-border ~ .select2-container .select2-basic--container {
-webkit-animation-name: shake;
animation-name: shake;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.checkout-v2 input::placeholder {
opacity: 0.7;
}
.checkout-v2 #pay-ppchkout-paypal,
.checkout-v2 #ppchkout-paypal-button,
.checkout-v2 #pay-ppchkout-paypal-paylater,
.checkout-v2 #ppchkout-paypal-paylater-button {
flex-direction: column;
}
.checkout-v2 #ppchkout-paypal-loggedin,
.checkout-v2 #ppchkout-paypal-paylater-loggedin,
.checkout-v2 #ppchkout-paypal-credit-loggedin {
width: 100%;
max-width: none;
}
.checkout-v2 .billing-address-form {
margin-bottom: 20px;
}
.checkout-v2 #payment-methods-no-options {
padding: 16px 0;
}