:root {
--mt-primary-50: #eef1f8;
--mt-primary-100: #d3dbec;
--mt-primary-200: #a8b6d8;
--mt-primary-300: #7d92c5;
--mt-primary-400: #4f5f99;
--mt-primary-500: #0c296a;
--mt-primary-600: #0a2259;
--mt-primary-700: #081b47;
--mt-primary-800: #061436;
--mt-primary-900: #040d24;
--mt-primary: var(--mt-primary-500);
--mt-primary-hover: var(--mt-primary-400);
--mt-primary-active: var(--mt-primary-600);
--mt-primary-light: var(--mt-primary-100);
--mt-accent-50: #eef8ed;
--mt-accent-100: #d4edd2;
--mt-accent-200: #a9dba5;
--mt-accent-300: #7fca79;
--mt-accent-400: #64be5d;
--mt-accent-500: #4ab246;
--mt-accent-600: #3d9339;
--mt-accent-700: #31752e;
--mt-accent-800: #245622;
--mt-accent-900: #183a17;
--mt-accent: var(--mt-accent-500);
--mt-accent-hover: var(--mt-accent-600);
--mt-accent-active: var(--mt-accent-700);
--mt-accent-light: var(--mt-accent-100);
--mt-neutral-50: #f8f9fb;
--mt-neutral-100: #f3f3f3;
--mt-neutral-200: #e5e9ef;
--mt-neutral-300: #cbd2dc;
--mt-neutral-400: #9da4ae;
--mt-neutral-500: #7c838d;
--mt-neutral-600: #5c6168;
--mt-neutral-700: #3f444a;
--mt-neutral-800: #23282c;
--mt-neutral-900: #121715;
--mt-success: #4ab246;
--mt-success-light: #e4f4e3;
--mt-success-dark: #3d9339;
--mt-warning: #ffc445;
--mt-warning-light: #fff4dc;
--mt-warning-dark: #d19b18;
--mt-error: #d51f1f;
--mt-error-light: #ffeef5;
--mt-error-dark: #a81818;
--mt-error-border: #fe4d97;
--mt-info: #357af0;
--mt-info-light: #e3edfd;
--mt-info-dark: #2361c8;
--mt-white: #ffffff;
--mt-black: #121715;
--mt-body-bg: #f3f3f3;
--mt-body-color: var(--mt-neutral-400);
--mt-surface: #ffffff;
--mt-surface-muted: #f3f3f3;
--mt-table-hover: #f8fbfd;
--mt-text-primary: #121715;
--mt-text-secondary: var(--mt-neutral-600);
--mt-text-muted: var(--mt-neutral-400);
--mt-text-inverse: var(--mt-white);
--mt-border-color: #f3f3f3;
--mt-border-color-dark: #e5e9ef;
--mt-border-dashed: 1px dashed #f3f3f3;
--mt-link-color: #357af0;
--mt-link-hover: #2361c8;
--mt-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--mt-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
--mt-text-xs: 0.75rem;
--mt-text-sm: 0.875rem;
--mt-text-base: 1rem;
--mt-text-lg: 1.125rem;
--mt-text-xl: 1.25rem;
--mt-text-2xl: 1.5rem;
--mt-text-3xl: 1.875rem;
--mt-text-4xl: 2rem;
--mt-font-light: 300;
--mt-font-normal: 400;
--mt-font-medium: 500;
--mt-font-semibold: 600;
--mt-font-bold: 700;
--mt-font-extrabold: 800;
--mt-leading-tight: 1.25;
--mt-leading-snug: 1.375;
--mt-leading-normal: 1.5;
--mt-leading-relaxed: 1.625;
--mt-space-1: 0.25rem;
--mt-space-2: 0.5rem;
--mt-space-3: 0.75rem;
--mt-space-4: 1rem;
--mt-space-5: 1.25rem;
--mt-space-6: 1.5rem;
--mt-space-8: 2rem;
--mt-space-10: 2.5rem;
--mt-space-12: 3rem;
--mt-space-16: 4rem;
--mt-radius-xs: 0.25rem;
--mt-radius-sm: 0.25rem;
--mt-radius-base: 0.5rem;
--mt-radius-md: 0.5rem;
--mt-radius-lg: 0.75rem;
--mt-radius-xl: 1rem;
--mt-radius-full: 9999px;
--mt-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
--mt-shadow-base: 0 2px 4px rgba(40, 41, 61, 0.04), 0 4px 16px rgba(112, 114, 122, 0.02);
--mt-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);
--mt-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--mt-transition-fast: 0.15s ease-out;
--mt-transition-base: 0.3s ease-out;
--mt-transition-slow: 0.3s ease-out;
--mt-z-dropdown: 100;
--mt-z-sticky: 200;
--mt-z-fixed: 300;
--mt-z-modal-backdrop: 400;
--mt-z-modal: 500;
--mt-z-tooltip: 700;
--mt-container-max: 1600px;
--mt-container-pad: 0.75rem;
--mt-grid-gap: 1rem;
--mt-section-gap: 1.5rem;
--mt-header-height: 142px;
--mt-header-height-mobile: 108px;
--mt-sidebar-width: 320px;
--mt-card-radius: 0.75rem;
--mt-card-pad: 1rem;
--mt-card-pad-lg: 1.5rem;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--mt-font-family);
font-size: var(--mt-text-base);
font-weight: var(--mt-font-normal);
line-height: var(--mt-leading-normal);
color: var(--mt-body-color);
background-color: var(--mt-body-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: var(--mt-space-4);
font-weight: var(--mt-font-semibold);
line-height: var(--mt-leading-tight);
color: var(--mt-text-primary);
}
h1 { font-size: var(--mt-text-4xl); }
h2 { font-size: var(--mt-text-3xl); }
h3 { font-size: var(--mt-text-2xl); }
h4 { font-size: var(--mt-text-xl); }
h5 { font-size: var(--mt-text-lg); }
h6 { font-size: var(--mt-text-base); }
p {
margin-top: 0;
margin-bottom: var(--mt-space-4);
}
a {
color: var(--mt-link-color);
text-decoration: none;
transition: color var(--mt-transition-fast);
}
a:hover,
a:focus {
color: var(--mt-link-hover);
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
ul, ol {
margin-top: 0;
margin-bottom: var(--mt-space-4);
padding-left: var(--mt-space-6);
}
.mt-container {
width: 100%;
max-width: var(--mt-container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--mt-container-pad);
padding-right: var(--mt-container-pad);
}
.mt-row {
display: flex;
flex-wrap: wrap;
margin-left: calc(var(--mt-space-4) * -0.5);
margin-right: calc(var(--mt-space-4) * -0.5);
}
.mt-col {
flex: 1;
padding-left: calc(var(--mt-space-4) * 0.5);
padding-right: calc(var(--mt-space-4) * 0.5);
}
.mt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mt-space-2);
padding: var(--mt-space-3) var(--mt-space-6);
font-family: inherit;
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
line-height: 1;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border: 1px solid transparent;
border-radius: var(--mt-radius-base);
transition: all var(--mt-transition-fast);
}
.mt-btn:focus {
outline: none;
box-shadow: 0 0 0 3px var(--mt-primary-light);
}
.mt-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.mt-btn-primary {
color: var(--mt-white);
background-color: var(--mt-primary);
border-color: var(--mt-primary);
}
.mt-btn-primary:hover {
color: var(--mt-white);
background-color: var(--mt-primary-hover);
border-color: var(--mt-primary-hover);
}
.mt-btn-primary:active {
background-color: var(--mt-primary-active);
border-color: var(--mt-primary-active);
}
.mt-btn-secondary {
color: var(--mt-white);
background-color: var(--mt-accent);
border-color: var(--mt-accent);
}
.mt-btn-secondary:hover {
color: var(--mt-white);
background-color: var(--mt-accent-hover);
border-color: var(--mt-accent-hover);
}
.mt-btn-outline {
color: var(--mt-primary);
background-color: transparent;
border-color: var(--mt-primary);
}
.mt-btn-outline:hover {
color: var(--mt-white);
background-color: var(--mt-primary);
}
.mt-btn-ghost {
color: var(--mt-text-secondary);
background-color: transparent;
border-color: transparent;
}
.mt-btn-ghost:hover {
color: var(--mt-text-primary);
background-color: var(--mt-neutral-100);
}
.mt-btn-sm {
padding: var(--mt-space-2) var(--mt-space-4);
font-size: var(--mt-text-xs);
}
.mt-btn-lg {
padding: var(--mt-space-4) var(--mt-space-8);
font-size: var(--mt-text-base);
}
.mt-btn-icon {
padding: var(--mt-space-3);
}
.mt-btn-icon svg {
width: 20px;
height: 20px;
}
.mt-form-group {
margin-bottom: var(--mt-space-4);
}
.mt-form-label {
display: block;
margin-bottom: var(--mt-space-2);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-text-primary);
}
.mt-form-input,
.mt-form-select,
.mt-form-textarea {
display: block;
width: 100%;
padding: var(--mt-space-3) var(--mt-space-4);
font-family: inherit;
font-size: var(--mt-text-base);
line-height: var(--mt-leading-normal);
color: var(--mt-text-primary);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-base);
transition: border-color var(--mt-transition-fast), box-shadow var(--mt-transition-fast);
}
.mt-form-input:focus,
.mt-form-select:focus,
.mt-form-textarea:focus {
outline: none;
border-color: var(--mt-primary);
box-shadow: 0 0 0 3px var(--mt-primary-light);
}
.mt-form-input::placeholder {
color: var(--mt-text-muted);
}
.mt-form-input.is-invalid {
border-color: var(--mt-error);
}
.mt-form-input.is-invalid:focus {
box-shadow: 0 0 0 3px var(--mt-error-light);
}
.mt-form-error {
margin-top: var(--mt-space-1);
font-size: var(--mt-text-sm);
color: var(--mt-error);
}
.mt-card {
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
overflow: hidden;
transition: box-shadow var(--mt-transition-base);
}
.mt-card:hover {
box-shadow: var(--mt-shadow-lg);
}
.mt-card-body {
padding: var(--mt-space-4);
}
.mt-card-title {
margin-bottom: var(--mt-space-2);
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-semibold);
}
.mt-badge {
display: inline-flex;
align-items: center;
padding: var(--mt-space-1) var(--mt-space-2);
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-medium);
line-height: 1;
border-radius: var(--mt-radius-sm);
}
.mt-badge-primary {
color: var(--mt-primary-700);
background-color: var(--mt-primary-light);
}
.mt-badge-accent {
color: var(--mt-accent-700);
background-color: var(--mt-accent-light);
}
.mt-badge-success {
color: var(--mt-success-dark);
background-color: var(--mt-success-light);
}
.mt-badge-warning {
color: var(--mt-warning-dark);
background-color: var(--mt-warning-light);
}
.mt-badge-error {
color: var(--mt-error-dark);
background-color: var(--mt-error-light);
}
.mt-sticker {
display: inline-flex;
padding: var(--mt-space-1) var(--mt-space-2);
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: var(--mt-radius-sm);
}
.mt-sticker-new {
color: var(--mt-white);
background-color: var(--mt-primary);
}
.mt-sticker-sale {
color: var(--mt-white);
background-color: var(--mt-error);
}
.mt-sticker-hit {
color: var(--mt-white);
background-color: var(--mt-accent);
}
.mt-sticker-bestseller {
color: var(--mt-warning-dark);
background-color: var(--mt-warning-light);
}
.mt-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--mt-space-2);
padding: var(--mt-space-4) 0;
margin: 0;
list-style: none;
font-size: var(--mt-text-sm);
}
.mt-breadcrumb-item {
display: flex;
align-items: center;
}
.mt-breadcrumb-item + .mt-breadcrumb-item::before {
content: '/';
margin-right: var(--mt-space-2);
color: var(--mt-text-muted);
}
.mt-breadcrumb-item a {
color: var(--mt-text-secondary);
}
.mt-breadcrumb-item a:hover {
color: var(--mt-primary);
}
.mt-breadcrumb-item.active {
color: var(--mt-text-muted);
}
.mt-pagination {
display: flex;
align-items: center;
gap: var(--mt-space-1);
list-style: none;
padding: 0;
margin: 0;
}
.mt-pagination-link {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: var(--mt-space-2);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-text-secondary);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-base);
transition: all var(--mt-transition-fast);
}
.mt-pagination-link:hover {
color: var(--mt-primary);
border-color: var(--mt-primary);
}
.mt-pagination-link.active {
color: var(--mt-white);
background-color: var(--mt-primary);
border-color: var(--mt-primary);
}
.mt-alert {
padding: var(--mt-space-4);
border-radius: var(--mt-radius-base);
font-size: var(--mt-text-sm);
}
.mt-alert-success {
color: var(--mt-success-dark);
background-color: var(--mt-success-light);
}
.mt-alert-warning {
color: var(--mt-warning-dark);
background-color: var(--mt-warning-light);
}
.mt-alert-error {
color: var(--mt-error-dark);
background-color: var(--mt-error-light);
}
.mt-alert-info {
color: var(--mt-info-dark);
background-color: var(--mt-info-light);
}
.mt-text-center { text-align: center; }
.mt-text-left { text-align: left; }
.mt-text-right { text-align: right; }
.mt-text-primary { color: var(--mt-text-primary); }
.mt-text-secondary { color: var(--mt-text-secondary); }
.mt-text-muted { color: var(--mt-text-muted); }
.mt-text-success { color: var(--mt-success); }
.mt-text-error { color: var(--mt-error); }
.mt-font-medium { font-weight: var(--mt-font-medium); }
.mt-font-semibold { font-weight: var(--mt-font-semibold); }
.mt-font-bold { font-weight: var(--mt-font-bold); }
.mt-hidden { display: none !important; }
.mt-block { display: block; }
.mt-inline { display: inline; }
.mt-inline-block { display: inline-block; }
.mt-flex { display: flex; }
.mt-inline-flex { display: inline-flex; }
.mt-grid { display: grid; }
.mt-items-center { align-items: center; }
.mt-items-start { align-items: flex-start; }
.mt-items-end { align-items: flex-end; }
.mt-justify-center { justify-content: center; }
.mt-justify-between { justify-content: space-between; }
.mt-justify-end { justify-content: flex-end; }
.mt-flex-wrap { flex-wrap: wrap; }
.mt-gap-1 { gap: var(--mt-space-1); }
.mt-gap-2 { gap: var(--mt-space-2); }
.mt-gap-4 { gap: var(--mt-space-4); }
.mt-gap-6 { gap: var(--mt-space-6); }
.mt-m-0 { margin: 0; }
.mt-mt-4 { margin-top: var(--mt-space-4); }
.mt-mb-4 { margin-bottom: var(--mt-space-4); }
.mt-my-4 { margin-top: var(--mt-space-4); margin-bottom: var(--mt-space-4); }
.mt-mx-auto { margin-left: auto; margin-right: auto; }
.mt-p-0 { padding: 0; }
.mt-p-4 { padding: var(--mt-space-4); }
.mt-py-4 { padding-top: var(--mt-space-4); padding-bottom: var(--mt-space-4); }
.mt-px-4 { padding-left: var(--mt-space-4); padding-right: var(--mt-space-4); }
.mt-w-full { width: 100%; }
.mt-w-auto { width: auto; }
@media (max-width: 767px) {
:root {
--mt-header-height: var(--mt-header-height-mobile);
}
h1 { font-size: var(--mt-text-2xl); }
h2 { font-size: var(--mt-text-xl); }
h3 { font-size: var(--mt-text-lg); }
.mt-container {
padding-left: var(--mt-space-4);
padding-right: var(--mt-space-4);
}
.mt-hide-mobile {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.mt-hide-mobile {
display: none !important;
}
}
@media (min-width: 1024px) {
.mt-hide-desktop {
display: none !important;
}
}
@media (min-width: 1024px) {
.mt-container {
padding-left: var(--mt-container-pad);
padding-right: var(--mt-container-pad);
}
}
.mt-header {
position: sticky;
top: 0;
z-index: var(--mt-z-sticky);
background-color: var(--mt-surface);
border-bottom: 1px solid var(--mt-border-color);
box-shadow: var(--mt-shadow-sm);
}
.mt-header-inner {
display: flex;
align-items: center;
gap: var(--mt-space-4);
height: var(--mt-header-height);
}
.mt-header-menu-toggle {
display: flex;
align-items: center;
justify-content: center;
padding: var(--mt-space-2);
color: var(--mt-text-primary);
background: none;
border: none;
cursor: pointer;
}
.mt-header-logo {
flex-shrink: 0;
}
.mt-logo-img {
max-height: 52px;
width: auto;
}
.mt-logo-text {
font-size: var(--mt-text-xl);
font-weight: var(--mt-font-bold);
color: var(--mt-text-primary);
}
.mt-logo-text:hover {
color: var(--mt-primary);
}
.mt-header-catalog {
flex-shrink: 0;
}
.mt-header-catalog-btn {
padding: var(--mt-space-3) var(--mt-space-5);
}
.mt-header-search {
flex: 1;
max-width: 500px;
}
.mt-search-form {
display: flex;
position: relative;
}
.mt-search-input {
flex: 1;
padding: var(--mt-space-3) var(--mt-space-4);
padding-right: 50px;
font-size: var(--mt-text-sm);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-full);
transition: border-color var(--mt-transition-fast), box-shadow var(--mt-transition-fast);
}
.mt-search-input:focus {
outline: none;
border-color: var(--mt-primary);
box-shadow: 0 0 0 3px var(--mt-primary-light);
}
.mt-search-btn {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--mt-white);
background-color: var(--mt-primary);
border: none;
border-radius: var(--mt-radius-full);
cursor: pointer;
transition: background-color var(--mt-transition-fast);
}
.mt-search-btn:hover {
background-color: var(--mt-primary-hover);
}
.mt-header-phone {
flex-shrink: 0;
}
.mt-phone-link {
display: flex;
align-items: center;
gap: var(--mt-space-2);
font-weight: var(--mt-font-medium);
color: var(--mt-text-primary);
}
.mt-phone-link:hover {
color: var(--mt-primary);
}
.mt-header-language {
position: relative;
flex-shrink: 0;
}
.mt-lang-btn {
display: flex;
align-items: center;
gap: var(--mt-space-2);
padding: var(--mt-space-2) var(--mt-space-3);
color: var(--mt-text-secondary);
background: none;
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-base);
cursor: pointer;
transition: all var(--mt-transition-fast);
}
.mt-lang-btn:hover {
color: var(--mt-primary);
border-color: var(--mt-primary);
background-color: var(--mt-primary-50);
}
.mt-lang-current {
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
}
.mt-language-dropdown {
min-width: 140px;
}
.mt-lang-item {
display: flex;
align-items: center;
gap: var(--mt-space-2);
padding: var(--mt-space-2) var(--mt-space-3);
color: var(--mt-text-secondary);
text-decoration: none;
transition: background-color var(--mt-transition-fast);
}
.mt-lang-item:hover {
background-color: var(--mt-surface-muted);
color: var(--mt-text-primary);
}
.mt-lang-item.active {
color: var(--mt-primary);
font-weight: var(--mt-font-medium);
}
.mt-lang-item img {
width: 16px;
height: 11px;
border-radius: 2px;
object-fit: cover;
}
.mt-lang-btn img {
width: 18px;
height: 13px;
border-radius: 2px;
object-fit: cover;
}
.mt-header-actions {
display: flex;
align-items: center;
gap: var(--mt-space-2);
flex-shrink: 0;
}
.mt-header-action-btn {
position: relative;
display: flex;
align-items: center;
gap: var(--mt-space-2);
padding: var(--mt-space-2);
color: var(--mt-text-secondary);
background: none;
border: none;
border-radius: var(--mt-radius-base);
cursor: pointer;
transition: color var(--mt-transition-fast), background-color var(--mt-transition-fast);
}
.mt-header-action-btn:hover {
color: var(--mt-primary);
background-color: var(--mt-primary-50);
}
.mt-badge-count {
position: absolute;
top: -2px;
right: -2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 11px;
font-weight: var(--mt-font-semibold);
line-height: 18px;
text-align: center;
color: var(--mt-white);
background-color: var(--mt-accent);
border-radius: var(--mt-radius-full);
}
.mt-cart-btn {
padding: var(--mt-space-2) var(--mt-space-3);
}
.mt-cart-count {
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-semibold);
color: var(--mt-primary);
}
.mt-header-account,
.mt-header-cart {
position: relative;
}
.mt-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 200px;
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
box-shadow: var(--mt-shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all var(--mt-transition-fast);
z-index: var(--mt-z-dropdown);
}
.mt-dropdown.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mt-dropdown-header {
padding: var(--mt-space-3) var(--mt-space-4);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-text-muted);
border-bottom: 1px solid var(--mt-border-color);
}
.mt-dropdown-menu {
list-style: none;
padding: var(--mt-space-2) 0;
margin: 0;
}
.mt-dropdown-menu li a {
display: block;
padding: var(--mt-space-2) var(--mt-space-4);
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
transition: all var(--mt-transition-fast);
}
.mt-dropdown-menu li a:hover {
color: var(--mt-primary);
background-color: var(--mt-primary-50);
}
.mt-dropdown-divider {
height: 1px;
margin: var(--mt-space-2) 0;
background-color: var(--mt-border-color);
}
.mt-cart-dropdown {
width: 360px;
}
.mt-nav {
background-color: var(--mt-surface);
border-bottom: 1px solid var(--mt-border-color);
}
.mt-nav-menu {
display: flex;
align-items: center;
gap: var(--mt-space-1);
list-style: none;
padding: 0;
margin: 0;
}
.mt-nav-item {
position: relative;
}
.mt-nav-link {
display: flex;
align-items: center;
gap: var(--mt-space-1);
padding: var(--mt-space-4) var(--mt-space-3);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-text-secondary);
transition: color var(--mt-transition-fast);
}
.mt-nav-link:hover {
color: var(--mt-primary);
}
.mt-nav-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
box-shadow: var(--mt-shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all var(--mt-transition-fast);
z-index: var(--mt-z-dropdown);
}
.mt-nav-item:hover .mt-nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mt-nav-dropdown-menu {
list-style: none;
padding: var(--mt-space-2) 0;
margin: 0;
}
.mt-nav-dropdown-menu li a {
display: block;
padding: var(--mt-space-2) var(--mt-space-4);
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
transition: all var(--mt-transition-fast);
}
.mt-nav-dropdown-menu li a:hover {
color: var(--mt-primary);
background-color: var(--mt-primary-50);
}
.mt-mobile-menu-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--mt-z-modal);
pointer-events: none;
}
.mt-mobile-menu-wrap.active {
pointer-events: auto;
}
.mt-mobile-menu-wrap .mt-mobile-menu-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity var(--mt-transition-slow);
}
.mt-mobile-menu-wrap.active .mt-mobile-menu-overlay {
opacity: 1;
}
.mt-mobile-menu-sidebar {
position: absolute;
top: 0;
left: 0;
width: 300px;
max-width: 85%;
height: 100%;
background-color: var(--mt-surface);
transform: translateX(-100%);
transition: transform var(--mt-transition-slow);
display: flex;
flex-direction: column;
}
.mt-mobile-menu-wrap.active .mt-mobile-menu-sidebar {
transform: translateX(0);
}
.mt-mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--mt-space-4);
border-bottom: 1px solid var(--mt-border-color);
}
.mt-mobile-menu-title {
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
}
.mt-mobile-menu-close {
display: flex;
align-items: center;
justify-content: center;
padding: var(--mt-space-2);
color: var(--mt-text-secondary);
background: none;
border: none;
cursor: pointer;
}
.mt-mobile-menu-close:hover {
color: var(--mt-text-primary);
}
.mt-mobile-menu-body {
flex: 1;
overflow-y: auto;
padding: var(--mt-space-4);
}
.mt-mobile-nav {
list-style: none;
padding: 0;
margin: 0;
}
.mt-mobile-nav-link {
display: block;
padding: var(--mt-space-3) 0;
font-size: var(--mt-text-base);
color: var(--mt-text-primary);
border-bottom: 1px solid var(--mt-border-color);
}
.mt-mobile-nav-link:hover {
color: var(--mt-primary);
}
.mt-mobile-menu-divider {
height: 1px;
margin: var(--mt-space-4) 0;
background-color: var(--mt-border-color);
}
.mt-mobile-nav-secondary a {
display: block;
padding: var(--mt-space-2) 0;
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
}
.mt-mobile-language {
padding: var(--mt-space-2) 0;
}
.mt-mobile-language-label {
display: block;
margin-bottom: var(--mt-space-3);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-text-secondary);
}
.mt-mobile-language-list {
display: flex;
flex-wrap: wrap;
gap: var(--mt-space-2);
}
.mt-mobile-lang-btn {
display: flex;
align-items: center;
gap: var(--mt-space-2);
padding: var(--mt-space-2) var(--mt-space-3);
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
background-color: var(--mt-surface-muted);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-base);
cursor: pointer;
transition: all var(--mt-transition-fast);
}
.mt-mobile-lang-btn:hover {
background-color: var(--mt-border-color-dark);
}
.mt-mobile-lang-btn.active {
color: var(--mt-primary);
background-color: var(--mt-primary-50);
border-color: var(--mt-primary);
font-weight: var(--mt-font-medium);
}
.mt-mobile-lang-btn img {
width: 16px;
height: 11px;
border-radius: 2px;
object-fit: cover;
}
.mt-mobile-search {
margin-bottom: var(--mt-space-4);
}
.mt-mobile-search-form {
display: flex;
gap: 0;
}
.mt-mobile-search-input {
flex: 1;
padding: var(--mt-space-3);
font-size: 16px;
border: 1px solid var(--mt-border-color);
border-right: none;
border-radius: var(--mt-radius-base) 0 0 var(--mt-radius-base);
background: var(--mt-surface);
}
.mt-mobile-search-input:focus {
outline: none;
border-color: var(--mt-primary);
}
.mt-mobile-search-btn {
padding: var(--mt-space-3);
background: var(--mt-primary);
color: var(--mt-white);
border: 1px solid var(--mt-primary);
border-radius: 0 var(--mt-radius-base) var(--mt-radius-base) 0;
cursor: pointer;
}
.mt-mobile-search-btn:active {
background: var(--mt-primary-hover);
}
.mt-mobile-user {
padding: var(--mt-space-4);
background: var(--mt-surface-muted);
border-radius: var(--mt-radius-lg);
margin-bottom: var(--mt-space-4);
}
.mt-mobile-user-logged {
display: flex;
align-items: center;
gap: var(--mt-space-2);
margin-bottom: var(--mt-space-3);
font-weight: var(--mt-font-medium);
color: var(--mt-text-primary);
}
.mt-mobile-user-links {
display: flex;
flex-wrap: wrap;
gap: var(--mt-space-2);
}
.mt-mobile-user-links a {
padding: var(--mt-space-1) var(--mt-space-2);
font-size: var(--mt-text-sm);
color: var(--mt-primary);
background: var(--mt-surface);
border-radius: var(--mt-radius-sm);
}
.mt-mobile-user-guest {
display: flex;
gap: var(--mt-space-2);
}
.mt-mobile-user-guest .mt-btn {
flex: 1;
}
.mt-mobile-phone {
padding: var(--mt-space-3) 0;
}
.mt-mobile-phone-link {
display: flex;
align-items: center;
gap: var(--mt-space-2);
font-size: var(--mt-text-base);
font-weight: var(--mt-font-medium);
color: var(--mt-primary);
}
.mt-mobile-nav-item {
position: relative;
}
.mt-mobile-nav-link {
display: flex;
align-items: center;
justify-content: space-between;
}
.mt-mobile-nav-arrow {
transition: transform var(--mt-transition-fast);
color: var(--mt-text-muted);
}
.mt-mobile-nav-item.open .mt-mobile-nav-arrow {
transform: rotate(90deg);
}
.mt-mobile-nav-sub {
display: none;
list-style: none;
padding: 0;
margin: 0;
padding-left: var(--mt-space-4);
background: var(--mt-surface-muted);
}
.mt-mobile-nav-item.open .mt-mobile-nav-sub {
display: block;
}
.mt-mobile-nav-sub li a {
display: block;
padding: var(--mt-space-2) var(--mt-space-3);
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
border-bottom: 1px solid var(--mt-border-color);
}
.mt-mobile-nav-sub li:last-child a {
border-bottom: none;
}
.mt-mobile-nav-sub li a:hover {
color: var(--mt-primary);
}
.mt-footer {
margin-top: var(--mt-section-gap);
padding: 48px 0 32px;
background-color: var(--mt-neutral-900);
color: var(--mt-neutral-400);
}
.mt-footer a {
color: var(--mt-white);
}
.mt-footer a:hover {
color: var(--mt-accent);
}
.mt-footer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 24px;
row-gap: 48px;
}
.mt-footer-col {
min-width: 0;
}
.mt-footer-brand {
margin-bottom: 48px;
}
.mt-footer-logo {
display: block;
max-height: 30px;
width: auto;
}
.mt-footer-payments svg text {
font-family: Arial, Helvetica, sans-serif;
}
.mt-footer-logo-text {
display: inline-block;
font-size: var(--mt-text-xl);
font-weight: var(--mt-font-bold);
color: var(--mt-white);
}
.mt-footer-block {
margin-bottom: 24px;
}
.mt-footer-block:last-child {
margin-bottom: 0;
}
.mt-footer-label {
display: flex;
align-items: center;
gap: 8px;
min-height: 24px;
font-size: 1rem;
font-weight: var(--mt-font-bold);
line-height: 1.5;
color: var(--mt-white);
}
.mt-footer-label svg {
flex-shrink: 0;
}
.mt-footer-label a {
font-weight: var(--mt-font-bold);
}
.mt-footer-note {
margin-top: 8px;
font-size: var(--mt-text-sm);
line-height: 1.5;
color: var(--mt-neutral-400);
}
.mt-footer-note + .mt-footer-note {
margin-top: 0;
}
.mt-footer-phone {
position: relative;
display: inline-block;
}
.mt-footer-phone-caret {
margin-left: 4px;
transition: transform var(--mt-transition-fast);
}
.mt-footer-phone-drop {
position: absolute;
left: 0;
top: calc(100% + 8px);
z-index: 20;
display: none;
min-width: 188px;
padding: 16px;
background: var(--mt-surface);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.mt-footer-phone:hover .mt-footer-phone-drop,
.mt-footer-phone:focus-within .mt-footer-phone-drop {
display: block;
}
.mt-footer-phone:hover .mt-footer-phone-caret {
transform: rotate(180deg);
}
.mt-footer-phone-drop ul {
list-style: none;
margin: 0;
padding: 0;
}
.mt-footer-phone-drop li + li {
margin-top: 8px;
}
.mt-footer-phone-drop a {
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
}
.mt-footer-phone-drop a:hover {
color: var(--mt-primary);
}
.mt-footer-block-mail {
display: flex;
align-items: center;
gap: 8px;
}
.mt-footer-block-mail svg {
flex-shrink: 0;
color: var(--mt-accent);
}
.mt-footer-email {
font-size: 1rem;
font-weight: var(--mt-font-medium);
color: var(--mt-accent);
text-decoration: underline;
}
.mt-footer-email:hover {
color: var(--mt-accent-300);
}
.mt-footer-linkcols {
display: flex;
gap: 24px;
}
.mt-footer-linkcol {
min-width: 0;
}
.mt-footer-title {
display: flex;
align-items: center;
gap: 8px;
min-height: 24px;
margin-bottom: 8px;
font-size: 1rem;
font-weight: var(--mt-font-semibold);
line-height: 1.5;
color: var(--mt-white);
}
.mt-footer-title svg {
flex-shrink: 0;
}
.mt-footer-links {
list-style: none;
margin: 0;
padding: 0;
}
.mt-footer-links li {
margin-bottom: 4px;
}
.mt-footer-links a {
font-size: var(--mt-text-xs);
line-height: 1.5;
color: var(--mt-white);
}
.mt-footer-links a:hover {
color: var(--mt-accent);
}
.mt-footer-payments {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
}
.mt-payment-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 32px;
padding: 8px;
background: var(--mt-neutral-100);
border-radius: 4px;
}
.mt-payment-icon svg {
display: block;
width: 32px;
height: 19px;
}
.mt-footer-col-extra {
display: flex;
flex-direction: column;
gap: 24px;
}
.mt-footer-subscribe-head {
display: flex;
align-items: center;
gap: 16px;
}
.mt-footer-subscribe-head svg {
flex-shrink: 0;
color: var(--mt-accent);
}
.mt-footer-subscribe-head p {
margin: 0;
font-size: var(--mt-text-sm);
line-height: 1.5;
color: var(--mt-neutral-400);
}
.mt-footer-subscribe-form {
margin-top: 16px;
}
.mt-footer-subscribe-group {
display: flex;
}
.mt-footer-subscribe-input {
flex: 1 1 300px;
max-width: 300px;
min-width: 0;
height: 42px;
padding: 8px 16px;
font-family: inherit;
font-size: var(--mt-text-sm);
color: var(--mt-neutral-600);
background: var(--mt-surface);
border: 0;
border-radius: 8px 0 0 8px;
}
.mt-footer-subscribe-input:focus {
outline: 2px solid var(--mt-primary-400);
outline-offset: -2px;
}
.mt-footer-subscribe-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 0 0 auto;
height: 42px;
padding: 12px 24px;
font-family: inherit;
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-semibold);
color: var(--mt-white);
background: var(--mt-primary-400);
border: 0;
border-radius: 0 8px 8px 0;
cursor: pointer;
transition: background-color var(--mt-transition-fast);
}
.mt-footer-subscribe-btn:hover {
background: var(--mt-primary-300);
}
.mt-footer-subscribe-btn svg {
flex-shrink: 0;
}
.mt-footer-subscribe-agree {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 8px;
font-size: var(--mt-text-xs);
line-height: 1.5;
color: var(--mt-neutral-400);
cursor: pointer;
}
.mt-footer-subscribe-agree input {
width: 16px;
height: 16px;
margin: 1px 0 0;
flex-shrink: 0;
accent-color: var(--mt-primary-400);
}
.mt-footer-subscribe-agree a {
color: var(--mt-primary-300);
text-decoration: underline;
}
.mt-footer-subscribe-result {
margin-top: 8px;
font-size: var(--mt-text-xs);
}
.mt-footer-subscribe-result.is-ok {
color: var(--mt-accent-300);
}
.mt-footer-subscribe-result.is-error {
color: var(--mt-error-border);
}
.mt-footer-socials-block {
display: flex;
flex-direction: column;
gap: 16px;
}
.mt-footer-socials-block .mt-footer-title {
margin-bottom: 0;
font-weight: var(--mt-font-bold);
}
.mt-footer-socials-grid {
display: flex;
gap: 24px;
}
.mt-footer-socials-list {
list-style: none;
margin: 0;
padding: 0;
}
.mt-footer-socials-list li {
margin-bottom: 8px;
}
.mt-footer-socials-list li:last-child {
margin-bottom: 0;
}
.mt-social-link {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--mt-text-xs);
line-height: 1.25;
color: var(--mt-white);
}
.mt-social-icon {
display: grid;
place-items: center;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.mt-social-icon svg {
width: 20px;
height: 20px;
}
.mt-social-text {
white-space: nowrap;
}
.mt-social-telegram .mt-social-icon { color: #2ca5e0; }
.mt-social-viber .mt-social-icon { color: #7c529d; }
.mt-social-whatsapp .mt-social-icon { color: #25d366; }
.mt-social-messenger .mt-social-icon { color: #0084ff; }
.mt-social-teams .mt-social-icon { color: #6264a7; }
.mt-social-facebook .mt-social-icon { color: var(--mt-white); }
.mt-social-instagram .mt-social-icon { color: var(--mt-white); }
.mt-social-youtube .mt-social-icon { color: var(--mt-white); }
.mt-social-tiktok .mt-social-icon { color: var(--mt-white); }
.mt-social-twitter .mt-social-icon { color: var(--mt-white); }
.mt-footer-bottom {
display: flex;
justify-content: center;
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--mt-neutral-800);
font-size: var(--mt-text-xs);
line-height: 1.5;
color: var(--mt-neutral-400);
text-align: center;
}
.mt-footer-bottom a {
color: var(--mt-neutral-400);
text-decoration: underline;
}
.mt-footer-bottom a:hover {
color: var(--mt-white);
}
.mt-scroll-top {
position: fixed;
right: 63px;
bottom: 120px;
z-index: 1019;
display: none;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
color: var(--mt-accent);
background: var(--mt-surface);
border: 0;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(12, 41, 106, 0.18);
cursor: pointer;
}
.mt-scroll-top.is-visible {
display: flex;
}
.mt-scroll-top svg {
width: 20px;
height: 20px;
}
.mt-contact-widget {
position: fixed;
right: 45px;
bottom: 30px;
z-index: 1020;
}
.mt-contact-widget-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
padding: 0;
color: var(--mt-white);
background: var(--mt-primary);
border: 0;
border-radius: 50%;
cursor: pointer;
}
.mt-contact-widget-pulse {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
background: var(--mt-primary);
opacity: 0.6;
animation: mtContactPulse 2.4s infinite;
}
@keyframes mtContactPulse {
0% { transform: scale(1); opacity: 0.55; }
70% { transform: scale(1.35); opacity: 0; }
100% { transform: scale(1.35); opacity: 0; }
}
.mt-contact-widget-btn svg {
position: relative;
}
.mt-contact-widget-drop {
position: absolute;
right: 0;
bottom: calc(100% + 12px);
display: none;
flex-direction: column;
min-width: 255px;
padding: 20px;
background: var(--mt-surface);
border-radius: 6px;
box-shadow: 0 10px 30px rgba(12, 41, 106, 0.18);
}
.mt-contact-widget.is-open .mt-contact-widget-drop {
display: flex;
}
.mt-contact-widget-item {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
padding: 9px 0;
font-family: inherit;
font-size: var(--mt-text-sm);
color: var(--mt-text-primary);
background: none;
border: 0;
text-align: left;
cursor: pointer;
}
.mt-contact-widget-item:hover {
color: var(--mt-primary);
}
.mt-contact-widget-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
color: var(--mt-white);
border-radius: 50%;
}
.mt-contact-widget-icon svg {
width: 16px;
height: 16px;
}
.mt-contact-icon-telegram { background: #2ca5e0; }
.mt-contact-icon-viber { background: #7c529d; }
.mt-contact-icon-whatsapp { background: #25d366; }
.mt-contact-icon-messenger { background: #0084ff; }
.mt-contact-icon-email { background: #50a8ff; }
.mt-contact-icon-callback { background: #3cba8b; }
.mt-contact-icon-contact { background: #e6a83a; }
body.mt-modal-open {
overflow: hidden;
}
.mt-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.mt-modal[hidden] {
display: none;
}
.mt-modal-backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(18, 23, 21, 0.8);
}
.mt-modal-dialog {
position: relative;
width: 100%;
max-width: 420px;
padding: 32px;
background: var(--mt-surface);
border-radius: 12px;
}
.mt-modal-close {
position: absolute;
top: 12px;
right: 12px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
color: var(--mt-neutral-500);
background: none;
border: 0;
cursor: pointer;
}
.mt-modal-close:hover {
color: var(--mt-text-primary);
}
.mt-modal-title {
font-size: var(--mt-text-xl);
font-weight: var(--mt-font-bold);
line-height: 1.3;
color: var(--mt-text-primary);
}
.mt-modal-text {
margin-top: 8px;
font-size: var(--mt-text-sm);
line-height: 1.5;
color: var(--mt-text-secondary);
}
.mt-modal-form {
margin-top: 24px;
}
.mt-modal-form .mt-field {
display: block;
margin-bottom: 16px;
}
.mt-modal-form .mt-field-label {
display: block;
margin-bottom: 6px;
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-text-primary);
}
.mt-modal-form .mt-input {
display: block;
width: 100%;
min-height: 44px;
padding: 10px 14px;
font-family: inherit;
font-size: var(--mt-text-sm);
color: var(--mt-text-primary);
background: var(--mt-surface);
border: 1px solid var(--mt-border-color-dark);
border-radius: 8px;
}
.mt-modal-form .mt-input:focus {
outline: none;
border-color: var(--mt-primary-400);
}
.mt-modal-form textarea.mt-input {
min-height: 88px;
resize: vertical;
}
.mt-modal-result {
margin-top: 12px;
font-size: var(--mt-text-sm);
}
.mt-modal-result.is-ok {
color: var(--mt-success);
}
.mt-modal-result.is-error {
color: var(--mt-error);
}
@media (max-width: 1199px) {
.mt-footer-grid {
grid-template-columns: repeat(2, 1fr);
}
.mt-footer-col-extra {
grid-column: span 2;
}
}
@media (max-width: 767px) {
.mt-footer {
padding: 32px 0 24px;
}
.mt-footer-grid {
grid-template-columns: 1fr;
row-gap: 32px;
}
.mt-footer-col-extra {
grid-column: auto;
}
.mt-footer-brand {
margin-bottom: 24px;
}
.mt-footer-linkcols {
flex-direction: column;
gap: 24px;
}
.mt-footer-bottom {
margin-top: 24px;
padding-top: 24px;
}
.mt-scroll-top {
right: 16px;
bottom: 152px;
}
.mt-contact-widget {
right: 16px;
bottom: 84px;
}
.mt-contact-widget-btn {
width: 56px;
height: 56px;
}
.mt-contact-widget-drop {
min-width: 220px;
padding: 16px;
}
}
.mt-mobile-bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-around;
height: 60px;
background-color: var(--mt-surface);
border-top: 1px solid var(--mt-border-color);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
z-index: var(--mt-z-fixed);
}
.mt-mobile-bottom-nav-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
flex: 1;
padding: var(--mt-space-2);
font-size: 10px;
color: var(--mt-text-secondary);
background: none;
border: none;
cursor: pointer;
transition: color var(--mt-transition-fast);
}
.mt-mobile-bottom-nav-item:hover,
.mt-mobile-bottom-nav-item.active {
color: var(--mt-primary);
}
.mt-mobile-nav-badge {
position: absolute;
top: 2px;
right: calc(50% - 16px);
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 10px;
font-weight: var(--mt-font-semibold);
line-height: 16px;
text-align: center;
color: var(--mt-white);
background-color: var(--mt-accent);
border-radius: var(--mt-radius-full);
}
@media (max-width: 1023px) {
body {
padding-bottom: 60px;
}
}
.mt-product-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
overflow: hidden;
transition: all var(--mt-transition-base);
}
.mt-product-card:hover {
border-color: var(--mt-primary-200);
box-shadow: var(--mt-shadow-lg);
transform: translateY(-4px);
}
.mt-product-card-image {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background-color: var(--mt-neutral-50);
}
.mt-product-card-image-link {
display: block;
width: 100%;
height: 100%;
}
.mt-product-card-img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform var(--mt-transition-slow);
}
.mt-product-card:hover .mt-product-card-img {
transform: scale(1.05);
}
.mt-product-card-stickers {
position: absolute;
top: var(--mt-space-3);
left: var(--mt-space-3);
display: flex;
flex-direction: column;
gap: var(--mt-space-1);
z-index: 2;
}
.mt-sticker {
display: inline-flex;
align-items: center;
padding: var(--mt-space-1) var(--mt-space-2);
font-size: 11px;
font-weight: var(--mt-font-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: var(--mt-radius-sm);
white-space: nowrap;
}
.mt-sticker-new {
color: var(--mt-white);
background: linear-gradient(135deg, var(--mt-primary) 0%, var(--mt-primary-600) 100%);
}
.mt-sticker-sale {
color: var(--mt-white);
background: linear-gradient(135deg, var(--mt-error) 0%, #C53030 100%);
}
.mt-sticker-hit {
color: var(--mt-white);
background: linear-gradient(135deg, var(--mt-accent) 0%, var(--mt-accent-600) 100%);
}
.mt-sticker-bestseller {
color: var(--mt-warning-dark);
background: linear-gradient(135deg, var(--mt-warning-light) 0%, #FDE68A 100%);
}
.mt-product-card-actions {
position: absolute;
top: var(--mt-space-3);
right: var(--mt-space-3);
display: flex;
flex-direction: column;
gap: var(--mt-space-2);
opacity: 0;
transform: translateX(10px);
transition: all var(--mt-transition-base);
z-index: 2;
}
.mt-product-card:hover .mt-product-card-actions {
opacity: 1;
transform: translateX(0);
}
.mt-product-card-action {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: var(--mt-text-secondary);
background-color: var(--mt-surface);
border: none;
border-radius: var(--mt-radius-base);
box-shadow: var(--mt-shadow-sm);
cursor: pointer;
transition: all var(--mt-transition-fast);
}
.mt-product-card-action:hover {
color: var(--mt-white);
background-color: var(--mt-primary);
transform: scale(1.1);
}
.mt-product-card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--mt-space-4);
}
.mt-product-card-rating {
display: flex;
align-items: center;
gap: var(--mt-space-2);
margin-bottom: var(--mt-space-2);
}
.mt-rating-stars {
display: flex;
gap: 2px;
}
.mt-star {
color: var(--mt-neutral-300);
}
.mt-star.is-filled {
color: var(--mt-warning);
}
.mt-product-card-reviews {
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
}
.mt-product-card-title {
margin: 0 0 var(--mt-space-2);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
line-height: var(--mt-leading-snug);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mt-product-card-title a {
color: var(--mt-text-primary);
}
.mt-product-card-title a:hover {
color: var(--mt-primary);
}
.mt-product-card-sku {
margin-bottom: var(--mt-space-2);
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
}
.mt-product-card-stock {
display: flex;
align-items: center;
gap: var(--mt-space-1);
margin-bottom: var(--mt-space-3);
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-medium);
}
.mt-product-card-stock.in-stock {
color: var(--mt-success);
}
.mt-product-card-stock.out-of-stock {
color: var(--mt-error);
}
.mt-product-card-price {
display: flex;
align-items: baseline;
gap: var(--mt-space-2);
margin-bottom: var(--mt-space-3);
margin-top: auto;
}
.mt-price-current {
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-bold);
color: var(--mt-text-primary);
}
.mt-price-new {
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-bold);
color: var(--mt-error);
}
.mt-price-old {
font-size: var(--mt-text-sm);
color: var(--mt-text-muted);
text-decoration: line-through;
}
.mt-product-card-cart {
display: flex;
align-items: center;
gap: var(--mt-space-2);
}
.mt-product-card-quantity {
display: flex;
align-items: center;
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-base);
overflow: hidden;
}
.mt-qty-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 36px;
color: var(--mt-text-secondary);
background-color: var(--mt-neutral-50);
border: none;
cursor: pointer;
transition: all var(--mt-transition-fast);
}
.mt-qty-btn:hover {
color: var(--mt-primary);
background-color: var(--mt-primary-50);
}
.mt-qty-input {
width: 40px;
height: 36px;
padding: 0;
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
text-align: center;
color: var(--mt-text-primary);
background-color: var(--mt-surface);
border: none;
border-left: 1px solid var(--mt-border-color);
border-right: 1px solid var(--mt-border-color);
-moz-appearance: textfield;
}
.mt-qty-input::-webkit-outer-spin-button,
.mt-qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.mt-qty-input:focus {
outline: none;
}
.mt-btn-cart {
flex: 1;
padding: var(--mt-space-2) var(--mt-space-3);
height: 38px;
}
.mt-btn-notify {
width: 100%;
justify-content: center;
}
@media (max-width: 479px) {
.mt-product-card-body {
padding: var(--mt-space-2) var(--mt-space-3);
}
.mt-product-card-title {
font-size: 12px;
margin-bottom: var(--mt-space-1);
}
.mt-price-current,
.mt-price-new {
font-size: var(--mt-text-base);
}
.mt-price-old {
font-size: var(--mt-text-xs);
}
.mt-product-card-rating {
margin-bottom: var(--mt-space-1);
}
.mt-product-card-stock {
margin-bottom: var(--mt-space-2);
}
.mt-product-card-price {
margin-bottom: var(--mt-space-2);
}
.mt-sticker {
font-size: 9px;
padding: 2px 6px;
}
.mt-product-card-stickers {
top: var(--mt-space-2);
left: var(--mt-space-2);
}
.mt-product-card-actions {
opacity: 1;
transform: translateX(0);
top: var(--mt-space-2);
right: var(--mt-space-2);
}
.mt-product-card-action {
width: 32px;
height: 32px;
}
.mt-btn-cart {
height: 36px;
font-size: var(--mt-text-xs);
padding: var(--mt-space-2);
}
.mt-product-card-quantity {
display: none;
}
.mt-qty-btn {
width: 28px;
height: 32px;
}
.mt-qty-input {
width: 32px;
height: 32px;
}
}
@media (max-width: 639px) {
.mt-product-card-actions {
opacity: 1;
transform: translateX(0);
}
.mt-product-card:hover {
transform: none;
}
}
@media (min-width: 480px) {
.mt-products-grid {
gap: var(--mt-space-4);
}
}
@media (min-width: 640px) {
.mt-products-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.mt-products-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--mt-space-5);
}
}
@media (min-width: 1024px) {
.mt-products-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--mt-space-6);
}
}
@media (min-width: 1280px) {
.mt-products-grid {
grid-template-columns: repeat(5, 1fr);
}
}
.mt-products-list .mt-product-card {
flex-direction: row;
height: auto;
}
.mt-products-list .mt-product-card-image {
width: 200px;
flex-shrink: 0;
aspect-ratio: auto;
height: 200px;
}
.mt-products-list .mt-product-card-body {
padding: var(--mt-space-4) var(--mt-space-6);
}
.mt-products-list .mt-product-card-title {
font-size: var(--mt-text-base);
-webkit-line-clamp: 1;
}
.mt-products-list .mt-product-card-cart {
margin-top: var(--mt-space-4);
}
@media (max-width: 639px) {
.mt-products-list .mt-product-card {
flex-direction: column;
}
.mt-products-list .mt-product-card-image {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
}
}
.mt-notification {
position: fixed;
top: calc(var(--mt-header-height) + var(--mt-space-4));
right: var(--mt-space-4);
max-width: 400px;
padding: var(--mt-space-4);
background-color: var(--mt-surface);
border-radius: var(--mt-radius-lg);
box-shadow: var(--mt-shadow-xl);
transform: translateX(120%);
transition: transform var(--mt-transition-slow);
z-index: var(--mt-z-tooltip);
}
.mt-notification.is-visible {
transform: translateX(0);
}
.mt-notification-success {
border-left: 4px solid var(--mt-success);
}
.mt-notification-error {
border-left: 4px solid var(--mt-error);
}
.mt-notification-warning {
border-left: 4px solid var(--mt-warning);
}
.mt-notification-info {
border-left: 4px solid var(--mt-info);
}
.mt-btn.is-loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.mt-btn.is-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: mt-spin 0.6s linear infinite;
}
.mt-btn-primary.is-loading::after {
border-color: var(--mt-white);
border-right-color: transparent;
}
@keyframes mt-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.mt-section {
padding: var(--mt-space-8) 0;
}
.mt-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--mt-space-6);
}
.mt-section-title {
margin: 0 0 var(--mt-space-4);
font-size: var(--mt-text-2xl);
font-weight: var(--mt-font-bold);
line-height: 1.5;
color: var(--mt-text-primary);
}
.mt-section-link {
display: inline-flex;
align-items: center;
gap: var(--mt-space-1);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-primary);
}
.mt-section-link:hover {
color: var(--mt-primary-hover);
}
.mt-section-link svg {
transition: transform var(--mt-transition-fast);
}
.mt-section-link:hover svg {
transform: translateX(4px);
}
.mt-content-top {
padding: var(--mt-space-6) 0;
}
.mt-content-top:first-child {
padding-top: 0;
}
.mt-content-bottom {
padding: var(--mt-space-6) 0;
}
.mt-home-content {
padding: var(--mt-space-8) 0;
}
.mt-home-layout {
display: grid;
gap: var(--mt-space-6);
}
.mt-home-layout-full {
grid-template-columns: 1fr;
}
.mt-home-layout-2col-left {
grid-template-columns: 260px 1fr;
}
.mt-home-layout-2col-right {
grid-template-columns: 1fr 260px;
}
.mt-home-layout-3col {
grid-template-columns: 200px 1fr 200px;
}
@media (max-width: 1023px) {
.mt-home-layout-2col-left,
.mt-home-layout-2col-right,
.mt-home-layout-3col {
grid-template-columns: 1fr;
}
.mt-home-sidebar {
order: 2;
}
.mt-home-main {
order: 1;
}
}
.mt-home-main {
min-width: 0;
}
.mt-home-sidebar {
min-width: 0;
}
.mt-advantages {
margin-top: var(--mt-section-gap);
}
.mt-advantages-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--mt-grid-gap);
}
@media (max-width: 1023px) {
.mt-advantages-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--mt-space-4);
}
}
@media (max-width: 639px) {
.mt-advantages-grid {
grid-template-columns: 1fr;
}
}
.mt-advantage-item {
display: block;
padding: var(--mt-card-pad-lg);
background-color: var(--mt-surface);
border-radius: var(--mt-card-radius);
transition: box-shadow var(--mt-transition-base);
}
.mt-advantage-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
color: var(--mt-primary);
background-color: var(--mt-primary-50);
border-radius: var(--mt-radius-lg);
}
.mt-advantage-content {
flex: 1;
min-width: 0;
}
.mt-advantage-title {
margin: var(--mt-space-4) 0 var(--mt-space-2);
font-size: var(--mt-text-base);
font-weight: var(--mt-font-bold);
line-height: 1.25;
color: var(--mt-text-primary);
}
.mt-advantage-text {
margin: 0;
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
line-height: 1.25;
color: var(--mt-text-muted);
}
.mt-categories-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--mt-space-4);
}
@media (max-width: 1023px) {
.mt-categories-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 767px) {
.mt-categories-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--mt-space-3);
}
}
@media (max-width: 479px) {
.mt-categories-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.mt-category-card {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--mt-space-4);
text-align: center;
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
transition: all var(--mt-transition-base);
}
.mt-category-card:hover {
border-color: var(--mt-primary-200);
box-shadow: var(--mt-shadow-lg);
transform: translateY(-4px);
}
.mt-category-card-image {
width: 80px;
height: 80px;
margin-bottom: var(--mt-space-3);
border-radius: var(--mt-radius-base);
overflow: hidden;
}
.mt-category-card-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.mt-category-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
margin-bottom: var(--mt-space-3);
color: var(--mt-primary);
background-color: var(--mt-primary-50);
border-radius: var(--mt-radius-base);
}
.mt-category-card-title {
margin: 0 0 var(--mt-space-1);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-text-primary);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mt-category-card:hover .mt-category-card-title {
color: var(--mt-primary);
}
.mt-category-card-count {
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
}
.mt-promo-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--mt-space-6);
}
@media (max-width: 767px) {
.mt-promo-grid {
grid-template-columns: 1fr;
gap: var(--mt-space-4);
}
}
.mt-promo-banner {
position: relative;
display: flex;
align-items: flex-end;
min-height: 280px;
padding: var(--mt-space-8);
background-size: cover;
background-position: center;
border-radius: var(--mt-radius-xl);
overflow: hidden;
transition: transform var(--mt-transition-base);
}
.mt-promo-banner::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}
.mt-promo-banner:hover {
transform: scale(1.02);
}
.mt-promo-banner-content {
position: relative;
z-index: 1;
color: var(--mt-white);
}
.mt-promo-banner-title {
margin: 0 0 var(--mt-space-2);
font-size: var(--mt-text-2xl);
font-weight: var(--mt-font-bold);
}
.mt-promo-banner-text {
margin: 0 0 var(--mt-space-4);
font-size: var(--mt-text-base);
opacity: 0.9;
}
.mt-brands-section {
background-color: var(--mt-surface);
}
.mt-brands-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--mt-space-4);
}
@media (max-width: 1023px) {
.mt-brands-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 639px) {
.mt-brands-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.mt-brand-item {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
padding: var(--mt-space-4);
background-color: var(--mt-neutral-50);
border-radius: var(--mt-radius-base);
transition: all var(--mt-transition-fast);
}
.mt-brand-item:hover {
background-color: var(--mt-surface);
box-shadow: var(--mt-shadow-base);
}
.mt-brand-item img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.7;
transition: all var(--mt-transition-fast);
}
.mt-brand-item:hover img {
filter: grayscale(0%);
opacity: 1;
}
.mt-brand-name {
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-secondary);
}
.mt-brand-item:hover .mt-brand-name {
color: var(--mt-primary);
}
.mt-seo-section {
padding: var(--mt-space-8) 0;
}
.mt-seo-text {
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
line-height: var(--mt-leading-relaxed);
}
.mt-seo-text h1,
.mt-seo-text h2,
.mt-seo-text h3 {
color: var(--mt-text-primary);
margin-top: var(--mt-space-6);
}
.mt-seo-text h1:first-child,
.mt-seo-text h2:first-child,
.mt-seo-text h3:first-child {
margin-top: 0;
}
.mt-seo-text p {
margin-bottom: var(--mt-space-4);
}
.mt-seo-text ul,
.mt-seo-text ol {
margin-bottom: var(--mt-space-4);
padding-left: var(--mt-space-6);
}
.mt-hero {
position: relative;
}
.mt-slideshow {
position: relative;
overflow: hidden;
border-radius: 0;
}
.mt-slideshow-container {
position: relative;
}
.mt-slide {
position: relative;
display: block;
width: 100%;
}
.mt-slide-image {
width: 100%;
height: auto;
aspect-ratio: 21 / 9;
object-fit: cover;
}
@media (max-width: 767px) {
.mt-slide-image {
aspect-ratio: 16 / 9;
}
}
.mt-slide-content {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
padding: 0 var(--mt-space-8);
text-align: center;
color: var(--mt-white);
}
.mt-slide-title {
margin: 0 0 var(--mt-space-4);
font-size: var(--mt-text-4xl);
font-weight: var(--mt-font-bold);
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
@media (max-width: 767px) {
.mt-slide-title {
font-size: var(--mt-text-2xl);
}
}
.mt-slide-text {
margin: 0 0 var(--mt-space-6);
font-size: var(--mt-text-lg);
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
@media (max-width: 767px) {
.mt-slide-text {
font-size: var(--mt-text-base);
margin-bottom: var(--mt-space-4);
}
}
.mt-special-section {
background-color: var(--mt-error-light);
}
.mt-section-title-icon {
margin-right: var(--mt-space-2);
}
.mt-page {
padding: var(--mt-space-6) 0;
background-color: var(--mt-body-bg);
}
.mt-page-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--mt-space-4);
margin-bottom: var(--mt-space-6);
}
@media (max-width: 639px) {
.mt-page-header {
flex-direction: column;
gap: var(--mt-space-2);
}
}
.mt-page-title {
margin: 0;
font-size: var(--mt-text-2xl);
font-weight: var(--mt-font-bold);
}
.mt-page-count {
font-size: var(--mt-text-sm);
color: var(--mt-text-muted);
}
.mt-category-intro {
display: flex;
gap: var(--mt-space-6);
margin-bottom: var(--mt-space-6);
padding: var(--mt-space-6);
background-color: var(--mt-surface);
border-radius: var(--mt-radius-lg);
}
@media (max-width: 767px) {
.mt-category-intro {
flex-direction: column;
}
}
.mt-category-image {
flex-shrink: 0;
width: 200px;
}
.mt-category-image img {
width: 100%;
border-radius: var(--mt-radius-base);
}
.mt-category-description {
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
line-height: var(--mt-leading-relaxed);
}
.mt-subcategories {
margin-bottom: var(--mt-space-6);
}
.mt-subcategories-list {
display: flex;
flex-wrap: wrap;
gap: var(--mt-space-3);
}
.mt-subcategory-item {
display: inline-flex;
align-items: center;
gap: var(--mt-space-2);
padding: var(--mt-space-2) var(--mt-space-4);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-full);
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
transition: all var(--mt-transition-fast);
}
.mt-subcategory-item:hover {
border-color: var(--mt-primary);
color: var(--mt-primary);
}
.mt-subcategory-image {
width: 24px;
height: 24px;
border-radius: var(--mt-radius-sm);
object-fit: cover;
}
.mt-catalog-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: var(--mt-space-6);
}
@media (max-width: 1023px) {
.mt-catalog-layout {
grid-template-columns: 1fr;
}
}
.mt-catalog-sidebar {
position: sticky;
top: calc(var(--mt-header-height) + var(--mt-space-4));
max-height: calc(100vh - var(--mt-header-height) - var(--mt-space-8));
overflow-y: auto;
padding-right: var(--mt-space-2);
}
.mt-filter-block {
padding: var(--mt-space-4);
margin-bottom: var(--mt-space-4);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
}
.mt-filter-title {
margin: 0 0 var(--mt-space-3);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
}
.mt-filter-price {
display: flex;
gap: var(--mt-space-2);
}
.mt-filter-price-inputs {
display: flex;
align-items: center;
gap: var(--mt-space-2);
flex: 1;
}
.mt-filter-price-input {
padding: var(--mt-space-2);
font-size: var(--mt-text-sm);
}
.mt-filter-price-separator {
color: var(--mt-text-muted);
}
.mt-filter-options {
display: flex;
flex-direction: column;
gap: var(--mt-space-2);
}
.mt-filter-scrollable {
max-height: 200px;
overflow-y: auto;
padding-right: var(--mt-space-2);
}
.mt-filter-checkbox {
display: flex;
align-items: center;
gap: var(--mt-space-2);
cursor: pointer;
font-size: var(--mt-text-sm);
}
.mt-filter-checkbox input {
display: none;
}
.mt-filter-checkbox-mark {
flex-shrink: 0;
width: 18px;
height: 18px;
border: 2px solid var(--mt-border-color-dark);
border-radius: var(--mt-radius-sm);
transition: all var(--mt-transition-fast);
position: relative;
}
.mt-filter-checkbox input:checked + .mt-filter-checkbox-mark {
background-color: var(--mt-primary);
border-color: var(--mt-primary);
}
.mt-filter-checkbox input:checked + .mt-filter-checkbox-mark::after {
content: '';
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid var(--mt-white);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.mt-filter-checkbox-label {
flex: 1;
color: var(--mt-text-secondary);
}
.mt-filter-checkbox:hover .mt-filter-checkbox-label {
color: var(--mt-text-primary);
}
.mt-filter-checkbox-count {
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
}
.mt-filter-actions {
margin-top: var(--mt-space-4);
}
.mt-catalog-toolbar {
display: flex;
align-items: center;
gap: var(--mt-space-4);
padding: var(--mt-space-4);
margin-bottom: var(--mt-space-4);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
}
@media (max-width: 767px) {
.mt-catalog-toolbar {
flex-wrap: wrap;
gap: var(--mt-space-3);
}
}
.mt-filter-toggle {
flex-shrink: 0;
}
.mt-catalog-sort,
.mt-catalog-limit {
display: flex;
align-items: center;
gap: var(--mt-space-2);
}
.mt-sort-label,
.mt-limit-label {
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
white-space: nowrap;
}
.mt-sort-select,
.mt-limit-select {
padding: var(--mt-space-2) var(--mt-space-3);
font-size: var(--mt-text-sm);
min-width: 150px;
}
.mt-limit-select {
min-width: 80px;
}
.mt-catalog-view {
display: flex;
gap: var(--mt-space-1);
margin-left: auto;
}
.mt-view-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: var(--mt-text-muted);
background: none;
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-base);
cursor: pointer;
transition: all var(--mt-transition-fast);
}
.mt-view-btn:hover {
color: var(--mt-text-primary);
border-color: var(--mt-border-color-dark);
}
.mt-view-btn.active {
color: var(--mt-primary);
border-color: var(--mt-primary);
background-color: var(--mt-primary-50);
}
.mt-active-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--mt-space-2);
margin-bottom: var(--mt-space-4);
}
.mt-active-filter-tag {
display: inline-flex;
align-items: center;
gap: var(--mt-space-1);
padding: var(--mt-space-1) var(--mt-space-3);
font-size: var(--mt-text-xs);
color: var(--mt-primary-700);
background-color: var(--mt-primary-100);
border-radius: var(--mt-radius-full);
transition: all var(--mt-transition-fast);
}
.mt-active-filter-tag:hover {
background-color: var(--mt-primary-200);
}
.mt-active-filter-reset {
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
margin-left: var(--mt-space-2);
}
.mt-active-filter-reset:hover {
color: var(--mt-error);
}
.mt-pagination-wrapper {
display: flex;
justify-content: center;
margin-top: var(--mt-space-8);
}
.mt-filters-modal {
position: fixed;
inset: 0;
z-index: var(--mt-z-modal);
pointer-events: none;
}
.mt-filters-modal.is-active {
pointer-events: auto;
}
.mt-filters-modal-overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity var(--mt-transition-slow);
}
.mt-filters-modal.is-active .mt-filters-modal-overlay {
opacity: 1;
}
.mt-filters-modal-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
max-height: 85vh;
background-color: var(--mt-surface);
border-radius: var(--mt-radius-xl) var(--mt-radius-xl) 0 0;
transform: translateY(100%);
transition: transform var(--mt-transition-slow);
display: flex;
flex-direction: column;
}
.mt-filters-modal.is-active .mt-filters-modal-content {
transform: translateY(0);
}
.mt-filters-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--mt-space-4) var(--mt-space-4);
border-bottom: 1px solid var(--mt-border-color);
}
.mt-filters-modal-title {
margin: 0;
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-semibold);
}
.mt-filters-modal-close {
display: flex;
align-items: center;
justify-content: center;
padding: var(--mt-space-2);
color: var(--mt-text-secondary);
background: none;
border: none;
cursor: pointer;
}
.mt-filters-modal-body {
flex: 1;
overflow-y: auto;
padding: var(--mt-space-4);
}
.mt-filters-modal-footer {
display: flex;
gap: var(--mt-space-3);
padding: var(--mt-space-4);
border-top: 1px solid var(--mt-border-color);
}
.mt-filters-modal-footer .mt-btn {
flex: 1;
}
.mt-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--mt-space-16) var(--mt-space-4);
text-align: center;
}
.mt-empty-state-icon {
margin-bottom: var(--mt-space-6);
color: var(--mt-text-muted);
}
.mt-empty-state-title {
margin: 0 0 var(--mt-space-2);
font-size: var(--mt-text-xl);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
}
.mt-empty-state-text {
margin: 0 0 var(--mt-space-6);
font-size: var(--mt-text-base);
color: var(--mt-text-secondary);
}
.mt-category-seo {
margin-top: var(--mt-space-8);
padding: var(--mt-space-6);
background-color: var(--mt-surface);
border-radius: var(--mt-radius-lg);
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
line-height: var(--mt-leading-relaxed);
}
.mt-product-main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--mt-space-8);
margin-bottom: var(--mt-space-8);
}
@media (max-width: 1023px) {
.mt-product-main {
grid-template-columns: 1fr;
gap: var(--mt-space-6);
}
}
.mt-product-gallery {
position: sticky;
top: calc(var(--mt-header-height) + var(--mt-space-4));
}
@media (max-width: 1023px) {
.mt-product-gallery {
position: static;
}
}
.mt-product-gallery-main {
position: relative;
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
overflow: hidden;
margin-bottom: var(--mt-space-4);
}
.mt-product-sticker {
position: absolute;
top: var(--mt-space-4);
left: var(--mt-space-4);
z-index: 2;
}
.mt-product-image-link {
display: block;
padding: var(--mt-space-4);
}
.mt-product-image {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
}
.mt-product-zoom {
position: absolute;
bottom: var(--mt-space-4);
right: var(--mt-space-4);
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--mt-text-secondary);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-base);
cursor: pointer;
transition: all var(--mt-transition-fast);
}
.mt-product-zoom:hover {
color: var(--mt-primary);
border-color: var(--mt-primary);
}
.mt-product-gallery-thumbs {
display: flex;
gap: var(--mt-space-3);
overflow-x: auto;
padding-bottom: var(--mt-space-2);
}
.mt-product-thumb {
flex-shrink: 0;
width: 80px;
height: 80px;
padding: var(--mt-space-2);
background-color: var(--mt-surface);
border: 2px solid var(--mt-border-color);
border-radius: var(--mt-radius-base);
cursor: pointer;
transition: border-color var(--mt-transition-fast);
}
.mt-product-thumb:hover,
.mt-product-thumb.active {
border-color: var(--mt-primary);
}
.mt-product-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.mt-product-info {
padding: var(--mt-space-6);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
}
.mt-product-title {
margin: 0 0 var(--mt-space-4);
font-size: var(--mt-text-2xl);
font-weight: var(--mt-font-bold);
line-height: var(--mt-leading-tight);
}
.mt-product-meta {
display: flex;
flex-wrap: wrap;
gap: var(--mt-space-4);
margin-bottom: var(--mt-space-4);
padding-bottom: var(--mt-space-4);
border-bottom: 1px solid var(--mt-border-color);
}
.mt-product-meta-item {
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
}
.mt-product-meta-label {
color: var(--mt-text-muted);
}
.mt-product-meta-item a {
color: var(--mt-primary);
}
.mt-product-rating {
display: flex;
align-items: center;
gap: var(--mt-space-3);
margin-bottom: var(--mt-space-4);
}
.mt-product-rating-link {
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
}
.mt-product-rating-link:hover {
color: var(--mt-primary);
}
.mt-product-stock {
display: inline-flex;
align-items: center;
gap: var(--mt-space-2);
padding: var(--mt-space-2) var(--mt-space-4);
margin-bottom: var(--mt-space-4);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
border-radius: var(--mt-radius-full);
}
.mt-product-stock.in-stock {
color: var(--mt-success-dark);
background-color: var(--mt-success-light);
}
.mt-product-stock.out-of-stock {
color: var(--mt-error-dark);
background-color: var(--mt-error-light);
}
.mt-product-price-block {
margin-bottom: var(--mt-space-6);
padding-bottom: var(--mt-space-6);
border-bottom: 1px solid var(--mt-border-color);
}
.mt-product-price-old {
font-size: var(--mt-text-lg);
color: var(--mt-text-muted);
text-decoration: line-through;
}
.mt-product-price-current {
font-size: var(--mt-text-3xl);
font-weight: var(--mt-font-bold);
color: var(--mt-text-primary);
}
.mt-product-price-block:has(.mt-product-price-old) .mt-product-price-current {
color: var(--mt-error);
}
.mt-product-price-save {
margin-top: var(--mt-space-1);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-success);
}
.mt-product-tax,
.mt-product-points {
margin-top: var(--mt-space-2);
font-size: var(--mt-text-sm);
color: var(--mt-text-muted);
}
.mt-product-discounts {
margin-bottom: var(--mt-space-6);
padding: var(--mt-space-4);
background-color: var(--mt-primary-50);
border-radius: var(--mt-radius-base);
}
.mt-product-discounts-title {
margin-bottom: var(--mt-space-2);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
color: var(--mt-primary-700);
}
.mt-product-discounts-table {
width: 100%;
font-size: var(--mt-text-sm);
}
.mt-product-discounts-table td {
padding: var(--mt-space-1) var(--mt-space-2);
}
.mt-product-discounts-table td:last-child {
font-weight: var(--mt-font-semibold);
color: var(--mt-primary-700);
}
.mt-product-options {
margin-bottom: var(--mt-space-6);
}
.mt-product-option {
margin-bottom: var(--mt-space-4);
}
.mt-product-option-label {
display: block;
margin-bottom: var(--mt-space-2);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-text-primary);
}
.mt-required {
color: var(--mt-error);
}
.mt-product-option-images {
display: flex;
flex-wrap: wrap;
gap: var(--mt-space-2);
}
.mt-product-option-image {
position: relative;
cursor: pointer;
}
.mt-product-option-image input {
position: absolute;
opacity: 0;
}
.mt-product-option-image img {
width: 50px;
height: 50px;
object-fit: cover;
border: 2px solid var(--mt-border-color);
border-radius: var(--mt-radius-base);
transition: border-color var(--mt-transition-fast);
}
.mt-product-option-image input:checked + img,
.mt-product-option-image:hover img {
border-color: var(--mt-primary);
}
.mt-product-option-radios {
display: flex;
flex-direction: column;
gap: var(--mt-space-2);
}
.mt-product-option-radio {
display: flex;
align-items: center;
gap: var(--mt-space-2);
cursor: pointer;
}
.mt-product-option-radio input {
display: none;
}
.mt-product-option-radio-mark {
flex-shrink: 0;
width: 18px;
height: 18px;
border: 2px solid var(--mt-border-color-dark);
border-radius: 50%;
position: relative;
transition: all var(--mt-transition-fast);
}
.mt-product-option-radio input:checked + .mt-product-option-radio-mark {
border-color: var(--mt-primary);
}
.mt-product-option-radio input:checked + .mt-product-option-radio-mark::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 8px;
height: 8px;
background-color: var(--mt-primary);
border-radius: 50%;
}
.mt-product-option-radio-label {
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
}
.mt-product-actions {
margin-bottom: var(--mt-space-6);
}
.mt-product-quantity {
display: flex;
align-items: center;
gap: var(--mt-space-4);
margin-bottom: var(--mt-space-4);
}
.mt-product-quantity-label {
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-text-secondary);
}
.mt-product-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--mt-space-3);
}
.mt-product-add-cart {
flex: 1 1 auto;
min-width: 0;
}
.mt-product-quick-order {
flex: 1 1 100%;
min-width: 0;
}
.mt-product-action-btn {
flex-shrink: 0;
width: 48px;
height: 48px;
padding: 0;
}
.mt-product-minimum {
margin-bottom: var(--mt-space-4);
padding: var(--mt-space-3);
font-size: var(--mt-text-sm);
color: var(--mt-warning-dark);
background-color: var(--mt-warning-light);
border-radius: var(--mt-radius-base);
}
.mt-product-share {
display: flex;
align-items: center;
gap: var(--mt-space-3);
}
.mt-product-share-label {
font-size: var(--mt-text-sm);
color: var(--mt-text-muted);
}
.mt-share-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: var(--mt-text-secondary);
background-color: var(--mt-neutral-100);
border-radius: var(--mt-radius-base);
transition: all var(--mt-transition-fast);
}
.mt-share-btn:hover {
color: var(--mt-white);
background-color: var(--mt-primary);
}
.mt-product-tabs {
margin-bottom: var(--mt-space-8);
}
.mt-tabs-nav {
display: flex;
gap: var(--mt-space-1);
border-bottom: 2px solid var(--mt-border-color);
overflow-x: auto;
}
.mt-tab-btn {
padding: var(--mt-space-4) var(--mt-space-6);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-text-secondary);
background: none;
border: none;
cursor: pointer;
white-space: nowrap;
position: relative;
transition: color var(--mt-transition-fast);
}
.mt-tab-btn:hover {
color: var(--mt-text-primary);
}
.mt-tab-btn.active {
color: var(--mt-primary);
}
.mt-tab-btn.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background-color: var(--mt-primary);
}
.mt-tabs-content {
padding: var(--mt-space-6);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-top: none;
border-radius: 0 0 var(--mt-radius-lg) var(--mt-radius-lg);
}
.mt-product-brand-card {
display: flex;
align-items: center;
gap: var(--mt-space-4);
margin-bottom: var(--mt-grid-gap);
padding: var(--mt-card-pad);
background-color: var(--mt-surface);
border-radius: var(--mt-card-radius);
}
.mt-product-brand-logo {
flex-shrink: 0;
width: 56px;
height: 56px;
object-fit: contain;
}
.mt-product-brand-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.mt-product-brand-label {
font-size: var(--mt-text-xs);
line-height: 1.3;
color: var(--mt-text-muted);
}
.mt-product-brand-name {
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-bold);
line-height: 1.3;
color: var(--mt-text-primary);
text-transform: uppercase;
}
.mt-product-brand-note {
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
line-height: 1.3;
color: var(--mt-text-primary);
}
.mt-product-asks {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--mt-space-2);
margin-top: var(--mt-space-3);
}
.mt-product-ask {
padding: 0;
font-size: var(--mt-text-sm);
line-height: 1.4;
color: var(--mt-link-color);
text-align: left;
background: none;
border: none;
cursor: pointer;
}
.mt-product-ask:hover {
color: var(--mt-link-hover);
text-decoration: underline;
}
.mt-lightbox {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1200;
display: none;
}
.mt-lightbox.is-active {
display: block;
}
.mt-lightbox-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(18, 23, 21, 0.88);
}
.mt-lightbox-body {
position: relative;
display: grid;
grid-template-rows: minmax(0, 1fr) auto auto;
height: 100%;
padding: 56px 72px 20px;
}
.mt-lightbox-image-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
}
.mt-lightbox-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
opacity: 0;
transition: opacity var(--mt-transition-base);
}
.mt-lightbox-loading {
position: absolute;
top: 50%;
left: 50%;
display: none;
transform: translate(-50%, -50%);
}
.mt-lightbox-spinner {
display: block;
width: 36px;
height: 36px;
border: 3px solid rgba(255, 255, 255, 0.25);
border-top-color: var(--mt-white);
border-radius: 50%;
animation: mt-lightbox-spin 0.8s linear infinite;
}
@keyframes mt-lightbox-spin {
to { transform: rotate(360deg); }
}
.mt-lightbox-close,
.mt-lightbox-arrow {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
color: var(--mt-white);
background: rgba(255, 255, 255, 0.12);
border: none;
border-radius: 50%;
cursor: pointer;
transition: background-color var(--mt-transition-fast);
}
.mt-lightbox-close:hover,
.mt-lightbox-arrow:hover {
background: rgba(255, 255, 255, 0.24);
}
.mt-lightbox-close {
top: 16px;
right: 16px;
}
.mt-lightbox-arrow {
top: 50%;
margin-top: -24px;
}
.mt-lightbox-prev {
left: 12px;
}
.mt-lightbox-next {
right: 12px;
}
.mt-lightbox-counter {
padding: 12px 0 4px;
color: rgba(255, 255, 255, 0.75);
font-size: var(--mt-text-sm);
text-align: center;
}
.mt-lightbox-thumbs {
display: flex;
gap: var(--mt-space-2);
justify-content: center;
padding-bottom: 4px;
overflow-x: auto;
scrollbar-width: none;
}
.mt-lightbox-thumbs::-webkit-scrollbar {
display: none;
}
.mt-lightbox-thumb {
flex: 0 0 auto;
width: 64px;
height: 64px;
padding: 4px;
background: rgba(255, 255, 255, 0.08);
border: 2px solid transparent;
border-radius: var(--mt-radius-base);
cursor: pointer;
}
.mt-lightbox-thumb.active {
border-color: var(--mt-white);
}
.mt-lightbox-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 767px) {
.mt-lightbox-body {
padding: 56px 12px 16px;
}
.mt-lightbox-arrow {
width: 40px;
height: 40px;
margin-top: -20px;
}
.mt-lightbox-thumb {
width: 48px;
height: 48px;
}
}
.mt-product-nav {
display: flex;
gap: var(--mt-space-2);
margin-bottom: var(--mt-grid-gap);
padding: var(--mt-space-2);
overflow-x: auto;
background-color: var(--mt-surface);
border-radius: var(--mt-card-radius);
scrollbar-width: none;
}
.mt-product-siblings {
display: flex;
align-items: center;
gap: var(--mt-space-2);
margin-left: auto;
padding-left: var(--mt-space-3);
flex-shrink: 0;
}
.mt-product-position {
font-size: var(--mt-text-sm);
color: var(--mt-text-muted);
white-space: nowrap;
}
.mt-product-sibling {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: var(--mt-text-primary);
background-color: var(--mt-surface-muted);
border-radius: var(--mt-radius-full);
transition: background-color var(--mt-transition-fast), color var(--mt-transition-fast);
}
.mt-product-sibling:hover {
color: var(--mt-text-inverse);
background-color: var(--mt-primary);
}
.mt-product-sibling.is-disabled {
color: var(--mt-text-muted);
opacity: 0.4;
cursor: default;
}
@media (max-width: 767px) {
.mt-product-position {
display: none;
}
}
.mt-product-nav::-webkit-scrollbar {
display: none;
}
.mt-product-nav-link {
flex-shrink: 0;
padding: var(--mt-space-3) var(--mt-space-5);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
line-height: 1.4;
color: var(--mt-text-secondary);
white-space: nowrap;
border-radius: var(--mt-radius-base);
transition: color var(--mt-transition-fast), background-color var(--mt-transition-fast);
}
.mt-product-nav-link:hover {
color: var(--mt-primary);
background-color: var(--mt-surface-muted);
}
.mt-product-nav-link.is-active {
color: var(--mt-primary);
background-color: var(--mt-primary-light);
}
.mt-product-tabs .mt-tab-panel.is-open {
display: block;
scroll-margin-top: 96px;
}
.mt-product-tabs .mt-tab-panel.is-open + .mt-tab-panel.is-open {
margin-top: var(--mt-grid-gap);
}
#mtProductTop {
scroll-margin-top: 96px;
}
.mt-tab-panel {
display: none;
}
.mt-tab-panel.active {
display: block;
}
.mt-attributes-group {
margin-bottom: var(--mt-space-6);
}
.mt-attributes-group:last-child {
margin-bottom: 0;
}
.mt-attributes-group-title {
margin: 0 0 var(--mt-space-3);
font-size: var(--mt-text-base);
font-weight: var(--mt-font-semibold);
color: var(--mt-primary);
}
.mt-attributes-table {
width: 100%;
border-collapse: collapse;
}
.mt-attributes-table tr:nth-child(even) {
background-color: var(--mt-neutral-50);
}
.mt-attributes-table td {
padding: var(--mt-space-3) var(--mt-space-4);
font-size: var(--mt-text-sm);
border-bottom: 1px solid var(--mt-border-color);
}
.mt-attribute-name {
width: 40%;
color: var(--mt-text-secondary);
}
.mt-attribute-value {
color: var(--mt-text-primary);
}
.mt-product-tabs .mt-reviews {
max-width: 700px;
}
.mt-review-form {
margin-top: var(--mt-space-8);
padding-top: var(--mt-space-8);
border-top: 1px solid var(--mt-border-color);
}
.mt-review-form-title {
margin: 0 0 var(--mt-space-4);
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-semibold);
}
.mt-form-hint {
margin-top: var(--mt-space-1);
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
}
.mt-form-textarea {
display: block;
width: 100%;
padding: var(--mt-space-3) var(--mt-space-4);
font-family: inherit;
font-size: var(--mt-text-base);
line-height: var(--mt-leading-normal);
color: var(--mt-text-primary);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-base);
resize: vertical;
transition: border-color var(--mt-transition-fast), box-shadow var(--mt-transition-fast);
}
.mt-form-textarea:focus {
outline: none;
border-color: var(--mt-primary);
box-shadow: 0 0 0 3px var(--mt-primary-light);
}
.mt-rating-select {
display: flex;
gap: var(--mt-space-1);
}
.mt-rating-select-item {
cursor: pointer;
}
.mt-rating-select-item input {
display: none;
}
.mt-rating-select-item .mt-star {
color: var(--mt-neutral-300);
transition: color var(--mt-transition-fast);
}
.mt-rating-select-item:hover .mt-star,
.mt-rating-select-item input:checked ~ .mt-star,
.mt-rating-select:hover .mt-rating-select-item:hover ~ .mt-rating-select-item .mt-star {
color: var(--mt-warning);
fill: var(--mt-warning);
}
.mt-product-tags {
margin-top: var(--mt-space-8);
font-size: var(--mt-text-sm);
}
.mt-product-tags-label {
color: var(--mt-text-muted);
}
.mt-tag {
color: var(--mt-primary);
}
.mt-tag:hover {
text-decoration: underline;
}
.mt-cart-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: var(--mt-space-6);
align-items: start;
}
@media (max-width: 1023px) {
.mt-cart-layout {
grid-template-columns: 1fr;
}
}
.mt-cart-table-wrapper {
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
overflow: hidden;
}
.mt-cart-table {
width: 100%;
border-collapse: collapse;
}
.mt-cart-table th {
padding: var(--mt-space-4);
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--mt-text-muted);
background-color: var(--mt-neutral-50);
text-align: left;
}
.mt-cart-table td {
padding: var(--mt-space-4);
border-top: 1px solid var(--mt-border-color);
vertical-align: middle;
}
.mt-cart-th-image { width: 100px; }
.mt-cart-th-quantity { width: 140px; }
.mt-cart-th-price,
.mt-cart-th-total { width: 120px; text-align: right; }
.mt-cart-th-remove { width: 50px; }
.mt-cart-td-price,
.mt-cart-td-total { text-align: right; font-weight: var(--mt-font-medium); }
.mt-cart-product-image {
width: 80px;
height: 80px;
object-fit: contain;
border-radius: var(--mt-radius-base);
background-color: var(--mt-neutral-50);
}
.mt-cart-product-name {
font-weight: var(--mt-font-medium);
color: var(--mt-text-primary);
}
.mt-cart-product-name:hover {
color: var(--mt-primary);
}
.mt-cart-product-options {
margin: var(--mt-space-2) 0 0;
padding: 0;
list-style: none;
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
}
.mt-cart-product-options span {
color: var(--mt-text-secondary);
}
.mt-cart-product-reward,
.mt-cart-product-recurring {
margin-top: var(--mt-space-1);
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
}
.mt-cart-remove-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: var(--mt-text-muted);
background: none;
border: none;
border-radius: var(--mt-radius-base);
cursor: pointer;
transition: all var(--mt-transition-fast);
}
.mt-cart-remove-btn:hover {
color: var(--mt-error);
background-color: var(--mt-error-light);
}
.mt-cart-cards {
display: flex;
flex-direction: column;
gap: var(--mt-space-4);
}
.mt-cart-card {
display: flex;
gap: var(--mt-space-4);
padding: var(--mt-space-4);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
}
.mt-cart-card-image {
flex-shrink: 0;
width: 80px;
}
.mt-cart-card-image img {
width: 100%;
border-radius: var(--mt-radius-base);
}
.mt-cart-card-content {
flex: 1;
min-width: 0;
}
.mt-cart-card-name {
display: block;
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-text-primary);
margin-bottom: var(--mt-space-1);
}
.mt-cart-card-options {
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
margin-bottom: var(--mt-space-2);
}
.mt-cart-card-price {
font-size: var(--mt-text-base);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
margin-bottom: var(--mt-space-3);
}
.mt-cart-card-actions {
display: flex;
align-items: center;
gap: var(--mt-space-3);
}
.mt-cart-card-total {
margin-top: var(--mt-space-3);
padding-top: var(--mt-space-3);
border-top: 1px solid var(--mt-border-color);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-text-secondary);
}
.mt-cart-coupons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--mt-space-4);
margin-top: var(--mt-space-6);
}
@media (max-width: 767px) {
.mt-cart-coupons {
grid-template-columns: 1fr;
}
}
.mt-cart-coupon-block {
padding: var(--mt-space-4);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
}
.mt-cart-coupon-title {
margin: 0 0 var(--mt-space-3);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
}
.mt-cart-coupon-form {
display: flex;
gap: var(--mt-space-2);
}
.mt-cart-coupon-form .mt-form-input {
flex: 1;
}
.mt-cart-summary {
position: sticky;
top: calc(var(--mt-header-height) + var(--mt-space-4));
}
.mt-cart-summary-inner {
padding: var(--mt-space-6);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
}
.mt-cart-summary-title {
margin: 0 0 var(--mt-space-4);
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-semibold);
}
.mt-cart-totals {
margin-bottom: var(--mt-space-6);
}
.mt-cart-total-row {
display: flex;
justify-content: space-between;
padding: var(--mt-space-2) 0;
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
border-bottom: 1px solid var(--mt-border-color);
}
.mt-cart-total-row:last-child {
border-bottom: none;
}
.mt-cart-total-final {
padding-top: var(--mt-space-4);
margin-top: var(--mt-space-2);
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-bold);
color: var(--mt-text-primary);
border-top: 2px solid var(--mt-border-color);
border-bottom: none;
}
.mt-cart-summary-actions {
display: flex;
flex-direction: column;
gap: var(--mt-space-3);
}
.mt-checkout-steps {
display: flex;
justify-content: center;
gap: var(--mt-space-2);
margin-bottom: var(--mt-space-8);
padding: var(--mt-space-4) 0;
}
@media (max-width: 767px) {
.mt-checkout-steps {
overflow-x: auto;
justify-content: flex-start;
padding-bottom: var(--mt-space-2);
}
}
.mt-checkout-step {
display: flex;
align-items: center;
gap: var(--mt-space-2);
padding: var(--mt-space-3) var(--mt-space-4);
color: var(--mt-text-muted);
background-color: var(--mt-neutral-100);
border-radius: var(--mt-radius-full);
white-space: nowrap;
transition: all var(--mt-transition-fast);
}
.mt-checkout-step.active {
color: var(--mt-white);
background-color: var(--mt-primary);
}
.mt-checkout-step.completed {
color: var(--mt-success);
background-color: var(--mt-success-light);
}
.mt-checkout-step-number {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-bold);
background-color: rgba(255,255,255,0.2);
border-radius: 50%;
}
.mt-checkout-step.active .mt-checkout-step-number {
background-color: rgba(255,255,255,0.3);
}
.mt-checkout-step.completed .mt-checkout-step-number {
background-color: var(--mt-success);
color: var(--mt-white);
}
.mt-checkout-step-text {
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
}
@media (max-width: 639px) {
.mt-checkout-step-text {
display: none;
}
}
.mt-checkout-layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: var(--mt-space-6);
align-items: start;
}
@media (max-width: 1023px) {
.mt-checkout-layout {
grid-template-columns: 1fr;
}
}
.mt-checkout-section {
margin-bottom: var(--mt-space-6);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
overflow: hidden;
}
.mt-checkout-section-title {
display: flex;
align-items: center;
gap: var(--mt-space-3);
margin: 0;
padding: var(--mt-space-4) var(--mt-space-6);
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-semibold);
background-color: var(--mt-neutral-50);
border-bottom: 1px solid var(--mt-border-color);
cursor: pointer;
}
.mt-checkout-section-number {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-bold);
color: var(--mt-white);
background-color: var(--mt-primary);
border-radius: 50%;
}
.mt-checkout-section.completed .mt-checkout-section-number {
background-color: var(--mt-success);
}
.mt-checkout-section-content {
padding: var(--mt-space-6);
}
.mt-checkout-form .mt-form-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--mt-space-4);
}
@media (max-width: 639px) {
.mt-checkout-form .mt-form-row {
grid-template-columns: 1fr;
}
}
.mt-checkout-form .mt-form-group {
margin-bottom: var(--mt-space-4);
}
.mt-checkout-form .mt-form-group:last-child {
margin-bottom: 0;
}
.mt-checkout-options {
display: flex;
flex-direction: column;
gap: var(--mt-space-3);
}
.mt-checkout-option {
display: flex;
align-items: flex-start;
gap: var(--mt-space-3);
padding: var(--mt-space-4);
border: 2px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
cursor: pointer;
transition: all var(--mt-transition-fast);
}
.mt-checkout-option:hover {
border-color: var(--mt-primary-200);
}
.mt-checkout-option.selected {
border-color: var(--mt-primary);
background-color: var(--mt-primary-50);
}
.mt-checkout-option input {
display: none;
}
.mt-checkout-option-mark {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 2px;
border: 2px solid var(--mt-border-color-dark);
border-radius: 50%;
position: relative;
}
.mt-checkout-option.selected .mt-checkout-option-mark {
border-color: var(--mt-primary);
}
.mt-checkout-option.selected .mt-checkout-option-mark::after {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 8px;
height: 8px;
background-color: var(--mt-primary);
border-radius: 50%;
}
.mt-checkout-option-content {
flex: 1;
}
.mt-checkout-option-title {
font-weight: var(--mt-font-medium);
color: var(--mt-text-primary);
}
.mt-checkout-option-description {
margin-top: var(--mt-space-1);
font-size: var(--mt-text-sm);
color: var(--mt-text-muted);
}
.mt-checkout-option-price {
font-weight: var(--mt-font-semibold);
color: var(--mt-primary);
}
.mt-checkout-sidebar {
position: sticky;
top: calc(var(--mt-header-height) + var(--mt-space-4));
}
@media (max-width: 1023px) {
.mt-checkout-sidebar {
position: static;
order: -1;
}
}
.mt-checkout-summary {
padding: var(--mt-space-6);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
}
.mt-checkout-summary-title {
margin: 0 0 var(--mt-space-4);
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-semibold);
}
.mt-checkout-products {
margin-bottom: var(--mt-space-4);
max-height: 300px;
overflow-y: auto;
}
.mt-checkout-product {
display: flex;
align-items: flex-start;
gap: var(--mt-space-3);
padding: var(--mt-space-3) 0;
border-bottom: 1px solid var(--mt-border-color);
}
.mt-checkout-product:last-child {
border-bottom: none;
}
.mt-checkout-product-image {
position: relative;
flex-shrink: 0;
width: 50px;
height: 50px;
}
.mt-checkout-product-image img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: var(--mt-radius-sm);
background-color: var(--mt-neutral-50);
}
.mt-checkout-product-qty {
position: absolute;
top: -8px;
right: -8px;
display: flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 4px;
font-size: 10px;
font-weight: var(--mt-font-bold);
color: var(--mt-white);
background-color: var(--mt-primary);
border-radius: var(--mt-radius-full);
}
.mt-checkout-product-info {
flex: 1;
min-width: 0;
}
.mt-checkout-product-name {
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-text-primary);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mt-checkout-product-options {
margin-top: var(--mt-space-1);
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
}
.mt-checkout-product-price {
flex-shrink: 0;
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
}
.mt-checkout-coupon {
margin-bottom: var(--mt-space-4);
padding-bottom: var(--mt-space-4);
border-bottom: 1px solid var(--mt-border-color);
}
.mt-checkout-coupon-toggle {
display: flex;
align-items: center;
gap: var(--mt-space-2);
padding: 0;
font-size: var(--mt-text-sm);
color: var(--mt-primary);
background: none;
border: none;
cursor: pointer;
}
.mt-checkout-coupon-toggle:hover {
text-decoration: underline;
}
.mt-checkout-coupon-form {
display: flex;
gap: var(--mt-space-2);
margin-top: var(--mt-space-3);
}
.mt-checkout-coupon-form .mt-form-input {
flex: 1;
padding: var(--mt-space-2) var(--mt-space-3);
font-size: var(--mt-text-sm);
}
.mt-checkout-totals {
margin-bottom: var(--mt-space-4);
}
.mt-checkout-total-row {
display: flex;
justify-content: space-between;
padding: var(--mt-space-2) 0;
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
}
.mt-checkout-total-final {
padding-top: var(--mt-space-3);
margin-top: var(--mt-space-2);
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-bold);
color: var(--mt-text-primary);
border-top: 2px solid var(--mt-border-color);
}
.mt-checkout-security {
display: flex;
gap: var(--mt-space-4);
padding-top: var(--mt-space-4);
border-top: 1px solid var(--mt-border-color);
}
.mt-checkout-security-item {
display: flex;
align-items: center;
gap: var(--mt-space-2);
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
}
.mt-checkout-security-item svg {
color: var(--mt-success);
}
.mt-checkout-edit-cart {
display: flex;
align-items: center;
justify-content: center;
gap: var(--mt-space-2);
margin-top: var(--mt-space-4);
padding: var(--mt-space-3);
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-base);
transition: all var(--mt-transition-fast);
}
.mt-checkout-edit-cart:hover {
color: var(--mt-primary);
border-color: var(--mt-primary);
}
.mt-loading {
display: flex;
align-items: center;
justify-content: center;
padding: var(--mt-space-8);
}
.mt-loading-spinner {
width: 32px;
height: 32px;
border: 3px solid var(--mt-border-color);
border-top-color: var(--mt-primary);
border-radius: 50%;
animation: mt-spin 0.8s linear infinite;
}
.mt-checkout-actions {
display: flex;
justify-content: space-between;
gap: var(--mt-space-4);
margin-top: var(--mt-space-6);
padding-top: var(--mt-space-6);
border-top: 1px solid var(--mt-border-color);
}
.mt-checkout-actions .mt-btn {
min-width: 150px;
}
.mt-success-page {
padding: var(--mt-space-12) 0;
}
.mt-success-content {
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.mt-success-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
margin-bottom: var(--mt-space-6);
color: var(--mt-success);
background-color: var(--mt-success-light);
border-radius: 50%;
animation: mt-success-pulse 2s ease-in-out infinite;
}
@keyframes mt-success-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.mt-success-title {
margin: 0 0 var(--mt-space-4);
font-size: var(--mt-text-3xl);
font-weight: var(--mt-font-bold);
color: var(--mt-text-primary);
}
.mt-success-text {
margin-bottom: var(--mt-space-6);
font-size: var(--mt-text-base);
color: var(--mt-text-secondary);
line-height: var(--mt-leading-relaxed);
}
.mt-success-order {
display: inline-flex;
align-items: center;
gap: var(--mt-space-3);
margin-bottom: var(--mt-space-6);
padding: var(--mt-space-4) var(--mt-space-6);
background-color: var(--mt-primary-50);
border-radius: var(--mt-radius-lg);
}
.mt-success-order-label {
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
}
.mt-success-order-number {
font-size: var(--mt-text-xl);
font-weight: var(--mt-font-bold);
color: var(--mt-primary);
}
.mt-success-info {
margin-bottom: var(--mt-space-8);
padding: var(--mt-space-4);
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
background-color: var(--mt-neutral-50);
border-radius: var(--mt-radius-base);
}
.mt-success-actions {
display: flex;
justify-content: center;
gap: var(--mt-space-4);
margin-bottom: var(--mt-space-12);
}
@media (max-width: 479px) {
.mt-success-actions {
flex-direction: column;
}
}
.mt-success-steps {
padding-top: var(--mt-space-8);
border-top: 1px solid var(--mt-border-color);
}
.mt-success-steps-title {
margin: 0 0 var(--mt-space-6);
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
}
.mt-success-steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--mt-space-6);
text-align: left;
}
@media (max-width: 767px) {
.mt-success-steps-grid {
grid-template-columns: 1fr;
}
}
.mt-success-step {
display: flex;
gap: var(--mt-space-3);
padding: var(--mt-space-4);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
}
.mt-success-step-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: var(--mt-primary);
background-color: var(--mt-primary-50);
border-radius: var(--mt-radius-base);
}
.mt-success-step-content h4 {
margin: 0 0 var(--mt-space-1);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
}
.mt-success-step-content p {
margin: 0;
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
}
.mt-auth-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--mt-space-6);
max-width: 900px;
margin: 0 auto;
}
@media (max-width: 767px) {
.mt-auth-grid {
grid-template-columns: 1fr;
}
}
.mt-auth-single {
max-width: 600px;
margin: 0 auto;
}
.mt-auth-card {
padding: var(--mt-space-8);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-xl);
}
.mt-auth-card-wide {
max-width: 100%;
}
.mt-auth-title {
margin: 0 0 var(--mt-space-2);
font-size: var(--mt-text-xl);
font-weight: var(--mt-font-bold);
}
.mt-auth-subtitle {
margin: 0 0 var(--mt-space-6);
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
}
.mt-auth-subtitle a {
color: var(--mt-primary);
font-weight: var(--mt-font-medium);
}
.mt-auth-form .mt-form-group {
margin-bottom: var(--mt-space-4);
}
.mt-form-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--mt-space-2);
}
.mt-form-link {
font-size: var(--mt-text-sm);
color: var(--mt-primary);
}
.mt-auth-divider {
display: flex;
align-items: center;
gap: var(--mt-space-4);
margin: var(--mt-space-6) 0;
color: var(--mt-text-muted);
font-size: var(--mt-text-sm);
}
.mt-auth-divider::before,
.mt-auth-divider::after {
content: '';
flex: 1;
height: 1px;
background-color: var(--mt-border-color);
}
.mt-auth-benefits {
margin-bottom: var(--mt-space-6);
}
.mt-auth-benefit {
display: flex;
align-items: center;
gap: var(--mt-space-3);
padding: var(--mt-space-3) 0;
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
}
.mt-auth-benefit svg {
flex-shrink: 0;
color: var(--mt-success);
}
.mt-fieldset {
margin: 0 0 var(--mt-space-6);
padding: 0;
border: none;
}
.mt-fieldset-legend {
margin-bottom: var(--mt-space-4);
font-size: var(--mt-text-base);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
}
.mt-form-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--mt-space-4);
}
@media (max-width: 639px) {
.mt-form-row {
grid-template-columns: 1fr;
}
}
.mt-auth-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--mt-space-4);
margin-top: var(--mt-space-6);
padding-top: var(--mt-space-6);
border-top: 1px solid var(--mt-border-color);
}
.mt-account-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--mt-space-6);
}
@media (max-width: 1023px) {
.mt-account-layout {
grid-template-columns: 1fr;
}
}
.mt-account-sidebar {
position: sticky;
top: calc(var(--mt-header-height) + var(--mt-space-4));
}
@media (max-width: 1023px) {
.mt-account-sidebar {
position: static;
}
}
.mt-account-user {
display: flex;
align-items: center;
gap: var(--mt-space-3);
padding: var(--mt-space-4);
margin-bottom: var(--mt-space-4);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
}
.mt-account-user-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: var(--mt-primary);
background-color: var(--mt-primary-50);
border-radius: 50%;
}
.mt-account-user-name {
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
}
.mt-account-user-email {
font-size: var(--mt-text-sm);
color: var(--mt-text-muted);
}
.mt-account-nav {
display: flex;
flex-direction: column;
gap: var(--mt-space-1);
padding: var(--mt-space-2);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
}
@media (max-width: 1023px) {
.mt-account-nav {
flex-direction: row;
flex-wrap: wrap;
gap: var(--mt-space-2);
}
}
.mt-account-nav-item {
display: flex;
align-items: center;
gap: var(--mt-space-3);
padding: var(--mt-space-3) var(--mt-space-4);
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
border-radius: var(--mt-radius-base);
transition: all var(--mt-transition-fast);
}
.mt-account-nav-item:hover {
color: var(--mt-text-primary);
background-color: var(--mt-neutral-50);
}
.mt-account-nav-item.active {
color: var(--mt-primary);
background-color: var(--mt-primary-50);
font-weight: var(--mt-font-medium);
}
.mt-account-nav-logout {
margin-top: var(--mt-space-2);
padding-top: var(--mt-space-3);
border-top: 1px solid var(--mt-border-color);
}
.mt-account-nav-logout:hover {
color: var(--mt-error);
background-color: var(--mt-error-light);
}
.mt-account-content {
min-width: 0;
}
.mt-account-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--mt-space-4);
margin-bottom: var(--mt-space-6);
}
.mt-account-stat {
display: flex;
align-items: center;
gap: var(--mt-space-4);
padding: var(--mt-space-5);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
}
.mt-account-stat-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: var(--mt-primary);
background-color: var(--mt-primary-50);
border-radius: var(--mt-radius-base);
}
.mt-account-stat-value {
font-size: var(--mt-text-2xl);
font-weight: var(--mt-font-bold);
color: var(--mt-text-primary);
}
.mt-account-stat-label {
font-size: var(--mt-text-sm);
color: var(--mt-text-muted);
}
.mt-account-section {
padding: var(--mt-space-6);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
}
.mt-account-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--mt-space-4);
}
.mt-account-section-title {
margin: 0;
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-semibold);
}
.mt-account-orders {
display: flex;
flex-direction: column;
gap: var(--mt-space-2);
}
.mt-account-order {
display: flex;
align-items: center;
gap: var(--mt-space-4);
padding: var(--mt-space-4);
background-color: var(--mt-neutral-50);
border-radius: var(--mt-radius-base);
transition: background-color var(--mt-transition-fast);
}
.mt-account-order:hover {
background-color: var(--mt-primary-50);
}
.mt-account-order-id {
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
}
.mt-account-order-date {
font-size: var(--mt-text-sm);
color: var(--mt-text-muted);
}
.mt-account-order-status {
margin-left: auto;
}
.mt-account-order-total {
font-weight: var(--mt-font-medium);
}
.mt-account-order svg {
color: var(--mt-text-muted);
}
.mt-account-empty {
text-align: center;
padding: var(--mt-space-8);
}
.mt-account-empty p {
margin-bottom: var(--mt-space-4);
color: var(--mt-text-muted);
}
.mt-info-page {
padding: var(--mt-space-6) 0;
}
.mt-info-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--mt-space-8);
align-items: start;
}
@media (max-width: 991px) {
.mt-info-layout {
grid-template-columns: 1fr;
}
}
.mt-info-sidebar {
position: sticky;
top: var(--mt-space-6);
}
.mt-info-nav {
padding: var(--mt-space-5);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
margin-bottom: var(--mt-space-4);
}
.mt-info-nav-title {
margin: 0 0 var(--mt-space-4);
padding-bottom: var(--mt-space-3);
font-size: var(--mt-text-base);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
border-bottom: 1px solid var(--mt-border-color);
}
.mt-info-nav-item {
display: block;
padding: var(--mt-space-2) 0;
color: var(--mt-text-secondary);
text-decoration: none;
font-size: var(--mt-text-sm);
transition: color 0.2s ease;
}
.mt-info-nav-item:hover {
color: var(--mt-primary);
}
.mt-info-nav-item.active {
color: var(--mt-primary);
font-weight: var(--mt-font-medium);
}
.mt-info-contact {
padding: var(--mt-space-5);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
}
.mt-info-contact-title {
margin: 0 0 var(--mt-space-4);
font-size: var(--mt-text-base);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
}
.mt-info-contact-item {
display: flex;
align-items: center;
gap: var(--mt-space-3);
padding: var(--mt-space-2) 0;
color: var(--mt-text-secondary);
font-size: var(--mt-text-sm);
}
.mt-info-contact-item svg {
flex-shrink: 0;
color: var(--mt-primary);
}
.mt-info-contact-item a {
color: var(--mt-text-secondary);
text-decoration: none;
}
.mt-info-contact-item a:hover {
color: var(--mt-primary);
}
.mt-info-article {
padding: var(--mt-space-8);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
}
.mt-info-title {
margin: 0 0 var(--mt-space-6);
font-size: var(--mt-text-2xl);
font-weight: var(--mt-font-bold);
color: var(--mt-text-primary);
}
.mt-info-text {
font-size: var(--mt-text-base);
line-height: var(--mt-leading-relaxed);
color: var(--mt-text-secondary);
}
.mt-info-text h2,
.mt-info-text h3,
.mt-info-text h4 {
margin-top: var(--mt-space-6);
margin-bottom: var(--mt-space-3);
color: var(--mt-text-primary);
}
.mt-info-text p {
margin-bottom: var(--mt-space-4);
}
.mt-info-text ul,
.mt-info-text ol {
margin-bottom: var(--mt-space-4);
padding-left: var(--mt-space-6);
}
.mt-info-text img {
max-width: 100%;
height: auto;
border-radius: var(--mt-radius-base);
}
.mt-info-actions {
margin-top: var(--mt-space-8);
padding-top: var(--mt-space-6);
border-top: 1px solid var(--mt-border-color);
}
.mt-search-form-wrapper {
margin-bottom: var(--mt-space-8);
padding: var(--mt-space-6);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
}
.mt-search-input-group {
display: flex;
gap: var(--mt-space-3);
}
@media (max-width: 639px) {
.mt-search-input-group {
flex-direction: column;
}
}
.mt-search-input-lg {
flex: 1;
padding: var(--mt-space-4);
font-size: var(--mt-text-lg);
}
.mt-search-submit {
padding: var(--mt-space-4) var(--mt-space-6);
}
.mt-search-advanced-toggle {
display: inline-flex;
align-items: center;
gap: var(--mt-space-2);
margin-top: var(--mt-space-4);
padding: 0;
font-size: var(--mt-text-sm);
color: var(--mt-primary);
background: none;
border: none;
cursor: pointer;
}
.mt-search-advanced-toggle:hover {
text-decoration: underline;
}
.mt-search-advanced {
margin-top: var(--mt-space-4);
padding-top: var(--mt-space-4);
border-top: 1px solid var(--mt-border-color);
}
.mt-search-advanced-grid {
display: flex;
flex-wrap: wrap;
gap: var(--mt-space-4);
align-items: center;
}
.mt-search-advanced-grid .mt-form-group {
margin: 0;
}
.mt-catalog-count {
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
}
.mt-compare-wrapper {
margin-bottom: var(--mt-space-6);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
overflow: hidden;
}
.mt-compare-table-scroll {
overflow-x: auto;
}
.mt-compare-table {
width: 100%;
min-width: 600px;
border-collapse: collapse;
}
.mt-compare-table tr {
border-bottom: 1px solid var(--mt-border-color);
}
.mt-compare-table tr:last-child {
border-bottom: none;
}
.mt-compare-label {
width: 180px;
min-width: 180px;
padding: var(--mt-space-4);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-text-secondary);
background-color: var(--mt-neutral-50);
vertical-align: top;
}
.mt-compare-cell {
padding: var(--mt-space-4);
min-width: 200px;
font-size: var(--mt-text-sm);
vertical-align: top;
}
.mt-compare-row-group .mt-compare-group-title {
padding: var(--mt-space-3) var(--mt-space-4);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
color: var(--mt-primary);
background-color: var(--mt-primary-50);
}
.mt-compare-product {
position: relative;
text-align: center;
}
.mt-compare-remove {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: var(--mt-text-muted);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: 50%;
cursor: pointer;
transition: all var(--mt-transition-fast);
}
.mt-compare-remove:hover {
color: var(--mt-error);
border-color: var(--mt-error);
background-color: var(--mt-error-light);
}
.mt-compare-product-image {
display: block;
margin-bottom: var(--mt-space-3);
}
.mt-compare-product-image img {
width: 150px;
height: 150px;
object-fit: contain;
}
.mt-compare-product-name {
display: block;
font-weight: var(--mt-font-medium);
color: var(--mt-text-primary);
}
.mt-compare-product-name:hover {
color: var(--mt-primary);
}
.mt-compare-price {
display: flex;
flex-direction: column;
gap: var(--mt-space-1);
}
.mt-compare-price-old {
font-size: var(--mt-text-sm);
color: var(--mt-text-muted);
text-decoration: line-through;
}
.mt-compare-price-new,
.mt-compare-price-current {
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-bold);
color: var(--mt-text-primary);
}
.mt-compare-price-new {
color: var(--mt-error);
}
.mt-compare-stock.in-stock {
color: var(--mt-success);
}
.mt-compare-stock.out-of-stock {
color: var(--mt-error);
}
.mt-compare-reviews {
margin-left: var(--mt-space-2);
color: var(--mt-text-muted);
}
.mt-compare-summary {
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
line-height: var(--mt-leading-relaxed);
}
.mt-compare-row-actions {
background-color: var(--mt-neutral-50);
}
.mt-compare-footer {
text-align: center;
}
.mt-wishlist-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--mt-space-4);
margin-bottom: var(--mt-space-6);
}
.mt-wishlist-item {
display: flex;
gap: var(--mt-space-4);
padding: var(--mt-space-4);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
transition: all var(--mt-transition-fast);
}
.mt-wishlist-item:hover {
border-color: var(--mt-primary-200);
box-shadow: var(--mt-shadow-base);
}
.mt-wishlist-item-image {
position: relative;
flex-shrink: 0;
width: 100px;
}
.mt-wishlist-item-image img {
width: 100%;
aspect-ratio: 1;
object-fit: contain;
border-radius: var(--mt-radius-base);
background-color: var(--mt-neutral-50);
}
.mt-wishlist-remove {
position: absolute;
top: -8px;
right: -8px;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--mt-text-muted);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: 50%;
cursor: pointer;
transition: all var(--mt-transition-fast);
}
.mt-wishlist-remove:hover {
color: var(--mt-error);
border-color: var(--mt-error);
}
.mt-wishlist-item-info {
flex: 1;
min-width: 0;
}
.mt-wishlist-item-name {
display: block;
margin-bottom: var(--mt-space-1);
font-weight: var(--mt-font-medium);
color: var(--mt-text-primary);
}
.mt-wishlist-item-name:hover {
color: var(--mt-primary);
}
.mt-wishlist-item-model {
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
margin-bottom: var(--mt-space-2);
}
.mt-wishlist-item-stock {
font-size: var(--mt-text-xs);
margin-bottom: var(--mt-space-2);
}
.mt-wishlist-item-stock.in-stock {
color: var(--mt-success);
}
.mt-wishlist-item-stock.out-of-stock {
color: var(--mt-error);
}
.mt-wishlist-item-price {
margin-bottom: var(--mt-space-3);
}
.mt-wishlist-price-old {
font-size: var(--mt-text-sm);
color: var(--mt-text-muted);
text-decoration: line-through;
margin-right: var(--mt-space-2);
}
.mt-wishlist-price-new {
font-weight: var(--mt-font-bold);
color: var(--mt-error);
}
.mt-wishlist-price-current {
font-weight: var(--mt-font-bold);
color: var(--mt-text-primary);
}
.mt-wishlist-footer {
text-align: center;
}
.mt-error-page {
padding: var(--mt-space-16) 0;
}
.mt-error-content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.mt-error-illustration {
position: relative;
margin-bottom: var(--mt-space-8);
}
.mt-error-code {
font-size: 120px;
font-weight: var(--mt-font-bold);
color: var(--mt-primary-100);
line-height: 1;
}
@media (max-width: 639px) {
.mt-error-code {
font-size: 80px;
}
}
.mt-error-ghost {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--mt-primary);
animation: mt-float 3s ease-in-out infinite;
}
@keyframes mt-float {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(-50%, calc(-50% - 10px)); }
}
.mt-error-title {
margin: 0 0 var(--mt-space-4);
font-size: var(--mt-text-2xl);
font-weight: var(--mt-font-bold);
}
.mt-error-text {
margin: 0 0 var(--mt-space-8);
font-size: var(--mt-text-base);
color: var(--mt-text-secondary);
}
.mt-error-search {
margin-bottom: var(--mt-space-8);
}
.mt-error-search-form {
display: flex;
gap: var(--mt-space-2);
max-width: 400px;
margin: 0 auto;
}
.mt-error-search-form .mt-form-input {
flex: 1;
}
.mt-error-links {
margin-bottom: var(--mt-space-8);
}
.mt-error-links-label {
display: block;
margin-bottom: var(--mt-space-4);
font-size: var(--mt-text-sm);
color: var(--mt-text-muted);
}
.mt-error-links-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--mt-space-3);
}
.mt-error-link {
display: inline-flex;
align-items: center;
gap: var(--mt-space-2);
padding: var(--mt-space-2) var(--mt-space-4);
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
background-color: var(--mt-neutral-100);
border-radius: var(--mt-radius-full);
transition: all var(--mt-transition-fast);
}
.mt-error-link:hover {
color: var(--mt-primary);
background-color: var(--mt-primary-50);
}
.mt-slideshow {
position: relative;
overflow: hidden;
background-color: var(--mt-neutral-100);
}
.mt-slideshow-container {
position: relative;
width: 100%;
}
.mt-slideshow-track {
position: relative;
}
.mt-slide {
display: none;
position: relative;
}
.mt-slide.active {
display: block;
}
.mt-slide-image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 21 / 9;
object-fit: cover;
}
@media (max-width: 767px) {
.mt-slide-image {
aspect-ratio: 16 / 9;
}
}
.mt-slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--mt-white);
max-width: 700px;
padding: var(--mt-space-4);
}
.mt-slide-title {
margin: 0 0 var(--mt-space-4);
font-size: var(--mt-text-4xl);
font-weight: var(--mt-font-bold);
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
@media (max-width: 767px) {
.mt-slide-title {
font-size: var(--mt-text-2xl);
}
}
.mt-slide-text {
margin: 0 0 var(--mt-space-6);
font-size: var(--mt-text-lg);
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
@media (max-width: 767px) {
.mt-slide-text {
font-size: var(--mt-text-base);
margin-bottom: var(--mt-space-4);
}
}
.mt-slideshow-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: var(--mt-white);
background-color: rgba(0, 0, 0, 0.3);
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
transition: all var(--mt-transition-fast);
z-index: 2;
}
.mt-slideshow:hover .mt-slideshow-arrow {
opacity: 1;
}
.mt-slideshow-arrow:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.mt-slideshow-prev {
left: var(--mt-space-4);
}
.mt-slideshow-next {
right: var(--mt-space-4);
}
.mt-slideshow-dots {
position: absolute;
bottom: var(--mt-space-4);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: var(--mt-space-2);
z-index: 2;
}
.mt-slideshow-dot {
width: 10px;
height: 10px;
padding: 0;
background-color: rgba(255, 255, 255, 0.5);
border: none;
border-radius: 50%;
cursor: pointer;
transition: all var(--mt-transition-fast);
}
.mt-slideshow-dot:hover,
.mt-slideshow-dot.active {
background-color: var(--mt-surface);
transform: scale(1.2);
}
.mt-slide {
animation: mt-fade-in 0.5s ease-in-out;
}
@keyframes mt-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.mt-contact-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--mt-space-6);
}
@media (max-width: 1023px) {
.mt-contact-layout {
grid-template-columns: 1fr;
}
}
.mt-contact-card {
padding: var(--mt-space-6);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
}
.mt-contact-card-title {
margin: 0 0 var(--mt-space-6);
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-semibold);
}
.mt-contact-item {
display: flex;
gap: var(--mt-space-4);
padding: var(--mt-space-4) 0;
border-bottom: 1px solid var(--mt-border-color);
}
.mt-contact-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.mt-contact-item:first-of-type {
padding-top: 0;
}
.mt-contact-item-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--mt-primary);
background-color: var(--mt-primary-50);
border-radius: var(--mt-radius-base);
}
.mt-contact-item-label {
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--mt-space-1);
}
.mt-contact-item-value {
font-size: var(--mt-text-sm);
color: var(--mt-text-primary);
}
.mt-contact-item-value a {
color: var(--mt-primary);
}
.mt-contact-item-value a:hover {
text-decoration: underline;
}
.mt-contact-map {
margin-top: var(--mt-space-6);
border-radius: var(--mt-radius-lg);
overflow: hidden;
}
.mt-contact-map iframe {
display: block;
}
.mt-contact-form-actions {
margin-top: var(--mt-space-6);
}
.mt-mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
z-index: 998;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mt-mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
.mt-mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--mt-surface);
z-index: 999;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
overflow: hidden;
}
.mt-mobile-menu.active {
transform: translateX(0);
}
.mt-mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--mt-space-4);
border-bottom: 1px solid var(--mt-border-color);
background: var(--mt-surface-muted);
flex-shrink: 0;
}
.mt-mobile-menu-logo {
max-height: 32px;
width: auto;
}
.mt-mobile-menu-close {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 50%;
cursor: pointer;
color: var(--mt-text-primary);
transition: background 0.2s ease;
}
.mt-mobile-menu-close:hover {
background: var(--mt-surface);
}
.mt-mobile-menu-content {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mt-mobile-menu-list {
list-style: none;
margin: 0;
padding: 0;
}
.mt-mobile-menu-item {
border-bottom: 1px solid var(--mt-border-color);
}
.mt-mobile-menu-link {
display: flex;
align-items: center;
padding: var(--mt-space-4);
color: var(--mt-text-primary);
text-decoration: none;
font-size: 16px;
font-weight: 500;
transition: background 0.2s ease;
}
.mt-mobile-menu-link:hover {
background: var(--mt-surface-muted);
}
.mt-mobile-menu-link .mt-menu-icon {
width: 24px;
height: 24px;
margin-right: var(--mt-space-3);
display: flex;
align-items: center;
justify-content: center;
color: var(--mt-primary);
}
.mt-mobile-menu-link .mt-menu-badge {
margin-left: auto;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
border-radius: var(--mt-radius-full);
}
.mt-mobile-menu-link .mt-menu-arrow {
margin-left: auto;
width: 20px;
height: 20px;
color: var(--mt-text-muted);
transition: transform 0.2s ease;
}
.mt-mobile-menu-item.has-children > .mt-mobile-menu-link .mt-menu-arrow {
transform: rotate(0deg);
}
.mt-mobile-menu-item.has-children.open > .mt-mobile-menu-link .mt-menu-arrow {
transform: rotate(90deg);
}
.mt-mobile-submenu {
display: none;
background: var(--mt-surface-muted);
}
.mt-mobile-menu-item.open > .mt-mobile-submenu {
display: block;
}
.mt-mobile-submenu .mt-mobile-menu-link {
padding-left: calc(var(--mt-space-4) + 24px);
font-weight: 400;
font-size: 15px;
}
.mt-mobile-submenu .mt-mobile-submenu .mt-mobile-menu-link {
padding-left: calc(var(--mt-space-4) + 48px);
font-size: 14px;
color: var(--mt-text-secondary);
}
.mt-mobile-menu-contact {
padding: var(--mt-space-4);
display: flex;
align-items: flex-start;
gap: var(--mt-space-3);
}
.mt-mobile-menu-contact-icon {
width: 24px;
height: 24px;
color: var(--mt-primary);
flex-shrink: 0;
}
.mt-mobile-menu-contact-content {
flex: 1;
}
.mt-mobile-menu-contact-label {
font-size: 12px;
color: var(--mt-text-muted);
margin-bottom: 2px;
}
.mt-mobile-menu-contact-value {
font-size: 15px;
font-weight: 500;
color: var(--mt-text-primary);
}
.mt-mobile-menu-contact-value a {
color: var(--mt-primary);
text-decoration: none;
}
.mt-mobile-menu-html {
padding: var(--mt-space-4);
font-size: 14px;
line-height: 1.5;
color: var(--mt-text-secondary);
}
.mt-mobile-menu-divider {
height: 8px;
background: var(--mt-surface-muted);
border: none;
margin: 0;
}
.mt-mobile-menu-footer {
padding: var(--mt-space-4);
border-top: 1px solid var(--mt-border-color);
background: var(--mt-surface-muted);
flex-shrink: 0;
}
.mt-mobile-menu-socials {
display: flex;
justify-content: center;
gap: var(--mt-space-3);
}
.mt-mobile-menu-socials a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--mt-surface);
color: var(--mt-text-secondary);
transition: all 0.2s ease;
}
.mt-mobile-menu-socials a:hover {
background: var(--mt-primary);
color: #fff;
}
body.mt-mobile-menu-open {
overflow: hidden;
}
@media (min-width: 992px) {
.mt-mobile-menu,
.mt-mobile-menu-wrap,
.mt-mobile-menu-overlay {
display: none !important;
}
}
.mt-mobile-menu-catalog {
padding: var(--mt-space-4);
}
.mt-mobile-menu-catalog-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--mt-space-2);
width: 100%;
padding: var(--mt-space-3) var(--mt-space-4);
background: var(--mt-primary);
color: #fff;
border-radius: var(--mt-radius-lg);
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s ease;
}
.mt-mobile-menu-catalog-btn:hover {
background: var(--mt-primary-hover);
color: #fff;
}
.mt-mobile-menu-promos {
padding: 0 var(--mt-space-4) var(--mt-space-4);
display: flex;
flex-direction: column;
gap: var(--mt-space-2);
}
.mt-mobile-menu-promo {
display: flex;
align-items: center;
gap: var(--mt-space-3);
padding: var(--mt-space-3);
background: var(--mt-surface-muted);
border-radius: var(--mt-radius-base);
text-decoration: none;
transition: background 0.2s ease;
}
.mt-mobile-menu-promo:hover {
background: var(--mt-border-color);
}
.mt-mobile-menu-promo-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--mt-primary);
color: #fff;
border-radius: var(--mt-radius-base);
flex-shrink: 0;
}
.mt-mobile-menu-promo-content {
display: flex;
flex-direction: column;
}
.mt-mobile-menu-promo-title {
font-size: 14px;
font-weight: 600;
color: var(--mt-text-primary);
}
.mt-mobile-menu-promo-subtitle {
font-size: 12px;
color: var(--mt-text-muted);
margin-top: 2px;
}
.mt-mobile-menu-section {
border-top: 8px solid var(--mt-surface-muted);
}
.mt-mobile-menu-section-title {
padding: var(--mt-space-3) var(--mt-space-4);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--mt-text-muted);
background: var(--mt-surface-muted);
}
.mt-mobile-menu-item {
border-bottom: 1px solid var(--mt-border-color);
}
.mt-mobile-menu-item:last-child {
border-bottom: none;
}
.mt-mobile-menu-link {
display: flex;
align-items: center;
padding: var(--mt-space-3) var(--mt-space-4);
color: var(--mt-text-primary);
text-decoration: none;
font-size: 15px;
transition: background 0.15s ease;
}
.mt-mobile-menu-link:hover,
.mt-mobile-menu-link:active {
background: var(--mt-surface-muted);
}
.mt-menu-icon {
width: 24px;
height: 24px;
margin-right: var(--mt-space-3);
display: flex;
align-items: center;
justify-content: center;
color: var(--mt-text-secondary);
flex-shrink: 0;
}
.mt-menu-text {
flex: 1;
}
.mt-menu-badge {
margin-left: var(--mt-space-2);
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
border-radius: var(--mt-radius-full);
background: var(--mt-primary);
color: #fff;
}
.mt-badge-accent { background: var(--mt-accent); }
.mt-badge-success { background: #0c296a; }
.mt-badge-error { background: #EF4444; }
.mt-badge-warning { background: #F59E0B; color: #000; }
.mt-menu-arrow {
margin-left: auto;
width: 20px;
height: 20px;
color: var(--mt-text-muted);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.mt-mobile-menu-item.has-children > .mt-mobile-menu-link {
cursor: pointer;
}
.mt-mobile-menu-item.open > .mt-mobile-menu-link .mt-menu-arrow {
transform: rotate(90deg);
}
.mt-mobile-submenu {
display: none;
list-style: none;
margin: 0;
padding: 0;
background: var(--mt-surface-muted);
}
.mt-mobile-menu-item.open > .mt-mobile-submenu {
display: block;
}
.mt-mobile-submenu .mt-mobile-menu-link {
padding-left: calc(var(--mt-space-4) + 24px + var(--mt-space-3));
font-size: 14px;
}
.mt-mobile-submenu .mt-mobile-submenu .mt-mobile-menu-link {
padding-left: calc(var(--mt-space-4) + 48px + var(--mt-space-3));
font-size: 13px;
color: var(--mt-text-secondary);
}
.mt-mobile-menu-contact {
display: flex;
align-items: flex-start;
gap: var(--mt-space-3);
padding: var(--mt-space-3) var(--mt-space-4);
}
.mt-mobile-menu-contact-icon {
width: 24px;
height: 24px;
color: var(--mt-primary);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.mt-mobile-menu-contact-content {
display: flex;
flex-direction: column;
}
.mt-mobile-menu-contact-label {
font-size: 12px;
color: var(--mt-text-muted);
margin-bottom: 2px;
}
.mt-mobile-menu-contact-value {
font-size: 14px;
font-weight: 500;
color: var(--mt-text-primary);
}
.mt-mobile-menu-contact-value a {
color: var(--mt-primary);
text-decoration: none;
}
.mt-mobile-menu-divider {
height: 8px;
background: var(--mt-surface-muted);
border: none !important;
margin: 0;
list-style: none;
}
.mt-mobile-menu-html {
padding: var(--mt-space-3) var(--mt-space-4);
font-size: 14px;
line-height: 1.5;
color: var(--mt-text-secondary);
}
.mt-mobile-menu-html-item {
border-bottom: none !important;
background: var(--mt-surface-muted);
}
.mt-mobile-menu-footer {
padding: var(--mt-space-4);
border-top: 1px solid var(--mt-border-color);
background: var(--mt-surface);
flex-shrink: 0;
}
.mt-mobile-menu-socials {
display: flex;
justify-content: center;
gap: var(--mt-space-2);
flex-wrap: wrap;
}
.mt-mobile-menu-socials a {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--mt-surface-muted);
color: var(--mt-text-secondary);
transition: all 0.2s ease;
}
.mt-mobile-menu-socials a:hover {
background: var(--mt-primary);
color: #fff;
}
@keyframes slideInLeft {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.mt-mobile-menu.active {
animation: slideInLeft 0.3s ease forwards;
}
.mt-mobile-menu-btn {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: var(--mt-radius-base);
cursor: pointer;
color: var(--mt-text-primary);
transition: background 0.2s ease;
}
.mt-mobile-menu-btn:hover {
background: var(--mt-surface-muted);
}
@media (max-width: 991px) {
.mt-mobile-menu-btn {
display: flex;
}
}
.mt-mobile-menu-auth {
margin: var(--mt-space-4);
padding: var(--mt-space-4);
background: var(--mt-surface-muted);
border-radius: var(--mt-radius-lg);
text-align: center;
}
.mt-mobile-menu-auth-text {
font-size: 14px;
color: var(--mt-text-secondary);
margin-bottom: var(--mt-space-3);
}
.mt-mobile-menu-auth-btn {
display: inline-block;
padding: var(--mt-space-3) var(--mt-space-6);
background: var(--mt-primary);
color: #fff;
font-size: 14px;
font-weight: 600;
border-radius: var(--mt-radius-base);
text-decoration: none;
transition: background 0.2s ease;
}
.mt-mobile-menu-auth-btn:hover {
background: var(--mt-primary-hover);
color: #fff;
}
.mt-menu-location-city {
display: block;
font-weight: 600;
color: var(--mt-text-primary);
}
.mt-menu-location-detail {
display: block;
font-size: 12px;
color: var(--mt-text-muted);
margin-top: 2px;
}
.mt-mobile-menu-promo-wrap {
padding: var(--mt-space-2) var(--mt-space-4);
}
.mt-mobile-menu-promo-arrow {
color: var(--mt-text-muted);
flex-shrink: 0;
}
body.mt-menu-open {
overflow: hidden;
position: fixed;
width: 100%;
}
.mt-content-top .container,
.mt-content-bottom .container,
.mt-home-content .container,
.mt-home-main .container {
width: 100%;
max-width: none;
padding: 0;
}
.mt-content-top .row,
.mt-content-bottom .row,
.mt-home-content .row,
.mt-home-main .row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.mt-content-top [class*="col-"],
.mt-content-bottom [class*="col-"],
.mt-home-content [class*="col-"],
.mt-home-main [class*="col-"] {
padding-left: 15px;
padding-right: 15px;
margin-bottom: var(--mt-space-6);
}
:where(.mt-content-top, .mt-content-bottom, .mt-home-content, .mt-home-main) [class*="col-"] { width: 100%; }
.col-xs-1 { width: 8.333%; }
.col-xs-2 { width: 16.666%; }
.col-xs-3 { width: 25%; }
.col-xs-4 { width: 33.333%; }
.col-xs-5 { width: 41.666%; }
.col-xs-6 { width: 50%; }
.col-xs-7 { width: 58.333%; }
.col-xs-8 { width: 66.666%; }
.col-xs-9 { width: 75%; }
.col-xs-10 { width: 83.333%; }
.col-xs-11 { width: 91.666%; }
.col-xs-12 { width: 100%; }
@media (min-width: 768px) {
.col-sm-1 { width: 8.333%; }
.col-sm-2 { width: 16.666%; }
.col-sm-3 { width: 25%; }
.col-sm-4 { width: 33.333%; }
.col-sm-5 { width: 41.666%; }
.col-sm-6 { width: 50%; }
.col-sm-7 { width: 58.333%; }
.col-sm-8 { width: 66.666%; }
.col-sm-9 { width: 75%; }
.col-sm-10 { width: 83.333%; }
.col-sm-11 { width: 91.666%; }
.col-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
.col-md-1 { width: 8.333%; }
.col-md-2 { width: 16.666%; }
.col-md-3 { width: 25%; }
.col-md-4 { width: 33.333%; }
.col-md-5 { width: 41.666%; }
.col-md-6 { width: 50%; }
.col-md-7 { width: 58.333%; }
.col-md-8 { width: 66.666%; }
.col-md-9 { width: 75%; }
.col-md-10 { width: 83.333%; }
.col-md-11 { width: 91.666%; }
.col-md-12 { width: 100%; }
}
@media (min-width: 1200px) {
.col-lg-1 { width: 8.333%; }
.col-lg-2 { width: 16.666%; }
.col-lg-3 { width: 25%; }
.col-lg-4 { width: 33.333%; }
.col-lg-5 { width: 41.666%; }
.col-lg-6 { width: 50%; }
.col-lg-7 { width: 58.333%; }
.col-lg-8 { width: 66.666%; }
.col-lg-9 { width: 75%; }
.col-lg-10 { width: 83.333%; }
.col-lg-11 { width: 91.666%; }
.col-lg-12 { width: 100%; }
}
.product-layout {
margin-bottom: var(--mt-space-6);
}
.product-thumb {
background: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
overflow: hidden;
transition: all 0.2s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.product-thumb:hover {
border-color: var(--mt-primary);
box-shadow: var(--mt-shadow-lg);
transform: translateY(-2px);
}
.product-thumb .image {
position: relative;
overflow: hidden;
background: var(--mt-surface-muted);
}
.product-thumb .image a {
display: block;
}
.product-thumb .image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.product-thumb:hover .image img {
transform: scale(1.05);
}
.product-thumb .image .label-sale,
.product-thumb .image .label-new {
position: absolute;
top: var(--mt-space-2);
left: var(--mt-space-2);
padding: var(--mt-space-1) var(--mt-space-2);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
border-radius: var(--mt-radius-base);
z-index: 1;
}
.product-thumb .image .label-sale {
background: var(--mt-error);
color: #fff;
}
.product-thumb .image .label-new {
background: var(--mt-success);
color: #fff;
}
.product-thumb .caption {
padding: var(--mt-space-4);
flex: 1;
display: flex;
flex-direction: column;
}
.product-thumb .caption h4,
.product-thumb .caption .name {
font-size: 14px;
font-weight: 500;
line-height: 1.4;
margin: 0 0 var(--mt-space-2);
flex-grow: 1;
}
.product-thumb .caption h4 a,
.product-thumb .caption .name a {
color: var(--mt-text-primary);
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-thumb .caption h4 a:hover,
.product-thumb .caption .name a:hover {
color: var(--mt-primary);
}
.product-thumb .caption .description {
display: none;
}
.product-thumb .rating {
margin-bottom: var(--mt-space-2);
}
.product-thumb .rating .fa-star,
.product-thumb .rating .fa-star-o,
.product-thumb .rating .fa-star-half-o {
color: #ffc107;
font-size: 12px;
}
.product-thumb .rating .fa-star-o {
color: var(--mt-border-color);
}
.product-thumb .price,
.product-thumb .caption .price {
font-size: 18px;
font-weight: 700;
color: var(--mt-text-primary);
margin-bottom: var(--mt-space-3);
}
.product-thumb .price-old {
font-size: 14px;
font-weight: 400;
color: var(--mt-text-muted);
text-decoration: line-through;
margin-right: var(--mt-space-2);
}
.product-thumb .price-new {
color: var(--mt-error);
}
.product-thumb .price-tax {
display: block;
font-size: 11px;
font-weight: 400;
color: var(--mt-text-muted);
}
.product-thumb .button-group {
display: flex;
gap: var(--mt-space-2);
margin-top: auto;
}
.product-thumb .button-group button {
flex: 1;
padding: var(--mt-space-2) var(--mt-space-3);
font-size: 13px;
font-weight: 500;
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-base);
background: var(--mt-surface);
color: var(--mt-text-primary);
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: var(--mt-space-1);
}
.product-thumb .button-group button:first-child {
flex: 2;
background: var(--mt-primary);
border-color: var(--mt-primary);
color: #fff;
}
.product-thumb .button-group button:first-child:hover {
background: var(--mt-primary-hover);
border-color: var(--mt-primary-hover);
}
.product-thumb .button-group button:hover {
border-color: var(--mt-primary);
color: var(--mt-primary);
}
.product-thumb .button-group button i {
font-size: 14px;
}
.product-thumb .button-group button:not(:first-child) span {
display: none;
}
.swiper-viewport {
position: relative;
overflow: hidden;
border-radius: var(--mt-radius-lg);
}
.swiper-container {
overflow: hidden;
}
.swiper-wrapper {
display: flex;
transition: transform 0.3s ease;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
}
.swiper-slide img {
width: 100%;
height: auto;
display: block;
}
.swiper-button-prev,
.swiper-button-next,
.swiper-pager .swiper-button-prev,
.swiper-pager .swiper-button-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--mt-shadow-base);
transition: all 0.2s ease;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
background: var(--mt-surface);
box-shadow: var(--mt-shadow-lg);
}
.swiper-button-prev {
left: var(--mt-space-4);
}
.swiper-button-next {
right: var(--mt-space-4);
}
.swiper-pagination {
position: absolute;
bottom: var(--mt-space-4);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: var(--mt-space-2);
z-index: 10;
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
}
.swiper-pagination-bullet-active,
.swiper-pagination-bullet:hover {
background: var(--mt-surface);
transform: scale(1.2);
}
.box-banner {
margin-bottom: var(--mt-space-6);
}
.box-banner img {
width: 100%;
height: auto;
display: block;
border-radius: var(--mt-radius-lg);
}
.box-html {
margin-bottom: var(--mt-space-6);
}
.box-category {
background: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
overflow: hidden;
margin-bottom: var(--mt-space-6);
}
.box-category > ul {
list-style: none;
margin: 0;
padding: 0;
}
.box-category > ul > li {
border-bottom: 1px solid var(--mt-border-color);
}
.box-category > ul > li:last-child {
border-bottom: none;
}
.box-category > ul > li > a {
display: block;
padding: var(--mt-space-3) var(--mt-space-4);
color: var(--mt-text-primary);
text-decoration: none;
font-size: 14px;
transition: all 0.2s ease;
}
.box-category > ul > li > a:hover,
.box-category > ul > li > a.active {
background: var(--mt-surface-muted);
color: var(--mt-primary);
}
.box-category > ul > li > ul {
list-style: none;
margin: 0;
padding: 0;
background: var(--mt-surface-muted);
}
.box-category > ul > li > ul > li > a {
display: block;
padding: var(--mt-space-2) var(--mt-space-4) var(--mt-space-2) var(--mt-space-8);
color: var(--mt-text-secondary);
text-decoration: none;
font-size: 13px;
}
.box-category > ul > li > ul > li > a:hover {
color: var(--mt-primary);
}
.box-filter {
background: var(--mt-surface);
border: 1px solid var(--mt-border-color);
border-radius: var(--mt-radius-lg);
margin-bottom: var(--mt-space-6);
}
.box-filter .panel-heading {
padding: var(--mt-space-3) var(--mt-space-4);
border-bottom: 1px solid var(--mt-border-color);
font-weight: 600;
font-size: 14px;
}
.box-filter .panel-body {
padding: var(--mt-space-4);
}
.mt-content-top > *,
.mt-home-main > * {
margin-bottom: var(--mt-space-8);
}
h3.title-module,
.box-heading,
h2.subtitle {
font-size: 24px;
font-weight: 700;
color: var(--mt-text-primary);
margin-bottom: var(--mt-space-6);
padding-bottom: var(--mt-space-3);
border-bottom: 2px solid var(--mt-border-color);
}
.carousel {
position: relative;
}
.carousel .carousel-inner {
overflow: hidden;
}
.carousel .carousel-inner .item {
display: none;
}
.carousel .carousel-inner .item.active {
display: block;
}
.carousel-controls {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: none;
padding: 0 var(--mt-space-2);
}
.carousel-controls button {
pointer-events: all;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--mt-border-color);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.carousel-controls button:hover {
background: var(--mt-surface);
border-color: var(--mt-primary);
color: var(--mt-primary);
}
@media (min-width: 1200px) {
.product-layout.col-lg-2 { width: 16.666%; }
.product-layout.col-lg-3 { width: 25%; }
.product-layout.col-lg-4 { width: 33.333%; }
.product-layout.col-lg-6 { width: 50%; }
}
@media (min-width: 992px) and (max-width: 1199px) {
.product-layout.col-md-3 { width: 25%; }
.product-layout.col-md-4 { width: 33.333%; }
.product-layout.col-md-6 { width: 50%; }
}
@media (min-width: 768px) and (max-width: 991px) {
.product-layout.col-sm-4 { width: 33.333%; }
.product-layout.col-sm-6 { width: 50%; }
}
@media (max-width: 767px) {
.product-layout.col-xs-6 { width: 50%; }
.product-layout.col-xs-12 { width: 100%; }
.product-thumb .caption {
padding: var(--mt-space-3);
}
.product-thumb .caption h4 {
font-size: 13px;
}
.product-thumb .price {
font-size: 16px;
}
.product-thumb .button-group button {
padding: var(--mt-space-2);
}
.product-thumb .button-group button:first-child span {
display: none;
}
.swiper-button-prev,
.swiper-button-next {
width: 36px;
height: 36px;
}
}
@media (max-width: 1023px) {
.mt-header-inner {
padding: var(--mt-space-3) 0;
}
.mt-logo img {
max-height: 36px;
}
.mt-header-search {
display: none;
}
.mt-header-actions {
gap: var(--mt-space-1);
}
.mt-header-action-btn {
padding: var(--mt-space-2);
}
}
@media (max-width: 767px) {
.mt-form-input,
.mt-form-select,
.mt-form-textarea {
font-size: 16px;
padding: var(--mt-space-3);
}
.mt-btn {
padding: var(--mt-space-3) var(--mt-space-4);
font-size: var(--mt-text-base);
}
.mt-btn-block {
width: 100%;
}
}
@media (max-width: 1023px) {
.mt-page {
padding: var(--mt-space-4) 0;
}
.mt-page-title {
font-size: var(--mt-text-xl);
}
.mt-breadcrumb {
font-size: var(--mt-text-xs);
flex-wrap: wrap;
}
}
@media (max-width: 767px) {
.mt-product-main {
flex-direction: column;
}
.mt-product-gallery {
margin-bottom: var(--mt-space-6);
}
.mt-product-info {
padding: 0;
}
.mt-product-title {
font-size: var(--mt-text-xl);
}
.mt-product-price {
font-size: var(--mt-text-2xl);
}
}
@media (max-width: 1023px) {
.mt-catalog-layout {
flex-direction: column;
}
.mt-catalog-sidebar {
display: none;
}
.mt-catalog-content {
width: 100%;
}
.mt-catalog-toolbar {
flex-wrap: wrap;
gap: var(--mt-space-2);
}
.mt-filter-toggle {
order: -1;
width: 100%;
}
}
@media (max-width: 767px) {
.mt-cart-table th,
.mt-cart-table td {
padding: var(--mt-space-2);
font-size: var(--mt-text-sm);
}
.mt-cart-product-image {
width: 60px;
}
.mt-cart-summary {
padding: var(--mt-space-4);
}
}
@media (max-width: 767px) {
.mt-checkout-layout {
flex-direction: column;
}
.mt-checkout-main,
.mt-checkout-sidebar {
width: 100%;
}
}
@media (max-width: 767px) {
.mt-advantages-grid {
grid-template-columns: 1fr 1fr;
gap: var(--mt-space-3);
}
.mt-advantage-item {
padding: var(--mt-space-3);
text-align: center;
flex-direction: column;
}
.mt-advantage-icon {
margin-bottom: var(--mt-space-2);
}
.mt-advantage-title {
font-size: var(--mt-text-sm);
}
.mt-advantage-text {
font-size: var(--mt-text-xs);
}
}
@media (max-width: 479px) {
.mt-advantages-grid {
grid-template-columns: 1fr;
}
.mt-advantage-item {
flex-direction: row;
text-align: left;
}
.mt-advantage-icon {
margin-bottom: 0;
margin-right: var(--mt-space-3);
}
}
.mt-header-catalog {
position: relative;
}
.mt-megamenu {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: var(--mt-z-dropdown);
display: none;
width: var(--mt-sidebar-width);
padding: var(--mt-space-2) 0;
background: var(--mt-surface);
border-radius: var(--mt-radius-lg);
box-shadow: 0 4px 24px rgba(18, 23, 21, 0.12);
}
.mt-megamenu.is-active {
display: block;
}
.mt-megamenu-list {
list-style: none;
margin: 0;
padding: 0;
}
.mt-megamenu-item {
position: relative;
}
.mt-megamenu-link {
display: flex;
align-items: center;
gap: var(--mt-space-3);
padding: 0.625rem var(--mt-space-4);
color: var(--mt-text-primary);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
line-height: 1.4;
text-decoration: none;
transition: background-color var(--mt-transition-base), color var(--mt-transition-base);
}
.mt-megamenu-link:hover,
.mt-megamenu-item.is-open > .mt-megamenu-link {
background: var(--mt-surface-muted);
color: var(--mt-primary);
}
.mt-megamenu-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 24px;
height: 24px;
color: var(--mt-text-secondary);
}
.mt-megamenu-icon svg {
width: 20px;
height: 20px;
}
.mt-megamenu-item.is-open .mt-megamenu-icon,
.mt-megamenu-link:hover .mt-megamenu-icon {
color: var(--mt-primary);
}
.mt-megamenu-text {
flex: 1;
min-width: 0;
}
.mt-megamenu-arrow {
flex-shrink: 0;
margin-left: auto;
color: var(--mt-text-muted);
}
.mt-megamenu-panel {
position: absolute;
top: calc(var(--mt-space-2) * -1);
left: 100%;
z-index: 1;
display: none;
width: 760px;
min-height: calc(100% + var(--mt-space-4));
margin-left: var(--mt-space-2);
background: var(--mt-surface);
border-radius: var(--mt-radius-lg);
box-shadow: 0 4px 24px rgba(18, 23, 21, 0.12);
}
.mt-megamenu-item.is-open > .mt-megamenu-panel {
display: block;
}
.mt-megamenu-panel-inner {
max-height: 520px;
padding: var(--mt-space-6);
overflow-y: auto;
}
.mt-megamenu-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--mt-space-6) var(--mt-space-8);
}
.mt-megamenu-panel[data-columns="2"] .mt-megamenu-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mt-megamenu-panel[data-columns="4"] .mt-megamenu-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mt-megamenu-panel[data-columns="5"] .mt-megamenu-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.mt-megamenu-panel[data-columns="6"] .mt-megamenu-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.mt-megamenu-heading {
display: block;
margin-bottom: var(--mt-space-2);
color: var(--mt-text-primary);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
line-height: 1.3;
text-decoration: none;
}
.mt-megamenu-heading:hover {
color: var(--mt-primary);
}
.mt-megamenu-sublist {
list-style: none;
margin: 0;
padding: 0;
}
.mt-megamenu-sublist li + li {
margin-top: var(--mt-space-1);
}
.mt-megamenu-sublink {
display: block;
color: var(--mt-text-secondary);
font-size: var(--mt-text-sm);
line-height: 1.5;
text-decoration: none;
transition: color var(--mt-transition-base);
}
.mt-megamenu-sublink:hover {
color: var(--mt-primary);
}
.mt-megamenu-promo {
margin-top: var(--mt-space-5);
border-radius: var(--mt-radius-base);
overflow: hidden;
}
.mt-megamenu-promo img {
display: block;
width: 100%;
height: auto;
}
.mt-megamenu-footer {
margin-top: var(--mt-space-4);
padding-top: var(--mt-space-4);
border-top: 1px solid var(--mt-border-color);
}
.mt-megamenu-viewall {
display: inline-flex;
align-items: center;
color: var(--mt-link-color);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
text-decoration: none;
}
.mt-megamenu-viewall:hover {
text-decoration: underline;
}
@media (max-width: 991px) {
.mt-megamenu {
display: none !important;
}
}
.mt-hero {
margin-top: var(--mt-section-gap);
}
.mt-advantage-item:hover {
box-shadow: var(--mt-shadow-base);
}
.mt-advantage-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
color: var(--mt-primary);
background: none;
}
.mt-advantage-icon svg {
width: 32px;
height: 32px;
}
@media (max-width: 1199px) {
.mt-advantages-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.mt-advantages-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mt-advantage-item {
padding: var(--mt-card-pad);
}
}
.mt-category-tiles {
margin-top: var(--mt-section-gap);
}
.mt-category-tiles-row {
display: flex;
align-items: stretch;
gap: var(--mt-grid-gap);
}
.mt-category-tile {
display: flex;
flex: 1 1 0;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: var(--mt-space-2);
min-width: 0;
padding: var(--mt-card-pad);
color: var(--mt-text-primary);
text-decoration: none;
background-color: var(--mt-surface);
border-radius: var(--mt-card-radius);
transition: box-shadow var(--mt-transition-base);
}
.mt-category-tile:hover {
color: var(--mt-text-primary);
box-shadow: var(--mt-shadow-base);
}
.mt-category-tile-image {
display: block;
width: auto;
max-width: 100%;
height: auto;
}
.mt-category-tile-title {
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-bold);
line-height: 1.25;
text-align: center;
}
@media (max-width: 991px) {
.mt-category-tiles-row {
overflow-x: auto;
padding-bottom: var(--mt-space-2);
scroll-snap-type: x mandatory;
}
.mt-category-tile {
flex: 0 0 140px;
scroll-snap-align: start;
}
}
.mt-promo-banners {
margin-top: var(--mt-section-gap);
}
.mt-promo-banners-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--mt-grid-gap);
}
.mt-promo-banners-grid[data-columns="2"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mt-promo-banners-grid[data-columns="3"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mt-promo-banners-grid[data-columns="5"] {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.mt-promo-banners-grid[data-columns="6"] {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.mt-promo-banner {
position: relative;
display: block;
min-width: 0;
max-width: 100%;
overflow: hidden;
border-radius: var(--mt-card-radius);
}
.mt-promo-banner-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--mt-transition-base);
}
.mt-promo-banner:hover .mt-promo-banner-image {
transform: scale(1.03);
}
.mt-promo-banner-overlay {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
width: 100%;
height: 100%;
padding: var(--mt-card-pad-lg);
}
.mt-promo-banner-title {
max-width: 70%;
color: var(--mt-white);
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-bold);
line-height: 1.25;
text-shadow: 0 1px 4px rgba(18, 23, 21, 0.35);
}
.mt-promo-banner-button {
align-self: flex-start;
}
@media (max-width: 991px) {
.mt-promo-banners-grid,
.mt-promo-banners-grid[data-columns="3"],
.mt-promo-banners-grid[data-columns="5"],
.mt-promo-banners-grid[data-columns="6"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575px) {
.mt-promo-banners-grid,
.mt-promo-banners-grid[data-columns="2"],
.mt-promo-banners-grid[data-columns="3"],
.mt-promo-banners-grid[data-columns="5"],
.mt-promo-banners-grid[data-columns="6"] {
grid-template-columns: minmax(0, 1fr);
}
}
.mt-btn-outline-light {
color: var(--mt-white);
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.7);
}
.mt-btn-outline-light:hover,
.mt-btn-outline-light:focus {
color: var(--mt-text-primary);
background-color: var(--mt-surface);
border-color: var(--mt-white);
}
.mt-slideshow-vertical .mt-slideshow-track {
flex-direction: column;
}
.mt-slideshow-vertical .mt-slideshow-dots {
top: 50%;
right: var(--mt-space-4);
bottom: auto;
left: auto;
flex-direction: column;
transform: translateY(-50%);
}
.mt-topmenu {
background-color: var(--mt-surface);
border-top: 1px solid var(--mt-border-color);
}
.mt-topmenu-list {
display: flex;
align-items: center;
gap: var(--mt-space-6);
margin: 0;
padding: 0;
list-style: none;
}
.mt-topmenu-item {
position: relative;
}
.mt-topmenu-link {
display: flex;
align-items: center;
gap: var(--mt-space-2);
padding: 0.75rem 0;
color: var(--mt-text-primary);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
line-height: 1.5;
text-decoration: none;
white-space: nowrap;
transition: color var(--mt-transition-base);
}
.mt-topmenu-link:hover,
.mt-topmenu-item:hover > .mt-topmenu-link {
color: var(--mt-primary);
}
.mt-topmenu-icon {
display: flex;
align-items: center;
flex-shrink: 0;
}
.mt-topmenu-icon svg {
width: 18px;
height: 18px;
}
.mt-topmenu-arrow {
flex-shrink: 0;
color: var(--mt-text-muted);
transition: transform var(--mt-transition-base);
}
.mt-topmenu-item:hover .mt-topmenu-arrow {
transform: rotate(180deg);
}
.mt-topmenu-badge {
padding: 0 var(--mt-space-1);
color: var(--mt-white);
font-size: 0.625rem;
font-weight: var(--mt-font-semibold);
line-height: 1.4;
background-color: var(--mt-accent);
border-radius: var(--mt-radius-xs);
}
.mt-topmenu-panel {
position: absolute;
top: 100%;
left: 0;
z-index: var(--mt-z-dropdown);
display: none;
min-width: 560px;
padding: var(--mt-space-6);
background-color: var(--mt-surface);
border-radius: var(--mt-radius-lg);
box-shadow: 0 4px 24px rgba(18, 23, 21, 0.12);
}
.mt-topmenu-item:hover > .mt-topmenu-panel {
display: block;
}
.mt-topmenu-panel-inner {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--mt-space-6) var(--mt-space-8);
}
.mt-topmenu-panel-inner[data-columns="2"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mt-topmenu-panel-inner[data-columns="3"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mt-topmenu-panel-inner[data-columns="5"] {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.mt-topmenu-panel-inner[data-columns="6"] {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.mt-topmenu-heading {
display: block;
margin-bottom: var(--mt-space-2);
color: var(--mt-text-primary);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
line-height: 1.3;
text-decoration: none;
}
.mt-topmenu-heading:hover {
color: var(--mt-primary);
}
.mt-topmenu-sublist {
margin: 0;
padding: 0;
list-style: none;
}
.mt-topmenu-sublist li + li {
margin-top: var(--mt-space-1);
}
.mt-topmenu-sublink {
display: block;
color: var(--mt-text-secondary);
font-size: var(--mt-text-sm);
line-height: 1.5;
text-decoration: none;
transition: color var(--mt-transition-base);
}
.mt-topmenu-sublink:hover {
color: var(--mt-primary);
}
@media (max-width: 991px) {
.mt-topmenu {
display: none;
}
}
.mt-btn-accent {
color: var(--mt-white);
background-color: var(--mt-accent);
border: 1px solid var(--mt-accent);
}
.mt-btn-accent:hover,
.mt-btn-accent:focus {
color: var(--mt-white);
background-color: var(--mt-accent-hover);
border-color: var(--mt-accent-hover);
}
.mt-products {
margin-top: var(--mt-section-gap);
}
.mt-section-title-link {
color: inherit;
text-decoration: none;
}
.mt-section-title-link:hover {
color: var(--mt-primary);
}
.mt-products-more {
display: flex;
justify-content: center;
margin-top: var(--mt-space-4);
}
.mt-products-more-btn {
gap: var(--mt-space-2);
height: 48px;
padding: 0 var(--mt-space-12);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
}
@media (max-width: 1399px) {
.mt-products-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 1199px) {
.mt-products-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.mt-products-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mt-products[data-mobile-view="full"] .mt-products-grid {
grid-template-columns: minmax(0, 1fr);
}
.mt-products[data-mobile-view="slider"] .mt-products-grid {
display: flex;
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.mt-products[data-mobile-view="slider"] .mt-product-card {
flex: 0 0 68%;
min-width: 0;
scroll-snap-align: start;
}
.mt-products[data-mobile-view="slider"] .mt-product-card-hidden {
display: flex;
}
.mt-products[data-mobile-view="horizontal"] .mt-products-grid {
grid-template-columns: minmax(0, 1fr);
}
.mt-products[data-mobile-view="horizontal"] .mt-product-card {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: var(--mt-space-3);
align-items: start;
}
.mt-products[data-mobile-view="horizontal"] .mt-product-card-top {
margin-bottom: 0;
}
.mt-products[data-mobile-view="horizontal"] .mt-product-bottom {
grid-column: 1 / -1;
}
.mt-products[data-mobile-view="minimal"] .mt-product-meta,
.mt-products[data-mobile-view="minimal"] .mt-product-rating,
.mt-products[data-mobile-view="minimal"] .mt-product-attributes,
.mt-products[data-mobile-view="minimal"] .mt-product-actions {
display: none;
}
}
.mt-reviews {
margin-top: var(--mt-section-gap);
}
.mt-reviews-body {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: var(--mt-space-6);
align-items: start;
padding: var(--mt-card-pad-lg);
background-color: var(--mt-surface);
border-radius: var(--mt-card-radius);
}
.mt-reviews-summary {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--mt-space-2);
padding: var(--mt-card-pad-lg);
text-align: center;
background-color: var(--mt-surface-muted);
border-radius: var(--mt-radius-base);
}
.mt-reviews-score {
color: var(--mt-text-primary);
font-size: 2.5rem;
font-weight: var(--mt-font-bold);
line-height: 1;
}
.mt-reviews-stars {
display: flex;
gap: 2px;
}
.mt-reviews-total {
color: var(--mt-text-muted);
font-size: var(--mt-text-sm);
}
.mt-reviews-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--mt-space-4);
}
.mt-review {
padding: var(--mt-card-pad);
background-color: var(--mt-surface-muted);
border-radius: var(--mt-radius-base);
}
.mt-review-head {
display: flex;
align-items: center;
gap: var(--mt-space-3);
margin-bottom: var(--mt-space-2);
}
.mt-review-author {
flex: 1 1 auto;
min-width: 0;
color: var(--mt-text-primary);
font-size: var(--mt-text-base);
font-weight: var(--mt-font-semibold);
}
.mt-review-date {
flex-shrink: 0;
color: var(--mt-text-muted);
font-size: var(--mt-text-xs);
}
.mt-review-rating {
display: flex;
gap: 2px;
margin-bottom: var(--mt-space-2);
}
.mt-review-text {
margin: 0 0 var(--mt-space-2);
color: var(--mt-text-secondary);
font-size: var(--mt-text-sm);
line-height: 1.5;
}
.mt-review-product {
color: var(--mt-link-color);
font-size: var(--mt-text-xs);
text-decoration: none;
}
.mt-review-product:hover {
text-decoration: underline;
}
@media (max-width: 991px) {
.mt-reviews-body {
grid-template-columns: minmax(0, 1fr);
}
.mt-reviews-list {
grid-template-columns: minmax(0, 1fr);
}
}
.mt-topbar {
position: relative;
z-index: 210;
background-color: var(--mt-surface-muted);
border-bottom: 1px solid var(--mt-border-color);
}
.mt-topbar-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mt-space-4);
min-height: 42px;
}
.mt-topbar-left,
.mt-topbar-right {
display: flex;
align-items: center;
gap: var(--mt-space-4);
}
.mt-topbar-list {
display: flex;
align-items: center;
gap: var(--mt-space-4);
margin: 0;
padding: 0;
list-style: none;
}
.mt-topbar-link {
display: inline-flex;
align-items: center;
gap: var(--mt-space-1);
color: var(--mt-link-color);
font-size: var(--mt-text-xs);
line-height: 1.5;
text-decoration: underline;
white-space: nowrap;
}
.mt-topbar-link:hover {
text-decoration: none;
}
.mt-topbar-phone {
display: inline-flex;
align-items: center;
gap: var(--mt-space-1);
color: var(--mt-text-primary);
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-semibold);
text-decoration: none;
white-space: nowrap;
}
.mt-topbar-phone:hover {
color: var(--mt-primary);
}
.mt-topbar .mt-lang-toggle,
.mt-topbar form {
margin: 0;
}
.mt-topbar .btn,
.mt-topbar button {
padding: 2px var(--mt-space-2);
font-size: var(--mt-text-xs);
}
@media (max-width: 991px) {
.mt-topbar {
display: none;
}
}
.mt-catalog-layout {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: var(--mt-space-6);
align-items: start;
}
.mt-catalog-content {
min-width: 0;
}
.mt-catalog-content .mt-products-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mt-catalog-toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--mt-space-3);
margin-bottom: var(--mt-grid-gap);
padding: var(--mt-space-3) var(--mt-card-pad);
background-color: var(--mt-surface);
border-radius: var(--mt-card-radius);
}
.mt-catalog-toolbar .mt-filter-toggle {
margin-right: auto;
}
.mt-catalog-toolbar .mt-catalog-sort {
margin-right: auto;
}
.mt-catalog-view {
display: flex;
gap: var(--mt-space-2);
}
.mt-sidebar-category-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.mt-sidebar-category-item + .mt-sidebar-category-item {
border-top: 1px solid var(--mt-border-color);
}
.mt-sidebar-category-link {
display: flex;
align-items: center;
gap: var(--mt-space-3);
padding: var(--mt-space-3) 0;
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
line-height: 1.4;
color: var(--mt-text-primary);
}
.mt-sidebar-category-link:hover {
color: var(--mt-primary);
}
.mt-sidebar-category-item.is-active .mt-sidebar-category-link {
color: var(--mt-primary);
}
.mt-sidebar-category-name {
flex: 1 1 auto;
min-width: 0;
}
.mt-sidebar-category-arrow {
flex-shrink: 0;
color: var(--mt-text-muted);
}
.mt-view-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
color: var(--mt-text-secondary);
background: var(--mt-surface);
border: 1px solid var(--mt-border-color-dark);
border-radius: var(--mt-radius-base);
cursor: pointer;
transition: color var(--mt-transition-fast), background-color var(--mt-transition-fast), border-color var(--mt-transition-fast);
}
.mt-view-btn:hover {
color: var(--mt-primary);
border-color: var(--mt-primary);
}
.mt-view-btn.is-active {
color: var(--mt-white);
background: var(--mt-primary);
border-color: var(--mt-primary);
}
.mt-products-grid.is-list {
grid-template-columns: minmax(0, 1fr);
}
.mt-products-grid.is-list .mt-product-card {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: var(--mt-space-6);
align-items: start;
}
.mt-products-grid.is-list .mt-product-card-top {
height: auto;
}
.mt-products-grid.is-list .mt-product-image {
height: 180px;
}
.mt-products-grid.is-list .mt-product-image img {
max-height: 180px;
}
.mt-products-grid.is-list .mt-product-card-bottom {
display: flex;
flex-direction: column;
gap: var(--mt-space-3);
height: auto;
padding-top: 0;
}
.mt-products-grid.is-list .mt-product-name {
font-size: var(--mt-text-base);
-webkit-line-clamp: 2;
}
.mt-products-grid.is-list .mt-product-price-row {
margin-top: auto;
}
.mt-products-grid.is-list .mt-product-attributes {
display: block;
}
@media (max-width: 767px) {
.mt-products-grid.is-list .mt-product-card {
grid-template-columns: minmax(0, 1fr);
}
}
.mt-catalog-sidebar {
position: static;
max-height: none;
overflow: visible;
padding: var(--mt-card-pad);
background-color: var(--mt-surface);
border-radius: var(--mt-card-radius);
}
.mt-catalog-sidebar-right {
min-width: 0;
}
@media (max-width: 1399px) {
.mt-catalog-content .mt-products-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 991px) {
.mt-catalog-layout {
grid-template-columns: minmax(0, 1fr);
}
.mt-catalog-content .mt-products-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.mt-product-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 394px;
gap: var(--mt-space-6);
align-items: start;
margin-bottom: var(--mt-space-6);
}
.mt-product-layout .mt-product-main {
display: grid;
grid-template-columns: 458px minmax(0, 1fr);
gap: var(--mt-space-6);
align-items: start;
margin-bottom: 0;
padding: var(--mt-card-pad-lg);
background-color: var(--mt-surface);
border-radius: var(--mt-card-radius);
}
.mt-product-layout .mt-product-gallery {
position: static;
min-width: 0;
}
.mt-product-layout .mt-product-info {
min-width: 0;
padding: 0;
background: none;
border: 0;
border-radius: 0;
}
.mt-product-purchase {
position: sticky;
top: var(--mt-space-4);
padding: var(--mt-card-pad-lg);
background-color: var(--mt-surface);
border-radius: var(--mt-card-radius);
}
.mt-product-purchase .mt-product-price-current {
font-size: 1.75rem;
font-weight: var(--mt-font-semibold);
line-height: 1.2;
}
@media (max-width: 1199px) {
.mt-product-layout {
grid-template-columns: minmax(0, 1fr);
}
.mt-product-purchase {
position: static;
}
}
@media (max-width: 767px) {
.mt-product-layout .mt-product-main {
grid-template-columns: minmax(0, 1fr);
padding: var(--mt-card-pad);
}
}
.mt-product-tabs .mt-tab-panel {
color: var(--mt-text-secondary);
}
.mt-product-tabs .mt-tab-panel h1,
.mt-product-tabs .mt-tab-panel h2,
.mt-product-tabs .mt-tab-panel h3,
.mt-product-tabs .mt-tab-panel h4,
.mt-product-tabs .mt-tab-panel b,
.mt-product-tabs .mt-tab-panel strong {
color: var(--mt-text-primary);
}
.mt-product-description,
.mt-tab-panel p,
.mt-tab-panel li {
color: var(--mt-text-secondary);
font-size: var(--mt-text-sm);
line-height: 1.6;
}
.mt-page {
padding: var(--mt-section-gap) 0;
}
.mt-page-title {
margin: 0 0 var(--mt-space-4);
color: var(--mt-text-primary);
font-size: var(--mt-text-2xl);
font-weight: var(--mt-font-bold);
line-height: 1.5;
}
.mt-catalog-layout-full {
grid-template-columns: minmax(0, 1fr);
}
.mt-catalog-layout-full .mt-products-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.mt-brands {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--mt-grid-gap);
}
.mt-brands-group {
padding: var(--mt-card-pad);
background-color: var(--mt-surface);
border-radius: var(--mt-card-radius);
}
.mt-brands-letter {
margin-bottom: var(--mt-space-2);
color: var(--mt-primary);
font-size: var(--mt-text-lg);
font-weight: var(--mt-font-bold);
}
.mt-brands-list {
margin: 0;
padding: 0;
list-style: none;
}
.mt-brands-list li + li {
margin-top: var(--mt-space-1);
}
.mt-brands-link {
color: var(--mt-text-secondary);
font-size: var(--mt-text-sm);
text-decoration: none;
}
.mt-brands-link:hover {
color: var(--mt-primary);
}
.mt-sitemap {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--mt-grid-gap);
}
.mt-sitemap-column {
padding: var(--mt-card-pad-lg);
background-color: var(--mt-surface);
border-radius: var(--mt-card-radius);
}
.mt-sitemap-title {
margin: 0 0 var(--mt-space-3);
color: var(--mt-text-primary);
font-size: var(--mt-text-base);
font-weight: var(--mt-font-bold);
}
.mt-sitemap-title + .mt-sitemap-list {
margin-bottom: var(--mt-space-6);
}
.mt-sitemap-list,
.mt-sitemap-sublist {
margin: 0;
padding: 0;
list-style: none;
}
.mt-sitemap-sublist {
margin: var(--mt-space-1) 0 var(--mt-space-2) var(--mt-space-4);
}
.mt-sitemap-list a,
.mt-sitemap-sublist a {
display: inline-block;
padding: 2px 0;
color: var(--mt-text-secondary);
font-size: var(--mt-text-sm);
text-decoration: none;
}
.mt-sitemap-list a:hover,
.mt-sitemap-sublist a:hover {
color: var(--mt-primary);
}
.mt-currency-select {
height: 34px;
padding: 0 var(--mt-space-2);
color: var(--mt-text-primary);
font-size: var(--mt-text-sm);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color-dark);
border-radius: var(--mt-radius-base);
}
.mt-form-select {
height: 48px;
padding: 0 var(--mt-space-4);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color-dark);
border-radius: var(--mt-radius-base);
cursor: pointer;
}
.mt-search-form-inline {
display: flex;
gap: var(--mt-space-2);
}
@media (max-width: 1199px) {
.mt-catalog-layout-full .mt-products-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mt-brands {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mt-sitemap {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 767px) {
.mt-catalog-layout-full .mt-products-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mt-brands {
grid-template-columns: minmax(0, 1fr);
}
}
.mt-page-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--mt-space-6);
align-items: start;
}
.mt-page-layout-sidebar {
grid-template-columns: 280px minmax(0, 1fr);
}
.mt-page-layout-right {
grid-template-columns: minmax(0, 1fr) 280px;
}
.mt-page-sidebar {
min-width: 0;
}
.mt-page-content {
min-width: 0;
padding: var(--mt-card-pad-lg);
background-color: var(--mt-surface);
border-radius: var(--mt-card-radius);
}
.mt-page-content > h1:first-child,
.mt-page-content > h2:first-child {
margin-top: 0;
}
.mt-table-wrap {
width: 100%;
overflow-x: auto;
}
.mt-table {
width: 100%;
margin-bottom: var(--mt-space-4);
border-collapse: collapse;
font-size: var(--mt-text-sm);
}
.mt-table th,
.mt-table td {
padding: var(--mt-space-3);
color: var(--mt-text-secondary);
text-align: left;
vertical-align: middle;
border-bottom: 1px solid var(--mt-border-color-dark);
}
.mt-table thead td,
.mt-table thead th {
color: var(--mt-text-primary);
font-weight: var(--mt-font-semibold);
white-space: nowrap;
background-color: var(--mt-surface-muted);
}
.mt-table tbody tr:hover td {
background-color: var(--mt-table-hover);
}
.mt-table .text-right,
.mt-table td.text-right {
text-align: right;
}
.mt-table .text-center {
text-align: center;
}
.mt-card {
margin-bottom: var(--mt-space-4);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color-dark);
border-radius: var(--mt-card-radius);
}
.mt-card-head {
padding: var(--mt-space-3) var(--mt-card-pad);
border-bottom: 1px solid var(--mt-border-color-dark);
}
.mt-card-title {
margin: 0;
color: var(--mt-text-primary);
font-size: var(--mt-text-base);
font-weight: var(--mt-font-semibold);
}
.mt-card-body {
padding: var(--mt-card-pad);
}
.mt-form-group {
margin-bottom: var(--mt-space-3);
}
.mt-form-label {
color: var(--mt-text-secondary);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
}
.mt-form-group.is-required .mt-form-label::after {
content: " *";
color: var(--mt-error);
}
.mt-form-field {
min-width: 0;
}
.mt-form-input,
.mt-form-textarea,
select.mt-form-input {
width: 100%;
min-height: 40px;
padding: var(--mt-space-2) var(--mt-space-3);
color: var(--mt-text-primary);
font-family: inherit;
font-size: var(--mt-text-sm);
background-color: var(--mt-surface);
border: 1px solid var(--mt-border-color-dark);
border-radius: var(--mt-radius-base);
transition: border-color var(--mt-transition-base);
}
.mt-form-input:focus,
.mt-form-textarea:focus {
border-color: var(--mt-primary);
outline: none;
}
.mt-form-help {
margin-top: var(--mt-space-1);
color: var(--mt-text-muted);
font-size: var(--mt-text-xs);
}
.mt-form-error {
margin-top: var(--mt-space-1);
color: var(--mt-error);
font-size: var(--mt-text-xs);
}
.mt-form-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mt-space-3);
margin-top: var(--mt-space-6);
padding-top: var(--mt-space-4);
border-top: 1px solid var(--mt-border-color);
}
.mt-pull-right {
margin-left: auto;
}
.mt-alert {
margin-bottom: var(--mt-space-4);
padding: var(--mt-space-3) var(--mt-card-pad);
font-size: var(--mt-text-sm);
border-radius: var(--mt-radius-base);
}
.mt-alert-error {
color: var(--mt-error-dark);
background-color: var(--mt-error-light);
}
.mt-alert-success {
color: var(--mt-accent-700);
background-color: var(--mt-accent-50);
}
.mt-alert-info {
color: var(--mt-info-dark);
background-color: var(--mt-info-light);
}
.mt-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--mt-space-4);
}
.mt-col {
min-width: 0;
}
.mt-list {
margin: 0;
padding: 0;
list-style: none;
}
.mt-list-item {
padding: var(--mt-space-2) 0;
border-bottom: 1px solid var(--mt-border-color);
}
.mt-radio,
.mt-checkbox {
display: block;
margin-bottom: var(--mt-space-2);
color: var(--mt-text-secondary);
font-size: var(--mt-text-sm);
}
@media (max-width: 991px) {
.mt-page-layout-sidebar,
.mt-page-layout-right {
grid-template-columns: minmax(0, 1fr);
}
.mt-form-group {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.mt-row {
grid-template-columns: minmax(0, 1fr);
}
}
.mt-account-menu {
display: flex;
flex-direction: column;
padding: var(--mt-space-2);
background-color: var(--mt-surface);
border-radius: var(--mt-card-radius);
}
.mt-account-menu-link {
display: block;
padding: var(--mt-space-2) var(--mt-space-3);
color: var(--mt-text-secondary);
font-size: var(--mt-text-sm);
line-height: 1.4;
text-decoration: none;
border-radius: var(--mt-radius-base);
transition: background-color var(--mt-transition-base), color var(--mt-transition-base);
}
.mt-account-menu-link:hover {
color: var(--mt-primary);
background-color: var(--mt-surface-muted);
}
.mt-account-menu-logout {
margin-top: var(--mt-space-2);
padding-top: var(--mt-space-3);
color: var(--mt-error);
border-top: 1px solid var(--mt-border-color);
}
.mt-products,
.mt-products-grid,
.mt-category-tiles,
.mt-promo-banners {
min-width: 0;
max-width: 100%;
}
.mt-container {
max-width: min(var(--mt-container-max), 100%);
}
.mt-advantage-item-link {
color: inherit;
text-decoration: none;
}
.mt-advantage-item-link:hover .mt-advantage-title {
color: var(--mt-primary);
}
.mt-product-specs,
.mt-product-payments {
margin-top: var(--mt-space-6);
padding-top: var(--mt-space-4);
border-top: 1px solid var(--mt-border-color);
}
.mt-product-specs-title {
margin: 0 0 var(--mt-space-3);
color: var(--mt-text-primary);
font-size: var(--mt-text-base);
font-weight: var(--mt-font-bold);
}
.mt-product-specs-list {
margin: 0;
}
.mt-product-specs-row {
display: flex;
align-items: baseline;
gap: var(--mt-space-2);
margin-bottom: var(--mt-space-2);
font-size: var(--mt-text-sm);
}
.mt-product-specs-name {
flex: 0 1 auto;
min-width: 25%;
margin: 0;
overflow-wrap: anywhere;
color: var(--mt-text-muted);
font-weight: var(--mt-font-normal);
}
.mt-product-specs-row::after {
content: "";
flex: 1 1 auto;
order: 1;
height: 1px;
margin: 0 var(--mt-space-1);
background-image: linear-gradient(to right, var(--mt-border-color-dark) 30%, transparent 0);
background-size: 4px 1px;
background-repeat: repeat-x;
}
.mt-product-specs-value {
order: 2;
flex: 0 1 auto;
min-width: 0;
margin: 0;
overflow-wrap: anywhere;
color: var(--mt-text-primary);
text-align: right;
}
.mt-product-specs-all {
display: inline-block;
margin-top: var(--mt-space-1);
color: var(--mt-link-color);
font-size: var(--mt-text-sm);
text-decoration: underline;
}
.mt-product-specs-all:hover {
text-decoration: none;
}
.mt-product-payments-row {
display: flex;
flex-wrap: wrap;
gap: var(--mt-space-2);
}
.mt-product-payment-icon {
padding: var(--mt-space-1) var(--mt-space-2);
color: var(--mt-text-secondary);
font-size: var(--mt-text-xs);
background-color: var(--mt-surface-muted);
border-radius: var(--mt-radius-xs);
}
.mt-topbar-row {
min-height: 42px;
padding: var(--mt-space-2) 0;
}
.mt-topbar-link {
color: var(--mt-primary-400);
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-semibold);
line-height: 1.5;
}
.mt-topbar-phone,
.mt-topbar .mt-currency-select,
.mt-topbar .mt-lang-toggle {
font-size: var(--mt-text-xs);
line-height: 1.5;
}
.mt-logo-img {
max-height: 44px;
width: auto;
}
.mt-search-input {
height: 40px;
padding: var(--mt-space-2) 48px var(--mt-space-2) var(--mt-space-4);
font-size: var(--mt-text-xs);
line-height: 1.15;
border-radius: var(--mt-radius-base);
}
.mt-search-btn {
position: absolute;
top: 50%;
right: var(--mt-space-4);
width: 16px;
height: 16px;
padding: 0;
color: var(--mt-text-primary);
background: none;
border: 0;
border-radius: 0;
transform: translateY(-50%);
}
.mt-search-btn svg {
width: 16px;
height: 16px;
}
.mt-search-btn:hover {
color: var(--mt-primary);
background: none;
}
.mt-topmenu-link {
padding: 0.75rem 0;
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
line-height: 1.5;
color: var(--mt-text-primary);
}
.mt-megamenu-link {
gap: var(--mt-space-3);
padding: var(--mt-card-pad);
font-size: var(--mt-text-base);
font-weight: var(--mt-font-medium);
line-height: 1.5;
}
.mt-megamenu-icon,
.mt-megamenu-icon svg {
width: 24px;
height: 24px;
}
.mt-header-actions {
gap: var(--mt-space-4);
}
.mt-header-action-btn {
flex-direction: column;
gap: 2px;
padding: 0;
min-width: 54px;
color: var(--mt-text-primary);
background: none;
}
.mt-header-action-btn:hover {
color: var(--mt-primary);
background: none;
}
.mt-header-action-label {
font-size: 0.6875rem;
font-weight: var(--mt-font-medium);
line-height: 1.3;
color: var(--mt-text-secondary);
white-space: nowrap;
}
.mt-header-action-btn:hover .mt-header-action-label {
color: var(--mt-primary);
}
.mt-header-action-btn .mt-badge-count {
top: -4px;
right: 8px;
}
@media (max-width: 991px) {
.mt-header-action-label {
display: none;
}
}
.mt-search-close {
display: none;
}
.mt-header-search {
flex: 1;
max-width: none;
}
.mt-topbar-right {
gap: var(--mt-space-3);
}
.mt-currency,
.mt-topbar .mt-lang {
display: flex;
align-items: center;
}
.mt-currency-select {
height: 22px;
padding: 0 var(--mt-space-1);
color: var(--mt-text-primary);
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-semibold);
background: none;
border: 0;
cursor: pointer;
}
.mt-topbar .mt-lang-toggle,
.mt-topbar .mt-lang-current {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0;
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-semibold);
line-height: 1.5;
white-space: nowrap;
background: none;
border: 0;
}
.mt-topbar .mt-lang-flag,
.mt-topbar img {
width: 16px;
height: auto;
}
.mt-topbar-callback {
color: var(--mt-accent);
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-semibold);
text-decoration: underline;
white-space: nowrap;
}
.mt-topbar-callback:hover {
color: var(--mt-accent-hover);
text-decoration: none;
}
.mt-topbar .mt-header-action-btn,
.mt-lang-btn {
flex-direction: row;
gap: 4px;
min-width: 0;
padding: 0;
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-semibold);
}
.mt-lang-btn img {
width: 16px;
height: auto;
}
.mt-header-language {
position: relative;
}
.mt-header {
border-bottom: 0;
box-shadow: none;
}
.mt-header-inner {
height: auto;
padding: 24px 0;
gap: 32px;
}
.mt-logo-img {
max-height: 30px;
}
.mt-header-catalog-btn {
height: 40px;
gap: 8px;
padding: 12px 24px;
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-semibold);
}
.mt-header-catalog-btn svg {
width: 16px;
height: 16px;
}
.mt-header-search {
flex: 1 1 auto;
min-width: 0;
}
.mt-header-actions {
gap: 0;
flex-shrink: 0;
}
.mt-header-action-btn {
min-width: 0;
gap: 8px;
padding: 0 16px 0 0;
}
.mt-header-action-label {
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-medium);
color: var(--mt-text-primary);
}
.mt-header-action-btn .mt-badge-count {
top: -6px;
right: 6px;
}
.mt-topmenu {
position: relative;
z-index: 20;
background: var(--mt-surface);
border-bottom: 1px solid var(--mt-border-color);
}
.mt-topmenu-list {
gap: 24px;
}
.mt-topmenu-link {
gap: 8px;
padding: 12px 0;
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
}
.mt-topmenu-icon,
.mt-topmenu-icon svg {
width: 24px;
height: 24px;
}
.mt-topbar-callback {
padding: 0;
font-family: inherit;
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-semibold);
line-height: 1.5;
color: var(--mt-primary-400);
background: none;
border: 0;
text-decoration: underline;
cursor: pointer;
}
.mt-topbar-callback:hover {
color: var(--mt-primary);
}
.mt-theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
color: var(--mt-warning-dark);
background: none;
border: 0;
cursor: pointer;
}
.mt-theme-toggle:hover {
color: var(--mt-warning);
}
.mt-theme-icon-dark {
display: none;
}
body.mt-theme-dark .mt-theme-icon-light {
display: none;
}
body.mt-theme-dark .mt-theme-icon-dark {
display: block;
}
body.mt-theme-dark {
--mt-body-bg: #0e1311;
--mt-surface: #171d1b;
--mt-surface-muted: #1f2624;
--mt-table-hover: #1f2624;
--mt-text-primary: #f2f5f4;
--mt-text-secondary: #b8c0bd;
--mt-text-muted: #8d9591;
--mt-body-color: #b8c0bd;
--mt-border-color: #262d2b;
--mt-border-color-dark: #333c39;
--mt-border-dashed: 1px dashed #333c39;
--mt-neutral-50: #1a201e;
--mt-neutral-100: #1f2624;
--mt-neutral-200: #2a312f;
--mt-neutral-300: #3a4441;
--mt-primary-50: #16203a;
--mt-primary-100: #1c2b4d;
--mt-primary-light: #1c2b4d;
--mt-link-color: #6ea6ff;
--mt-link-hover: #9cc3ff;
color-scheme: dark;
}
body.mt-theme-dark .mt-footer {
background-color: #0a0e0d;
}
body.mt-theme-dark .mt-payment-icon {
background: #e8ebea;
}
body.mt-theme-dark .mt-footer-phone-drop,
body.mt-theme-dark .mt-contact-widget-drop,
body.mt-theme-dark .mt-modal-dialog {
background: var(--mt-surface);
}
body.mt-theme-dark .mt-logo-img,
body.mt-theme-dark .mt-footer-logo {
filter: none;
}
.mt-badge-count {
background: var(--mt-primary);
color: var(--mt-white);
}
.mt-header-action-btn .mt-badge-count {
display: flex;
}
.mt-currency {
position: relative;
}
.mt-currency-btn,
.mt-topbar .mt-lang-btn {
display: inline-flex;
align-items: center;
gap: 4px;
height: 28px;
padding: 0 8px;
font-family: inherit;
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-semibold);
line-height: 1;
color: var(--mt-text-primary);
background: var(--mt-neutral-100);
border: 0;
border-radius: 6px;
cursor: pointer;
}
.mt-currency-btn:hover,
.mt-topbar .mt-lang-btn:hover {
color: var(--mt-primary);
background: var(--mt-neutral-200);
}
.mt-topbar .mt-lang-btn img {
width: 16px;
height: 12px;
display: block;
}
.mt-currency-dropdown {
right: 0;
left: auto;
min-width: 180px;
}
.mt-currency-item {
display: flex;
align-items: center;
gap: 8px;
}
.mt-currency-symbol {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
font-weight: var(--mt-font-bold);
}
.mt-currency-item.active,
.mt-lang-item.active {
color: var(--mt-primary);
font-weight: var(--mt-font-semibold);
}
.mt-products-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}
.mt-product-card {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
background: var(--mt-surface);
border: 0;
border-radius: 12px;
box-shadow: none;
}
.mt-product-card-hidden {
display: none;
}
.mt-product-card-top {
position: relative;
}
.mt-product-card .mt-product-stickers {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 2;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-end;
gap: 4px;
pointer-events: none;
}
.mt-product-card .mt-product-sticker {
display: inline-flex;
align-items: center;
height: 19px;
padding: 0 4px;
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-medium);
line-height: 1;
color: var(--mt-white);
border-radius: 4px;
white-space: nowrap;
}
.mt-product-card .mt-product-sticker.is-shipping {
background: #17b2c7;
}
.mt-product-card .mt-product-sticker.is-new {
background: #367ad0;
}
.mt-product-card .mt-product-sticker.is-hit {
background: #509424;
}
.mt-product-card .mt-product-sticker.is-special {
background: #e63d3d;
}
.mt-product-card .mt-product-image {
display: flex;
align-items: center;
justify-content: center;
height: 240px;
margin-top: 16px;
overflow: hidden;
background: none;
border-radius: 0;
}
.mt-product-card .mt-product-image img {
max-width: 100%;
max-height: 240px;
width: auto;
height: auto;
object-fit: contain;
transition: transform var(--mt-transition-base);
}
.mt-product-card:hover .mt-product-image img {
transform: scale(1.04);
}
.mt-product-card .mt-product-actions {
position: absolute;
top: 48px;
right: 0;
z-index: 3;
display: flex;
flex-direction: column;
gap: 8px;
opacity: 1;
transform: none;
}
.mt-product-card .mt-product-action {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 28px;
padding: 0;
color: var(--mt-primary);
background: var(--mt-neutral-100);
border: 0;
border-radius: 8px;
cursor: pointer;
transition: color var(--mt-transition-fast), background-color var(--mt-transition-fast);
}
.mt-product-card .mt-product-action:hover {
color: var(--mt-white);
background: var(--mt-primary);
}
.mt-product-card .mt-product-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 16px 0 0;
padding: 0;
min-height: 19px;
border: 0;
}
.mt-product-card .mt-product-stock {
display: inline-flex;
align-items: center;
padding: 2px 8px;
font-size: 0.625rem;
line-height: 1.5;
color: var(--mt-accent);
background: var(--mt-neutral-100);
border-radius: 4px;
white-space: nowrap;
}
.mt-product-card .mt-product-stock.is-out {
color: var(--mt-error);
}
.mt-product-card .mt-product-sku {
overflow: hidden;
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
white-space: nowrap;
text-overflow: ellipsis;
}
.mt-product-card-bottom {
display: flex;
flex: 1;
flex-direction: column;
gap: 16px;
}
.mt-product-card .mt-product-name {
display: -webkit-box;
min-height: 35px;
overflow: hidden;
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
line-height: 1.25;
color: var(--mt-text-primary);
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.mt-product-card .mt-product-name:hover {
color: var(--mt-primary);
}
.mt-product-card .mt-product-rating {
display: flex;
align-items: center;
gap: 4px;
min-height: 18px;
}
.mt-product-card .mt-product-stars {
display: inline-flex;
gap: 2px;
}
.mt-product-card .mt-product-star {
width: 12px;
height: 12px;
fill: var(--mt-neutral-300);
}
.mt-product-card .mt-product-star.is-filled {
fill: var(--mt-warning);
}
.mt-product-card .mt-product-review-icon {
margin-left: 8px;
color: var(--mt-text-primary);
}
.mt-product-card .mt-product-review-count {
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-medium);
color: var(--mt-text-primary);
}
.mt-product-card .mt-product-attributes {
margin: 0;
padding: 0;
font-size: var(--mt-text-xs);
line-height: 1.5;
color: var(--mt-text-secondary);
list-style: none;
}
.mt-product-card .mt-product-attributes li {
display: flex;
justify-content: space-between;
gap: 8px;
}
.mt-product-card .mt-product-price-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-top: auto;
}
.mt-product-card .mt-product-prices {
display: flex;
flex-direction: column;
gap: 4px;
}
.mt-product-card .mt-product-price-old-row {
display: flex;
align-items: center;
gap: 8px;
}
.mt-product-card .mt-product-price-old {
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-text-muted);
text-decoration: line-through;
}
.mt-product-card .mt-product-discount {
display: inline-flex;
align-items: center;
height: 15px;
padding: 0 4px;
font-size: 0.625rem;
font-weight: var(--mt-font-semibold);
line-height: 1;
color: var(--mt-white);
background: var(--mt-error);
border-radius: 4px;
}
.mt-product-card .mt-product-price {
font-size: 1.375rem;
font-weight: var(--mt-font-semibold);
line-height: 1.5;
color: var(--mt-text-primary);
}
.mt-product-card .mt-product-price.is-special {
color: #d5383d;
}
.mt-product-card .mt-product-buy {
display: flex;
align-items: center;
gap: 8px;
}
.mt-product-card .mt-product-cart {
height: 42px;
gap: 8px;
padding: 4px 16px;
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-semibold);
white-space: nowrap;
}
.mt-product-card .mt-product-qty {
width: 56px;
height: 42px;
padding: 0 4px;
font-family: inherit;
font-size: var(--mt-text-sm);
text-align: center;
border: 1px solid var(--mt-border-color-dark);
border-radius: 8px;
}
@media (max-width: 1399px) {
.mt-products-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 1199px) {
.mt-products-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.mt-products-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.mt-product-card {
gap: 12px;
padding: 12px;
}
.mt-product-image,
.mt-product-card .mt-product-image img {
height: 160px;
max-height: 160px;
}
.mt-product-card .mt-product-price {
font-size: 1.125rem;
}
.mt-product-card .mt-product-price-row {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.mt-product-card .mt-product-cart {
width: 100%;
justify-content: center;
}
}
.mt-hero {
padding-top: 24px;
}
.mt-hero-grid {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
gap: 24px;
align-items: stretch;
}
.mt-hero-grid-full {
grid-template-columns: minmax(0, 1fr);
}
.mt-hero-catalog {
position: relative;
min-height: 0;
}
.mt-hero-catalog > * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.mt-hero-main {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.mt-hero-main .mt-slideshow {
overflow: hidden;
background: none;
border-radius: 12px;
}
.mt-hero-main .mt-slide-image {
display: block;
width: 100%;
height: auto;
}
.mt-hero-catalog .mt-megamenu {
padding: 0;
border-radius: 12px;
}
.mt-promo-banners-tiles .mt-promo-banners-grid {
gap: 16px;
align-items: start;
}
.mt-promo-banners-tiles .mt-promo-banner {
position: relative;
display: block;
min-height: 0;
padding: 0;
overflow: hidden;
aspect-ratio: 1 / 1;
border-radius: 16px;
}
.mt-promo-banners-tiles .mt-promo-banner::before {
display: none;
}
.mt-promo-banners-tiles .mt-promo-banner-image {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.mt-promo-banners-tiles .mt-promo-banner-overlay {
z-index: 1;
}
.mt-slide-button,
.mt-slide-button:hover,
.mt-slide-button:focus {
color: var(--mt-primary);
background-color: var(--mt-white);
border-color: var(--mt-white);
}
.mt-slide-button:hover {
background-color: rgba(255, 255, 255, 0.88);
}
.mt-promo-banners-tiles .mt-promo-banner-overlay {
position: absolute;
top: 16px;
right: 16px;
left: 16px;
display: flex;
flex-direction: column;
gap: 2px;
padding: 0;
background: none;
}
.mt-promo-banners-tiles .mt-promo-banner-title {
font-size: 1rem;
font-weight: var(--mt-font-bold);
line-height: 1.25;
color: var(--mt-white);
}
.mt-promo-banners-tiles .mt-promo-banner-subtitle {
font-size: var(--mt-text-sm);
line-height: 1.4;
color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 1023px) {
.mt-hero-grid {
grid-template-columns: minmax(0, 1fr);
}
.mt-hero-catalog {
display: none;
}
}
.mt-hero-catalog .mt-megamenu {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
width: 100%;
min-height: 0;
padding: 0;
overflow: hidden;
border-radius: 12px;
box-shadow: none;
}
.mt-hero-catalog .mt-megamenu-panel {
top: 0;
margin-left: 24px;
}
.mt-hero-catalog .mt-megamenu-sidebar {
height: 100%;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--mt-neutral-300) transparent;
}
.mt-hero-catalog .mt-megamenu-sidebar::-webkit-scrollbar {
width: 6px;
}
.mt-hero-catalog .mt-megamenu-sidebar::-webkit-scrollbar-thumb {
background: var(--mt-neutral-300);
border-radius: 3px;
}
.mt-hero-catalog .mt-megamenu-sidebar::-webkit-scrollbar-track {
background: transparent;
}
.mt-slide {
position: relative;
}
.mt-slide-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.mt-slide-caption {
position: absolute;
top: 24px;
bottom: 24px;
left: 24px;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 8px;
max-width: 50%;
}
.mt-slide-title {
font-size: 2rem;
font-weight: var(--mt-font-bold);
line-height: 1.2;
color: var(--mt-white);
}
.mt-slide-subtitle {
font-size: 1rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.85);
}
.mt-slide-button {
margin-top: auto;
height: 40px;
padding: 12px 24px;
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-semibold);
}
@media (max-width: 767px) {
.mt-slide-caption {
top: 12px;
bottom: 12px;
left: 12px;
max-width: 70%;
gap: 4px;
}
.mt-slide-title {
font-size: 1.125rem;
}
.mt-slide-subtitle {
font-size: var(--mt-text-xs);
}
.mt-slide-button {
height: 32px;
padding: 8px 12px;
}
}
.mt-section-title {
margin: 0 0 16px;
font-size: 1.5rem;
font-weight: var(--mt-font-bold);
line-height: 1.5;
color: var(--mt-text-primary);
}
.mt-category-tiles-row {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 16px;
}
.mt-category-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 12px;
min-height: 175px;
padding: 24px;
background: var(--mt-surface);
border-radius: 12px;
text-align: center;
transition: box-shadow var(--mt-transition-fast), transform var(--mt-transition-fast);
}
.mt-category-tile:hover {
box-shadow: 0 6px 20px rgba(12, 41, 106, 0.1);
transform: translateY(-2px);
}
.mt-category-tile-image {
display: block;
width: auto;
max-width: 100%;
height: 80px;
object-fit: contain;
}
.mt-category-tile-title {
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
line-height: 1.3;
color: var(--mt-text-primary);
}
.mt-category-tile:hover .mt-category-tile-title {
color: var(--mt-primary);
}
.mt-news-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.mt-news-card {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--mt-surface);
border-radius: 12px;
}
.mt-news-image {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.mt-news-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--mt-transition-base);
}
.mt-news-card:hover .mt-news-image img {
transform: scale(1.04);
}
.mt-news-body {
display: flex;
flex: 1;
flex-direction: column;
gap: 8px;
padding: 16px;
}
.mt-news-title {
display: -webkit-box;
overflow: hidden;
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
line-height: 1.35;
color: var(--mt-text-primary);
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.mt-news-title:hover {
color: var(--mt-primary);
}
.mt-news-text {
display: -webkit-box;
overflow: hidden;
font-size: var(--mt-text-xs);
line-height: 1.5;
color: var(--mt-text-secondary);
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.mt-news-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto;
padding-top: 8px;
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
}
.mt-news-date {
display: inline-flex;
align-items: center;
gap: 6px;
}
.mt-news-more {
color: var(--mt-primary);
font-weight: var(--mt-font-medium);
}
.mt-about {
padding: 24px;
background: var(--mt-surface);
border-radius: 12px;
}
.mt-about .mt-section-title {
margin-bottom: 24px;
}
.mt-about-text {
font-size: var(--mt-text-sm);
line-height: 1.6;
color: var(--mt-text-secondary);
}
.mt-about-text p {
margin: 0 0 12px;
}
.mt-about-text p:last-child {
margin-bottom: 0;
}
@media (max-width: 1399px) {
.mt-category-tiles-row {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
@media (max-width: 1199px) {
.mt-news-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1023px) {
.mt-category-tiles-row {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.mt-section-title {
font-size: 1.125rem;
margin-bottom: 12px;
}
.mt-category-tiles-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.mt-category-tile {
min-height: 0;
padding: 16px;
gap: 8px;
}
.mt-category-tile-image {
height: 56px;
}
.mt-news-grid {
grid-template-columns: 1fr;
}
}
.mt-section-title-icon {
display: flex;
align-items: center;
gap: 16px;
}
.mt-section-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
padding: 8px;
color: var(--mt-primary);
background: var(--mt-neutral-100);
border-radius: 12px;
}
.mt-reviews-top {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: var(--mt-grid-gap);
align-items: stretch;
margin-bottom: var(--mt-grid-gap);
}
.mt-reviews-summary {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--mt-space-2);
padding: var(--mt-card-pad-lg);
background: var(--mt-surface);
border-radius: var(--mt-card-radius);
text-align: center;
}
.mt-reviews-summary-label {
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
}
.mt-reviews-score {
display: flex;
align-items: center;
justify-content: center;
gap: var(--mt-space-3);
}
.mt-reviews-score-star {
flex-shrink: 0;
width: 40px;
height: 40px;
fill: var(--mt-warning);
}
.mt-reviews-score-value {
font-size: 3rem;
font-weight: var(--mt-font-bold);
line-height: 1;
color: var(--mt-text-primary);
}
.mt-reviews-total {
font-size: var(--mt-text-sm);
color: var(--mt-text-muted);
}
.mt-reviews-criteria {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--mt-space-2) var(--mt-space-8);
align-content: center;
padding: var(--mt-card-pad-lg);
background: var(--mt-surface);
border-radius: var(--mt-card-radius);
}
.mt-reviews-criteria-item {
display: flex;
align-items: baseline;
gap: var(--mt-space-3);
padding: var(--mt-space-2) 0;
}
.mt-reviews-criteria-item::after {
content: "";
order: 1;
flex: 1 1 auto;
height: 1px;
background-image: linear-gradient(to right, var(--mt-border-color-dark) 30%, transparent 0);
background-size: 4px 1px;
background-repeat: repeat-x;
}
.mt-reviews-criteria-name {
flex: 0 1 auto;
min-width: 0;
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
}
.mt-reviews-criteria-value {
order: 2;
flex-shrink: 0;
font-size: var(--mt-text-base);
font-weight: var(--mt-font-bold);
color: var(--mt-text-primary);
}
.mt-reviews-body {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.mt-reviews-body:only-child,
.mt-reviews-product .mt-reviews-body {
grid-template-columns: minmax(0, 1fr);
}
.mt-reviews-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.mt-review {
padding: 24px;
background: var(--mt-surface);
border-radius: 12px;
}
.mt-review-head {
display: flex;
align-items: center;
gap: 12px;
}
.mt-review-avatar {
display: grid;
place-items: center;
width: 36px;
height: 36px;
background: var(--mt-neutral-100);
border-radius: 50%;
}
.mt-review-avatar svg {
fill: var(--mt-warning);
}
.mt-review-author {
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
}
.mt-review-date {
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
}
.mt-review-criteria {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 12px;
font-size: var(--mt-text-xs);
color: var(--mt-text-secondary);
}
.mt-review-criteria-item b {
display: inline-block;
min-width: 20px;
padding: 0 6px;
color: var(--mt-accent);
background: var(--mt-neutral-100);
border-radius: 4px;
text-align: center;
}
.mt-review-text {
margin: 12px 0 0;
font-size: var(--mt-text-sm);
line-height: 1.6;
color: var(--mt-text-secondary);
}
.mt-review-reply {
margin-top: 16px;
padding: 16px;
background: var(--mt-neutral-100);
border-radius: 8px;
}
.mt-review-reply-title {
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
}
.mt-review-reply-text {
margin-top: 4px;
font-size: var(--mt-text-sm);
line-height: 1.5;
color: var(--mt-text-secondary);
}
.mt-reviews-empty {
padding: 24px;
background: var(--mt-surface);
border-radius: 12px;
font-size: var(--mt-text-sm);
color: var(--mt-text-muted);
}
.mt-reviews-form-card {
padding: 24px;
background: var(--mt-surface);
border-radius: 12px;
}
.mt-reviews-form-title {
font-size: var(--mt-text-base);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
}
.mt-reviews-form-label {
margin: 16px 0 8px;
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
}
.mt-reviews-form-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.mt-reviews-form-name {
font-size: var(--mt-text-sm);
color: var(--mt-text-primary);
}
.mt-rating-input {
display: inline-flex;
gap: 2px;
}
.mt-rating-star {
display: grid;
place-items: center;
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.mt-rating-star svg {
fill: var(--mt-neutral-300);
transition: fill var(--mt-transition-fast);
}
.mt-rating-star.is-active svg {
fill: var(--mt-warning);
}
.mt-reviews-form .mt-field {
display: block;
margin-top: 12px;
}
.mt-reviews-form .mt-input {
display: block;
width: 100%;
min-height: 44px;
padding: 10px 14px;
font-family: inherit;
font-size: var(--mt-text-sm);
color: var(--mt-text-primary);
background: var(--mt-surface);
border: 1px solid var(--mt-border-color-dark);
border-radius: 8px;
}
.mt-reviews-form .mt-input:focus {
outline: none;
border-color: var(--mt-primary-400);
}
.mt-reviews-form textarea.mt-input {
min-height: 110px;
resize: vertical;
}
.mt-reviews-form .mt-btn-block {
margin-top: 16px;
}
.mt-reviews-form-result {
margin-top: 12px;
font-size: var(--mt-text-sm);
}
.mt-reviews-form-result.is-ok {
color: var(--mt-success);
}
.mt-reviews-form-result.is-error {
color: var(--mt-error);
}
@media (max-width: 1023px) {
.mt-reviews-top {
grid-template-columns: minmax(0, 1fr);
}
.mt-reviews-criteria {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mt-reviews-body {
grid-template-columns: minmax(0, 1fr);
}
}
.mt-product-delivery {
margin-top: 24px;
}
.mt-product-delivery-list {
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.mt-product-delivery-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
font-size: var(--mt-text-sm);
color: var(--mt-text-primary);
border-bottom: 1px dashed var(--mt-border-color);
}
.mt-product-delivery-item:last-child {
border-bottom: 0;
}
.mt-product-delivery-icon {
display: grid;
place-items: center;
width: 32px;
height: 32px;
flex-shrink: 0;
color: var(--mt-primary);
background: var(--mt-neutral-100);
border-radius: 8px;
}
.mt-product-delivery-name {
flex: 1;
min-width: 0;
}
.mt-product-delivery-price {
color: var(--mt-text-muted);
white-space: nowrap;
}
.mt-product-countdown {
margin-top: 12px;
padding: 12px;
background: var(--mt-neutral-100);
border-radius: 8px;
text-align: center;
}
.mt-product-countdown-title {
font-size: var(--mt-text-xs);
color: var(--mt-text-secondary);
}
.mt-product-countdown-row {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 6px;
}
.mt-product-countdown-cell {
display: flex;
flex-direction: column;
align-items: center;
min-width: 40px;
}
.mt-product-countdown-cell b {
font-size: 1.125rem;
font-weight: var(--mt-font-bold);
color: var(--mt-error);
}
.mt-product-countdown-cell i {
font-size: 0.625rem;
font-style: normal;
color: var(--mt-text-muted);
}
.mt-product-quick-order {
width: 100%;
margin-top: 8px;
}
.mt-product-payments-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.mt-product-payment-icon {
width: 48px;
height: 32px;
padding: 8px;
background: var(--mt-neutral-100);
border-radius: 4px;
}
.mt-product-payment-icon svg {
display: block;
width: 32px;
height: 19px;
}
.mt-mobile-menu-overlay {
width: 100vw;
max-width: 100vw;
}
.mt-mobile-menu {
width: 100%;
max-width: 460px;
overflow-x: hidden;
}
.mt-mobile-menu-header,
.mt-mobile-menu-content,
.mt-mobile-menu-item,
.mt-mobile-menu-link {
max-width: 100%;
}
.mt-mobile-menu .mt-menu-text,
.mt-mobile-menu-link span {
min-width: 0;
overflow-wrap: anywhere;
}
.mt-product-specs-row {
min-width: 0;
}
.mt-product-specs-name,
.mt-product-specs-value {
max-width: 100%;
overflow-wrap: anywhere;
white-space: normal;
}
.mt-product-gallery-thumbs {
max-width: 100%;
overflow-x: auto;
scrollbar-width: thin;
}
.mt-product-attributes-table td,
.mt-product-attributes-table th {
overflow-wrap: anywhere;
}
@media (max-width: 767px) {
.mt-product-gallery .mt-product-gallery-thumbs {
display: flex;
flex-wrap: nowrap;
max-width: 100%;
overflow-x: auto;
}
.mt-product-gallery .mt-product-thumb {
flex: 0 0 auto;
}
.mt-product-purchase .mt-product-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mt-product-purchase .mt-product-add-cart,
.mt-product-purchase .mt-product-quick-order {
flex: 1 1 100%;
width: 100%;
justify-content: center;
}
.mt-product-purchase .mt-product-action-btn {
flex: 0 0 auto;
}
}
.mt-bottom-nav {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
display: none;
align-items: stretch;
justify-content: space-around;
height: 60px;
padding-bottom: env(safe-area-inset-bottom, 0);
background: var(--mt-surface);
border-top: 1px solid var(--mt-border-color);
box-shadow: 0 -2px 12px rgba(18, 23, 21, 0.08);
}
.mt-bottom-nav-item {
position: relative;
display: flex;
flex: 1 1 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 6px 2px;
font-family: inherit;
font-size: 0.625rem;
line-height: 1.2;
color: var(--mt-text-secondary);
background: none;
border: 0;
text-align: center;
cursor: pointer;
}
.mt-bottom-nav-item svg {
width: 22px;
height: 22px;
stroke-width: 1.8;
}
.mt-bottom-nav-item span {
overflow: hidden;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
}
.mt-bottom-nav-item:hover,
.mt-bottom-nav-item.active {
color: var(--mt-primary);
}
.mt-bottom-nav-item .mt-badge-count {
position: absolute;
top: 2px;
right: 50%;
margin-right: -22px;
display: flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 0.5625rem;
font-weight: var(--mt-font-semibold);
line-height: 1;
color: var(--mt-white);
background: var(--mt-primary);
border-radius: 999px;
}
@media (max-width: 1023px) {
.mt-bottom-nav {
display: flex;
}
body.mt-body {
padding-bottom: 60px;
}
.mt-footer {
margin-bottom: 0;
}
}
.mt-bottom-nav-item .mt-badge-count {
top: 4px;
right: auto;
left: 50%;
margin-left: 4px;
margin-right: 0;
}
.mt-header-logo .mt-logo-img,
.mt-header-logo img {
width: auto;
height: 46px;
max-height: none;
max-width: none;
}
.mt-footer-logo {
max-height: none;
height: 44px;
}
.mt-header-logo-mobile img {
width: auto;
height: 34px;
max-width: none;
}
.mt-collection-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
min-width: 0;
padding: 22px;
overflow: hidden;
color: var(--mt-white);
border-radius: var(--mt-card-radius);
text-decoration: none;
}
.mt-collection-card:hover,
.mt-collection-card:focus {
color: var(--mt-white);
text-decoration: none;
}
.mt-collection-card-title {
display: block;
font-size: 1.45rem;
font-weight: var(--mt-font-bold);
line-height: 1.2;
}
.mt-collection-card-subtitle {
display: block;
margin-top: 6px;
font-size: var(--mt-text-sm);
opacity: 0.85;
}
.mt-collection-card-photo {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.mt-collection-card-photo img {
width: 78%;
height: auto;
aspect-ratio: 1 / 1;
padding: 8px;
object-fit: contain;
background-color: var(--mt-white);
border-radius: 18px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
transform: rotate(-4deg);
transition: transform var(--mt-transition-base);
}
.mt-collection-card:hover .mt-collection-card-photo img {
transform: rotate(0) scale(1.04);
}
.mt-collection-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.mt-collection-card-from {
font-size: var(--mt-text-sm);
opacity: 0.92;
}
.mt-collection-card-from b {
display: block;
font-size: 1.1rem;
}
.mt-collection-card-btn {
padding: 8px 14px;
color: var(--mt-primary);
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
white-space: nowrap;
background-color: var(--mt-white);
border-radius: var(--mt-radius-full);
}
@media (max-width: 639px) {
.mt-collection-card {
grid-column: 1 / -1;
}
}
.mt-product-price,
.mt-product-price-old {
white-space: nowrap;
}
.mt-header-mobile {
display: grid;
grid-template-columns: 44px 1fr 44px;
grid-template-areas: "menu logo cart" "search search search";
align-items: center;
gap: 10px 8px;
padding: 10px 0 12px;
}
.mt-header-mobile .mt-menu-toggle {
grid-area: menu;
}
.mt-header-mobile .mt-header-logo-mobile {
grid-area: logo;
display: flex;
justify-content: center;
align-items: center;
min-width: 0;
}
.mt-header-mobile .mt-cart-btn-mobile {
grid-area: cart;
}
.mt-header-mobile .mt-search-form-mobile {
grid-area: search;
}
.mt-header-mobile .mt-header-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
color: var(--mt-text-primary);
background: var(--mt-bg, #f3f4f6);
border: 0;
border-radius: 12px;
cursor: pointer;
}
.mt-header-mobile .mt-header-logo-mobile img {
height: 32px;
max-width: 100%;
object-fit: contain;
}
.mt-search-form-mobile {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.mt-search-input-mobile {
flex: 1;
width: 100%;
height: 44px;
padding: 0 48px 0 16px;
font-size: 15px;
color: var(--mt-text-primary);
background: var(--mt-bg, #f3f4f6);
border: 1px solid transparent;
border-radius: 12px;
outline: 0;
box-sizing: border-box;
}
.mt-search-input-mobile:focus {
background: var(--mt-surface);
border-color: var(--mt-primary);
}
.mt-search-btn-mobile {
position: absolute;
top: 0;
right: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
color: var(--mt-text-secondary);
background: none;
border: 0;
cursor: pointer;
}
.mt-cart-btn-mobile .mt-badge-count {
position: absolute;
top: -4px;
right: -4px;
}
.mt-product-card .mt-product-stickers {
padding: var(--mt-space-3) var(--mt-space-3) 0 var(--mt-space-3);
justify-content: flex-start;
}
.mt-product-card .mt-product-stickers .mt-product-sticker {
position: static;
top: auto;
left: auto;
}
.mt-lightbox.is-single .mt-lightbox-arrow,
.mt-lightbox.is-single .mt-lightbox-thumbs,
.mt-lightbox.is-single .mt-lightbox-counter {
display: none;
}
.mt-hero-main .mt-slideshow {
position: relative;
overflow: hidden;
border-radius: 12px;
}
.mt-hero-main .mt-slideshow-track {
display: flex;
gap: 24px;
transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.mt-hero-main .mt-slide,
.mt-hero-main .mt-slide.active {
display: block;
flex: 0 0 76.6%;
min-width: 0;
overflow: hidden;
border-radius: 12px;
animation: none;
}
.mt-hero-main .mt-slide-image {
width: 100%;
height: auto;
aspect-ratio: 729 / 330;
object-fit: cover;
}
.mt-hero-main .mt-slide-caption {
top: 28px;
bottom: 28px;
left: 28px;
max-width: 46%;
gap: 10px;
}
.mt-hero-main .mt-slide-title {
font-size: 1.5rem;
line-height: 1.25;
}
.mt-hero-main .mt-slide-subtitle {
font-size: 1.125rem;
font-weight: var(--mt-font-medium);
line-height: 1.35;
color: var(--mt-white);
}
.mt-hero-main .mt-slide-button,
.mt-hero-main .mt-slide-button:hover,
.mt-hero-main .mt-slide-button:focus {
height: 56px;
padding: 0 40px;
font-size: var(--mt-text-sm);
color: var(--mt-white);
background-color: var(--mt-primary-400);
border-color: var(--mt-primary-400);
border-radius: 8px;
}
.mt-hero-main .mt-slide-button:hover {
background-color: var(--mt-primary-300);
border-color: var(--mt-primary-300);
}
.mt-hero-main .mt-slideshow-arrow {
top: 50%;
width: 32px;
height: 32px;
opacity: 1;
color: var(--mt-white);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.5);
}
.mt-hero-main .mt-slideshow-arrow:hover {
background: rgba(255, 255, 255, 0.22);
}
.mt-hero-main .mt-slideshow-arrow svg {
width: 16px;
height: 16px;
}
.mt-hero-main .mt-slideshow-prev {
left: 28px;
}
.mt-hero-main .mt-slideshow-next {
right: 16px;
}
.mt-hero-main .mt-slideshow-dots {
bottom: 16px;
left: 28px;
gap: 4px;
align-items: center;
transform: none;
}
.mt-hero-main .mt-slideshow-dot {
width: 12px;
height: 4px;
background: rgba(255, 255, 255, 0.9);
border-radius: 2px;
}
.mt-hero-main .mt-slideshow-dot.active {
width: 20px;
height: 6px;
background: var(--mt-primary-300);
transform: none;
}
.mt-promo-banners-tiles .mt-promo-banners-grid[data-columns] {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.mt-promo-banners-tiles .mt-promo-banners-grid::-webkit-scrollbar {
display: none;
}
.mt-promo-banners-tiles .mt-promo-banner {
flex: 0 0 calc((100% - 64px) / 5.35);
scroll-snap-align: start;
}
.mt-promo-banners-tiles .mt-promo-banner-overlay {
top: 18px;
align-items: center;
text-align: center;
}
.mt-promo-banners-tiles .mt-promo-banner-title {
font-size: 1.125rem;
}
.mt-promo-banners-tiles .mt-promo-banner-subtitle {
font-size: 1rem;
font-weight: var(--mt-font-medium);
}
@media (max-width: 1023px) {
.mt-hero-main .mt-slide,
.mt-hero-main .mt-slide.active {
flex: 0 0 100%;
}
.mt-hero-main .mt-slide-caption {
top: 14px;
bottom: 14px;
left: 14px;
max-width: 62%;
gap: 6px;
}
.mt-hero-main .mt-slide-title {
font-size: 1.125rem;
}
.mt-hero-main .mt-slide-subtitle {
font-size: var(--mt-text-xs);
}
.mt-hero-main .mt-slide-button,
.mt-hero-main .mt-slide-button:hover,
.mt-hero-main .mt-slide-button:focus {
height: 36px;
padding: 0 18px;
}
.mt-hero-main .mt-slideshow-arrow {
display: none;
}
.mt-hero-main .mt-slideshow-dots {
left: 14px;
bottom: 8px;
}
.mt-promo-banners-tiles .mt-promo-banner {
flex: 0 0 38%;
}
}
:root {
--mc-topbar-bg: var(--mt-surface-muted);
--mc-topbar-text: var(--mt-link-color);
--mc-header-bg: var(--mt-surface);
--mc-header-text: var(--mt-text-primary);
--mc-menu-bg: var(--mt-surface);
--mc-menu-text: var(--mt-text-primary);
--mc-catbtn-bg: var(--mt-primary);
--mc-catbtn-text: var(--mt-white);
--mc-btn-bg: var(--mt-primary);
--mc-btn-text: var(--mt-white);
--mc-btn-hover: var(--mt-primary-hover);
--mc-cart-bg: var(--mc-btn-bg);
--mc-cart-text: var(--mc-btn-text);
--mc-price: var(--mt-text-primary);
--mc-price-old: var(--mt-text-muted);
--mc-sale: #d5383d;
--mc-sticker-new: #367ad0;
--mc-sticker-hit: #509424;
--mc-sticker-sale: #e63d3d;
--mc-footer-bg: var(--mt-neutral-900);
--mc-footer-text: var(--mt-neutral-400);
--mc-footer-title: var(--mt-white);
--mc-footer-link: var(--mt-white);
}
.mt-topbar {
background-color: var(--mc-topbar-bg);
}
.mt-topbar-link,
.mt-topbar .mt-currency-select,
.mt-topbar-phone,
.mt-topbar .mt-lang-toggle {
color: var(--mc-topbar-text);
}
.mt-header,
.mt-header-mobile {
background-color: var(--mc-header-bg);
}
.mt-header-action-btn,
.mt-header-action-label,
.mt-header-mobile .mt-header-btn {
color: var(--mc-header-text);
}
.mt-topmenu {
background-color: var(--mc-menu-bg);
}
.mt-topmenu-link {
color: var(--mc-menu-text);
}
.mt-btn-primary {
color: var(--mc-btn-text);
background-color: var(--mc-btn-bg);
border-color: var(--mc-btn-bg);
}
.mt-btn-primary:hover {
color: var(--mc-btn-text);
background-color: var(--mc-btn-hover);
border-color: var(--mc-btn-hover);
}
.mt-product-card .mt-product-cart,
.mt-product-purchase .mt-btn-primary {
color: var(--mc-cart-text);
background-color: var(--mc-cart-bg);
border-color: var(--mc-cart-bg);
}
.mt-header-catalog-btn,
.mt-header-catalog-btn:hover {
color: var(--mc-catbtn-text);
background-color: var(--mc-catbtn-bg);
border-color: var(--mc-catbtn-bg);
}
.mt-product-card .mt-product-price,
.mt-product-price-current {
color: var(--mc-price);
}
.mt-product-card .mt-product-price.is-special,
.mt-product-price-block:has(.mt-product-price-old) .mt-product-price-current {
color: var(--mc-sale);
}
.mt-product-card .mt-product-price-old,
.mt-product-price-old {
color: var(--mc-price-old);
}
.mt-product-card .mt-product-sticker.is-new {
background: var(--mc-sticker-new);
}
.mt-product-card .mt-product-sticker.is-hit {
background: var(--mc-sticker-hit);
}
.mt-product-card .mt-product-sticker.is-special {
background: var(--mc-sticker-sale);
}
.mt-footer {
color: var(--mc-footer-text);
background-color: var(--mc-footer-bg);
}
.mt-footer a {
color: var(--mc-footer-link);
}
.mt-footer-title {
color: var(--mc-footer-title);
}
.mt-search-input {
color: var(--mt-text-primary);
background-color: var(--mt-surface);
}
.mt-search-input::placeholder,
.mt-search-input-mobile::placeholder {
color: var(--mt-text-muted);
}
.mt-header-mobile .mt-header-btn,
.mt-search-input-mobile {
background: var(--mt-surface-muted);
}
.mt-search-input-mobile {
color: var(--mt-text-primary);
}
.mt-subcategories-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
gap: 16px;
}
.mt-subcategory-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 12px;
padding: 16px 12px 18px;
font-size: 1rem;
font-weight: var(--mt-font-medium);
line-height: 1.3;
text-align: center;
color: var(--mt-text-primary);
background-color: var(--mt-surface);
border: 0;
border-radius: var(--mt-card-radius);
}
.mt-subcategory-item:hover {
color: var(--mt-primary);
box-shadow: var(--mt-shadow-lg);
}
.mt-subcategory-image {
width: 100%;
max-width: 150px;
height: 150px;
object-fit: contain;
border-radius: 0;
}
.mt-subcategory-name {
display: block;
}
.mt-category-intro:empty {
display: none;
}
.mt-catalog-sidebar #column-left,
.mt-catalog-sidebar #column-left.col-sm-3 {
float: none;
width: 100%;
padding: 0;
}
.mt-catalog-sidebar #column-left > * + * {
margin-top: 16px;
}
.mt-panels {
display: grid;
grid-template-columns: repeat(var(--mt-panels-cols, 4), minmax(0, 1fr));
gap: 24px;
margin: 0 0 var(--mt-section-gap, 40px);
}
.mt-panel {
display: flex;
flex-direction: column;
min-width: 0;
padding: 24px 28px 28px;
background: var(--mt-surface);
border-radius: var(--mt-card-radius);
}
.mt-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 20px;
}
.mt-panel-title {
margin: 0;
font-size: 1.25rem;
font-weight: var(--mt-font-semibold);
line-height: 1.3;
color: var(--mt-text-primary);
}
.mt-panel-go {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 54px;
height: 36px;
color: var(--mc-btn-text, #fff);
background: var(--mc-btn-bg, var(--mt-primary));
border-radius: 18px;
transition: background-color var(--mt-transition-fast);
}
.mt-panel-go:hover {
color: var(--mc-btn-text, #fff);
background: var(--mc-btn-hover, var(--mt-primary-hover));
}
.mt-panel-nav {
display: inline-flex;
gap: 6px;
padding: 4px;
background: var(--mt-surface-muted);
border-radius: 20px;
}
.mt-panel-nav-btn,
.mt-panel-pager-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
color: var(--mt-text-primary);
background: var(--mt-surface);
border: 0;
border-radius: 50%;
cursor: pointer;
}
.mt-panel-nav-btn:hover,
.mt-panel-pager-btn:hover {
color: var(--mc-btn-text, #fff);
background: var(--mc-btn-bg, var(--mt-primary));
}
.mt-panel-body {
flex: 1 1 auto;
}
.mt-panel-page {
display: none;
}
.mt-panel-page.is-active {
display: block;
}
.mt-feature {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: 28px;
height: 100%;
}
.mt-feature-hero {
display: flex;
flex-direction: column;
min-width: 0;
}
.mt-feature-image {
display: block;
aspect-ratio: 1 / 1;
margin-bottom: 14px;
}
.mt-feature-image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.mt-feature-name {
display: -webkit-box;
overflow: hidden;
font-size: 1.125rem;
font-weight: var(--mt-font-medium);
line-height: 1.35;
color: var(--mt-text-primary);
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.mt-feature-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
margin-top: 10px;
}
.mt-feature-buy {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 18px;
}
.mt-panel-prices {
display: flex;
flex-direction: column;
}
.mt-panel-price {
font-size: 1.5rem;
font-weight: var(--mt-font-bold);
line-height: 1.2;
color: var(--mc-price, var(--mt-text-primary));
}
.mt-panel-price.is-special {
color: var(--mc-sale, #d5383d);
}
.mt-panel-price-old {
font-size: var(--mt-text-sm);
text-decoration: line-through;
color: var(--mc-price-old, var(--mt-text-muted));
}
.mt-panel-cart {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
padding: 0;
color: var(--mt-surface);
background: var(--mt-text-primary);
border: 0;
border-radius: 14px;
cursor: pointer;
}
.mt-panel-cart:hover {
background: var(--mc-btn-bg, var(--mt-primary));
}
.mt-panel-stars {
display: inline-flex;
gap: 1px;
font-size: 15px;
line-height: 1;
}
.mt-panel-stars i {
font-style: normal;
color: var(--mt-neutral-300);
}
.mt-panel-stars i.is-on {
color: #ffb400;
}
.mt-panel-sku,
.mt-panel-reviews {
font-size: var(--mt-text-sm);
color: var(--mt-text-muted);
}
.mt-panel-stock {
display: inline-flex;
align-self: flex-start;
padding: 3px 10px;
font-size: var(--mt-text-sm);
border-radius: 6px;
}
.mt-panel-stock.is-in {
color: var(--mt-success-dark);
background: var(--mt-success-light);
}
.mt-panel-stock.is-out {
color: var(--mt-error-dark);
background: var(--mt-error-light);
}
.mt-feature-side {
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
}
.mt-feature-grid,
.mt-panel-gridbox {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 12px;
}
.mt-feature-grid {
flex: 1 1 auto;
align-content: start;
}
.mt-panel-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 0;
text-align: center;
color: var(--mt-text-primary);
}
.mt-panel-tile-image {
display: block;
width: 100%;
max-width: 150px;
aspect-ratio: 1 / 1;
}
.mt-panel-tile-image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.mt-panel-tile-name {
font-size: 0.9375rem;
line-height: 1.35;
}
.mt-panel-tile-price {
font-size: 1rem;
font-weight: var(--mt-font-semibold);
}
.mt-panel-tile:hover .mt-panel-tile-name {
color: var(--mt-primary);
}
.mt-panel-pager {
display: flex;
align-items: center;
gap: 10px;
padding: 6px;
background: var(--mt-surface-muted);
border-radius: 24px;
}
.mt-panel-pager-track {
position: relative;
flex: 1 1 auto;
height: 4px;
background: var(--mt-border-color-dark);
border-radius: 2px;
overflow: hidden;
}
.mt-panel-pager-bar {
display: block;
height: 100%;
background: var(--mt-text-primary);
border-radius: 2px;
transition: width 0.3s ease, margin-left 0.3s ease;
}
.mt-panel-rows {
display: flex;
flex-direction: column;
gap: 22px;
}
.mt-panel-row {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: 16px;
align-items: center;
color: var(--mt-text-primary);
}
.mt-panel-row-image {
display: block;
width: 96px;
height: 96px;
}
.mt-panel-row-image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.mt-panel-row-info {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.mt-panel-row-name {
font-size: 1rem;
line-height: 1.35;
}
.mt-panel-row-price {
font-size: 1.125rem;
font-weight: var(--mt-font-bold);
}
.mt-panel-row:hover .mt-panel-row-name {
color: var(--mt-primary);
}
.mt-panel-cards {
display: flex;
flex-direction: column;
gap: 20px;
}
.mt-mini-card {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
gap: 16px;
padding: 16px;
border: 1px solid var(--mt-border-color-dark);
border-radius: calc(var(--mt-card-radius) - 2px);
}
.mt-mini-image {
display: block;
width: 112px;
height: 112px;
}
.mt-mini-image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.mt-mini-info {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.mt-mini-name {
font-size: 0.9375rem;
font-weight: var(--mt-font-medium);
line-height: 1.35;
color: var(--mt-text-primary);
}
.mt-mini-meta {
display: flex;
align-items: center;
gap: 8px;
}
.mt-mini-prices {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 2px;
}
.mt-panel-banner {
position: relative;
padding: 0;
overflow: hidden;
min-height: 420px;
background: var(--mt-primary-700);
}
.mt-panel-banner-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 28px 30px;
color: #fff;
}
.mt-panel-banner-link:hover {
color: #fff;
}
.mt-panel-banner-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mt-panel-banner-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%);
}
.mt-panel-banner-text,
.mt-panel-banner-price {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
}
.mt-panel-banner-title {
font-size: 2.25rem;
font-weight: var(--mt-font-bold);
line-height: 1.05;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.mt-panel-banner-subtitle {
margin-top: 8px;
font-size: 1.125rem;
}
.mt-panel-banner-from {
font-size: 1.125rem;
opacity: 0.9;
}
.mt-panel-banner-value {
font-size: 2.25rem;
font-weight: var(--mt-font-bold);
line-height: 1.1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
@media (max-width: 1199px) {
.mt-panels {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mt-panels .mt-panel {
grid-column: span 1 !important;
}
.mt-panels .mt-panel-feature {
grid-column: 1 / -1 !important;
}
}
@media (max-width: 767px) {
.mt-panels {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.mt-panel {
padding: 18px;
}
.mt-feature {
grid-template-columns: minmax(0, 1fr);
}
.mt-panel-banner {
min-height: 320px;
}
}
.mt-hero-main .mt-slideshow-style-dark .mt-slide-caption {
top: 34px;
bottom: 34px;
left: 38px;
max-width: 44%;
gap: 14px;
}
.mt-hero-main .mt-slideshow-style-dark .mt-slide-title {
font-size: 2.75rem;
font-weight: var(--mt-font-semibold);
line-height: 1.1;
}
.mt-hero-main .mt-slideshow-style-dark .mt-slide-subtitle {
font-size: 1.75rem;
font-weight: var(--mt-font-medium);
line-height: 1.2;
color: var(--mt-primary-300);
}
.mt-slideshow-style-dark .mt-slide-price {
display: flex;
flex-direction: column;
margin-top: auto;
color: #fff;
}
.mt-slideshow-style-dark .mt-slide-price-label {
font-size: 1.125rem;
color: var(--mt-primary-300);
}
.mt-slideshow-style-dark .mt-slide-price-value {
font-size: 2.25rem;
font-weight: var(--mt-font-semibold);
line-height: 1.15;
}
.mt-slideshow-style-dark .mt-slide-button {
display: none;
}
.mt-slideshow-pill {
position: absolute;
bottom: 0;
left: 50%;
z-index: 3;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px 10px;
background: var(--mt-body-bg);
border-radius: 26px 26px 0 0;
transform: translateX(-50%);
}
.mt-slideshow-pill-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 32px;
padding: 0;
color: var(--mt-text-primary);
background: var(--mt-surface-muted);
border: 0;
border-radius: 16px;
cursor: pointer;
}
.mt-slideshow-pill-btn:hover {
color: var(--mc-btn-text, #fff);
background: var(--mc-btn-bg, var(--mt-primary));
}
.mt-slideshow-pill-dots {
display: flex;
gap: 4px;
width: 160px;
}
.mt-hero-main .mt-slideshow-style-dark .mt-slideshow-pill .mt-slideshow-dot {
flex: 1 1 0;
width: auto;
height: 4px;
background: var(--mt-border-color-dark);
border-radius: 2px;
transform: none;
}
.mt-hero-main .mt-slideshow-style-dark .mt-slideshow-pill .mt-slideshow-dot.active {
width: auto;
height: 4px;
background: var(--mt-text-primary);
}
@media (max-width: 1023px) {
.mt-hero-main .mt-slideshow-style-dark .mt-slide-title {
font-size: 1.375rem;
}
.mt-hero-main .mt-slideshow-style-dark .mt-slide-subtitle {
font-size: 1rem;
}
.mt-slideshow-style-dark .mt-slide-price-value {
font-size: 1.375rem;
}
.mt-slideshow-pill-dots {
width: 90px;
}
}
.mt-delivery-logo {
display: block;
border-radius: 7px;
}
.mt-product-delivery-icon:has(.mt-delivery-logo) {
background: transparent;
}
.mt-product-installment {
margin-top: 18px;
padding-top: 16px;
border-top: 1px dashed var(--mt-border-color-dark);
}
.mt-installment-title {
margin-bottom: 10px;
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
}
.mt-installment-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.mt-installment-item {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--mt-text-sm);
color: var(--mt-text-secondary);
}
.mt-installment-logo {
flex: 0 0 auto;
display: block;
}
.mt-payment-icon .mt-payment-logo {
display: block;
max-width: 78%;
max-height: 72%;
object-fit: contain;
}
.mt-delivery-logo-mark {
display: block;
width: 34px;
height: 34px;
object-fit: cover;
object-position: left center;
border-radius: 6px;
}
.mt-installment-logo-img {
flex: 0 0 auto;
display: block;
width: 62px;
height: 22px;
object-fit: contain;
object-position: left center;
}
.mt-installment-logo-round {
width: 26px;
height: 26px;
margin-right: 36px;
object-position: center;
}
.mt-payment-icon:has(.mt-payment-logo) {
width: auto;
min-width: 58px;
height: 38px;
padding: 0 10px;
background: #fff;
border: 1px solid var(--mt-border-color-dark);
}
.mt-payment-icon .mt-payment-logo {
width: auto;
max-width: 64px;
height: auto;
max-height: 20px;
}
.mt-installment-logo-img,
.mt-installment-logo-round {
width: 62px;
height: 24px;
margin-right: 0;
object-position: left center;
}
.mt-installment-logo {
margin-right: 32px;
}
.mt-reviews.mt-reviews-pro {
max-width: none;
margin-top: 0;
padding: 4px var(--mt-space-6) var(--mt-space-6);
background: var(--mt-surface);
border-radius: var(--mt-card-radius);
--accent: var(--mt-primary);
--accent-soft: var(--mt-primary-50);
--accent-hover: var(--mt-primary-hover);
--paper: var(--mt-surface);
--paper-soft: var(--mt-surface-muted);
--ink: var(--mt-text-primary);
--ink-mute: var(--mt-text-secondary);
--mute: var(--mt-text-muted);
--line: var(--mt-border-color-dark);
}
.mt-reviews.mt-reviews-pro {
--obrev-accent: var(--mt-primary);
--obrev-accent-soft: var(--mt-primary-50);
--obrev-accent-hover: var(--mt-primary-hover);
--obrev-ink: var(--mt-text-primary);
--obrev-ink-mute: var(--mt-text-secondary);
--obrev-mute: var(--mt-text-muted);
--obrev-line: var(--mt-border-color-dark);
--obrev-paper: var(--mt-surface);
--obrev-paper-soft: var(--mt-surface-muted);
}
.mt-product-delivery-note {
display: block;
font-size: var(--mt-text-xs);
font-weight: var(--mt-font-normal);
color: var(--mt-text-muted);
}
.mt-product-installment-hint {
margin-top: 8px;
padding: 6px 10px;
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
color: var(--mt-text-primary);
background: var(--mt-surface-muted);
border-radius: 8px;
}
.mt-installment-item {
align-items: center;
}
.mt-installment-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.mt-installment-text b {
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-semibold);
color: var(--mt-text-primary);
}
.mt-installment-text small {
font-size: var(--mt-text-xs);
color: var(--mt-text-muted);
}
.mt-promo-banners.mt-promo-banners-grid {
display: block;
grid-template-columns: none;
gap: 0;
margin-bottom: var(--mt-section-gap, 40px);
}
.mt-promo-banners-grid .mt-promo-banner {
aspect-ratio: 3 / 2;
}
.mt-promo-banners-grid .mt-promo-banner-image {
position: absolute;
top: 0;
left: 0;
}
.mt-promo-banners-grid .mt-promo-banner::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 100%);
}
.mt-promo-banners-grid .mt-promo-banner-overlay {
z-index: 2;
padding: 22px 24px;
}
.mt-promo-banners-grid .mt-promo-banner-title {
max-width: 100%;
font-size: 1.25rem;
}
.mt-promo-banners-grid .mt-promo-banner-subtitle {
display: block;
margin-top: 4px;
font-size: var(--mt-text-sm);
font-weight: var(--mt-font-medium);
line-height: 1.35;
color: rgba(255, 255, 255, 0.92);
}
.mt-promo-banners-grid .mt-promo-banner-overlay {
justify-content: flex-start;
}
.mt-promo-banners-grid .mt-promo-banner-button {
margin-top: auto;
}
@media (max-width: 767px) {
.mt-feature-image {
max-width: 240px;
margin-right: auto;
margin-left: auto;
}
.mt-panel-banner-title,
.mt-panel-banner-value {
font-size: 1.75rem;
}
}
.mt-topmenu {
z-index: 150;
}
.mt-hero {
position: relative;
z-index: 1;
}
.mt-product-gallery-main {
position: relative;
}
.mt-product-videobtn {
position: absolute;
bottom: 16px;
left: 16px;
z-index: 3;
color: var(--mt-text-primary);
background: var(--mt-surface);
border-color: var(--mt-border-color-dark);
box-shadow: var(--mt-shadow-sm);
}
.mt-body .fa-calendar::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.04 5h13.92a1.54 1.54 0 0 1 1.54 1.54v12.42a1.54 1.54 0 0 1 -1.54 1.54h-13.92a1.54 1.54 0 0 1 -1.54 -1.54v-12.42a1.54 1.54 0 0 1 1.54 -1.54z'/%3E%3Cpath d='M3.5 10h17'/%3E%3Cpath d='M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.04 5h13.92a1.54 1.54 0 0 1 1.54 1.54v12.42a1.54 1.54 0 0 1 -1.54 1.54h-13.92a1.54 1.54 0 0 1 -1.54 -1.54v-12.42a1.54 1.54 0 0 1 1.54 -1.54z'/%3E%3Cpath d='M3.5 10h17'/%3E%3Cpath d='M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-upload::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5V5M7.8 9.2 12 5l4.2 4.2M5 15.5v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5V5M7.8 9.2 12 5l4.2 4.2M5 15.5v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-eye::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12S6.8 6.5 12 6.5 20.5 12 20.5 12 17.2 17.5 12 17.5 3.5 12 3.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12S6.8 6.5 12 6.5 20.5 12 20.5 12 17.2 17.5 12 17.5 3.5 12 3.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-exclamation-circle::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.8v5M12 16.1v.1'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.8v5M12 16.1v.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-star-o::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.53 4.81L13.94 7.99Q14.47 9.2 15.78 9.34L19.25 9.69Q20.56 9.82 19.58 10.7L16.98 13.02Q15.99 13.9 16.27 15.19L17.01 18.59Q17.29 19.88 16.15 19.22L13.14 17.46Q12 16.8 10.86 17.46L7.85 19.22Q6.71 19.88 6.99 18.59L7.73 15.19Q8.01 13.9 7.02 13.02L4.42 10.7Q3.44 9.82 4.75 9.69L8.22 9.34Q9.53 9.2 10.06 7.99L11.47 4.81Q12 3.6 12.53 4.81z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.53 4.81L13.94 7.99Q14.47 9.2 15.78 9.34L19.25 9.69Q20.56 9.82 19.58 10.7L16.98 13.02Q15.99 13.9 16.27 15.19L17.01 18.59Q17.29 19.88 16.15 19.22L13.14 17.46Q12 16.8 10.86 17.46L7.85 19.22Q6.71 19.88 6.99 18.59L7.73 15.19Q8.01 13.9 7.02 13.02L4.42 10.7Q3.44 9.82 4.75 9.69L8.22 9.34Q9.53 9.2 10.06 7.99L11.47 4.81Q12 3.6 12.53 4.81z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-star::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.53 4.81L13.94 7.99Q14.47 9.2 15.78 9.34L19.25 9.69Q20.56 9.82 19.58 10.7L16.98 13.02Q15.99 13.9 16.27 15.19L17.01 18.59Q17.29 19.88 16.15 19.22L13.14 17.46Q12 16.8 10.86 17.46L7.85 19.22Q6.71 19.88 6.99 18.59L7.73 15.19Q8.01 13.9 7.02 13.02L4.42 10.7Q3.44 9.82 4.75 9.69L8.22 9.34Q9.53 9.2 10.06 7.99L11.47 4.81Q12 3.6 12.53 4.81z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.53 4.81L13.94 7.99Q14.47 9.2 15.78 9.34L19.25 9.69Q20.56 9.82 19.58 10.7L16.98 13.02Q15.99 13.9 16.27 15.19L17.01 18.59Q17.29 19.88 16.15 19.22L13.14 17.46Q12 16.8 10.86 17.46L7.85 19.22Q6.71 19.88 6.99 18.59L7.73 15.19Q8.01 13.9 7.02 13.02L4.42 10.7Q3.44 9.82 4.75 9.69L8.22 9.34Q9.53 9.2 10.06 7.99L11.47 4.81Q12 3.6 12.53 4.81z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-cloud-download::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v10.5M7.8 11.3 12 15.5l4.2-4.2M5 17.5v0a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v10.5M7.8 11.3 12 15.5l4.2-4.2M5 17.5v0a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-shopping-cart::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.81 8L19.39 8Q20.6 8 20.32 9.18L19.18 14.02Q18.9 15.2 17.69 15.2L9.41 15.2Q8.2 15.2 7.94 14.02L6.86 9.18Q6.6 8 7.81 8z'/%3E%3Cpath d='M3 4h2.4L6.6 8'/%3E%3Cpath d='M8 19a1.4 1.4 0 1 0 2.8 0a1.4 1.4 0 1 0 -2.8 0z'/%3E%3Cpath d='M15.6 19a1.4 1.4 0 1 0 2.8 0a1.4 1.4 0 1 0 -2.8 0z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.81 8L19.39 8Q20.6 8 20.32 9.18L19.18 14.02Q18.9 15.2 17.69 15.2L9.41 15.2Q8.2 15.2 7.94 14.02L6.86 9.18Q6.6 8 7.81 8z'/%3E%3Cpath d='M3 4h2.4L6.6 8'/%3E%3Cpath d='M8 19a1.4 1.4 0 1 0 2.8 0a1.4 1.4 0 1 0 -2.8 0z'/%3E%3Cpath d='M15.6 19a1.4 1.4 0 1 0 2.8 0a1.4 1.4 0 1 0 -2.8 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-reply::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12h-15M10 6.5L4.5 12l5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12h-15M10 6.5L4.5 12l5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-check-circle::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m8.3 12.3 2.6 2.6 4.8-5.2'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m8.3 12.3 2.6 2.6 4.8-5.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-trash::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.6 8L16.4 8Q17.5 8 17.43 9.1L16.77 19.7Q16.7 20.8 15.6 20.8L8.4 20.8Q7.3 20.8 7.23 19.7L6.57 9.1Q6.5 8 7.6 8z'/%3E%3Cpath d='M4.5 8h15'/%3E%3Cpath d='M9.3 8V5.4h5.4V8'/%3E%3Cpath d='M10.2 11.5v6M13.8 11.5v6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.6 8L16.4 8Q17.5 8 17.43 9.1L16.77 19.7Q16.7 20.8 15.6 20.8L8.4 20.8Q7.3 20.8 7.23 19.7L6.57 9.1Q6.5 8 7.6 8z'/%3E%3Cpath d='M4.5 8h15'/%3E%3Cpath d='M9.3 8V5.4h5.4V8'/%3E%3Cpath d='M10.2 11.5v6M13.8 11.5v6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-pencil::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19l.9-3.8L15.6 5.5a1.8 1.8 0 0 1 2.5 0l.4.4a1.8 1.8 0 0 1 0 2.5L8.8 18.1z'/%3E%3Cpath d='M14 7.2l2.8 2.8'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19l.9-3.8L15.6 5.5a1.8 1.8 0 0 1 2.5 0l.4.4a1.8 1.8 0 0 1 0 2.5L8.8 18.1z'/%3E%3Cpath d='M14 7.2l2.8 2.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-search::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 10.5a6.3 6.3 0 1 0 12.6 0a6.3 6.3 0 1 0 -12.6 0z'/%3E%3Cpath d='M15.2 15.2L20 20'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 10.5a6.3 6.3 0 1 0 12.6 0a6.3 6.3 0 1 0 -12.6 0z'/%3E%3Cpath d='M15.2 15.2L20 20'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-heart::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.3s-7.8-4.7-7.8-10.7a4.3 4.3 0 0 1 7.8-2.5 4.3 4.3 0 0 1 7.8 2.5c0 6-7.8 10.7-7.8 10.7z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.3s-7.8-4.7-7.8-10.7a4.3 4.3 0 0 1 7.8-2.5 4.3 4.3 0 0 1 7.8 2.5c0 6-7.8 10.7-7.8 10.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-phone::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h2.8l1.6 4-2.1 1.4a10 10 0 0 0 4.7 4.7l1.4-2.1 4 1.6V16a2.5 2.5 0 0 1-2.7 2.5A13.5 13.5 0 0 1 4.5 6.7 2.5 2.5 0 0 1 7 4z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h2.8l1.6 4-2.1 1.4a10 10 0 0 0 4.7 4.7l1.4-2.1 4 1.6V16a2.5 2.5 0 0 1-2.7 2.5A13.5 13.5 0 0 1 4.5 6.7 2.5 2.5 0 0 1 7 4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-envelope::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.54 6h14.92a1.54 1.54 0 0 1 1.54 1.54v9.42a1.54 1.54 0 0 1 -1.54 1.54h-14.92a1.54 1.54 0 0 1 -1.54 -1.54v-9.42a1.54 1.54 0 0 1 1.54 -1.54z'/%3E%3Cpath d='M3.6 7.8L12 13.8l8.4-6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.54 6h14.92a1.54 1.54 0 0 1 1.54 1.54v9.42a1.54 1.54 0 0 1 -1.54 1.54h-14.92a1.54 1.54 0 0 1 -1.54 -1.54v-9.42a1.54 1.54 0 0 1 1.54 -1.54z'/%3E%3Cpath d='M3.6 7.8L12 13.8l8.4-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-user::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.2 8a3.8 3.8 0 1 0 7.6 0a3.8 3.8 0 1 0 -7.6 0z'/%3E%3Cpath d='M4.6 20.4c.5-3.9 3.6-6.2 7.4-6.2s6.9 2.3 7.4 6.2z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.2 8a3.8 3.8 0 1 0 7.6 0a3.8 3.8 0 1 0 -7.6 0z'/%3E%3Cpath d='M4.6 20.4c.5-3.9 3.6-6.2 7.4-6.2s6.9 2.3 7.4 6.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-refresh::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.6 8A7.5 7.5 0 0 0 5 10.5M5.4 16A7.5 7.5 0 0 0 19 13.5M18.8 4.5V8h-3.5M5.2 19.5V16h3.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.6 8A7.5 7.5 0 0 0 5 10.5M5.4 16A7.5 7.5 0 0 0 19 13.5M18.8 4.5V8h-3.5M5.2 19.5V16h3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-times::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-check::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-plus::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-minus::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-map-marker::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6.5-5.4 6.5-11A6.5 6.5 0 0 0 5.5 10c0 5.6 6.5 11 6.5 11z'/%3E%3Cpath d='M9.7 10a2.3 2.3 0 1 0 4.6 0a2.3 2.3 0 1 0 -4.6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6.5-5.4 6.5-11A6.5 6.5 0 0 0 5.5 10c0 5.6 6.5 11 6.5 11z'/%3E%3Cpath d='M9.7 10a2.3 2.3 0 1 0 4.6 0a2.3 2.3 0 1 0 -4.6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-clock-o::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 12a8.6 8.6 0 1 0 17.2 0a8.6 8.6 0 1 0 -17.2 0z'/%3E%3Cpath d='M12 7.4V12l3.2 2'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 12a8.6 8.6 0 1 0 17.2 0a8.6 8.6 0 1 0 -17.2 0z'/%3E%3Cpath d='M12 7.4V12l3.2 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-home::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.66 9.79L10.84 5.31Q12 4.3 13.16 5.31L18.34 9.79Q19.5 10.8 19.5 12.34L19.5 18.26Q19.5 19.8 17.96 19.8L6.04 19.8Q4.5 19.8 4.5 18.26L4.5 12.34Q4.5 10.8 5.66 9.79z'/%3E%3Cpath d='M10 19.8v-5h4v5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.66 9.79L10.84 5.31Q12 4.3 13.16 5.31L18.34 9.79Q19.5 10.8 19.5 12.34L19.5 18.26Q19.5 19.8 17.96 19.8L6.04 19.8Q4.5 19.8 4.5 18.26L4.5 12.34Q4.5 10.8 5.66 9.79z'/%3E%3Cpath d='M10 19.8v-5h4v5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-lock::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.54 10.5h10.92a1.54 1.54 0 0 1 1.54 1.54v6.92a1.54 1.54 0 0 1 -1.54 1.54h-10.92a1.54 1.54 0 0 1 -1.54 -1.54v-6.92a1.54 1.54 0 0 1 1.54 -1.54z'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3Cpath d='M10.7 15.5a1.3 1.3 0 1 0 2.6 0a1.3 1.3 0 1 0 -2.6 0z' fill='currentColor' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.54 10.5h10.92a1.54 1.54 0 0 1 1.54 1.54v6.92a1.54 1.54 0 0 1 -1.54 1.54h-10.92a1.54 1.54 0 0 1 -1.54 -1.54v-6.92a1.54 1.54 0 0 1 1.54 -1.54z'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3Cpath d='M10.7 15.5a1.3 1.3 0 1 0 2.6 0a1.3 1.3 0 1 0 -2.6 0z' fill='currentColor' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-truck::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.88 6.5L12.62 6.5Q13.5 6.5 13.5 7.38L13.5 15.62Q13.5 16.5 12.62 16.5L3.88 16.5Q3 16.5 3 15.62L3 7.38Q3 6.5 3.88 6.5z'/%3E%3Cpath d='M13.5 9.7h4l3 3.3v3.5h-7'/%3E%3Cpath d='M5.3 17.8a1.9 1.9 0 1 0 3.8 0a1.9 1.9 0 1 0 -3.8 0z'/%3E%3Cpath d='M15.1 17.8a1.9 1.9 0 1 0 3.8 0a1.9 1.9 0 1 0 -3.8 0z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.88 6.5L12.62 6.5Q13.5 6.5 13.5 7.38L13.5 15.62Q13.5 16.5 12.62 16.5L3.88 16.5Q3 16.5 3 15.62L3 7.38Q3 6.5 3.88 6.5z'/%3E%3Cpath d='M13.5 9.7h4l3 3.3v3.5h-7'/%3E%3Cpath d='M5.3 17.8a1.9 1.9 0 1 0 3.8 0a1.9 1.9 0 1 0 -3.8 0z'/%3E%3Cpath d='M15.1 17.8a1.9 1.9 0 1 0 3.8 0a1.9 1.9 0 1 0 -3.8 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-gift::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.82 10h12.36a1.32 1.32 0 0 1 1.32 1.32v7.86a1.32 1.32 0 0 1 -1.32 1.32h-12.36a1.32 1.32 0 0 1 -1.32 -1.32v-7.86a1.32 1.32 0 0 1 1.32 -1.32z'/%3E%3Cpath d='M3.5 7.2h17V10h-17z'/%3E%3Cpath d='M12 7.2v13.3'/%3E%3Cpath d='M12 7.2C9.8 7.2 8 6 8.6 4.6a2 2 0 0 1 3.4.9'/%3E%3Cpath d='M12 7.2c2.2 0 4-1.2 3.4-2.6a2 2 0 0 0-3.4.9'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.82 10h12.36a1.32 1.32 0 0 1 1.32 1.32v7.86a1.32 1.32 0 0 1 -1.32 1.32h-12.36a1.32 1.32 0 0 1 -1.32 -1.32v-7.86a1.32 1.32 0 0 1 1.32 -1.32z'/%3E%3Cpath d='M3.5 7.2h17V10h-17z'/%3E%3Cpath d='M12 7.2v13.3'/%3E%3Cpath d='M12 7.2C9.8 7.2 8 6 8.6 4.6a2 2 0 0 1 3.4.9'/%3E%3Cpath d='M12 7.2c2.2 0 4-1.2 3.4-2.6a2 2 0 0 0-3.4.9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-tag::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.2V5.5A1.5 1.5 0 0 1 5.5 4h6.7l7.6 7.6a1.6 1.6 0 0 1 0 2.3l-5.9 5.9a1.6 1.6 0 0 1-2.3 0z'/%3E%3Cpath d='M6.9 8.3a1.4 1.4 0 1 0 2.8 0a1.4 1.4 0 1 0 -2.8 0z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.2V5.5A1.5 1.5 0 0 1 5.5 4h6.7l7.6 7.6a1.6 1.6 0 0 1 0 2.3l-5.9 5.9a1.6 1.6 0 0 1-2.3 0z'/%3E%3Cpath d='M6.9 8.3a1.4 1.4 0 1 0 2.8 0a1.4 1.4 0 1 0 -2.8 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-shield::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4l7.4 2.7v5.6c0 4.3-3 7.4-7.4 9-4.4-1.6-7.4-4.7-7.4-9V6.1z'/%3E%3Cpath d='M8.8 12l2.3 2.3 4.2-4.4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4l7.4 2.7v5.6c0 4.3-3 7.4-7.4 9-4.4-1.6-7.4-4.7-7.4-9V6.1z'/%3E%3Cpath d='M8.8 12l2.3 2.3 4.2-4.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-info-circle::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 12a8.6 8.6 0 1 0 17.2 0a8.6 8.6 0 1 0 -17.2 0z'/%3E%3Cpath d='M12 11v5.2'/%3E%3Cpath d='M11.05 7.9a0.95 0.95 0 1 0 1.9 0a0.95 0.95 0 1 0 -1.9 0z' fill='currentColor' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 12a8.6 8.6 0 1 0 17.2 0a8.6 8.6 0 1 0 -17.2 0z'/%3E%3Cpath d='M12 11v5.2'/%3E%3Cpath d='M11.05 7.9a0.95 0.95 0 1 0 1.9 0a0.95 0.95 0 1 0 -1.9 0z' fill='currentColor' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-question-circle::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.7 9.7a2.4 2.4 0 1 1 3.4 2.2c-.7.4-1.1.9-1.1 1.7M12 16.8v.1'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.7 9.7a2.4 2.4 0 1 1 3.4 2.2c-.7.4-1.1.9-1.1 1.7M12 16.8v.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-bell::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 17.5v-6a6 6 0 0 1 12 0v6l1.5 2h-15z'/%3E%3Cpath d='M10 21.5h4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 17.5v-6a6 6 0 0 1 12 0v6l1.5 2h-15z'/%3E%3Cpath d='M10 21.5h4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-globe::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 12a8.6 8.6 0 1 0 17.2 0a8.6 8.6 0 1 0 -17.2 0z'/%3E%3Cpath d='M3.4 12h17.2'/%3E%3Cpath d='M12 3.4c2.6 2.4 3.6 5.3 3.6 8.6s-1 6.2-3.6 8.6c-2.6-2.4-3.6-5.3-3.6-8.6s1-6.2 3.6-8.6z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 12a8.6 8.6 0 1 0 17.2 0a8.6 8.6 0 1 0 -17.2 0z'/%3E%3Cpath d='M3.4 12h17.2'/%3E%3Cpath d='M12 3.4c2.6 2.4 3.6 5.3 3.6 8.6s-1 6.2-3.6 8.6c-2.6-2.4-3.6-5.3-3.6-8.6s1-6.2 3.6-8.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-camera::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5a2 2 0 0 1 2-2h2l1.3-2h6.4l1.3 2h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-9z'/%3E%3Ccircle cx='12' cy='13' r='3.4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5a2 2 0 0 1 2-2h2l1.3-2h6.4l1.3 2h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-9z'/%3E%3Ccircle cx='12' cy='13' r='3.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-list::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7h10.5M9 12h10.5M9 17h10.5'/%3E%3Ccircle cx='5' cy='7' r='.9'/%3E%3Ccircle cx='5' cy='12' r='.9'/%3E%3Ccircle cx='5' cy='17' r='.9'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7h10.5M9 12h10.5M9 17h10.5'/%3E%3Ccircle cx='5' cy='7' r='.9'/%3E%3Ccircle cx='5' cy='12' r='.9'/%3E%3Ccircle cx='5' cy='17' r='.9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-play::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.31 6.31L17.19 11.19Q18.5 12 17.19 12.81L9.31 17.69Q8 18.5 8 16.96L8 7.04Q8 5.5 9.31 6.31z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.31 6.31L17.19 11.19Q18.5 12 17.19 12.81L9.31 17.69Q8 18.5 8 16.96L8 7.04Q8 5.5 9.31 6.31z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-body .fa-external-link::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6H7.5A2 2 0 0 0 5.5 8v8.5a2 2 0 0 0 2 2H16a2 2 0 0 0 2-2V12M14 5.5h4.5V10M18.5 5.5 11 13'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6H7.5A2 2 0 0 0 5.5 8v8.5a2 2 0 0 0 2 2H16a2 2 0 0 0 2-2V12M14 5.5h4.5V10M18.5 5.5 11 13'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt-promo-banners-tiles .mt-promo-banner::before {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
display: block;
height: 62%;
content: "";
background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 100%);
}
.mt-citydelivery { position: relative; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--mt-neutral-200); }
.mt-citydelivery-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--mt-neutral-900); }
.mt-citydelivery-input { width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--mt-neutral-300); border-radius: 10px; background: var(--mt-white); color: var(--mt-neutral-900); font-size: 14px; box-sizing: border-box; }
.mt-citydelivery-input:focus { outline: none; border-color: var(--mt-primary); box-shadow: 0 0 0 3px var(--mt-primary-100); }
.mt-citydelivery-list { display: none; position: absolute; left: 0; right: 0; z-index: 30; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--mt-white); border: 1px solid var(--mt-neutral-300); border-radius: 10px; box-shadow: 0 12px 30px rgba(20, 28, 50, .14); }
.mt-citydelivery-list.is-open { display: block; }
.mt-citydelivery-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.mt-citydelivery-list li:hover { background: var(--mt-neutral-100); }
.mt-citydelivery-list li small { color: var(--mt-neutral-500); }
.mt-citydelivery-list .mt-citydelivery-empty { color: var(--mt-neutral-500); cursor: default; }
.mt-citydelivery-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--mt-neutral-100); font-size: 14px; color: var(--mt-neutral-900); }
.mt-citydelivery-result[hidden] { display: none; }
.mt-citydelivery-result b { margin-left: auto; font-size: 16px; }
.mt-citydelivery-note { margin: 8px 0 0; font-size: 12px; color: var(--mt-neutral-500); }
.mt-category-tiles-wrap { position: relative; }
.mt-category-tiles-row.is-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.mt-category-tiles-row.is-slider::-webkit-scrollbar { display: none; }
.mt-category-tiles-row.is-slider .mt-category-tile { flex: 0 0 calc((100% - (var(--mt-tile-cols, 1) - 1) * 16px) / var(--mt-tile-cols, 1)); scroll-snap-align: start; min-width: 0; }
.mt-category-tiles-arrow { display: none; position: absolute; top: 50%; z-index: 3; width: 40px; height: 40px; margin-top: -26px; padding: 0; border: 1px solid var(--mt-neutral-200); border-radius: 50%; background: var(--mt-white); color: var(--mt-neutral-900); box-shadow: 0 6px 18px rgba(20, 28, 50, .16); cursor: pointer; align-items: center; justify-content: center; transition: opacity .15s ease; }
.mt-category-tiles-wrap.is-slider .mt-category-tiles-arrow { display: inline-flex; }
.mt-category-tiles-arrow[disabled] { opacity: 0; pointer-events: none; }
.mt-category-tiles-prev { left: -14px; }
.mt-category-tiles-next { right: -8px; }
@media (max-width: 767px) {
.mt-category-tiles-wrap.is-slider .mt-category-tiles-arrow { display: none; }
.mt-category-tiles-row.is-slider .mt-category-tile { flex-basis: calc((100% - 8px) / 2.4); }
}
.mt-cartpop, .mt-apop { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 16px; }
.mt-apop { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
.mt-apop.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.mt-cartpop-backdrop, .mt-apop-backdrop { position: absolute; inset: 0; background: rgba(12, 20, 40, .55); backdrop-filter: blur(3px); }
.mt-cartpop-dialog, .mt-apop-dialog { position: relative; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 18px; background: var(--mt-white); color: var(--mt-neutral-900); box-shadow: 0 30px 80px rgba(8, 16, 36, .35); }
.mt-cartpop-dialog { max-width: 620px; padding: 22px 24px 24px; animation: mtPopIn .22s ease; }
.mt-apop-dialog { max-width: 440px; padding: 26px 28px 26px; }
@keyframes mtPopIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
html.mt-cartpop-open, html.mt-apop-lock { overflow: hidden; }
.mt-cartpop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.mt-cartpop-ok { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mt-success); color: #fff; flex: 0 0 auto; }
.mt-cartpop-title { flex: 1; font-size: 18px; font-weight: 700; }
.mt-cartpop-close, .mt-apop-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--mt-neutral-100); color: var(--mt-neutral-700); cursor: pointer; }
.mt-cartpop-close:hover, .mt-apop-close:hover { background: var(--mt-neutral-200); }
.mt-cartpop-item { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 14px; background: var(--mt-neutral-100); }
.mt-cartpop-thumb { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 10px; background: var(--mt-white); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mt-cartpop-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mt-cartpop-info { min-width: 0; }
.mt-cartpop-name { display: block; font-weight: 600; line-height: 1.35; color: var(--mt-neutral-900); text-decoration: none; }
.mt-cartpop-price { margin-top: 6px; font-size: 18px; }
.mt-cartpop-new { color: var(--mt-error); }
.mt-cartpop-old { margin-left: 8px; font-size: 14px; color: var(--mt-neutral-500); }
.mt-cartpop-qty { margin-top: 4px; font-size: 13px; color: var(--mt-neutral-600); }
.mt-cartpop-summary { margin: 14px 2px 0; font-size: 14px; color: var(--mt-neutral-700); }
.mt-cartpop-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.mt-cartpop-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 44px; padding: 0 18px; border: 1px solid var(--mt-neutral-300); border-radius: 12px; background: var(--mt-white); color: var(--mt-neutral-900); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.mt-cartpop-btn:hover { border-color: var(--mt-primary); color: var(--mt-primary); }
.mt-cartpop-btn-main { border-color: var(--mt-primary); background: var(--mt-primary); color: #fff; }
.mt-cartpop-btn-main:hover { background: var(--mt-primary-hover); border-color: var(--mt-primary-hover); color: #fff; }
.mt-cartpop-related { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--mt-neutral-200); }
.mt-cartpop-related-title { margin-bottom: 12px; font-weight: 700; }
.mt-cartpop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mt-cartpop-card { display: flex; flex-direction: column; gap: 6px; color: var(--mt-neutral-900); text-decoration: none; }
.mt-cartpop-card img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: var(--mt-neutral-100); }
.mt-cartpop-card-name { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mt-cartpop-card-price { font-size: 13px; }
.mt-apop-close { position: absolute; top: 14px; right: 14px; }
.mt-apop-tabs { display: flex; gap: 6px; margin: 0 40px 18px 0; padding: 4px; border-radius: 12px; background: var(--mt-neutral-100); }
.mt-apop-tab { flex: 1; height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--mt-neutral-600); font-size: 14px; font-weight: 600; cursor: pointer; }
.mt-apop-tab.is-active { background: var(--mt-white); color: var(--mt-neutral-900); box-shadow: 0 2px 8px rgba(20, 28, 50, .12); }
.mt-apop-pane { display: none; }
.mt-apop-pane.is-active { display: block; }
.mt-apop-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.mt-apop-sub { margin: 0 0 16px; font-size: 14px; color: var(--mt-neutral-600); }
.mt-apop-form { display: flex; flex-direction: column; gap: 12px; }
.mt-apop-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mt-apop-field { display: flex; flex-direction: column; gap: 5px; }
.mt-apop-field > span { font-size: 13px; font-weight: 600; color: var(--mt-neutral-700); }
.mt-apop-field input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--mt-neutral-300); border-radius: 10px; background: var(--mt-white); color: var(--mt-neutral-900); font-size: 15px; box-sizing: border-box; }
.mt-apop-field input:focus { outline: none; border-color: var(--mt-primary); box-shadow: 0 0 0 3px var(--mt-primary-100); }
.mt-apop-error { min-height: 0; font-style: normal; font-weight: 500; font-size: 12px; color: var(--mt-error); }
.mt-apop-error:empty { display: none; }
.mt-apop-warning { padding: 10px 12px; border-radius: 10px; background: var(--mt-error-light); color: var(--mt-error-dark); font-size: 13px; }
.mt-apop-warning[hidden] { display: none; }
.mt-apop-agree { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--mt-neutral-700); }
.mt-apop-agree input { margin-top: 2px; }
.mt-apop-agree-link { color: var(--mt-primary); text-decoration: underline; }
.mt-apop-forgot { align-self: flex-end; font-size: 13px; color: var(--mt-primary); text-decoration: none; }
.mt-apop-submit { height: 48px; border: 0; border-radius: 12px; background: var(--mt-primary); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.mt-apop-submit:hover { background: var(--mt-primary-hover); }
.mt-apop-submit[disabled] { opacity: .7; cursor: default; }
.mt-apop-social { margin-top: 6px; }
.mt-apop-social .yd-sauth { margin: 12px 0 0; }
.mt-apop-social .yd-sauth-full .yd-sauth-btn { flex: 1 1 130px; border-radius: 10px; }
@media (max-width: 520px) {
.mt-cartpop, .mt-apop { align-items: flex-end; padding: 0; }
.mt-cartpop-dialog, .mt-apop-dialog { max-width: none; border-radius: 18px 18px 0 0; max-height: 92vh; }
.mt-cartpop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mt-apop-row { grid-template-columns: 1fr; }
}
.mt-pagination-wrapper { display: block; width: 100%; margin-top: 36px; }
.mt-pagination-wrapper .row { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; }
.mt-pagination-wrapper .row::before, .mt-pagination-wrapper .row::after { display: none; }
.mt-pagination-wrapper .col-sm-6 { width: auto; float: none; padding: 0; text-align: center; }
.mt-pagination-wrapper .text-right { font-size: 13px; color: var(--mt-neutral-500); }
.mt-pagination-wrapper .pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.mt-pagination-wrapper .pagination > li { margin: 0; }
.mt-pagination-wrapper .pagination > li > a, .mt-pagination-wrapper .pagination > li > span { display: flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 14px; border: 1px solid var(--mt-neutral-200); border-radius: 14px; background: var(--mt-white); color: var(--mt-neutral-800); font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); transition: border-color .15s, color .15s, transform .15s, box-shadow .15s; }
.mt-pagination-wrapper .pagination > li > a:hover { border-color: var(--mt-primary); color: var(--mt-primary); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15, 23, 42, .1); }
.mt-pagination-wrapper .pagination > li.active > span { border-color: var(--mt-primary); background: var(--mt-primary); color: #fff; box-shadow: 0 8px 20px rgba(12, 41, 106, .3); }
.mt-pagination-wrapper.is-enhanced { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); }
.mt-showmore { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; }
.mt-showmore-status { font-size: 14px; color: var(--mt-neutral-600); }
.mt-showmore-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 260px; height: 52px; padding: 0 34px; border: 2px solid var(--mt-primary); border-radius: 16px; background: var(--mt-white); color: var(--mt-primary); font-size: 16px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.mt-showmore-btn:hover { background: var(--mt-primary); color: #fff; box-shadow: 0 10px 24px rgba(12, 41, 106, .25); }
.mt-showmore-btn.is-loading { opacity: .7; cursor: default; }
@media (max-width: 520px) { .mt-pagination-wrapper .pagination > li > a, .mt-pagination-wrapper .pagination > li > span { min-width: 40px; height: 40px; padding: 0 10px; } .mt-showmore-btn { width: 100%; } }
.mt-product-option { margin-bottom: 18px; }
.mt-product-option-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--mt-neutral-900); }
.mt-product-option-radios { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.mt-product-option-radio { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.mt-product-option-radio input { position: absolute; opacity: 0; pointer-events: none; }
.mt-product-option-radio-mark { display: none; }
.mt-product-option-radio-label { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 2px solid var(--mt-neutral-200); border-radius: 12px; background: var(--mt-white); color: var(--mt-neutral-800); font-size: 14px; font-weight: 600; transition: border-color .15s, background .15s, box-shadow .15s; }
.mt-product-option-radio:hover .mt-product-option-radio-label { border-color: var(--mt-primary); }
.mt-product-option-radio input:checked + .mt-product-option-radio-mark + .mt-product-option-radio-label { border-color: var(--mt-primary); background: var(--mt-primary-50); color: var(--mt-primary); box-shadow: 0 0 0 3px var(--mt-primary-100); }
.mt-product-option .mt-form-select { width: 100%; height: 46px; padding: 0 14px; border: 2px solid var(--mt-neutral-200); border-radius: 12px; background: var(--mt-white); color: var(--mt-neutral-900); font-size: 15px; font-weight: 600; }
.mt-product-option .mt-form-select:focus { outline: none; border-color: var(--mt-primary); box-shadow: 0 0 0 3px var(--mt-primary-100); }
.mt-live { position: fixed; left: 18px; bottom: 18px; z-index: 9980; font-family: inherit; }
.mt-live-toggle { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: #111827; color: #fff; box-shadow: 0 10px 28px rgba(15, 23, 42, .35); cursor: pointer; }
.mt-live-toggle:hover { transform: scale(1.06); }
.mt-live-panel { display: none; position: absolute; left: 0; bottom: 64px; flex-direction: column; width: 380px; max-width: calc(100vw - 36px); max-height: calc(100vh - 110px); border-radius: 18px; background: #fff; color: #1f2937; box-shadow: 0 24px 60px rgba(15, 23, 42, .35); overflow: hidden; }
.mt-live.is-open .mt-live-panel { display: flex; }
.mt-live-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #e5e9f2; }
.mt-live-title { font-size: 16px; font-weight: 700; }
.mt-live-close { width: 30px; height: 30px; border: 0; border-radius: 8px; background: #f1f3f7; color: #1f2937; font-size: 20px; line-height: 1; cursor: pointer; }
.mt-live-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px; }
.mt-live-hint { margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: #6b7280; }
.mt-live-sec { margin-bottom: 8px; border: 1px solid #e5e9f2; border-radius: 12px; }
.mt-live-sec > summary { padding: 10px 12px; font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
.mt-live-sec > summary::-webkit-details-marker { display: none; }
.mt-live-sec > summary::after { content: "+"; float: right; color: #9aa5b8; }
.mt-live-sec[open] > summary::after { content: "\2212"; }
.mt-live-sec > .mt-live-grid, .mt-live-list { padding: 4px 12px 12px; }
.mt-live-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mt-live-chip { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 2px solid #e5e9f2; border-radius: 12px; background: #fff; text-align: left; font-size: 12px; font-weight: 600; color: #1f2937; cursor: pointer; }
.mt-live-chip:hover { border-color: #9aa5b8; }
.mt-live-dots { display: flex; height: 20px; overflow: hidden; border-radius: 6px; }
.mt-live-dots i { flex: 1; }
.mt-live-row { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 0; font-weight: 400; cursor: pointer; }
.mt-live-row input[type="color"] { flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 1px solid #d5dbe6; border-radius: 8px; background: none; cursor: pointer; }
.mt-live-row-name { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.3; color: #1f2937; }
.mt-live-row-hex { flex: 0 0 auto; font-size: 11px; font-family: ui-monospace, Menlo, Consolas, monospace; color: #6b7280; }
.mt-live-row-drop { flex: 0 0 auto; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: #c0c7d4; font-size: 16px; line-height: 1; cursor: pointer; visibility: hidden; }
.mt-live-row.is-set .mt-live-row-drop { visibility: visible; color: #6b7280; }
.mt-live-row-range { flex-wrap: wrap; }
.mt-live-row-range .mt-live-row-name { flex: 1 0 100%; }
.mt-live-row-range input[type="range"] { flex: 1 1 auto; }
.mt-live-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid #e5e9f2; background: #f8fafc; }
.mt-live-status { flex: 1 0 100%; font-size: 12px; color: #6b7280; }
.mt-live-status.is-dirty { color: #b45309; font-weight: 600; }
.mt-live-status.is-ok { color: #15803d; font-weight: 600; }
.mt-live-status.is-error { color: #b91c1c; font-weight: 600; }
.mt-live-btn { padding: 9px 14px; border: 1px solid #d5dbe6; border-radius: 10px; background: #fff; color: #1f2937; font-size: 13px; font-weight: 600; cursor: pointer; }
.mt-live-btn:disabled { opacity: .45; cursor: default; }
.mt-live-btn-primary { flex: 1 1 auto; border-color: #15803d; background: #16a34a; color: #fff; }
.mt-live-btn-ghost { border-color: transparent; background: transparent; color: #6b7280; }
@media (max-width: 767px) { .mt-live { bottom: 82px; } .mt-live-panel { max-height: calc(100vh - 180px); } }
body:has(.mt-cookie) .mt-live { bottom: 100px; }
@media (max-width: 767px) { .mt-cookie { padding: 10px 14px; gap: 8px; font-size: 12px; } .mt-cookie button { padding: 8px 16px; font-size: 13px; } body:has(.mt-cookie) .mt-live { bottom: 190px; } }
@media (min-width: 1100px) { body:has(.mt-cookie) .mt-live { bottom: 18px; } }
.mt-topbar-messengers { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.mt-topbar-msg { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mt-neutral-100); color: var(--mt-neutral-700); transition: background .15s, color .15s; }
.mt-topbar-msg:hover { background: var(--mt-primary); color: #fff; }
.mt-topbar-msg svg { width: 14px; height: 14px; }
.mt-cookie { position: fixed; left: 50%; bottom: 18px; z-index: 9975; display: flex; align-items: center; gap: 16px; width: calc(100% - 36px); max-width: 640px; padding: 14px 18px; transform: translateX(-50%); border-radius: 16px; background: var(--mt-neutral-900); color: #fff; box-shadow: 0 16px 40px rgba(15, 23, 42, .4); font-size: 14px; line-height: 1.4; }
.mt-cookie span { flex: 1; }
.mt-cookie button { flex: 0 0 auto; padding: 10px 22px; border: 0; border-radius: 10px; background: #fff; color: var(--mt-neutral-900); font-size: 14px; font-weight: 700; cursor: pointer; }
.mt-cookie button:hover { background: var(--mt-primary-100); }
@media (max-width: 767px) { .mt-cookie { bottom: 84px; flex-direction: column; align-items: stretch; text-align: center; } }
.mt-recent { margin-top: 40px; }
.mt-recent-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.mt-recent-card { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--mt-white); color: var(--mt-neutral-900); text-decoration: none; scroll-snap-align: start; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); transition: box-shadow .15s, transform .15s; }
.mt-recent-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15, 23, 42, .14); color: var(--mt-neutral-900); }
.mt-recent-card img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: var(--mt-neutral-100); }
.mt-recent-card span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.3; }
.mt-recent-card strong { font-size: 15px; }
.mt-cartpop-free { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--mt-neutral-100); }
.mt-cartpop-free-text { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--mt-neutral-800); }
.mt-cartpop-free-track { height: 8px; border-radius: 999px; background: var(--mt-neutral-200); overflow: hidden; }
.mt-cartpop-free-track i { display: block; height: 100%; border-radius: 999px; background: var(--mt-primary); transition: width .4s; }
.mt-cartpop-free.is-done .mt-cartpop-free-track i { background: var(--mt-success); }
.mt-cartpop-free.is-done .mt-cartpop-free-text { color: var(--mt-success-dark); }
body:has(.mt-cookie) .oc-box-pwa-bar { bottom: 100px; }
@media (max-width: 767px) { .mt-promo-banners-tiles .mt-promo-banner { flex: 0 0 46%; } .mt-promo-banners-tiles .mt-promo-banner-title { font-size: 1rem; overflow-wrap: anywhere; } .mt-promo-banners-tiles .mt-promo-banner-subtitle { font-size: .875rem; } }
@media (max-width: 767px) { .mt-cookie { padding: 10px 14px; gap: 8px; font-size: 12px; line-height: 1.35; } .mt-cookie button { padding: 8px 16px; font-size: 13px; } }
@media (max-width: 767px) { body:has(.mt-cookie) .mt-contact-widget { bottom: 210px; } }
a:focus:not(:focus-visible), button:focus:not(:focus-visible), summary:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible), label:focus:not(:focus-visible) { outline: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--mt-primary-400); outline-offset: 2px; }
a, button, summary, label, [role="button"] { -webkit-tap-highlight-color: transparent; }
.mt-product-nav { position: sticky; top: var(--mt-sticky-top, 102px); z-index: 80; }
.mt-product-nav.is-stuck { box-shadow: 0 10px 24px rgba(15, 23, 42, .12); }
[id^="tab-"] { scroll-margin-top: calc(var(--mt-sticky-top, 102px) + 72px); }
.mt-mini-cart-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 24px 24px; text-align: center; }
.mt-mini-cart-empty-icon { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 8px; border-radius: 50%; background: var(--mt-primary-50, #eef2fb); color: var(--mt-primary-500, #0c296a); }
.mt-mini-cart-empty-icon svg { width: 42px; height: 42px; }
.mt-mini-cart-empty-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--mt-text-primary); }
.mt-mini-cart-empty-text { max-width: 240px; margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--mt-text-secondary); }
.mt-mini-cart-empty .mt-btn { min-width: 170px; }
.mt-promo-banners-vertical .mt-promo-banners-grid { display: grid; gap: 16px; grid-template-columns: repeat(var(--mt-vb-cols, 4), minmax(0, 1fr)); }
.mt-promo-banners-vertical .mt-promo-banners-grid[data-columns="2"] { --mt-vb-cols: 2; }
.mt-promo-banners-vertical .mt-promo-banners-grid[data-columns="3"] { --mt-vb-cols: 3; }
.mt-promo-banners-vertical .mt-promo-banners-grid[data-columns="4"] { --mt-vb-cols: 4; }
.mt-promo-banners-vertical .mt-promo-banners-grid[data-columns="5"] { --mt-vb-cols: 5; }
.mt-promo-banners-vertical .mt-promo-banners-grid[data-columns="6"] { --mt-vb-cols: 6; }
.mt-promo-banners-vertical .mt-promo-banner { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--mt-card-radius); background: var(--mt-surface-muted); }
.mt-promo-banners-vertical .mt-promo-banner-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mt-promo-banners-vertical .mt-promo-banner:hover .mt-promo-banner-image { transform: scale(1.05); }
.mt-promo-banners-vertical .mt-promo-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 16, 32, .72) 0%, rgba(10, 16, 32, 0) 55%); pointer-events: none; }
.mt-promo-banners-vertical .mt-promo-banner-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 18px; color: #fff; }
.mt-promo-banners-vertical .mt-promo-banner-title { font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.mt-promo-banners-vertical .mt-promo-banner-subtitle { font-size: .9rem; opacity: .92; }
.mt-promo-banners-vertical .mt-promo-banner-button { align-self: flex-start; margin-top: 6px; }
@media (max-width: 991px) { .mt-promo-banners-vertical .mt-promo-banners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .mt-promo-banners-vertical .mt-promo-banners-grid { grid-auto-flow: column; grid-auto-columns: 62%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .mt-promo-banners-vertical .mt-promo-banner { scroll-snap-align: start; } }
@media (max-width: 1023px) {
.mt-catalog-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.mt-catalog-toolbar .mt-filter-toggle { order: 0; width: 100%; height: 48px; margin: 0; justify-content: center; }
.mt-catalog-toolbar .mt-catalog-sort { min-width: 0; margin: 0; }
.mt-catalog-toolbar .mt-catalog-sort .mt-form-select { width: 100%; height: 48px; }
.mt-catalog-toolbar .mt-catalog-limit, .mt-catalog-toolbar .mt-catalog-view { display: none; }
.mt-catalog-toolbar:not(:has(.mt-filter-toggle)) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) { .mt-catalog-toolbar.is-sticky { position: sticky; top: var(--mt-sticky-top, 102px); z-index: 70; box-shadow: 0 6px 18px rgba(15, 23, 42, .08); } }
@media (min-width: 1024px) { body.mt-is-home .mt-header-catalog { display: none; } }
@media (max-width: 1023px) { .mt-catalog-toolbar .mt-catalog-sort .mt-form-select { padding-left: 12px; padding-right: 30px; font-size: 14px; text-overflow: ellipsis; } }
.mt-cart-sheet-overlay { position: fixed; inset: 0; z-index: 1190; background: rgba(15, 23, 42, .45); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.mt-cart-sheet-overlay.is-visible { opacity: 1; visibility: visible; }
.mt-cart-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; max-height: 85vh; overflow-y: auto; background: var(--mt-surface, #fff); border-radius: 20px 20px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 32px rgba(15, 23, 42, .18); transform: translateY(105%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); overscroll-behavior: contain; }
.mt-cart-sheet.is-open { transform: translateY(0); }
.mt-cart-sheet-handle { width: 44px; height: 5px; margin: 4px auto 12px; border-radius: 3px; background: var(--mt-border-color, #d1d5db); }
.mt-cart-sheet .mt-mini-cart-loading { min-height: 120px; }
@media (min-width: 1024px) { .mt-cart-sheet, .mt-cart-sheet-overlay { display: none; } }
.mt-product-card .mt-product-sticker { justify-content: center; box-sizing: border-box; padding: 2px 6px 0; line-height: 17px; }
* { scrollbar-width: thin; scrollbar-color: var(--mt-neutral-300, #cbd5e1) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-thumb { background: var(--mt-neutral-300, #cbd5e1); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: var(--mt-neutral-400, #94a3b8); }
*::-webkit-scrollbar-track { background: transparent; }
.mt-recent-row, .mt-product-gallery-thumbs, .mt-product-nav { scrollbar-width: none; -ms-overflow-style: none; }
.mt-recent-row::-webkit-scrollbar, .mt-product-gallery-thumbs::-webkit-scrollbar, .mt-product-nav::-webkit-scrollbar { display: none; }
.mt-catalog-content .mt-products-grid.is-list, .mt-catalog-layout-full .mt-products-grid.is-list { grid-template-columns: minmax(0, 1fr); }
.mt-product-price, .mt-product-price-old, .mt-product-stock, .mt-product-discount { white-space: nowrap; }
.mt-products-grid.is-list .mt-product-price-row { flex-wrap: wrap; gap: 12px; }
.mt-scroll-top { display: flex; width: 44px; height: 44px; right: 63px; bottom: 120px; color: var(--mt-primary); box-shadow: 0 4px 14px rgba(15, 23, 42, .16); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease, bottom .25s ease; }
.mt-scroll-top.is-visible:not(.is-hidden) { opacity: 1; visibility: visible; transform: none; }
.mt-scroll-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mt-scroll-top-track { fill: none; stroke: var(--mt-neutral-200, #e2e8f0); stroke-width: 3; }
.mt-scroll-top-bar { fill: none; stroke: var(--mt-accent, #2563eb); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 119.38; stroke-dashoffset: 119.38; transition: stroke-dashoffset .12s linear; }
.mt-scroll-top-arrow { position: relative; width: 18px; height: 18px; }
@media (max-width: 1023px) { .mt-scroll-top { bottom: 150px; right: 18px; } }
.mt-thumbs-holder { position: relative; max-width: 100%; }
.mt-thumbs-arrow { position: absolute; top: 50%; z-index: 3; display: none; align-items: center; justify-content: center; width: 32px; height: 32px; margin-top: -20px; padding: 0; color: var(--mt-primary); background: var(--mt-surface, #fff); border: 1px solid var(--mt-border-color); border-radius: 50%; box-shadow: 0 2px 8px rgba(15, 23, 42, .14); cursor: pointer; }
.mt-thumbs-arrow.is-prev { left: -6px; }
.mt-thumbs-arrow.is-next { right: -6px; }
.mt-product-actions .mt-card-video { color: var(--mt-primary); cursor: pointer; }
.mt-product-actions .mt-card-video svg { width: 14px; height: 14px; }
.mt-product-actions .mt-card-video:hover { color: #fff; background: var(--mt-primary); }
.mt-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1015; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--mt-surface, #fff); border-top: 1px solid var(--mt-border-color); box-shadow: 0 -8px 24px rgba(15, 23, 42, .1); transform: translateY(110%); transition: transform .25s ease; }
.mt-buybar.is-visible { transform: translateY(0); }
.mt-buybar-inner { display: flex; align-items: center; gap: 14px; }
.mt-buybar-thumb { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; flex-shrink: 0; }
.mt-buybar-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.mt-buybar-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mt-buybar-price { font-size: 18px; font-weight: 700; white-space: nowrap; }
.mt-buybar-btn { flex-shrink: 0; min-width: 180px; }
@media (max-width: 1023px) {
.mt-buybar { bottom: 60px; padding: 8px 0; }
.mt-buybar-name { display: none; }
.mt-buybar-btn { min-width: 0; padding-left: 18px; padding-right: 18px; }
}
.mt-category-page { padding-top: 6px; padding-bottom: var(--mt-space-4); }
.mt-category-page .mt-breadcrumb-wrapper { margin: 0; padding: 10px 0 2px; }
.mt-category-page .mt-page-header { margin-bottom: 10px; }
.mt-category-page .mt-page-title { margin: 0; font-size: 26px; line-height: 1.25; }
.mt-category-page .mt-subcategories { margin-bottom: 12px; }
.mt-category-page .mt-subcategories-list { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-category-page .mt-subcategory-item { display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; padding: 5px 16px 5px 5px; font-size: 14px; font-weight: 600; text-align: left; border-radius: 12px; }
.mt-category-page .mt-subcategory-image { width: 36px; max-width: 36px; height: 36px; object-fit: contain; border-radius: 8px; background: var(--mt-surface-muted, #f1f5f9); }
.mt-category-page .mt-subcategory-name { display: block; }
.mt-contact-widget, .oc-box-pwa-bar { transition: bottom .25s ease; }
body.mt-has-buybar .mt-contact-widget { bottom: calc(30px + var(--mt-buybar-h, 74px)); }
body.mt-has-buybar .mt-scroll-top { bottom: calc(120px + var(--mt-buybar-h, 74px)); }
body.mt-has-buybar .oc-box-pwa-bar { bottom: calc(12px + var(--mt-buybar-h, 74px)); }
@media (max-width: 1023px) {
body.mt-has-buybar .mt-contact-widget { bottom: calc(84px + var(--mt-buybar-h, 62px)); }
body.mt-has-buybar .mt-scroll-top { bottom: calc(150px + var(--mt-buybar-h, 62px)); }
body.mt-has-buybar .oc-box-pwa-bar { bottom: calc(72px + var(--mt-buybar-h, 62px)); }
}
.mt-recent-item { position: relative; flex: 0 0 170px; display: flex; scroll-snap-align: start; }
.mt-recent-item .mt-recent-card { padding-bottom: 14px; }
.mt-recent-cart { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; color: #fff; background: var(--mt-primary); border: 0; border-radius: 10px; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.mt-recent-cart:hover { transform: scale(1.06); background: var(--mt-primary-dark, var(--mt-primary)); }
body.mt-cart-icon .mt-product-card .mt-product-cart { width: 44px; min-width: 44px; padding: 0; gap: 0; justify-content: center; }
body.mt-cart-icon .mt-product-card .mt-product-cart span { display: none; }
body.mt-cart-icon .mt-product-card .mt-product-cart svg { width: 20px; height: 20px; margin: 0; }
.mt-product-card .mt-product-bell { width: 44px; min-width: 44px; padding: 0; justify-content: center; color: var(--mt-primary); border-color: var(--mt-primary); }
.mt-product-card .mt-product-bell:hover { color: #fff; background: var(--mt-primary); }
@media (min-width: 1024px) {
.mt-catalog-sidebar { align-self: start; }
.mt-catalog-sidebar > :not(style):not(script) { position: static; max-height: none; overflow: visible; }
}
.mt-pagination-wrapper .pagination > li.pagination-gap > span { min-width: 28px; padding: 0 4px; border-color: transparent; background: transparent; box-shadow: none; color: var(--mt-neutral-500, #64748b); }
.mt-pagination-wrapper .pagination > li.pagination-prev > a, .mt-pagination-wrapper .pagination > li.pagination-next > a { font-size: 24px; line-height: 1; padding: 0 12px 3px; }
@media (max-width: 600px) { .mt-pagination-wrapper .pagination > li.pagination-far { display: none; } }
.mt-option-error { border-radius: 12px; box-shadow: 0 0 0 2px #ef4444; animation: mt-option-shake .35s ease 1; }
@keyframes mt-option-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
html, body { overflow-x: clip; }
@media (min-width: 1024px) and (max-width: 1279px) {
.mt-topbar-left { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.mt-topbar-left ul { flex-wrap: nowrap; white-space: nowrap; }
.mt-topbar-left li:nth-child(n+3) { display: none; }
.mt-topbar-right { flex: 0 0 auto; gap: 10px; }
.mt-topmenu-list { gap: 16px; }
}
@media (max-width: 600px) {
.mt-pagination-wrapper .pagination > li.pagination-gap-desktop { display: none; }
.mt-pagination-wrapper .pagination > li.pagination-gap-mobile { display: list-item !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.mt-contact-widget { bottom: 84px; }
.mt-cookie { bottom: 84px; }
}
.mt-buybar-name { color: var(--mt-neutral-900, #0f172a); }
.mt-buybar-price { color: var(--mt-neutral-900, #0f172a); }
.mt-buybar-btn.is-loading { opacity: .7; pointer-events: none; }
body.mt-has-buybar { padding-bottom: var(--mt-buybar-h, 74px); }
body.mt-has-buybar .mt-cookie { bottom: calc(18px + var(--mt-buybar-h, 74px)); }
@media (max-width: 1023px) {
body.mt-has-buybar { padding-bottom: calc(60px + var(--mt-buybar-h, 62px)); }
body.mt-has-buybar .mt-cookie { bottom: calc(84px + var(--mt-buybar-h, 62px)); }
body.mt-has-buybar .mt-contact-widget { bottom: calc(84px + var(--mt-buybar-h, 62px)); }
}
@media (max-width: 1023px) {
.mt-catalog-sidebar.is-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1300; display: block !important; width: min(88vw, 380px); max-height: none; margin: 0; padding: 56px 16px 24px; overflow-y: auto; background: var(--mt-surface, #fff); border-radius: 0 18px 18px 0; box-shadow: 0 0 40px rgba(15, 23, 42, .25); }
.mt-catalog-sidebar.is-drawer > * { display: block !important; position: static !important; max-height: none !important; overflow: visible !important; }
.mt-catalog-sidebar.is-drawer .hidden-xs { display: block !important; }
.mt-drawer-overlay { position: fixed; inset: 0; z-index: 1290; background: rgba(15, 23, 42, .45); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
body.mt-drawer-open .mt-drawer-overlay { opacity: 1; visibility: visible; }
body.mt-drawer-open { overflow: hidden; }
}
.mt-drawer-close { display: none; }
@media (max-width: 1023px) {
.mt-catalog-sidebar.is-drawer .mt-drawer-close { position: absolute !important; top: 12px; right: 12px; display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; color: var(--mt-neutral-700, #334155); background: var(--mt-surface-muted, #f1f5f9); border: 0; border-radius: 50%; cursor: pointer; }
}
@media (max-width: 1023px) { .mt-catalog-sidebar.is-drawer #column-left, .mt-catalog-sidebar.is-drawer #column-right { display: block !important; width: 100% !important; max-width: none !important; float: none !important; padding: 0 !important; } }
html.mt-scroll-lock, html:has(body.mt-menu-open), html:has(body.mt-drawer-open) { overflow: hidden; }
body.mt-menu-open .mt-contact-widget, body.mt-menu-open .mt-scroll-top, body.mt-drawer-open .mt-contact-widget, body.mt-drawer-open .mt-scroll-top, body.mt-drawer-open .mt-buybar { visibility: hidden; opacity: 0; pointer-events: none; }
@media (max-width: 1023px) {
body:has(.mt-cookie) .mt-contact-widget { bottom: 210px; }
body:has(.mt-cookie) .mt-scroll-top { bottom: 280px; }
body.mt-has-buybar:has(.mt-cookie) .mt-contact-widget { bottom: calc(200px + var(--mt-buybar-h, 62px)); }
body.mt-has-buybar:has(.mt-cookie) .mt-scroll-top { bottom: calc(270px + var(--mt-buybar-h, 62px)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
.mt-scroll-top { bottom: 170px; right: 26px; }
body.mt-has-buybar .mt-scroll-top { bottom: calc(170px + var(--mt-buybar-h, 62px)); }
}
@media (max-width: 600px) {
.mt-pagination-wrapper .pagination { gap: 5px; }
.mt-pagination-wrapper .pagination > li > a, .mt-pagination-wrapper .pagination > li > span { min-width: 34px; height: 38px; padding: 0 8px; border-radius: 10px; font-size: 14px; }
.mt-pagination-wrapper .pagination > li.pagination-gap > span { min-width: 18px; padding: 0 2px; }
}
.mt-recent-cart.is-bell { color: var(--mt-primary); background: var(--mt-surface, #fff); border: 1px solid var(--mt-primary); }
.mt-cartpop.is-arming, .mt-cartpop.is-arming * { pointer-events: none !important; }
body.mt-menu-open { position: static; width: auto; }
@media (min-width: 768px) and (max-width: 1023px) {
body:has(.mt-cookie) .mt-scroll-top { bottom: 296px; }
}
.mt-breadcrumb-wrapper { margin: 0; }
.mt-breadcrumb { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; padding: 12px 0 8px; overflow-x: auto; list-style: none; font-size: 13px; line-height: 1.3; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none; }
.mt-breadcrumb::-webkit-scrollbar { display: none; }
.mt-breadcrumb-item { display: inline-flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.mt-breadcrumb-item + .mt-breadcrumb-item::before { content: ''; flex: 0 0 auto; width: 14px; height: 14px; margin-right: 6px; background: var(--mt-neutral-400, #94a3b8); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.mt-breadcrumb-item a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; color: var(--mt-neutral-600, #475569); text-decoration: none; background: var(--mt-surface, #fff); border: 1px solid var(--mt-neutral-200, #e2e8f0); border-radius: 999px; transition: color .15s ease, border-color .15s ease; }
.mt-breadcrumb-item a:hover { color: var(--mt-primary); border-color: var(--mt-primary); }
.mt-breadcrumb-item a svg { width: 14px; height: 14px; }
.mt-breadcrumb-item.active span { display: inline-block; max-width: 46ch; overflow: hidden; padding: 4px 2px; color: var(--mt-neutral-900, #0f172a); font-weight: 600; text-overflow: ellipsis; }
@media (max-width: 767px) { .mt-breadcrumb-item.active span { max-width: 60vw; } }
.mt-news-more { text-decoration: none; }
.mt-news-more:hover { text-decoration: underline; }
.mt-blog-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-bottom: 32px; }
@media (min-width: 1024px) {
.mt-blog-layout.has-left { grid-template-columns: 260px minmax(0, 1fr); }
.mt-blog-layout.has-right { grid-template-columns: minmax(0, 1fr) 260px; }
.mt-blog-layout.has-left.has-right { grid-template-columns: 240px minmax(0, 1fr) 240px; }
}
.mt-blog-aside .list-group { overflow: hidden; margin: 0; padding: 6px; background: var(--mt-surface, #fff); border-radius: 16px; }
.mt-blog-aside .list-group-item { display: flex; justify-content: space-between; padding: 10px 12px; color: var(--mt-neutral-700, #334155); background: none; border: 0; border-radius: 10px; font-size: 14px; font-weight: 500; }
.mt-blog-aside .list-group-item:hover, .mt-blog-aside .list-group-item.active { color: var(--mt-primary); background: var(--mt-surface-muted, #f1f5f9); }
.mt-blog-article, .mt-blog-main { min-width: 0; }
.mt-blog-article { padding: 28px 32px; background: var(--mt-surface, #fff); border-radius: 20px; }
@media (max-width: 767px) { .mt-blog-article { padding: 18px 16px; border-radius: 16px; } }
.mt-blog-head { margin-bottom: 18px; }
.mt-blog-title { margin: 0 0 10px; font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; line-height: 1.2; color: var(--mt-neutral-900, #0f172a); }
.mt-blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; color: var(--mt-neutral-500, #64748b); }
.mt-blog-meta-link { color: var(--mt-primary); font-weight: 600; text-decoration: none; }
.mt-blog-stars { display: inline-flex; gap: 1px; font-size: 15px; line-height: 1; color: var(--mt-neutral-300, #cbd5e1); }
.mt-blog-stars .is-on { color: #f59e0b; }
.mt-blog-cover { display: block; overflow: hidden; margin: 0 0 20px; border-radius: 16px; }
.mt-blog-cover img { display: block; width: 100%; height: auto; }
.mt-blog-gallery { display: flex; gap: 10px; margin: 0 0 20px; overflow-x: auto; scrollbar-width: none; }
.mt-blog-gallery img { width: 120px; height: 90px; object-fit: cover; border-radius: 12px; }
.mt-blog-content { font-size: 16px; line-height: 1.75; color: var(--mt-neutral-800, #1e293b); }
.mt-blog-content h2, .mt-blog-content h3 { margin: 28px 0 10px; font-weight: 800; line-height: 1.25; color: var(--mt-neutral-900, #0f172a); }
.mt-blog-content h2 { font-size: 24px; }
.mt-blog-content h3 { font-size: 20px; }
.mt-blog-content p { margin: 0 0 14px; }
.mt-blog-content ul, .mt-blog-content ol { margin: 0 0 16px; padding-left: 22px; }
.mt-blog-content li { margin: 0 0 6px; }
.mt-blog-content img { max-width: 100%; height: auto; border-radius: 14px; }
.mt-blog-content a { color: var(--mt-primary); }
.mt-blog-content blockquote { margin: 18px 0; padding: 14px 18px; background: var(--mt-surface-muted, #f1f5f9); border-left: 4px solid var(--mt-primary); border-radius: 0 12px 12px 0; }
.mt-blog-intro { display: flex; gap: 18px; align-items: flex-start; margin: 0 0 20px; padding: 20px; background: var(--mt-surface, #fff); border-radius: 18px; }
.mt-blog-intro img { width: 120px; border-radius: 12px; }
.mt-blog-downloads { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.mt-blog-download { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--mt-neutral-800, #1e293b); text-decoration: none; background: var(--mt-surface-muted, #f1f5f9); border-radius: 12px; }
.mt-blog-download small { color: var(--mt-neutral-500, #64748b); }
.mt-blog-section { margin-top: 34px; }
.mt-blog-section-title { margin: 0 0 16px; font-size: 22px; font-weight: 800; color: var(--mt-neutral-900, #0f172a); }
.mt-blog-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.mt-blog-product { display: flex; flex-direction: column; gap: 8px; padding: 12px; color: var(--mt-neutral-900, #0f172a); text-decoration: none; background: var(--mt-surface-muted, #f8fafc); border-radius: 14px; transition: transform .15s ease, box-shadow .15s ease; }
.mt-blog-product:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .1); }
.mt-blog-product img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 10px; }
.mt-blog-product-name { display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mt-blog-product-price b { font-size: 15px; }
.mt-blog-product-price s { margin-left: 4px; font-size: 12px; color: var(--mt-neutral-500, #64748b); }
.mt-blog-toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; padding: 12px 16px; background: var(--mt-surface, #fff); border-radius: 16px; }
.mt-blog-toolbar-field { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; color: var(--mt-neutral-600, #475569); }
.mt-blog-toolbar-field .mt-form-select { width: auto; min-width: 150px; height: 42px; }
.mt-blog-grid { margin-bottom: 20px; }
.mt-blog-empty { padding: 30px; text-align: center; background: var(--mt-surface, #fff); border-radius: 18px; }
.mt-blog-comments { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--mt-neutral-200, #e2e8f0); }
.mt-comments-list.is-loading { opacity: .5; }
.mt-comment { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--mt-neutral-100, #f1f5f9); }
.mt-comment-avatar { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; color: #fff; background: var(--mt-primary); border-radius: 50%; font-weight: 700; }
.mt-comment-body { min-width: 0; flex: 1 1 auto; }
.mt-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.mt-comment-author { font-size: 15px; color: var(--mt-neutral-900, #0f172a); }
.mt-comment-date { margin-left: auto; font-size: 13px; color: var(--mt-neutral-500, #64748b); }
.mt-comment-text { font-size: 15px; line-height: 1.6; color: var(--mt-neutral-700, #334155); overflow-wrap: anywhere; }
.mt-comments-empty { padding: 18px; text-align: center; color: var(--mt-neutral-500, #64748b); background: var(--mt-surface-muted, #f8fafc); border-radius: 14px; }
.mt-comment-form { margin-top: 24px; padding: 22px; background: var(--mt-surface-muted, #f8fafc); border-radius: 18px; }
.mt-comment-form-title { margin: 0 0 16px; font-size: 18px; font-weight: 800; color: var(--mt-neutral-900, #0f172a); }
.mt-comment-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
@media (max-width: 600px) { .mt-comment-grid { grid-template-columns: minmax(0, 1fr); } }
.mt-comment-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--mt-neutral-700, #334155); }
.mt-comment-field input[type=text], .mt-comment-field textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; font-weight: 400; color: var(--mt-neutral-900, #0f172a); background: #fff; border: 1px solid var(--mt-neutral-200, #e2e8f0); border-radius: 12px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.mt-comment-field input[type=text]:focus, .mt-comment-field textarea:focus { border-color: var(--mt-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.mt-comment-note { font-weight: 400; color: var(--mt-neutral-500, #64748b); }
.mt-comment-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; padding: 4px 0; }
.mt-comment-stars input { position: absolute; opacity: 0; pointer-events: none; }
.mt-comment-stars label { margin: 0; font-size: 28px; line-height: 1; color: var(--mt-neutral-300, #cbd5e1); cursor: pointer; transition: color .1s ease, transform .1s ease; }
.mt-comment-stars label:hover, .mt-comment-stars label:hover ~ label, .mt-comment-stars input:checked ~ label { color: #f59e0b; }
.mt-comment-stars label:hover { transform: scale(1.1); }
.mt-comment-stars input:focus-visible + label { outline: 2px solid var(--mt-primary); border-radius: 4px; }
.mt-comment-msg:empty { display: none; }
.mt-comment-msg { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.mt-comment-msg.is-ok { color: #166534; background: #dcfce7; }
.mt-comment-msg.is-error { color: #991b1b; background: #fee2e2; }
.mt-comment-actions { display: flex; justify-content: flex-end; }
.mt-comment-actions .mt-btn { min-width: 180px; height: 46px; }
.mt-comment-login { font-size: 15px; }
@media (max-width: 767px) {
.mt-products[data-mobile-view="slider"] .mt-products-grid { gap: 10px; padding-bottom: 4px; scroll-padding-left: 0; }
.mt-products[data-mobile-view="slider"] .mt-product-card { flex: 0 0 calc(45% - 5px); }
}
.mt-products-grid { align-items: stretch; }
.mt-products-grid > .mt-product-card { height: auto; }
.mt-product-card .mt-product-card-bottom { flex: 1 1 auto; }
.mt-product-card .mt-product-price-row { margin-top: auto; }
.mt-product-card .mt-product-meta { flex-wrap: nowrap; min-width: 0; }
.mt-product-card .mt-product-stock { flex: 0 0 auto; }
.mt-product-card .mt-product-sku { flex: 1 1 auto; min-width: 0; text-align: right; }
.mt-product-card .oc-box-pa-history { display: none; }
.mt-blog-aside #column-left, .mt-blog-aside #column-right { display: block; width: 100%; max-width: none; float: none; padding: 0; }
@media (max-width: 1023px) { .mt-blog-aside { display: none; } }
@media (max-width: 767px) { .mt-product-card .mt-product-sku { display: none; } }
.mt-option-error { box-shadow: none !important; animation: none !important; }
.mt-option-error .mt-product-option-label { color: #dc2626; }
.mt-option-error .mt-form-select, .mt-option-error .mt-product-option-radio, .mt-option-error .mt-product-option-image, .mt-option-error .mt-form-input { border-color: #ef4444 !important; }
.mt-option-error-text { margin-top: 6px; font-size: 13px; font-weight: 500; color: #dc2626; }
.mt-select-hidden { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.mt-product-quantity .mt-product-card-quantity { display: inline-flex !important; }
@media (max-width: 767px) {
.mt-product-quantity .mt-qty-btn { width: 44px; height: 44px; }
.mt-product-quantity .mt-qty-input { width: 56px; height: 44px; font-size: 16px; }
}
@media (max-width: 1023px) {
.oc-box-pwa-bar { bottom: 72px; }
body:has(.mt-cookie) .oc-box-pwa-bar { bottom: 190px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
.mt-products-collection .mt-products-grid > .mt-product-card:nth-child(n+5) { display: none; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.mt-products-collection .mt-products-grid > .mt-product-card:nth-child(n+4) { display: none; }
}
@media (max-width: 767px) {
.mt-products[data-mobile-view="slider"] .mt-collection-card { flex: 0 0 calc(45% - 5px); min-width: 0; scroll-snap-align: start; }
}
.mt-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.mt-stars svg { width: 16px; height: 16px; fill: var(--mt-neutral-200, #e2e8f0); }
.mt-stars svg.is-on { fill: #f5b301; }
.mt-stars-lg svg { width: 24px; height: 24px; }
.mt-blog-meta .mt-stars svg { width: 18px; height: 18px; }
.mt-comments-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .mt-comments-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.mt-comments-summary { position: sticky; top: calc(var(--mt-sticky-top, 102px) + 8px); display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--mt-surface-muted, #f8fafc); border-radius: 18px; }
@media (max-width: 860px) { .mt-comments-summary { position: static; } }
.mt-comments-score b { font-size: 44px; font-weight: 800; line-height: 1; color: var(--mt-neutral-900, #0f172a); }
.mt-comments-score span { margin-left: 2px; font-size: 18px; color: var(--mt-neutral-500, #64748b); }
.mt-comments-count { font-size: 14px; color: var(--mt-neutral-500, #64748b); }
.mt-comments-open { width: 100%; height: 46px; margin-top: 6px; }
.mt-comments-main { min-width: 0; }
.mt-comment-form { margin: 0 0 20px; padding: 22px; background: var(--mt-surface, #fff); border: 1px solid var(--mt-neutral-200, #e2e8f0); border-radius: 18px; }
.mt-comment-form[hidden] { display: none; }
.mt-comment-field-inline { flex-direction: row; align-items: center; gap: 14px; }
.mt-comment-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; padding: 0; }
.mt-comment-stars label { display: inline-flex; margin: 0; cursor: pointer; }
.mt-comment-stars label svg { width: 30px; height: 30px; fill: var(--mt-neutral-200, #e2e8f0); transition: fill .12s ease, transform .12s ease; }
.mt-comment-stars label:hover svg, .mt-comment-stars label:hover ~ label svg, .mt-comment-stars input:checked ~ label svg { fill: #f5b301; }
.mt-comment-stars label:hover svg { transform: scale(1.12); }
.mt-comment-actions { justify-content: flex-start; gap: 10px; }
.mt-comment-actions .mt-btn { min-width: 0; padding: 0 22px; }
.mt-comment { padding: 18px 0; }
.mt-comment:first-child { padding-top: 0; }
.mt-comment-head .mt-stars svg { width: 15px; height: 15px; }
body.mt-body #oc-box-filter-mobile-btn { display: none !important; }
html:has(.oc-box-filter-drawer-open) { overflow: hidden; }
.oc-box-filter-drawer-open .oc-box-filter-heading { display: none; }
.oc-box-filter-drawer-open .oc-box-filter-drawer-header { font-weight: 800; color: var(--mt-neutral-900, #0f172a); }
.oc-box-filter-drawer-open .oc-box-filter-drawer-close { border: 0 !important; background: var(--mt-surface-muted, #f1f5f9) !important; color: var(--mt-neutral-700, #334155) !important; border-radius: 50% !important; }
.oc-box-filter-drawer-open .oc-box-filter-mobile-apply { background: var(--mt-primary) !important; border-color: var(--mt-primary) !important; border-radius: 12px !important; }
.oc-box-filter-drawer-open .oc-box-filter-mobile-cancel { border-radius: 12px !important; }
.oc-box-filter .noUi-connect { background: var(--mt-primary) !important; }
.oc-box-filter .noUi-handle { border-color: var(--mt-primary) !important; }
.oc-box-filter input[type=checkbox], .oc-box-filter input[type=radio] { accent-color: var(--mt-primary); }
.oc-box-filter-drawer-close:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }
@media (max-width: 767px) {
.mt-products[data-mobile-view="slider"] .mt-products-grid { gap: 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mt-products[data-mobile-view="slider"] .mt-products-grid::-webkit-scrollbar { display: none; }
.mt-products[data-mobile-view="slider"] .mt-product-card, .mt-products[data-mobile-view="slider"] .mt-collection-card { flex: 0 0 calc((100% - 10px) / 2); min-width: 0; scroll-snap-align: start; }
.mt-products[data-mobile-view="slider"] .mt-collection-card { padding: 16px 14px; gap: 10px; }
.mt-products[data-mobile-view="slider"] .mt-collection-card-title { font-size: 18px; }
.mt-products[data-mobile-view="slider"] .mt-collection-card-subtitle { display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.35; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.mt-products[data-mobile-view="slider"] .mt-collection-card-photo img { width: 82%; border-radius: 14px; }
.mt-products[data-mobile-view="slider"] .mt-collection-card-foot { flex-direction: column; align-items: stretch; gap: 8px; }
.mt-products[data-mobile-view="slider"] .mt-collection-card-from b { font-size: 17px; white-space: nowrap; }
.mt-products[data-mobile-view="slider"] .mt-collection-card-btn { display: block; padding: 9px 10px; text-align: center; font-size: 13px; }
}
.mt-slider-dots { display: none; }
@media (max-width: 767px) {
.mt-slider-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.mt-slider-dots button { width: 8px; height: 8px; padding: 0; background: var(--mt-neutral-300, #cbd5e1); border: 0; border-radius: 999px; transition: width .2s ease, background-color .2s ease; }
.mt-slider-dots button.is-active { width: 22px; background: var(--mt-primary); }
}
.mt-promo-banners-vertical .mt-promo-banner-overlay { top: auto; bottom: 0; justify-content: flex-end; }
.mt-promo-banners-vertical .mt-promo-banner-title, .mt-promo-banners-vertical .mt-promo-banner-subtitle { overflow-wrap: anywhere; }
@media (max-width: 767px) {
.mt-promo-banners-vertical .mt-promo-banners-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; gap: 10px; overflow: visible; scroll-snap-type: none; }
.mt-promo-banners-vertical .mt-promo-banner-overlay { gap: 4px; padding: 12px; }
.mt-promo-banners-vertical .mt-promo-banner-title { font-size: 15px; line-height: 1.2; }
.mt-promo-banners-vertical .mt-promo-banner-subtitle { display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mt-promo-banners-vertical .mt-promo-banner-button { margin-top: 4px; padding: 6px 12px; font-size: 12px; min-height: 0; height: auto; }
}
.mt-megamenu-panel.has-extras { width: 1000px; container-type: inline-size; }
.mt-megamenu-panel.has-extras .mt-megamenu-panel-inner { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 28px; align-items: start; }
.mt-megamenu-main { min-width: 0; }
.mt-megamenu-panel.has-extras .mt-megamenu-panel-inner { max-height: min(660px, calc(100vh - 48px)); }
.mt-mm-brand img[src$=".svg"] { max-height: 30px; }
.mt-megamenu-aside { display: flex; flex-direction: column; gap: 22px; min-width: 0; padding-left: 24px; border-left: 1px solid var(--mt-border-color, #e2e8f0); }
@container (max-width: 760px) {
.mt-megamenu-panel.has-extras .mt-megamenu-panel-inner { grid-template-columns: minmax(0, 1fr); }
.mt-megamenu-aside { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--mt-border-color, #e2e8f0); }
.mt-megamenu-aside .mt-mm-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mt-megamenu-aside .mt-mm-promos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mt-mm-title { margin: 0 0 10px; color: var(--mt-text-primary, #121715); font-size: var(--mt-text-sm, 14px); font-weight: var(--mt-font-semibold, 600); line-height: 1.3; }
.mt-mm-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mt-mm-brand { display: flex; align-items: center; justify-content: center; height: 56px; padding: 8px 10px; background: var(--mt-surface, #fff); border: 1px solid var(--mt-border-color, #f3f3f3); border-radius: var(--mt-radius-lg, 12px); text-decoration: none; transition: border-color var(--mt-transition-base, .2s ease), box-shadow var(--mt-transition-base, .2s ease); }
.mt-mm-brand img { display: block; max-width: 100%; max-height: 34px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter var(--mt-transition-base, .2s ease), opacity var(--mt-transition-base, .2s ease); }
.mt-mm-brand:hover { border-color: var(--mt-primary-200, #a8b6d8); box-shadow: var(--mt-shadow-base, 0 4px 16px rgba(112, 114, 122, .08)); }
.mt-mm-brand:hover img { filter: none; opacity: 1; }
.mt-mm-brand.is-text span { overflow: hidden; max-width: 100%; color: var(--mt-text-primary, #121715); font-size: var(--mt-text-sm, 14px); font-weight: var(--mt-font-semibold, 600); white-space: nowrap; text-overflow: ellipsis; }
.mt-mm-brand.is-text:hover span { color: var(--mt-primary, #0c296a); }
.mt-mm-promos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mt-mm-promo { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; background: var(--mt-surface, #fff); border: 1px solid var(--mt-border-color, #f3f3f3); border-radius: var(--mt-radius-lg, 12px); color: inherit; text-decoration: none; transition: border-color var(--mt-transition-base, .2s ease), box-shadow var(--mt-transition-base, .2s ease); }
.mt-mm-promo:hover { border-color: var(--mt-primary-200, #a8b6d8); box-shadow: var(--mt-shadow-base, 0 4px 16px rgba(112, 114, 122, .08)); }
.mt-mm-promo-img { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; overflow: hidden; background: var(--mt-surface, #fff); border-radius: var(--mt-radius-base, 8px); }
.mt-mm-promo-img img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform var(--mt-transition-slow, .3s ease); }
.mt-mm-promo:hover .mt-mm-promo-img img { transform: scale(1.05); }
.mt-mm-promo-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mt-mm-promo-name { display: -webkit-box; overflow: hidden; margin-bottom: 2px; color: var(--mt-text-primary, #121715); font-size: var(--mt-text-sm, 14px); font-weight: var(--mt-font-semibold, 600); line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mt-mm-promo:hover .mt-mm-promo-name { color: var(--mt-primary, #0c296a); }
.mt-mm-promo-old { display: flex; align-items: center; gap: 8px; }
.mt-mm-promo-old s { color: var(--mt-text-muted, #9da4ae); font-size: 13px; font-weight: var(--mt-font-medium, 500); }
.mt-mm-promo-badge { display: inline-flex; align-items: center; height: 15px; padding: 0 4px; color: var(--mt-white, #fff); background: var(--mt-error, #d51f1f); border-radius: 4px; font-size: .625rem; font-weight: var(--mt-font-semibold, 600); line-height: 1; }
.mt-mm-promo-price { color: var(--mt-text-primary, #121715); font-size: 1.125rem; font-weight: var(--mt-font-semibold, 600); line-height: 1.3; white-space: nowrap; }
.mt-mm-promo-price.is-special { color: #d5383d; }
.mt-mobile-menu-extras { display: flex; flex-direction: column; gap: 16px; padding: 14px 16px 10px; list-style: none; }
.mt-mobile-menu-extras .mt-mm-title { margin-bottom: 8px; }
.mt-mobile-menu-extras .mt-mm-brands { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mt-mobile-menu-extras .mt-mm-brands::-webkit-scrollbar { display: none; }
.mt-mobile-menu-extras .mt-mm-brand { flex: 0 0 104px; height: 52px; scroll-snap-align: start; }
.mt-mobile-menu-extras .mt-mm-brand img { filter: none; opacity: 1; }
.mt-mobile-menu-extras .mt-mm-promo { grid-template-columns: 68px minmax(0, 1fr); }
.mt-mobile-menu-extras .mt-mm-promo-img { width: 68px; height: 68px; }
.mt-megamenu-item { position: static; }
.mt-megamenu-panel { top: 0; min-height: 100%; }
.mt-megamenu-panel-inner { box-sizing: border-box; }
.mt-scroll-top svg.mt-scroll-top-ring { width: 100%; height: 100%; }
.mt-scroll-top svg.mt-scroll-top-arrow { width: 18px; height: 18px; }
.mt-hscroll { position: relative; }
.mt-hscroll.is-scrollable .mt-hscroll-arrow { display: inline-flex; }
.mt-hscroll .mt-hscroll-arrow { top: 50%; margin-top: -20px; }
.mt-hscroll .mt-category-tiles-prev { left: 8px; }
.mt-hscroll .mt-category-tiles-next { right: 8px; }
.mt-hscroll .mt-promo-banners-grid { cursor: grab; }
.mt-hscroll .mt-promo-banners-grid.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.mt-hscroll .mt-promo-banners-grid.is-dragging a { pointer-events: none; }
.mt-cart-dropdown { width: 380px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.mt-mini-cart { display: flex; flex-direction: column; max-height: min(620px, calc(100vh - 140px)); }
.mt-mini-cart-header { display: flex; align-items: center; padding: 16px 18px 12px; border-bottom: 1px solid var(--mt-border-color, #f3f3f3); }
.mt-mini-cart-title { display: flex; align-items: center; gap: 8px; color: var(--mt-text-primary, #121715); font-size: 16px; font-weight: 700; }
.mt-mini-cart-title svg { color: var(--mt-primary, #0c296a); }
.mt-mini-cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--mt-primary-50, #eef1f8); color: var(--mt-primary, #0c296a); font-size: 12px; font-weight: 700; }
.mt-mini-cart-items { flex: 1 1 auto; overflow-y: auto; padding: 4px 18px; overscroll-behavior: contain; }
.mt-mini-cart-item { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px 28px 14px 0; border-bottom: 1px solid var(--mt-border-color, #f3f3f3); }
.mt-mini-cart-item:last-child { border-bottom: 0; }
.mt-mini-cart-item-image { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; overflow: hidden; border: 1px solid var(--mt-border-color, #f3f3f3); border-radius: var(--mt-radius-base, 8px); background: var(--mt-surface, #fff); color: var(--mt-primary, #0c296a); }
.mt-mini-cart-item-image img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.mt-mini-cart-item-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mt-mini-cart-item-name { display: -webkit-box; overflow: hidden; color: var(--mt-text-primary, #121715); font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mt-mini-cart-item-name:hover { color: var(--mt-primary, #0c296a); }
.mt-mini-cart-item-options { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.mt-mini-cart-option { color: var(--mt-text-muted, #9da4ae); font-size: 12px; line-height: 1.3; }
.mt-mini-cart-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mt-mini-cart-qty { display: inline-flex; align-items: center; height: 32px; border: 1px solid var(--mt-border-color, #e2e8f0); border-radius: 8px; overflow: hidden; }
.mt-mini-cart-qty-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--mt-text-secondary, #5c6168); cursor: pointer; }
.mt-mini-cart-qty-btn:hover { background: var(--mt-neutral-50, #f8f9fb); color: var(--mt-primary, #0c296a); }
.mt-mini-cart-qty-btn svg { width: 14px; height: 14px; }
.mt-mini-cart-qty-value { min-width: 26px; color: var(--mt-text-primary, #121715); font-size: 14px; font-weight: 600; text-align: center; }
.mt-mini-cart-item-price { color: var(--mt-text-primary, #121715); font-size: 15px; font-weight: 700; white-space: nowrap; }
.mt-mini-cart-item-remove { position: absolute; top: 12px; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mt-text-muted, #9da4ae); cursor: pointer; }
.mt-mini-cart-item-remove:hover { background: var(--mt-error-light, #fde8e8); color: var(--mt-error, #d51f1f); }
.mt-mini-cart-item-remove svg { width: 14px; height: 14px; }
.mt-mini-cart-footer { padding: 14px 18px 18px; border-top: 1px solid var(--mt-border-color, #f3f3f3); background: var(--mt-neutral-50, #f8f9fb); }
.mt-mini-cart-totals { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.mt-mini-cart-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--mt-text-secondary, #5c6168); font-size: 13px; }
.mt-mini-cart-total-value { color: var(--mt-text-primary, #121715); font-weight: 600; white-space: nowrap; }
.mt-mini-cart-total-final { padding-top: 8px; border-top: 1px dashed var(--mt-border-color, #e2e8f0); color: var(--mt-text-primary, #121715); font-size: 15px; font-weight: 700; }
.mt-mini-cart-total-final .mt-mini-cart-total-value { font-size: 18px; font-weight: 800; }
.mt-mini-cart-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.mt-mini-cart-checkout { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; }
.mt-mini-cart-view-cart { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--mt-primary, #0c296a); font-size: 14px; font-weight: 600; text-decoration: none; }
.mt-mini-cart-view-cart:hover { text-decoration: underline; }
.mt-mini-cart-view-cart svg { width: 16px; height: 16px; }
.mt-hero { padding-top: 0; }
.mt-hero-main { gap: var(--mt-section-gap, 24px); }
.mt-hero-main > .mt-promo-banners { margin-top: 0; }
.mt-hero + .mt-home-content { padding-top: var(--mt-section-gap, 24px); }
.mt-home-layout > * { margin-top: 0; margin-bottom: 0; }
.mt-home-layout > .mt-promo-banners.mt-promo-banners-grid { margin-top: 0; margin-bottom: 0; }
@media (min-width: 1200px) { .mt-product-layout .mt-product-main { grid-template-columns: minmax(458px, 1.2fr) minmax(0, 1fr); } }
.mt-topbar-row { align-items: center; }
.mt-topbar-left, .mt-topbar-right { display: flex; align-items: center; min-height: 28px; }
.mt-topbar-link, .mt-topbar-phone, .mt-topbar-callback { display: inline-flex; align-items: center; height: 28px; line-height: 1; }
.mt-header-action-btn .mt-badge-count { align-items: center; justify-content: center; line-height: 1; font-variant-numeric: tabular-nums; }
.mt-mini-prices { flex-wrap: wrap; column-gap: 8px; row-gap: 2px; }
.mt-mini-prices .mt-panel-price, .mt-mini-prices .mt-panel-price-old { white-space: nowrap; }
.mt-products-collection .mt-product-name { display: -webkit-box; overflow: hidden; min-height: 2.6em; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (min-width: 992px) {
.mt-reviews-form-column { position: sticky; top: calc(var(--mt-sticky-top, 102px) + 16px); align-self: start; }
}
.mt-recent-item { flex: 0 0 calc((100% - 56px) / 5); min-width: 0; }
@media (max-width: 1199px) { .mt-recent-item { flex-basis: calc((100% - 42px) / 4); } }
.mt-recent-item .mt-recent-card { flex: 1 1 auto; width: 100%; }
@media (max-width: 991px) { .mt-recent-item { flex-basis: calc((100% - 28px) / 3); } }
@media (max-width: 767px) { .mt-recent-item { flex-basis: calc((100% - 14px) / 2); } }
.mt-footer-phone { padding-bottom: 10px; margin-bottom: -10px; }
.mt-footer-phone-drop { top: 100%; }
.mt-payment-icon, .mt-payment-icon:has(.mt-payment-logo), .mt-product-payment-icon { box-sizing: border-box; flex: 0 0 72px; width: 72px; min-width: 72px; height: 40px; padding: 0 8px; background: #fff; border: 1px solid var(--mt-border-color-dark, #e2e8f0); border-radius: 8px; }
.mt-payment-icon .mt-payment-logo { width: 100%; max-width: 100%; height: 22px; max-height: 22px; object-fit: contain; }
.mt-payment-icon svg { width: 32px; height: 20px; }
.mt-page-header { justify-content: flex-start; flex-wrap: wrap; column-gap: 12px; }
.mt-page-header .mt-page-count { color: var(--mt-text-muted, #9da4ae); font-size: 14px; white-space: nowrap; }
@media (min-width: 992px) {
.mt-product-layout .mt-product-gallery { position: sticky; top: calc(var(--mt-sticky-top, 102px) + 76px); align-self: start; }
}
.mt-product-card .mt-product-sticker { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 7px; line-height: 1; text-align: center; }
a.mt-product-brand-card { color: inherit; text-decoration: none; cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
a.mt-product-brand-card:hover .mt-product-brand-name { color: var(--mt-primary, #0c296a); text-decoration: underline; }
:root { --mt-text-muted: #6b7280; }
@media (max-width: 991px) {
.mt-product-purchase.is-mobile-order { margin: 16px 0 20px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.mt-product-purchase.is-mobile-order .mt-product-brand-card { margin-top: 16px; }
.mt-product-purchase.is-mobile-order .oc-box-pa-history .oc-box-pa-history-title { position: relative; padding-right: 24px; cursor: pointer; }
.mt-product-purchase.is-mobile-order .oc-box-pa-history .oc-box-pa-history-title::after { content: ''; position: absolute; top: 50%; right: 4px; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.mt-product-purchase.is-mobile-order .oc-box-pa-history.is-open .oc-box-pa-history-title::after { margin-top: -2px; transform: rotate(-135deg); }
.mt-product-purchase.is-mobile-order .oc-box-pa-history:not(.is-open) > :not(.oc-box-pa-history-title) { display: none; }
}
.mt-product-gallery-main { position: relative; }
.mt-gallery-counter { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: none; padding: 3px 9px; border-radius: 999px; background: rgba(15, 23, 42, .62); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; pointer-events: none; }
.mt-gallery-dots { display: none; justify-content: center; gap: 6px; margin-top: 10px; }
.mt-gallery-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--mt-neutral-300, #cbd5e1); cursor: pointer; transition: width .2s ease, background .2s ease; }
.mt-gallery-dots button.is-active { width: 20px; background: var(--mt-primary, #0c296a); }
@media (max-width: 991px) {
.mt-gallery-counter { display: block; }
.mt-gallery-dots { display: flex; }
}
@media (max-width: 991px) {
.mt-contact-widget { transition: transform .25s ease, opacity .25s ease; }
.mt-contact-widget .mt-contact-widget-btn, .mt-contact-widget > button { width: 48px; height: 48px; }
body.mt-scrolling-down .mt-contact-widget { opacity: 0; pointer-events: none; transform: translateY(24px); }
.mt-header-mobile .mt-search-form-mobile { max-height: 60px; overflow: hidden; transition: max-height .25s ease, opacity .2s ease, margin .25s ease, padding .25s ease; }
body.mt-scrolling-down .mt-header-mobile .mt-search-form-mobile { max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
}
@media (max-width: 767px) {
.mt-search-form-wrapper.has-query { display: none; }
}
.mt-active-filters { display: none; }
@media (max-width: 1023px) {
.mt-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.mt-active-filter { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--mt-primary-200, #a8b6d8); border-radius: 999px; background: var(--mt-primary-50, #eef1f8); color: var(--mt-primary, #0c296a); font-size: 13px; font-weight: 600; cursor: pointer; }
.mt-active-filter::after { content: '\00d7'; font-size: 16px; line-height: 1; }
.mt-active-filter-clear { border-color: transparent; background: transparent; color: var(--mt-text-secondary, #5c6168); }
.mt-active-filter-clear::after { content: none; }
}
.mt-empty-extras { margin-top: 32px; }
.mt-empty-extras > * + * { margin-top: 24px; }
.mt-pagination-wrapper { display: flex; justify-content: center; margin: 28px 0 8px; }
.mt-pagination-wrapper .pagination { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 6px; list-style: none; background: var(--mt-surface, #fff); border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06); }
.mt-pagination-wrapper .pagination > li { margin: 0; }
.mt-pagination-wrapper .pagination > li > a, .mt-pagination-wrapper .pagination > li > span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; margin: 0; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--mt-text-primary, #121715); font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; transition: background .15s ease, color .15s ease, transform .15s ease; }
.mt-pagination-wrapper .pagination > li > a:hover { background: var(--mt-primary-50, #eef1f8); color: var(--mt-primary, #0c296a); }
.mt-pagination-wrapper .pagination > li.active > span, .mt-pagination-wrapper .pagination > li.active > a { background: var(--mt-primary, #0c296a); color: #fff; box-shadow: 0 6px 16px rgba(12, 41, 106, .28); }
.mt-pagination-wrapper .pagination > li.pagination-gap > span { min-width: 22px; padding: 0 2px; background: transparent; box-shadow: none; color: var(--mt-text-muted, #6b7280); }
.mt-pagination-wrapper .pagination > li.pagination-prev > a, .mt-pagination-wrapper .pagination > li.pagination-next > a { min-width: 42px; padding: 0 0 3px; background: var(--mt-neutral-50, #f8f9fb); color: var(--mt-primary, #0c296a); font-size: 24px; font-weight: 500; }
.mt-pagination-wrapper .pagination > li.pagination-prev > a:hover, .mt-pagination-wrapper .pagination > li.pagination-next > a:hover { background: var(--mt-primary, #0c296a); color: #fff; }
@media (max-width: 600px) {
.mt-pagination-wrapper .pagination { gap: 2px; padding: 4px; }
.mt-pagination-wrapper .pagination > li > a, .mt-pagination-wrapper .pagination > li > span { min-width: 38px; height: 38px; padding: 0 8px; font-size: 14px; }
}
.mt-body .container { width: 100%; max-width: min(var(--mt-container-max), 100%); padding-left: var(--mt-container-pad); padding-right: var(--mt-container-pad); }
.mt-body ul.breadcrumb { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0 0 8px; padding: 12px 0 8px; overflow-x: auto; list-style: none; background: none; border: 0; border-radius: 0; font-size: 13px; line-height: 1.3; white-space: nowrap; scrollbar-width: none; }
.mt-body ul.breadcrumb::-webkit-scrollbar { display: none; }
.mt-body ul.breadcrumb > li { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0; text-shadow: none; }
.mt-body ul.breadcrumb > li::after { content: none; }
.mt-body ul.breadcrumb > li + li::before { content: ''; flex: 0 0 auto; width: 14px; height: 14px; margin-right: 6px; padding: 0; background: var(--mt-neutral-400, #94a3b8); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.mt-body ul.breadcrumb > li > a { display: inline-flex; align-items: center; padding: 4px 10px; color: var(--mt-neutral-600, #475569); text-decoration: none; background: var(--mt-surface, #fff); border: 1px solid var(--mt-neutral-200, #e2e8f0); border-radius: 999px; transition: color .15s ease, border-color .15s ease; }
.mt-body ul.breadcrumb > li > a:hover { color: var(--mt-primary); border-color: var(--mt-primary); }
.mt-body ul.breadcrumb > li:last-child > a { padding: 4px 2px; color: var(--mt-neutral-900, #0f172a); font-weight: 600; background: none; border-color: transparent; pointer-events: none; }
.mt-page { padding-top: 24px; }
.mt-page .mt-breadcrumb-wrapper { padding-top: 0; }
.mt-body .container > ul.breadcrumb:first-child { margin-top: 24px; margin-bottom: 0; }
.mt-body .container > ul.breadcrumb + h1, .mt-body .container > ul.breadcrumb + .row h1:first-child, .mt-body .container > ul.breadcrumb + div h1:first-child { margin-top: 2px; }
html body.mt-body .container > ul.breadcrumb { margin-bottom: 0; padding-bottom: 8px; }
.mt-body #obc-checkout-page ul.breadcrumb { padding: 12px 0 8px; margin-bottom: 2px; }
.mt-body ul.breadcrumb > li:first-child > a[href*="common/home"], .mt-body ul.breadcrumb > li:first-child > a[href$="/"] { font-size: 0; }
.mt-body ul.breadcrumb > li:first-child > a[href*="common/home"]::before, .mt-body ul.breadcrumb > li:first-child > a[href$="/"]::before { content: ""; display: inline-block; width: 13px; height: 13px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.66 9.79L10.84 5.31Q12 4.3 13.16 5.31L18.34 9.79Q19.5 10.8 19.5 12.34L19.5 18.26Q19.5 19.8 17.96 19.8L6.04 19.8Q4.5 19.8 4.5 18.26L4.5 12.34Q4.5 10.8 5.66 9.79z'/%3E%3Cpath d='M10 19.8v-5h4v5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.66 9.79L10.84 5.31Q12 4.3 13.16 5.31L18.34 9.79Q19.5 10.8 19.5 12.34L19.5 18.26Q19.5 19.8 17.96 19.8L6.04 19.8Q4.5 19.8 4.5 18.26L4.5 12.34Q4.5 10.8 5.66 9.79z'/%3E%3Cpath d='M10 19.8v-5h4v5'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 767px) { .mt-body .container { padding-left: var(--mt-space-4); padding-right: var(--mt-space-4); } }
.mt-wishlist-item { flex-wrap: wrap; align-items: flex-start; }
.mt-wishlist-item-info { flex: 1 1 140px; }
.mt-wishlist-item-name { overflow-wrap: anywhere; }
.mt-wishlist-item-actions { flex: 1 0 100%; display: flex; }
.mt-wishlist-item-actions .mt-btn { width: 100%; justify-content: center; }
.mt-product-page.mt-page { padding-top: 4px; }
.mt-product-page .mt-breadcrumb { padding: 8px 0 6px; }
.mt-product-page .mt-product-nav { margin-bottom: 12px; padding: 6px; }
.mt-product-purchase { display: flex; flex-direction: column; }
.mt-product-purchase > .mt-product-brand-card { order: 20; margin-top: var(--mt-space-4); margin-bottom: 0; }
.mt-product-purchase > .mt-product-asks { order: 21; margin-top: var(--mt-space-3); }
.mt-product-purchase > .oc-box-pa-history { order: 22; margin-top: var(--mt-space-4); }
.mt-product-purchase > .mt-product-share { order: 23; margin-top: var(--mt-space-4); }
@media (min-width: 1024px) {
.mt-product-layout .mt-product-image { max-height: max(300px, calc(100vh - 330px)); }
.mt-product-layout .mt-product-image-link { padding: 8px; }
}
.mt-footer-map { position: relative; margin-top: 32px; overflow: hidden; border-radius: var(--mt-card-radius, 16px); background: var(--mt-neutral-800); }
.mt-footer-map-frame { position: relative; z-index: 1; display: block; width: 100%; height: 320px; border: 0; }
.mt-footer-map-card { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 20px; color: var(--mt-neutral-200, #e5e7eb); text-align: left; }
.mt-footer-map-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; }
.mt-footer-map-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.4; }
.mt-footer-map-text b { color: #fff; font-size: 15px; }
.mt-footer-map-btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 767px) {
.mt-footer-map { background: rgba(255, 255, 255, .06); }
.mt-footer-map-frame { display: none; }
.mt-footer-map-card { position: static; flex-wrap: wrap; justify-content: flex-start; padding: 16px; }
.mt-footer-map-text { flex: 1 1 160px; }
.mt-footer-map-btn { width: 100%; justify-content: center; }
}
.mt-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mt-product-card .mt-product-bell { height: 42px; border-width: 1.5px; background: var(--mt-primary-50, #eef2fb); }
.mt-product-card .mt-product-bell svg { width: 20px; height: 20px; }
/* PERVOSAT-BRAND-START */
:root{--mt-primary-500:#1b8ce3;--mt-accent-500:#62b82e;--mc-btn-bg:#1b8ce3;--mc-btn-hover:#1573bd;--mc-btn-text:#ffffff;--mc-price:#1b8ce3;--mc-catbtn-bg:#1b8ce3;--mc-cart-bg:#1b8ce3;--mt-link-color:#1b8ce3;--mt-link-hover:#1573bd;}
.mt-btn-primary,.mt-slide .mt-btn,.mt-slideshow .mt-btn,.mt-slide-btn{background:#1b8ce3!important;border-color:#1b8ce3!important;color:#fff!important;}
.mt-btn-primary:hover,.mt-slide .mt-btn:hover,.mt-slide-btn:hover{background:#1573bd!important;border-color:#1573bd!important;}
.mt-slideshow,.mt-slideshow .mt-slide,.mt-slideshow-horizontal .mt-slide{aspect-ratio:1232/330;height:auto!important;min-height:0!important;}
.mt-slide-image,.mt-slideshow img.mt-slide-image{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;}
/* PERVOSAT-BRAND-END */