:root {
--main-accent: #fd6410;
--main-accent-hover: #e95504;
--second-accent: #85d1bb;
--light-bgr: #fdfcfb;
}
html {
scroll-padding-top: 140px;
scroll-behavior: smooth;
}
body {
font-family: "Comfortaa", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-weight: 400;
color: #000;
font-size: 15px;
line-height: 20px;
width: 100%;
}
h1, h2, h3, h4, h5, h6 {
color: #000;
}
.h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: 500;
}
/* default font size */
.fa {
font-size: 14px;
}
/* Override the bootstrap defaults */
h1, .h1 {
font-size: 27px;
}
h2, .h2 {
font-size: 24px;
}
h3, .h3 {
font-size: 22px;
}
h4, .h4 {
font-size: 20px;
}
h5, .h5 {
font-size: 14px;
}
h6, .h6 {
font-size: 13px;
}
a {
color: #23a1d1;
}
a:hover {
text-decoration: none;
}
b, strong {
font-weight: 700;
}
legend {
font-size: 18px;
padding: 7px 0px
}
label {
font-size: 15px;
font-weight: normal;
color: #000;
}
.form-label {
font-weight: 500;
}
select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control {
font-size: 12px;
}
.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover {
font-size: 12px;
}
.input-group .input-group-addon {
font-size: 12px;
height: 30px;
}
/* Fix some bootstrap issues */
.row {
--bs-gutter-x: 0.5rem;
}
@media (min-width:768px) {
.row {
--bs-gutter-x: 1rem;
}
}
@media (min-width:1100px) {
.row {
--bs-gutter-x: 1.5rem;
}
}
/* Text inputs and textareas */
.form-control[type="text"],
.form-control[type="email"],
.form-control[type="tel"],
.form-control[type="password"],
textarea.form-control {
border-radius: 6px;
padding: 0.55rem 1rem;
font-size: 14px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
background-color: #fff;
}
input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control {
font-size: 15px;
}
.form-control:focus {
border-color: #4a90e2;
box-shadow: 0 0 6px 0 rgba(74, 144, 226, 0.5);
outline: none;
}
.form-control::placeholder {
color: #a0a0a0;
font-style: italic;
}
.form-select {
border-radius: 6px;
padding: 0.6rem 1rem;
font-size: 15px;
border: 1.5px solid #ced4da;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
background-color: #fff;
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, #4a90e2 50%),
linear-gradient(135deg, #4a90e2 50%, transparent 50%);
background-position:
calc(100% - 20px) calc(1em + 2px),
calc(100% - 15px) calc(1em + 2px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.form-select:focus {
border-color: #4a90e2;
box-shadow: 0 0 6px 0 rgba(74, 144, 226, 0.5);
outline: none;
}
.form-check {
display: flex;
align-items: flex-end;
}
.form-check-input[type="checkbox"] {
width: 1.25rem;
height: 1.25rem;
cursor: pointer;
border: 1.5px solid #ced4da;
border-radius: 6px;
transition: border-color 0.3s ease, background-color 0.3s ease;
background-color: #fff;
position: relative;
}
.form-check-input[type="checkbox"]:checked {
background-color: #4a90e2;
border-color: #4a90e2;
}
.form-check-input[type="checkbox"]:focus {
outline: none;
box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.5);
}
.form-check-label {
cursor: pointer;
user-select: none;
padding-left: 0.5rem;
font-size: 1rem;
display: inline-flex;
align-items: center;
}
.container {
max-width: 2460px;
}
.btn-group-gl {
color: #666;
display: flex;
align-items: center;
gap: 15px;
font-size: 12px;
}
.btn-group-gl .btn {
border-radius: 0 !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
display: flex;
gap: 5px;
align-items: center;
color: #666;
font-weight: 400;
text-transform: none;
}
.btn-group-gl .btn.active {
color: var(--second-accent);
}
.btn-group-gl .btn .fa {
font-size: 20px;
}
#input-sort {
max-width: 180px;
}
.sorting {
gap: 15px;
}
.sorting .input-group-text {
background: none;
border: none;
color: #666;
font-size: 12px;
}
.sorting select {
border: none;
border-radius: 6px !important;
text-align: right;
font-size: 12px;
color: #666;
padding-right: 22px;
}
.sorting .form-select {
background-position: right 0 center;
background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
background-size: 9px 9px, 9px 9px;
}
.sorting .form-select:focus {
outline: none;
box-shadow: none;
}
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
display: inline;
}
/*.nav-tabs {
border-bottom: 1px solid #efefef;
gap: 5px;
}
.nav-tabs .nav-link {
border: none;
font-size: 14px;
color:#000;
}
@media (max-width: 768px) {
.nav-tabs .nav-link {
font-size: 13px;
color:#000;
padding-left: 2px;
padding-right: 2px;
}
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
color: #000;
background-color: #fff;
font-weight: 600;
border-bottom: 1px solid #000;
border-radius: 0;
}
.nav-tabs-service {
border-bottom: none;
}
.nav-tabs.nav-tabs-service .nav-link {
color: #fff;
background-color: var(--second-accent);
}
.nav-tabs.nav-tabs-service .nav-item.show .nav-link, .nav-tabs.nav-tabs-service .nav-link.active {
background-color: #007db2;
color: #fff;
border-bottom: none;
font-weight: 400;
border-radius: 6px;
}*/
/* =========================
Bundle tabs -> 1 row chips
========================= */
.bundle-tabs.nav-tabs {
/* махаме стандартната bootstrap линия */
border-bottom: 0;
display: flex;
flex-wrap: nowrap;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding: 2px 2px 8px;
margin: 0 0 12px;
scroll-snap-type: x proximity;
}
.bundle-tabs.nav-tabs::-webkit-scrollbar {
height: 6px;
}
.bundle-tabs.nav-tabs::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.18);
border-radius: 999px;
}
.bundle-tabs.nav-tabs::-webkit-scrollbar-track {
background: rgba(0,0,0,.06);
border-radius: 999px;
}
.bundle-tabs .nav-item {
margin: 0;
flex: 0 0 auto;
scroll-snap-align: start;
}
.bundle-tabs .nav-link {
border: 1px solid rgba(0,0,0,.10) !important;
border-radius: 16px !important;
background: #fff;
color: inherit;
padding: .55rem .65rem;
font-size: .82rem;
line-height: 1.15;
min-width: 110px;
max-width: 180px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: none;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.bundle-tabs .nav-link .bundle-tab__text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* за да не "разпъва" link-a */
width: 100%;
}
/* hover / active */
.bundle-tabs .nav-link:hover {
transform: translateY(-1px);
border-color: var(--second-accent) !important;
}
.bundle-tabs .nav-link.active,
.bundle-tabs .nav-link[aria-selected="true"] {
background: var(--light-bgr);
border-color: var(--second-accent) !important;
}
.bundle-tabs .nav-link:focus-visible {
outline: 3px solid #4c9ffe;
outline-offset: 3px;
}
@media (min-width: 768px) {
.bundle-tabs.nav-tabs {
padding-bottom: 2px;
}
}
input.form-control,
select.form-select {
height: calc(2.5rem + 2px); /* стойност като на input-group-text */
}
#content .tab-content {
padding: 30px 0;
}
div.required .control-label:before {
content: '* ';
color: #F00;
font-weight: bold;
}
/* Gradent to all drop down menus */
.dropdown-menu li > a:hover {
text-decoration: none;
color: #000;
background-color: none;
}
/* top */
#top {
background-color: var(--main-accent);
padding: 8px 0;
margin: 0;
width: 100%;
text-align: center;
font-size: 12px;
color: #fff;
}
#top .container {
padding: 0 20px;
}
#top #form-currency .currency-select,
#top #form-language .language-select {
text-align: left;
}
#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover {
text-shadow: none;
color: #ffffff;
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
}
#top .btn-link, #top-links li, #top-links a {
color: #888;
text-shadow: 0 1px 0 #FFF;
text-decoration: none;
}
#top .btn-link:hover, #top-links a:hover {
color: #444;
}
#top-links .dropdown-menu a {
text-shadow: none;
}
#top-links .dropdown-menu a:hover {
color: #FFF;
}
#top .btn-link strong {
font-size: 14px;
line-height: 14px;
}
#top-links {
padding-top: 6px;
}
#top-links a + a {
margin-left: 15px;
}
header {
width: 100%;
background: #fff;
border-bottom: 1px solid #efefef;
}
.main-header {
width: 100%;
}
.main-header .main-header-inner {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-top: 15px;
padding-bottom: 0;
background-color: #fff;
}
.main-header.sticky {
position: fixed;
top: 0;
width: 100%;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
transition: all 0s ease-out;
z-index: 999;
background-color: #fff;
}
/*#logo, #search, .big-icons {
flex-basis: 100%;
}*/
/* logo */
#logo {
margin: 0 0 10px 0;
flex-grow: 1;
}
#logo img {
max-width: 115px;
}
@media (min-width: 375px) {
#logo img {
max-width: 130px;
}
}
.offcanvas-search {
height: auto;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.offcanvas-search .offcanvas-header { padding: .5rem .75rem; }
.offcanvas-search .offcanvas-body { padding: .75rem; }
.header-search-trigger { font-size: 18px; color: inherit; }
.header-search-trigger:hover { opacity: .85; }
#searchOffcanvas .offcanvas-body { position: relative; }
.stellarnav.desktop li.mega > ul{
left: calc(-2.15rem / 2) !important;
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
padding: calc(2.15rem / 2);
}
/* input + бутон като едно поле */
#searchOffcanvas .input-group{border-radius:.75rem;overflow:hidden}
#searchOffcanvas .input-group .form-control{border-right: 0;border-top-right-radius: 0;border-bottom-right-radius: 0;border-top-left-radius: 12px;border-bottom-left-radius: 12px;}
#searchOffcanvas .input-group .btn{background: transparent;padding: 0 15px;border: 1px solid var(--bs-border-color);border-left: 0;height: 42px;border-top-right-radius: 12px;border-bottom-right-radius: 12px;}
#searchOffcanvas .input-group .btn:hover{background:rgba(0,0,0,.04)}
#searchOffcanvas .input-group .form-control:focus{box-shadow:none;border-color: var(--bs-border-color)}
#searchOffcanvas .input-group .btn:focus{box-shadow:none;border-color: var(--bs-border-color)}
.stellarnav #icon-phone{width:25px;height:25px;top:-2px !important}
.stellarnav.mobile.right>ul{box-shadow:-23px 0px 10px rgba(0,0,0,0.09)}
.stellarnav>ul>li>a {padding: 12px 3px !important}
.stellarnav { overflow: visible !important; }
.stellarnav.desktop>ul>li.mega>ul>li {padding-bottom: 0;}
.stellarnav.desktop>ul>li.mega>ul>li>a:hover{color: var(--main-accent);}
.stellarnav li a {padding:5px;line-height: 0.5rem;font-size: 0.54rem;}
@media (max-width:991px) {
.stellarnav li a {font-size: 0.72rem;line-height: 1rem}
}
.stellarnav.desktop > ul > li.active > a,
.stellarnav.desktop > ul > li.open > a,
.stellarnav.desktop > ul > li:hover > a,
.stellarnav.mobile > ul > li.active > a,
.stellarnav.mobile > ul > li > ul > li.active > a,
.stellarnav.mobile > ul > li > ul > li.open > a {
color: var(--main-accent);
}
.stellarnav.desktop > ul > li:hover > a,
.stellarnav.desktop > ul > li.active > a,
.stellarnav.desktop > ul > li.open > a {
position: relative;
}
@media (min-width:992px) {
.stellarnav > ul > li.active > a::after,
.stellarnav > ul > li.open > a::after,
.stellarnav.desktop > ul > li:hover > a::after {
content: "";
position: absolute;
left: 15%;
right: 15%;
bottom: 0px;
height: 2px;
background: var(--main-accent);
}
}
.stellarnav.mobile ul ul {
background-color: #ededed !important;
padding-top: 10px;
padding-bottom: 10px;
}
.stellarnav.mobile ul ul {
box-shadow: none;
}
.stellarnav.mobile li li {padding-left: 25px !important}
.stellarnav.desktop > li.mega.open > a,
.stellarnav.desktop > li.mega:hover > a {
background: rgba(0, 0, 0, 0.04);
background: linear-gradient(0deg,rgba(0, 0, 0, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
}
.stellarnav .dd-toggle {width:34px;height:34px}
.stellarnav a.dd-toggle .icon-plus:after, .stellarnav a.dd-toggle .icon-plus:before {border-bottom: solid 1px #000;width: 13px;}
@media (min-width: 1100px){
.stellarnav li a {font-size: 0.58rem;line-height: 0.6rem}
.stellarnav>ul>li>a {padding: 12px 5px !important}
}
@media (min-width: 1200px){
.stellarnav li a {font-size: 0.62rem;line-height: 0.8rem}
.stellarnav>ul>li>a {padding: 12px 6px !important}
}
@media (min-width: 1450px){
.stellarnav li a {font-size: 0.72rem;line-height: 1rem}
.stellarnav>ul>li>a {padding: 12px 10px !important}
}
.offcanvas.offcanvas-search {
height: 144px;
}
.offcanvas.offcanvas-search .offcanvas-title {
width: 100%;
text-align: center;
}
#livesearch {
position: fixed !important;
left: 0 !important;
right: 0 !important;
top: 95px;
background: #fff;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
padding: 12px;
z-index: 11;
display: none;
overflow: auto !important;
height: auto !important;
max-height: 70vh !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
#livesearch.ls-has-results { min-height: 260px; }
@media (max-width: 1200px) {
#livesearch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
#livesearch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
#livesearch { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
#livesearch > li {
float:none !important;
width:auto !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
list-style:none; }
#livesearch > li > a {
display:flex !important;
flex-direction: row;
text-decoration: none;
border: 1px solid rgba(0,0,0,.06);
border-radius: 6px;
overflow: hidden;
background: #fff;
}
#livesearch > li > a.amore {
height: 100%;
}
#livesearch > li > a > img {
float:none !important;
width: 70px !important;
margin:0 !important;
}
#livesearch span {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 13px;
line-height: 1.15;
color: #000;
padding: 10px 10px 0 10px;
min-height: 2.6em;
display: flex;
}
#livesearch .live-title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
height: 42px;
}
#livesearch .live-title:has(.pmore) {
display: flex;
align-items: center;
height: 100%;
padding: 0 15px;
}
#livesearch small { color: #666; }
#livesearch em {
font-style: normal;
font-weight: 600;
color: #111;
padding: 8px 10px 10px 10px;
}
#livesearch.list-group { border-radius: 0; box-shadow: none; }
#livesearch img {
float: left;
width: 80px;
margin-right: 10px;
border-radius: 6px
}
#livesearch img[src=''] {
display: none
}
.pmore {
padding: 0;
margin: 0;
}
#livesearch a em {
display: block;
color: #333;
font-style: normal;
font-weight: 400;
font-size: 12px
}
#livesearch strike {
color: #aaa
}
#livesearch a:hover strike {
}
#livesearch small {
display: block
}
.search-container {
display: flex;
justify-content: flex-end;
}
.input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.input-wrapper input {
width: 0;
opacity: 0;
padding: 0;
border: none;
pointer-events: none;
border-radius: 9999px;
font-size: 1rem;
transition: width 0.3s ease, opacity 0.3s ease;
}
.search-container.expanded .input-wrapper input {
opacity: 1;
padding: 0.5em 2.5em 0.5em 1em;
border: 1px solid #ccc;
pointer-events: auto;
position: absolute;
right: 0;
top: -15px;
width: calc(100vw - 100px);
}
.search-icon {
position: absolute;
right: 1em;
color: #555;
pointer-events: auto;
cursor: pointer;
}
@media (min-width: 992px) {
.input-wrapper input {
width: 200px;
opacity: 1;
padding: 0.5em 2.5em 0.5em 1em;
border: 1px solid #ccc;
pointer-events: auto;
}
.search-container {
display: flex;
justify-content: flex-end;
}
.search-icon {
pointer-events: none;
cursor: default;
}
}
/* icons */
.big-icons {
display: flex;
justify-content: flex-end;
gap: 20px;
order: 3;
}
.phone {
display: none;
}
.phone a {
text-decoration: none;
font-weight: 500;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
color: var(--second-accent);
}
.phone .fa {
font-size: 19px;
color: var(--second-accent);
}
.big-icons .fa {
font-size: 20px;
color: #000;
}
.big-icons .profile {
display: none;
}
.big-icons .profile .fa {
font-size: 23px;
margin-top: -2px;
}
.big-icons .profile a {
color: #000;
display: flex;
flex-direction: column;
}
/* cart */
#cart {
position: relative;
}
#cart > .btn {
font-size: 10px;
line-height: 20px;
padding: 0;
margin: 0;
color: #000;
background-color: #fff;
border: none;
box-shadow: none;
}
#cart > .btn .fa {
font-size: 20px;
}
#cart.open > .btn {
background-image: none;
background-color: #FFFFFF;
border: 1px solid #E6E6E6;
color: #666;
box-shadow: none;
text-shadow: none;
}
#cart > .btn.dropdown-toggle::after {
display: none;
}
#cart.open > .btn:hover {
color: #444;
}
#cart .dropdown-menu {
background: #fff;
z-index: 1021;
}
#cart .dropdown-menu {
min-width: 450px;
width: 100%;
overflow-y: auto;
max-height: 800px;
scrollbar-width: thin;
overflow-x: hidden;
}
@media (max-width: 478px) {
#cart .dropdown-menu {
width: 100%;
}
}
#cart .dropdown-menu table {
margin-bottom: 10px;
}
#cart .dropdown-menu li > div {
min-width: 427px;
padding: 0 10px;
}
@media (max-width: 478px) {
#cart .dropdown-menu {
min-width: 280px;
}
#cart .dropdown-menu li > div {
min-width: 100%;
}
}
#cart .dropdown-menu li p {
margin: 20px 0;
}
#cart-total {
position: absolute;
top: -13px;
right: -11px;
background-color: var(--second-accent);
color: #fff;
width: 20px;
height: 20px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#cart .item-img {
width: 60px;
}
#cart a {
text-decoration: none;
color: #000;
}
#cart a:hover {
color: var(--second-accent);
}
#cart .btn-remove {
width: 45px;
}
#cart .btn-tocart,
#cart .btn-tocart:hover {
color: #fff;
}
#cart .btn-remove:hover .fa {
color: #dc3545;
}
#cart .cart-item-price {
color: #666;
}
.remove-confirm {
font-size: 13px;
}
.js-confirm-remove, .js-cancel-remove {
color: #000;
}
.cart-totals {
font-size: 13px;
color: #333;
}
.menu-block {
padding-top: 10px;
order: 4;
}
@media (min-width:992px) {
.menu-block {flex-basis:100%}
}
.wishlist {
position: relative;
}
#wishlist-total {
position: absolute;
top: -13px;
right: -11px;
background-color: var(--second-accent);
color: #fff;
width: 20px;
height: 20px;
border-radius: 100%;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 425px) {
.phone .fa {
font-size: 26px;
}
.big-icons .fa {
font-size: 27px;
}
.big-icons .profile .fa {
font-size: 30px;
margin-top: -2px;
}
#cart > .btn .fa {
font-size: 27px;
}
}
/* content */
.bluebg {
background-color: var(--light-bgr);
padding-top: 30px;
padding-bottom: 30px;
-webkit-box-shadow: inset 0 4px 6px -6px rgba(0,0,0,0.28), inset 0 -4px 4px -6px rgba(0,0,0,0.28);
-moz-box-shadow: inset 0 4px 6px -6px rgba(0,0,0,0.28), inset 0 -4px 4px -6px rgba(0,0,0,0.28);
box-shadow: inset 0 4px 6px -6px rgba(0,0,0,0.28), inset 0 -4px 4px -6px rgba(0,0,0,0.28);
}
.whitebg {
background-color: #fff;
}
.stickytabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.stickytabs .nav-tabs {
flex-wrap: nowrap;
white-space: nowrap;
}
.main-title-block {
padding: 20px 0;
}
/* Сгънато / разгънато описание */
.desc-text {
position: relative;
max-height: 17rem;
overflow: hidden;
}
.desc-text::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 4rem;
background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
pointer-events: none;
}
.desc-text.is-expanded { max-height: none; }
.desc-text.is-expanded::after { display: none; }
.desc-toggle {
margin-top: .5rem;
font-weight: 600;
text-decoration: underline;
text-transform: none !important;
}
.desc-thumb-inline {
display: block;
width: 100%;
height: auto;
margin: 0 0 1rem;
border-radius: 8px;
}
.desc-text__inner::after { content: ""; display: block; clear: both; }
@media (min-width: 768px) {
.desc-text {
max-height: 13rem;
}
.desc-thumb-inline {
float: left;
width: auto;
max-width: 320px;
margin: 0 1rem 1rem 0;
}
}
.home_text_desc {
padding: 30px 30px 10px;
margin: 30px 0;
background: #f6eae3;
border-radius: 16px;
text-align: center;
}
.home_text_desc h1,
.home_text_desc h2,
.home_text_desc h3,
.home_text_desc p {
max-width: 800px;
margin: 0 auto 20px !important;
}
@media (min-width: 768px) {
.home_text_desc {
padding: 50px 30px;
}
}
#content h1,
.page-title {
margin: 12px 0 18px;
font-size: clamp(1.2rem, 2vw, 2.1rem);
font-weight: 800;
text-transform: uppercase;
opacity: .85;
letter-spacing: .02em;
}
/* subcategories */
.subcat-grid {
margin: 0 0 1rem;
padding: 0;
list-style: none;
}
.subcat-grid {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(3, auto);
grid-auto-columns: minmax(120px, 150px);
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding: 2px 2px 8px;
scroll-snap-type: x proximity;
}
.subcat-grid::-webkit-scrollbar {
height: 6px;
}
.subcat-grid::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.18);
border-radius: 999px;
}
.subcat-grid::-webkit-scrollbar-track {
background: rgba(0,0,0,.06);
border-radius: 999px;
}
.subcat-card {
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 999px;
box-shadow: none;
overflow: hidden;
display: flex;
scroll-snap-align: start;
align-items: center;
}
.subcat-card__link {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: .4rem .55rem;
text-decoration: none;
color: inherit;
min-height: 40px;
}
.subcat-card__media {
display: none;
margin-bottom:10px;
}
.subcat-card__name {
text-align: center;
line-height: 1.1;
font-size: .7rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.subcat-card__link:focus-visible {
outline: 3px solid #4c9ffe;
outline-offset: 3px;
border-radius: 999px;
}
.subcat-card:hover {
transform: none;
box-shadow: none;
}
@media (min-width: 600px) {
.subcat-grid {
display: grid;
gap: 16px;
overflow: visible;
padding: 0;
grid-auto-flow: initial;
grid-auto-columns: initial;
grid-template-rows: initial;
grid-template-columns: repeat(3, 1fr);
scroll-snap-type: none;
}
.subcat-card {
border-radius: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.06);
transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.subcat-card__link {
display: grid;
grid-template-rows: auto 1fr;
padding: .5rem;
align-items: center;
justify-content: initial;
min-height: auto;
}
.subcat-card__media {
display: grid;
place-items: center;
background: #f7f7f8;
border-radius: 8px;
overflow: hidden;
min-height: 0;
}
.subcat-card__media img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.subcat-card__name {
font-size: .85rem;
font-weight: 600;
text-align: center;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.subcat-card:hover,
.subcat-card:has(:focus-visible) {
box-shadow: 0 6px 12px rgba(0,0,0,.10), 0 18px 40px rgba(0,0,0,.08);
transform: translateY(-2px);
border-color: rgba(0,0,0,.12);
}
.subcat-card__link:focus-visible {
border-radius: 10px; /* matches card style */
}
}
@media (min-width: 992px) {
.subcat-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1200px) {
.subcat-grid { grid-template-columns: repeat(5, 1fr); }
}
.card-title {
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 15px;
}
.slideshow a {
text-decoration: none;
color: #fff;
}
.slideshow .ssi-text {
position: absolute;
bottom: 0;
left: 5%;
color: #fff;
width: 40%;
height: calc(100% - 25px);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
z-index: 2;
}
.slideshow .ssi-text .ssi-title {
font-size: 26px;
line-height: 32px;
font-weight: 600;
margin-bottom: 15px;
}
.slideshow .ssi-text .ssi-description {
font-size: 18px;
line-height: 24px;
font-weight: 400;
}
.slideshow .ssi-text .btn {
margin-top: 15px;
}
.stickyelement {
position: sticky;
z-index: 3;
}
/* footer */
footer {
margin-top: 30px;
padding-top: 30px;
background-color: #303030;
border-top: 1px solid #ddd;
color: #333;
}
footer hr {
border-top: none;
border-bottom: 1px solid #666;
}
footer a {
color: #333;
text-decoration: none;
}
footer a:hover {
color: #000;
}
.footer-intro {
background: #ffffff;
border-radius: 6px;
padding: 20px;
color: #000;
font-size: 14px;
}
.payment-icons-footer {max-width: 200px}
/* alert */
.alert {
padding: 8px 14px 8px 14px;
}
/* breadcrumb */
.breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0;
margin: 6px 0 8px;
list-style: none;
font-size: .9rem;
color: #6b7280;
}
.breadcrumb li a {
color: inherit;
text-decoration: none;
}
.breadcrumb li + li::before {
content: "/";
margin: 0 6px 0 0;
color: #9ca3af;
}
/*.breadcrumb {
padding:0;
margin: 0;
list-style: none;
display: flex;
justify-content: flex-start;
}
.breadcrumb > li {
display: inline-block
}
.breadcrumb > li+li:before {
padding: 0 5px;
color: #999;
content: "/\00a0"
}
.breadcrumb > li a {
color: #666;
font-size: 11px;
text-decoration: none;
}
.breadcrumb>.active {
color: #777
}
.breadcrumb li:last-child {
display: none;
}*/
#product .breadcrumb {
margin-top: 30px;
font-size: 12px;
}
#product .list-unstyled {
font-size: 12px;
}
#product .list-unstyled a {
color: #000;
text-decoration: none;
}
#product .list-unstyled a:hover {
color: #fd6410;
}
.bq-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-end;
margin-bottom: 20px;
}
#input-quantity {
width: 5ch !important;
}
#input-quantity, #button-cart, .btn-request, .pr-quantity .input-group-btn .btn {
height: 46px;
}
/* Chrome, Safari, Edge (WebKit/Blink) */
#input-quantity::-webkit-outer-spin-button,
#input-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
#input-quantity[type="number"] {
-moz-appearance: textfield;
appearance: textfield; /* стандартно */
}
.pagination {
margin: 20px auto;
justify-content: center;
}
.pagination>li {
font-size: 16px;
font-weight: 500;
}
.pagination>li>a, .pagination>li>span {
background-color: transparent;
border: none;
color: #333;
height: 36px;
width: 36px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
border: none;
background-color: transparent;
border-radius: 100%;
height: 36px;
width: 36px;
color: #ccc;
}
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
color: #000;
background-color: transparent;
}
.pagination>li:first-child>a, .pagination>li:first-child>span, .pagination>li:last-child>a, .pagination>li:last-child>span {
border-radius: 100%;
}
.pagination-results {
color: #666;
font-size: 11px;
}
.image_attributes {
position: absolute;
top: 30px;
}
.image_attributes.listing {
position: unset;
}
.image_attributes-container {
display: flex;
gap: 10px;
position: relative;
z-index: 3;
}
.imgattr-item {
background: #fff;
padding: 5px 10px;
border-radius: 6px;
box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.image_attributes.listing .imgattr-item img {
width: 30px;
}
/* buttons */
.buttons {
margin: 1em 0;
}
.btn {
padding: 7.5px 12px;
font-size: 13px;
font-weight: 500;
border: none;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-xs {
font-size: 9px;
}
.btn-sm {
font-size: 10.2px;
}
.btn-lg {
padding: 10px 16px;
font-size: 14px;
}
.btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
font-size: 12px;
}
.btn-group > .btn-xs {
font-size: 9px;
}
.btn-group > .btn-sm {
font-size: 10.2px;
}
.btn-group > .btn-lg {
font-size: 15px;
}
.btn-default {
color: #000;
background-color: transparent;
border: 1px solid #848478;
}
.btn-default:hover, .btn-default:active, .btn-default.active, .btn-default.disabled, .btn-default[disabled] {
color: #fff;
background-color: #848478;
}
.btn-primary {
color: #ffffff;
background-color: var(--main-accent);
text-shadow: none;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
background-color: var(--main-accent-hover);
}
.btn-primary-outline {
background-color: #fff;
color: var(--main-accent);
border: 1px solid var(--main-accent);
}
.btn-primary-outline:hover, .btn-primary-outline:active, .btn-primary-outline.active, .btn-primary-outline.disabled, .btn-primary-outline[disabled] {
background-color: var(--main-accent);
color: #fff;
border: 1px solid var(--main-accent);
}
.btn-warning {
color: #ffffff;
background-color: #faa732;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
background-color: #e28e18;
}
.btn-danger {
color: #ffffff;
background-color: #c73029;
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
background-color: #af221b;
}
.btn-success {
color: #ffffff;
background-color: #5bb75b;
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-info {
color: #ffffff;
background-color: #df5c39;
}
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
background-image: none;
background-color: #df5c39;
}
.btn-link {
border-color: rgba(0, 0, 0, 0);
cursor: pointer;
color: #23A1D1;
border-radius: 0;
}
.btn-link, .btn-link:active, .btn-link[disabled] {
background-color: rgba(0, 0, 0, 0);
background-image: none;
box-shadow: none;
}
.btn-inverse {
color: #000;
background-color: #fff;
border: 2px solid #8ac44a;
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
color: #fff;
background-color: #69a02b;
border-color: #69a02b;
}
/* list group */
.list-group a {
border: 1px solid #DDDDDD;
color: #888888;
padding: 8px 12px;
}
.list-group a.active, .list-group a.active:hover, .list-group a:hover {
color: #444444;
background: #eeeeee;
border: 1px solid #DDDDDD;
text-shadow: 0 1px 0 #FFF;
}
/* carousel */
.carousel-caption {
color: #FFFFFF;
text-shadow: 0 1px 0 #000000;
}
.carousel-control .icon-prev:before {
content: '\f053';
font-family: FontAwesome;
}
.carousel-control .icon-next:before {
content: '\f054';
font-family: FontAwesome;
}
/* product list */
.grid-list .swiper-slide {
height: auto !important;
}
.product-thumb {
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.06);
transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
overflow: hidden;
margin-bottom: 20px;
height: calc(100% - 20px);
display: flex;
flex-direction: column;
position: relative;
padding: 0.5rem;
}
.product-thumb:hover,
.product-thumb:has(:focus-visible) {
box-shadow: 0 6px 12px rgba(0,0,0,.10), 0 18px 40px rgba(0,0,0,.08);
transform: translateY(-2px);
border-color: rgba(0,0,0,.12);
}
.product-thumb .image {
position: relative;
background: #f7f7f8;
border-radius: 10px;
overflow: hidden;
border: 1px solid #f7f7f8;
}
.product-thumb .image img {
border-radius: 8px;
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
.product-thumb > a {
text-decoration: none;
display: block;
display: flex;
flex-direction: column;
}
.product-thumb .product-name {
color: #000;
text-transform: none;
margin-bottom: 12px;
font-size: 13px;
line-height: 16px;
font-weight: 300;
margin-top: 10px;
padding: 0 0.5rem;
display: block;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
height: 48px;
overflow: hidden;
}
.product-thumb a.product-name-link {
color: #000;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
margin-bottom: 10px;
text-decoration: none;
}
.product-thumb .caption {
padding: 0 0.5rem 0.5rem;
flex-grow: 1;
display: flex;
justify-content: space-between;
}
.product-thumb .btn-compare {
position: absolute;
top: 5px;
right: 5px;
background-color: #fff;
border: 1px solid #ccc;
padding: 5px 8px;
border-radius: 6px;
margin: 0;
}
.product-list .product-thumb {
flex-direction: row;
align-items: start;
}
.product-list .product-thumb .image img {
max-width: 220px;
}
.product-list .product-thumb .caption {
padding: 20px;
display: flex;
flex-direction: column-reverse;
gap: 5px;
margin-left: 0;
}
.product-list .product-thumb .product-name {
padding-left: 0;
font-weight: 700;
}
@media (max-width: 1200px) {
.product-grid .product-thumb .caption {
min-height: 210px;
padding: 0 10px;
}
}
@media (max-width: 767px) {
.product-list .product-thumb .caption {
min-height: 0;
margin-left: 0;
padding: 0 10px;
}
.product-grid .product-thumb .caption {
min-height: 0;
}
}
.product-thumb .rating {
padding-bottom: 10px;
}
#product .rating a {
color: #000;
text-decoration: none;
padding-top: 3px;
}
.rating {
gap: 10px;
}
.rating .fa-stack {
font-size: 8px;
}
.rating .fa-star-o {
color: #999;
font-size: 15px;
}
.rating .fa-star {
color: #FC0;
font-size: 15px;
}
.rating .fa-star + .fa-star-o {
color: #E69500;
}
.rating .from {
margin-left: 5px;
margin-right: 5px;
color: #666;
font-size: 12px;
}
.review-inner {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
margin-bottom: 20px;
gap: 20px
}
.review-item {
background-color: #fafafa;
border: 1px solid #ddd;
padding: 12px;
border-radius: 6px;
color: #000;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1 1 0px;
text-align: left;
}
.review-item:last-child {
margin-right: 0
}
.review-author {
font-weight: 500;
flex-basis: 60%
}
.review-stars {
flex-basis: 40%;
justify-content: flex-end;
display: inline-flex
}
.review-date,.review-date-added {
color: #90949c;
font-size: 11px;
display: block;
font-weight: 400
}
.review-text {
flex-grow: 1;
flex-basis: 100%
}
#form-review input, #form-review textarea {
max-width: 500px;
}
#input-captcha {
max-width: 200px !important;
}
.captcha-input-img img {
border: 1px solid #ddd;
border-radius: 6px;
margin-left: -10px;
height: 42px;
}
h2.price {
margin: 0;
}
.price {
color: #000;
font-weight: 600;
font-size: 13px;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.price-new {
font-weight: 600;
}
.price-old {
color: #999;
text-decoration: line-through;
font-weight: 300;
display: block;
}
.product-thumb .price-tax {
color: #999;
font-size: 12px;
display: block;
font-weight: 300;
}
.product-thumb .button-group {
padding: 0;
margin: 0;
}
.product-thumb .button-group .btn .fa {
font-size: 15px;
}
.labels-wrapper {
position: absolute;
z-index: 1;
color: #fff;
text-transform: uppercase;
font-weight: 300;
font-size: 12px;
line-height: 1.75;
}
.labels-wrapper.position_upleft,
.labels-wrapper.position_upright {
top: 5px;
right: 5px;
left: 5px;
bottom: 5px;
}
.labels {
padding:2px 7px 0;
margin-bottom:5px;
font-size: 11px;
font-weight: 500;
display: inline-block;
border-radius: 6px;
}
.inline-labels {
position: relative;
display: inline-flex;
padding: 0 15px;
align-items: center;
border-radius: 15px;
font-size: 12px;
line-height: 18px;
margin-right: 10px
}
/*.labels.label-new {
display: flex
}*/
.inline-labels span {
padding:3px 10px;
font-weight:500;
margin-right:10px;
border-radius:3px
}
.thumb img {
width: 100%;
}
@media (min-width: 1200px) {
.gallery-sticky {
padding-right: 40px;
}
}
/* fixed colum left + content + right*/
#column-left, #column-right {
margin-top: 12px;
}
@media (min-width: 768px) {
#column-left .product-layout .col-md-3 {
width: 100%;
}
#column-left + #content .product-layout .col-md-3 {
width: 50%;
}
#column-left + #content + #column-right .product-layout .col-md-3 {
width: 100%;
}
#content + #column-right .product-layout .col-md-3 {
width: 100%;
}
.review-inner {
flex-direction: row;
flex-wrap: wrap;
}
.review-item {
flex-basis: calc(50% - 20px)
}
}
/* fixed product layouts used in left and right columns */
#column-left .product-layout, #column-right .product-layout {
width: 100%;
}
/* fixed mobile cart quantity input */
.input-group .form-control[name^=quantity] {
min-width: 50px;
}
/* Missing focus and border color to overwrite bootstrap */
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
background-image: none;
background-color: #df5c39;
}
html[dir=rtl] .checkbox input[type="checkbox"],
html[dir=rtl] .checkbox-inline input[type="checkbox"],
html[dir=rtl] .radio input[type="radio"],
html[dir=rtl] .radio-inline input[type="radio"] {
position: absolute;
margin-top: 4px\9;
margin-right: -20px;
margin-left: unset;
}
html[dir=rtl] .input-group-btn:last-child > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
html[dir=rtl] .input-group .form-control:first-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: unset;
border-bottom-left-radius: unset;
}
html[dir=rtl] .container .row:first-child .col-sm-4, html[dir=rtl] .container .row:first-child .col-sm-5 {
float: right;
}
html[dir=rtl] #cart .dropdown-menu {
left: 0;
right: auto;
}
@media (min-width: 768px) {
html[dir=rtl] .navbar-nav {
float: right;
margin: 0;
}
html[dir=rtl] .navbar-nav > li {
float: right;
}
}
/*swiper fixes*/
.module-swiper, .blog-module {
position: relative;
padding-bottom: 20px;
overflow: hidden;
}
.swiper-pagination-bullet {
width: 14px !important;
height: 14px !important;
background: transparent !important;
border: 2px solid #fff;
opacity: 1 !important;
box-shadow: none !important;
}
.swiper-button-next, .swiper-button-prev {
color: transparent;
}
.swiper-button-next:before,.swiper-button-prev:before {
display: none;
}
.swiper-pagination-bullet-active {
background-color: #fff !important;
border: 2px solid #fff;
opacity: 1 !important;
}
.slideshow .swiper-pagination-bullet-active {
background-color: #fff !important;
}
.slideshow {
position: relative;
}
.slideshow .swiper {
overflow: hidden;
}
.slideshow .swiper-wrapper {
margin: 0 !important;
}
.slideshow .swiper-slide {
margin: 0 !important;
}
.slideshow .slideshow-controls {
position: absolute;
right: 12px;
bottom: 12px;
display: inline-flex;
align-items: center;
gap: 8px;
z-index: 5;
}
.slideshow .swiper-pagination.swiper-pagination-bullets {
position: static;
display: inline-flex;
gap: 6px;
}
.slideshow .swiper-pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
border-radius: 60%;
background: rgba(255,255,255,.6);
opacity: 1;
}
.slideshow .swiper-pagination .swiper-pagination-bullet-active {
background: #fff;
}
.slideshow .ssi-next {
width: 32px;
height: 32px;
border: 0;
background: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.slideshow .ssi-next i {
font-size: 34px;
line-height: 1;
color: #fff;
}
.slideshow .ssi-text {
position: absolute;
left: 25px;
bottom: 25px;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.slideshow .ssi-title{ font-size: 18px; font-weight: 700; }
.slideshow .ssi-description{ font-size: 14px; opacity: .95; }
/*icons module*/
.block_ico > span {
display: flex;
flex-direction: column;
gap: 5px;
align-items: center;
color: #000;
font-size: 12px;
font-weight: 400;
text-align: center;
}
.ico_msvg {
background-color: var(--light-bgr);
padding: 10px;
border-radius: 100%;
}
.ico_sz {
font-weight: 600;
font-size: 13px;
display: block;
}
/*modules styles*/
.title-subtitle {
color: #000;
font-size: 24px;
font-weight: 500;
text-align: center;
position: relative;
line-height: 1.05;
margin-bottom: 30px;
}
.title-subtitle:after {
content: '';
height: 3px;
width: 100px;
background-color: var(--second-accent);
position: absolute;
bottom: -12px;
left: calc(50% - 50px);
}
.title-link {
display: block;
position: absolute;
bottom: -35px;
font-size: 12px;
width: 100%;
text-decoration: none;
}
/*product page*/
#product-product .breadcrumb {
justify-content: flex-start;
}
#product-product {
margin-bottom: 10px;
}
#product-product > .bluebg {
padding-top: 0;
}
.product-images-wrapper {
padding-top: 30px;
}
.product-images-wrapper .swiper-wrapper {
margin-bottom: 10px;
}
.product-images-wrapper .swiper-wrapper .swiper-slide {
background-color: var(--light-bgr);
isolation:isolate;
}
.product-images-wrapper .swiper-wrapper .swiper-slide .thumb-image {
mix-blend-mode: darken;
}
#product-product h1 {
font-weight: 500;
margin-top: 20px;
margin-bottom: 10px;
}
.pr-quantity .control-label {
font-size: 12px;
}
.pr-quantity .btn {
padding: 0 10px !important;
background: #fff;
color: #333;
border: 1.5px solid #ced4da;
height: 42px;
}
.pr-quantity .form-control {
padding-left: 0;
padding-right: 0;
border: 1.5px solid #ced4da;
border-left: 0;
border-right: 0;
z-index: 3;
border-radius: 0;
}
.pr-quantity .input-group .input-group-btn:first-child .btn {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pr-quantity .input-group .input-group-btn:last-child .btn {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.stock {
border-radius: 6px;
padding: 3px 10px;
margin-bottom: 10px;
position: relative;
padding-left: 20px;
}
.stock:before {
content: '\2022';
font-size: 40px;
position: absolute;
top: 5px;
left: 0;
}
.stock.instock {
color: #28a745;
}
.stock.outofstock {
color: #dc3545;
}
.ocf-btn {
font-size: 12px !important;
}
@media (min-width: 992px) {
.main-title-block {
padding: 30px 0;
}
.main-header .phone, .main-header .profile {
display: block;
}
.ocf-theme-light .ocf-dropdown .ocf-filter-header {
background-color: var(--light-bgr) !important;
border: 1px solid #848478 !important;
}
.ocf-theme-light .ocf-dropdown .ocf-filter-header {
border-radius: 6px !important;
}
}
.scroll-hint {
text-align: center;
font-size: 14px;
color: #666;
margin-bottom: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.scroll-icon {
font-size: 26px;
display: inline-flex;
animation: scroll-hint-pulse 1.5s infinite;
margin-right: 10px;
color: var(--second-accent);
margin-top: -3px;
}
@keyframes scroll-hint-pulse {
0% { opacity: 0.3; transform: translateX(0); }
50% { opacity: 1; transform: translateX(5px); }
100% { opacity: 0.3; transform: translateX(0); }
}
.comparison-table {
table-layout: fixed;
width: 100%;
min-width: 600px;
}
.comparison-table th,
.comparison-table td {
width: 1%;
word-wrap: break-word;
text-align: center;
vertical-align: middle;
position: relative;
}
.comparison-table th img {
max-width: 250px;
display: block;
margin: 0 auto;
}
.comparison-table td:first-child,
.comparison-table th:first-child {
background-color: #f3f9ff;
font-weight: bold;
}
@media (min-width: 768px) {
.comparison-table th.comparison-title {
position: sticky;
left: 0;
background: #f9f9f9;
z-index: 2;
}
}
.comparison-table a {
text-decoration: none;
color: #000;
}
.comparison-table a:hover {
text-decoration: none;
color: var(--second-accent);
}
.comparison-table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* stellar nav */
.stellarnav.mobile .menu-toggle { padding: 0 5px 0 15px; }
.stellarnav.mobile ul li { padding-left: 10px; }
.stellarnav .menu-toggle span.bars { margin-right: 0; }
.stellarnav .menu-toggle span.bars span {
width: 20px;
background: #000;
margin: 0 0 5px;
}
.stellarnav .call-btn-mobile,
.stellarnav .close-menu,
.stellarnav .location-btn-mobile,
.stellarnav .menu-toggle { padding: 10px 0; }
.stellarnav .close-menu .fa { font-size: 30px; }
.stellarnav .mega .mega-col--image { padding: 10px; }
.stellarnav .mega .mega-col--image li { list-style: none; }
.stellarnav .mega-col--image img {
display: block;
max-width: 100%;
height: auto;
border-radius: 6px;
}
.stellarnav ul ul ul { box-shadow: none; left: 20px; }
.stellarnav ul ul a { text-transform: none; font-size: 13px; }
.stellarnav .mega { overflow: visible; }
.stellarnav--desktop { display: block; }
.stellarnav--mobile { display: none; }
@media (max-width: 991.98px) {
.stellarnav--desktop { display: none !important; }
.stellarnav--mobile { display: block !important; }
}
@media (min-width: 992px) {
.stellarnav--desktop{display: flex;justify-content: center;}
.stellarnav--mobile { display: none !important; }
.stellarnav.stellarnav--desktop .mega { position: relative; }
.stellarnav.stellarnav--desktop .mega > .mega--desktop {
display: none;
visibility: hidden;
position: fixed;
left: 0; right: 0;
margin: 0 auto;
width: 100vw;
z-index: 1000;
padding: 20px 0;
max-height: 80vh;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.stellarnav.stellarnav--desktop li.mega:hover > .mega--desktop,
.stellarnav.stellarnav--desktop li.mega:focus-within > .mega--desktop,
.stellarnav.stellarnav--desktop li.mega.open > .mega--desktop {
display: block !important;
visibility: visible !important;
}
.stellarnav.stellarnav--desktop li.mega:hover > .mega--desktop > li > ul,
.stellarnav.stellarnav--desktop li.mega:focus-within > .mega--desktop > li > ul,
.stellarnav.stellarnav--desktop li.mega.open > .mega--desktop > li > ul {
display: block !important;
visibility: visible !important;
}
.stellarnav.stellarnav--desktop
.mega:not(.mega-brands)[data-columns="5"] > .mega--desktop > li {
width: 20%;
float: left;
box-sizing: border-box;
}
.stellarnav--desktop .mega-brands .mega--desktop { height: 100%; }
.stellarnav--desktop .mega-brands .mega--desktop > li.mega-brands-wrap {
width: 100% !important;
float: none !important;
box-sizing: border-box;
}
.stellarnav--desktop .mega-brands .mega--brands-list {
display: block !important;
list-style: none;
padding: 0; margin: 0;
column-gap: 24px;
/* defensive resets */
float: none !important;
width: 100% !important;
white-space: normal !important;
}
.stellarnav--desktop .mega-brands .mega--brands-list > li {
display: block !important;
float: none !important;
width: auto !important;
break-inside: avoid;
-webkit-column-break-inside: avoid;
padding: 2px 0;
}
@media (min-width: 1200px) {
.stellarnav--desktop .mega-brands .mega--brands-list { column-count: 7; -webkit-column-count: 7; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.stellarnav--desktop .mega-brands .mega--brands-list { column-count: 6; -webkit-column-count: 6; }
}
}
#search {
width: auto;
order: 2;
}
.header-search-trigger {margin-top: -5px}
@media (max-width:768px) {
.menu-block {
padding-top: 0;
}
#search {
padding-right: 15px;
}
#search .fa-search {
font-size: 24px;
color: #000;
}
.search-icon {
position: initial;
right: auto;
}
}
.btn-link {
text-decoration: none;
color: #777;
}
.btn-link:hover {
text-decoration: none;
color: #000;
}
#account-edit,
#account-reward,
#account-password,
#account-address,
#account-address,
#account-newsletter,
#account-notify,
#account-order,
#account-nra,
#account-return,
#account-success,
#account-register {
max-width: 700px;
margin: 0 auto;
}
.card.primary-card {
border-color: #000;
}
.card-link {
text-decoration: none;
}
.card-link:hover {
text-decoration: underline;
}
.card-subtitle {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
color: #666;
}
.account-page .account-menu {
margin: 0 0 20px;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
gap: 15px;
}
.account-page .account-menu li {
display: flex;
width: 100%;
padding: 10px;
margin: 0;
padding: 0;
}
.account-page .account-menu li a {
display: flex;
background: var(--light-bgr);
border-radius: 20px;
color: #000;
padding: 15px;
width: 100%;
text-align: left;
align-items: center;
text-decoration: none;
flex-direction: column;
gap: 10px;
}
.account-page .account-menu li a:hover {
text-decoration: none;
background: var(--second-accent);
color: #fff
}
.account-page .account-menu li a .fa {
font-size: 26px;
color: #000;
margin-right: 10px
}
.account-page .account-menu li a:hover .fa {
color: #fff
}
@media (min-width: 960px) {
.account-page .account-menu li {
flex: 1 0 31%;
}
}
#description-block img {
max-width: 100%;
height: auto;
}
.blog-title-box {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.blog-title-box img {
max-width: 100px !important;
}
.blog-title-box a {
text-decoration: none;
color: #333;
font-weight: 600;
}
.blog-short-description {
font-size: 13px;
color: #666;
}
.blog-meta {
font-size: 11px;
color: #666;
font-weight: 400;
margin-bottom: 10px;
}
.blog-read-more {
margin-bottom: 25px;
}
.blog-read-more a {
text-decoration: none;
font-size: 13px;
}
.blog-read-more a:hover {
text-decoration: underline;
}
.lg-backdrop {background-color: #fff !important;}
.blog_grid_holder{display:grid !important;gap:24px !important;grid-template-columns:1fr !important}
@media (min-width:768px){
.blog_grid_holder.column-2,.blog_grid_holder.column-3,.blog_grid_holder.column-4{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media (min-width:992px){
.blog_grid_holder.column-1{grid-template-columns:repeat(1,minmax(0,1fr)) !important}
.blog_grid_holder.column-2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.blog_grid_holder.column-3{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.blog_grid_holder.column-4{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
.blog-card{overflow:hidden !important;display:flex !important;flex-direction:column !important;min-height:100% !important}
.blog-media{display:block !important;position:relative !important;aspect-ratio:16/9 !important;overflow:hidden !important;background:#f3f4f6 !important;border-radius: 16px;}
.blog-media .blog-img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;border-radius: 16px;}
.blog-body{display:flex;flex-direction:column;flex:1}
.blog-more{margin-top:auto}
.blog-card{background:#fff;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.08);padding:15px}
.blog-title{margin:0;font-size:16px;font-weight:500;line-height:1.2;margin-top: 15px}
.blog-title a{color:#333;text-decoration:none;}
.blog-title a:hover{color:var(--main-accent);text-decoration:none;}
.blog-meta{display:flex;flex-wrap:wrap;gap:10px;color:#666;font-size:12px;line-height:1.1;}
.blog-meta-item{display:inline-flex;align-items:center;gap:6px;}
.blog-excerpt{margin:0;color:#333;line-height:1.4;font-size:15px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.blog-more{margin-top:20px;display:inline-flex;align-items:center;gap:6px;color:#333;text-decoration:none;}
.blog-more:hover{color:var(--main-accent);text-decoration:none}
.blog.blog_post #comment_form {max-width: 600px;margin:0 auto}
.blog-swiper {padding-bottom: 30px}
.featured-with-slider .featured-slider-wrap{
display:flex; gap:24px; align-items:stretch;
}
.featured-with-slider .featured-col{
flex:0 0 30%;
max-width:30%;
}
.featured-with-slider .slider-col{
flex:1 1 70%;
max-width:70%;
display:flex;
}
.featured-with-slider .slider-bg{
background: #f6f8fb;
border-radius: 16px;
padding: 16px 16px 32px;
width:100%;
}
.featured-card{
position:relative;
border-radius:16px;
overflow:hidden;
background:#fff;
}
.featured-image{
height: 440px;
}
.products-swiper .swiper-slide{
height:auto;
}
.swiper-button-next,.swiper-button-prev {
width: 40px !important;
height: 40px !important;
margin-top: -20px !important;
background-size: 40px 40px !important
}
.swiper-button-prev {
background-image: url('data:image/svg+xml,') !important;
background-repeat: no-repeat;
background-size: cover;
height: 36px;
width: 36px
}
.swiper-button-next {
background-image: url('data:image/svg+xml,') !important;
background-repeat: no-repeat;
background-size: cover;
height: 36px;
width: 36px
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after, .swiper-button-prev:before, .swiper-rtl .swiper-button-next:before, .swiper-button-next:before, .swiper-rtl .swiper-button-prev:before {
content: none !important
}
@media (max-width: 991.98px){
.featured-with-slider .featured-slider-wrap{ flex-direction:column; }
.featured-with-slider .featured-col,
.featured-with-slider .slider-col{ max-width:100%; flex:0 0 100%; }
.featured-image{ height: 320px; }
}
.item-r {
margin-bottom: 1.5rem;
}
.item-r a {
text-decoration: none;
color: #000;
}
.item-r a:hover {
text-decoration: none;
color: var(--main-accent);
}
.item-r .banner-title {
font-size: 13px;
text-transform: uppercase;
margin: 12px 0 8px;
}
.item-r .banner-description {
font-size: 13px;
}
.banner-mosaic {
margin-bottom: 30px;
}
.mosaic-6{
--rgap: 20px;
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
grid-template-rows: none;
gap: var(--rgap);
column-gap: var(--rgap); row-gap: var(--rgap);
grid-column-gap: var(--rgap); grid-row-gap: var(--rgap);
align-items: start;
}
.mosaic-6 .mz-item{
position: relative;
margin: 0;
box-sizing: border-box;
overflow: hidden;
border-radius: 16px;
}
.mz-item::before{ content:""; display:block; }
.mz-square::before { padding-bottom: 100%; }
.mz-vertical::before{ padding-bottom: calc(200% + var(--rgap)); }
.mz-link{ position:absolute; inset:0; display:block; height:100%; z-index:3; }
.mz-item img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover; display:block;
transition: transform .35s ease;
z-index:0; border-radius:16px;
}
.mosaic-6 .img-fluid{ width:100% !important; height:100% !important; display:block; }
.mz-item::after{
content:""; position:absolute; inset:0;
background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
opacity:.85; transition:opacity .25s ease;
z-index:3; pointer-events:none;
border-radius:16px;
}
.mz-item:hover img{ transform: scale(1.03); }
.banner-caption{
position:absolute; left:20px; right:20px; bottom:20px;
z-index:4; color:#fff; pointer-events:none;
}
.mosaic-6 .banner-title{
margin:0 0 6px 0; font-weight:300; font-size:20px; line-height:1.2;
text-shadow:0 1px 2px rgba(0,0,0,.5);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mosaic-6 .banner-description{
margin:0; font-size:14px; line-height:1.35; opacity:.95;
text-shadow:0 1px 2px rgba(0,0,0,.45); max-height:3.6em; overflow:hidden;
}
.mosaic-6 > .mz-item{ grid-column:auto; grid-row:auto; }
.mosaic-6 > .mz-item:nth-child(1){ grid-column:1; grid-row:1 / span 2; } /* V */
.mosaic-6 > .mz-item:nth-child(2){ grid-column:2; grid-row:1; } /* S */
.mosaic-6 > .mz-item:nth-child(3){ grid-column:2; grid-row:2; } /* S */
.mosaic-6 > .mz-item:nth-child(4){ grid-column:2; grid-row:3 / span 2; } /* V */
.mosaic-6 > .mz-item:nth-child(5){ grid-column:1; grid-row:3; } /* S */
.mosaic-6 > .mz-item:nth-child(6){ grid-column:1; grid-row:4; } /* S */
@media (min-width:577px){
.mosaic-6{grid-template-columns: repeat(4, minmax(0,1fr));grid-template-rows: repeat(2, minmax(0,1fr));gap: 25px;align-items: stretch; }
.mosaic-6 .mz-item { width: -webkit-fill-available; }
.mz-item::before{ display:none; }
.mz-square { aspect-ratio: 1 / 1; }
.mz-vertical{ aspect-ratio: 1 / 2; }
.mosaic-6 > .mz-item:nth-child(1){ grid-column:1; grid-row:1 / span 2; }
.mosaic-6 > .mz-item:nth-child(2){ grid-column:2; grid-row:1; }
.mosaic-6 > .mz-item:nth-child(3){ grid-column:2; grid-row:2; }
.mosaic-6 > .mz-item:nth-child(4){ grid-column:3; grid-row:1 / span 2; }
.mosaic-6 > .mz-item:nth-child(5){ grid-column:4; grid-row:1; }
.mosaic-6 > .mz-item:nth-child(6){ grid-column:4; grid-row:2; }
.mosaic-6 .banner-title{ font-size:26px; }
}
.lg-sub-html, .lg-toolbar {
background-color: #fff !important;
}
.lg-actions .lg-next, .lg-actions .lg-prev {
color: #000 !important;
background-color: #fff !important;
}
.brand-index {
margin: 0 0 12px;
}
.brand-index__label {
display: inline-block;
margin-right: 8px;
font-size: .95rem;
}
.brand-index__list {
display: flex;
gap: 8px;
align-items: center;
list-style: none;
margin: 6px 0 0;
padding: 6px 0;
overflow-x: auto;
white-space: nowrap;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.brand-index__item { scroll-snap-align: start; }
.brand-index__link {
display: inline-block;
min-width: 2.25rem;
padding: .38rem .6rem;
border: 1px solid rgba(0,0,0,.15);
border-radius: 999px;
background: #fff;
color: inherit;
text-decoration: none;
text-align: center;
font-weight: 600;
line-height: 1;
font-size: .95rem;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.brand-index__link:hover,
.brand-index__link:focus-visible {
border-color: rgba(0,0,0,.35);
box-shadow: 0 2px 8px rgba(0,0,0,.1);
outline: none;
}
.brand-index__link[aria-current="true"],
.brand-index__link.is-active {
background: #111;
color: #fff;
border-color: #111;
}
@media (min-width: 768px) {
.brand-index__list {
flex-wrap: wrap;
overflow-x: visible;
white-space: normal;
}
}
.brand-grid {
display: grid;
gap: 16px;
list-style: none;
margin: 0;
padding: 0;
grid-template-columns: repeat(3, 1fr);
justify-items: stretch;
}
@media (min-width: 470px) {
.brand-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 600px) {
.brand-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 992px) {
.brand-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1200px) {
.brand-grid { grid-template-columns: repeat(7, 1fr); }
}
@media (min-width: 1400px) {
.brand-grid { grid-template-columns: repeat(8, 1fr); }
}
.brand-title-letter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 24px 0 12px;
padding: 6px 0;
border-bottom: 2px solid rgba(0,0,0,0.1);
}
.brand-title-letter__text {
font-size: 2.5rem;
font-weight: 800;
margin: 2.5rem 0 1rem;
opacity: .15;
text-transform: uppercase;
}
.brand-title-letter__top {
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.15);
background: #fff;
color: inherit;
text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.brand-title-letter__top .fa {
font-size: 20px;
line-height: 1;
}
.brand-title-letter__top:hover,
.brand-title-letter__top:focus-visible {
border-color: rgba(0,0,0,.35);
box-shadow: 0 2px 8px rgba(0,0,0,.1);
transform: translateY(-1px);
outline: none;
}
.brand-card {
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.06);
transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
overflow: hidden;
height: clamp(120px, 10vw, 150px);
display: flex;
}
.brand-title-letter + .brand-grid {
margin-top: 0.7rem;
}
.brand-card__link {
display: grid;
grid-template-rows: 1fr auto;
gap: .5rem;
padding: .5rem;
width: 100%;
text-decoration: none;
color: inherit;
}
.brand-card__media {
display: grid;
place-items: center;
background: var(--light-bgr);
border-radius: 8px;
overflow: hidden;
min-height: 0;
}
.brand-card__media img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
display: block;
}
.brand-card__name {
text-align: center;
font-weight: 600;
line-height: 1.2;
font-size: .95rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.brand-card__placeholder {
font-size: 2.5rem;
opacity: .15;
}
.brand-card:hover,
.brand-card:has(:focus-visible) {
box-shadow: 0 6px 12px rgba(0,0,0,.10), 0 18px 40px rgba(0,0,0,.08);
transform: translateY(-2px);
border-color: rgba(0,0,0,.12);
}
.brand-card__link:focus-visible {
outline: 3px solid #4c9ffe;
outline-offset: 3px;
border-radius: 10px;
}
.product-column-right #column-right {
width: 100% !important;
}
.product-column-right #column-right.hidden-xs {
display: block !important;
}
.availability-disclaimer {
color: #666;
font-size: 11px;
}
/* attributes */
#specification-block {clear: both}
#specification-block .spec-grid{
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
justify-content: center;
}
#specification-block .spec-card{
grid-column: span 12;
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 14px;
padding: 16px 18px;
box-shadow: 0 8px 22px rgba(0,0,0,.06);
width: 90%;
max-width: 720px;
margin-inline: auto;
}
@media (max-width: 575.98px){
#specification-block .spec-grid{
grid-template-columns: 1fr;
}
}
@media (min-width: 992px){
#specification-block .spec-card{ grid-column: span 6; }
}
@media (min-width: 1200px){
#specification-block .spec-card{ grid-column: span 4; }
}
#specification-block .spec-card__title{
font-weight: 700;
text-align: center;
margin-bottom: 12px;
}
#specification-block .spec-list{
margin: 0;
display: grid;
gap: 10px;
}
#specification-block .spec-item{
display: grid;
grid-template-columns: 1fr;
gap: 4px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(0,0,0,.03);
}
@media (min-width: 768px){
#specification-block .spec-item{
grid-template-columns: 1fr 1.2fr;
align-items: baseline;
gap: 12px;
}
}
#specification-block .spec-name{
margin: 0;
font-weight: 600;
color: #111;
}
#specification-block .spec-value{
margin: 0;
color: #333;
text-align: left;
word-break: break-word;
}
/* =========================
Product bundles
========================= */
.product-column-right .bundle-widget .bundle-title,
.bundle-list-name a {
font-size: 18px;
font-weight: 600;
line-height: 1.3;
margin: 0 0 14px;
text-decoration: none;
color: #000;
}
.bundle-list-name a:hover {
color: var(--main-accent);
}
.bundle-widget .bundle-swiper {
width: 100%;
overflow: hidden;
}
.bundle-widget .bundle-swiper .swiper-wrapper {
display: flex;
}
.bundle-widget .bundle-swiper .swiper-slide {
box-sizing: border-box;
padding-top: 10px;
}
.pbListing-box .box-content .box-products {
flex-direction: column;
}
.pbListing-box .PB_options_image {
max-width: 125px !important;
border: none;
}
.pbListing-box .PB_product_name {
color: #444;
font-weight: normal !important;
font-size: 12px !important;
line-height: 1.3em;
display: block;
display: -webkit-box;
height: 47px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.pbListing-box .PB_product {
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
display: flex;
width: auto !important;
flex-direction: column;
align-items: center;
margin: 0;
flex-basis: 25%;
}
.pbListing-box .pb_price {
display: none;
}
.PB_plusbutton {
font-size: 40px !important;
color: #fd6410 !important;
align-self: center !important;
font-weight: normal !important;
padding: 0 9px 40px !important;
position: absolute;
top: 0;
left: -24px;
bottom: 0;
background: #efefef;
border-radius: 100%;
width: 40px;
height: 40px;
align-items: center;
z-index: 2;
line-height: 42px;
}
.PB_bundle_info {
background: #fafafa;
margin-left: 0;
margin-top: 1px;
padding: 15px;
align-items: center !important;
justify-content: center !important;
flex-direction: row !important;
flex-wrap: wrap;
border-radius: 8px;
flex-basis: 50%;
gap: 20px;
}
.PB_bundle_total_price_regular,
.PB_bundle_total_price {
display: flex;
flex-direction: column;
flex: 1 0 calc(50% - 10px);
font-size: 11px !important;
}
.PB_bundle_total_price_price {
font-size: 16px;
font-weight: 600;
}
.PB_bundle_total_price_regular {
color: #666;
}
.PB_bundle_total_price {
color: #444;
}
.PB_bundle_total_price_regular .PB_bundle_total_price_price {
position: relative;
align-self: flex-start;
}
.PB_bundle_total_save,
#ProductBundlesSubmitButton {
flex: 0 1 100%;
}
.PB_bundle_total_save {
font-weight: 600;
font-size: 16px;
}
.PB_bundle_total_save .PB_bundle_total_price_price {
color: #fd6410;
}
.pb_quantity {
background-color: var(--second-accent) !important;
}
@media (min-width: 1500px) {
.pbListing-box .box-content .box-products.products2 {
flex-direction: row;
}
.products2 .PB_bundle_info {
margin-left: 20px;
margin-top: 0;
}
}
@media (min-width: 1900px) {
.pbListing-box .box-content .box-products.products3 {
flex-direction: row;
}
.products3 .PB_bundle_info {
margin-left: 20px;
margin-top: 0;
}
}
/* =========================
НОВО: ЛИСТИНГ layout rules
(Swiper като на продукт)
========================= */
/* 1) На листинга swiper контейнерът е същия като widget-а */
.pbListing-content .bundle-swiper {
width: 100%;
overflow: hidden;
}
.pbListing-content .bundle-swiper .swiper-wrapper {
display: flex;
}
.pbListing-content .bundle-swiper .swiper-slide {
box-sizing: border-box;
padding-top: 10px;
}
/* 2) Mobile first: stack - swiper ред 1, info ред 2 */
.pbListing-content .pbListing-box .box-content .box-products {
display: flex; /* ВАЖНО: старият CSS имаше само flex-direction */
flex-direction: column;
gap: 15px;
}
/* 3) >=992px: продукти (swiper) + оферта на един ред.
Офертата е 400px вдясно, swiper заема останалото място вляво. */
@media (min-width: 992px) {
.pbListing-content .pbListing-box .box-content .box-products {
flex-direction: row;
align-items: stretch;
gap: 20px;
}
/* Ляво: swiper */
.pbListing-content .pbListing-box .box-content .box-products .bundle-swiper {
flex: 1 1 auto;
min-width: 0; /* КРИТИЧНО за flex + swiper, иначе може да прелива */
}
/* Дясно: info 400px */
.pbListing-content .pbListing-box .box-content .box-products .PB_bundle_info {
flex: 0 0 400px;
width: 400px;
margin-top: 0; /* да не пада надолу */
margin-left: 0; /* нулираме старите margin-и */
align-self: stretch;
}
}
/* 4) Overrides на старите ultra-wide правила за листинга.
Старият CSS местеше info вдясно чак от 1500/1900px за products2/3.
С новата логика за листинга, това трябва да е от 992px винаги. */
@media (min-width: 1500px) {
.pbListing-content .pbListing-box .box-content .box-products.products2 {
flex-direction: row;
}
.pbListing-content .products2 .PB_bundle_info {
margin-left: 0; /* не ни трябва вече */
}
}
@media (min-width: 1900px) {
.pbListing-content .pbListing-box .box-content .box-products.products3 {
flex-direction: row;
}
.pbListing-content .products3 .PB_bundle_info {
margin-left: 0; /* не ни трябва вече */
}
}
/* Swiper basic за view */
.pbListing-content .bundle-swiper {
width: 100%;
overflow: hidden;
}
.pbListing-content .bundle-swiper .swiper-wrapper {
display: flex;
}
.pbListing-content .bundle-swiper .swiper-slide {
box-sizing: border-box;
padding-top: 10px;
}
/* Mobile first: stack (swiper отгоре, info отдолу) */
.pbListing-content .pbListing-box .box-content .box-products {
display: flex;
flex-direction: column;
gap: 15px;
}
/* Desktop: 2 колони - ляво swiper, дясно info 400px */
@media (min-width: 992px) {
.pbListing-content .pbListing-box .box-content .box-products {
flex-direction: row;
align-items: stretch;
gap: 20px;
}
.pbListing-content .pbListing-box .box-content .box-products .bundle-swiper {
flex: 1 1 auto;
min-width: 0; /* важно */
}
.pbListing-content .pbListing-box .box-content .box-products .PB_bundle_info {
flex: 0 0 400px;
width: 400px;
margin-top: 0;
align-self: stretch;
}
}
.samecollection_block {
margin: 20px 0;
}
.samecollection_block_title {
font-size: 18px;
font-weight: 600;
line-height: 1.3;
margin: 0 0 14px;
}
.js-collection-swiper:not(.swiper-initialized) .swiper-wrapper {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 576px) {
.js-collection-swiper:not(.swiper-initialized) .swiper-wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.js-collection-swiper:not(.swiper-initialized) .swiper-wrapper {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
.collection-item {
border: 1px solid rgba(0,0,0,.06);
border-radius: 8px;
background: #fff;
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.collection-item a {
display: block;
text-decoration: none;
color: inherit;
}
.collection-item img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 6px;
}
.collection-item:hover,
.collection-item:focus-within {
transform: translateY(-2px);
border-color: rgba(0,0,0,.12);
box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
@media (prefers-reduced-motion: reduce) {
.collection-item { transition: none; }
}
.js-collection-swiper.swiper-initialized .swiper-wrapper {
padding-bottom: 6px;
}
.contact-page {
position: relative;
z-index: 1;
}
/*.contact-page::before {
content: attr(data-page-title);
position: absolute;
inset: 0;
margin: auto;
top: 10%;
left: 0;
right: 0;
text-align: center;
font-size: clamp(3rem, 16vw, 6rem);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.04);
pointer-events: none;
z-index: -1;
}*/
.contact-page .card {
border-radius: 0.75rem;
}
.contact-locations .card {
height: 100%;
}
.contact-form .form-group:last-of-type {
margin-bottom: 0;
}
.banner-row .banner-card{
display: block;
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 8px 22px rgba(0,0,0,.08);
text-decoration: none;
color: inherit;
transition: transform .2s ease, box-shadow .2s ease;
}
.banner-row .banner-card__media{
position: relative;
overflow: hidden;
}
.banner-row .banner-card__media img{
display: block;
width: 100%;
height: auto;
transition: transform .35s ease;
transform: scale(1);
will-change: transform;
}
.banner-row .banner-card:hover{
box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.banner-row .banner-card:hover .banner-card__media img{
transform: scale(1.03);
}
.banner-row .banner-card__body{
padding: 12px 14px 14px;
}
.banner-row .banner-title{
font-weight: 600;
line-height: 1.25;
margin: 0 0 6px;
color: #111;
}
.banner-row .banner-description{
margin: 0;
color: #444;
line-height: 1.45;
font-size: .95rem;
}
.banner-row .banner-card__media img{
height: 100%;
object-fit: cover;
}
.module-swiper.has-fade .swiper-slide {
opacity: 1;
transition: opacity .2s ease;
}
.module-swiper.has-fade .swiper-slide-visible:not(.swiper-slide-fully-visible) {
opacity: .55;
}
.module-swiper.has-fade .swiper-slide-prev,
.module-swiper.has-fade .swiper-slide-next { opacity: .85; }
.module-swiper.has-fade .swiper-slide-visible:last-child,
.module-swiper.has-fade .swiper-slide-active { opacity: 1; }
.module-swiper.swiper-initialized .swiper-wrapper.grid-list{
display: flex !important;
flex-wrap: nowrap !important;
gap: 0 !important;
}
/* TK Checkout */
#tk_checkout * {
font-family: "Comfortaa", sans-serif !important;
}
.tk_panel {
border: 0 !important;
border-radius: 16px !important;
padding-top: 30px;
padding-bottom: 30px;
padding-left: clamp(20px, 5%, 40px);
padding-right: clamp(20px, 5%, 40px);
overflow: hidden;
background: #fff;
box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
#tk_cart .tk_panel_body {
padding: 0 !important;
}
.tk_panel_heading .tk_panel_icon,
.tk_panel_text::after {
display: none !important;
}
.tk_panel_heading {
padding: 0 0 5px !important;
font-size: 15px !important;
text-align: center;
}
#tk_checkout textarea,
#tk_checkout select,
#tk_checkout input[type="text"],
#tk_checkout input[type="password"],
#tk_checkout input[type="datetime"],
#tk_checkout input[type="datetime-local"],
#tk_checkout input[type="date"],
#tk_checkout input[type="month"],
#tk_checkout input[type="time"],
#tk_checkout input[type="week"],
#tk_checkout input[type="number"],
#tk_checkout input[type="email"],
#tk_checkout input[type="url"],
#tk_checkout input[type="search"],
#tk_checkout input[type="tel"],
#tk_checkout input[type="color"],
#tk_checkout .tk_shipping_method label input[type="radio"] + div,
.tk_payment_method label input[type="radio"]:checked + span,
.tk_payment_method label input[type="radio"] + span,
.tk_payment_method label:hover .payment_check_bgr,
#tk_checkout .tk_shipping_method .tk_shipping_method_price {
border-radius: 16px !important;
}
#tk_checkout .tk_shipping_method .tk_shipping_method_price {
padding-left: 5px !important;
padding-right: 7px !important;
}
#tk_checkout td input[type="text"],
#tk_coupon #tk_input_coupon,
#tk_voucher #tk_input_voucher {
border-radius: 16px 0 0 16px !important;
}
.tk_btn_remove,
#tk_coupon #tk_confirm_coupon,
#tk_voucher #tk_confirm_voucher {
border-radius: 0 16px 16px 0 !important;
}
.tk_btn_primary {
font-size: 12px !important;
color: #000 !important;
}
#tk_cart a {
color: #000;
text-decoration: none;
}
/*#tk_checkout.tk_checkout_lable_1 #tk_register {
margin-top: 0px !important;
}*/
#tk_account_custom_fields_table .tk_12_column.tk_center_column label,
#tk_register_top .tk_12_column.tk_center_column label,
.tk_agree label,
.tk_agree_2 label {
display: flex !important;
margin-top: 15px !important;
align-items: flex-start !important;
padding-top: 3px;
}
#tk_account_custom_fields_table .tk_12_column.tk_center_column label input {
margin-top: -3px !important;
}
#tk_checkout.tk_checkout_lable_1 input[type=checkbox], #tk_checkout.tk_checkout_lable_1 input[type=radio] {
width: 24px;
height: 24px;
margin-right: 10px;
flex-shrink: 0;
margin-top: -3px !important;
}
#tk_checkout .tk_shipping_method label input[type="radio"]:checked + div:after,
.tk_payment_method label input[type="radio"]:checked + span:after {
border-color: var(--main-accent) !important;
color: var(--main-accent) !important;
}
#tk_checkout .tk_shipping_method label input[type="radio"]:checked + div,
.tk_payment_method label input[type="radio"]:checked + span,
.tk_payment_method label:hover .payment_check_bgr {
border-color: var(--main-accent) !important;
}
#tk_checkout .tk_shipping_method .tk_shipping_method_title {
border-left: none !important;
}
#tk_checkout .tk_shipping_method .tk_shipping_method_icon {
display: none !important;
}
#tk_checkout .tk_shipping_method .tk_shipping_method_price {
width: 40% !important;
}
#tk_button_confirm {
height: 56px;
border-radius: 16px !important;
margin: 25px 0 !important;
}
@media (max-width: 768px) {
.tk_panel_body {
padding: 0 !important;
}
#tk_cart .tk_totals_price .tk_totals_left{
width: 58% !important;
}
#tk_cart .tk_totals_price .tk_totals_right{
width: 40% !important;
}
.tk_payment_method {
width: 100% !important;
}
}
.video-swiper .swiper-wrapper {
justify-content: center;
}
/* ===== Reviews Module ===== */
.module-reviews .title-subtitle{
font-weight: 800;
letter-spacing: -0.02em;
}
/* slide spacing */
.module-reviews .swiper-slide{
height: auto;
}
/* card */
.module-reviews .review-card{
position: relative;
border-radius: 0; /* на картинката е “квадратно” */
padding: 26px 26px 22px;
min-height: 320px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}
/* big quote marks */
.module-reviews .review-card::before,
.module-reviews .review-card::after{
position: absolute;
font-family: Georgia, "Times New Roman", serif;
font-size: 120px;
line-height: 1;
opacity: 0.18;
color: rgba(255,255,255,0.95);
pointer-events: none;
}
.module-reviews .review-card::before{
content: "“";
left: 14px;
top: 14px;
}
.module-reviews .review-card::after{
content: "”";
right: 14px;
bottom: 6px;
}
.module-reviews .review-stars{
display: flex;
gap: 6px;
font-size: 18px;
margin-bottom: 14px;
}
.module-reviews .review-stars .fa{
opacity: 0.95;
}
.module-reviews .review-text{
font-size: 22px;
line-height: 1.35;
font-style: italic;
margin: 0 0 18px;
z-index: 1;
}
.module-reviews .review-footer{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
z-index: 1;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 12px;
font-weight: 700;
}
.module-reviews .review-divider{
width: 22px;
height: 2px;
background: rgba(255,255,255,0.75);
display: inline-block;
transform: translateY(1px);
}
.module-reviews .review-author{
opacity: 0.95;
}
.module-reviews .review-product{
color: inherit;
text-decoration: none;
opacity: 0.9;
display: flex;
align-items: center;
gap: 10px;
letter-spacing: 0;
}
.module-reviews .review-product img {
max-width: 80px;
border-radius: 100%;
}
.module-reviews .review-product:hover{
text-decoration: underline;
opacity: 1;
}
.module-reviews .swiper-slide:nth-child(4n+1) .review-card{
background: var(--second-accent);
color: #ffffff;
}
.module-reviews .swiper-slide:nth-child(4n+1) .review-stars .fa{
color: #ffffff;
}
.module-reviews .swiper-slide:nth-child(4n+2) .review-card{
background: #ff6141;
color: #ffffff;
}
.module-reviews .swiper-slide:nth-child(4n+2) .review-stars .fa{
color: #ffffff;
}
.module-reviews .swiper-slide:nth-child(4n+3) .review-card{
background: #fece49;
color: #ffffff;
}
.module-reviews .swiper-slide:nth-child(4n+3) .review-stars .fa{
color: #ffffff;
}
.module-reviews .swiper-slide:nth-child(4n+4) .review-card{
background: #2dd1ce;
color: #ffffff;
}
.module-reviews .swiper-slide:nth-child(4n+4) .review-stars .fa{
color: #ffffff;
}
.module-reviews .swiper-button-next,
.module-reviews .swiper-button-prev{
top: 60% !important;
}
@media (max-width: 992px){
.module-reviews .review-card{ min-height: 290px; }
.module-reviews .review-text{ font-size: 20px; }
}
@media (max-width: 576px){
.module-reviews .review-card{ min-height: 260px; padding: 22px; }
.module-reviews .review-text{ font-size: 18px; }
}
.module-reviews .swiper-wrapper{
align-items: stretch;
}
.module-reviews .swiper-slide{
height: auto;
display: flex;
}
.module-reviews .review-card{
width: 100%;
border-radius: 16px;
}
.scontent-top-fullwidth .slideshow .swiper-slide a:after{
position: absolute;
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 1;
background: linear-gradient(204deg, rgba(255, 0, 0, 0) 30%, rgba(0, 0, 0, 0.65) 100%);
}
.ocf-noUi-connect:before, .ocf-noUi-handle {
background-color: #fd6410 !important;
}
@media (max-width:991px){
.ocf-btn-mobile-fixed .ocf-btn {
background-color: #fd6410 !important;
}
}
.profile-menu,.wishlist-menu {
display: inline-block;
}
@media (min-width:992px) {
.profile-menu,.wishlist-menu {
display: none !important
}
}
.tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.tags a {
background: rgba(0,0,0,.03);
padding: 10px 15px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #000;
text-decoration: none;
font-size: 14px;
}
.product-wishlist {
position: absolute;
top: 13px;
right: 10px;
border: none;
background: none;
z-index: 3;
}
.product-wishlist .fa {
font-size: 20px;
}
.message-success a {text-decoration: none;color:var(--main-accent);}
.message-success a.btn-gotocart{color: #fff}
/*tbi*/
#tbibank_button_body4 {
border-radius: 6px !important;
height: 46px !important;
box-shadow: none !important;
margin-top: 0 !important;
}
.tbibank_button_line {
font-family: "Comfortaa", sans-serif !important;
font-size: 12px !important;
}
#tk_payment_triger {padding-top:10px}
.cart-products{height: calc(100vh - 460px);overflow-y: scroll;}