#mobile_menu {
/*display: none;*/
}
/*@media only screen and (max-width: 800px) {*/
*:focus {
outline: none;
}
#catalog_menu {
display: none;
}
#demo_mode {
font-size: 0.9em;
/*display: none;*/
}
#demo_mode div {
width:auto;
max-width: 830px;
}
#compare_informer_wrap,
#micro_cart_informer_wrap {
height: 80px;
z-index: 20;
}
#compare_informer,
#micro_cart_informer {
padding-top: 40px;
padding-bottom: 5px;
}
.scrollTop {
bottom:0;
right:0;
}
#compare_informer,
#micro_cart_informer {
padding-top: 40px;
padding-bottom: 5px;
}
#micro_cart_informer_wrap {
top:auto;
bottom:145px;
}
#compare_informer_wrap {
top:auto;
bottom:55px;
}
.fancybox-skin {
padding: 15px!important;
}
body.front {
min-width: inherit;
}
.button {
line-height: 28px;
font-size:1.2em;
}
#logo {
/*padding: 30px 40px 30px 0;*/
padding: 0;
float: none;
clear: none;
/*clear: left;*/
max-width: 250px;
position: relative;
top: auto;
margin: auto;
left: auto;
right: auto;
background-size: contain;
}
#header {
max-width: 830px;
box-sizing: border-box;
width: 100%;
padding: 0 15px;
/*height: 228px;*/
clear: none;
height: auto;
/*margin-bottom: 35px;*/
/* overflow: hidden; */
}
.theme-light .nivoSlider {
height: auto!important;
/*min-height: 130px;*/
}
.theme-light .nivoSlider img {
height: auto!important;
/*min-height: 130px;*/
}
.scheme2 .theme-light {
height: auto!important;
}
#account {
font-size: 14px;
text-align: center;
}
#account a {
float:none!important;
display:inline-block!important;
width:auto;
}
/*#account #register {
width: 86px;
}*/
#user_cart_wrap {
max-width: 205px;
width: 205px;
float: none;
background-position: right 130px;
/*padding-top: 145px;
padding-bottom: 35px;*/
padding-top: 30px;
padding-bottom: 10px;
margin: auto;
background-image:none;
}
div#account:after,
.menu li:after,
#back_forward:after,
.price_block:after,
.product:after,
.variants:after,
#browsed_products {
clear: both;
content: "";
display: table;
}
#search {
float: none;
box-sizing: border-box;
width: 100%;
margin: 0;
}
#search .input_search {
display: inline-block;
float: none;
box-sizing: border-box;
}
#search .button_search {
float: right;
}
#menu_wrap {
height: auto;
/*height: 330px;*/
padding: 20px 15px 12px 15px;
margin: 10px -15px 0;
position: relative;
/*height: 46px;*/
}
#search .input_search {
width: 85%;
}
.slider-wrapper {
height: 261px;
margin: -35px -15px 0;
}
.menu {
margin-left: 0;
margin-top: 20px;
max-width: 100%;
max-height: none;
display: none;
}
/*
#catalog_menu {
display: none;
}
*/
/*mobile_menu*/
#mobile_menu {
/*padding: 7px 15px 7px 15px;*/
box-sizing: border-box;
display: block;
}
#mobile_menu ul li a {
/*padding: 0 15px;*/
/*line-height: 30px;*/
display: block;
padding: 10px;
/*margin: -10px;*/
position: relative;
z-index: 2;
}
#mobile_menu>ul>li>a {
padding-right: 30px;
}
#mobile_menu>ul>li ul a {
padding-left: 20px;
}
#mobile_menu>ul>li>a:before {
transform: rotate(-135deg);
border-top: 1px solid #777;
border-left: 1px solid #777;
display: inline-block;
width: 8px;
height: 8px;
margin: auto;
position: absolute;
right: 14px;
/*left: 0;*/
top: 50%;
margin-top: -5px;
z-index: 1;
/*bottom: 0;*/
content: '';
}
#mobile_menu ul li {
border-top: 1px solid #f2f2f2;
/*padding: 10px;*/
position: relative;
}
#mobile_menu a {
color: #4c4c4c;
text-decoration: none;
}
#mobile_menu>ul {
margin: 15px 0;
/*background-color: #fff;*/
}
#mobile_menu ul {
list-style-type: none;
padding: 0;
}
#mobile_menu ul li a.mob--active,
#mobile_menu ul li a:hover {
/*background-color: #d9d9d9;*/
}
#mobile_menu .nav-sub {
/*background: #f9f9f9;*/
}
.nav-sub li ul a {
padding-left: 30px;
/*color: #a3a3c0;*/
}
.nav-sub-2, .nav-sub-3 {
display: none;
}
#mobile_menu ul .nav-sub-2 li a {
padding-left: 40px;
/*color: #a3a3c0;*/
}
#mobile_menu ul .nav-sub-3 li a {
padding-left: 60px;
}
/*-------main--------*/
#main {
max-width: 800px;
width: 100%;
}
/*-------footer------*/
#footer_background {
/*background-color:white;*/
/*border-top: 2px solid black;*/
}
#footer {
max-width: 830px;
box-sizing: border-box;
width: 100%;
padding: 0 15px;
padding-top: 30px;
padding-bottom: 10px;
margin-top: 40px;
}
#ftr-rgt,
#ftr-lft,
#ftr-mdll,
#ftr-mdlr {
width: 100%;
margin-right: 0;
float: none;
text-align: center;
/*border-top:1px solid #ccc;*/
}
#ftr-mdlr ul {
width: 135px;
margin: auto;
}
#ftr-rgt a.mgzns {
display:inline-block;
padding-right:0;
padding-left:45px;
background-position:left top;
}
/*content*/
#content {
box-sizing: border-box;
float: none;
width: 100%;
padding: 0 15px;
/*min-height: 400px;*/
min-height: auto;
margin: auto;
/*margin-bottom: 40px;*/
margin-bottom: 20px;
}
h1, .h1 {
font-size: 2em;
line-height: 1.3em;
margin-bottom: 1em;
/*font-size: 28px;
line-height: 43px;
margin-bottom: 20px;
*/
}
h2, .h2 {
/*text-align: center;*/
/*text-align: justify;*/
text-align: left;
}
#content p {
text-align: justify;
}
#content h1 + p , #content .h1 + p {
text-align: justify;
}
h2, .h2 {
line-height: 1.3em;
font-size: 2em;
margin: 1em 0;
}
p:not(:last-child) {
margin-bottom: 15px;
line-height: 20px;
}
#content.page_view h2,
#content.page_view .h2,
#content.page_view p {
text-align: justify;
}
#content p img {
max-width: 100%;
height: auto;
}
/*left*/
#left {
/*width: 265px;*/
/*padding: 0 30px 0 0;*/
/*width: 272px;*/
width: 100%;
box-sizing: border-box;
float: none;
padding: 0 15px;
margin: auto;
/*overflow: hidden;*/
/*margin-bottom: 40px;*/
margin-bottom: 0;
/*border-top: 1px solid #ccc;*/
padding-top:50px;
}
#left .banner1 {
text-align: center;
}
.products {
margin-bottom: 0;
}
.products .product {
/*width: 254px;*/
width: 99%;
text-align: center;
/*float: left;*/
/*height: 390px;*/
border: 1px solid transparent;
display: block;
/*margin: 0 auto 20px;*/
margin: 0 auto 50px;
padding: 0;
}
.products .product:hover {
border:none;
}
.products .variants {
width: 100%;
margin: auto;
margin-top:20px;
}
.product .variants select {
font-size: 18px;
height: 40px;
width: 99%;
}
.peb_delivery {
padding: 0px;
}
.products .compare {
text-align: center;
}
.product .compare, .product .compare * {
font-size: 16px !important;
line-height: 16px !important;
}
.products .product .product_info a {
font-size: 1.3em;
line-height: 1.3em;
}
.scheme2 .products .product .image {
width: 250px;
height: 250px;
line-height: 250px;
overflow:hidden;
padding:0;
margin-bottom:10px;
}
.scheme2 .products .product .image img {
max-width: 240px;
max-height: 240px;
overflow:hidden;
}
.product .price b {
font-size:1.8em;
}
.products .product h3, .products .product .h3 {
height:auto!important;
}
.products.side_marked_product .product {
margin: 0 auto 50px!important;
padding: 0;
text-align: center;
/*float: none;*/
width: 99%!important;
}
.products .product .product_info {
width:70%!important;
margin-left:auto;
margin-right:auto;
}
.products .product .image {
margin: auto;
margin-bottom: 20px;
}
#browsed_products li {
margin: 15px 17px;
}
.product .gallery {
width: 100%;
max-width: 330px;
/*width: 290px;*/
box-sizing: border-box;
float: none;
margin: auto;
}
.product .image img {
max-width: 100%;
}
.product .image {
/*width: 290px;*/
box-sizing: border-box;
/*width: 100%; */
width: auto;
}
.product .excerpt {
float: none;
margin: auto;
/*width: 300px;*/
width: 100%;
/*max-width: 290px;*/
min-width: 260px;
}
.products_table {
margin: 0 -15px;
}
.products_table .image {
width: 40px;
height: 40px;
}
.products_table .variants {
position: relative;
top: 0;
right: initial;
text-align: left;
display: inline-block;
}
.product .variants select {
/*width: 228px;*/
width: 100%;
}
.products_table .product .variants select {
margin: 0 20px 2px 0px;
}
.products_table .product_info h3 {
margin-right: 20px;
vertical-align: middle;
}
.products_table .product {
height: auto;
padding: 0 15px;
}
.products_table .product .price {
vertical-align: middle;
}
.products_table .product .price_block {
height: auto;
}
.products_table .product .not_available {
position: relative;
line-height: 1.5;
float: left;
font-size: 12px;
margin-top: 6px;
margin-bottom: 6px;
}
#content .products .product p.not_available {
text-align:center;
margin-top:10px;
font-size:1.5em;
}
.products_table .product .product_info h3 {
float: left;
}
.products_table .button {
vertical-align: middle;
}
.products_lists .image {
/*width: 160px;*/
max-width: 160px;
margin: auto;
width: auto;
float: none;
}
.products_lists .image img {
max-width: 150px;
max-height: 150px;
}
.products_lists .price_block {
/*max-width: 290px;*/
max-width: 100%;
box-sizing: border-box;
float: left;
}
.products_lists .variants select {
margin-right: 5px;
}
#content .product .stock_block p,
#content .product .annotation p {
/*text-align: left;*/
text-align: justify;
}
.products_lists .product_info {
/* margin-left: 160px; */
margin-left: 0;
float: none;
width: 100%;
box-sizing: border-box;
}
.product .annotation {
height: auto !important;
max-height: 100px;
margin-bottom: 0;
}
.product .annotation p {
margin: 0;
padding: 0;
}
.product .features label {
min-width: 130px;
margin-right: 10px;
}
.product .features span {
display: inline-block;
}
.products_lists .product {
/*height: 190px;*/
height: auto;
}
div.product .button {
float: right;
}
.product-sku {
display: inline-block;
/*width: auto;*/
float: none;
margin-bottom: 20px;
}
#back_forward {
text-align:center;
}
#back_forward a.next_page_link {
float: none;
/*margin-top: 2em;*/
}
#brands a {
margin-bottom: 2px;
}
.product .peb_wrap {
/*width: 290px;*/
width: 100%;
box-sizing: border-box;
}
.peb_delivery {
min-width: 214px;
max-width: 254px;
box-sizing: border-box;
white-space: pre-line;
max-width: none;
width: 100%;
text-align: justify;
border:none;
}
.category_view {
float: none;
width: 100%;
text-align: left;
}
.sort {
margin-right: 0;
width: auto;
}
/*tabs*/
div.tabs {
height:auto;
}
div.tabs a {
/*padding: 0 2px 1px;*/
padding: 0;
margin:0;
font-size: 1em;
/*width: 10%;*/
width:auto;
height: 35px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
float:none;
clear:both;
display:block;
}
.tabs a.current {
padding: 0;
border-bottom: 3px solid white;
/*width: auto;*/
}
.tabs a:hover {
padding: 0;
}
.box h2, .box .h2 {
margin-top: 10px;
text-align: left;
line-height: 1.2em;
font-size: 1.5em;
margin: 1em 0;
}
.box embed {
width: 100%;
height: 100%;
}
.box .features {
margin-bottom: 0;
}
#content .box p {
text-align: left;
}
/*feedback*/
.feedback_form,
.comment_form {
position: relative;
padding-bottom: 60px;
}
.feedback_form .captcha,
.comment_form .captcha {
/*float: left;*/
/*float: none;*/
width: 106px;
/*margin-right: 10px;*/
}
.feedback_form .captcha img,
.comment_form .captcha img {
width: 100%;
}
.feedback_form .input_captcha {
/*float: left;*/
width: 106px;
height: 30px;
box-sizing: border-box;
margin-top: 15px;
}
.feedback_form .button,
.comment_form .button {
/*
float: none;
position: absolute;
left: 50%;
margin-left: -53px;
bottom: 20px;
//margin-top: 15px;
*/
float:none;
clear:both;
margin:0;
position:inherit;
}
.register_form .button,
.login_form .button {
float: none;
margin: auto;
margin-top: 20px;
}
/*blog*/
#blog li {
clear: none;
position: relative;
}
#blog .blog_image_mini {
margin: 10px 0;
float: none;
clear: none;
}
#back_forward a.prev_page_link {
margin-right: 10px;
}
#back_forward a {
display: inline-block;
}
#contentFull {
padding: 50px 15px 20px;
margin-bottom: 0;
min-height: auto;
}
#contentFull #cartHistoryBack {
top: 0;
right: 15px;
left: 15px;
}
.cart_warning_text {
text-align: justify;
}
.cart_warning_text img {
margin: 10px 15px 25px 0;
}
#cart_informer {
width:auto;
text-align: center;
}
#cartProducts {
max-width: 540px;
margin: auto;
width: 100%;
float: none;
padding-bottom: 20px;
}
#cartOrdering {
width: 100%;
max-width: 400px;
float: none;
margin: auto;
padding-bottom: 25px;
/* margin-right: 0; */
//padding-bottom: 30px;
}
.form {
margin-bottom: 0;
width: 100%;
box-sizing: border-box;
max-width: 400px;
margin: auto;
}
.form input[type="text"],
.form input[type="password"] {
box-sizing: border-box;
/*width: 100%;*/
}
.form textarea {
box-sizing: border-box;
}
.form select {
width: 100%;
}
.form label a {
margin-bottom: 10px;
}
.comment_form {
margin: 20px auto 30px;
max-width: 400px;
width: 100%;
box-sizing: border-box;
border-radius: 10px;
}
.comment_form input {
box-sizing: border-box;
}
.comment_form h3,
.comment_form label {
font-size: 13px;
margin: 0 0 1px 0;
}
.comment_form .input_name,
#comment_text {
margin-top: 0;
margin-bottom: 10px;
}
#comment_captcha {
width: 106px;
height: 30px;
}
.comment_form .captcha {
margin-top: 0;
margin-left: 20px;
}
.comment_form .input_captcha {
margin-top: 0;
}
.comment_form .comment_textarea {
box-sizing: border-box;
}
.comment_form label {
float: none;
width: auto;
}
.comment_form .input_name {
width: 50%;
min-width: 235px;
}
.purchasesBlock {
box-sizing: border-box;
min-width: 276px;
}
.purchasesBlock img {
vertical-align: middle;
}
#purchases td.name,
#purchases .amount,
#purchases td.price {
font-size: 10px;
padding-left: 5px;
padding-right: 5px;
line-height: 1.1rem;
}
#purchases .name {
padding-left: 0;
}
#purchases .name small {
font-size: 10px;
}
#purchases .remove {
padding-left: 5px;
}
#purchases th {
font-size: 16px;
}
#purchases .coupon .name input {
margin-top: 2px;
vertical-align: middle;
}
#purchases .coupon .name input.coupon_code {
width: 140px;
}
#purchases .button.btn_apply {
line-height: 29px;
}
.cart_form .button {
margin: auto;
margin-top: 20px;
display: block;
float: none;
}
#comparemain .compare img {
max-width: 100%;
}
#comparemain .hideable {
padding: 5px !important;
}
#uLogin iframe {
height: auto!important;
width: 100%!important;
}
.sh_chat {
left: 0!important;
right: 0!important;
margin: auto;
width: 275px !important;
}
#features {
width: 100%;
box-sizing: border-box;
background: #f9f9f9;
}
#features td li {
border-top: 0;
}
#features table {
width: 100%;
box-sizing: border-box;
}
#features form {
padding: 0;
}
#features .feature_name,
#features .feature_values {
padding: 7px 0;
padding-left: 20px;
}
.btn_filter {
display: block;
margin: auto;
}
.features_wrap_left {
margin: 0 auto!important;
padding-bottom: 20px;
}
#brands img {
margin: 0;
}
#brands a.selected {
padding: 4px 8px;
}
#catalog_menu + h3 {
display: none;
}
/*
.category_view [href*="#table"] {
display: none;
}
*/
.category_view {
display: none;
}
.category_image_micro {
display: none;
}
#mini_cart_wrap {
min-width: initial;
}
#mini_cart td {
font-size: 10px;
}
#mini_cart th.price {
font-size: 16px;
line-height: 25px;
}
#checkout {
text-align: center;
}
#btnCheckout,
#btnProceed {
float: none;
font-size: 12px;
}
#btnCheckout {
margin-right: 10px;
margin-bottom: 2px;
}
#btnProceed {
margin-left: 0;
}
#mini_cart th.price {
text-align: center;
font-size: 16px;
line-height: 28px;
padding-bottom: 5px;
}
#blog_menu_category {
margin: 0 -15px;
}
#blog_menu_category .h3 a {
padding-left: 15px;
}
#blog_menu_category div {
padding: 20px 15px 10px 15px;
}
#browsed_products_wrap {
margin-bottom: 20px;
overflow: hidden;
/*border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;*/
}
.html_side_wrap {
margin: 0;
text-align: center;
}
#vk_groups {
width:auto!important;
}
#content iframe {
width: 100% !important;
height: auto !important;
}
.social {
height: 30px;
margin: 20px 0 20px 0;
overflow: hidden;
}
.nivo-controlNav {
/*display:none;*/
}
.site_version {
display:block;
padding-bottom: 20px;
}
.slider-wrapper {
margin:0 -15px 0 -15px;
}
.scheme2 .theme-light {
/*height: 174px!important;*/
}
.nivo-caption {
font-size: 12px!important;
line-height: 12px!important;
padding: 3px 5px!important;
}
.nivo-caption * {
font-size: 12px!important;
line-height: 12px!important;
padding:0!important;
}
.theme-light .nivo-controlNav {
padding-bottom:0!important;
}
.theme-light .nivo-directionNav a {
bottom:auto!important;
}
.home #header {
margin-bottom:0;
}
#currencies {
text-align: center;
}
#contact,
.scheme2.change_header #contact {
float: none;
margin-top: 0;
/*max-width: 470px;*/
width: 100%;
/*max-height: 150px;*/
max-height: none;
text-align: center;
padding-top:0;
}
#contact div {
height: auto;
}
#contact .callback_wrap {
text-align: center;
}
#contact .phone i, #contact .phone b {
float: none;
/*display:inline-block;*/
color: #fff!important;
}
#contact .phone i {
clear:left;
}
#contact .phone b:after {
content: '\A';
white-space: pre;
}
#contact .phone i:after {
content: '\A';
white-space: pre;
}
#cart_informer a.my_cart {
color: #fff;
}
#contact .phone i {
/*padding: 0px 6px 0px 40px;*/
padding: 0px 0px 0px 40px!important;
}
#contact .phone1 i {
background: url(../images/ic_phone.png) left center no-repeat;
}
.phone i a {
color:inherit;
text-decoration:none;
}
#contact .callback {
/*display:none;*/
font-size: 1em;
}
/*
#contact .phone2 b {
padding: 0px 16px 0px 40px!important;
color: #51595C;
font-size: 24px;
line-height: 34px;
}
#contact .phone2 b.ph_ks {
background: url(../images/ic_kiev.png) left center no-repeat;
}
#contact .phone2 b.ph_lf {
background: url(../images/ic_life.png) left center no-repeat;
}
#contact .phone2 b.ph_phone {
background: url(../images/ic_phone.png) left center no-repeat;
}
#contact .phone2 b.ph_mts {
background: url(../images/ic_mts.png) left center no-repeat;
}
*/
/*
#contact .phone i {
font-size: 20px;
float: none;
display: block;
width: 146px;
margin: auto;
}
*/
/*** SHOP ***/
#logo,
.scheme2.change_header #logo {
background: url(../images/logo.png) center 22px no-repeat;
height:280px; /* */
/*
background: url(../../front/images/logo.png) center 30px no-repeat;
height:120px;
*/
width:100%;
max-width:none;
float:none;
clear:both;
padding:0;
/*background-size: inherit;*/
}
a {
color: #424242;
}
.button:hover, .button:focus, .button:active {
/* background-color: #E10327; */
background-position: right bottom;
background-color: #a40000;
border: 1px solid #a40000;
color: #fff;
}
.button {
background-color: #DF1717; /* */
border-color:#DF1717; /* */
}
.on_request {
background-color: #fff; /* */
border-color:#999; /* */
}
.btn_filter {
color: #3a3a3a;
background-color: #F0F0F0;
border: 1px solid #999;
}
#header {
background-color: #000; /* */
}
#menu_wrap {
background-color: #383838; /* - + */
}
#search {
background-color: #fff; /* */
}
#search .input_search {
color: #000; /* */
}
#mobile_menu>ul {
background-color: #fff; /* */
}
#mobile_menu ul li {
border-top: 1px solid #eee; /* */
}
#mobile_menu ul ul li {
border-color: #eee; /* */
}
#mobile_menu ul ul ul li {
border-color: transparent; /* */
}
#mobile_menu a {
color: #4c4c4c; /* - */
}
#mobile_menu .nav-sub {
background-color: #f9f9f9; /* */
}
#mobile_menu li>a.mob--active,
#mobile_menu li>a:hover {
background-color: #e1e1e1; /* */
}
#mobile_menu li li>a.mob--active,
#mobile_menu li li>a:hover {
background-color: #e9e9e9; /* */
}
#mobile_menu #nav-sub-filtr {
background-color: #f9f9f9; /* */
}
.product .peb_wrap {
border-color: orange; /* */
border-radius: 5px;
}
#blog_menu_category {
/* */
}
#blog_menu_category div {
background-color: #F7F7F7; /* */
}
#footer_background {
background-color:#000000;
}
#footer_background .pay_block {
/*background-color:#FFF;*/ /* */
}
/*}*/
/* ** сброс стилей **
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
input:focus {
outline:none;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
strong {
font-weight: bold;
}
.clear {
clear:both;
float:none;
font-size:0px;
height:0px;
line-height:0px;
}
/* ** общий стиль **
================================================== */
html,
body {
height: 100%;
font: 14px 'Open Sans', Arial, sans-serif;
color: #4c4c4c;
line-height: 20px;
}
body.front { /* for all page */
min-width: 1000px;
background: #fff url(../images/body_bg.jpg) center top no-repeat;
background-image: none;
}
body.inner { /* for all inner page exlude homepage */
background: #fff url(../images/body_bg.jpg) center top no-repeat;
background-image: none;
}
p {
margin-bottom: 15px;
line-height: 20px;
}
h1, .h1 {
font-size: 38px;
margin-bottom: 40px;
line-height: 42px;
font-weight: normal;
text-shadow: 0px 1px 0px #fff;
width: auto;
display: block;
}
h2, .h2 {
clear: both;
font-size: 20px;
/*margin-top: 10px;
margin-bottom: 10px;*/
font-weight: normal;
margin-top: 20px;
margin-bottom: 16px;
display: block;
}
h3, .h3 {
font-size: 16px;
margin-top: 0px;
margin-bottom: 10px;
font-weight: normal;
display: block;
}
a {
color: #296CB6;
}
a:hover,a:focus,a:active {
color: #d31534;
text-decoration: none;
}
e[type="button"] {
cursor: hand;
cursor: pointer;
-webkit-appearance: none;
}
/* чистый блок для обнуления обтекаемости */
.clear {
font-size: 1px;
line-height: 1px;
height: 1px;
clear: both;
float: none;
}
ul.dropdown li.dir {
height: 46px;
padding: 0 11px 0 10px;
}
ul.dropdown ul a {
padding: 8px 8px;
}
/* **** DEMO MODE ****
================================================== */
#demo_mode {
width: 100%;
height: 40px;
background-color:#1D1D1D;
margin: 0 auto;
}
#demo_mode div{
margin: 0px auto;
width: 970px;
height: 40px;
text-align: center;
line-height: 38px;
}
#demo_mode a {
display: inline-block;
margin: 0 5px;
color:#999;
}
#demo_mode a:hover,
#demo_mode a:focus,
#demo_mode a:active,
#demo_mode a.active {
color:#fff;
text-decoration: none;
}
/* **** TOP WRAP ****
================================================== */
#top_background {
width: 100%;
background-color: #e6e6e6;
height: 35px;
display: none;
}
#top {
margin: 0px auto;
width: 980px;
/*background-color: #999;*/
height: 100%;
overflow: hidden;
}
/* **** HEADER WRAP ****
================================================== */
#header {
position:relative;
margin: 0px auto;
width: 980px;
height: 228px;
clear: both;
margin-bottom: 35px;
/*overflow: hidden;*/
}
/* ** logo **
================================================== */
#logo {
padding: 30px 40px 30px 0;
float: left;
clear: left;
width: 250px;
background: url(../images/logo.png) 0px 22px no-repeat;
height: 120px;
}
#logo a {
display: block;
width: 100%;
height: 100%;
}
/* ** блок c корзинкой, валютой и авторизацией **
================================================== */
#user_cart_wrap {
width: 190px;
float: right;
background: transparent url(../images/cart_bg.gif) right 42px no-repeat;
padding-top: 44px;
}
/* корзинка */
#cart_informer {
width: 180px;
color: #505050;
padding-bottom: 48px;
padding-bottom: 7px;
}
#cart_informer a.my_cart {
font-size: 20px
}
/* выбор валюты */
#currencies {
display: block;
line-height: 20px;
text-align: left;
padding-bottom: 15px;
font-size: 11px;
color: #888;
}
#currencies ul {
display: inline
}
#currencies ul li {
display: inline;
padding-left: 5px;
list-style: none;
}
#currencies ul li a {
font-size: 11px;
white-space: nowrap;
color: #888;
}
#currencies ul li a:hover,
#currencies ul li a:focus,
#currencies ul li a:active {
color: #505050
}
#currencies ul li.selected a {
text-decoration: none
}
/* авторизация */
#account {
font-size: 11px;
text-align: left;
color: #505050;
line-height: 15px;
vertical-align: middle;
}
#account a {
color: #878787
}
#account a:hover,
#account a:focus,
#account a:active {
color: #505050
}
#account #register {
float: left;
width: 80px;
}
#account #username {
float: left;
/*width: 160px;*/
}
#account #login,
#account #logout {
float: left;
margin-left: 20px;
width: 40px;
margin-bottom:10px;
}
/* ** меню страниц (схема 2) **
================================================== */
#menu_wrap {
background: #E6E6E6 none left top repeat-x;
height: 46px;
}
.menu {
display: block;
margin-left: 295px;
/*max-width: 690px;*/
overflow: hidden;
max-height: 46px;
max-width: 700px;
}
.menu li {
display: inline;
list-style: none;
}
.menu li a {
font-size: 14px;
display: block;
float: left;
line-height: 46px;
padding: 0 18px;
color: #606060;
text-decoration: none;
}
.menu li.selected a,
.menu li:hover a,
.menu li a:focus,
.menu li a:active {
background-color: #51595C;
color: #fff;
}
/* ** поиск **
================================================== */
#search {
margin: 5px 0 0 5px;
height: 30px;
float: left;
margin: 7px 0 0 5px;
border: 1px solid #fff;
border-radius: 20px;
background-image: none;
width: 260px;
background-color: #FFF;
}
#search .input_search {
width: 210px;
height: 30px;
line-height: 30px !important;
padding: 0 10px;
font-size: 12px;
border-style: none;
background: transparent;
display: block;
float: left;
}
#search .button_search {
width: 30px;
height: 30px;
background: transparent url(../images/search_btn.png) left top no-repeat;
border-style: none;
cursor: pointer;
cursor: hand;
display: block;
float: left;
}
#search .button_search:hover,
#search .button_search:focus,
#search .button_search:active {
background-position: left bottom
}
#search input.input_search::-webkit-input-placeholder {
color: #999;
}
#search input.input_search:-moz-placeholder {
color: #999;
}
#search input.input_search:-ms-input-placeholder {
color: #999;
}
/* ** контакты сверху **
================================================== */
#contact {
float: left;
text-align: left;
margin-top: 38px;
color: #505050;
font-size: 15px;
width: 470px;
max-height: 150px;
}
#contact div {
color: #777;
vertical-align: top;
height: 40px;
clear: both;
}
#contact .caption {
font-size: 16px;
margin-top: 5px;
}
#contact .worktime {
font-size: 11px;
}
#contact .callback_wrap {
padding-top: 10px;
}
#contact .phone i {
float: left;
font-size: 24px;
line-height: 34px;
font-style: normal;
padding: 0 6px 0 40px;
color: #51595C;
}
#contact .phone b {
float: left
}
#contact .phone1 b {
font-size: 24px;
line-height: 34px;
font-weight: normal;
color: #51595C;
padding: 0 20px 0 0px;
}
#contact .phone2 b {
font-size: 24px;
line-height: 34px;
font-weight: normal;
color: #f38d1f;
}
#contact .phone2 i.ph_ks {
padding: 0px 16px 0px 40px;
background: url(../images/ic_kiev.png) left center no-repeat;
color:#51595C;
}
#contact .phone2 b.ph_ks {
padding: 0px 20px 0px 0px;
color:#51595C;
}
#contact .phone2 i.ph_mts {
padding: 0px 16px 0px 40px;
background: url(../images/ic_mts.png) left center no-repeat;
color:#51595C;
}
#contact .phone2 b.ph_mts {
padding: 0px 20px 0px 0px;
color:#51595C;
}
#contact .phone1 i.ph_life, #contact .phone i.ph_lf {
padding: 0px 16px 0px 40px;
background: url(../images/ic_life.png) left center no-repeat;
color:#51595C;
}
#contact .phone1 b.ph_life, #contact .phone b.ph_lf {
padding: 0px 20px 0px 0px;
color:#51595C;
}
#contact .phone1 i.ph_phone {
padding: 0px 16px 0px 40px;
background: url(../images/ic_phone.png) left center no-repeat;
color:#51595C;
}
#contact .callback {
font-size: 12px;
text-decoration:none;
border-bottom:1px dashed;
white-space: nowrap;
}
/* **** MAIN WRAP ****
================================================== */
#main {
margin: 0px auto;
width: 980px;
position: relative;
}
#content {
float: right;
width: 685px;
min-height:400px;
margin-bottom: 40px;
/*overflow: hidden;*/
}
#contentFull {
min-height:300px;
margin-bottom: 40px;
}
#content.page_view ul, #contentFull.page_view ul, #content.page_view ol, #contentFull.page_view ol {
padding-left: 40px;
}
#content.page_view h2, #contentFull.page_view h2 {
clear: none;
}
#left {
width: 265px;
padding: 0 30px 0 0;
float: left;
overflow: hidden;
margin-bottom: 40px;
}
#right {
width: 240px;
padding: 0 0 0 20px;
float: right;
overflow: hidden;
margin-bottom: 40px;
}
#left h2,
#right h2 {
margin-top:0;
}
#cartHistoryBack {
position:absolute;
/*left:440px;*/
/*top:15px;*/
font-size:16px;
/*text-decoration:none;*/
/*border-bottom:1px dashed #296CB6;*/
top: 13px;
right: 0;
}
#cartHistoryBack:hover,
#cartHistoryBack:focus,
#cartHistoryBack:active {
/*border-color:#d31534;*/
}
#cartOrdering {
width:400px;
float:right;
margin-right:40px;
padding-bottom:40px;
}
#cartProducts {
width:540px;
float:right;
padding-bottom:40px;
}
/* **** FOOTER WRAP ****
================================================== */
#footer_background {
clear: both;
/*background: #e7e7e7 url(../images/footer_bg.gif) center top repeat-x;*/
background-color: #e6e6e6;
}
#footer {
margin: 0px auto;
width: 980px;
overflow: hidden;
clear: both;
min-height: 60px;
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
}
#ftr-lft {
float: left;
width: 245px;
margin-right: 50px;
text-align: left;
padding-top: 7px;
font-size: 12px;
}
#counters {
margin-top: 30px
}
#ftr-mdll {
float: left;
width: 280px;
margin-right: 50px;
text-align: left;
padding-top: 7px;
color: #3F3F3F;
}
#ftr-mdll .social_block a{
margin-right: 10px;
}
#ftr-mdlr {
float: left;
width: 150px;
margin-right: 30px;
text-align: left;
padding-top: 7px;
}
#ftr-rgt {
float: left;
width: 170px;
}
#ftr-lft,
#ftr-lft * {
color: #969696;
text-decoration: none;
}
#ftr-mdlr ul li {
padding-bottom: 10px;
list-style: none;
text-align: left;
}
#ftr-mdlr a {
color: #606060;
}
#ftr-mdlr a:hover,
#ftr-mdlr a:focus,
#ftr-mdlr a:active {
color: #000000;
}
#ftr-rgt a.mgzns {
display: block;
text-align: right;
/*padding-right: 35px;*/
background: url(../images/ic_magazinus.gif) right top no-repeat;
font-size: 12px;
color: #969696;
/*line-height: 30px;*/
/*margin: 20px 0 40px 0;*/
line-height: 32px;
padding-right: 45px;
text-decoration: none;
}
#ftr-rgt #counters {
margin: 0
}
/* меню каталога (схема 2 и 3) */
#catalog_menu {
/*margin-left: -15px;*/
padding: 3px 0 10px 0;
background-color: #F7F7F7;
margin-bottom: 20px;
}
#catalog_menu ul {
padding: 0 0 5px 0;
list-style: none;
}
#catalog_menu ul ul {
padding: 10px 0 10px 16px;
}
#catalog_menu ul li {
font-size: 14px;
margin: 0 0 1px 0;
}
#catalog_menu ul li img {
vertical-align: middle
}
#catalog_menu ul li a {
padding: 0;
margin: 0;
padding-left: 15px;
line-height: 40px;
height: 40px;
/*background: transparent url(../images/category_bg.png) right top no-repeat;*/
background: transparent;
display: block;
clear: right;
}
#catalog_menu ul li a.selected,
#catalog_menu ul li a:hover,
#catalog_menu ul li a:focus,
#catalog_menu ul li a:active {
/*background-position: right bottom;*/
color: #ffffff;
background-color: #51595C;
text-decoration: none;
}
#catalog_menu ul ul li {
font-size: 14px;
line-height: 18px;
}
#catalog_menu ul ul li a {
margin-bottom: 0;
font-size: 12px;
line-height: 28px;
height: 28px;
background-image: none;
}
#catalog_menu ul ul li a.selected,
#catalog_menu ul ul li a:hover,
#catalog_menu ul ul li a:focus,
#catalog_menu ul ul li a:active {
color: #fff;
}
#catalog_menu ul ul ul li {
font-size: 12px
}
/* ** blog **
================================================== */
#blog {
list-style: none;
padding-left: 0px !important;
}
#blog li {
clear: both;
padding-bottom: 20px;
border-bottom: 1px solid #D0D0D0;
min-height: 150px;
margin-bottom: 20px;
}
#blog p {
margin-bottom: 0px;
}
#blog_menu {
background-color: #F7F7F7;
padding: 10px;
margin-bottom: 40px
}
#blog_menu_category li {
line-height: 18px;
min-height: 50px;
}
#blog_menu, #blog_menu_category li {
clear: both;
line-height: 13px;
padding-bottom: 10px;
}
#blog_menu_category {
background-color: transparent;
padding: 0px;
margin-bottom: 40px
}
#blog_menu_category div b {
display: inline-block;
padding-bottom:5px;
}
#blog_menu_category h2 { display:none; }
#blog_menu_category div {
background-color: #F7F7F7;
padding: 20px 10px 10px 10px;
margin-bottom: 20px;
margin-top: 0px;
}
#blog_menu li, #blog_menu_category li {
list-style-type: none;
line-height: 18px;
min-height: 50px;
}
#blog_menu li i, #blog_menu_category li i {
color: #777;
font-style: normal;
display: block;
}
.blog_image_micro {
max-width: 50px;
max-height: 50px;
margin: 0px 0px 5px 5px;
float: right;
clear: right;
}
.blog_image_mini {
max-width: 250px;
max-height: 150px;
margin: 10px 0px 10px 20px;
float: right;
clear: right;
}
.blog_image_post {
max-width: 250px;
max-height: 250px;
margin: 20px 0 20px 30px;
float: right;
/*clear: right;*/
}
.blog_date_post {
color: #777;
}
.blog_date_post i {
font-style: normal;
}
.blog_date_post small {
color: #aaa;
font-size: 10px;
}
/* brands */
#all_brands {
margin: 40px 0 40px 0;
line-height: 25px;
}
#all_brands a {
margin: 0 10px 10px 0px;
}
#brands {
clear: both;
margin-bottom: 10px;
margin-top: 10px;
line-height: 25px;
}
#brands a {
/*color: #E61781;*/
/*color: #9CC531;*/
font-size: 14px;
margin-right: 10px;
display:inline-block;
}
#brands img, #all_brands img {
max-height: 40px;
max-width: 80px;
vertical-align: middle;
margin: 0 10px 10px 0;
}
#brands a:hover,
#brands a:focus,
#brands a:active {
/*color: #000;_NO__DOTCOMMA__AFTER__*/
}
#brands a.selected {
padding: 8px 16px;
background-color: #FFB033;
color: #fff;
text-decoration: none;
}
/* ===[ Просмотренные товары ]=== */
#browsed_products_wrap {
margin-bottom: 40px;
overflow: hidden;
}
#browsed_products {
/*margin-bottom: 20px;*/
/*overflow: hidden;*/
/*width: 110%;*/
}
#browsed_products li {
display: block;
float: left;
overflow: hidden;
margin: 15px 25px 15px 0;
width: 80px;
height: 80px;
}
#browsed_products li a {
display: block;
/*border: 1px solid #e0e0e0;*/
background-color: #ffffff;
vertical-align: middle;
text-align: center;
width: 80px;
height: 80px;
line-height:46px;
filter: alpha(opacity=70);
-khtml-opacity: 0.7;
-moz-opacity: 0.7;
opacity: 0.7;
border:none;
}
#browsed_products li a:hover,
#browsed_products li a:focus,
#browsed_products li a:active {
filter: alpha(opacity=100);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
#browsed_products li a img {
text-align:center;
vertical-align: middle;
max-width: 80px;
max-height: 80px;
}
#browsed_products li a img {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
#browsed_products li a img:hover,
#browsed_products li a:focus img,
#browsed_products li a:active img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
/* ** side misc style **
================================================== */
.banner1 {
display: block;
margin-bottom: 40px;
}
.banner1 img {
max-width: 240px
}
.html_side_wrap {
margin: 0 0 40px 0
}
.social {
height: 30px;
margin: 20px 0 20px 0;
}
/* ===[ Хлебные крошки ]=== */
#path {
margin-top: -20px;
margin-bottom: 14px;
font-size: 11px;
/*color: #a0a0a0;*/
color: #b5b5b5;
}
#path a {
/*color: #a0a0a0;*/
color: #b5b5b5;
}
#path a:hover,
#path a:focus,
#path a:active {
color: #888888;
text-decoration: underline;
}
/* ===[ Вкладки (табы) в продукте ]=== */
.section {
width: 100%;
background: #EFEFEF;
margin: 30px 0 30px 0;
}
ul.tabs {
height: 28px;
line-height: 25px;
list-style: none;
border-bottom: 1px solid #d0d0d0;
background: #FFF;
}
.tabs li {
float: left;
display: inline;
margin: 0 1px -1px 0;
padding: 0 18px 1px;
color: #777;
cursor: pointer;
background: #F9F9F9;
border: 1px solid #d0d0d0;
border-bottom: 1px solid #F9F9F9;
position: relative;
}
.tabs li b {
color:#888;
line-height:20px;
font-size:10px;
}
.tabs li:hover,
.tabs li:hover * {
color: #FFF;
}
.tabs li:hover,
.vertical .tabs li:hover {
/*color: #F70;*/
padding: 0 18px;
/*background: #FFFFDF;
border: 1px solid #FFCA95;*/
background: #737373;
border: 1px solid #737373;
}
.tabs li.current, .tabs li.current * {
color: #444;
}
.tabs li.current {
background: #FFF;
padding: 0 18px 2px;
border: 1px solid #D0D0D0;
border-bottom: 1px solid #FFF;
}
div.tabs {
height: 38px;
line-height: 35px;
list-style: none;
border-bottom: 1px solid #d0d0d0;
background: #FFF;
}
div.tabs a {
float: left;
display: inline;
margin: 0 1px -1px 0;
padding: 0 18px 1px;
color: #777;
cursor: pointer;
background: #F9F9F9;
border: 1px solid #d0d0d0;
border-bottom: 1px solid #F9F9F9;
position: relative;
text-decoration: none;
}
/* NEW TABS */
.tabs a b {
color:#888;
line-height:20px;
font-size:10px;
}
.tabs a:hover,
.tabs a:focus,
.tabs a:active,
.tabs a:hover * {
color: #FFF;
}
.tabs a:hover,
.tabs a:focus,
.tabs a:active,
.vertical .tabs a:hover,
.vertical .tabs a:focus,
.vertical .tabs a:active {
padding: 0 18px;
background: #737373;
border: 1px solid #737373;
}
.tabs a.current,
.tabs a.current * {
color: #444;
}
.tabs a.current {
background: #FFF;
padding: 0 18px 2px;
border: 1px solid #D0D0D0;
border-bottom: 1px solid #FFF;
}
/* END NEW TABS */
.box {
display: none;
border: 1px solid #D4D4D4;
border-width: 0 1px 1px;
background: #FFF;
padding: 15px 15px;
}
.box.visible {
display: block
}
.box ul, .box ol {
padding-bottom: 10px;
padding-left: 40px;
}
.box iframe {
padding:10px 0;
}
.box table td {
padding: 10px;
vertical-align: top;
}
/* **** ОТОБРАЖЕНИЕ ПРОДУКТА ****
================================================== */
/* ===[ Метки на товаре ]=== */
.i_label {
position: absolute;
top: 0px;
right: 0px;
width: 50px;
height: 50px;
background-position:left top;
background-repeat: no-repeat;
background-size: cover;
display:none;
}
.i_label.stock {
background-image: url(../images/i_stock.png)
}
.i_label.sale {
background-image: url(../images/i_sale.png)
}
.i_label.featured {
background-image: url(../images/i_featured.png)
}
.i_stock .stock, .i_sale .sale, .i_featured .featured {
display:block;
}
.i_stock.i_sale .sale, .i_sale.i_featured .featured, .i_stock.i_featured .featured {
top:45px;
}
.i_stock.i_sale.i_featured .featured {
top:90px;
}
/* ===[ Товар подробно ]=== */
div.product .price {
height: 44px;
line-height: 40px;
padding-right: 28px;
}
div.product .button {
font-size: 18px;
line-height: 44px;
padding: 0 16px;
height: 44px;
}
div.product .price b {
font-size: 40px;
}
.product-sku {
display: block;
width: auto;
float: right;
line-height: 40px;
padding: 0 20px;
margin-top: -3px;
background-color: #EBEBEB;
color: #999;
}
.product .gallery {
width: 330px;
float: left;
}
.product .image {
text-align: center;
width: 330px;
background-color: #ffffff;
border: 1px solid #ffffff;
padding: 5px;
/*margin-right: 20px;*/
position: relative;
}
.product .gallery .image {
padding-bottom: 30px
}
.product .image a {
display: block;
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
.product .image img {
max-width: 330px
}
/*
.product .image img.featured {
position: absolute;
top: 0px;
right: 0px;
}
.product .image img.sale {
position: absolute;
top: 0px;
right: 0px;
}
.product .image img.saleBelow {
top: 45px
}
*/
.product .images {
text-align: center;
margin-bottom: 10px;
}
.product .images a {
width: 55px;
height: 55px;
background-color: #ffffff;
/*border: 1px solid #e0e0e0;*/
margin: 5px;
filter: alpha(opacity=70);
-khtml-opacity: 0.7;
-moz-opacity: 0.7;
opacity: 0.7;
display:inline-block;
text-align:center;
vertical-align:top;
line-height:53px;
border:none;
}
.product .images img {
text-align: center;
vertical-align:middle;
max-width: 48px;
max-height: 48px;
/*background-color: #ffffff;
border: 1px solid #e0e0e0;
margin: 5px;
padding: 5px;
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;*/
}
.product .images a:hover,
.product .images a:focus,
.product .images a:active {
filter: alpha(opacity=100);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.product .image img, .product .images img {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.product .images img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.product .excerpt .images {
float: left;
clear: left;
width: 105%;
}
.product .excerpt .images img {
float: left;
margin: 0px 10px 10px 0px;
}
.product .excerpt {
float: right;
width: 300px;
overflow: hidden;
}
.product .stock_block {
display: block;
line-height: 18px;
height: 36px !important;
overflow: hidden;
margin: 0 0 10px 0;
}
.product .stock_block p, .product .stock_block div {
padding:0;
margin:0;
color: #D52525;
font-size: 14px;
/*font-weight: bold;*/
}
.product .stock_block a {
font-size: 11px !important;
}
.product .features {
list-style: none;
width: 100%;
display: block;
clear: both;
padding: 0;
margin-top: 15px;
margin-bottom: 25px;
/*border-bottom: 1px solid #e0e0e0;*/
border:none;
}
.product .box .features {
padding:0;
}
.product .features li {
padding: 10px 5px 10px 5px;
overflow: hidden;
/*border-top: 1px solid #e0e0e0;
background-color: #fafafa;*/
border:none;
background-color: #fff;
}
.product .features li.even {
background-color: #F5F5F5;
}
.product .features li:hover {
background-color: #F6EDD6;
}
.product .features label {
font-style: normal;
display: block;
width: 30%;
float: left;
}
.product .features p {
float: left;
display: block;
width: 70%;
}
.product .variants {
/*margin-bottom: 10px;*/
margin: 0px 0 30px 0;
}
.product .variants select {
font-size: 12px;
margin-top: 10px;
margin-bottom: 20px;
width: 260px;
height: 28px;
}
.product .price_block {
height: 44px;
width: 100%;
clear: both;
float: none;
text-align: left;
}
.product .price {
height: 30px;
line-height: 30px;
display: inline-block;
float: left;
padding-right: 10px;
}
.product .price b {
font-size: 20px;
margin-right: 2px;
color: #626262;
font-weight: bold;
white-space: nowrap;
}
.product .price b.stColor {
color: red
}
.product .price i {
font-size: 13px;
color: #626262;
font-style: normal;
}
.product .price i.stColor {
color: red
}
.product .price s {
font-size: 14px;
text-decoration: none; /*line-through*/
white-space: nowrap;
color: #999;
padding-left: 5px;
}
.product s.compare_price {
text-decoration: none;
display: inline-block;
line-height: 10px;
color: #51595C;
margin-bottom: 15px;
text-decoration: line-through;
}
.product .not_available {
color: #999;
font-style: italic;
}
.product .variant_name {
float: left;
margin-right: 5px;
font-size: 11px;
color: #777;
}
.product .variant_radiobutton {
margin-right: 5px;
margin-left: 0px;
}
.product .compare {
/*display: inline-block;*/
/*max-width: 150px;*/
}
.product .compare,
.product .compare * {
font-size: 11px !important;
line-height: 14px !important;
}
.product .excerpt .compare {
margin: 0 0 20px 0
}
/* список товаров в категории (список) */
.products_lists li {
list-style: none
}
.products_lists .product {
height: 190px;
vertical-align: top;
}
.products_lists .product .not_available {
line-height: 25px
}
.products_lists .image {
width: 150px;
float: left;
overflow: hidden;
}
.products_lists .image img {
max-width: 150px;
max-height: 150px;
}
.products_lists .i_label {
width: 30px;
height: 30px;
}
.products_lists .i_stock.i_sale .sale, .products_lists .i_sale.i_featured .featured, .products_lists .i_stock.i_featured .featured {
top:25px;
}
.products_lists .i_stock.i_sale.i_featured .featured {
top:50px;
}
/*
.products_lists .image img.featured {
max-width: 30px;
max-height: 30px;
}
.products_lists .image img.sale {
max-width: 30px;
max-height: 30px;
}
.products_lists .image img.saleBelow {
top: 25px
}
*/
.products_lists .product_info {
margin-left: 160px;
padding: 5px;
}
.products_lists select {
display: inline-block;
float: left;
margin-top: 6px;
}
.products_lists .price_block {
width: 350px;
clear: none;
}
.products_lists .price_block s {
display: none
}
.products_lists .rate-block2 {
/*margin-top: 8px*/
margin-right: 20px;
}
.products_lists .compare {
text-align: right
}
.products_lists .variants {
margin: 0px 0 10px 0
}
/* список товаров в категории (таблица) */
.products_table {
margin-bottom: 50px;
}
.products_table li {
list-style: none;
position: relative;
}
.products_table li.prdbg2 {
background-color:#f7f7f7;
}
.products_table .product {
height: 40px;
vertical-align: top;
overflow: hidden;
}
.products_table .product .not_available {
position: absolute;
right: 0;
top: 0;
line-height: 40px;
padding-right:5px;
}
.products_table h3 {
display: inline-block;
font-size: 14px;
line-height: 30px;
margin-bottom: 0;
max-width: 400px;
overflow: hidden;
}
.products_table .image {
width: 30px;
height: 30px;
float: left;
overflow: hidden;
}
.products_table .image img {
clear: left;
max-width: 30px;
max-height: 30px;
}
.products_table .i_label {
width: 7px;
height: 7px;
}
.products_table .i_stock.i_sale .sale, .products_table .i_sale.i_featured .featured, .products_table .i_stock.i_featured .featured {
top:5px;
}
.products_table .i_stock.i_sale.i_featured .featured {
top:10px;
}
/*
.products_table .image img.featured {
max-width: 7px;
max-height: 7px;
}
.products_table .image img.sale {
max-width: 7px;
max-height: 7px;
}
.products_table .image img.saleBelow {
top: 5px
}
*/
.products_table .product_info {
margin-left: 45px;
padding: 5px;
}
.annotation {
display: block;
line-height: 18px;
height: 42px !important;
overflow: hidden;
margin: 0 0 20px 0;
}
.products_table .annotation {
display: none;
}
.products_table .stock_block {
display: none;
}
.products_table .variants {
position: absolute;
top: 5px;
right: 5px;
text-align: right;
margin: 0 0 0 0;
}
.products_table .product .variants select {
display: inline-block;
margin: 0 20px 0 0;
}
.products_table .product .price_block {
clear: none;
text-align: right;
display: inline-block;
width: auto;
}
.products_table .product .price_block .price {
text-align: right;
float: none;
}
.products_table .price_block s {
display: none
}
.products_table .rate-block2 {
display: none;
/*
margin: 1px 0 0 30px;
float: left;
*/
}
.products_table .compare {
display: none;
float: left;
/*width: 380px;*/
}
/* список товаров в категории (витрина) */
.products .compare {
text-align: right
}
.products {
padding-left:0px !important;
list-style: none;
display: block;
/*margin-left:-20px;*/
width: 100%;
/*overflow: hidden;*/
margin-bottom: 40px;
}
.products .product {
width: 29.4%;
margin:0;
/*margin-left: 20px;*/
margin-bottom: 20px;
display: -moz-inline-box;
display: inline-block;
*zoom: 1;
*display: inline;
word-spacing: normal;
vertical-align: top;
position: relative;
border: 1px solid #fff;
padding: 12px;
}
.products .product:hover {
border: 1px solid #f9ae07;
}
.products.side_marked_product .product {
width: 214px !important;
margin: 0 0 40px 0 !important;
}
.products.side_marked_product .product .image {
padding-left: 0 !important;
padding-right: 0 !important;
}
.products .product .image {
vertical-align: middle;
text-align: center;
width: 200px;
height: 200px;
line-height: 200px;
background-color: #ffffff;
border: 1px solid #ffffff;
padding: 5px;
margin-bottom: 20px;
margin-right: 0;
}
.products .product .image img {
vertical-align: middle;
max-width: 200px;
max-height: 200px;
}
.products .product .image img:hover, .products_lists .product .image img:hover , .products_table .product .image img:hover {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
-ms-transform: none;
transform: none;
}
.products .product h3 {
font-size: 14px;
margin-bottom: 10px;
font-weight: normal;
display: block;
line-height: 18px;
height: 46px !important;
overflow: hidden;
margin: 0 0 10px 0;
}
/*
.products .product h3.featured {
background: url(../images/star.png) no-repeat;;
background-position: left center;
}
*/
.products .product .product_info a {
font-size: 16px;
line-height: 22px;
}
/*
.products .product .image img.featured {
position: absolute;
top: 0px;
right: 0px;
}
.products .product .image img.sale {
position: absolute;
top: 0px;
right: 0px;
}
.products .product .image img.saleBelow {
top: 45px
}
*/
.products .price_block {
text-align: right
}
.products .price s {
display: none
}
.products .variants {
margin: 0px 0 10px 0
}
.products .variants select {
font-size: 12px;
margin-top: 10px;
margin-bottom: 20px;
width: 200px;
height: 28px;
}
/* ** дополнительные блоки в продукте **
================================================== */
/* product extra block */
.peb_border {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
.peb_wrap {
border: 1px solid #efefef;
padding: 12px;
width: 314px;
/*margin-bottom: 20px;*/
margin: 10px 0 20px 0;
}
.peb_wrap p {
text-align: center
}
.peb_text {
font-size: 12px;
color: #616161;
padding: 0;
margin: 0;
}
.peb_phone {
font-size: 18px;
color: #D52525;
padding: 0;
margin: 0;
padding: 10px 0 15px 0;
}
.peb_wrap a {
display: block;
padding-left: 28px;
line-height: 20px;
text-decoration: none;
}
.peb_chat {
background: url(../images/ic_online_sm.png) left center no-repeat
}
.peb_callback {
background: url(../images/ic_phone_sm.png) left center no-repeat
}
.peb_chat b, .peb_callback b {
font-weight: normal;
border-bottom: 1px dashed;
}
.peb_delivery {
border: 1px solid #F8A70B;
padding: 12px;
min-width: 190px;
max-width:230px;
/*height: 40px;*/
height: auto;
text-align: center;
margin: 15px auto 0 auto;
font-size: 12px;
color: #329A1C;
white-space: pre;
}
.peb_delivery b {
font-size: 18px;
font-weight: normal;
color: #329A1C;
/*clear: both;
float: none;*/
display: inline-block;
padding-bottom: 10px;
text-align: center;
}
.peb_delivery span {
display: block;
font-size: 11px;
color: #329A1C;
float: left;
padding-left: 5px;
}
.peb_delivery center {
font-size: 12px;
color: #329A1C;
}
.peb_delivery u {
color: #9B9B9B;
float: left;
padding: 0 0 0 5px;
text-decoration: none;
}
.peb_delivery_else {
border-color:#ccc;
color: #777;
height: auto;
}
.peb_delivery_else b {
color: #777;
}
/* следующий и предыдущий продукт */
#back_forward {
font-size: 14px;
margin-bottom: 20px;
/*margin-right: 50px; */
clear: both;
}
#back_forward a {
text-decoration: none;
}
#back_forward i {
font-style: normal;
text-decoration: underline;
}
#back_forward a.prev_page_link {
}
#back_forward a.next_page_link {
float: right;
}
/* ** картинки в категориях и меню категорий **
================================================== */
.category_image_mini {
max-width: 50px;
max-height: 50px;
margin: 0 20px 20px 0;
float: left;
clear: left;
}
.category_image_micro {
display: block;
width: 30px;
height: 24px;
float: left;
clear: left;
padding: 2px 0 2px 0;
margin-right: 5px;
background-color: #fff;
text-align: center;
border: 1px solid #ccc;
}
.category_image_micro img {
max-width: 28px;
max-height: 24px;
}
/* сообщение с ошибкой */
.message_error {
clear: both;
height: 18px;
padding: 10px 10px;
margin-bottom: 15px;
margin-top: 10px;
/*overflow: hidden;*/
/*color: red;*/
color:#fff;
/*background-color: #ffcaca;*/
background-color: #D31534;
/*border: 1px dotted #ff4545;*/
}
/* карта сайта */
.sitemap {
}
.sitemap div {
margin-bottom: 40px
}
.sitemap ul {
list-style: none
}
.sitemap a.smap-cat {
font-weight: bold
}
.sitemap li li {
padding-left: 30px
}
/* **** WIDGETS ****
================================================== */
/* mini cart */
#mini_cart_wrap {
min-width: 450px
}
#mini_cart_wrap h2, #mini_cart_wrap h3 {
margin: 0;
padding: 0 0 15px 0;
text-align: center;
/*line-height: 20px;*/
}
#mini_cart {
/*margin-bottom: 10px;*/
width: 100%;
}
#mini_cart td {
padding: 5px 3px
}
#mini_cart td.price,
#mini_cart td.remove,
#mini_cart td.discount {
text-align: right
}
#mini_cart .image a img, #mini_cart td.remove img {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
max-width:30px;
max-height:30px;
}
#mini_cart .image a img:hover, #mini_cart td.remove img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
#mini_cart td.price {
white-space: nowrap;
padding: 2px 5px;
color: #626262;
}
#mini_cart th.price {
text-align: right;
font-size: 22px;
line-height: 65px;
color: #626262;
}
#mini_cart #checkout {
padding-top: 10px;
height: 30px
}
#btnCheckout,
#btnProceed {
float: left;
clear: none;
display: inline-block;
line-height: 30px;
height: 30px;
cursor: pointer;
text-align: center;
}
/*#btnCheckout {
background: #ccc url(../images/buy_btn_bg.png) right top no-repeat;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #fff;
width: 140px;
}
#btnCheckout:hover {
background-position: right bottom;
color: #fff;
}
*/
#btnProceed {
font-size: 12px;
width: auto;
margin-left: 20px;
float: right;
}
/* microcart informer */
#micro_cart_informer_wrap {
position: fixed;
top: 160px;
right: 0;
width: 42px;
height: 75px;
overflow: hidden;
z-index: 2;
}
#micro_cart_informer {
display: block;
width: 100%;
height: 40px;
padding-top: 38px;
color: #fff;
background: #D31534 url(../images/ic_cart.png) center 10px no-repeat;
text-align: center;
font-size: 10px;
text-decoration: none;
/*display: none;*/
}
#micro_cart_informer b {
font-size: 14px;
display: block;
text-align: center;
}
/* compare informer */
#compare_informer_wrap {
position: fixed;
top: 250px;
right: 0;
width: 42px;
height: 75px;
overflow: hidden;
z-index: 2;
}
#compare_informer {
display: block;
width: 100%;
height: 40px;
padding-top: 38px;
color: #fff;
background: #296CB6 url(../images/ic_compare.png) center 10px no-repeat;
text-align: center;
font-size: 10px;
text-decoration: none;
display: none;
}
#compare_informer b {
font-size: 14px;
display: block;
text-align: center;
}
/* share */
#share42 {
position: fixed;
bottom: 2px;
right: 0;
z-index: 1000;
margin-left: -70px;
}
#share42 {
padding: 6px 2px 0;
background-color: transparent;
}
#share42:hover {
}
#share42 a {
opacity: 0.5
}
#share42:hover a {
opacity: 0.7
}
#share42 a:hover,
#share42 a:focus,
#share42 a:active {
opacity: 1
}
/* button TOP */
.scrollTop {
background: url(../images/ic_top_btn.png) 0 0 no-repeat;
display: block;
width: 44px;
height: 44px;
position: fixed;
bottom: 250px;
right: 3%;
z-index: 5;
}
.scrollTop:hover,
.scrollTop:focus,
.scrollTop:active {
background-position: 0 -44px;
}
/* rating */
.rate-block2 {
float: left;
margin-bottom: 15px;
margin-right: 3px;
}
.rate-block {
margin: 0 auto 20px auto;
height: 40px;
}
.rater {
display: block;
height: 16px;
text-align: center;
line-height: 16px;
}
.rater-starsOff,
.rater-starsOn,
.rater-starsHover {
height: 16px;
font-size: 16px;
line-height: 16px;
}
.rater-starsOff,
.rater-starsOn {
display: inline-block;
background: url(../images/rating.gif) 0 0 repeat-x;
}
.rater-starsOff {
width: 80px
}
.rater-starsOn {
display: block;
max-width: 80px;
top: 0;
background-position: 0 -16px;
}
.rater-starsHover {
background-position: 0 -32px!important
}
.rater-text {
display: block;
clear: both;
color: #999;
}
.rate-right {
margin: 0 0 20px 0;
height: 16px;
}
.rate-right .rater {
text-align: left;
vertical-align: top;
margin: 0;
padding: 0;
margin-top: 10px;
}
.rate-right .rater-text {
display: inline-block;
line-height: 16px;
height: 16px;
margin: 0;
padding: 0;
clear: none;
padding-left: 10px;
}
/* **** FORMS ****
================================================== */
input[type="text"],
input[type="password"] {
width: 98%;
font-size: 16px;
}
.form {
width: 400px;
margin-bottom: 20px;
}
.form textarea {
width: 100%;
height: 100px;
font-size: 16px;
}
.form label {
display: block;
font-size: 13px;
}
.form label a {
text-decoration: none;
border-bottom: 1px dashed #296CB6;
display:inline-block;
margin-bottom:5px;
}
.form label a:hover,
.form label a:focus,
.form label a:active {
border-color: #d31534
}
.form input[type="text"] {
display: block;
margin-bottom: 10px;
/*line-height: 32px;*/
padding:5px 1%;
}
.form select {
font-size: 13px;
display: block;
margin-bottom: 10px;
width:98%;
padding:5px 1%;
}
.cart_form .button {
margin-top: 20px;
float: right;
}
/* ===[ Комментарии ]=== */
#comments_wrap {
position: relative;
}
.comment_list {
margin-top: 15px;
list-style: none;
padding-left: 0 !important;
}
.comment_list li {
padding-bottom: 15px
}
.comment_header {
font-size: 14px;
color: #090;
}
.comment_header i {
font-weight: normal;
font-style: normal;
color: #a8a8a8;
font-size: 12px;
}
.comment_header b {
font-weight: normal;
font-style: normal;
color: red;
font-size: 12px;
}
/* ===[ Форма отправки комментария ]=== */
.add_comment {
display: inline-block;
font-size: 13px;
text-decoration: none;
padding: 0 9px 0 30px;
line-height:30px;
width: auto;
padding: 10px 15px 10px 44px;
background: url(../images/add_comment.png) 14px center no-repeat;
background-color: #F3F3F3;
border-radius: 0px;
}
.add_comment b {
font-weight: normal;
border-bottom: 1px dashed;
}
.comment_form {
background-color: #f3f3f3;
/*border: 1px solid #e0e0e0;*/
/*border-radius: 10px;*/
padding: 20px;
margin: 20px 0 30px 0;
width: 90%;
max-width: 450px;
overflow: hidden;
border: none;
display: none;
}
.comment_form sup {
font-size:10px;
color:red;
}
.comment_form h3 {
margin: 0 0 10px 0;
}
.comment_form .comment_textarea {
width: 100%;
height: 100px;
font-size: 12px;
}
.comment_form label {
display: block;
float: left;
width: 100px;
font-size: 16px;
margin-top: 15px;
}
.comment_form .input_name {
font-size: 16px;
width: 250px;
margin-top: 15px;
padding:5px 1%;
}
.comment_form .input_captcha {
float: left;
width: 150px;
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
margin-top: 15px;
height: 36px;
}
.comment_form .captcha {
float: left;
display: block;
margin-top: 15px;
margin-left: 10px;
}
.comment_form .captcha img {
border:1px solid #ccc;
}
.comment_form .button,
.register_form .button,
.login_form .button {
float: right;
display: block;
margin-top: 20px;
}
/* ===[ Форма зворотнього зв'язку ]=== */
.feedback_form {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin-top: 0;
width: 100%;
overflow: visible;
}
.feedback_form .button {
float: none;
display: block;
width: 100%;
height: auto;
min-height: 50px;
box-sizing: border-box;
margin-top: 16px;
clear: both;
padding: 14px 16px;
font-size: 16px;
line-height: 1.2;
}
.feedback_form .input_captcha {
float: none;
width: 120px;
height: 46px;
font-size: 14px;
font-weight: normal;
text-transform: none;
margin-top: 0;
box-sizing: border-box;
padding: 0 10px;
}
.feedback_form .captcha {
float: none;
display: block;
margin-top: 0;
margin-right: 0;
}
.feedback_form .captcha img {
border: none;
}
.feedback_form .button_send {
float: none;
margin-top: 0;
}
input.compare_button {
display: none
}
label.compare_button {
color: #999;
cursor: pointer;
}
label.compare_button:hover,
label.compare_button:focus,
label.compare_button:active {
color: #d31534;
cursor: pointer;
}
/* cart form */
.cart_form label sup {
font-size: 11px;
color: red;
}
.cart_form label small {
font-size: 11px;
color: #777;
}
.cart_warning_text {
font-size: 10px;
color: #6E6E6E;
padding: 0px 0 30px 0;
}
.cart_warning_text img {
margin-right: 30px;
max-width: 40px;
max-height: 40px;
}
.cart_warning_text p {
margin: 0;
line-height: 12px;
}
/* ===[ Корзина ]=== */
.purchasesBlock {
border: 1px solid #ABADB3;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px 15px;
}
#purchases {
width: 100%;
}
#purchases tr {
border-bottom: 1px solid #d5d5d5;
height: 70px;
}
#purchases th {
vertical-align: top;
padding-top: 10px;
font-size: 18px;
font-weight: normal;
}
#purchases .image {
width: 50px;
text-align: center;
}
#purchases .image a {
/*border: 1px solid #e0e0e0;*/
/*background-color: #ffffff;*/
margin: 0 7px 7px 0;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 50px;
height: 50px;
}
#purchases .name {
padding-left: 10px;
padding-right: 10px;
text-align: left;
}
#purchases .name small {
font-size:11px;
color:#808080;
}
#purchases .name u {
text-decoration:none;
line-height:25px;
color:#606060;
}
#purchases td.name {
font-size: 14px
}
#purchases td .download_attachment {
white-space: nowrap;
color: #3b8500;
padding: 5px 10px 7px 10px;
border-bottom-color: 1px dotted green;
background-color: #ccff72;
line-height: 30px;
}
#purchases .price {
padding-left: 5px;
padding-right: 5px;
white-space: nowrap;
text-align: right;
/*color: #1CB80C;*/
color: #626262;
}
#purchases td.price {
font-size: 14px
}
#purchases .remove {
padding-left: 15px;
text-align: right;
}
/*#purchases .image a img, #purchases .remove img {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}*/
#purchases .image a img:hover, #purchases .remove img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
#purchases .amount {
font-size: 14px;
padding-left: 5px;
padding-right: 5px;
white-space: nowrap;
}
#purchases .amount select {
font-size: 12px
}
#purchases .coupon td, #purchases .coupon th {
padding-bottom:10px;
}
#purchases .coupon .name {
font-size: 14px
}
#purchases .coupon .name input.coupon_code {
width: 200px;
padding: 5px;
}
#purchases .coupon .name input {
font-size: 16px
}
#purchases .total {
border:none;
}
#purchases .total th {
padding-top:0;
vertical-align:middle;
}
#purchases .total small {
font-size: 14px;
font-weight: normal;
color: #999;
}
#purchases #total_cart_delivery_price div {font-size:16px;}
ul#deliveries {
margin-top: 20px;
margin-bottom: 20px;
background-color: #ffffff;
/*
border: 1px solid #e0e0e0;
padding: 20px 20px 0 20px;
*/
list-style: none;
}
ul#deliveries li {
margin-bottom: 20px
}
ul#deliveries li div.checkbox {
float: left
}
ul#deliveries li h3,
ul#deliveries li .description {
display: block;
margin-left: 25px;
}
/* ===[ Кабинет ]=== */
#orders_history {
list-style: none
}
#orders_history li {
margin-bottom: 10px
}
#orders_history li a {
font-size: 16px
}
/* @end — Кабинет
================================================== */
/* мега кнопка */
.button {
cursor: pointer;
-webkit-appearance: none;
}
.button {
/*background: #ccc url(../images/buy_btn_bg.png) right top no-repeat;*/
display: inline-block;
color: #fff;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
line-height: 30px;
padding: 0 15px;
height: 30px;
width: auto;
background-color: #559E02;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border: 1px solid #559E02;
}
.button:hover,
.button:focus,
.button:active {
/*background-color: #E10327;*/
background-position: right bottom;
background-color: #4a7e0e;
border: 1px solid #4a7e0e;
color: #fff;
}
.button:active {
position: relative;
top: 1px;
}
.button {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
/*.button:hover,
.button:focus,
.button:active {
-webkit-transform: scale(1.03);
-moz-transform: scale(1.03);
-o-transform: scale(1.03);
-ms-transform: scale(1.03);
transform: scale(1.03);
}*/
.on_request {
color: #3a3a3a;
background-color: #fff;
border: 1px solid #999;
}
.on_request:hover,
.on_request:focus,
.on_request:active {
color: #fff;
/*
background-color: #51595C;
border: 1px solid #51595C;
*/
background-color: #4a7e0e;
border: 1px solid #4a7e0e;
}
.btn_filter {
color:#3a3a3a;
background-color: #F0F0F0;
border: 1px solid #999;
border:none;
text-decoration: underline;
}
.btn_filter:hover,
.btn_filter:focus,
.btn_filter:active {
color: #fff;
background-color: #4a7e0e;
text-decoration: none;
/*border: 1px solid #9CC531;*/
border: none;
}
.btn_apply {
color:#3a3a3a;
background-color: #fff;
border: 1px solid #999;
}
.btn_apply:hover,
.btn_apply:focus,
.btn_apply:active {
color: #fff;
background-color: #4a7e0e;
border: 1px solid #4a7e0e;
}
.btn_payment_method {
color:#3a3a3a;
background-color: #fff;
border: 1px solid #999;
}
.btn_payment_method:hover,
.btn_payment_method:focus,
.btn_payment_method:active {
color: #fff;
background-color: #9CC531;
border: 1px solid #9CC531;
}
/*.checkout_button {
padding: 10px 20px 10px 20px;
border: 1px solid #51a400;
background-color: #d3ffa9;
color: #2e5e00;
font-size: 14px;
}*/
.checkout_button {
color:#fff;
background-color: #4f7942;
border: 1px solid #4f7942;
}
.checkout_button:hover,
.checkout_button:focus,
.checkout_button:active {
color: #fff;
background-color: #9CC531;/*51a400*/
border: 1px solid #9CC531;
}
/* ===[ Детали заказа ]=== */
table.order_info {
width: 100%;
/*margin-right: 20px;*/
margin-bottom: 20px;
/*background-color: #f9f9f9;*/
}
table.order_info td {
padding: 10px 10px 10px 10px;
border: 1px dotted #e0e0e0;
font-size: 14px;
}
/* **** ОБСЛУЖИВАЮЩИЕ СТИЛИ ****
================================================== */
/* ** служебное - виды и типы сортировок и отображений **
================================================== */
/* отображение главной категориями */
.home_category_viev {
list-style: none;
display: block;
width: 105%;
/*overflow: hidden;*/
}
.home_category_viev li {
width: 210px;
margin-right: 17px;
margin-bottom: 30px;
display: -moz-inline-box;
display: inline-block;
*zoom: 1;
*display: inline;
word-spacing: normal;
vertical-align: top;
position: relative;
}
.home_category_viev li a {
width: 210px;
border: 1px solid #efefef;
display: block;
}
.home_category_viev li div {
vertical-align: middle;
text-align: center;
width: 198px;
height: 200px;
line-height: 200px;
background-color: #fff;
border: 1px solid #fff;
padding: 5px;
margin-bottom: 10px;
margin-right: 0;
}
.home_category_viev li div img {
vertical-align: middle;
max-width: 198px;
max-height: 200px;
}
.home_category_viev li h3 {
font-size: 18px;
margin-bottom: 10px;
font-weight: normal;
text-align: center;
}
/* выбор вида отображения товаров в категории */
.category_view {
color: #505050;
font-size: 12px;
/*margin-top: 15px;*/
/*margin-bottom: 30px;*/
padding-top: 15px;
font-weight: normal;
font-style: normal;
float: right;
width: 50%;
text-align: right;
}
.category_view a {
margin-right: 5px
}
.category_view .selected {
color: #505050;
text-decoration: none;
margin-right: 5px;
}
/* выбор типа сортировка товаров в категории */
.sort {
color: #505050;
font-size: 12px;
/*margin-top: 15px;*/
padding-top: 15px;
margin-bottom: 30px;
font-weight: normal;
font-style: normal;
width:auto;
position:relative;
z-index:2;
/*margin-right: 50%;*/
width: 210px;
}
.sortLink {
border-bottom:1px dashed;
text-decoration:none;
position:relative;
z-index:3;
}
.sortLink i {
position:absolute;
top:1px;
right:-15px;
}
.sort .dropboxSort {
list-style:none;
position:absolute;
top:5px;left:50px;
display:none;
border:1px solid #ccc;
padding:25px 10px 10px 10px;
background-color:#fff;
min-width:135px;
z-index:2;
}
.sort .dropboxSort a {
line-height:20px;
display:block;
}
/* фильтр по свойствам */
#features {
background-color: #f0f0f0;
margin-top: 20px;
margin-bottom: 10px;
width: 99%;
}
#features form {
padding: 5px
}
#features .feature_name {
padding: 7px
}
#features .feature_values {
padding: 7px
}
#features a {
padding-right: 6px;
white-space: nowrap;
}
#features a.selected {
//background-color: #4a4a4a;
color: #505050;
text-decoration: none;
}
/* фильтр по свойствам - обновление */
.features_wrap_left {
margin: 0 0 40px 0!important
}
.features_wrap_left form {
}
.filter_link li {
list-style: none;
float: left;
padding: 5px;
}
.filter_link label {
padding: 1px 3px 1px 3px;
text-decoration: underline;
cursor: pointer;
}
.filter_link label:hover,
.filter_link label:focus,
.filter_link label:active {
padding: 1px 3px 1px 3px;
text-decoration: none;
}
.filter_link label.selected {
border-radius: 4px;
padding: 0px 16px 2px 3px;
border: 1px solid #4D4D4D;
text-decoration: none;
color: #FFFFFF;
text-shadow: 0px 1px 0px #3B3B3B;
background: #808080 url(../images/delete2.png) no-repeat right;
-o-box-shadow: 0 0 5px #B6B6B6;
-moz-box-shadow: 0 0 5px #B6B6B6;
-webkit-box-shadow: 0 0 5px #B6B6B6;
box-shadow: 0 0 5px #B6B6B6;
behavior: url(ie-css3.htc);
}
.filter_link label.selected:hover,
.filter_link label.selected:focus,
.filter_link label.selected:active {
background: #808080 url(../images/delete3.png) no-repeat right;
-o-box-shadow: 0 0 5px #828282;
-moz-box-shadow: 0 0 5px #828282;
-webkit-box-shadow: 0 0 5px #828282;
box-shadow: 0 0 5px #828282;
}
.filter_link a.selected {
border-radius: 4px;
padding: 0px 16px 2px 3px;
border: 1px solid #4D4D4D;
text-decoration: none;
color: #FFFFFF!important;
text-shadow: 0px 1px 0px #3B3B3B;
background-color: #808080;
-o-box-shadow: 0 0 5px #B6B6B6;
-moz-box-shadow: 0 0 5px #B6B6B6;
-webkit-box-shadow: 0 0 5px #B6B6B6;
box-shadow: 0 0 5px #B6B6B6;
/*behavior: url(ie-css3.htc);*/
}
/* ===[ Постраничная навигация ]=== */
#catalog_menu
.pagination {
margin-top: 20px;
margin-bottom: 20px;
font-size: 12px;
overflow: hidden;
/*text-align: center;*/
}
.pagination a {
display: inline-block;
/*float: left;*/
font-size:11px;
line-height:28px;
background-color: #fffeff;
margin-right: 5px;
margin-bottom: 5px;
padding: 0 5px;
min-width: 20px;
text-align: center;
/*border: 1px solid #d7d7d7;*/
border-radius: 3px;
text-decoration: none;
}
.pagination a:hover,
.pagination a:focus,
.pagination a:active {
background-color: #F3F3F3
}
.pagination a.next_page_link,
.pagination a.prev_page_link {
border: none;
/*background: none;*/
}
.pagination a.selected,
.pagination a.selected:hover {
/*background-color: #4da5d4;;
border-color: #3786b0;*/
background-color: #999;
/*border-color: #888;*/
color: #ffffff;
}
.autocomplete-w1 { background:url(../images/shadow_autocomplete.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:3px 0 0 14px; _background:none; _margin:1px 0 0 0; }
.autocomplete { border:1px solid #e0e0e0; background:#FFF; cursor:default; text-align:left; max-height:200px; overflow:auto; margin:-3px 4px 4px -3px; _height:350px; _margin:0; _overflow-x:hidden; }
.autocomplete .selected { background:#F0F0F0; }
.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; cursor: pointer; }
.autocomplete strong { font-weight:normal; color:#3399FF; }
.autocomplete img {max-width:25px; max-height:25px;}
/* FOR EDITOR */
.mceContentBody {background:#fff none;}
.mceContentBody ul,.mceContentBody ol {margin-left:20px;}
.phone i a {
color:inherit;
text-decoration:none;
}
/* ============================================================
dragon-parts.kiev.ua — Мобільна версія (редизайн)
Підключається ОСТАННІМ у , перекриває старі mob.css / mob3.css.
Дизайн-система перенесена з оновленого десктопу (front).
ФАЗА 0 — каркас і дизайн-система.
============================================================ */
/* ---------- Дизайн-токени ---------- */
:root {
--bg-page: #0f1115;
--bg-panel: #1a1d24;
--bg-input: #111318;
--bg-elev: #20242e; /* трохи світліша поверхня (шапка/шторки) */
--border: #2a2d36;
--border-2: #323232;
--accent: #f38d1f; /* помаранчевий — головний акцент */
--accent-2: #ed192d; /* червоний */
--accent-grad: linear-gradient(135deg, #f38d1f 0%, #ed192d 100%);
--link: #f38d1f; /* стандартний лінк сайту (як на десктопі) */
--link-hover: #ff3b30;
--text: #ffffff;
--text-body: #c5cbd4;
--text-muted: #a0a5b1;
--ok: #2ecc71;
--no: #e74c3c;
--radius-sm: 6px;
--radius: 8px;
--radius-lg: 12px;
--gap: 12px;
--header-h: 54px;
--bottomnav-h: 58px;
--shadow: 0 8px 24px rgba(0,0,0,0.45);
}
/* ---------- Reset / база ---------- */
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
/* Старий style.css задає html,body { height:100% }, що в купі з position:sticky
у дочірніх елементах ламає "прилипання" після прокрутки на висоту екрана. */
height: auto !important;
min-height: 100%;
}
body.front {
min-width: 0 !important;
width: 100%;
background: var(--bg-page) !important;
color: var(--text-body);
font-family: 'Open Sans', Arial, sans-serif;
font-size: 15px;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
/* місце під фіксовану нижню навігацію (Фаза 2) */
padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
}
/* місце під липку панель купівлі (Фаза 4) */
body.mm-has-buybar {
padding-bottom: calc(var(--bottomnav-h) + 64px + env(safe-area-inset-bottom, 0px));
}
/* місце під липку панель кошика (Фаза 5) */
body.mm-has-cartbar {
padding-bottom: calc(var(--bottomnav-h) + 64px + env(safe-area-inset-bottom, 0px));
}
img { max-width: 100%; height: auto; }
a {
color: var(--link);
text-decoration: none;
}
a:hover, a:active { color: var(--link-hover); }
/* ---------- Типографіка ---------- */
h1, .h1, h2, .h2, h3, .h3, h4 {
color: var(--text);
line-height: 1.25;
margin: 0 0 14px 0;
font-weight: 700;
text-align: left;
}
h1, .h1 { font-size: 22px; }
h2, .h2 { font-size: 19px; }
h3, .h3 { font-size: 16px; }
#content p, #content li {
text-align: left !important;
line-height: 1.55;
}
#content p:not(:last-child) { margin-bottom: 12px; }
/* ---------- Структурний каркас: fluid, без 830px ---------- */
#main {
max-width: 100% !important;
width: 100% !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
#content,
#contentFull {
float: none !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
margin: 0 !important;
padding: 12px var(--gap) 20px !important;
min-height: auto !important;
}
#left {
float: none !important;
width: 100% !important;
box-sizing: border-box;
padding: 0 var(--gap) !important;
margin: 0 0 10px 0 !important;
}
.clear { clear: both; }
/* ---------- Базові поля форм (загальний вигляд) ---------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
box-sizing: border-box;
width: 100%;
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--text);
font-family: inherit;
font-size: 16px; /* >=16px щоб iOS не зумив при фокусі */
padding: 11px 13px;
border-radius: var(--radius-sm);
-webkit-appearance: none;
appearance: none;
outline: none;
transition: border-color 0.2s ease;
}
input:focus, textarea:focus, select:focus {
border-color: var(--accent);
}
::placeholder { color: var(--text-muted); }
/* select зі стрілкою */
select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 13px center;
padding-right: 34px;
}
/* ---------- Базова кнопка ---------- */
.button {
display: inline-block;
box-sizing: border-box;
color: #fff !important;
font-family: inherit;
font-size: 15px;
font-weight: 700;
line-height: 1.2;
text-align: center;
padding: 11px 16px;
background-color: var(--accent-2);
border: 1px solid var(--accent-2);
border-radius: var(--radius-sm);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.button:hover, .button:focus, .button:active {
background-color: var(--accent);
border-color: var(--accent);
color: #fff !important;
}
.on_request {
background-color: var(--bg-panel);
border-color: #555;
color: var(--text-body) !important;
}
.on_request:hover, .on_request:focus {
background-color: var(--bg-elev);
border-color: var(--accent);
}
/* ---------- Картки товарів: назва, ціна, статуси ---------- */
.products .product .product_info a,
.products .product .product_info .h3 a,
.products .product .product_info b.h3 a {
color: var(--text) !important;
}
.products .product .product_info a:hover {
color: var(--accent) !important;
}
.product .price b,
.product .price i {
color: var(--text) !important;
}
.product .price b.stColor,
.product .price i.stColor {
color: var(--accent-2) !important;
}
.product .price s {
color: var(--text-muted) !important;
text-decoration: line-through !important;
font-size: 13px;
margin-left: 4px;
}
/* ---------- Плаваючі інформери (старі) — приберемо, замінимо нижньою навігацією у Фазі 2 ---------- */
#compare_informer_wrap,
#micro_cart_informer_wrap {
display: none !important;
}
/* ---------- Утиліта для накладок (overlay) — використовується меню/шторками ---------- */
.mm-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
z-index: 1000;
}
.mm-overlay.open { opacity: 1; visibility: visible; }
/* Блокування прокрутки тіла, коли відкрито шторку/меню */
body.mm-noscroll { overflow: hidden; }
/* ============================================================
ФАЗА 1 — Шапка, пошук, висувне меню каталогу
============================================================ */
#mm-header {
position: sticky;
top: 0;
left: 0;
width: 100%;
z-index: 200;
background: var(--bg-panel);
border-bottom: 1px solid var(--border);
padding: 8px var(--gap);
box-sizing: border-box;
transition: padding 0.2s ease;
}
/* Компактний режим: одна вузька смужка (бургер + лого + пошук) при скролі вниз */
#mm-header.mm-header-compact {
display: flex;
align-items: center;
gap: 8px;
padding: 6px var(--gap);
}
#mm-header.mm-header-compact #mm-header-row {
flex: 0 0 auto;
height: auto;
gap: 8px;
display: flex;
}
#mm-header.mm-header-compact .mm-header-spacer,
#mm-header.mm-header-compact .mm-brand-word {
display: none;
}
#mm-header.mm-header-compact .mm-brand {
display: flex;
width: auto;
flex: 0 0 auto;
}
#mm-header.mm-header-compact .mm-logo-mark#logo {
width: 34px !important;
height: 34px !important;
}
#mm-header.mm-header-compact #mm-search-row {
flex: 1 1 auto;
margin-top: 0;
}
#mm-header-row {
display: grid;
grid-template-columns: 40px 1fr minmax(40px, auto);
align-items: center;
gap: 10px;
height: var(--header-h);
}
#mm-burger {
flex: 0 0 auto;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
padding: 0;
cursor: pointer;
}
#mm-burger svg { width: 20px; height: 20px; }
/* Бренд-лінк: "Dragon" [лого] "Parts", по центру шапки */
.mm-brand {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 8px;
width: 100%;
min-width: 0;
text-decoration: none;
}
.mm-brand-word {
font-family: 'Cinzel', 'Open Sans', serif;
font-weight: 700;
font-size: 17px;
letter-spacing: 0.5px;
color: var(--text);
white-space: nowrap;
line-height: 1;
}
/* Симетричні колонки зліва/праворуч від іконки — текст різної довжини,
тому притискаємо його до іконки в центрі, а не до краю комірки. */
.mm-brand-word-left { text-align: right; }
.mm-brand-word-right { text-align: left; }
/* Перекриваємо застарілі правила #logo (float/height/width/background-position) */
.mm-logo-mark#logo {
flex: 0 0 auto;
display: block;
width: var(--header-h) !important;
height: var(--header-h) !important;
max-width: none !important;
min-width: 0;
float: none !important;
clear: none !important;
margin: 0 !important;
padding: 0 !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}
.mm-header-spacer {
display: flex;
align-items: center;
justify-content: flex-end;
}
#mm-currency { flex: 0 0 auto; }
#mm-currency select {
width: auto;
padding: 6px 26px 6px 10px;
font-size: 13px;
border-radius: var(--radius-sm);
}
#mm-search-row {
margin-top: 8px;
display: flex;
align-items: center;
gap: 8px;
}
#mm-search-back {
display: none;
flex: 0 0 auto;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--text);
padding: 0;
cursor: pointer;
}
#mm-search-back svg { width: 20px; height: 20px; }
#mm-search-row form {
flex: 1 1 auto;
display: flex;
align-items: stretch;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
#mm-search-row .input_search {
flex: 1 1 auto;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
}
#mm-search-row .button_search {
flex: 0 0 auto;
width: 44px;
border: none;
background: var(--accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
#mm-search-row .button_search svg { width: 18px; height: 18px; }
/* ---------- Розкладний пошук на весь екран ---------- */
#mm-search-suggest { display: none; }
body.mm-search-open #mm-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1300;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: none !important;
border-bottom: none;
}
body.mm-search-open #mm-header-row { display: none; }
body.mm-search-open #mm-search-back { display: flex; }
body.mm-search-open #mm-search-suggest {
display: block;
margin-top: 18px;
}
body.mm-search-open { overflow: hidden; }
.mm-search-suggest-title,
.mm-search-suggest-title-row {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.mm-search-suggest-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.mm-chip {
padding: 8px 14px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 20px;
font-size: 13px;
color: var(--text-body);
}
#mm-search-history-clear {
background: transparent;
border: none;
color: var(--accent);
font-size: 12px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
cursor: pointer;
}
#mm-search-history-list { list-style: none; margin: 0; padding: 0; }
.mm-history-item {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border);
}
.mm-history-term {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
color: var(--text-body);
font-size: 14px;
}
.mm-history-term svg { width: 17px; height: 17px; color: var(--text-muted); flex: 0 0 auto; }
.mm-history-remove {
flex: 0 0 auto;
background: transparent;
border: none;
color: var(--text-muted);
font-size: 14px;
padding: 8px;
cursor: pointer;
}
/* ---------- Швидкі результати пошуку (автокомпліт) ---------- */
.autocomplete-w1 {
margin: 0 !important;
background: none !important;
}
.autocomplete {
border: 1px solid var(--border) !important;
background: var(--bg-panel) !important;
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
max-height: 70vh !important;
overflow-y: auto !important;
margin: 0 !important;
z-index: 1400 !important;
}
.autocomplete div {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px !important;
white-space: normal !important;
overflow: visible !important;
color: var(--text-body);
font-size: 14px;
line-height: 1.35;
border-bottom: 1px solid var(--border);
cursor: pointer;
min-height: 56px;
box-sizing: border-box;
}
.autocomplete div:last-child { border-bottom: none; }
.autocomplete .selected,
.autocomplete div:active {
background: var(--bg-input) !important;
}
.autocomplete strong {
font-weight: 700 !important;
color: var(--accent) !important;
}
.ac-thumb {
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 8px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ac-thumb-empty {
background: var(--bg-input);
}
.ac-thumb img {
max-width: 90% !important;
max-height: 90% !important;
width: auto;
height: auto;
object-fit: contain;
}
.ac-name {
flex: 1 1 auto;
color: var(--text-body);
}
/* ---------- Off-canvas: каталог товарів ---------- */
#mm-catalog-panel {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 84%;
max-width: 340px;
background: var(--bg-panel);
z-index: 1001;
transform: translateX(-100%);
transition: transform 0.25s ease;
display: flex;
flex-direction: column;
box-shadow: var(--shadow);
}
#mm-catalog-panel.open { transform: translateX(0); }
#mm-catalog-panel-header {
flex: 0 0 auto;
display: grid;
grid-template-columns: 40px 1fr 40px;
align-items: center;
padding: 16px var(--gap);
background: var(--bg-elev);
border-bottom: 1px solid var(--border);
color: var(--text);
font-weight: 700;
font-size: 16px;
}
#mm-catalog-close {
background: transparent;
border: none;
color: var(--text-muted);
font-size: 20px;
line-height: 1;
padding: 4px 8px;
cursor: pointer;
}
#mm-catalog-panel-body {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 6px 0 30px;
}
/* ---------- Заголовок панелі: кнопка "назад" ---------- */
.mm-catalog-back-btn {
grid-column: 1;
justify-self: start;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: transparent;
border: none;
color: var(--accent);
padding: 0;
cursor: pointer;
}
.mm-catalog-back-btn svg { width: 20px; height: 20px; }
#mm-catalog-panel-title {
grid-column: 2;
justify-self: center;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
#mm-catalog-close { grid-column: 3; justify-self: end; }
/* ---------- Списки категорій ---------- */
#mm-catalog-panel-body #mm-cat-tree {
display: block !important;
}
#mm-catalog-panel-body ul.mm-cat-list {
list-style: none;
margin: 0;
padding: 0;
}
ul.mm-sub { display: none; }
#mm-cat-drill-slot { display: block; }
#mm-cat-drill-slot ul.mm-cat-list.mm-cat-drill-active { display: block !important; }
.mm-cat-item {
position: relative;
border-bottom: 1px solid var(--border);
}
.mm-cat-row {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 50px 14px var(--gap);
color: var(--text-body);
font-size: 14.5px;
line-height: 1.3;
}
.mm-cat-row.selected {
color: var(--accent) !important;
font-weight: 700;
}
.mm-cat-icon {
flex: 0 0 auto;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
}
.mm-cat-icon img { width: 26px; height: 26px; object-fit: contain; }
.mm-cat-icon svg { width: 22px; height: 22px; }
.mm-cat-name { flex: 1 1 auto; }
/* Рівень 1 — головні розділи (з іконкою, трохи вищі рядки) */
.mm-cat-list-1 > .mm-cat-item > .mm-cat-row {
padding: 15px 50px 15px var(--gap);
font-weight: 600;
font-size: 15px;
color: var(--text);
}
.mm-cat-list-1 > .mm-cat-item:nth-child(even) {
background: rgba(255, 255, 255, 0.02);
}
.mm-cat-list-1 > .mm-cat-item > .mm-cat-arrow::before {
border-right-color: var(--accent);
border-bottom-color: var(--accent);
}
/* Рівень 2 — підкатегорії (без іконки, акцентна смужка зліва) */
.mm-cat-list-2 {
background: var(--bg-elev);
}
.mm-cat-list-2 > .mm-cat-item {
border-bottom: 1px solid var(--border);
border-left: 3px solid transparent;
}
.mm-cat-list-2 > .mm-cat-item > .mm-cat-row {
padding: 14px 50px 14px calc(var(--gap) - 3px);
font-size: 14.5px;
font-weight: 600;
color: var(--text);
}
.mm-cat-list-2 > .mm-cat-item.mm-open {
border-left-color: var(--accent);
background: rgba(243, 141, 31, 0.08);
}
.mm-cat-list-2 > .mm-cat-item.mm-open > .mm-cat-row {
color: var(--accent);
}
/* Рівень 3+ — вкладений інлайн-акордеон: чітко затемнений і відступлений блок */
.mm-cat-nested {
background: var(--bg-page);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
display: none;
}
.mm-cat-nested .mm-cat-row {
padding: 12px 50px 12px calc(var(--gap) + 18px);
font-size: 13.5px;
color: var(--text-muted);
position: relative;
}
.mm-cat-nested .mm-cat-row::before {
content: '';
position: absolute;
left: var(--gap);
top: 50%;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--text-muted);
transform: translateY(-50%);
}
.mm-cat-item-nested { border-bottom: 1px solid var(--border); }
.mm-cat-item-nested:last-child { border-bottom: none; }
.mm-cat-nested .mm-cat-item-nested.mm-open > .mm-cat-row { color: var(--accent); }
.mm-cat-nested .mm-cat-item-nested.mm-open > .mm-cat-row::before { background: var(--accent); }
/* Кнопка-стрілка розгортання/переходу */
.mm-cat-arrow {
position: absolute;
right: 4px;
top: 0;
width: 46px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
z-index: 2;
cursor: pointer;
}
.mm-cat-arrow::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
}
.mm-cat-arrow::before {
content: '';
position: relative;
width: 9px;
height: 9px;
border-right: 2.5px solid var(--text-muted);
border-bottom: 2.5px solid var(--text-muted);
transform: rotate(-45deg);
transition: transform 0.2s ease;
flex: 0 0 auto;
z-index: 1;
}
/* Рівень 1: стрілка завжди вказує "вперед" (drill-навігація).
Для глибших рівнів — обертаємо тільки СВОЮ стрілку (прямий нащадок), а не всі вкладені. */
.mm-cat-item.mm-open > .mm-cat-arrow::before {
transform: rotate(45deg);
}
.mm-cat-list-1 > .mm-cat-item.mm-open > .mm-cat-arrow::before {
transform: rotate(-45deg);
}
#mm-pages-menu {
padding-top: 10px;
margin-top: 10px;
border-top: 1px solid var(--border);
background: var(--bg-elev);
}
.mm-pages-menu-title {
display: block;
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
padding: 6px var(--gap) 8px;
}
#mm-pages-menu .menu {
display: block !important;
list-style: none;
margin: 0;
padding: 0;
max-height: none !important;
overflow: visible !important;
}
#mm-pages-menu .menu li {
display: block !important;
border-bottom: 1px solid var(--border);
}
#mm-pages-menu .menu li:last-child { border-bottom: none; }
.mm-page-link {
display: flex !important;
align-items: center;
padding: 14px var(--gap);
color: var(--text-body) !important;
font-size: 15px;
font-weight: 600;
}
.mm-page-link:active { background: rgba(255, 255, 255, 0.04); }
#mm-pages-menu .menu li.selected .mm-page-link {
color: var(--accent) !important;
background: rgba(243, 141, 31, 0.1);
}
/* ============================================================
ФАЗА 2 — Нижня панель навігації
============================================================ */
#mm-bottomnav {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
box-sizing: border-box;
display: flex;
background: var(--bg-panel);
border-top: 1px solid var(--border);
z-index: 900;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mm-nav-item {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
height: var(--bottomnav-h);
border: none;
background: transparent;
color: var(--text-muted) !important;
font-size: 11px;
position: relative;
cursor: pointer;
}
.mm-nav-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.mm-nav-item svg {
width: 22px;
height: 22px;
}
.mm-nav-item.active,
.mm-nav-item:active {
color: var(--accent) !important;
}
/* ============================================================
ФАЗА 3 — Каталог: сітка 2-в-ряд, фільтри/сортування bottom-sheet
============================================================ */
#path {
font-size: 12px;
color: var(--text-muted);
margin-top: 10px;
margin-bottom: 10px;
word-break: break-word;
position: relative;
z-index: 1;
}
#path a { color: var(--text-muted); }
.category_image_mini {
float: left;
max-width: 70px;
margin: 0 12px 8px 0;
border-radius: var(--radius-sm);
}
/* Опис категорії */
.category-seo-description { position: relative; margin-bottom: 16px; }
.category-desc-content {
max-height: 110px;
overflow: hidden;
position: relative;
transition: max-height 0.3s ease;
color: var(--text-body);
}
.category-desc-content::after {
content: '';
position: absolute;
bottom: 0; left: 0; width: 100%; height: 50px;
background: linear-gradient(to bottom, rgba(15,17,21,0), rgba(15,17,21,1));
}
.category-desc-content.expanded { max-height: none; }
.category-desc-content.expanded::after { display: none; }
.cat-read-more {
display: none;
margin: 10px auto 0;
padding: 8px 16px;
background: transparent;
border: 1px solid var(--accent);
color: var(--accent);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 14px;
}
/* Старий перемикач вигляду (вітрина/список/таблиця) — приховано, грід завжди 2 колонки */
.category_view { display: none !important; }
/* Тулбар: Сортування / Фільтри — приклеєний під шапкою при скролі.
Висоту шапки (повна/компактна) вимірює JS у --mm-header-now-h. */
.mm-toolbar {
display: flex;
gap: 10px;
margin: 0 calc(-1 * var(--gap)) 14px;
padding: 10px var(--gap);
position: sticky;
top: var(--mm-header-now-h, 54px);
z-index: 150;
background: var(--bg-page);
border-bottom: 1px solid var(--border);
}
.mm-toolbar-btn {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
background: var(--bg-panel);
border: 1px solid var(--border);
color: var(--text-body);
padding: 10px 8px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.mm-toolbar-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* Bottom sheet */
.mm-sheet {
position: fixed;
left: 0; bottom: 0;
width: 100%;
max-height: 80vh;
background: var(--bg-panel);
border-radius: 14px 14px 0 0;
z-index: 1101;
transform: translateY(100%);
transition: transform 0.25s ease;
display: flex;
flex-direction: column;
box-shadow: var(--shadow);
}
.mm-sheet.open { transform: translateY(0); }
.mm-sheet-header {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px var(--gap);
border-bottom: 1px solid var(--border);
color: var(--text);
font-weight: 700;
font-size: 16px;
}
.mm-sheet-close {
background: transparent;
border: none;
color: var(--text-muted);
font-size: 20px;
line-height: 1;
padding: 4px 8px;
cursor: pointer;
}
.mm-sheet-body {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 14px var(--gap) 26px;
}
.mm-sheet-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
z-index: 1100;
}
.mm-sheet-overlay.open { opacity: 1; visibility: visible; }
.mm-sort-list { list-style: none; margin: 0; padding: 0; }
.mm-sort-list li { border-bottom: 1px solid var(--border); }
.mm-sort-list a {
display: block;
padding: 13px 4px;
color: var(--text-body);
font-size: 15px;
}
.mm-sort-list a.selected {
color: var(--accent);
font-weight: 700;
}
/* ---------- Рядок результатів пошуку ---------- */
.mm-results-row {
color: var(--text-muted);
font-size: 13px;
margin-bottom: 10px;
}
/* ---------- Бейдж кількості активних фільтрів на кнопці тулбару ---------- */
.mm-toolbar-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: var(--accent);
color: #fff;
font-size: 11px;
font-weight: 700;
}
/* ---------- Активні фільтри — чипи ---------- */
.mm-active-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 14px;
}
.mm-chip-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(243, 141, 31, 0.15);
border: 1px solid rgba(243, 141, 31, 0.35);
color: var(--accent);
padding: 6px 8px 6px 12px;
border-radius: 20px;
font-size: 12px;
white-space: nowrap;
}
.mm-chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(243, 141, 31, 0.25);
font-size: 10px;
cursor: pointer;
}
.mm-chip-reset {
display: inline-flex;
align-items: center;
padding: 6px 4px;
color: var(--text-muted);
font-size: 12px;
text-decoration: underline;
}
/* ============================================================
Повноекранна панель фільтрів (drill-down, як меню каталогу)
============================================================ */
#mm-filter-panel {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-panel);
z-index: 1201;
transform: translateY(100%);
transition: transform 0.25s ease;
display: flex;
flex-direction: column;
}
#mm-filter-panel.open { transform: translateY(0); }
#mm-filter-overlay { z-index: 1200; }
#mm-filter-panel-header {
flex: 0 0 auto;
display: grid;
grid-template-columns: 40px 1fr 40px;
align-items: center;
padding: 16px var(--gap);
background: var(--bg-elev);
border-bottom: 1px solid var(--border);
color: var(--text);
font-weight: 700;
font-size: 16px;
}
#mm-filter-panel-title {
grid-column: 2;
justify-self: center;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
#mm-filter-close {
grid-column: 3;
justify-self: end;
background: transparent;
border: none;
color: var(--text-muted);
font-size: 20px;
line-height: 1;
padding: 4px 8px;
cursor: pointer;
}
#mm-filter-panel-body {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0;
}
#mm-filter-panel-footer {
flex: 0 0 auto;
display: flex;
gap: 10px;
padding: 12px var(--gap);
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--border);
background: var(--bg-panel);
}
.mm-flt-btn-reset {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 0 18px;
color: var(--text-body);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 600;
}
.mm-flt-btn-apply {
flex: 1 1 auto;
background: var(--accent-grad);
border: none;
color: #fff;
font-size: 15px;
font-weight: 700;
border-radius: var(--radius-sm);
padding: 13px 0;
}
/* ---------- Рівень 1: список груп фільтрів ---------- */
.mm-flt-groups { padding: 4px 0; }
.mm-flt-group-row {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
background: transparent;
border: none;
border-bottom: 1px solid var(--border);
padding: 15px var(--gap);
color: var(--text);
font-size: 15px;
text-align: left;
}
.mm-flt-group-name { flex: 1 1 auto; }
.mm-flt-badge {
flex: 0 0 auto;
display: none;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
background: var(--accent);
color: #fff;
font-size: 12px;
font-weight: 700;
}
.mm-flt-chev {
flex: 0 0 auto;
width: 8px;
height: 8px;
border-right: 2px solid var(--text-muted);
border-bottom: 2px solid var(--text-muted);
transform: rotate(-45deg);
}
/* ---------- Рівень 2: панель окремої групи ---------- */
.mm-flt-panel {
display: none;
padding: 16px var(--gap) 30px;
}
.mm-flt-panel.mm-flt-panel-active { display: block; }
.mm-flt-price-row {
display: flex;
align-items: center;
gap: 10px;
}
.mm-flt-price-row input[type="number"] {
width: 100%;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 14px;
color: var(--text);
font-size: 15px;
}
.mm-flt-price-row input[type="number"]:focus { border-color: var(--accent); }
.mm-flt-price-sep { color: var(--text-muted); }
.mm-flt-search {
width: 100%;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 11px 14px;
color: var(--text);
font-size: 14px;
margin-bottom: 12px;
}
.mm-flt-search:focus { border-color: var(--accent); }
.mm-flt-list { list-style: none; margin: 0; padding: 0; }
.mm-flt-list li { border-bottom: 1px solid var(--border); }
.mm-flt-list li:last-child { border-bottom: none; }
.mm-flt-list-wrap.expandable { max-height: 360px; overflow: hidden; }
.mm-flt-list-wrap.expandable.expanded { max-height: none; overflow: visible; }
.mm-flt-check {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 2px;
cursor: pointer;
}
.mm-flt-check input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.mm-flt-checkmark {
flex: 0 0 auto;
width: 20px;
height: 20px;
border-radius: 4px;
background: var(--bg-input);
border: 1px solid var(--border);
position: relative;
}
.mm-flt-check input:checked ~ .mm-flt-checkmark {
background: var(--accent);
border-color: var(--accent);
}
.mm-flt-check input:checked ~ .mm-flt-checkmark::after {
content: '';
position: absolute;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.mm-flt-check-text {
flex: 1 1 auto;
color: var(--text-body);
font-size: 14.5px;
}
.mm-flt-check.disabled { opacity: 0.4; }
.mm-flt-check.disabled .mm-flt-check-text,
.mm-flt-check.disabled .mm-flt-checkmark { cursor: not-allowed; }
.f-count { color: var(--text-muted); font-size: 12.5px; }
.mm-flt-showmore {
margin-top: 12px;
color: var(--accent);
font-size: 13px;
font-weight: 600;
}
/* ---------- Грід підкатегорій (як на десктопі) ---------- */
.mm-subcat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin: 4px 0 18px;
}
.mm-subcat-tile {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
padding: 14px 8px;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text-body);
transition: border-color 0.2s ease;
}
.mm-subcat-tile:active { border-color: var(--accent); }
.mm-subcat-image {
width: 56px;
height: 56px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.mm-subcat-image img { width: 70%; height: 70%; object-fit: contain; }
.mm-subcat-noimage { color: var(--accent); display: flex; }
.mm-subcat-noimage svg { width: 26px; height: 26px; }
.mm-subcat-name {
font-size: 13px;
font-weight: 600;
line-height: 1.3;
color: var(--text);
}
/* ---------- Сітка товарів 2-в-ряд ---------- */
ul.products,
ul.products_lists,
ul.products_table {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
.products .product {
width: auto !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
padding: 10px !important;
background: var(--bg-panel);
border: 1px solid var(--border) !important;
border-radius: var(--radius);
text-align: left !important;
display: flex !important;
flex-direction: column;
}
.products .product:hover { border-color: var(--border) !important; }
.products .product .image {
width: 100% !important;
height: auto !important;
min-height: 120px;
line-height: normal !important;
margin: 0 0 8px 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #fff;
border-radius: var(--radius-sm);
overflow: hidden;
position: relative !important;
}
/* Точну квадратну висоту виставляє JS (squareProductImages) на основі реальної ширини картки.
width/height мають бути визначеними (100%), інакше object-fit не діє (як було без атрибутів width/height у ![]()
). */
.products .product .image img {
position: static !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain;
object-position: center center;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
.products .product .image .i_label {
width: 30px !important;
height: 30px !important;
background-size: contain !important;
}
.products .product .image .i_stock.i_sale .sale,
.products .product .image .i_sale.i_featured .featured,
.products .product .image .i_stock.i_featured .featured {
top: 28px !important;
}
.products .product .product_info {
width: 100% !important;
margin: 0 !important;
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.products .product .product_info .h3,
.products .product .product_info b.h3 {
font-weight: 600;
margin-bottom: 6px;
}
.products .product .product_info a {
font-size: 13px !important;
line-height: 1.3 !important;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
/* Компактна картка: ховаємо лише опис і "порівняння" (не влазять у грід 2-в-ряд) */
.products .product .stock_block,
.products .product .annotation,
.products .product .compare {
display: none !important;
}
/* Код товару (артикул) */
.products .product .sku_and_stock {
margin-bottom: 4px;
}
.products .product .sku_and_stock .p_sku {
color: var(--text-muted) !important;
font-size: 11px !important;
}
.products .product .sku_and_stock .p_in_stock,
.products .product .sku_and_stock .p_out_stock {
font-size: 12px !important;
}
/* Порядок у картці: назва → код товару → рейтинг → ціна/кнопка */
.products .product .product_info .h3,
.products .product .product_info b.h3 { order: 1; }
.products .product .sku_and_stock { order: 2; }
.products .product .rate-block2 { order: 3; }
.products .product .variants { order: 4; }
/* Рейтинг — замінюємо старий растровий спрайт (з білим фоном) на прозорі SVG-зірочки */
.products .product .rate-block2 {
margin-bottom: 4px;
float: none !important;
}
.rater-starsOff,
.rater-starsOn {
background: none !important;
}
.rater-starsOff {
position: relative;
display: inline-block;
width: 80px;
height: 16px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%234a4a4a' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") 0 0 repeat-x !important;
}
.rater-starsOn {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
height: 16px;
white-space: nowrap;
display: block;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23f38d1f' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") 0 0 repeat-x !important;
}
.products .product .variants { width: 100% !important; margin-top: auto !important; }
.products .product .variants select {
font-size: 12px !important;
height: 32px !important;
width: 100% !important;
padding: 4px 22px 4px 8px;
margin-bottom: 6px;
}
.products .product .price_block {
display: flex;
flex-direction: column;
gap: 6px;
height: auto !important;
clear: none !important;
}
.products .product .price { float: none !important; padding: 0 !important; height: auto !important; line-height: 1.2 !important; }
.products .product .price b { font-size: 15px !important; }
.products .product .button {
float: none !important;
display: block;
width: 100%;
text-align: center;
font-size: 13px !important;
padding: 8px 6px !important;
}
/* ---------- Карусель товарів (Супер ціна, Новинки, Спецпропозиція тощо) ---------- */
ul.mm-prod-carousel {
display: flex !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
gap: 10px;
padding-bottom: 6px;
margin-bottom: 20px !important;
}
ul.mm-prod-carousel::-webkit-scrollbar { display: none; }
ul.mm-prod-carousel .product {
flex: 0 0 calc(46% - 5px);
width: auto !important;
scroll-snap-align: start;
}
.not_available {
font-size: 12px;
color: var(--no);
text-align: left !important;
}
/* ---------- Пагінація ---------- */
.pagination {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
margin: 20px 0;
}
.pagination a {
min-width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8px;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-body);
font-size: 13px;
}
.pagination a.selected {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
/* ============================================================
ФАЗА 4 — Сторінка товару, акордеон, липка кнопка купівлі
============================================================ */
.product-sku {
display: block !important;
float: none !important;
text-align: left !important;
font-size: 11px !important;
color: #c5cbd4 !important;
background: #1e2229 !important;
border: 1px solid #363c47 !important;
border-radius: 4px !important;
padding: 2px 8px !important;
margin: 0 0 10px 0 !important;
letter-spacing: 0.02em;
width: fit-content !important;
}
div.product { width: 100%; }
/* ---------- Галерея товару: свайп-карусель + крапки + мініатюри ---------- */
.mm-gallery {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 0 16px 0 !important;
}
.mm-gallery-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--border);
border-radius: var(--radius);
background: #fff;
}
.mm-gallery-track::-webkit-scrollbar { display: none; }
.mm-gallery-slide {
flex: 0 0 100%;
width: 100%;
scroll-snap-align: center;
display: flex !important;
align-items: center;
justify-content: center;
background: #fff;
position: relative;
overflow: hidden;
}
.mm-gallery-slide img {
max-width: 92% !important;
max-height: 92% !important;
width: auto;
height: auto;
object-fit: contain;
}
.mm-gallery-dots {
display: flex;
justify-content: center;
gap: 7px;
margin: 12px 0 0;
}
.mm-gallery-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--border);
transition: background 0.2s, width 0.2s;
}
.mm-gallery-dot.active {
background: var(--accent);
width: 18px;
border-radius: 4px;
}
.mm-gallery-thumbs {
display: flex;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-top: 12px;
padding-bottom: 4px;
}
.mm-gallery-thumbs::-webkit-scrollbar { display: none; }
.mm-gallery-thumb {
flex: 0 0 auto;
width: 56px;
height: 56px;
padding: 3px;
border: 2px solid var(--border);
border-radius: var(--radius-sm);
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: pointer;
}
.mm-gallery-thumb.active { border-color: var(--accent); }
.mm-gallery-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* ---------- Lightbox (Rozetka-style) ---------- */
#mm-lb {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(0,0,0,0.97);
display: none;
flex-direction: column;
overscroll-behavior: contain;
}
#mm-lb.open { display: flex; }
.mm-lb-close {
position: absolute;
top: 10px; right: 10px;
z-index: 2;
width: 38px; height: 38px;
background: rgba(255,255,255,0.18);
border: none;
border-radius: 50%;
color: #fff;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
-webkit-tap-highlight-color: transparent;
}
.mm-lb-track {
flex: 1;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.mm-lb-track::-webkit-scrollbar { display: none; }
.mm-lb-slide {
flex: 0 0 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
scroll-snap-align: center;
padding: 52px 8px 0;
box-sizing: border-box;
}
.mm-lb-slide.zoomed {
overflow: scroll;
align-items: flex-start;
justify-content: flex-start;
padding: 0;
-webkit-overflow-scrolling: touch;
}
.mm-lb-slide img {
max-width: 100%;
max-height: calc(100vh - 96px);
object-fit: contain;
display: block;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}
.mm-lb-slide.zoomed img {
max-width: none;
max-height: none;
width: 250%;
height: auto;
pointer-events: auto;
}
.mm-lb-footer {
flex-shrink: 0;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.mm-lb-footer-empty { height: 56px; flex-shrink: 0; }
.mm-lb-dots {
display: flex;
gap: 6px;
align-items: center;
}
.mm-lb-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(255,255,255,0.35);
transition: background 0.2s, width 0.2s;
cursor: pointer;
}
.mm-lb-dot.active {
background: #fff;
width: 18px;
border-radius: 4px;
}
.mm-lb-zoom {
position: absolute;
right: 14px;
width: 40px; height: 40px;
background: rgba(255,255,255,0.18);
border: 2px solid rgba(255,255,255,0.25);
border-radius: 8px;
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
-webkit-tap-highlight-color: transparent;
transition: background 0.2s;
}
.mm-lb-zoom.active { background: rgba(255,255,255,0.35); }
.mm-lb-zoom svg { width: 20px; height: 20px; }
.mm-lb-zoom .ic-zoom-out { display: none; }
.mm-lb-zoom.active .ic-zoom-in { display: none; }
.mm-lb-zoom.active .ic-zoom-out { display: block; }
.product .excerpt {
width: 100% !important;
float: none !important;
margin: 0 !important;
min-width: 0 !important;
}
.product .stock_block {
display: inline-block;
color: var(--ok);
font-size: 13px;
font-weight: 700;
margin-bottom: 8px;
}
.product .variants select { width: 100% !important; margin-bottom: 10px; }
.product .price_block { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.product .price b { font-size: 26px !important; color: var(--text); }
.product .price b.stColor { color: var(--accent-2) !important; }
.product .price i { font-size: 15px; color: var(--text-muted); }
.product .compare_price {
display: block;
color: var(--text-muted);
text-decoration: line-through;
font-size: 13px;
margin-bottom: 4px;
}
/* Рядок: рейтинг ліворуч + іконка терезів (порівняння) праворуч */
.mm-rate-compare {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 12px 0;
min-height: 28px;
}
.mm-rate-compare .rate-block { float: none !important; margin: 0 !important; }
.mm-rate-compare .compare {
flex: 0 0 auto;
margin: 0 !important;
}
.mm-rate-compare .compare input.compare_button {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.mm-compare-icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-panel);
color: var(--text-muted);
cursor: pointer;
}
.mm-compare-icon svg { width: 22px; height: 22px; }
.mm-compare-icon.active,
.mm-compare-icon:active {
color: var(--accent);
border-color: var(--accent);
}
/* ---------- Блоки, що розкриваються: Доставка / Оплата / Гарантія ---------- */
.mm-collapse-group {
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
margin: 16px 0;
}
.mm-collapse { border-bottom: 1px solid var(--border); }
.mm-collapse:last-child { border-bottom: none; }
.mm-collapse-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-panel);
border: none;
color: var(--text);
font-size: 15px;
font-weight: 700;
padding: 14px var(--gap);
text-align: left;
cursor: pointer;
}
.mm-collapse-head::after {
content: '';
flex: 0 0 auto;
width: 8px;
height: 8px;
border-right: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(45deg);
transition: transform 0.2s ease;
}
.mm-collapse-head.active::after { transform: rotate(-135deg); }
.mm-collapse-body {
display: none;
padding: 4px var(--gap) 16px;
background: var(--bg-elev);
color: var(--text-body);
font-size: 14px;
line-height: 1.5;
}
.mm-collapse-body b { color: var(--text); }
/* Липка панель купівлі (над нижньою навігацією) */
#mm-buy-bar {
position: fixed;
left: 0;
bottom: var(--bottomnav-h);
width: 100%;
z-index: 850;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px var(--gap);
background: var(--bg-panel);
border-top: 1px solid var(--border);
box-shadow: 0 -6px 16px rgba(0,0,0,0.35);
}
#mm-buy-bar-price { display: flex; align-items: baseline; gap: 4px; }
#mm-buy-bar-amount { font-size: 19px; color: var(--text); }
#mm-buy-bar-price i { font-size: 13px; color: var(--text-muted); }
#mm-buy-bar-btn {
flex: 0 0 auto;
min-width: 140px;
background: var(--accent-grad);
border: none;
}
/* Акордеон табів */
/* Старий .section мав світлий фон #EFEFEF — він "просвічував" у проміжках між
.mm-accordion-item (margin-bottom). Прибираємо. */
.section.mm-accordion,
.mm-accordion {
background: transparent !important;
margin: 16px 0 !important;
}
/* Підпис-розділювач над блоком */
.section.mm-accordion::before,
.mm-accordion::before {
content: 'ІНФОРМАЦІЯ ПРО ТОВАР';
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 12px;
line-height: 1;
}
.mm-accordion-item {
border: 1px solid var(--border);
/* Помаранчева смужка зліва — відрізняє від блоків Доставка/Оплата/Гарантія */
border-left: 3px solid var(--accent);
border-radius: 0 var(--radius) var(--radius) 0;
margin-bottom: 10px;
background: var(--bg-panel);
overflow: hidden;
}
.mm-accordion-head {
width: 100%;
text-align: left;
/* Дуже легкий помаранчевий підтон у заголовку */
background: rgba(243, 141, 31, 0.06);
border: none;
color: var(--text);
font-size: 15px;
font-weight: 700;
padding: 14px var(--gap);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.mm-accordion-head:hover {
background: rgba(243, 141, 31, 0.11);
}
.mm-accordion-head::after {
content: '';
width: 8px;
height: 8px;
border-right: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(45deg);
transition: transform 0.2s ease;
flex: 0 0 auto;
}
.mm-accordion-head.active::after { transform: rotate(-135deg); }
.mm-accordion-body {
display: none;
background: var(--bg-panel) !important;
border: none !important;
border-top: 1px solid var(--border) !important;
padding: 14px var(--gap) 18px !important;
color: var(--text-body);
font-size: 14px;
line-height: 1.55;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mm-accordion-body * { box-sizing: border-box; }
.mm-accordion-body h2 {
font-size: 15px;
color: var(--text);
margin: 0 0 12px;
padding-bottom: 0;
border-bottom: none;
}
.mm-accordion-body p { margin: 0 0 12px; }
.mm-accordion-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.mm-accordion-body a { color: var(--accent); }
/* Таблиці в тексті опису — загальні стилі */
.mm-accordion-body table {
width: auto;
min-width: 100%;
border-collapse: collapse;
margin: 12px 0;
background: var(--bg-input);
}
.mm-accordion-body table th,
.mm-accordion-body table td {
padding: 9px 12px;
border: 1px solid var(--border);
color: var(--text-body);
white-space: nowrap;
font-size: 13px;
}
.mm-accordion-body table th {
color: var(--text);
background: var(--bg-elev);
font-weight: 700;
}
/* Перебудована 2-стовпчикова таблиця (JS-результат) — без горизонтального скролу */
.mm-accordion-body table[data-mm-done] {
width: 100%;
min-width: 0;
table-layout: fixed;
}
.mm-accordion-body table[data-mm-done] th,
.mm-accordion-body table[data-mm-done] td {
white-space: normal;
word-break: break-word;
width: 50%;
}
.mm-accordion-body .features { list-style: none; margin: 0; padding: 0; }
.mm-accordion-body .features li,
.mm-accordion-body .features li.even {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 11px 0;
border-bottom: 1px solid var(--border);
font-size: 14px;
background: transparent !important;
}
.mm-accordion-body .features li:hover { background: transparent !important; }
.mm-accordion-body .features li:last-child { border-bottom: none; }
.mm-accordion-body .features li label { color: var(--text-muted); margin: 0; }
.mm-accordion-body .features li span { color: var(--text); text-align: right; }
/* Відгуки всередині акордеону (білий .box перебивав наш темний фон) */
.mm-accordion-body #comments_wrap { background: transparent; }
.mm-accordion-body #comments_wrap h2 { display: none; } /* дублює заголовок вкладки */
/* ============================================================
ФАЗА 5 — Кошик і оформлення замовлення
============================================================ */
#cartHistoryBack {
display: inline-block;
margin-bottom: 12px;
color: var(--text-muted);
font-size: 13px;
}
.cart_warning_text {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
margin-bottom: 14px;
font-size: 13px;
color: var(--text-body);
}
.cart_warning_text img { max-width: 60px; border-radius: var(--radius-sm); }
#cartProducts, #cartOrdering {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 0 18px 0 !important;
padding: 0 !important;
}
.purchasesBlock { width: 100%; box-sizing: border-box; }
#purchases {
width: 100%;
border-collapse: collapse;
display: block;
}
#purchases tr {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
#purchases tr.total,
#purchases tr.coupon {
display: block;
padding: 14px 0;
}
#purchases td, #purchases th {
padding: 0;
font-size: 13px;
color: var(--text-body);
}
#purchases td.image { flex: 0 0 50px; }
#purchases td.image img { width: 50px; height: 50px; object-fit: contain; border-radius: var(--radius-sm); background: var(--bg-input); }
#purchases td.name { flex: 1 1 55%; color: var(--text); }
#purchases td.name a { color: var(--text); font-size: 14px; }
#purchases td.name u { text-decoration: none; color: var(--text-muted); font-size: 12px; }
#purchases td.amount { flex: 0 0 100%; order: 5; }
#purchases td.amount select { width: auto; display: inline-block; padding: 6px 24px 6px 10px; }
#purchases td.price { flex: 1 1 auto; text-align: right; color: var(--text); font-weight: 700; }
#purchases td.remove { flex: 0 0 auto; }
#purchases td.remove img { width: 20px; height: 20px; opacity: 0.7; }
#purchases tr.total th,
#purchases tr.total b {
color: var(--text);
}
#purchases tr.total th.price { color: var(--accent); font-size: 18px; }
#purchases .coupon a#coupon_code_toggle { color: var(--accent); }
#purchases .coupon input.coupon_code {
width: 60%;
display: inline-block;
}
#purchases .coupon input.btn_apply { width: auto; display: inline-block; }
.cart_form { width: 100% !important; max-width: 100% !important; }
.cart_form label { display: block; margin: 12px 0 6px; color: var(--text-muted); font-size: 13px; }
.cart_form input[type="text"], .cart_form select, .cart_form textarea { width: 100%; }
.cart_form .button { width: 100%; margin-top: 16px; }
/* Липка панель: підсумок + Оформити */
#mm-cart-sticky {
position: fixed;
left: 0;
bottom: var(--bottomnav-h);
width: 100%;
z-index: 850;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px var(--gap);
background: var(--bg-panel);
border-top: 1px solid var(--border);
box-shadow: 0 -6px 16px rgba(0,0,0,0.35);
}
#mm-cart-sticky-total { display: flex; flex-direction: column; line-height: 1.3; }
#mm-cart-sticky-total span { font-size: 11px; color: var(--text-muted); }
#mm-cart-sticky-total b { font-size: 18px; color: var(--text); }
#mm-cart-sticky-btn {
flex: 0 0 auto;
min-width: 150px;
background: var(--accent-grad);
border: none;
}
/* ============================================================
ФАЗА 6 — Решта сторінок (форми, блог, замовлення, футер тощо)
============================================================ */
.message_error {
background: rgba(231, 76, 60, 0.12);
border: 1px solid var(--no);
color: #ff8a80;
border-radius: var(--radius-sm);
padding: 10px 12px;
font-size: 13px;
margin-bottom: 12px;
}
/* Авторизація / реєстрація / кабінет */
.form, .login_form, .register_form {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.form .button { width: 100%; margin-top: 10px; }
#uLogin { margin-top: 10px; }
#orders_history {
list-style: none;
margin: 10px 0 0;
padding: 0;
}
#orders_history li {
border-bottom: 1px solid var(--border);
padding: 10px 0;
font-size: 14px;
color: var(--text-body);
}
#orders_history a { color: var(--accent); }
/* Сторінка замовлення */
ul#deliveries {
list-style: none;
margin: 0 0 14px;
padding: 0;
}
ul#deliveries li {
display: flex;
align-items: flex-start;
gap: 10px;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
margin-bottom: 10px;
}
ul#deliveries li h3 { margin: 0 0 4px; font-size: 14px; }
ul#deliveries li .description { color: var(--text-muted); font-size: 12px; }
ul#deliveries li .checkbox { flex: 0 0 auto; padding-top: 2px; }
table.order_info {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
table.order_info td {
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
color: var(--text-body);
vertical-align: top;
}
table.order_info td:first-child {
color: var(--text-muted);
width: 40%;
}
/* Блог */
#brands {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
#brands a {
display: inline-flex;
align-items: center;
padding: 7px 12px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 20px;
font-size: 13px;
color: var(--text-body);
}
#brands a img { max-height: 18px; }
#brands a.selected { border-color: var(--accent); color: var(--accent); }
ul#blog { list-style: none; margin: 0; padding: 0; }
ul#blog li {
border-bottom: 1px solid var(--border);
padding: 14px 0;
}
ul#blog .blog_image_mini {
float: left;
width: 90px;
height: 90px;
object-fit: cover;
border-radius: var(--radius-sm);
margin-right: 12px;
}
ul#blog h3 { font-size: 15px; margin: 0 0 4px; }
.blog_date_post { color: var(--text-muted); font-size: 12px; margin: 0 0 6px; }
/* Бренди (sitewide-блок) — карусель */
#all_brands {
display: flex !important;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
gap: 10px;
margin: 10px 0 18px;
padding-bottom: 6px;
}
#all_brands::-webkit-scrollbar { display: none; }
#all_brands a {
flex: 0 0 auto;
scroll-snap-align: start;
display: flex;
align-items: center;
justify-content: center;
min-width: 70px;
height: 44px;
padding: 0 14px;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 12px;
color: var(--text-body);
white-space: nowrap;
}
#all_brands a img { max-height: 28px; max-width: 60px; object-fit: contain; }
/* Статті (блог) */
#mm-blog-wrap { margin-bottom: 20px; }
.mm-blog-list { list-style: none; margin: 0; padding: 0; }
.mm-blog-list li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.mm-blog-list li:last-child { border-bottom: none; }
.mm-blog-image {
flex: 0 0 64px;
width: 64px;
height: 64px;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--bg-input);
display: block;
}
.mm-blog-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-blog-text { flex: 1 1 auto; min-width: 0; }
.mm-blog-text a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
color: var(--text);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.mm-blog-text i {
display: block;
margin-top: 6px;
color: var(--text-muted);
font-size: 12px;
font-style: normal;
}
/* Слайдер та банери */
.slider-wrapper {
margin: 0 0 16px 0 !important;
border-radius: var(--radius);
overflow: hidden;
}
.banner1 { display: block; margin-bottom: 14px; border-radius: var(--radius); overflow: hidden; }
.banner1 img { width: 100%; display: block; }
/* Заголовки секцій b.h2 (Акційні товари / Новинки / Ви дивились тощо) */
b.h2 {
display: block;
color: var(--text);
font-size: 17px;
font-weight: 700;
margin: 18px 0 12px;
}
/* Футер */
#footer_background {
background: var(--bg-panel) !important;
border-top: 1px solid var(--border);
margin-top: 24px;
}
#footer {
max-width: 100% !important;
padding: 0 var(--gap) 16px !important;
}
#ftr-lft, #ftr-mdll, #ftr-mdlr, #ftr-rgt {
color: var(--text-muted) !important;
font-size: 13px;
line-height: 1.45;
width: 100% !important;
float: none !important;
padding: 14px 0 !important;
margin: 0 !important;
box-sizing: border-box;
}
#ftr-lft p { margin: 0 !important; }
#ftr-mdlr {
border-top: 2px solid var(--border);
padding-top: 16px !important;
}
#ftr-lft a, #ftr-mdll a, #ftr-mdlr a { color: var(--accent) !important; }
.site_version { margin-bottom: 10px; }
.site_version a { color: var(--accent) !important; font-weight: 600; }
.scrollTop { display: none !important; }
.mm-footer-title {
display: block;
color: var(--text);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 10px;
text-align: center;
}
#ftr-mdlr ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 10px 16px;
}
#ftr-mdlr li { width: auto; min-width: 0; }
#ftr-mdlr li a {
display: block;
color: var(--text-body) !important;
font-size: 13px;
line-height: 1.4;
}
#ftr-mdlr li.selected a { color: var(--accent) !important; }
#ftr-mdlr li:nth-child(even) a { text-align: right; }
#ftr-mdll { line-height: 1.6; }
#counters { display: flex; align-items: center; gap: 8px; }
/* Особистий кабінет — заголовок секцій */
h2 + h2, h1 + h2 { margin-top: 4px; }
/* Відгуки */
.comment_list { list-style: none; margin: 0; padding: 14px 0 0; }
.comment_list li {
border-bottom: 1px solid var(--border);
padding: 12px 0;
color: var(--text-body);
font-size: 14px;
}
.comment_header { color: var(--text); font-weight: 700; margin-bottom: 4px; font-size: 13px; }
.comment_header i { color: var(--text-muted); font-style: normal; font-weight: 400; margin-left: 6px; }
.add_comment {
display: block;
text-align: center;
padding: 12px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--accent) !important;
font-weight: 700;
margin-top: 14px;
}
.comment_form {
background: var(--bg-input) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
padding: 14px !important;
margin-top: 14px !important;
width: 100% !important;
box-sizing: border-box;
}
.comment_form label { color: var(--text-muted); font-size: 13px; }
.comment_form .input_name,
.comment_form .comment_textarea {
width: 100% !important;
box-sizing: border-box;
}
.comment_form .input_captcha {
width: 120px !important;
height: 46px !important;
flex: 0 0 120px !important;
float: none !important;
margin-top: 0 !important;
box-sizing: border-box;
}
.comment_form .captcha { width: 90px; margin: 8px 0; }
.comment_form .captcha img { width: 100%; border-radius: var(--radius-sm); }
#back_forward {
display: flex;
justify-content: space-between;
gap: 10px;
margin: 16px 0;
font-size: 13px;
}
#back_forward a { color: var(--text-body); }
.mm-nav-badge {
position: absolute;
top: 2px;
right: calc(50% - 22px);
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 8px;
background: var(--accent-2);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 16px;
text-align: center;
}
/* ---------- Плаваючий бар порівняння ---------- */
#mm-compare-bar {
position: fixed;
left: 12px; right: 12px;
bottom: calc(var(--bottomnav-h) + 8px);
z-index: 850;
border-radius: var(--radius);
background: var(--bg-panel);
border: 1px solid var(--border);
box-shadow: var(--shadow);
transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s;
}
#mm-compare-bar.mm-compare-bar--hidden {
transform: translateY(calc(100% + var(--bottomnav-h) + 16px));
opacity: 0;
pointer-events: none;
}
.mm-compare-bar__inner {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; text-decoration: none; color: var(--text);
}
.mm-compare-bar__icon { color: var(--accent); flex-shrink: 0; }
.mm-compare-bar__label { flex: 1; font-size: 14px; font-weight: 600; }
.mm-compare-bar__count {
min-width: 24px; height: 24px; border-radius: 12px;
background: var(--accent, #f38d1f);
color: #fff; font-size: 13px; font-weight: 700;
display: flex; align-items: center; justify-content: center; padding: 0 6px;
}
.mm-compare-bar__arrow { color: var(--text-muted); font-size: 16px; }
body.mm-has-comparebar {
padding-bottom: calc(var(--bottomnav-h) + 56px + env(safe-area-inset-bottom, 0px)) !important;
}
body.mm-has-comparebar #mm-buy-bar { bottom: calc(var(--bottomnav-h) + 60px); }
/* ---------- Toast-повідомлення ---------- */
#mm-toast {
position: fixed;
left: 50%;
bottom: calc(var(--bottomnav-h, 58px) + 16px);
transform: translateX(-50%) translateY(14px);
z-index: 9500;
background: var(--bg-panel, #1a1d24);
border: 1px solid rgba(243, 141, 31, 0.5);
border-left: 3px solid var(--accent, #f38d1f);
border-radius: 50px;
padding: 10px 22px;
font-size: 14px;
font-weight: 500;
color: var(--text, #fff);
white-space: nowrap;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
max-width: calc(100vw - 32px);
}
#mm-toast.mm-toast--visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.mm-toast-check {
color: var(--accent, #f38d1f);
font-weight: 700;
margin-right: 4px;
}
#mm-toast a {
color: var(--accent, #f38d1f);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: rgba(243, 141, 31, 0.4);
}
/* ---------- User menu в catalog panel ---------- */
#mm-user-menu {
padding: 12px var(--gap, 12px) 16px;
margin-top: 10px;
border-top: 1px solid var(--border, #2a2d36);
}
.mm-user-menu__link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
font-size: 14px;
font-weight: 600;
color: var(--text, #fff);
text-decoration: none;
}
.mm-user-menu__link--login { color: var(--accent, #f38d1f); }
.mm-user-menu__link--register { color: var(--text-muted, #a0a5b1); font-weight: 400; }
.mm-user-menu__link svg { flex-shrink: 0; }
/* ---------- «Обране» — сердечка ---------- */
/* Група дій (серце + порівняння) на сторінці товару */
.mm-rate-actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
/* Іконка серця поряд з порівнянням */
.mm-fav-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border: 1px solid var(--border, #2a2d36);
border-radius: var(--radius-sm, 8px); background: var(--bg-panel, #1a1d24);
color: var(--text-muted, #a0a5b1); cursor: pointer; padding: 0;
-webkit-tap-highlight-color: transparent;
}
.mm-fav-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mm-fav-icon.active { color: var(--accent-2, #ed192d); border-color: var(--accent-2, #ed192d); }
.mm-fav-icon.active svg { fill: var(--accent-2, #ed192d); stroke: var(--accent-2, #ed192d); }
/* Overlay-сердечко на картці каталогу */
.products .product .image { position: relative; }
.mm-fav-overlay {
position: absolute; bottom: 8px; right: 8px; z-index: 3;
width: 34px; height: 34px; border: none; border-radius: 50%;
background: rgba(0,0,0,0.45); color: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center; padding: 0;
-webkit-tap-highlight-color: transparent;
}
.mm-fav-overlay svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mm-fav-overlay.active { background: rgba(237,25,45,0.15); color: var(--accent-2, #ed192d); }
.mm-fav-overlay.active svg { fill: var(--accent-2, #ed192d); stroke: var(--accent-2, #ed192d); }
/* ============================================================
Сторінка контактів + форма зворотнього зв'язку
============================================================ */
/* Блок з контактною інформацією з CMS */
.mm-contacts-body {
margin-bottom: 24px;
padding: 20px;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.mm-contacts-body p,
.mm-contacts-body td,
.mm-contacts-body li { color: var(--text-body) !important; font-size: 15px; line-height: 1.7; }
.mm-contacts-body a { color: var(--accent) !important; text-decoration: none; }
.mm-contacts-body strong, .mm-contacts-body b { color: var(--text) !important; }
.mm-contacts-body iframe {
display: block !important;
width: 100% !important;
min-height: 220px;
border: none;
border-radius: var(--radius-sm);
margin-top: 16px;
}
/* Клікабельні телефони */
.mm-phone-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--accent) !important;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.mm-phone-link::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.61 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.6a16 16 0 0 0 6 6l.96-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.61 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.6a16 16 0 0 0 6 6l.96-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
flex-shrink: 0;
}
/* Заголовок секції */
.mm-section-title {
font-size: 18px;
font-weight: 700;
color: var(--text);
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
/* Форма зворотнього зв'язку — скидання старих стилів */
.mm-feedback-form,
.feedback_form {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
/* Лейбли */
.mm-field-label {
display: block;
font-size: 13px;
color: var(--text-muted);
margin: 0 0 6px;
}
.mm-feedback-form label.mm-field-label + input,
.mm-feedback-form label.mm-field-label + textarea { margin-bottom: 16px; }
/* Textarea */
.mm-feedback-form textarea {
min-height: 130px;
resize: vertical;
margin-bottom: 16px;
}
/* Кнопка «Надіслати» */
.mm-feedback-submit,
.feedback_form .button {
display: block !important;
float: none !important;
position: static !important;
box-sizing: border-box !important;
width: 100% !important;
height: auto !important;
min-height: 50px !important;
margin: 16px 0 0 !important;
font-size: 16px !important;
padding: 14px 16px !important;
line-height: 1.2 !important;
vertical-align: middle !important;
clear: both !important;
}
/* Рядок капчі */
.mm-captcha-row {
display: flex;
align-items: flex-start;
gap: 10px;
}
.mm-captcha-img {
flex: 0 0 130px;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--border);
}
.mm-captcha-img img {
display: block;
width: 130px;
height: 46px;
object-fit: fill;
}
.mm-captcha-input {
flex: 0 0 120px !important;
width: 120px !important;
height: 46px !important;
float: none !important;
box-sizing: border-box !important;
padding: 0 10px !important;
font-size: 14px !important;
}
/* Повідомлення про успішне надсилання */
.mm-feedback-success {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 20px;
background: rgba(46, 204, 113, 0.08);
border: 1px solid var(--ok);
border-radius: var(--radius);
color: var(--text-body);
}
.mm-feedback-success svg { width: 32px; height: 32px; color: var(--ok); flex-shrink: 0; margin-top: 2px; }
.mm-feedback-success p { margin: 0; font-size: 15px; line-height: 1.6; }
/* ===== Auth / Register / Cabinet ===== */
.mm-auth-card {
background: #1a1d24;
border: 1px solid #323232;
border-radius: 12px;
padding: 20px;
margin-top: 10px;
box-sizing: border-box;
}
.mm-auth-card h1 { text-align: center; color: #fff; margin: 0 0 20px; font-size: 22px; }
.mm-auth-col-title {
color: #f38d1f;
font-size: 16px;
margin: 0 0 14px;
border-bottom: 1px solid #323232;
padding-bottom: 8px;
}
.mm-auth-card label { display: block; margin-bottom: 6px; color: #a0a5b1; font-size: 13px; }
.mm-auth-card label sup { color: #f38d1f; }
.mm-auth-card .mm-fg { margin-bottom: 14px; }
.mm-auth-card input[type="text"],
.mm-auth-card input[type="password"] {
width: 100% !important;
background: #111318 !important;
border: 1px solid #323232 !important;
color: #fff !important;
padding: 10px 14px !important;
border-radius: 6px !important;
box-sizing: border-box;
font-size: 14px !important;
height: auto !important;
margin: 0 !important;
float: none !important;
}
.mm-auth-card input[type="text"]:focus,
.mm-auth-card input[type="password"]:focus { border-color: #f38d1f !important; outline: none; }
.mm-auth-btn {
display: block !important;
width: 100% !important;
background: linear-gradient(135deg, #f38d1f 0%, #ed192d 100%);
color: #fff !important;
border: none;
padding: 14px 0 !important;
font-size: 16px !important;
font-weight: bold;
text-transform: uppercase;
border-radius: 8px;
cursor: pointer;
margin-top: 16px !important;
text-align: center;
box-sizing: border-box;
height: auto !important;
line-height: 1.2 !important;
float: none !important;
}
.mm-auth-register-link {
display: block;
width: 100%;
text-align: center;
padding: 12px 0;
border: 1px solid #444;
color: #ccc;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
margin-top: 14px;
box-sizing: border-box;
}
.mm-auth-error {
background: rgba(237,25,45,0.1);
border: 1px solid #ed192d;
color: #ed192d;
padding: 12px;
border-radius: 6px;
margin-bottom: 16px;
text-align: center;
font-size: 14px;
}
.mm-auth-links { text-align: center; margin-top: 20px; font-size: 13px; color: #888; }
.mm-auth-links a { color: #f38d1f; text-decoration: none; font-weight: bold; }
.mm-forgot-pwd { float: right; color: #f38d1f; font-size: 12px; text-decoration: none; }
.mm-auth-logout {
display: block;
width: 100%;
text-align: center;
padding: 12px 0;
border: 1px solid #ed192d;
color: #ed192d !important;
border-radius: 6px;
text-decoration: none !important;
font-weight: bold;
margin-top: 14px;
box-sizing: border-box;
}
/* Статус-блок */
.mm-user-status-block { display: flex; gap: 10px; margin-bottom: 20px; }
.mm-user-status-item {
flex: 1;
background: #111318;
border: 1px solid #323232;
padding: 12px 8px;
border-radius: 8px;
text-align: center;
font-size: 12px;
color: #a0a5b1;
}
.mm-user-status-item span { display: block; color: #f38d1f; font-size: 18px; font-weight: bold; margin-top: 4px; }
/* Зміна пароля */
#mm-password-group { display: none; margin-top: 8px; }
/* Замовлення — картки */
.mm-orders-section { margin-top: 30px; }
.mm-orders-section h3 {
color: #f38d1f;
border-bottom: 1px solid #323232;
padding-bottom: 8px;
text-align: center;
font-size: 16px;
margin: 0 0 12px;
}
.mm-order-card {
background: #111318;
border: 1px solid #2a2d36;
border-radius: 8px;
padding: 12px;
margin-top: 10px;
font-size: 13px;
color: #c5cbd4;
}
.mm-order-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mm-order-row:last-child { margin-bottom: 0; }
.mm-order-row a { color: #fff; text-decoration: underline; }
.mm-status-badge { padding: 3px 7px; border-radius: 4px; font-size: 11px; font-weight: bold; }
.mm-status-0 { background: #333; color: #fff; }
.mm-status-1 { background: rgba(243,141,31,0.2); color: #f38d1f; border: 1px solid #f38d1f; }
.mm-status-2 { background: rgba(40,167,69,0.2); color: #28a745; border: 1px solid #28a745; }
.mm-btn-reorder {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
background: #f38d1f;
color: #fff !important;
text-decoration: none !important;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
}
/* Капча в реєстрації */
.mm-captcha-reg { display: flex; align-items: flex-start; gap: 10px; }
.mm-captcha-reg__img { flex: 0 0 120px; overflow: hidden; border: 1px solid #2a2d34; border-radius: 6px; }
.mm-captcha-reg__img img { display: block; width: 120px; height: 46px; object-fit: fill; }
.mm-captcha-reg input[type="text"] {
flex: 0 0 120px !important;
width: 120px !important;
height: 46px !important;
margin-top: 0 !important;
padding: 0 10px !important;
font-size: 14px !important;
}
/* ===== Cart / Order ===== */
.mm-cart-section {
background: #1a1d24;
border: 1px solid #323232;
border-radius: 12px;
padding: 16px;
margin-bottom: 14px;
box-sizing: border-box;
}
.mm-cart-section h2 {
display: flex; align-items: center; gap: 10px;
color: #fff; font-size: 17px; margin: 0 0 14px;
}
.mm-step-num {
width: 28px; height: 28px; border-radius: 50%;
background: #f38d1f; color: #fff;
font-size: 14px; font-weight: bold;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.mm-cart-section label { display: block; color: #a0a5b1; font-size: 13px; margin: 0 0 5px; }
.mm-cart-section label sup { color: #f38d1f; }
.mm-cart-fg { margin-bottom: 12px; }
.mm-cart-section input[type="text"],
.mm-cart-section input[type="email"],
.mm-cart-section select,
.mm-cart-section textarea {
width: 100% !important; background: #111318 !important;
border: 1px solid #323232 !important; color: #fff !important;
padding: 10px 12px !important; border-radius: 6px !important;
box-sizing: border-box; font-size: 14px !important;
height: auto !important; margin: 0 !important; float: none !important;
}
.mm-cart-section input:focus, .mm-cart-section select:focus, .mm-cart-section textarea:focus {
border-color: #f38d1f !important; outline: none;
}
/* Товари в кошику */
.mm-cart-item {
display: flex; align-items: center; gap: 10px;
border-bottom: 1px solid #232730; padding: 10px 0;
}
.mm-cart-item:last-child { border-bottom: none; }
.mm-cart-item__img { flex: 0 0 60px; }
.mm-cart-item__img img { width: 60px; height: 60px; object-fit: contain; border-radius: 6px; background: #fff; padding: 4px; box-sizing: border-box; }
.mm-cart-item__info { flex: 1; min-width: 0; }
.mm-cart-item__name { color: #f38d1f; font-size: 13px; font-weight: 500; text-decoration: none; display: block; margin-bottom: 4px; }
.mm-cart-item__variant { color: #888; font-size: 12px; }
.mm-cart-item__row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.mm-cart-qty {
display: flex; align-items: center;
background: #2a2e39; border-radius: 6px; border: 1px solid #444;
overflow: hidden; flex: 0 0 auto; width: fit-content;
}
.mm-cart-qty button { background: transparent; border: none; color: #aaa; width: 28px; height: 28px; cursor: pointer; font-size: 15px; line-height: 1; }
.mm-cart-qty input { width: 28px !important; height: 28px !important; background: transparent !important; border: none !important; color: #fff !important; text-align: center; font-size: 13px; padding: 0 !important; box-sizing: content-box !important; }
.mm-cart-item__price { color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.mm-cart-item__remove { color: #ff4d4f; text-decoration: none; font-size: 18px; margin-left: auto; flex-shrink: 0; }
/* Оплата */
.mm-payment-option {
display: flex !important; align-items: center; justify-content: flex-start; gap: 12px;
padding: 14px 16px; background: #1a1d24;
border: 1px solid #333; border-top: none;
cursor: pointer; position: relative;
margin: 0 !important; color: #fff !important; font-size: 14px !important;
}
.mm-payment-option:first-child { border-top: 1px solid #333; border-radius: 8px 8px 0 0; }
.mm-payment-option:last-child { border-radius: 0 0 8px 8px; }
.mm-payment-option:only-child { border-radius: 8px; border-top: 1px solid #333; }
.mm-payment-option.active { background: rgba(243,141,31,0.08); border-color: #f38d1f !important; z-index: 1; }
.mm-payment-option__name { flex: 1; color: #fff; font-size: 14px; font-weight: 500; line-height: 1.3; }
.mm-payment-option__check {
width: 20px; height: 20px; border-radius: 50%;
border: 2px solid #555; flex-shrink: 0; box-sizing: border-box;
background: transparent; transition: all 0.2s;
}
.mm-payment-option.active .mm-payment-option__check {
border-color: #f38d1f;
background: radial-gradient(circle at center, #f38d1f 5px, transparent 5px);
}
/* Доставка */
.mm-delivery-option {
display: flex; align-items: center; gap: 12px;
padding: 12px; background: #1a1d24;
border: 1px solid #333; border-radius: 8px;
cursor: pointer; margin-bottom: 8px;
}
.mm-delivery-option.active { border-color: #f38d1f; }
.mm-delivery-option.active-open { border-radius: 8px 8px 0 0; margin-bottom: 0; }
.mm-delivery-option__info { flex: 1; }
.mm-delivery-option__name { color: #fff; font-weight: bold; font-size: 14px; }
.mm-delivery-option__price { color: #888; font-size: 12px; margin-top: 2px; }
.mm-delivery-details {
display: none;
background: #20242c; border: 1px solid #333; border-top: none;
border-radius: 0 0 8px 8px; padding: 14px;
margin-bottom: 8px;
}
.mm-np-sub { display: flex; gap: 14px; margin-bottom: 12px; font-size: 14px; color: #ccc; flex-wrap: wrap; }
.mm-np-sub label { cursor: pointer; display: flex; align-items: center; gap: 5px; }
/* Підсумок */
.mm-cart-totals { margin-top: 10px; border-top: 1px solid #333; padding-top: 10px; }
.mm-cart-totals-row {
display: flex; justify-content: space-between;
font-size: 13px; color: #c5cbd4; margin-bottom: 8px;
}
.mm-cart-totals-row.grand { font-size: 16px; font-weight: bold; color: #fff; border-top: 1px solid #333; padding-top: 8px; margin-top: 4px; }
/* Купон */
.mm-coupon-row { display: flex; gap: 8px; margin-top: 8px; }
.mm-coupon-row input { flex: 1; }
.mm-coupon-row button {
flex: 0 0 auto; background: #2a2e39; border: 1px solid #444;
color: #fff; padding: 0 14px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
/* Кнопка «Оформити» */
.mm-btn-checkout {
display: block !important; width: 100% !important;
background: linear-gradient(135deg, #f38d1f 0%, #ed192d 100%);
color: #fff !important; border: none;
padding: 15px 0 !important; font-size: 16px !important; font-weight: bold;
text-transform: uppercase; border-radius: 8px; cursor: pointer;
margin-top: 14px !important; text-align: center;
box-sizing: border-box; height: auto !important; float: none !important;
}
/* Select2 темна тема */
.select2-container--default .select2-selection--single {
background: #111318 !important; border: 1px solid #323232 !important;
height: 40px !important; border-radius: 6px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #fff !important; line-height: 40px !important; padding-left: 12px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 40px !important;
}
.select2-container--default .select2-selection__placeholder { color: #888 !important; }
.select2-dropdown { background: #1a1d24 !important; border: 1px solid #323232 !important; }
.select2-container--default .select2-search--dropdown .select2-search__field {
background: #111318 !important; border: 1px solid #323232 !important; color: #fff !important;
}
.select2-container--default .select2-results__option { color: #c5cbd4 !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: #f38d1f !important; color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background: #2a2e39 !important;
}
/* Сторінка замовлення — успіх */
.mm-order-success {
text-align: center; padding: 24px 16px;
background: #1a1d24; border: 1px solid #323232;
border-radius: 12px; margin-bottom: 14px;
}
.mm-order-checkmark {
width: 56px; height: 56px; border-radius: 50%;
background: #4caf50; display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px; box-shadow: 0 0 20px rgba(76,175,80,0.4);
}
.mm-order-checkmark svg { color: #fff; }
.mm-order-badge {
display: inline-block; padding: 5px 12px; border-radius: 20px;
font-size: 12px; font-weight: bold; text-transform: uppercase; margin: 4px 3px;
}
.mm-badge-yellow { background: rgba(243,141,31,0.1); color: #f38d1f; border: 1px solid #f38d1f; }
.mm-badge-green { background: rgba(76,175,80,0.1); color: #4caf50; border: 1px solid #4caf50; }
.mm-order-info-row {
display: flex; gap: 10px; align-items: flex-start;
margin-bottom: 12px; font-size: 14px; color: #e0e0e0;
}
.mm-order-info-row svg { color: #f38d1f; flex-shrink: 0; margin-top: 2px; }
.mm-info-label { display: block; color: #888; font-size: 11px; margin-bottom: 2px; }
/* Нова секція sticky поверх старої */
body.mm-has-cartbar #mm-cart-sticky {
bottom: var(--bottomnav-h, 58px);
}