* {
box-sizing: border-box;
}
body {
font-family:'futura-pt','Roboto Condensed', Helvetica, Arial, sans-serif;
margin:0;
padding:0;
overflow-x:hidden;
font-style:normal;
font-weight:400; /* letter-spacing: 0.02em; */
font-size:16px;
color:#222;
background-color:#fff;
}
table {
border-spacing: 0;
}
.tooltip, .tooltip-inner {
font-weight: 300;
font-size: 12px;
}
.klarna-pp {
font-weight: 300;
color: #000;
font-family:'futura-pt','Roboto Condensed', Arial, sans-serif;
width:100px;
float:right;
font-size: 11px;
margin: 3px 0 0 1px;
text-align: right
}
.container {
overflow: hidden;
}
h1 a, .title_gender{
font-size: 18px;
}
h1 a {
text-decoration: none;
background: -webkit-gradient(linear,left top,right top,from(#534089),to(#597cef));
background: linear-gradient(90deg,#534089, #597cef);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
text-transform: uppercase;
letter-spacing: 2px;
display: block;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
h1 a {
background: none;
}
}
.note_img {
max-height: 96px;
max-width: 96px;
height: 96px;
width: 96px;
border-radius: 50px;
border: 1.5px solid #00000061;
filter: brightness(1.15) contrast(0.9) saturate(0.9);
}
.note_box {
display:inline-block;
width: 110px;
max-width: 23vw;
text-align: center;
}
.note_text {
display: block;
margin: 5px 0 10px 0;
/* text-transform: uppercase; */
height: 2.5em;
display: inline-block;
vertical-align: text-top;
}
div.box.simonfilters div.filter_title {
font-weight: 300;
text-indent: 24px;
}
div.box.simonfilters div.filter_title::before {
content: "\E814";
font-family: fontello;
font-size: 80%;
margin: 4px;
position: absolute;
text-indent: -25px;
}
/* Adding lines to h6 elements */
.content-top .box-general .box-title h6,
.content-bottom .box-general .box-title h6,
.content-top .box-general .box-title p,
.content-bottom .box-general .box-title p {
display: table;
white-space: nowrap;
}
.content-top .box-general .box-title h6:after,
.content-top .box-general .box-title h6:before,
.content-bottom .box-general .box-title h6:after,
.content-bottom .box-general .box-title h6:before,
.content-top .box-general .box-title p:after,
.content-top .box-general .box-title p:before,
.content-bottom .box-general .box-title p:after,
.content-bottom .box-general .box-title p:before {
border-top: 0.7px solid #7d7d7d;
content: '';
display: table-cell;
position: relative;
top: 1.4rem;
}
.content-top .box-general .box-title h6:after,
.content-bottom .box-general .box-title h6:after,
.content-top .box-general .box-title p:after,
.content-bottom .box-general .box-title p:after {
left: 0.5em;
width: 100%;
}
/* Doofinder overrides for mobile and pad full screen search */
@media screen and (max-width:1023px) {
.df-layer--grid .df-results__item {
-webkit-flex: 1 0 120px !important;
-ms-flex: 1 0 120px !important;
flex: 1 0 120px !important;
}
.df-layer--grid .df-card__image {
flex: 0 0 120px !important;
-webkit-flex: 0 0 120px !important;
-ms-flex: 0 0 120px !important;
height: 120px !important;
margin: 0 0 4px !important;
}
.df-card {
padding: 8px !important;
}
.df-fullscreen .df-results{
margin-top: 6px !important;
}
.df-fullscreen .df-main {
padding-top: 10px !important;
}
.df-layer--wide .df-fullscreen__content {
padding: 0 !important;
}
.df-layer--wide .df-main {
padding-left: 0 !important;
}
/* färg på krysset */
.df-icon--close:active svg, .df-icon--close:focus svg, .df-icon--close:hover svg {
fill: var(--main-color);
}
}
/* End Doofinder overrides for mobile full screen search */
/* Fix doofinder screwing the position of search input */
#search form{
display: block !important;
}
.nomessage{
background-color: #2b2b2b;
margin-left: -10px;
text-transform: uppercase;
}
.handw {
/* font-family:'Short Stack', Helvetica, sans-serif; */
font-size: 15px;
margin:15px 0 10px 0;
/* font-variant: small-caps; */
}
.coco {
color: var(--main-color); /* förr ec376e */
}
.manufacturer-info {
font-size: calc(16px + 0.2vw);
line-height: 1.4em;
/* overflow: auto; */ /* temporarily remove to remove scrollbar */
margin: -10px 0 10px 0;
}
.manufacturer-info p{
margin: 0 0 14px 0;
}
.manufacturer-info .image {
float: right;
padding: 5px;
margin-right: 15px;
border: 1px solid #E7E7E7;
}
.readmore {
font-variant: small-caps; margin:0;
padding: 0 0px 0 20px;
background-position: 0px 12px;
background-repeat: no-repeat;
background-image: url(img/icon/arrow_mini_dark.png);
background-size: 16px;
font-weight: var(--fw800) !important;
font-family: 'Madera',Helvetica,Arial,sans-serif;
text-transform: uppercase;
line-height: 33px;
transition:background-position 0.3s cubic-bezier(.25,.46,.45,.94);;
} /* ingredient-title */
.readmore:hover {color:#4A66C0; cursor: pointer; background-position: 2px 12px;}
.more {display: none; overflow: hidden;} /* .ingredient-list */
.useo_h2{
text-align: center;
font-style: italic;
margin:0;
padding: 0 0 15px 0 !important;
font-size: 18px !important;
color: #333 !important;
}
.klarna-container {
margin-right: 0;
max-width: 620px;
width: calc(50vw + 160px);
margin-left: calc(35% - 270px);
float: left;
/* margin-right:-20px; */
}
.klarna-sidebox{
float:right;
margin:0;
width: 260px !important;
}
.ksidebox-kontakt{
font-size: 16px; text-align:center;
}
.checkout-success-sidebox{
margin-left:0 !important;
}
.klarna-checkout-success{
margin-left: 270px;
margin-bottom: 50px !important;
}
.prisjakt-review{
padding: 0 10px;
clear: right;
position: relative;
}
.prisjakt-review-arrow{
position: absolute;
top:-60px;
left:-260px;
}
.icon-check:before{
content: '✓';
color: #000;
}
#logo-img {margin:70px auto 0px;}
#teh {position: absolute;left: 40px; top: 78px; width:50px; height:50px;}
#prisj {position: absolute;left: 40px;top: 78px;text-align: left;width: 200px;font-size: 12px;}
#prisj_se {
position: absolute;right: 10px;top: 78px;text-align: left;width: 200px;font-size: 12px; text-align: right;
}
#prisj_se table {float: right;}
#header_phone_desktop {
padding: 10px 0 0 10px;
display: inline-block;
line-height: 16px;
color: #222;
pointer-events: auto;
}
#header_trustmarks {
position: absolute;
left: 0;
top: 10px;
width: 100%;
min-width: 500px;
font-size: 12px;
text-align: center;
}
#ceimg1 {border:0px; position: absolute;left: 105px; top: 75px; height: 56px; width: 56px}
/* OLD, larger
#teh {left: 40px; top: 50px;width:68px; height:68px;}
#ceimg1 { left: 120px;top: 46px; height: 75px; width: 75px}
*/
/* Ratings stars startpage */
.reviews-rating .mini-rating-dark { display:block; width:80px; height:16px; background-image:url(img/mini-rating-dark.png); background-repeat:no-repeat; margin: 5px -2px;}
.reviews-rating .rating0 { background-position:0 0;}
.reviews-rating .rating1 { background-position:0 -16px;}
.reviews-rating .rating2 { background-position:0 -32px;}
.reviews-rating .rating3 { background-position:0 -48px;}
.reviews-rating .rating4 { background-position:0 -64px;}
.reviews-rating .rating5 { background-position:0 -80px;}
div.snize-ac-results span.snize-title{
font-weight: 400 !important;
}
.snize-brand{
display:none !important;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1.5em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
font-size: 200%;
}
/* GENERAL THEME */
strong, b {font-weight: 500}
h1, h2, h3, h5, h6 { font-weight:var(--fw700); /*change from 300 */ }
h1 { font-size:28px; margin:15px 0; text-align:center; font-family: 'Madera', Helvetica, Arial, sans-serif; /* letter-spacing: -0.5px; */ font-weight: var(--fw800);}
h2 { font-size:20px;}
h4 { font-size: 14px; font-weight:400;}
a { outline:none;}
a:hover { cursor:pointer;}
a:active, a:focus { outline:none;}
img { border:none;}
.ui-widget { font-size:12px !important; z-index:999 !important;}
/* LAYOUT */
.container { width:1000px; margin-left:auto; margin-right:auto; background: #fff}
.site-content { background-color:#fff; padding-top:0px; display:inline-block; width:100%;}
.content-top { margin-right:10px; margin-left:10px;}
.column-center .content-top { margin-left:0; margin-right:0;}
.content-group-layout { display:inline-block; width:100%;}
.column-left { float:left; width:270px; margin-left:10px;}
.column-right { float:right; width:220px; margin-right:20px;}
.column-center { margin-right:20px; margin-left:20px;}
.content-bottom { margin-left:20px; margin-right:20px;}
.column-center .content-bottom { margin-left:0; margin-right:0;}
.column-left + .column-right + .column-center, .column-left + .column-center { margin-left:300px;}
.column-right + .column-center { margin-right:300px;}
/* FORM */
input {
box-sizing: border-box;
}
input[type="text"], input[type="password"], select, textarea, input[type="number"], input[type="tel"] {
font-size: 16px;
font-weight: 300;
font-family:'futura-pt','Roboto Condensed', Helvetica, Arial, sans-serif;
color:#333;
border: 0.5px solid #f3f9f6;
border-top: 1.5px solid #4c85651c;
background-color: #fafafa;
box-shadow: inset 0px -15px 10px #fff, inset 1px 1px 0px rgb(0 0 0 / 2%), 4px 3px 13px 0px rgb(0 0 0 / 3%);
border-radius: 6px;
padding:10px;
min-width:170px;
}
input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
outline:none; color:#333; background-color:#fff;
}
textarea {
overflow:auto;
height:80px;
min-height:80px;
max-height:200px;
min-width:170px;
}
input[type="button"], input[type="submit"], button[type="button"] {
-moz-appearance: none; -webkit-appearance: none;
font-family:'futura-pt','Roboto', Helvetica, Arial, sans-serif; font-style:normal;
font-weight:600;
font-size:15px;
}
input[type="button"]:hover, input[type="submit"]:hover { cursor:pointer;}
input[type="button"]:focus, button:focus { outline: #fff0; }
.gpu_form { display:inline-block; width:100%; margin-bottom:10px;}
.gpu_form p { margin:0; padding:0; font-size:15px;}
.gpu_form p i { display:block; font-style:normal; color:#999; font-size:12px;}
.gpu_form .help { display:block; font-style:normal; color:#999; font-size:12px;}
.gpu_form .required { color:#c12222;}
.gpu_form .error { display:block; color:#c12222; font-size:12px;}
.gpu_form > div > .error { padding:3px 0;}
.gpu_form > div { padding:3px 0;}
.gpu_form > div > label { display:block; font-size:13px;}
.gpu_form_options { display:inline-block; width:100%; padding:10px 0; border-top:1px solid #f5f5f5; border-bottom:1px solid #f5f5f5; margin:10px 0 20px 0;}
.gpu_form_options label { display:block; font-size:13px;}
.form-content { display:inline-block; width:100%; margin-bottom:20px;}
.form-content .left-form-content { float:left; width:300px;}
.form-content .right-form-content { margin:0 0 0 320px; vertical-align:top;}
.form-content .full-form-content { float:none; width:100%;}
.column-left + .column-right + .column-center .form-content .left-form-content { float:none; width:100%;}
.column-left + .column-right + .column-center .form-content .right-form-content { margin:20px 0 0 0;}
.form-content .gpu_box_form .title { margin:0; padding:0 0 15px 0;}
.form-content .left-form-content .gpu_form input[type="text"],
.form-content .left-form-content .gpu_form input[type="password"],
.form-content .left-form-content .gpu_form textarea,
.form-content .right-form-content .gpu_form input[type="text"],
.form-content .right-form-content .gpu_form input[type="password"],
.form-content .right-form-content .gpu_form textarea { width:278px; min-width:278px; max-width:278px;}
.form-content .left-form-content select,
.form-content .right-form-content select { width:300px; min-width:300px; max-width:300px;}
.info-form-content { margin-bottom:15px; line-height:25px;}
.info-form-content p { margin:0 0 15px 0; line-height:25px;}
.login-form-box .gpu_box_form .buttons .left .button { padding:10px 0; min-width:95px;}
.login-form-box .gpu_box_form .buttons .forgotten { float:right; margin:10px 0 0 0; font-size:13px; color:#999;}
.login-form-box .gpu_box_form .buttons .forgotten:hover { color:#333;}
.new-customer-box { min-height:140px;}
.new-customer-box span { display:block; font-size:13px;}
.new-customer-box p { font-size:13px; margin:0; padding:0; color:#999; line-height:25px;}
.form-content .forgotten-form-box { float:none; width:100%; }
.forgotten-form-box .gpu_box_form .buttons .left .button { padding:10px 0; min-width:95px;}
.register-form-box .buttons { width:100%;}
/* BOTTON */
.buttons { overflow:auto;}
.buttons .left { float:left; text-align:left;}
.buttons .right { float:right; text-align:right;}
.buttons .center { margin-left:auto; margin-right:auto; text-align:center;}
a.button, input.button, button {
/* text-shadow:1px 1px 0 #666; background:#999; */
color:#000;
/* box-shadow:inset 0 2px rgba(255,255,255,0.5); */
display:inline-block; padding:10px 15px; text-decoration:none;
/* background-image:url(img/bg-button.png); background-repeat:repeat-x; background-position:left bottom; */
background: #fff;
border: 2px solid #000;
border-radius: 0;
margin:0;
}
a.button:hover, input.button:hover, button:hover { background-image:none; cursor: pointer; }
a.button b { font-weight:400; display:block; background-repeat:no-repeat; background-position:left center;}
/* a.b_icon_demo b { padding:0 0 0 22px; background-image:url(img/icon/b_icon_demo.png);} */
a.but_white, input.but_white { text-shadow:1px 1px 0 #e7e7e7; background:#e8e8e8; color:#666;}
a.but_black, input.but_black { /* text-shadow:1px 1px 0 #000; background:#444444; */ }
/* a.but_green, input.but_green { text-shadow:1px 1px 0 #859612; background:#b7ce1d;} */
a.but_red, input.but_red { background:#c12222;}
a.but_green, input.but_green { background:#fff;}
a.but_blue, input.but_blue { background:#fff;}
a.but_orange, input.but_orange { background:#f4b318;}
a.but_purple, input.but_purple { background:#8416b3;}
a.but_cyan, input.but_cyan { background:#03d7d7;}
a.but_brown, input.but_brown { background:#ad6b04;}
/* NOTIFICATION */
.notification { position:fixed; z-index:9999; width:300px; top:10px; left:50%; margin:0 0 0 -150px; border-radius:5px; background:transparent; box-shadow:0 0 5px rgba(0,0,0,0.5);}
.page_notification { padding:10px 20px 0 20px;}
.notification .success, .notification .warning, .notification .attention, .notification .information, .notification .wossy_empty { margin:10px;}
.success, .warning, .attention, .information, .wossy_empty {
color:#fff;
padding:15px 15px 15px 15px;
position:relative;
background-repeat:no-repeat;
background-position:10px center;
border-radius:5px;
margin:0 0 20px 0;
line-height: 2em;
}
.success, .information, .wossy_empty {
background: #a7d6d1;
}
.warning, .attention {
background: #d5a3b2;
}
.success a, .warning a, .attention a, .information a { color:#999;}
.success a:hover, .warning a:hover, .attention a:hover, .information a:hover { color:#fff;}
/* Outdated icons - replace below */
/*
.success { background-image:url(img/icon/notification_success.png);}
.warning { background-image:url(img/icon/notification_warning.png);}
.attention { background-image:url(img/icon/notification_attention.png);}
.information { background-image:url(img/icon/notification_information.png);}
.wossy_empty { background-color:#fff; color:#666; background-image:url(img/icon/notification_empty.png);}
*/
.success .close, .warning .close, .attention .close, .information .close {
cursor:pointer; position:absolute; top:-8px; right:-8px;background-color:#333;
/* background-repeat:no-repeat; background-position:center center;background-image:url(img/icon/x.png); */
width: 24px;
height: 24px;
border-radius: 20px;
/*
width:16px; height:16px; border-radius:9px;
*/
/* text-indent:-9999px; */
}
.success .close:before, .warning .close:before, .attention .close:before, .information .close:before { content: '\e81d';
line-height: 1em;
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
position: absolute;
/*
font-size: 0.7em;
left: 0.4em;
top: 0.2em;
*/
font-size: 18px;
left: 6px;
top: 3.5px;
}
/* INFORMATION PAGE */
.information-page { margin-bottom:20px; display:inline-block; width:100%; line-height:25px;}
.information-page h1 { text-align:left; margin:17px 0;}
.information-page p { margin:0 0 15px 0;}
/* BREADCRUMB */
.breadcrumb { margin-bottom:20px; background:url(img/sh_left_bottom.png) no-repeat left bottom, url(img/sh_right_bottom.png) no-repeat right bottom; padding:0 50px; text-align:center;}
.breadcrumb h2 {
background:url(img/sh_bottom.png) repeat-x left bottom;
margin:0;
padding:0 0 10px 0;
font-weight:400;
font-size:11px;
color:#999;
}
.breadcrumb h2 a { text-decoration:none; color:#999; display:inline-block; padding:2px;}
/* FILTER */
.product-filter { position:relative; display:inline-block; width:100%; margin-bottom:20px; min-height:30px; border-bottom:3px solid #333; font-size:12px; z-index:55;}
.product-filter ul { margin:0; padding:0; list-style-type:none;}
.product-filter > ul > li { position:relative; float:left; margin:0 2px 0 0;}
.product-filter ul li a { display:block; padding:7px 0 7px 10px; text-decoration:none; color:#999; /* background-repeat:no-repeat; background-position:right center; */ }
.product-filter ul li a:hover { background-color:#434343; color:#ccc; /*background-image:url(img/icon/refresh_filter.png); */ }
.product-filter ul li a:hover:before {
content: '\e804';
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-size: 17px;
position: absolute;
right:17px;
line-height: 17px;
color: #999;
}
.product-filter ul li ul li { margin:5px 0 0 0;}
.product-filter .selected { color:#fff; /*background-image:url(img/icon/selected_filter.png); */}
.product-filter .selected:hover { cursor:default; color:#fff; /* background-image:url(img/icon/selected_filter.png); */}
.product-filter .selected:before, .product-filter .selected:hover:before{
content: '\e816';
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-size: 17px;
position: absolute;
right:17px;
line-height: 17px;
color:#fff;
}
.product-filter .wossy_filter {
display:block;
height:30px;
line-height:30px;
font-style:normal;
cursor:pointer;
padding: 0 10px 0 0;
/*
background-position:2px 6px;
background-repeat:no-repeat;
background-image:url(img/icon/arrow_mini_dark.png);
background-size: 16px;
padding:0 10px 0 20px;
*/
}
.product-filter .wossy_filter::before {
content: "\e80a";
margin: 0 6px;
font-family: fontello;
}
.product-filter .wossy_filter:hover { /* background-image:url(img/icon/arrow_mini_gray.png); */ background-color:#333; color:#ccc;}
.product-filter .wossy_filter_open { /* background-image:url(img/icon/arrow_mini_gray.png); */ background-color:#333; color:#ccc;}
.product-filter .wossy_filter .close { display:none; position:absolute; top:-5px; left:-5px; background-image:url(img/icon/x.png);
background-color:#333; background-repeat:no-repeat; background-position:center center; width:16px; height:16px; border-radius:9px;
background-size: 16px; }
.product-filter .wossy_filter_open .close { display:block;}
.product-filter .wossy_content_filter { display:none; position:absolute; left:0; top:auto; padding:5px 10px 10px 10px; background-color:#333333; box-shadow:2px 2px 2px rgba(0,0,0,0.4);}
.product-filter .display { width:150px;}
.product-filter .display li a { padding:0 0 0 10px;}
.product-filter .display li a span { display:inline-block; padding:7px 0 7px 20px; /*background-repeat:no-repeat; background-position:left center; */ position: relative;}
.product-filter .display .list_icon span { /*background-image:url(img/icon/icon_list.png);*/}
.product-filter .display .grid_icon span { /*background-image:url(img/icon/icon_grid.png);*/}
.product-filter .display .list_icon span:before, .product-filter .display .grid_icon span:before{
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-size: 13px;
position: absolute;
left:0;
line-height: 18px;
color:#fff;
}
.product-filter .display .list_icon span:before{
content: '\e801';
}
.product-filter .display .grid_icon span:before{
content: '\e800';
}
.product-filter .display .selected:hover { /* background-image:url(img/icon/selected_filter.png); */}
.product-filter .display li a:before, .product-filter .display li a:hover:before{
font-size: 17px;
position: absolute;
right: 17px;
line-height: 30px;
}
.product-filter .display li a:hover { /* background-image:url(img/icon/change_filter.png); */}
.product-filter .sort_by .wossy_content_filter { width:215px;}
.product-filter .show .wossy_content_filter { width:90px;}
.product-filter .compare { position:absolute; right:0; top:0; height:30px; line-height:30px; padding:0 10px; text-decoration:none; color:#333; text-decoration:none;}
.product-filter .compare:hover { background-color:#333; color:#ccc;}
/* PAGINATION */
.pagination { overflow:auto; margin-bottom:20px; clear:both;}
.pagination .links { display:inline-block; font-size:16px; line-height:33px;}
.pagination .links a { text-decoration:none; text-align:center; color:#666; display:inline-block; background-color:#f8f9fa; width:33px; height:33px; margin:0 0 5px 0;}
.pagination .links a:hover { background-color:#333; color:#ccc;}
.pagination .links b { font-weight:400; text-align:center; color:#ccc; display:inline-block; background:#fff url(img/arrow_b_paginator.png) no-repeat left top; width:30px; padding:4px 0 0 0; height:30px;}
.pagination .results { float:right; height:35px; line-height:35px; font-size:13px; color:#999;}
/* BOX GENERAL */
.box-general { margin-bottom: 1.5vw; margin-top: 0.4vw; display:inline-block; width:100%;}
.box-general .box-title { height:40px; margin:15px 0 30px 0;}
.product-tab .title,
.box-general .box-title p,
.box-general .box-title h6 {
display: block;
line-height:40px;
margin:1em 0 1em;
padding:0;
font-family: 'Madera','Roboto Condensed', Helvetica, Arial, sans-serif;
/* font-variant: small-caps; */
text-transform: uppercase;
letter-spacing: 2px;
font-size: calc(15px + 0.7vw);
font-weight: var(--fw700);
}
.box-general .box-product { position:relative; display:block; width:100%;}
.box-general .box-content ul { margin:0; padding:0; list-style-type:none;}
.box-general .box-content .list { color:#666;}
.box-general .box-content .list li { padding:3px 0;}
.box-general .box-content .list li a { text-decoration:none; color:#333;}
.box-general .box-content .list li ul { display:none; margin:5px 0 0 10px;}
.box-general .box-content .list li ul li a { color:#666;}
.box-general .box-content .list li ul li a:hover { color:#333;}
.box-general .box-content .list li ul li a.active { color:#333;}
.box-general .box-content .list li a.active + ul { display:block;}
/* GENERAL GRID ITEM BOX */
.grid-item { float:left; width:100%; text-align:center;}
.grid-item .top { padding:0 3px 10px 3px;
height: 30px;
z-index: 25;
position: relative;}
.grid-item .top h3 { margin:0; padding:0; font-size:15px; font-weight:400;}
.grid-item .top h3 a { color:#333; text-decoration:none; background-color: #fff;}
.grid-item .middle { min-height:10px;}
.grid-item .middle .image { max-width:250px; min-width:200px; min-height:200px; margin:0 auto; position:relative;}
/*
.jcarousel-item .grid-item .middle .image { width:150px !important; max-width:150px !important; min-width:150px !important; min-height:150px !important; }
removed because we dont want 150px carousel images anymore, test and change back if there are problems
*/
.grid-item .middle .image a { text-decoration:none;}
.grid-item .middle .image img:hover {
transform: scale(1.07);
}
.grid-item .middle .image img { display:block; position:relative; max-width:100%; width: 100%; height: auto;
transition: -webkit-transform .2s cubic-bezier(.25,.46,.45,.94);
transition: transform .2s cubic-bezier(.25,.46,.45,.94);
}
.grid-item .bottom { margin-top:-2px; min-height:20px; padding:10px; position:relative; margin-left:4px; z-index:50;}
.grid-item .bottom .info { position:absolute; right:0px; top:-26px; background-color:#fff; background-position:left bottom; background-repeat:repeat-x; height:26px;}
.grid-item .bottom .info a {float:right; margin:5px; width:16px; height:16px; text-decoration:none; background-position:left top; background-repeat:no-repeat; transition:all 0.2s; -moz-transition:all 0.2s; -webkit-transition:all 0.2s; -o-transition:all 0.2s;}
.grid-item .bottom .info .add-wishlist { background-image:url(img/icon/add-wishlist.png);}
.grid-item .bottom .info .add-compare { background-image:url(img/icon/add-compare.png);}
.grid-item .bottom .info a:hover { background-position:left bottom;}
.grid-item .bottom .info .mini-rating-dark { float:right; margin:5px; width:80px; height:16px; background-image:url(img/mini-rating-dark.png); background-repeat:no-repeat;}
.grid-item .bottom .info .rating0 { background-position:0 0;}
.grid-item .bottom .info .rating1 { background-position:0 -16px;}
.grid-item .bottom .info .rating2 { background-position:0 -32px;}
.grid-item .bottom .info .rating3 { background-position:0 -48px;}
.grid-item .bottom .info .rating4 { background-position:0 -64px;}
.grid-item .bottom .info .rating5 { background-position:0 -80px;}
.grid-item .bottom .price { padding:2px 0 10px 0; font-size:18px; color:#fff; font-weight:400;}
.grid-item .bottom .price .icon_sale {
/*
position:absolute; top:-4px; left:-4px; z-index:999; width:67px; height:67px; background:url(img/icon/icon-sale.png) no-repeat left top;
*/
}
/* .grid-item .bottom .price .icon_new { position:absolute; top:-5px; left:7px; z-index:999; width:30px; height:80px; background:url(img/icon/icon_new.png) no-repeat left top;} */
.grid-item .bottom .price .price-old + .icon_new { right:7px; left:auto;}
.grid-item .bottom .price-new { font-size:18px; color: var(--main-color); font-weight: 400;}
.grid-item .bottom .price .price-old { font-size:14px; color:#666; text-decoration:line-through;}
.grid-item .bottom .price .price-tax { display:block; width:100%; padding:5px 0 0 0; font-size:13px; color:#979797;}
.grid-item .bottom .price + .actions { padding:10px 0 0 0;}
.grid-item .bottom .actions .button{
/* padding:10px 15px 10px 40px; */ width: 90%; border: 2px solid #000; border-radius: 0; background-color: #fff;
}
.grid-item .bottom .actions .button:hover,
.list-item .bottom .actions .button:hover
{ transform: scale(1.05); }
.grid-item .bottom .actions .button:hover:active,
.list-item .bottom .actions .button:hover:active {
transform: scale(1);
}
.grid-item .bottom .description {
display:none;
padding:10px;
position:absolute;
bottom:-100px;
left:0;
right:0;
border-bottom-style:solid;
border-bottom-width:3px;
line-height:1.5rem
}
.grid-item:hover .description { display:block;}
/* Module carousels (featured, viewed, also bought, latest, specials): no overlap with accord chips */
.product-card-carousel .bottom {
display: flex;
flex-direction: column;
align-items: stretch;
}
.product-card-carousel .bottom .info {
position: static;
top: auto;
right: auto;
height: auto;
min-height: 22px;
background: transparent;
background-image: none;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 8px 0;
padding: 0;
float: none;
}
.product-card-carousel .bottom .info .product-rating-stars {
float: none;
margin: 0;
}
/* Unicode star rating (replaces sprite in carousel cards) */
.product-rating-stars {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
line-height: 1;
letter-spacing: 0;
cursor: default;
}
.product-rating-stars__inner {
display: inline-flex;
gap: 3px;
align-items: center;
}
.product-rating-stars .star {
display: inline-block;
line-height: 1;
font-style: normal;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
.product-rating-stars .star--filled {
color: var(--star-color-dark);
}
.product-rating-stars .star--empty {
color: var(--star-color-bright);
opacity: 0.85;
}
/* Context overrides: reviews module + bestsellers module */
.reviews-rating .product-rating-stars { display: block; margin: 5px 0; }
.box-bestsellers .item-best .bottom .product-rating-stars { float: left; margin: 2px 10px 0 0; }
.tab-reviews .product-rating-stars { display: block; margin: 4px 0 1px 0; }
/* GRID ITEM BOX --- jcarousel item style */
.jcarousel-box-product ul > div { /* my add for flex display */
display: flex;
flex-direction: row;
}
.jcarousel-box-product ul > div > div { /* my add for flex display */
float: none !important;
}
.jcarousel-box-product ul, .jcarousel-box-product li { margin:0; padding:0; list-style-type: none;} /* my add */
.column-left .jcarousel-box-product .jcarousel-item-horizontal,
.column-right .jcarousel-box-product .jcarousel-item-horizontal { width:220px;}
.content-top .jcarousel-box-product .jcarousel-item-horizontal,
.column-center .jcarousel-box-product .jcarousel-item-horizontal,
.content-bottom .jcarousel-box-product .jcarousel-item-horizontal { width:154px;}
.column-left + .column-center .jcarousel-box-product .jcarousel-item-horizontal,
.column-right + .column-center .jcarousel-box-product .jcarousel-item-horizontal { width:173px;}
.column-left + .column-right + .column-center .jcarousel-box-product .jcarousel-item-horizontal { width:227px;}
/* GENERAL LIST ITEM BOX */
.list-item { position:relative; /*overflow:auto; remove and use the clearfix below instead*/}
.list-item .image { float:left; width:200px; min-height:200px;}
.list-item .image img { display:block; position:relative; max-width:100%; margin:0 auto;}
.list-item .image .icon_mini { position:absolute; bottom:10px; width:24px; height:24px; background-color:transparent; background-repeat:no-repeat; background-position:center center;}
.list-item .image .move_static { background-image:url(img/icon/move_static.png); left:10px;}
.list-item .top { margin:0 0 0 210px;}
.list-item .top h3 { margin:0; padding:0; font-size:22px;}
.list-item .top h3 a { color:#333; text-decoration:none;}
.list-item .top .description h4 { margin:0; padding:0; font-size:13px; line-height:25px; font-weight:400;}
.list-item .bottom { position:absolute; bottom:0; right:0; z-index:1; left:210px; height:60px; background-color:#f8f9fa}
.list-item .bottom .info { position:absolute; right:0px; top:-26px; background-color:#f8f9fa; background-position:left bottom; background-repeat:repeat-x; height:26px;}
.list-item .bottom .info a {float:right; margin:5px; width:16px; height:16px; text-decoration:none; background-position:left top; background-repeat:no-repeat; transition:all 0.2s; -moz-transition:all 0.2s; -webkit-transition:all 0.2s; -o-transition:all 0.2s;}
.list-item .bottom .info .add-wishlist { background-image:url(img/icon/add-wishlist.png);}
.list-item .bottom .info .remove-wishlist { background-image:url(img/icon/remove-wishlist.png);}
.list-item .bottom .info .add-compare { background-image:url(img/icon/add-compare.png);}
.list-item .bottom .info a:hover { background-position:left bottom;}
.list-item .bottom .info .mini-rating-dark { float:right; margin:5px; width:80px; height:16px; background-image:url(img/mini-rating-dark.png); background-repeat:no-repeat;}
.list-item .bottom .info .rating0 { background-position:0 0;}
.list-item .bottom .info .rating1 { background-position:0 -16px;}
.list-item .bottom .info .rating2 { background-position:0 -32px;}
.list-item .bottom .info .rating3 { background-position:0 -48px;}
.list-item .bottom .info .rating4 { background-position:0 -64px;}
.list-item .bottom .info .rating5 { background-position:0 -80px;}
.list-item .bottom .price { position:absolute; left:0; top:0; padding:13px 0 0 13px; font-size:20px; color:#fff; font-weight:400;}
.list-item .bottom .price .price-new { padding:0 0 0 30px; font-size:18px; color: var(--main-color); font-weight: 400;}
.list-item .bottom .price .icon_sale { /*
position:absolute; top:-4px; left:-4px; z-index:999; width:67px; height:67px; background:url(img/icon/icon-sale.png) no-repeat left top;
*/
}
.list-item .bottom .price .price-old { font-size:14px; color:#666; text-decoration:line-through;}
.list-item .bottom .price .price-tax { display:none;}
.list-item .bottom .actions { position:absolute; right:10px; top:9px;}
.list-item .bottom .actions .button {
width: 250px; border: 2px solid #000; background: #fff;
/* border-top:1px solid #7d7d7d; box-shadow:0 1px 3px rgba(25,25,25,1); background-image:url(img/bg_add_cart.png); background-position:left center; padding:10px 15px 10px 40px ; */}
.list-item .bottom .actions .button:hover { /* background-color:#4e4e4e; background-color:#E23469; */ }
/* PRODUCT GRID */
.product-grid { display:inline-block; margin-left:-5px;}
.product-grid .grid-item { margin:0 0 40px 5px;}
.column-left + .column-center .product-grid .grid-item,
.column-right + .column-center .product-grid .grid-item { width:230px;}
.column-center .product-grid .grid-item { /*width:231px; */ width: 24%;}
.column-left + .column-right + .column-center .product-grid .grid-item { width:227px;}
/* PRODUCT LIST */
.product-list { display:inline-block; width:100%;}
.product-list .list-item { margin-bottom:20px;}
.column-left + .column-right + .column-center .list-item { padding:0 0 90px 0;}
.column-left + .column-right + .column-center .list-item .bottom { left:0;}
/* clearfix for .product-list .list-item*/
.product-list .list-item:before, .product-list .list-item:after {
content: "";
display: table;
}
.product-list .list-item:after {
clear: both;
}
.product-list .list-item {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
/* MODULE Camera Slideshow */
.box-slideshow { display:inline-block; width:100%; margin-bottom:20px; }
.wossy-dark .content-top .camera_slideshow { margin:-10px -20px 0 -20px;}
.wossy-light .content-top .camera_slideshow { margin:-10px 0 0 0;}
.camera_thumb { width:200px;}
/* MODULE Welcome */
.module-welcome { margin-bottom:20px; display:inline-block; width:100%;}
.module-welcome .title { text-align:left; margin:0; line-height:40px;}
.module-welcome .text { line-height:25px;}
.module-welcome .text p { margin:10px 0 0 0;}
.module-welcome .text img { max-width:100%;}
/* MODULE jCarousel */
.module-jcarousel { margin-bottom:20px;}
/* MODULE Store */
.box-store p { font-size:13px; margin:0 0 10px 0;}
.box-store select { width:95%; min-width:95%; max-width:95%;}
/* MODULE Google Talk */
.box-google-talk { text-align:center;}
/* MODULE Banner */
.box-banner .box-content div { text-align:center; width:100%; display:none;}
.box-banner .box-content div a { display:block; width:100%;}
.box-banner .box-content div img { height:auto; max-width:100%; display:block; margin:0 auto;}
/* MODULE Bestsellers */
.box-bestsellers {
margin-top:20px;
}
.box-bestsellers .item-best { position: relative;
overflow: visible;
margin: 0 0 30px 0;
display: table;
width: 100%;}
.box-bestsellers .item-best:last-child { margin:0;}
.box-bestsellers .item-best .thumb { /*float:left;*/ width: 80px; max-width: 80px; display: table-cell;}
.box-bestsellers .item-best .thumb img { max-width:100%; height: auto; aspect-ratio: 1 / 1;}
.box-bestsellers .item-best .info { /*margin-left:55px; padding:0 0 20px 0;*/ margin-left: 67px;
padding: 0;
display: table-cell;
vertical-align: top;
position: relative;}
.box-bestsellers .item-best .info h3 {
margin:-3px 0 0 0; padding:0; font-size:16px;
line-height:16px;
min-height:34px;
font-weight:400;
}
.box-bestsellers .item-best .info h3 a { text-decoration:none; color:#333;}
.box-bestsellers .item-best .info .price { position:absolute; /*bottom:40px; */ left:0; font-size:14px; color:#999;}
.box-bestsellers .item-best .info .price .price-new { color:var(--main-color); font-size:14px;}
.box-bestsellers .item-best .info .price .price-old { text-decoration:line-through; font-size: 13px;}
.box-bestsellers .item-best .bottom { display:inline-block; width:100%; padding:4px 0;
background-color:none; bottom: 3px;
position: absolute;
left: 0;}
.box-bestsellers .item-best .bottom .add {
float:left; width:20px; height:20px;
border:none; background:url(img/icon/gray_add_cart.png) no-repeat center center; }
/*
.box-bestsellers .item-best .bottom .add:before{
content: '\e810';
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
color:#999;
font-size: 16px;
}
*/
.box-bestsellers .item-best .bottom .mini-rating-gray {
float:left;
margin:2px 10px 0 0;
width:80px;
height:16px;
background-image:url(img/mini-rating-gray.png);
background-repeat:no-repeat;
}
.box-bestsellers .item-best .bottom .rating0 { background-position:0 0;}
.box-bestsellers .item-best .bottom .rating1 { background-position:0 -16px;}
.box-bestsellers .item-best .bottom .rating2 { background-position:0 -32px;}
.box-bestsellers .item-best .bottom .rating3 { background-position:0 -48px;}
.box-bestsellers .item-best .bottom .rating4 { background-position:0 -64px;}
.box-bestsellers .item-best .bottom .rating5 { background-position:0 -80px;}
.content-top .box-bestsellers .box-content,
.content-bottom .box-bestsellers .box-content {
overflow: auto;
margin: 0 0 0 0px;
counter-set: bestcounter;
overflow: visible;
display: grid;
align-content: stretch;
align-items: start;
/* grid-template-rows: 95px; */
justify-content: center;
justify-items: stretch;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
@media screen and (min-width:766px) {
.content-top .box-bestsellers .box-content,
.content-bottom .box-bestsellers .box-content {
grid-template-rows: repeat(5, 1fr);
grid-auto-flow: column;
}
}
.content-top .box-bestsellers .item-best,
.content-bottom .box-bestsellers .item-best {
float:left;
width:460px;
margin:20px 10px 10px 50px;
counter-increment: bestcounter;
}
.column-left + .column-center .content-bottom .box-bestsellers .item-best,
.column-right + .column-center .content-bottom .box-bestsellers .item-best { width:339px;}
.content-top .box-bestsellers .item-best:before ,
.content-bottom .box-bestsellers .item-best:before {
content: "" counter(bestcounter) "";
font-size: 100px;
font-style: italic;
/* vertical-align: baseline; */
position: absolute;
/* margin: 0 0 30px; */
color: var(--main-color);
/* width: 0; */
/* height: 0; */
overflow: visible;
top: -20px;
left: -90px;
filter: grayscale(0.85) brightness(1.3);
opacity: 30%;
font-weight: bold;
text-align: right;
width: 100px;
}
/* CATEGORY INFO */
.category-info { margin-bottom:20px; overflow-y:auto; overflow-x:hidden;}
.category-info .image { float:right; margin:0 0 0 10px; max-width:100%;}
.category-info img { max-width:100%;}
.category-info p { line-height:25px; margin:0 0 15px 0;}
/* CATEGORY LIST */
.category-list { margin-bottom:20px; margin-top:-20px;}
.category-list .shadow { padding:0 50px; background:url(img/sh_left_top.png) no-repeat left bottom, url(img/sh_right_top.png) no-repeat right bottom;}
.category-list .shadow ul { margin:0; padding:10px 0 20px 0; list-style-type:none; font-size:13px; background:url(img/sh_top.png) repeat-x left bottom;}
.category-list .shadow ul li { display:inline-block; width:24%; margin:3px 0; vertical-align:top;}
.category-list .shadow ul li h4 { font-weight:400; margin:0; padding:0;}
.category-list .shadow ul li a { display:block; padding:5px; text-decoration:none; color:#666;}
.category-list .shadow ul li a:hover { background-color:#f8f9fa; color:#333;}
.column-left + .column-right + .column-center .category-list .shadow ul li { width:49%;}
/* ALL PRODUCT PAGE */
.top_product_panel { display:inline-block; width:100%; margin:0;}
.gallery-product { /*float:left; width:380px; */ display: inline-block;}
.gallery-product .image-additional { float:left; /* width:75px;*/}
.gallery-product .image-additional ul { margin:0; padding:0; list-style-type:none;}
.gallery-product .image-additional ul li { width:100%; height:50px !important;}
.gallery-product .image-additional ul li a { display:block; text-align:center; position:relative; width:50px; min-width:50px; max-width:50px; height:50px; min-height:50px; max-height:50px; left:50%; margin:0 0 0 -25px;}
.gallery-product .image-additional ul li img { max-width:100%; max-height:50px;}
.gallery-product .image { float:left; position:relative;
/*
width:300px; min-height:300px;
*/
width: calc(200px + 15vw);
min-height: 300px;
max-width: 500px;
padding:1px; background-color:#fff; /* border:1px solid #e9e9e9; */ }
.gallery-product .image img {
max-width:100%;
width: 100%;
}
.gallery-product .image .icon_save { line-height: 15px; position:absolute; top:-15px;right: 10px;z-index: 50;width: 69px;height: 70px;
background: url('../../image/savebadge.png') no-repeat left top;
color: #fff;font-size: 12px;text-align: center; padding:12px 0 0 2px;}
.save_rotate {}
.save_badge_num {line-height: 40px; margin: -5px 0 0 0px;font-size: 28px; letter-spacing: -1px;}
.save_per {font-size: 22px; }
.gallery-product .image .icon_sale { position:absolute; top:-5px; left:7px; z-index:50; width:30px; height:80px; background:url(img/icon/icon-sale.png) no-repeat left top;}
.gallery-product .image .icon_mini { position:absolute; bottom:10px; width:24px; height:24px; background-color:transparent; background-repeat:no-repeat; background-position:center center;}
.gallery-product .image .move_static { background-image:url(img/icon/move_static.png); right:44px;}
.gallery-product .image .zoom_static { background-image:url(img/icon/zoom_static.png); right:10px; z-index:1000; cursor:pointer;}
.product-info { padding:0;}
.product-info .price { /*border-bottom:3px solid #ededed; */ padding:0 0 3px 0; overflow:visible; }
.product-info .price p { margin: 5px 0; line-height: 22px; font-size:14px; font-weight:400;}
.product-info .price span {font-weight:700; /* font-family:'Bariol',Arial,Tahoma,sans-serif;*/ }
.product-info .price .price-rrp { text-decoration:line-through; color:#333;font-size: 14px; }
.product-info .price .price-old { text-decoration:line-through; color:#333;font-size: 16px;}
.product-info .price .price-new { color:var(--main-color); font-size: 28px; }
.product-info .price .price-grid { display:flex; align-items: flex-end; gap:16px; }
.product-info .price .price-grid-current { flex:0 0 auto; }
.product-info .price .price-grid-old { flex:1 1 auto; }
.product-info .price .price-grid-old p { margin:2px 0; line-height:1.3; }
.product-info .price .price-grid-old small { font-size:12px; color:#888; display:block; }
.product-info .price .price-tax { display:block; font-size:14px; color:#aaa; font-weight:400;}
.product-info .price .reward { display:block; font-size:14px; color:#666; font-weight:400; padding:2px 0;}
.product-info .price .discount { font-size:14px; color:#666; font-weight:400;}
.product-info .price .discount span { display:block; padding:2px 0;}
.product-info .description { margin:0; padding: 5px 0; list-style-type:none;}
.product-info .description li { font-size:13px; /* color:#999;*/ padding:3px 0;}
.product-info .description li i { font-style:normal; color:#333;}
.product-info .description li a { text-decoration:none; /*color:#999;*/}
.product-info .options { /* border-top:3px solid #ededed; my add / remove */ margin:10px 0 0 0; padding:10px 0 0 0;}
.product-info .options .title { padding:0 0 7px 0;}
.product-info .options .gpu_form input[type="text"], .product-info .options .gpu_form textarea { width:278px; min-width:278px; max-width:278px;}
.product-info .options .gpu_form select { width:300px; min-width:300px; max-width:300px;}
.product-info .options .error { display:block; color:#c12222; font-size:20px; font-weight:400px; margin:-10px 0 10px 0;}
.bottom_product_panel { position:relative; /* height:60px; background-color:#333; margin-bottom:15px; */ /* my comment and add below */
background-color: transparent; height: 40px; margin-top: -10px; margin-bottom: -10px; /*float: left;*/ margin-left: 0px; width: 310px;}
.bottom_product_panel .info { position:absolute; right:10px; top:-26px; background-color:#333; background-image:url(img/sh_bottom_26.png); background-position:left bottom; background-repeat:repeat-x; height:26px;}
.bottom_product_panel .info a { float:right; margin:5px; width:16px; height:16px; text-decoration:none; background-position:left top; background-repeat:no-repeat; transition:all 0.2s; -moz-transition:all 0.2s; -webkit-transition:all 0.2s; -o-transition:all 0.2s;}
.bottom_product_panel .info .add-wishlist { background-image:url(img/icon/add-wishlist.png);}
.bottom_product_panel .info .add-compare { background-image:url(img/icon/add-compare.png);}
.bottom_product_panel .info a:hover { background-position:left bottom;}
.bottom_product_panel .big-rating-dark {
/* position:absolute; top:14px; left:14px; comment by me*/
display: flex;
width:160px;
height:32px;
color: var(--star-color-dark);
font-size: 28px;
line-height: 28px;
letter-spacing: 5px;
}
.bottom_product_panel .rating1:before { content: "★";}
.bottom_product_panel .rating2:before { content: "★★";}
.bottom_product_panel .rating3:before { content: "★★★";}
.bottom_product_panel .rating4:before { content: "★★★★";}
.bottom_product_panel .rating5:before { content: "★★★★★";}
.bottom_product_panel .rating0:after { content: "★★★★★";color: var(--star-color-bright);}
.bottom_product_panel .rating1:after { content: "★★★★";color: var(--star-color-bright);}
.bottom_product_panel .rating2:after { content: "★★★";color: var(--star-color-bright);}
.bottom_product_panel .rating3:after { content: "★★";color: var(--star-color-bright);}
.bottom_product_panel .rating4:after { content: "★";color: var(--star-color-bright);}
.bottom_product_panel .actions { text-align:right; padding:8px 10px 0 0; display: none;}
.bottom_product_panel .actions .qty { display:inline-block; height:43px; padding:0 10px 0 0; }
.bottom_product_panel .actions .qty i { display:inline-block; font-style:normal; color:#999; height:43px; line-height:43px; padding:0 10px 0 0; }
.bottom_product_panel .actions .qty .box { display:inline-block; height:30px; padding:5px 0; vertical-align:top; border-bottom:1px solid #535353; border-top:1px solid #202020; border-radius:3px; background-color:#3f3f3f;}
.bottom_product_panel .actions .qty input { border:1px solid #3f3f3f; background-color:#3f3f3f; text-align:center; width:42px; max-width:42px; min-width:42px; padding:7px 0; color:#999; box-shadow:none;}
.bottom_product_panel .actions .qty input:focus { background-color:#3f3f3f; color:#ccc;}
/* .actions .button { box-shadow:0 1px 3px rgba(25,25,25,1); background-image:url(img/bg_add_cart.png); background-position:left center; padding:10px 15px 10px 40px;} */
.product-tab { margin-bottom:20px;}
.tab-description {
margin-bottom:10px;
font-size: calc(16px + 0.2vw); /*font-family: 'Source Sans Pro', 'Segoe UI', 'Trebuchet MS', Helvetica, sans-serif; */
font-weight: 300;}
.tab-description h1, .tab-description h2, .tab-description h3, .tab-description h4, .tab-description strong, .tab-description b { font-weight: 500; }
.tab-description .description-content p {
margin: 1em 0 1.2em 0;}
.tab-description .description-content p, .tab-description .description-content li {
line-height: 1.5em;
}
.tab-description .description-content h1 { text-align:left;}
.tab-description .description-content h4 {
font-size: inherit;
margin-bottom: 5px;
color: #2b2b2b;
}
.tab-specification table { border-collapse:collapse; border:none; width:100%; margin:0 0 10px 0; padding:0; font-weight:400;}
.tab-specification table:last-child { margin:0;}
.tab-specification table tr { border-bottom:1px solid #ededed; font-size:16px;}
.tab-specification table td { padding-top:10px; padding-bottom:10px;}
.tab-specification table .title-attr { background-color:#ededed; font-size:16px; text-align:center;}
.tab-specification table .left-attr { text-align:right; border-right:1px solid #ededed; width:48%; padding-right:2%;}
.tab-specification table .right-attr { text-align:left; color:#666; width:48%; padding-left:2%;}
.tab-reviews { position:relative;}
.tab-reviews table { border-collapse:collapse; border:none; width:100%; padding:0;}
.tab-reviews table td { vertical-align:top; padding:0 0 30px 0;}
.tab-reviews table .user { width:110px; font-size:18px; color:#666; padding:0 10px 30px 0;}
.tab-reviews table .user i { font-size:14px; color:#999; font-style:normal;}
.tab-reviews table .text { line-height:25px;}
.tab-reviews .mini-rating-dark { display:block; width:100%; margin:4px 0 1px 0; height:16px; background-image:url(img/mini-rating-dark.png); background-repeat:no-repeat;}
.tab-reviews .rating0 { background-position:-2px 0;}
.tab-reviews .rating1 { background-position:-2px -16px;}
.tab-reviews .rating2 { background-position:-2px -32px;}
.tab-reviews .rating3 { background-position:-2px -48px;}
.tab-reviews .rating4 { background-position:-2px -64px;}
.tab-reviews .rating5 { background-position:-2px -80px;}
.tab-reviews .pagination .links { width:100%; text-align:center;}
.tab-reviews .pagination .results { display:none;}
.tab-reviews .add-reviews { /* position:absolute; right:0; top:0;*/ min-height: 40px;}
.tab-reviews .wossy_add_reviews {
position:absolute; right:0;
height:40px;
line-height:37px;
color:#222;
padding:0 10px 0 10px;
cursor:pointer;
background-repeat:no-repeat;
background-position:10px center;
font-size: calc(6px + 0.5vw);
margin-top: -50px;
/* font-variant: small-caps; */
font-weight: var(--fw700);
border: 1px solid #000;
text-transform: uppercase;
font-family: 'Madera', 'Roboto Condensed', Helvetica,Arial,sans-serif;
}
.tab-reviews .wossy_add_reviews:hover { color:#fff; background-color:var(--main-color); }
.tab-reviews .wossy_add_reviews_open { color:#fff; background-color:var(--main-color); }
.tab-reviews .wossy_add_reviews .close { display:none; position:absolute; top:-5px; right:-5px; background-image:url(wossy-dark/img/x.png);
background-color:var(--main-color); background-repeat:no-repeat; background-position:center center; width:16px; height:16px; background-size: 16px; border-radius:9px;}
.tab-reviews .wossy_add_reviews_open .close { display:block;}
.tab-reviews .wossy_add_reviews_content { /* position:absolute; right:0; top:40px; z-index:103;*/ /* background-color:#ededed;*/ display:none; /*width:280px; padding:10px;*/ /* box-shadow:-5px 5px rgba(207,207,207,0.5); */}
.tab-reviews .wossy_add_reviews_content .gpu_form input[type="text"], textarea { width:95%;}
.tab-reviews .wossy_add_reviews_content .gpu_form textarea { width:95%; /* max-width:258px; min-width:258px; */}
.tab-reviews .wossy_add_reviews_content .gpu_form i { text-align:right; font-size:11px; margin:-15px 0 0 0;}
.tab-reviews .wossy_add_reviews_content .gpu_form .rating_box { border:1px solid #e6e6e6; background-color:#f8f8f8; box-shadow:inset 0 1px rgba(255,255,255,1); border-radius:3px; padding:10px; width:258px; margin:5px 0 0 0;}
.tab-reviews .wossy_add_reviews_content .gpu_form .rating_box input[type="radio"] { margin:1px 0 0 0;}
.tab-reviews .wossy_add_reviews_content .gpu_form .rating_box span { height:16px; line-height:16px; display:block; background-image:url(img/mini-rating-dark.png); background-repeat:no-repeat;}
.tab-reviews .wossy_add_reviews_content .gpu_form .rating_box > div { padding:5px 0; border-top:1px solid #fff; border-bottom:1px solid #e6e6e6;}
.tab-reviews .wossy_add_reviews_content .gpu_form .rating_box > div:first-child { border-top:none;}
.tab-reviews .wossy_add_reviews_content .gpu_form .rating_box > div:last-child { border-bottom:none;}
.tab-reviews .wossy_add_reviews_content .gpu_form .rating_box .rating1 { background-position:15px -16px;}
.tab-reviews .wossy_add_reviews_content .gpu_form .rating_box .rating2 { background-position:15px -32px;}
.tab-reviews .wossy_add_reviews_content .gpu_form .rating_box .rating3 { background-position:15px -48px;}
.tab-reviews .wossy_add_reviews_content .gpu_form .rating_box .rating4 { background-position:15px -64px;}
.tab-reviews .wossy_add_reviews_content .gpu_form .rating_box .rating5 { background-position:15px -80px;}
.tab-reviews .wossy_add_reviews_content .gpu_form label { display:block;}
.tab-reviews .wossy_add_reviews_content .gpu_form b { color:#999; float:right; font-size:11px; font-weight:400;}
.tab-reviews .wossy_add_reviews_content .gpu_form .captcha { text-align:center;}
.tab-reviews .wossy_add_reviews_content .buttons { padding:0;}
.pdp-reviews-empty { text-align:center; padding:32px 20px; background:#f8f8f6; margin:10px 0; }
.pdp-reviews-empty-icon { font-size:28px; display:block; margin:0 0 8px; }
.pdp-reviews-empty-headline { font-size:16px; font-weight:var(--fw700); margin:0 0 6px; color:#222; font-family:'Madera','Roboto Condensed',Helvetica,Arial,sans-serif; text-transform:uppercase; }
.pdp-reviews-empty-body { font-size:13px; color:#666; max-width:440px; margin:0 auto 14px; line-height:1.5; }
.pdp-reviews-empty-cta { display:inline-block; padding:8px 22px; font-size:13px; font-weight:var(--fw700); color:#222; background:transparent; border:1px solid #222; cursor:pointer; text-transform:uppercase; font-family:'Madera','Roboto Condensed',Helvetica,Arial,sans-serif; transition:background .2s,color .2s; }
.pdp-reviews-empty-cta:hover { background:var(--main-color); color:#fff; border-color:var(--main-color); }
.tab-related { margin-bottom:0;}
.tab-tags { margin-bottom:10px;}
.tab-tags .title { display:inline-block;}
.tab-tags .tags-content { margin:0 0 10px 0; height:10px; padding:15px 0; display:inline-block; vertical-align:top;}
.tab-tags .tags-content a { text-decoration:none;}
.tab-tags .tags-content a:hover { color:#333;}
/* ALL PRODUCT PAGE - special style */
.top_product_panel .gallery-product + .product-info {/* margin:0 0 0 390px;*/
margin: 0 0 0 20px;
display: inline-block;
vertical-align: top;
width: calc(100% - 220px - 15vw);
}
/*
.column-left + .column-right + .column-center .top_product_panel .product-info { margin:10px 0 0 0; float:left; width:100%;}
.column-left + .column-right + .column-center .top_product_panel .gallery-product { width:460px;}
.column-left + .column-right + .column-center .top_product_panel .gallery-product .image { width:375px;}
*/
/* OPENCART TABLE */
table.list { border-collapse:collapse; width:100%; border-top:1px solid #DDDDDD; border-left: 1px solid #DDDDDD; margin-bottom:20px;}
table.list td { border-right:1px solid #DDDDDD; border-bottom:1px solid #DDDDDD;}
table.list thead td { background-color:#EFEFEF; padding:0 8px;}
table.list thead td a, .list thead td { text-decoration:none; color:#222222; font-weight:400;}
table.list tbody td { vertical-align:top; padding:0 8px;}
table.list .left { text-align:left; padding:8px;}
table.list .right { text-align:right; padding:8px;}
table.list .center { text-align:center; padding:8px;}
table.radio { font-size:15px; width:100%; border-collapse:collapse;}
table.radio td { padding:5px; vertical-align:top;}
table.radio td label { display:block;}
table.radio tr td:first-child { width:1px;}
table.radio tr td:first-child input { margin-top:1px;}
table.radio tr.highlight:hover td { background-color:#f5f5f5;}
/* ADMIN PANEL */
.admin-panel { margin-bottom:20px;}
.admin-panel h2 { margin:0; padding:10px 0; border-bottom:1px solid #dedede;}
.admin-panel ul { margin:0; padding:5px 0 0 0; list-style-type:none;}
.admin-panel ul li { padding:5px 0;}
.admin-panel ul li a { text-decoration:none;}
.admin-panel ul li a:hover { color:#333;}
/* ADDRESSES INFO */
.info-addresses-box { position:relative; padding:10px; border:1px solid #dedede; margin-bottom:20px; background-color:#f5f5f5;}
.info-addresses-box p { margin:0; padding:0; line-height:25px;}
.info-addresses-box a.button { padding:10px; font-size:13px; position:absolute; right:10px;}
.info-addresses-box .edit_but { top:10px;}
.info-addresses-box .delete_but { top:55px;}
/* WISHLIST INFO */
.wishlist-info { margin-bottom:20px;}
/* ORDER HISTORY INFO */
.order-history-info { margin-bottom:20px;}
.order-history-info .order-list { margin-bottom:10px;}
.order-history-info .order-list .order-id { width:49%; float:left; margin-bottom:2px;}
.order-history-info .order-list .order-status { width:49%; float:right; text-align:right; margin-bottom:2px;}
.order-history-info .order-list .order-content { padding:10px 0; display:inline-block; width:100%; margin-bottom:20px; border-top:1px solid #EEEEEE; border-bottom:1px solid #EEEEEE;}
.order-history-info .order-list .order-content div { float:left; width:33.3%;}
.order-history-info .order-list .order-info { text-align:right;}
.order-history-info .order-detail { background:#EFEFEF; font-weight:bold;}
/* REWARD INFO */
.reward-info { margin-bottom:20px;}
/* RETURN INFO LIST */
.return-info-list { margin-bottom:20px;}
.return-info-list .return-list { margin-bottom:10px;}
.return-info-list .return-list .return-id { width:49%; float:left; margin-bottom:2px;}
.return-info-list .return-list .return-status { width:49%; float:right; text-align:right; margin-bottom:2px;}
.return-info-list .return-list .return-content { padding:10px 0px; display:inline-block; width:100%; margin-bottom:20px; border-top:1px solid #EEEEEE; border-bottom:1px solid #EEEEEE;}
.return-info-list .return-list .return-content div { float:left; width:33.3%;}
.return-info-list .return-list .return-info { text-align:right;}
/* TRANSACTION LIST */
.transaction-info { margin-bottom:20px;}
/* DOWNLOAD LIST INFO */
.download-list-info { margin-bottom:20px;}
.download-list-info .download-list { margin-bottom:10px;}
.download-list-info .download-list .download-id { width:49%; float:left; margin-bottom:2px;}
.download-list-info .download-list .download-status { width:49%; float:right; text-align:right; margin-bottom:2px;}
.download-list-info .download-list .download-content { padding:10px 0; display:inline-block; width:100%; margin-bottom:20px; border-top:1px solid #EEEEEE; border-bottom:1px solid #EEEEEE;}
.download-list-info .download-list .download-content div { float:left; width:33.3%;}
.download-list-info .download-list .download-info { text-align:right;}
/* SUCCESS INFO */
.success-info { margin-bottom:20px;}
.success-info p { line-height:25px;}
/* NOT FOUND INFO */
.not-found-info { margin-bottom:20px;}
/* CHECKOUT */
.checkout-heading { background-color:#f5f5f5; padding:10px; margin:0 0 10px 0;}
.checkout-heading a { font-size:12px; float:right; text-decoration:none; color:#333; margin:2px 0 0 0;}
.checkout-heading a:hover { text-decoration:underline;}
.checkout-content .success, .checkout-content .warning, .checkout-content .attention, .checkout-content .information, .checkout-content .wossy_empty { margin:10px 0;}
.checkout-product table { width:100%; border-collapse:collapse; margin-bottom:20px;}
.checkout-product td { padding:7px 0;}
.checkout-product thead td { background-color:#f8f9fa;}
.checkout-product thead .name { padding:7px 0 7px 7px; text-align:left;}
.checkout-product thead .quantity { text-align:center;}
.checkout-product thead .price { text-align:right;}
.checkout-product thead .total { text-align:right; padding:7px 7px 7px 0;}
.checkout-product tbody td { padding:7px 0; vertical-align:middel; border-bottom:1px solid #f8f9fa;}
.checkout-product tbody .name { text-align:left;}
.checkout-product tbody .name a { text-decoration:none;}
.checkout-product tbody .name small { color:#999;}
.checkout-product tbody .model { margin:0; padding:0; font-size:13px; color:#999;}
.checkout-product tbody .model b { font-weight:400; color:#333;}
.checkout-product tbody .quantity { text-align:center;}
.checkout-product tbody .price { margin:0; padding:0; font-size:13px; color:#999;}
.checkout-product tbody .total { text-align:right; padding:7px 7px 7px 0;}
.checkout-product tfoot td { text-align:right; border-bottom:1px solid #f8f9fa; padding:4px 7px;}
#confirm .payment { margin-bottom:20px;}
#confirm .payment .buttons .right input.button { text-shadow:1px 1px 0 #859612; background-color:#b7ce1d;}
/* CART */
.cart-page>form { float: left; width: 60%; min-width: 300px;}
.cart-page { margin-bottom:20px;}
.left_cart_page { float:right; background-color:#f8f9fa; padding:20px; width:34%; vertical-align:top;}
.left_cart_page .cart-module > div { display:none;}
.left_cart_page .panel .text_info { line-height:25px; margin:-5px 0 5px 0; padding:0;}
.left_cart_page .panel_content { margin-top:20px; background-color:#fff; padding:10px 10px 0 10px;}
.left_cart_page .panel_content input[type='text'] { width:180px; max-width:180px; min-width:180px;}
.left_cart_page .panel_content select { width:200px; max-width:200px; min-width:200px;}
.cart-info { margin-bottom:20px;}
.cart-info table { width:100%; border-collapse:collapse;}
.cart-info td { padding:7px 0;}
.cart-info thead td { background-color:#f8f9fa;}
.cart-info thead .name { padding:7px 0 7px 7px; text-align:left;}
.cart-info thead .quantity { text-align:center;}
.cart-info thead .price { text-align:right;}
.cart-info thead .total { text-align:right; padding:7px 7px 7px 0;}
.cart-info tbody td { padding:7px 0; vertical-align:middel; border-bottom:1px solid #f8f9fa;}
.cart-info tbody .image { text-align:center; width:90px;}
.cart-info tbody .image img { max-width:90px; }
.cart-info tbody .name { text-align:left; padding:7px 0 7px 7px;}
.cart-info tbody .name a { text-decoration:none;}
.cart-info tbody .name small { color:#999;}
.cart-info tbody .model { margin:0; padding:0; font-size:13px; color:#999;}
.cart-info tbody .model b { font-weight:400; color:#333;}
.cart-info tbody .quantity { text-align:center; width:70px}
.cart-info tbody .quantity input[type='text'] { text-align:center; width:48px; min-width:48px; max-width:48px; margin:0 0 10px 0; padding: 6px;max-width: 48px;font-weight: 400;font-size: 16px;}
.cart-info tbody .quantity input[type='image'] { cursor:pointer;}
.cart-info tbody .quantity img { cursor:pointer;}
.cart-info tbody .price { margin:0; padding:0; font-size:13px; color:#999;}
.cart-info tbody .total { text-align:right; padding:7px 7px 7px 0; width:100px;}
.cart-info tbody span.stock { color:#c12222; font-size:13px; text-decoration:blink;}
.right_cart_page { vertical-align:top; float:left; width: 60%; min-width: 300px;}
.right_cart_page .cart-total { overflow:auto; }
.right_cart_page .cart-total table { float:right; border-collapse:collapse;}
.right_cart_page .cart-total tr { color:#333;}
.right_cart_page .cart-total td { text-align:right; padding:4px 7px;}
.right_cart_page .cart-total td b { font-weight:400;}
.right_cart_page .cart-total tr:nth-last-child(2) { color:#000; font-weight: 400}
.cart-page .buttons { padding:20px 0 0 0; width:100%; clear:both; margin-bottom: -65px;}
/* MAINTENANCE */
.maintenance { margin-bottom:20px; padding:20px 0;}
/* MANUFACTURE LIST */
.manufacturer-list { margin-bottom:20px;}
.manufacturer-list .brand-index { text-align:center; margin:0; padding:0 0 15px 0;}
.manufacturer-list .brand-index a { display:inline-block; width:30px; height:30px; text-align:center; text-decoration:none; background-color:#f8f9fa; color:#999; line-height:30px; margin:0 3px 5px 0;}
.manufacturer-list .brand-index a:hover { color:#333;}
.manufacturer-list .brand-list { margin:0 0 20px 0; padding:0; list-style-type:none;}
.manufacturer-list .brand-list li { display:inline-block; width:24%; margin:0; padding:0; vertical-align:top;}
.manufacturer-list .brand-list li h2 { display:block; font-size:14px; font-weight:400; margin:0; padding:0;}
.manufacturer-list .brand-list li a { display:block; padding:10px 0 10px 10px; text-decoration:none; color:#666;}
.manufacturer-list .brand-list li a:hover { color:#333;}
.column-left + .column-right + .column-center .manufacturer-list .brand-list li { width:49%;}
/* SITEMAP */
.sitemap-info { overflow:auto;}
.sitemap-info .left { float:left; margin-bottom:20px; width:49%;}
.sitemap-info .right { float:right; margin-bottom:20px; width:49%;}
.sitemap-info ul { margin:0; padding:0; list-style-type:none; color:#666;}
.sitemap-info ul li { padding:3px 0;}
.sitemap-info ul li a { text-decoration:none; color:#333;}
.sitemap-info ul li a:hover { text-decoration:underline;}
.sitemap-info ul li ul { margin:5px 0 0 10px;}
.sitemap-info ul li ul li a { color:#666;}
/* CONTACT */
.contact-form-box .gpu_form a { text-decoration:none; color:#333;}
/* COMPARE PAGE */
.compare-page { margin-bottom:20px;}
.compare-page .compare-info { border-collapse:collapse; width:100%; border:none; margin-bottom:20px;}
.compare-page .compare-info thead td, .compare-page .compare-info thead tr td:first-child { background-color:#f8f9fa; text-align:left;}
.compare-page .compare-info tr td:first-child { text-align:right; width:20%; min-width:20%; max-width:20%;}
.compare-page .compare-info td { padding:7px; text-align:center; vertical-align:top; border-bottom:1px solid #f8f9fa;}
.compare-page .compare-info .name a { text-decoration:none;}
.compare-page .compare-info .price-old { color:#ccc; text-decoration:line-through;}
.compare-page .compare-info .price-new { color:var(--main-color) }
.compare-page .compare-info .mini-rating-dark { float:right; margin:5px 0; width:100%; height:16px; background-image:url(img/mini-rating-dark.png); background-repeat:no-repeat;}
.compare-page .compare-info .rating0 { background-position:center 0;}
.compare-page .compare-info .rating1 { background-position:center -16px;}
.compare-page .compare-info .rating2 { background-position:center -32px;}
.compare-page .compare-info .rating3 { background-position:center -48px;}
.compare-page .compare-info .rating4 { background-position:center -64px;}
.compare-page .compare-info .rating5 { background-position:center -80px;}
/* SEARCH PAGE */
.search-page h6 { font-size:20px; margin:0 0 20px 0;}
.search-page .search-panel { overflow:auto; margin-bottom:20px; position:relative;}
.search-page .search-panel .left { float:left; width:300px;}
.search-page .search-panel .left input[type="text"] { width:278px; max-width:278px; min-width:278px; margin:0 0 10px 0;}
.search-page .search-panel .left select { width:300px; max-width:300px; min-width:300px;}
.search-page .search-panel .right { margin:0 0 0 310px; width:300px; vertical-align:top;}
.search-page .search-panel .right p { margin:0; padding:11px 0;}
.search-page .search-panel .button { position:absolute; right:0; bottom:0;}
/*******************************************************/
/* START UPDATE JANUARY 2013 */
/*******************************************************/
/* MODULE Filter */
.box-filter .box-content .list { margin:0 0 15px 0;}
.box-filter .box-content .list li span { color:#333;}
.box-filter .box-content .list li ul { display:block;}
.box-filter .box-content .list .active { color:#333;}
/*******************************************************/
/* FINISH UPDATE JANUARY 2013 */
/*******************************************************/
/**
* Flex layout attribute
* HTML layout helper based on CSS flexbox specification.
*
* VERSION: v1.0.3
* DATE: 2016-06-21
* URL: http://progressivered.com/fla/
* AUTHOR: Stefan Kovac | stef@progressivered.com | http://progressivered.com/
* LICENSE: MIT
*/
.product-tab{box-sizing:border-box}
#header *,
.footer *,
.pagination *,
.gallery-product *,
.tab-reviews * {
box-sizing: content-box !important;
}
:after, :before {box-sizing:inherit}
[layout]{display:-ms-flexbox;display:flex}[layout*=column],[layout*=row]{width:100%;max-width:100%}[layout^=row]{-ms-flex-direction:row;flex-direction:row}[layout^=column]{-ms-flex-direction:column;flex-direction:column}[layout*=row][layout*=reverse]{-ms-flex-direction:row-reverse;flex-direction:row-reverse}[layout*=column][layout*=reverse]{-ms-flex-direction:column-reverse;flex-direction:column-reverse}[layout*=columns],[layout*=rows]{-ms-flex-wrap:wrap;flex-wrap:wrap}[layout=none]{-ms-flex:none;flex:none}[layout*=column][layout*=top-],[layout*=row][layout*=-left]{-ms-flex-pack:start;justify-content:flex-start}[layout*=column][layout*=center-],[layout*=row][layout*=-center],[layout~=centered]{-ms-flex-pack:center;justify-content:center}[layout*=column][layout*=bottom-],[layout*=row][layout*=-right]{-ms-flex-pack:end;justify-content:flex-end}[layout*=column][layout*=spread-],[layout*=row][layout*=-spread]{-ms-flex-pack:distribute;justify-content:space-around}[layout*=column][layout*=justify-],[layout*=row][layout*=-justify]{-ms-flex-pack:justify;justify-content:space-between}[layout*=column][layout*=-left],[layout*=row][layout*=top-]{-ms-flex-align:start;-ms-grid-row-align:flex-start;align-items:flex-start}[layout*=column][layout*=-center],[layout*=row][layout*=center-],[layout~=centered]{-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}[layout*=column][layout*=-right],[layout*=row][layout*=bottom-]{-ms-flex-align:end;-ms-grid-row-align:flex-end;align-items:flex-end}[layout*=column][layout*=-stretch],[layout*=row][layout*=stretch-]{-ms-flex-align:stretch;-ms-grid-row-align:stretch;align-items:stretch}[layout*=columns][layout*=-left],[layout*=rows][layout*=top-]{-ms-flex-line-pack:start;align-content:flex-start}[layout*=columns][layout*=-right],[layout*=rows][layout*=bottom-]{-ms-flex-line-pack:end;align-content:flex-end}[layout*=columns][layout*=-center],[layout*=rows][layout*=center-]{-ms-flex-line-pack:center;align-content:center}[layout*=columns][layout*=-justify],[layout*=rows][layout*=justify-]{-ms-flex-line-pack:justify;align-content:space-between}[layout*=columns][layout*=-spread],[layout*=rows][layout*=spread-]{-ms-flex-line-pack:distribute;align-content:space-around}[layout*=columns][layout*=-stretch],[layout*=rows][layout*=stretch-]{-ms-flex-line-pack:stretch;align-content:stretch}@media (-ms-high-contrast:none),screen and (-ms-high-contrast:active){[layout*=column]:not([layout*=row])>*{max-width:auto}[layout*=column][self*=top]{height:auto!important}[self~=size-]>*{height:auto}}[layout*=column]:not([layout*=row]) [self*=left],[layout*=row]:not([layout*=column]) [self*=top]{-ms-flex-item-align:start;align-self:flex-start}[self~=center]{-ms-flex-item-align:center;align-self:center}[layout*=column]:not([layout*=row]) [self*=right],[layout*=row]:not([layout*=column]) [self*=bottom]{-ms-flex-item-align:end;align-self:flex-end}[self*=stretch]{-ms-flex-item-align:stretch;align-self:stretch}[layout][self*=center]{margin-left:auto;margin-right:auto}[layout][self*=right]{margin-right:0}[layout][self*=left]{margin-left:0}[layout*=column] [self*=bottom]{margin-top:auto}[layout*=column] [self*=top]{margin-bottom:auto}[layout*=row] [self*=left]{margin-right:auto}[layout*=row] [self*=right]{margin-left:auto}[self~=size-1of5]{width:20%}[self~=size-1of4]{width:25%}[self~=size-1of3]{width:33.33333%}[self~=size-2of5]{width:40%}[self~=size-1of2]{width:50%}[self~=size-3of5]{width:60%}[self~=size-2of3]{width:66.6666%}[self~=size-3of4]{width:75%}[self~=size-4of5]{width:80%}[self~=size-1of1]{width:100%}[layout*=column][layout*=stretch-]>:not([self*=size-]),[layout*=row][layout*=-stretch]>:not([self*=size-]),[self~=size-x1]{-ms-flex:1 0 0%!important;flex:1 0 0%!important}[self~=size-x2]{-ms-flex:2 0 0%!important;flex:2 0 0%!important}[self~=size-x3]{-ms-flex:3 0 0%!important;flex:3 0 0%!important}[self~=size-x4]{-ms-flex:4 0 0%!important;flex:4 0 0%!important}[self~=size-x5]{-ms-flex:5 0 0%!important;flex:5 0 0%!important}[self~=size-x6]{-ms-flex:6 0 0%!important;flex:6 0 0%!important}[self~=size-x7]{-ms-flex:7 0 0%!important;flex:7 0 0%!important}[self~=size-x8]{-ms-flex:8 0 0%!important;flex:8 0 0%!important}[self~=size-x9]{-ms-flex:9 0 0%!important;flex:9 0 0%!important}[self*=size-auto]{-ms-flex:1 1 auto;flex:1 1 auto}[self*=size-x0]{-ms-flex:0 0 auto;flex:0 0 auto}[self~=size-xxlarge]{max-width:1440px;width:100%}[self~=size-xlarge]{max-width:1200px;width:100%}[self~=size-large]{max-width:960px;width:100%}[self~=size-larger]{max-width:840px;width:100%}[self~=size-medium]{max-width:720px;width:100%}[self~=size-smaller]{max-width:600px;width:100%}[self~=size-small]{max-width:480px;width:100%}[self~=size-xsmall]{max-width:360px;width:100%}[self~=size-xxsmall]{max-width:240px;width:100%}[self*=size-x]:not([self*=small]):not([self*=large]){-ms-flex-negative:1;flex-shrink:1}[self~=first]{-ms-flex-order:-1;order:-1}[self~=order-1]{-ms-flex-order:1;order:1}[self~=order-2]{-ms-flex-order:2;order:2}[self~=order-3]{-ms-flex-order:3;order:3}[self~=last]{-ms-flex-order:999;order:999}[layout*=column]:not([layout*=row])>*{-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:auto;flex-basis:auto}@media screen and (max-width:64em){[layout*=lg-row]{-ms-flex-direction:row;flex-direction:row}[layout*=lg-column]{-ms-flex-direction:column;flex-direction:column}[layout*=lg-columns],[layout*=lg-rows]{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (max-width:52em){[layout*=md-row]{-ms-flex-direction:row;flex-direction:row}[layout*=md-column]{-ms-flex-direction:column;flex-direction:column}[layout*=md-columns],[layout*=md-rows]{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (max-width:40em){[layout*=sm-row]{-ms-flex-direction:row;flex-direction:row}[layout*=sm-column]{-ms-flex-direction:column;flex-direction:column}[layout*=sm-columns],[layout*=sm-rows]{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (max-width:64em){[self*=lg-full]{-ms-flex:1 1 100%!important;flex:1 1 100%!important;width:100%;max-width:100%}[self*=lg-half]{-ms-flex:1 1 50%!important;flex:1 1 50%!important;width:50%;max-width:50%}[self~=lg-first]{-ms-flex-order:-1;order:-1}[self~=lg-last]{-ms-flex-order:999;order:999}[self~=lg-hide]{display:none}[self~=lg-show]{display:inherit}}@media screen and (max-width:52em){[self*=md-full]{-ms-flex:1 1 100%!important;flex:1 1 100%!important;width:100%;max-width:100%}[self*=md-half]{-ms-flex:1 1 50%!important;flex:1 1 50%!important;width:50%;max-width:50%}[self~=md-first]{-ms-flex-order:-1;order:-1}[self~=md-last]{-ms-flex-order:999;order:999}[self~=md-hide]{display:none}[self~=md-show]{display:inherit}}@media screen and (max-width:40em){[self*=sm-full]{-ms-flex:1 1 100%!important;flex:1 1 100%!important;width:100%;max-width:100%}[self*=sm-half]{-ms-flex:1 1 50%!important;flex:1 1 50%!important;width:50%;max-width:50%}[self~=sm-first]{-ms-flex-order:-1;order:-1}[self~=sm-last]{-ms-flex-order:999;order:999}[self~=sm-hide]{display:none}[self~=sm-show]{display:inherit}}
[layout*=columns] img, [layout*=rows] img {
padding: 0 0.4em 0.4em 0.4em;
}
.simplecheckout-cart * td, .simplecheckout-cart * span {
font-size: 18px;
}
.termsfeed-com---palette-light .cc-nb-title{
color: #fff;
}
#termsfeed-com---nb.fade-out {
opacity: 0;
visibility: hidden;
transition: opacity 2s ease, visibility 2s linear;
}
#termsfeed-com---nb {
position: fixed !important;
bottom: 12px !important;
right: 12px !important;
left: auto !important;
width: auto !important;
max-width: 280px !important;
font-size: 11px !important;
line-height: 1.3 !important;
padding: 8px 10px !important;
border-radius: 6px !important;
background: rgba(0,0,0,0.9) !important;
color: #fff !important;
z-index: 999999 !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
opacity: 1;
visibility: visible;
transition: opacity 2s ease, visibility 0s linear;
}
/* Hide big containers inside */
#termsfeed-com---nb .cc-nb-main-container {
max-width: 260px !important;
padding: 0 !important;
margin: 0 !important;
}
/* Remove verbose text */
#termsfeed-com---nb .cc-nb-text-container {
display: none !important;
}
/* Make title smaller */
#termsfeed-com---nb .cc-nb-title {
font-size: 12px !important;
font-weight: 500 !important;
margin: 0 0 4px 0 !important;
}
/* Button styling */
#termsfeed-com---nb .cc-nb-buttons-container {
display: flex !important;
gap: 4px !important;
justify-content: flex-end !important;
}
#termsfeed-com---nb button {
font-size: 10px !important;
padding: 3px 6px !important;
border-radius: 3px !important;
border: none !important;
cursor: pointer !important;
}
#termsfeed-com---nb .cc-nb-okagree {
background: #fff !important;
color: #000 !important;
}
#termsfeed-com---nb .cc-nb-reject,
#termsfeed-com---nb .cc-nb-changep {
background: transparent !important;
color: #fff !important;
}
.flexy__child {
-webkit-box-flex: 1;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
.flexy__child--fill {
flex-basis: 100%;
}
.flexy--row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.flexy--column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.flexy--between {
-webkit-box-pack: justify;
justify-content: space-between;
}
.flexy--around {
justify-content: space-around;
}
.flexy--justify-start {
-webkit-box-pack: start;
justify-content: flex-start;
}
.flexy--justify-end {
-webkit-box-pack: end;
justify-content: flex-end;
}
.flexy--justify-center {
-webkit-box-pack: center;
justify-content: center;
}
.flexy--items-center {
-webkit-box-align: center;
align-items: center;
}
.flexy--self-end {
align-self: flex-end;
}
.flexy--reverse-column {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
flex-direction: column-reverse;
}
.svg-bg {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 1;
}
.svg-icon {
width: 1em;
height: 1em;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.svg-icon__sprite {
display: none;
}
.svg-icon--rotated-180 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.space--small {
margin-bottom: 0.7em;
}
@media (max-width: 75em) {
.space--small {
margin-bottom: 0.518em;
}
}
.space--normal {
margin-bottom: 1.4em;
}
@media (max-width: 75em) {
.space--normal {
margin-bottom: 1.036em;
}
}
.space--big {
margin-bottom: 4.2em;
}
@media (max-width: 75em) {
.space--big {
margin-bottom: 3.108em;
}
}
.space--huge {
margin-bottom: 5.6em;
}
@media (max-width: 75em) {
.space--huge {
margin-bottom: 4.144em;
}
}
.color--white {
color: #FFFFFF;
}
.fill--white {
fill: #FFFFFF;
}
.stroke--white {
stroke: #FFFFFF;
}
.color--black {
color: #000000;
}
.fill--black {
fill: #000000;
}
.stroke--black {
stroke: #000000;
}
.color--red {
color: #FF5572;
}
.fill--red {
fill: #FF5572;
}
.stroke--red {
stroke: #FF5572;
}
.color--coral {
color: #FF6960;
}
.fill--coral {
fill: #FF6960;
}
.stroke--coral {
stroke: #FF6960;
}
.color--orange {
color: #FF7555;
}
.fill--orange {
fill: #FF7555;
}
.stroke--orange {
stroke: #FF7555;
}
.color--gray {
color: #404040;
}
.fill--gray {
fill: #eaeaea;
}
.stroke--gray {
stroke: #404040;
}
.card {
height: 15em;
border-radius: 15em 15em 0 0;
display: -webkit-box;
display: flex;
-webkit-box-align: end;
align-items: flex-end;
-webkit-box-pack: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.2);
}
.rating__background {
width: 100%;
height: 100%;
min-width: 20%;
position: absolute;
border-radius: 3em;
z-index: -1;
bottom: 0;
left: 0;
-webkit-transition: width 0.3s cubic-bezier(0.54, -0.24, 0.46, 1.28);
transition: width 0.3s cubic-bezier(0.54, -0.24, 0.46, 1.28);
background-color: #000;
}
.rating [type='radio'] {
display: none;
}
.sparks:before {
content: '';
position: absolute;
pointer-events: none;
z-index: 1;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 400%;
height: 400%;
background-image: radial-gradient(#00c380, #00c380 70%, rgba(0, 0, 0, 0) 71%), radial-gradient(#00c380, #00c380 70%, rgba(0, 0, 0, 0) 71%), radial-gradient(#00c380, #00c380 70%, rgba(0, 0, 0, 0) 71%), radial-gradient(#00c380, #00c380 70%, rgba(0, 0, 0, 0) 71%), radial-gradient(#00c380, #00c380 70%, rgba(0, 0, 0, 0) 71%), radial-gradient(#00c380, #00c380 70%, rgba(0, 0, 0, 0) 71%), radial-gradient(#00c380, #00c380 70%, rgba(0, 0, 0, 0) 71%), radial-gradient(#00c380, #00c380 70%, rgba(0, 0, 0, 0) 71%), radial-gradient(#00c380, #00c380 70%, rgba(0, 0, 0, 0) 71%), radial-gradient(#00c380, #00c380 70%, rgba(0, 0, 0, 0) 71%), radial-gradient(#00c380, #00c380 70%, rgba(0, 0, 0, 0) 71%), radial-gradient(#00c380, #00c380 70%, rgba(0, 0, 0, 0) 71%), radial-gradient(#00c380, #00c380 70%, rgba(0, 0, 0, 0) 71%), radial-gradient(#00c380, #00c380 70%, rgba(0, 0, 0, 0) 71%), radial-gradient(#00c380, #00c380 70%, rgba(0, 0, 0, 0) 71%), radial-gradient(#00c380, #00c380 70%, rgba(0, 0, 0, 0) 71%);
background-size: 0.01em 0.01em, 0.01em 0.01em, 0.01em 0.01em, 0.01em 0.01em, 0.01em 0.01em, 0.01em 0.01em, 0.01em 0.01em, 0.01em 0.01em, 0.01em 0.01em, 0.01em 0.01em, 0.01em 0.01em, 0.01em 0.01em, 0.01em 0.01em, 0.01em 0.01em, 0.01em 0.01em, 0.01em 0.01em;
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
background-repeat: no-repeat;
-webkit-transition: all 0s ease-out;
transition: all 0s ease-out;
-webkit-transition-delay: 0;
transition-delay: 0;
}
.rating__label {
cursor: pointer;
padding: 1em;
display: -webkit-box;
display: flex;
box-sizing: border-box;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border: 1px solid rgba(255, 255, 255, 0.2);
margin-left: -1px;
}
.rating__label__icon {
z-index: 2;
-webkit-transition: fill 0.3s ease-in-out;
transition: fill 0.3s ease-in-out;
}
.rating__label:nth-of-type(4) .rating__label__icon {
-webkit-transition-delay: 0.075s;
transition-delay: 0.075s;
}
.rating__label:nth-of-type(3) .rating__label__icon {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.rating__label:nth-of-type(2) .rating__label__icon {
-webkit-transition-delay: 0.225s;
transition-delay: 0.225s;
}
.rating__label:nth-of-type(1) .rating__label__icon {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.rating__label:nth-of-type(0) .rating__label__icon {
-webkit-transition-delay: 0.375s;
transition-delay: 0.375s;
}
.flexy--reverse-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
flex-direction: row-reverse;
width: fit-content;
}
.flexy__item {
display: -webkit-box;
display: flex;
flex-wrap: nowrap;
}
.flexy__item, .flexy_child {
box-sizing: border-box;
}
.rating__fx--1 {
position: relative;
}
.rating__fx--1 .rating__label {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
border-left-color: transparent;
border-right-color: transparent;
}
.rating__fx--1 .rating__label:first-of-type {
border-radius: 0 3em 3em 0;
border-right-color: rgba(255, 255, 255, 0.2);
position: relative;
}
.rating__fx--1 .rating__label:last-of-type {
border-radius: 3em 0 0 3em;
border-left-color: rgba(255, 255, 255, 0.2);
}
.rating__fx--1 [type='radio'] {
display: none;
}
.rating__fx--1 [type='radio']:nth-of-type(5):checked ~ .rating__label .rating__label__icon {
fill: #ffee60;
}
.rating__fx--1 [type='radio']:nth-of-type(5):checked ~ .rating__background {
width: 20%;
}
.rating__fx--1 [type='radio']:nth-of-type(4):checked ~ .rating__label .rating__label__icon {
fill: #ffee60;
}
.rating__fx--1 [type='radio']:nth-of-type(4):checked ~ .rating__background {
width: 40%;
}
.rating__fx--1 [type='radio']:nth-of-type(3):checked ~ .rating__label .rating__label__icon {
fill: #a9ff60;
}
.rating__fx--1 [type='radio']:nth-of-type(3):checked ~ .rating__background {
width: 60%;
}
.rating__fx--1 [type='radio']:nth-of-type(2):checked ~ .rating__label .rating__label__icon {
fill: #a9ff60;
}
.rating__fx--1 [type='radio']:nth-of-type(2):checked ~ .rating__background {
width: 80%;
}
.rating__fx--1 [type='radio']:nth-of-type(1):checked ~ .rating__label .rating__label__icon {
fill: #00c380;
}
.rating__fx--1 [type='radio']:nth-of-type(1):checked ~ .rating__background {
width: 100%;
}
.rating__fx--1 [type='radio']:first-of-type:checked + .rating__label:before {
background-size: 4% 4%, 6% 6%, 6% 6%, 4% 4%, 6% 6%, 6% 6%, 6% 6%, 2% 2%, 6% 6%, 4% 4%, 6% 6%, 4% 4%, 6% 6%, 6% 6%, 6% 6%, 2% 2%;
background-position: 50% 6%, 87% 14%, 50% 73%, 72% 36%, 65% 59%, 38% 68%, 78% 83%, 56% 16%, 5% 23%, 59% 24%, 64% 45%, 52% 73%, 92% 89%, 11% 84%, 66% 32%, 47% 47%;
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
opacity: 0;
}
.space--medium {
margin-bottom: 2.8em;
}
@media (max-width: 75em) {
.space--medium {
margin-bottom: 2.072em;
}
}
fieldset {border: none;}
.footer_flex_wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
min-height: 150px;
max-width: 1300px;
margin: auto;
}
/* ACCORD CHIPS STYLING */
.accord-chips-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0;
}
.accord-chip {
display: inline-block;
padding: 6px 14px;
color: white;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
text-transform: capitalize;
border: 1px solid rgba(0,0,0,0.15);
transition: transform 0.2s ease, border 0.2s ease;
}
.accord-chip:hover {
transform: translateY(-2px);
border: 1px solid rgba(0,0,0,0.25);
}
.product-accords-mini {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 8px 0;
justify-content: center;
min-height: 22px;
}
.accord-chip-mini {
display: inline-block;
padding: 3px 8px;
color: white;
border-radius: 12px;
font-size: 10px;
font-weight: 500;
text-transform: capitalize;
border: 1px solid rgba(0,0,0,0.15);
}
/* Individual accord colors */
.accord-chip.sweet, .accord-chip-mini.sweet { background: linear-gradient(135deg, #ffb3de 0%, #ffc9e3 50%, #ffe5f1 100%); }
.accord-chip.cacao, .accord-chip-mini.cacao { background: linear-gradient(135deg, #5d4037 0%, #6d4c41 50%, #8d6e63 100%); }
.accord-chip.caramel, .accord-chip-mini.caramel { background: linear-gradient(135deg, #f4a259 0%, #f28c28 50%, #ffd166 100%); }
.accord-chip.warm-spicy, .accord-chip-mini.warm-spicy, .accord-chip.warmspicy, .accord-chip-mini.warmspicy { background: linear-gradient(135deg, #9a031e 0%, #e36414 50%, #fb8b24 100%); }
.accord-chip.vanilla, .accord-chip-mini.vanilla { background: linear-gradient(135deg, #fff1b8 0%, #ffe8a1 50%, #ffcb77 100%); color: #333; }
.accord-chip.rum, .accord-chip-mini.rum { background: linear-gradient(135deg, #654321 0%, #8b4513 50%, #a0522d 100%); }
.accord-chip.lactonic, .accord-chip-mini.lactonic { background: linear-gradient(135deg, #ffe5d9 0%, #ffd6c2 50%, #fcd5ce 100%); color: #333; }
.accord-chip.nutty, .accord-chip-mini.nutty { background: linear-gradient(135deg, #d2a679 0%, #e0c097 50%, #f1d8b5 100%); color: #333; }
.accord-chip.alcohol, .accord-chip-mini.alcohol { background: linear-gradient(135deg, #e0f6ff 0%, #f0fff0 50%, #fffacd 100%); color: #333; }
.accord-chip.woody, .accord-chip-mini.woody { background: linear-gradient(135deg, #6b705c 0%, #a5a58d 50%, #cb997e 100%); }
.accord-chip.coffee, .accord-chip-mini.coffee { background: linear-gradient(135deg, #8b4513 0%, #795548 50%, #a1887f 100%); }
.accord-chip.fruity, .accord-chip-mini.fruity { background: linear-gradient(135deg, #ff6b9d 0%, #fec3d0 50%, #ffa5c8 100%); }
.accord-chip.floral, .accord-chip-mini.floral { background: linear-gradient(135deg, #f8b4d9 0%, #ffd1e8 50%, #ffe4f2 100%); }
.accord-chip.citrus, .accord-chip-mini.citrus { background: linear-gradient(135deg, #ffd93d 0%, #ffe066 50%, #ffeb99 100%); color: #333; }
.accord-chip.fresh, .accord-chip-mini.fresh { background: linear-gradient(135deg, #4ecdc4 0%, #7de3db 50%, #a8f5e7 100%); }
.accord-chip.green, .accord-chip-mini.green { background: linear-gradient(135deg, #52b788 0%, #74c69d 50%, #95d5b2 100%); }
.accord-chip.aromatic, .accord-chip-mini.aromatic { background: linear-gradient(135deg, #5e548e 0%, #9f86c0 50%, #be95c4 100%); }
.accord-chip.spicy, .accord-chip-mini.spicy, .accord-chip.spices, .accord-chip-mini.spices { background: linear-gradient(135deg, #d62828 0%, #f77f00 50%, #fcbf49 100%); }
.accord-chip.amber, .accord-chip-mini.amber { background: linear-gradient(135deg, #ff9f1c 0%, #ffbf69 50%, #cbf3f0 100%); }
.accord-chip.powdery, .accord-chip-mini.powdery { background: linear-gradient(135deg, #f4acb7 0%, #ffd6dd 50%, #ffe5e9 100%); }
.accord-chip.musky, .accord-chip-mini.musky, .accord-chip.musk, .accord-chip-mini.musk { background: linear-gradient(135deg, #8b8c89 0%, #b8b8b8 50%, #d5d5d5 100%); }
.accord-chip.earthy, .accord-chip-mini.earthy { background: linear-gradient(135deg, #8b7355 0%, #a0826d 50%, #c9b8a6 100%); }
.accord-chip.aquatic, .accord-chip-mini.aquatic, .accord-chip.marine, .accord-chip-mini.marine { background: linear-gradient(135deg, #0077b6 0%, #00b4d8 50%, #90e0ef 100%); }
.accord-chip.leather, .accord-chip-mini.leather { background: linear-gradient(135deg, #6b4423 0%, #8b5a3c 50%, #a67b5b 100%); }
.accord-chip.smoky, .accord-chip-mini.smoky, .accord-chip.smoke, .accord-chip-mini.smoke { background: linear-gradient(135deg, #3d3d3d 0%, #5c5c5c 50%, #7a7a7a 100%); }
.accord-chip.balsamic, .accord-chip-mini.balsamic { background: linear-gradient(135deg, #7b2d26 0%, #a13d2e 50%, #c44536 100%); }
.accord-chip.animalic, .accord-chip-mini.animalic { background: linear-gradient(135deg, #6d4c41 0%, #8d6e63 50%, #a1887f 100%); }
/* Alcoholic/Beverage Notes */
.accord-chip.whiskey, .accord-chip-mini.whiskey { background: linear-gradient(135deg, #d4a574 0%, #c9964a 50%, #b8860b 100%); }
.accord-chip.vodka, .accord-chip-mini.vodka { background: linear-gradient(135deg, #e8f4f8 0%, #d5e7ed 50%, #c2dbe0 100%); color: #333; }
.accord-chip.sake, .accord-chip-mini.sake { background: linear-gradient(135deg, #f5f3e8 0%, #eae5d0 50%, #ddd6b8 100%); color: #333; }
.accord-chip.wine, .accord-chip-mini.wine { background: linear-gradient(135deg, #722f37 0%, #8b3a47 50%, #a14553 100%); }
.accord-chip.champagne, .accord-chip-mini.champagne { background: linear-gradient(135deg, #f7e7ce 0%, #f3dbb3 50%, #efd19f 100%); color: #333; }
.accord-chip.coca-cola, .accord-chip-mini.coca-cola { background: linear-gradient(135deg, #3e1f0f 0%, #4a2511 50%, #6d3a1c 100%); }
/* Floral Notes */
.accord-chip.yellow-floral, .accord-chip-mini.yellow-floral { background: linear-gradient(135deg, #ffd700 0%, #ffe55c 50%, #fff176 100%); color: #333; }
.accord-chip.white-floral, .accord-chip-mini.white-floral { background: linear-gradient(135deg, #fffef7 0%, #faf8f0 50%, #f5f2e8 100%); color: #333; }
.accord-chip.rose, .accord-chip-mini.rose { background: linear-gradient(135deg, #ff6b9d 0%, #ff91b3 50%, #ffb3c9 100%); }
.accord-chip.tuberose, .accord-chip-mini.tuberose { background: linear-gradient(135deg, #fff0f5 0%, #ffe4ec 50%, #ffd6e3 100%); color: #333; }
.accord-chip.violet, .accord-chip-mini.violet { background: linear-gradient(135deg, #8a6e9e 0%, #9d82b3 50%, #b097c7 100%); }
.accord-chip.iris, .accord-chip-mini.iris { background: linear-gradient(135deg, #c5b4d6 0%, #d4c7e3 50%, #e3d9f0 100%); color: #333; }
.accord-chip.lavender, .accord-chip-mini.lavender { background: linear-gradient(135deg, #9b7eb8 0%, #b396ca 50%, #cbaedd 100%); }
/* Woody/Natural Notes */
.accord-chip.patchouli, .accord-chip-mini.patchouli { background: linear-gradient(135deg, #4a5d3f 0%, #5d7152 50%, #708566 100%); }
.accord-chip.oud, .accord-chip-mini.oud { background: linear-gradient(135deg, #3d2817 0%, #54381e 50%, #6b4825 100%); }
.accord-chip.conifer, .accord-chip-mini.conifer { background: linear-gradient(135deg, #2d5016 0%, #3d6623 50%, #4d7c30 100%); }
.accord-chip.foresty, .accord-chip-mini.foresty { background: linear-gradient(135deg, #4a5f3a 0%, #5c7348 50%, #6e8757 100%); }
.accord-chip.mossy, .accord-chip-mini.mossy { background: linear-gradient(135deg, #5f7355 0%, #738a69 50%, #87a17d 100%); }
/* Sweet/Gourmand Notes */
.accord-chip.honey, .accord-chip-mini.honey { background: linear-gradient(135deg, #ffa500 0%, #ffb732 50%, #ffc966 100%); }
.accord-chip.chocolate, .accord-chip-mini.chocolate { background: linear-gradient(135deg, #3e1f0f 0%, #5c2e1e 50%, #7a3d2d 100%); }
.accord-chip.cherry, .accord-chip-mini.cherry { background: linear-gradient(135deg, #dc143c 0%, #e7385d 50%, #f25c7e 100%); }
.accord-chip.coconut, .accord-chip-mini.coconut { background: linear-gradient(135deg, #ffffff 0%, #faf8f0 50%, #f5f1e3 100%); color: #333; }
.accord-chip.almond, .accord-chip-mini.almond { background: linear-gradient(135deg, #ead5c3 0%, #f0e0d1 50%, #f6ebdf 100%); color: #333; }
.accord-chip.pear, .accord-chip-mini.pear { background: linear-gradient(135deg, #d1e189 0%, #dbe89f 50%, #e5efb5 100%); color: #333; }
/* Spice Notes */
.accord-chip.cinnamon, .accord-chip-mini.cinnamon { background: linear-gradient(135deg, #8b4513 0%, #a0522d 50%, #b46030 100%); }
.accord-chip.anis, .accord-chip-mini.anis { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #404040 100%); }
.accord-chip.cannabis, .accord-chip-mini.cannabis { background: linear-gradient(135deg, #4a7c3b 0%, #5a9149 50%, #6aa657 100%); }
.accord-chip.camphor, .accord-chip-mini.camphor { background: linear-gradient(135deg, #dceefb 0%, #c8e4f5 50%, #b4daf0 100%); color: #333; }
.accord-chip.fresh-spicy, .accord-chip-mini.fresh-spicy { background: linear-gradient(135deg, #ff7f50 0%, #ff9968 50%, #ffb380 100%); }
.accord-chip.soft-spicy, .accord-chip-mini.soft-spicy { background: linear-gradient(135deg, #cc8866 0%, #d99f7e 50%, #e6b696 100%); }
/* Industrial/Synthetic Notes */
.accord-chip.plastic, .accord-chip-mini.plastic { background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 50%, #acbdbe 100%); }
.accord-chip.rubber, .accord-chip-mini.rubber { background: linear-gradient(135deg, #2c2c2c 0%, #3d3d3d 50%, #4e4e4e 100%); }
.accord-chip.vinyl, .accord-chip-mini.vinyl { background: linear-gradient(135deg, #2f3640 0%, #4a5360 50%, #656f80 100%); }
.accord-chip.varnish, .accord-chip-mini.varnish { background: linear-gradient(135deg, #6e3a1a 0%, #854a22 50%, #9c5a2a 100%); }
.accord-chip.industrial-glue, .accord-chip-mini.industrial-glue { background: linear-gradient(135deg, #f0e68c 0%, #f5ed9e 50%, #faf4b0 100%); color: #333; }
.accord-chip.gasoline, .accord-chip-mini.gasoline { background: linear-gradient(135deg, #4a5f7a 0%, #7a8fa5 50%, #aabfd0 100%); }
.accord-chip.asphault, .accord-chip-mini.asphault { background: linear-gradient(135deg, #2f3640 0%, #3d4654 50%, #4b5668 100%); }
.accord-chip.hot-iron, .accord-chip-mini.hot-iron { background: linear-gradient(135deg, #8b4c4c 0%, #a66363 50%, #c17a7a 100%); }
.accord-chip.tennis-ball, .accord-chip-mini.tennis-ball { background: linear-gradient(135deg, #ccff00 0%, #d9ff33 50%, #e6ff66 100%); color: #333; }
.accord-chip.paper, .accord-chip-mini.paper { background: linear-gradient(135deg, #f5f5dc 0%, #faf8f0 50%, #fffef7 100%); color: #333; }
.accord-chip.brown-scotch-tape, .accord-chip-mini.brown-scotch-tape { background: linear-gradient(135deg, #8b7355 0%, #a08869 50%, #b59d7d 100%); }
.accord-chip.metallic, .accord-chip-mini.metallic { background: linear-gradient(135deg, #c0c0c0 0%, #d3d3d3 50%, #e6e6e6 100%); color: #333; }
/* Food/Savory Notes */
.accord-chip.bbq, .accord-chip-mini.bbq { background: linear-gradient(135deg, #3e2723 0%, #5d4037 50%, #6d4c41 100%); }
.accord-chip.bacon, .accord-chip-mini.bacon { background: linear-gradient(135deg, #a0522d 0%, #b85f3d 50%, #d06c4d 100%); }
.accord-chip.meat, .accord-chip-mini.meat { background: linear-gradient(135deg, #8b1a1a 0%, #a12929 50%, #b73838 100%); }
.accord-chip.salty, .accord-chip-mini.salty { background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 50%, #fafafa 100%); color: #333; }
.accord-chip.savory, .accord-chip-mini.savory { background: linear-gradient(135deg, #8b6914 0%, #a07d1a 50%, #b59120 100%); }
.accord-chip.sour, .accord-chip-mini.sour { background: linear-gradient(135deg, #bfff00 0%, #d9ff33 50%, #f0ff66 100%); color: #333; }
/* Nature/Earth Notes */
.accord-chip.clay, .accord-chip-mini.clay { background: linear-gradient(135deg, #cc6633 0%, #d67d4d 50%, #e09467 100%); }
.accord-chip.sand, .accord-chip-mini.sand { background: linear-gradient(135deg, #c2b280 0%, #d3c397 50%, #e4d4ae 100%); color: #333; }
.accord-chip.mineral, .accord-chip-mini.mineral { background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 50%, #acbdbe 100%); }
/* Texture Notes */
.accord-chip.oily, .accord-chip-mini.oily { background: linear-gradient(135deg, #f0e68c 0%, #f5ed9e 50%, #faf4b0 100%); color: #333; }
.accord-chip.milky, .accord-chip-mini.milky { background: linear-gradient(135deg, #fffef7 0%, #faf8f0 50%, #f5f2e8 100%); color: #333; }
/* Other Notes */
.accord-chip.gourmand, .accord-chip-mini.gourmand { background: linear-gradient(135deg, #ffcccb 0%, #ffd9d8 50%, #ffe6e5 100%); color: #333; }
.accord-chip.herbal, .accord-chip-mini.herbal { background: linear-gradient(135deg, #6b8e23 0%, #7fa038 50%, #93b24d 100%); }
.accord-chip.terpenic, .accord-chip-mini.terpenic { background: linear-gradient(135deg, #556b2f 0%, #6b8e23 50%, #7f9f44 100%); }
.accord-chip.tropical, .accord-chip-mini.tropical { background: linear-gradient(135deg, #ff6f61 0%, #ff8878 50%, #ffa18f 100%); }
.accord-chip.beeswax, .accord-chip-mini.beeswax { background: linear-gradient(135deg, #f4d03f 0%, #f7dc5f 50%, #fae87f 100%); color: #333; }
.accord-chip.aldehydic, .accord-chip-mini.aldehydic { background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f2 50%, #fafbfb 100%); color: #333; }
.accord-chip.bitter, .accord-chip-mini.bitter { background: linear-gradient(135deg, #4a4a4a 0%, #5e5e5e 50%, #727272 100%); }
.accord-chip.tobacco, .accord-chip-mini.tobacco { background: linear-gradient(135deg, #704214 0%, #8b5a2b 50%, #a67242 100%); }
.accord-chip.wet-plaster, .accord-chip-mini.wet-plaster { background: linear-gradient(135deg, #d0d0ce 0%, #e0e0de 50%, #f0f0ee 100%); color: #333; }
@media (max-width: 768px) {
.accord-chip {
padding: 4px 10px;
font-size: 11px;
}
}
@media screen and (max-width: 766px) {
.footer_flex_wrapper {
zoom: 0.75;
}
}
.footer_flex_item {
display: flex;
flex-direction: column;
flex: 1 0 auto;
text-align: center;
padding: 12px 0;
margin:auto;
align-items: center;
justify-content: center;
line-height: 1.4em;
}
.footer_flex_title {
color: #000;
text-decoration: none;
border-bottom: 0.5px dotted #00000078;
font-size: 16px;
}
.footer_flex_item small {
display: block;
}
.footer_flex_item p {
margin: -0.5em;
}
.icon-usp-freeship:before, .icon-usp-express:before, .icon-usp-likes:before {
line-height: 55px;
}
.icon-usp-freeship:before {
content: '\e803';
font-size:25px;
}
.icon-usp-express:before{
content: '\E808';
font-size:35px;
}
.icon-usp-likes:before {
content: '\E820';
font-size:30px;
}
.headerusp_flex_wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
min-height: 50px;
max-width: 1300px;
margin: auto;
}
@media screen and (max-width: 766px) {
.headerusp_flex_wrapper {
zoom: 0.70;
}
}
.headerusp_flex_item {
display: flex;
flex-direction: row;
flex: 1 0 auto;
text-align: center;
padding: 0;
margin: 0;
align-items: center;
justify-content: center;
line-height: 1.3em;
}
.headerusp_flex_title {
color: #000;
text-decoration: none;
border-bottom:
0.5px dotted #00000078;
font-size: 13px;
}
.headerusp_flex_item small {
display: block;
}
.headerusp_flex_item p {
margin: 0;
}
.icon-headerusp-freeship:before, .icon-headerusp-express:before, .icon-headerusp-likes:before {
line-height: 45px;
}
.icon-headerusp-freeship:before {
content: '\e803';
font-size:20px;
}
.icon-headerusp-express:before{
content: '\E808';
font-size:28px;
}
.icon-headerusp-likes:before {
content: '\E820';
font-size:24px;
}
/* Gallery flex layout: image on top, thumbnails below */
/* Gallery keeps its grid position, internal flex for vertical stacking */
.gallery-product {
float: left;
position: relative;
width: calc(200px + 15vw);
min-height: 300px;
/* max-width: 500px; */
}
.gallery-product .image {
width: 100%;
max-width: 100%;
order: 1;
}
.gallery-product .image-additional {
width: 100%;
max-width: 100%;
order: 2;
margin-top: 20px;
}
/* Horizontal thumbnail layout - native scrolling (no Siema) */
#image-additional {
display: flex !important;
flex-direction: row !important;
justify-content: space-evenly;
align-items: center;
height: auto !important;
width: auto !important;
margin: 0;
padding: 10px 0;
list-style: none;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
gap: 10px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}
/* Scrollbar styling for webkit browsers */
#image-additional::-webkit-scrollbar {
height: 6px;
}
#image-additional::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
#image-additional::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
#image-additional::-webkit-scrollbar-thumb:hover {
background: #555;
}
#image-additional li {
display: inline-block !important;
flex-shrink: 0;
margin: 0 !important;
height: auto !important;
width: auto !important;
}
#image-additional li a {
display: block;
width: 60px;
height: 60px;
border: 2px solid transparent;
transition: border-color 0.2s;
}
#image-additional li.active a,
#image-additional li a:hover {
border-color: #38b897;
}
#image-additional li img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Navigation buttons - hidden on desktop */
.gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(220, 220, 220, 0.8);
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
font-size: 24px;
z-index: 100;
border-radius: 50%;
display: none;
}
.prev-btn { left: 10px; }
.next-btn { right: 10px; }
.gallery-nav:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Desktop: Ensure proper scrolling for thumbnails */
@media (min-width: 768px) {
.gallery-product .image-additional {
position: relative;
width: 100%;
max-width: 100%;
}
/* Ensure gap works properly */
#image-additional li {
flex-shrink: 0;
}
}
/* Mobile styles */
@media (max-width: 767px) {
/* Show navigation buttons */
.gallery-nav {
display: block;
}
/* Gallery full width on mobile */
.gallery-product .image {
width: 97vw !important;
}
/* Transform thumbnails to dots */
#image-additional li {
width: 13px !important;
height: 13px !important;
background-color: #e6e6e6;
border-radius: 50%;
overflow: hidden;
margin: 0 4px !important;
}
#image-additional li.active {
background-color: #38b897 !important;
}
#image-additional li a {
width: 13px;
height: 13px;
border: none;
}
#image-additional li img {
opacity: 0;
width: 20px;
height: 20px;
}
.gallery-product .image-additional {
width: 97%;
margin-top: 10px;
}
#image-additional {
justify-content: center;
overflow: visible;
}
}
/* Hide old jcarousel buttons/controls */
.jcarousel-prev,
.jcarousel-next,
.jcarousel-prev-vertical,
.jcarousel-next-vertical,
.jcarousel-prev-disabled,
.jcarousel-next-disabled {
display: none !important;
}
/* ============================================================
CRO: PRODUCT PAGE REASSURANCE, SHOWROOM ETC
============================================================ */
/* --- Reassurance strip --- */
.pdp-reassurance-strip {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
margin: 14px 0 8px;
padding: 10px 12px;
background: #f8f8f6;
}
.pdp-reassure-item {
position: relative;
display: flex;
align-items: center;
gap: 5px;
font-size: 12.5px;
line-height: 1.35;
color: #333;
flex: 1 1 auto;
min-width: 140px;
}
.pdp-reassure-icon {
font-size: 15px;
flex-shrink: 0;
}
.pdp-reassure-text {
white-space: nowrap;
}
.pdp-reassure-more {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
background: none;
border: none;
color: #999;
font-size: 10px;
line-height: 1;
cursor: pointer;
padding: 0;
flex-shrink: 0;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
transition: color .2s;
}
.pdp-reassure-more:hover,
.pdp-reassure-more:focus {
color: #333;
outline: none;
}
.pdp-reassure-tip {
display: none;
position: absolute;
bottom: calc(100% + 6px);
left: 0;
z-index: 50;
width: 260px;
padding: 10px 12px;
background: #fff;
box-shadow: 0 4px 16px rgba(0,0,0,.12);
font-size: 12px;
line-height: 1.5;
color: #444;
}
.pdp-reassure-item:focus-within .pdp-reassure-tip,
.pdp-reassure-item:hover .pdp-reassure-tip {
display: block;
}
/* --- Stock + Delivery combined section --- */
.pdp-stock-delivery {
margin: 10px 0;
padding: 10px 14px;
background: #f8f8f6;
}
.pdp-stock-delivery .pdp-stock-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
padding: 0 0 8px;
}
.pdp-stock-delivery .pdp-delivery-urgency {
margin: 0;
padding: 8px 0 0;
border-top: 1px solid #ebebeb;
}
/* --- Stock scarcity tiers --- */
.pdp-stock-critical {
color: #c0392b;
font-weight: 700;
font-size: 13.5px;
display: flex;
align-items: center;
gap: 6px;
animation: pdpStockPulse 1.8s ease-in-out infinite;
}
@keyframes pdpStockPulse {
0%, 100% { opacity: 1; }
50% { opacity: .65; }
}
.pdp-stock-pulse {
display: inline-block;
width: 8px;
height: 8px;
background: #c0392b;
border-radius: 50%;
flex-shrink: 0;
}
.pdp-stock-low {
color: #d68910;
font-weight: 600;
font-size: 13px;
}
.pdp-stock-ok {
color: #27ae60;
font-weight: 600;
font-size: 13px;
}
/* --- Delivery urgency countdown --- */
.pdp-delivery-urgency {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 0;
padding: 9px 12px;
background: linear-gradient(90deg, #fff7e6, #fff3d6);
font-size: 13px;
color: #5a4400;
}
.pdp-delivery-urgency.pdp-delivery-static {
background: #f0faf4;
color: #1a5c2e;
}
.pdp-urgency-icon {
font-size: 18px;
flex-shrink: 0;
}
.pdp-urgency-text strong {
font-weight: 700;
}
/* --- Showroom callout --- */
.pdp-showroom-callout {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 10px 0;
padding: 12px 14px;
background: #f4f0ff;
border-left: 3px solid #7c5cfc;
}
.pdp-showroom-icon {
font-size: 24px;
flex-shrink: 0;
line-height: 1;
}
.pdp-showroom-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.pdp-showroom-title {
font-size: 14px;
font-weight: 700;
color: #2d2d2d;
}
.pdp-showroom-addr {
font-size: 12.5px;
color: #555;
}
.pdp-showroom-test {
display: inline-block;
margin-top: 3px;
padding: 3px 8px;
background: #7c5cfc;
color: #fff;
font-size: 11.5px;
font-weight: 600;
width: fit-content;
}
/* --- Trust badge mini-row --- */
.pdp-trust-mini {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
gap: 0;
margin: 0;
padding: 10px 12px;
background: #f8f8f6;
}
.pdp-trust-mini-cell {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.pdp-trust-mini img {
height: clamp(16px, 2vw, 22px);
width: auto;
}
.pdp-trust-mini-pj {
height: clamp(16px, 2vw, 22px);
width: auto;
max-width: clamp(50px, 6vw, 65px);
max-height: clamp(16px, 2vw, 22px);
}
.pdp-trust-mini-tp {
height: clamp(16px, 1vw, 22px);
width: auto;
max-width: clamp(45px, 5vw, 65px);
max-height: clamp(16px, 1vw, 22px);
margin-bottom: -2px;
}
.pdp-trust-mini-stars {
font-size: clamp(11px, 1.8vw, 16px);
letter-spacing: -1.5px;
line-height: 1;
}
.pdp-trust-mini--2col {
grid-template-columns: 1fr 1fr;
}
/* --- Footer trust block (persistent across all pages incl. checkouts) --- */
.footer-trust-block {
background: #fcfefcb0;
color: #222;
padding: 14px 16px 16px;
margin: 0;
text-align: center;
}
.footer-trust-block .title {
margin: 0 0 8px;
padding: 0;
font-size: 14px;
line-height: 1.2;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #222;
text-align: center;
}
.footer-trust-block .content_flex_wrapper {
display: grid;
grid-template-columns: repeat(var(--trust-cols, 3), minmax(0, 1fr));
gap: 0 20px;
align-items: center;
justify-items: center;
max-width: 1300px;
margin: 0 auto;
padding: 0;
min-height: 0;
flex-wrap: initial;
flex-direction: initial;
}
.footer-trust-block[data-count="2"] .content_flex_wrapper { --trust-cols: 2; }
.footer-trust-block[data-count="3"] .content_flex_wrapper { --trust-cols: 3; }
.footer-trust-block .in_content_flex_item {
flex: initial;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 0;
}
.footer-trust-block .title { display: none; }
.footer-trust-block .teh-certificate {
display: inline-block;
line-height: 0;
}
.footer-trust-block .teh-certificate img {
width: 50px !important;
height: 50px !important;
}
@media screen and (max-width: 767px) {
.footer-trust-block .teh-certificate img {
width: 40px !important;
height: 40px !important;
}
}
/* Unified hero wrapping both rows so the title spans them and columns align */
.footer-hero {
background: transparent;
}
.footer-hero-title {
margin: 0 auto;
padding: 12px 16px 6px;
max-width: 1300px;
text-align: center;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #222;
}
@media screen and (max-width: 767px) {
.footer-trust-block {
padding: 12px 10px 14px;
}
.footer-trust-block .content_flex_wrapper {
gap: 0 18px;
}
}
@media screen and (max-width: 600px) {
.footer-hero-title { font-size: 13px; padding: 10px 10px 4px; }
.footer-trust-block .content_flex_wrapper { gap: 0 10px; }
}
/* --- Hardcoded footer USP strip (replaces DB cr2htmlmodule before_footer) --- */
.footer-usp-strip {
background: #fcfefcb0;
padding: 14px 16px;
border-bottom: 3px solid #f3f9f6;
}
.footer_flex_wrapper--grid {
display: grid;
grid-template-columns: repeat(var(--usp-cols, 3), minmax(0, 1fr));
grid-template-rows: auto auto auto;
gap: 2px 20px;
align-items: start;
justify-items: center;
max-width: 1300px;
margin: 0 auto;
min-height: 0;
flex-wrap: initial;
flex-direction: initial;
}
.footer-usp-strip[data-count="2"] .footer_flex_wrapper--grid { --usp-cols: 2; }
.footer-usp-strip[data-count="3"] .footer_flex_wrapper--grid { --usp-cols: 3; }
.footer_flex_wrapper--grid > .footer_flex_item {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
row-gap: 2px;
padding: 0;
margin: 0;
text-align: center;
justify-items: center;
align-items: center;
min-width: 0;
flex: initial;
line-height: 1.3;
}
.footer_flex_wrapper--grid .footer_flex_icon {
margin: 0;
padding: 0;
line-height: 1;
min-height: 0;
}
.footer_flex_wrapper--grid .footer_flex_icon:before {
line-height: 1;
}
.footer_flex_wrapper--grid .footer_flex_title {
color: #000;
text-decoration: none;
font-size: 16px;
border-bottom: 0.5px dotted rgba(0, 0, 0, 0.47);
line-height: 1.25;
align-self: end;
}
.footer_flex_wrapper--grid span.footer_flex_title {
border-bottom: none;
}
.footer_flex_wrapper--grid .footer_flex_subtitle {
display: block;
font-size: 13px;
color: #555;
min-height: 1.3em;
line-height: 1.3;
align-self: start;
}
@media screen and (max-width: 600px) {
.footer-usp-strip {
padding: 10px 8px;
}
.footer_flex_wrapper--grid {
gap: 2px 10px;
}
.footer_flex_wrapper--grid .footer_flex_title {
font-size: 14px;
}
.footer_flex_wrapper--grid .footer_flex_subtitle {
font-size: 11.5px;
}
}
/* --- CRO Responsive --- */
@media screen and (max-width: 767px) {
.pdp-reassurance-strip {
gap: 4px 8px;
padding: 8px 10px;
}
.pdp-reassure-item {
min-width: calc(50% - 8px);
font-size: 11.5px;
}
.pdp-reassure-tip {
width: 220px;
left: -20px;
}
.pdp-stock-delivery {
padding: 8px 10px;
}
.pdp-delivery-urgency {
font-size: 12px;
padding: 8px 10px;
}
.pdp-showroom-callout {
padding: 10px 12px;
}
.pdp-showroom-title {
font-size: 13px;
}
.pdp-showroom-addr {
font-size: 12px;
}
.pdp-trust-mini {
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
padding: 8px 10px;
}
}
@media screen and (max-width: 480px) {
.pdp-reassure-item {
min-width: calc(50% - 8px);
}
.pdp-reassure-tip {
left: 0;
width: calc(100vw - 60px);
max-width: 260px;
}
}
/* ============================================================
BRANDS MENU FILTER (mobile off-canvas) - scoped to #mmenu-left
============================================================ */
#mmenu-left .brand-filter-group {
padding: 0;
margin: 0;
}
#mmenu-left .brand-filter-group > .brand-filter-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
position: sticky;
top: 0;
z-index: 2;
background: inherit;
background-color: #1a1a1a;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#mmenu-left .brand-filter-grid > li.brand-filter-cell {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
#mmenu-left .brand-filter-item {
background: transparent;
border: 0;
width: 100%;
text-align: left;
font: inherit;
color: inherit;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
min-height: 44px;
line-height: 1.2;
}
#mmenu-left .brand-filter-item:focus {
outline: 0;
background: rgba(255, 255, 255, 0.05);
}
#mmenu-left .brand-filter-item__icon {
width: 12px;
height: 12px;
flex-shrink: 0;
opacity: 0.55;
display: inline-block;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
#mmenu-left .brand-filter-item__label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#mmenu-left .brand-filter-item.is-active {
font-weight: 600;
box-shadow: inset 3px 0 0 currentColor;
}
#mmenu-left .brand-filter-item.is-active .brand-filter-item__icon {
opacity: 1;
}
/* Animated hiding for filterable brand s. Visible rows carry .brand-item; .is-hidden collapses. */
#mmenu-left .brand-item {
display: block;
max-height: 80px;
opacity: 1;
overflow: hidden;
transition:
opacity 200ms ease-out,
max-height 220ms ease-out,
padding-top 220ms ease-out,
padding-bottom 220ms ease-out;
}
#mmenu-left .brand-item.is-hidden {
opacity: 0;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
pointer-events: none;
}
/* Empty state line item */
#mmenu-left .brand-filter-empty {
padding: 24px 20px;
text-align: center;
opacity: 0.7;
font-style: italic;
}
/* View Transitions customisation (modern browsers only) */
@supports (view-transition-name: none) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
}
/* Reduced motion: toggle instantly */
@media (prefers-reduced-motion: reduce) {
#mmenu-left .brand-item {
transition: none;
}
#mmenu-left .brand-item.is-hidden {
display: none;
}
}
/* ============================================================
BRAND SECTION HEADINGS + SUPER ACCENT (mobile off-canvas) - scoped to #mmenu-left
============================================================ */
#mmenu-left li.brand-super-heading,
#mmenu-left li.brand-regular-heading {
list-style: none;
margin: 0;
padding: 16px 20px 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.55;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
pointer-events: none;
cursor: default;
background: transparent;
}
#mmenu-left li.brand-super-heading::before,
#mmenu-left li.brand-super-heading::after,
#mmenu-left li.brand-regular-heading::before,
#mmenu-left li.brand-regular-heading::after,
#mmenu-left li.brand-show-all::before,
#mmenu-left li.brand-filter-group::before,
#mmenu-left li.brand-filter-group::after,
#mmenu-left li.brand-filter-cell::before,
#mmenu-left li.brand-filter-cell::after,
#mmenu-left li.brand-filter-empty::before,
#mmenu-left li.brand-filter-empty::after {
content: none !important;
display: none !important;
}
#mmenu-left li.brand-super > a {
font-weight: 600;
}
#mmenu-left li.brand-super > a::before {
content: "\2605";
display: inline-block;
margin-right: 8px;
color: #c9a24a;
font-size: 0.95em;
line-height: 1;
vertical-align: baseline;
}
#mmenu-left li.brand-show-all > a {
font-style: italic;
opacity: 0.85;
}
#mmenu-left li.brand-show-all > a:hover,
#mmenu-left li.brand-show-all > a:focus {
opacity: 1;
}
/* ============================================================
BRAND SEO CATEGORY CHIPS (shown next to brand name)
============================================================ */
#mmenu-left .brand-tags {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
margin-left: 8px;
vertical-align: middle;
padding: 0;
}
#mmenu-left .brand-tag {
display: inline-block;
font-size: 10px;
line-height: 1.4;
padding: 1px 7px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.06);
color: inherit;
opacity: 0.8;
white-space: nowrap;
letter-spacing: 0.2px;
text-transform: uppercase;
}
/* ============================================================
MMENU Z-INDEX FIX (mobile off-canvas must win over sticky bars)
============================================================
The product-page sticky price / add-to-cart bar uses
z-index: 99999 on mobile (see wossy_responsive_upgrades.css).
Mmenu-light's vendor CSS only reaches z-index 9995 / 9999, so
the sticky bar visually covers the bottom of the open menu
(e.g. the "Show all brands" link). Mmenu is a modal overlay
and must always sit above page content including sticky bars. */
#mmenu-left.mm--offcanvas { z-index: 100001 !important; }
.mm-blocker { z-index: 99998 !important; }
.mm-blocker.mm--open { z-index: 100000 !important; }
/* ============================================================
FOOTER MIDDLE: single mobile state up to 1022px (desktop >=1023px untouched)
============================================================
Collapses the footer's three content blocks into a 2x2 grid
plus a full-width About Us band for anything under desktop.
Kontakta Oss spans row 1 (title + internal 2-col: phone+contact
link on the left, address on the right); Kundtjänst and
Information sit side-by-side in row 2; About Us + description +
language flags + currency switcher span full width in row 3.
The conflicting tablet-band and mobile-band width rules in
wossy-dark/style_responsive.css have been commented out so this
grid can fill its cells cleanly. */
@media screen and (max-width: 1022px) {
.footer .middle .content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 14px;
padding: 16px 12px 16px !important;
overflow: visible;
max-width: 100%;
}
.footer .middle .info_box,
.footer .middle .contact_us_box,
.footer .middle .list_box,
.footer .middle .my_account_box,
.footer .middle .extras_box,
.footer .middle .about_us_box {
float: none;
width: auto;
min-width: 0;
margin: 0;
display: block;
}
.footer .middle .my_account_extras {
display: contents;
}
.footer .middle .contact_us_box,
.footer .middle .about_us_box {
grid-column: 1 / -1;
}
.footer .middle .contact_us_box ul {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 16px;
row-gap: 0;
align-items: start;
margin: 0;
padding: 0;
}
.footer .middle .contact_us_box ul .tel,
.footer .middle .contact_us_box ul .email,
.footer .middle .contact_us_box ul .footer_find_order,
.footer .middle .contact_us_box ul .schedule {
grid-column: 1;
}
.footer .middle .contact_us_box ul .address {
grid-column: 2;
grid-row: 1 / span 10;
align-self: center;
}
.footer .middle .list_box ul li,
.footer .middle .my_account_extras .list_box ul li {
width: auto;
display: block;
}
}