@charset "utf-8";

/* ------------------------------- RESET ------------------------------- */

html {margin: 0; padding: 0; height: 100%;}
body, div, span, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, a, font, small, strong, b, u, i, center, label, form, fieldset,
input, button, textarea, img, p, table, tr, th, td, dl, dt, dd {
    margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent;
}
table {border-collapse: collapse; border-spacing: 0;}
ol, ul, li {list-style: none;}
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;}
input, button, textarea, select, optgroup, option {
    font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;
}
input, button, textarea, select {font-size: 100%; display: block;}
input[type=text], input[type=submit], textarea{-webkit-appearance: none;}
input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 50px var(--white-color) !important; -webkit-text-fill-color: var(--black-color) !important;
    color: var(--black-color) !important;
}
select {outline: 0;}
:focus {outline: none;}
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
*:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
::-moz-focus-inner {border: 0; padding: 0;}

/* ------------------------------- DEFAULT ------------------------------- */

html {
    --primary-color-1: #E14B26;
    --black-color: #0A0A0A;
    --gray-color-1: #364153;
    --gray-color-2: #4A5565;
    --gray-color-3: #6A7282;
    --gray-color-4: #99A1AF;
    --gray-color-5: #D1D5DC;
    --gray-color-6: #F3F4F6;
    --white-color: #FFFFFF;
}

html {-webkit-tap-highlight-color: rgba(0, 0, 0, 0); scroll-behavior: smooth;}
body {
    display: flex; flex-direction: column; position: relative; height: 100%; min-height: 100vh; width: 100%; min-width: 320px; font-family: 'Inter', arial, sans-serif;
    font-size: 14px; color: var(--black-color); line-height: 1.2; font-weight: 400; letter-spacing: -0.3px;
    background: var(--white-color); -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
    -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto;
}
div, label {display: block;}

a {
    color: var(--black-color); text-decoration: underline; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
a:hover {text-decoration: none;}
img {max-width: 100%; height: auto;}

/* ------------------------------- COMMON ------------------------------- */

/* general */

.wrap {width: 100%; padding: 0 40px; margin: 0 auto; max-width: 1400px;}

.grid {display: grid; grid-template-columns: 1fr 3fr; gap: 32px; padding-top: 30px;}

.dn {display: none;}

@media only screen and (max-width: 1024px) {
    .wrap {padding: 0 20px;}
}

/* icons */

i {
    display: inline-block; font-family: 'glyphicons', sans-serif; font-size: 14px; font-weight: 400; font-style: normal;
    text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-1:before {content: '\E800';}
.icon-arrow-2:before {content: '\E80E';}
.icon-arrow-3:before {content: '\E813';}
.icon-arrow-4:before {content: '\E817';}
.icon-arrow-5:before {content: '\E818';}
.icon-burger:before {content: '\E806';}
.icon-cart:before {content: '\E808';}
.icon-close:before {content: '\E80F';}
.icon-delete:before {content: '\E810';}
.icon-delivery:before {content: '\E804';}
.icon-fast:before {content: '\E81A';}
.icon-favorite:before {content: '\E814';}
.icon-filters:before {content: '\E80C';}
.icon-logo:before {content: '\E805';}
.icon-mail:before {content: '\E803';}
.icon-minus:before {content: '\E812';}
.icon-phone:before {content: '\E802';}
.icon-plus:before {content: '\E811';}
.icon-search:before {content: '\E807';}
.icon-share:before {content: '\E815';}
.icon-shield:before {content: '\E80D';}
.icon-success:before {content: '\E816';}
.icon-time:before {content: '\E801';}
.icon-user:before {content: '\E809';}
.icon-wrench:before {content: '\E80B';}

/* buttons */

.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; min-width: 120px; width: auto;
    border-radius: 8px; border: 1px solid var(--black-color); background-color: var(--black-color); color: var(--white-color);
    font-size: 13px; font-weight: 500; height: 34px; text-decoration: none; user-select: none; white-space: nowrap; padding: 0 10px;
    transition: all 0.2s ease-out;
}
.btn-primary:hover {background-color: var(--black-color); border-color: var(--black-color);}
.btn-primary > i {padding-inline-end: 10px;}
.btn-primary.wide {width: 100%;}

.btn-primary.light {
    border: 1px solid var(--black-color); background-color: var(--white-color); color: var(--black-color);
}
.btn-primary.light:hover {background-color: var(--white-color); border-color: var(--black-color);}

/* range */

.range_label {font-size: 13px; font-weight: 500; color: var(--gray-color-5); padding-bottom: 18px;}
.range_wrap {position: relative; height: 18px;}
.range_wrap > div {position: relative; height: 16px; background: var(--gray-color-5); border-radius: 999px;}
.range_wrap > div > span {display: block; position:absolute; top: 0; height: 16px; background: var(--black-color); border-radius: 999px; z-index:0}
.range_wrap > input[type=range] {position:absolute; left:0; right:0; top:-1px; width:100%; height: 18px; margin:0; padding:0; background: none; pointer-events: none; -webkit-appearance:none; appearance:none; z-index:1}
.range_wrap > input[type=range]::-webkit-slider-runnable-track {height: 16px; background: transparent;}
.range_wrap > input[type=range]::-moz-range-track {height: 16px; background: transparent;}
.range_wrap > input[type=range]::-webkit-slider-thumb {pointer-events:auto; -webkit-appearance:none; appearance:none; width: 16px; height: 16px; border-radius: 50%; background: var(--white-color); border: 1px solid var(--black-color); cursor: pointer}
.range_wrap > input[type=range]::-moz-range-thumb {pointer-events:auto; width: 16px; height: 16px; border-radius: 50%; background: var(--white-color); border: 1px solid var(--black-color); cursor: pointer}
.range_wrap > input:nth-of-type(1) {z-index:2}
.range_wrap > input:nth-of-type(2) {z-index:1}
.range_vals {display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--gray-color-2);}

/* paginator */

#paginator {display: inline-flex; align-items: center;}
#paginator > a, #paginator > span {
    display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-inline-end: 4px;
    color: var(--gray-color-2);
}
#paginator > a {text-decoration: none; cursor: pointer; border-radius: 8px; border: 1px solid var(--gray-color-2);}
#paginator > a:hover,
#paginator > a.active {color: var(--white-color); background: var(--primary-color-1); border: 1px solid var(--primary-color-1);}
#paginator > a:last-child {margin: 0;}

/* ------------------------------- GENERAL ------------------------------- */

/* menu */

#menu {position: fixed; top: 0; left: 0; width: 100%; z-index: 9;}

/* toolbar */

.toolbar {background: var(--black-color);}
.toolbar-group {display: flex; align-items: center; height: 32px; font-size: 13px;}
.toolbar-group > div {width: 50%; display: flex; gap: 28px;}
.toolbar-group > div:nth-of-type(2) {justify-content: end;}

.toolbar-item {display: flex; align-items: center; color: var(--white-color); text-decoration: none;}
.toolbar-item.gray {color: var(--gray-color-4);}
.toolbar-item > i {padding-inline-end: 8px;}
.toolbar-item > i.icon-delivery {font-size: 13px;}
.toolbar-item > i.icon-mail {font-size: 11px;}

/* header */

.header {
    position: relative; background: var(--white-color); height: 54px; min-height: 54px; display: flex; align-items: center;
    border-bottom: 1px solid var(--gray-color-5);
}
.header-items {display: flex; align-items: center; gap: 24px;}

.header-logo {display: flex; align-items: center; font-size: 20px; font-weight: 600; text-decoration: none;}
.header-logo > i {font-size: 32px; color: var(--primary-color-1); padding-inline-end: 8px;}

.header-catalog {
    display: flex; align-items: center; height: 36px; border-radius: 8px; padding: 0 12px; border: 1px solid var(--gray-color-5);
    font-size: 14px; user-select: none; transition: all 0.2s ease-out;
}
.header-catalog:hover {background: #E14B26; color: var(--white-color); cursor: pointer; border-color: #E14B26;}

.burger-icon {display: inline-block; width: 18px; height: 14px; position: relative; vertical-align: middle; margin-right: 10px;}
.burger-icon::before, .burger-icon::after, .burger-icon span {
    display: block; width: 100%; height: 2px; border-radius: 1px; background-color: var(--black-color); position: absolute; left: 0;
    transition: all 0.2s ease-in-out;
}
.burger-icon::before {content: '';top: 0;}
.burger-icon::after {content: '';bottom: 0;}
.burger-icon span {top: 50%; transform: translateY(-50%);}

.catalog-toggle:checked ~ .header .header-catalog {background: #E14B26; color: var(--white-color);; border-color: #E14B26;}
.catalog-toggle:checked ~ .header .burger-icon::before {top: 50%; transform: translateY(-50%) rotate(45deg);}
.catalog-toggle:checked ~ .header .burger-icon::after {bottom: 50%; transform: translateY(50%) rotate(-45deg);}
.catalog-toggle:checked ~ .header .burger-icon span {transform: translateY(-50%) rotate(45deg);}

.header-catalog:hover .burger-icon::before,
.header-catalog:hover .burger-icon::after,
.header-catalog:hover .burger-icon span {background-color: var(--white-color);}
.catalog-toggle:checked ~ .header .burger-icon::before,
.catalog-toggle:checked ~ .header .burger-icon::after,
.catalog-toggle:checked ~ .header .burger-icon span {background-color: var(--white-color);}

.header-search {
    display: flex; align-items: center; height: 36px; width: 50%; padding: 0 12px; border-radius: 8px;
    border: 1px solid var(--gray-color-5); background: #F6F7FA;
}
.header-search > i {font-size: 16px; color: var(--gray-color-4); padding-inline-end: 12px;}
.header-search > input {height: 36px; width: 100%;}

.catalog-toggle {display: none;}
.catalog-dropdown {
    position: absolute; margin-top: 0; left: 0; width: 100%; background: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 12px 12px; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: all 0.3s ease-in-out;
    z-index: 1000;
}
.catalog-dropdown .wrap {padding: 40px;}
.catalog-toggle:checked ~ .catalog-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0); transition: all 0.3s ease-in-out;
}

.category-title {
    display: inline-flex; font-size: 14px; font-weight: 500; color: var(--gray-color-1); text-decoration: none; padding: 8px 4px;
}
.category-title:hover {color: #E14B26;}
.category-subcategories {display: none;}
.catalog-grid {display: grid; grid-auto-flow: column; grid-template-rows: repeat(11, auto); grid-template-columns: repeat(3, 1fr); grid-auto-columns: 1fr; column-gap: 40px; row-gap: 2px;}

.header-btn {position: relative;}
.header-btn > i {font-size: 16px;}
#header-cart-count {
    display: flex; align-items: center; justify-content: center; position: absolute; top: -5px; right: -7px; width: 14px; height: 14px;
    border-radius: 7px; font-size: 10px; font-weight: 500; color: var(--white-color); background-color: var(--primary-color-1);
}

/* content */

.content {flex: 1 0 auto; padding-top: 86px; padding-bottom: 80px;}
.content.no-bottom {padding-bottom: 0;}

/* breadcrumbs */

.breadcrumbs {display: flex; margin-top: 18px; align-items: center;}
.breadcrumbs > a {font-size: 13px; text-decoration: none;}
.breadcrumbs > i {padding: 0 10px; font-size: 10px; position: relative; top: 0.5px;}

/* footer */

.footer {background-color: var(--black-color); color: var(--white-color); font-size: 13px;}

.footer-sitemap {display: flex; padding-top: 40px; padding-bottom: 30px; gap: 100px;}
.footer-sitemap > div {}
.footer-sitemap-title {font-weight: 500; padding-bottom: 18px;}
.footer-sitemap-group {display: flex; gap: 100px;}
.footer-sitemap-group > div {}
.footer-sitemap-list > li {padding: 3px 0; opacity: 0.8;}
.footer-sitemap-list > li > a {color: var(--white-color); text-decoration: none;}
.footer-sitemap-list > li > a:hover {}

.footer-copyright {display: flex; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.4);}
.footer-copyright > div {width: 50%;}
.footer-copyright > div:nth-of-type(2) {text-align: right;}

/* ------------------------------- MODAL CART ------------------------------- */

#modal-cart {
    background: rgba(0, 0, 0, 0); position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; pointer-events: none;
    transition: all 0.3s ease-in-out;
}
#modal-cart-wrap {
    position: absolute; top: 0; bottom: 0; right: 0; transform: translateX(100%); width: 44%; background: #fff;
    transition: all 0.5s ease-in-out;
}

#modal-cart-container {
    min-height: 100%; display: flex; flex-direction: column;
}

#modal-cart.active {background: rgba(0, 0, 0, 0.50); pointer-events: auto;}
#modal-cart.active #modal-cart-wrap {transform: translateX(0%);}

.modal-cart-header {display: flex; align-items: center; height: 56px; padding: 0 24px; border-bottom: 1px solid var(--gray-color-6);}
.modal-cart-header-title {display: flex; align-items: center; width: calc(100% - 30px);}
.modal-cart-header-title > i {font-size: 18px; color: #0A0A0A; margin-inline-end: 16px;}
.modal-cart-header-title > span:nth-of-type(1) {color: #0A0A0A; font-size: 16px; font-weight: 500; line-height: 1.5; margin-inline-end: 16px;}
.modal-cart-header-title > span:nth-of-type(2) {display: flex; align-items: center; background: #ECEEF2; font-size: 12px; font-weight: 500; padding: 0 8px; height: 22px; min-width: 22px; border-radius: 4px;}
.modal-cart-header-close {width: 30px; display: flex; justify-content: end;}
.modal-cart-header-close > i {font-size: 12px; color: var(--gray-color-2); padding: 6px; cursor: pointer;}

.modal-cart-items {margin-top: 16px; padding: 0 24px; flex: 1 1 auto; overflow: auto; min-height: 0;}
.modal-cart-item {margin-top: 16px; display: flex; gap: 16px;}
.modal-cart-item > div:nth-of-type(1) {width: 80px;}
.modal-cart-item > div:nth-of-type(2) {width: calc(100% - 240px);}
.modal-cart-item > div:nth-of-type(3) {width: 160px; display: flex; flex-direction: column; align-items: end; justify-content: space-between;}

.modal-cart-item-photo {width: 80px; height: auto; border-radius: 8px;}
.modal-cart-item-sku {color: #6A7282; font-size: 13px;}
.modal-cart-item-title {color: #0A0A0A; font-size: 14px; font-weight: 500; margin-top: 4px;}

.modal-cart-item-quantity {display: inline-flex; height: 28px; border-radius: 6px; border: 1px solid #D1D5DC; margin-top: 10px;}
.modal-cart-item-quantity > div:nth-of-type(1) {width: 26px; display: flex; align-items: center; justify-content: center;}
.modal-cart-item-quantity > div:nth-of-type(2) {width: 40px; border-left: 1px solid #D1D5DC; border-right: 1px solid #D1D5DC;}
.modal-cart-item-quantity > div:nth-of-type(3) {width: 26px; display: flex; align-items: center; justify-content: center;}
.modal-cart-item-quantity > div > i {font-size: 10px; padding: 5px; color: var(--gray-color-2);}
.modal-cart-item-quantity > div > input {width: 40px; height: 28px; text-align: center;}

.modal-cart-item-delete {color: #99A1AF; cursor: pointer;}
.modal-cart-item-price {color: #0A0A0A; height: 28px; display: flex; align-items: center;}

.modal-cart-subtotal {border-top: 1px solid #F3F4F6; padding: 8px 24px 16px 24px;}
.modal-cart-subtotal-row {display: flex; padding-top: 8px;}
.modal-cart-subtotal-row > div {width: 50%;}
.modal-cart-subtotal-row > div:nth-of-type(1) {color: #364153; font-size: 14px; font-weight: 500;}
.modal-cart-subtotal-row > div:nth-of-type(2) {color: #364153; font-size: 14px; text-align: end;}

.modal-cart-total {display: flex; align-items: end; border-top: 1px solid #F3F4F6; padding: 8px 0 16px 0; margin: 0 24px;}
.modal-cart-total > div {width: 50%;}
.modal-cart-total > div:nth-of-type(1) {color: #0A0A0A; font-size: 18px; line-height: 1.3;}
.modal-cart-total > div:nth-of-type(2) {color: #0A0A0A; font-size: 24px; line-height: 1.3; text-align: end;}

.modal-cart-controls {padding-bottom: 16px;}
.modal-cart-controls > .btn-primary {width: calc(100% - 48px); height: 48px; margin: 0 24px; font-weight: 400;}
.modal-cart-controls > .btn-primary > i {padding-inline-start: 10px; font-size: 12px;}

.modal-cart-empty {display: flex; align-items: center; justify-content: center; height: calc(100vh - 56px);}
.modal-cart-empty > div {display: flex; flex-direction: column; align-items: center;}
.modal-cart-empty > div > i {color: #d7dbe3; font-size: 64px;}
.modal-cart-empty > div > div:nth-of-type(1) {color: #0A0A0A; font-size: 14px; margin-top: 14px;}
.modal-cart-empty > div > div:nth-of-type(2) {color: var(--gray-color-3); font-size: 13px; margin-top: 10px;}

/* ------------------------------- HOME ------------------------------- */

/* hero */

.home-hero {background-color: #F9FAFB; padding: 40px 0; height: calc(100vh - 86px); min-height: 460px;}
.home-hero > video {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; z-index: 0; opacity: 0.1;}

.home-hero-grid {display: flex; gap: 48px; position: relative; z-index: 1;}
.home-hero-grid > div:nth-of-type(1) {width: 60%;}
.home-hero-grid > div:nth-of-type(2) {width: 40%;}

.home-hero-label {display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 18px; color: var(--white-color); background: var(--black-color);}
.home-hero-label > i {font-size: 16px;}
.home-hero-label > span {padding-inline-start: 8px; font-size: 14px;}

.home-hero-title {color: var(--black-color); font-size: 52px; font-weight: 500; line-height: 1.1; letter-spacing: -1.5px; margin-top: 32px;}
.home-hero-desc {color: #4A5565; font-size: 20px; line-height: 1.4; margin-top: 32px;}

.home-hero-controls {display: flex; gap: 12px; margin-top: 32px;}
.home-hero-btn {
    display: flex; align-items: center; justify-content: center; cursor: pointer; min-width: 120px; width: auto;
    border-radius: 17px; border: 1px solid var(--black-color); background-color: var(--black-color); color: var(--white-color);
    font-size: 12px; font-weight: 500; letter-spacing: 0; height: 34px; text-decoration: none; user-select: none; white-space: nowrap;
    padding: 0 18px; transition: all 0.2s ease-out;
}
.home-hero-btn:hover {background-color: var(--black-color); border-color: var(--black-color);}
.home-hero-btn.light {background-color: var(--white-color); color: var(--black-color);}
.home-hero-btn.light:hover {background-color: var(--white-color); color: var(--black-color);}

.home-hero-items {display: flex; flex-wrap: wrap; gap: 16px;}
.home-hero-item {background: rgba(255, 255, 255, 0.3); width: calc(50% - 8px); border: 1px solid var(--gray-color-5); border-radius: 14px; padding: 24px;}
.home-hero-item > img {height: 38px; position: relative; left: -2px;}
.home-hero-item > div:nth-of-type(1) {font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--black-color); margin-top: 2px;}
.home-hero-item > div:nth-of-type(2) {font-size: 14px; line-height: 1.4; color: var(--gray-color-2); margin-top: 6px;}

/* categories */

.home-categories {padding: 80px 0;}

.home-categories-title {color: #000; text-align: center; font-size: 36px; line-height: 1.1; letter-spacing: -0.9px;}
.home-categories-desc {color: #4A5565; text-align: center; font-size: 20px; line-height: 1.4; margin-top: 16px;}

.home-categories-items {margin-top: 48px; display: flex; flex-wrap: wrap; gap: 24px;}
.home-categories-item {width: calc((100% - 72px) / 4); border-radius: 14px; border: 1px solid #E5E7EB; text-decoration: none; background: #FFF; padding: 24px 32px; display: flex; flex-direction: column;}
.home-categories-item > img {width: 100%;}
.home-categories-item > div:nth-of-type(1) {color: var(--black-color); font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: -0.4px; margin-top: 6px;}
.home-categories-item > div:nth-of-type(2) {color: var(--gray-color-2); font-size: 14px; line-height: 1.3; margin-top: auto; padding-top: 6px;}

/* about */

.home-about {
    position: relative; padding-top: 80px; color: var(--white-color); overflow: hidden;
    background: radial-gradient(1200px 600px at 85% 10%, rgba(225,75,38,0.15), transparent 60%), linear-gradient(180deg, #0D0F12 0%, #0A0A0A 100%);
}
.home-about:before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(800px 400px at -10% 110%, rgba(255,255,255,0.06), transparent 60%);
}
.home-about-grid {display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; padding-bottom: 80px; border-bottom: 1px solid rgba(255, 255, 255, 0.15);}
.home-about-media {position: relative;}
.home-about-media img {display: block; width: 100%; height: auto; border-radius: 18px;}
.home-about-content {position: relative;}
.home-about-badge {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px;
    letter-spacing: 0.2px; color: #DDE3EA; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(6px);
}
.home-about-badge > i {font-size: 14px; color: #FFFFFF; opacity: 0.9;}
.home-about-title {margin-top: 18px; font-size: 30px; line-height: 1.25; font-weight: 500; color: #F7F9FC; letter-spacing: -0.2px;}
.home-about-text {margin-top: 14px;}
.home-about-text p {font-size: 16px; line-height: 1.65; color: #C9D1DB;}
.home-about-features {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px;}
.home-about-feature {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 13px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #E7ECF2;
}
.home-about-feature > i {font-size: 14px; opacity: 0.95;}
.home-about-actions {display: flex; gap: 12px; margin-top: 26px;}
.home-about .btn-primary {height: 40px; padding: 0 14px; font-size: 13px;}
.home-about .btn-primary.light {background: transparent; color: var(--white-color); border-color: rgba(255,255,255,0.35);}
.home-about .btn-primary.light:hover {border-color: var(--white-color);}

@media only screen and (max-width: 1180px) {
    .home-about-grid {grid-template-columns: 1fr 1fr; gap: 36px;}
    .home-about-title {font-size: 30px;}
}

@media only screen and (max-width: 900px) {
    .home-about {padding: 56px 0 64px;}
    .home-about-grid {grid-template-columns: 1fr;}
    .home-about-media {order: -1;}
}

@media only screen and (max-width: 560px) {
    .home-about-title {font-size: 26px;}
    .home-about-text p {font-size: 15px;}
}

/* ------------------------------- CATALOG ROOT ------------------------------- */

.catalog-root {padding: 0 0 80px;}

.catalog-root-header {position: relative; padding: 0 0 24px; border-bottom: 1px solid var(--gray-color-5);}
.catalog-root-title {margin-top: 30px; font-size: 32px; line-height: 1.1; font-weight: 600; color: var(--black-color); letter-spacing: -0.5px;}
.catalog-root-desc {margin-top: 12px; font-size: 18px; line-height: 1.5; color: var(--gray-color-2); max-width: 820px;} 

.catalog-root-section {padding-top: 8px;}

.catalog-root-grid {margin-top: 20px; display: flex; flex-wrap: wrap; gap: 24px;} 
.catalog-root-card {width: calc((100% - 72px) / 4); text-decoration: none; background: #FFFFFF; border-radius: 16px; border: 1px solid #E5E7EB; padding: 18px; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;} 
.catalog-root-card:hover {transform: translateY(-2px); border-color: #D0D5DD; box-shadow: 0 8px 28px rgba(16,24,40,.08);} 
.catalog-root-card > .media {border-radius: 12px; overflow: hidden; position: relative; background: #FAFAFC;} 
.catalog-root-card > .media:after {content: ''; position: absolute; inset: 0;}
.catalog-root-card > .media > img {display: block; width: 100%; height: auto;} 
.catalog-root-card > .title {margin-top: 12px; color: #0A0A0A; font-size: 16px; font-weight: 500; letter-spacing: -0.2px;} 

@media only screen and (max-width: 1180px) { 
  .catalog-root-card {width: calc((100% - 48px) / 3);} 
  .catalog-root-title {font-size: 34px;} 
}
@media only screen and (max-width: 900px) { 
  .catalog-root {padding: 40px 0 56px;} 
  .catalog-root-card {width: calc((100% - 24px) / 2);} 
  .catalog-root-search > input {width: 220px;} 
}
@media only screen and (max-width: 560px) { 
  .catalog-root-header {padding: 32px 0 16px;} 
  .catalog-root-title {font-size: 26px;} 
  .catalog-root-desc {font-size: 15px;} 
  .catalog-root-card {width: 100%;} 
  .catalog-root-search {width: 100%;} 
  .catalog-root-search > input {width: 100%;} 
}

/* ------------------------------- CATALOG ------------------------------- */

/* filters */

.catalog-filters-title {display: flex; align-items: center; padding-bottom: 14px;}
.catalog-filters-title > i {font-size: 16px; color: var(--gray-color-1); margin-inline-end: 12px;}
.catalog-filters-title > span {font-size: 16px; color: var(--black-color); font-weight: 500;}

.catalog-filter-price {border-top: 1px solid var(--gray-color-5); padding-top: 24px;}
.catalog-filter-price-title {font-size: 16px; font-weight: 500; color: var(--gray-color-1); padding-bottom: 12px;}

.catalog-filter {border-top: 1px solid var(--gray-color-5); padding-top: 24px; margin-top: 24px;}
.catalog-filter-title {font-size: 16px; font-weight: 500; color: var(--gray-color-1);}
.catalog-filter-items {max-height: 280px; overflow: auto;}
.catalog-filter-checkbox {display: flex; margin-top: 12px;}
.catalog-filter-checkbox > span:nth-of-type(1) {height: 16px; width: 16px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.10); background: #F3F3F5;}
.catalog-filter-checkbox > span:nth-of-type(2) {margin-inline-start: 10px; color: var(--gray-color-1); font-size: 13px;}

/* products */

.catalog-header {display: flex; align-items: end;}
.catalog-header > div:nth-of-type(1) {width: 60%;}
.catalog-header > div:nth-of-type(2) {width: 40%; display: flex; justify-content: end;}

.catalog-title {font-size: 16px; font-weight: 500; color: #101828;}
.catalog-desc {color: var(--gray-color-2); font-size: 14px; margin-top: 14px;}

.catalog-items {display: flex; flex-wrap: wrap; border-top: 1px solid var(--gray-color-5); padding-top: 32px; margin-top: 24px; gap: 32px}
.catalog-item {width: calc((100% - 64px)/3); display: flex; flex-direction: column;}
.catalog-item-photo {display: flex; padding: 10px;}
.catalog-item-photo > img {}
.catalog-item-sku {color: #6A7282; font-size: 12px; line-height: 1.3; margin-top: 20px;}
.catalog-item-title {color: #101828; font-size: 14px; font-weight: 500; line-height: 1.3; margin-top: 10px; flex: 1 1 auto; text-decoration: none;}
.catalog-item-price {color: #101828; font-size: 16px; font-weight: 500; line-height: 1.4; margin-top: 10px;}
.catalog-item-controls {margin-top: 16px;}

/* ------------------------------- PRODUCT ------------------------------- */

.product-grid {display: grid; grid-template-columns: 1.5fr 2fr 1.5fr; gap: 32px; margin-top: 18px;}

.product-photo {border: 1px solid #e1e4ea; background: #fff; border-radius: 12px; padding: 16px; display: flex; align-items: center; justify-content: center;}
.product-photo > img {max-width: 100%; height: auto; border-radius: 8px;}

.product-thumbs {display: flex; gap: 16px; margin-top: 16px;}
.product-thumbs > div {
    display: flex; width: 33.333%; border: 1px solid #e1e4ea; border-radius: 12px; cursor: pointer; overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.product-thumbs > div:hover {border-color: #bbbec5;}
.product-thumbs > div > img {width: 100%; padding: 6px;}

.product-tags {display: flex; gap: 8px;}
.product-tag {display: inline-flex; font-size: 12px; letter-spacing: 0; font-weight: 500; border: 1px solid var(--primary-color-1); background-color: var(--primary-color-1); color: var(--white-color); padding: 4px 10px; border-radius: 8px;}
.product-tag.extra {border-color: var(--gray-color-2); background-color: var(--white-color); color: var(--gray-color-1);}

.product-title {margin-top: 12px; font-size: 20px; line-height: 1.25; font-weight: 600; color: var(--black-color); letter-spacing: -0.2px;}
.product-sku {margin-top: 8px; font-size: 14px; color: var(--gray-color-2);}
.product-price {margin-top: 12px; font-size: 22px; line-height: 1.2; font-weight: 600; color: var(--black-color); letter-spacing: -0.3px;}

.product-quantity {display: inline-flex; border-radius: 8px; border: 1px solid var(--gray-color-5); margin-top: 12px;}
.product-quantity > div:nth-of-type(1), .product-quantity > div:nth-of-type(3) {height: 36px; width: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.product-quantity > div > i {font-size: 12px; padding: 12px; color: var(--gray-color-3);}
.product-quantity > div:nth-of-type(2) > input {height: 36px; width: 36px; text-align: center; font-size: 16px;}
.product-quantity.min > div:nth-of-type(1) {cursor: default; opacity: 0.4;}

.product-controls {max-width: 300px; margin-top: 14px;}

.product-assurance {display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; color: var(--gray-color-2); font-size: 13px;}
.product-assurance > div {display: inline-flex; align-items: center; gap: 8px;}
.product-assurance > div > i {font-size: 14px; color: var(--gray-color-3);}

/* tabs */

.product-tabs {margin-top: 28px;}
.product-tabs-nav {display: flex; gap: 8px; border-bottom: 1px solid var(--gray-color-6);}
.product-tab {appearance: none; background: #F6F7FA; color: var(--gray-color-1); border: 1px solid var(--gray-color-6); border-bottom: none; padding: 10px 14px; border-top-left-radius: 10px; border-top-right-radius: 10px; cursor: pointer; font-size: 14px;}
.product-tab.active {background: #FFF; color: var(--black-color); font-weight: 500; border-color: var(--gray-color-6);}
.product-tabs-content {border: 1px solid var(--gray-color-6); border-top: none; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; background: #FFF;}
.product-tab-panel {display: none; padding: 16px;}
.product-tab-panel.active {display: block;}

.product-description {max-width: 800px; line-height: 1.6; color: var(--gray-color-1);}
.product-description ul > li {list-style: initial; margin-inline-start: 12px;}

.product-compat-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 24px; padding-left: 18px; color: var(--gray-color-1); line-height: 1.6; max-width: 800px;}
.product-compat-list > li {list-style: initial; margin-inline-start: 12px;}

.product-specs {display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; max-width: 560px;}
.spec-row {display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: #F9FAFB; border: 1px solid var(--gray-color-6);}
.spec-row > span:nth-of-type(1) {color: var(--gray-color-2);}
.spec-row > span:nth-of-type(2) {color: var(--black-color); font-weight: 500;}

/* responsive */
@media only screen and (max-width: 1024px) {
    .product-grid {grid-template-columns: 1fr;}
    .product-meta {flex-wrap: wrap;}
}
@media only screen and (max-width: 640px) {
    .product-specs {grid-template-columns: 1fr;}
}

/* ------------------------------- CART ------------------------------- */

.cart-title {display: flex; align-items: center; margin-top: 18px;}
.cart-title > i {font-size: 18px; color: var(--black-color); margin-inline-end: 16px;}
.cart-title > span:nth-of-type(1) {color: var(--black-color); font-size: 20px; font-weight: 500; line-height: 1.3; margin-inline-end: 12px;}
.cart-title > span:nth-of-type(2) {display: inline-flex; align-items: center; justify-content: center; background: #ECEEF2; font-size: 12px; font-weight: 500; padding: 0 8px; height: 22px; min-width: 22px; border-radius: 4px;}

.cart-layout {display: grid; grid-template-columns: 2fr 1fr; gap: 32px; margin-top: 18px;}

/* items */

.cart-items {}
.cart-item {display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--gray-color-6);}
.cart-item:first-child {border-top: none;}
.cart-item > div:nth-of-type(1) {width: 120px;}
.cart-item > div:nth-of-type(2) {width: calc(100% - 300px);}
.cart-item > div:nth-of-type(3) {width: 180px; display: flex; flex-direction: column; align-items: end; justify-content: space-between;}

.cart-item-photo {width: 120px; height: auto; border-radius: 10px; background: #fff; border: 1px solid var(--gray-color-6);}
.cart-item-sku {color: var(--gray-color-3); font-size: 13px;}
.cart-item-title {color: var(--black-color); font-size: 16px; font-weight: 500; line-height: 1.3; margin-top: 6px;}

.cart-item-quantity {display: inline-flex; align-items: center; height: 32px; border-radius: 8px; border: 1px solid var(--gray-color-5); margin-top: 12px;}
.cart-item-quantity > div:nth-of-type(1), .cart-item-quantity > div:nth-of-type(3) {width: 32px; display: flex; align-items: center; justify-content: center;}
.cart-item-quantity > div:nth-of-type(2) {width: 46px; border-left: 1px solid var(--gray-color-5); border-right: 1px solid var(--gray-color-5);}
.cart-item-quantity > div > i {font-size: 12px; color: var(--gray-color-3);} 
.cart-item-quantity > div > input {width: 46px; height: 32px; text-align: center; font-size: 14px;}

.cart-item-delete {color: var(--gray-color-4); cursor: pointer;}
.cart-item-delete > i {font-size: 14px; padding: 6px;}
.cart-item-price {color: var(--black-color); height: 32px; display: flex; align-items: center; font-size: 18px; font-weight: 500;}

/* summary */

.cart-summary {position: sticky; top: 100px; border: 1px solid var(--gray-color-5); border-radius: 12px; padding: 16px; background: #FFF;}
.cart-subtotal-row {display: flex; padding: 8px 0;}
.cart-subtotal-row > div {width: 50%;}
.cart-subtotal-row > div:nth-of-type(1) {color: var(--gray-color-1); font-size: 14px; font-weight: 500;}
.cart-subtotal-row > div:nth-of-type(2) {color: var(--gray-color-1); font-size: 14px; text-align: end;}

.cart-total {display: flex; align-items: end; border-top: 1px solid var(--gray-color-6); padding-top: 12px; margin-top: 8px;}
.cart-total > div {width: 50%;}
.cart-total > div:nth-of-type(1) {color: var(--black-color); font-size: 18px;}
.cart-total > div:nth-of-type(2) {color: var(--black-color); font-size: 22px; text-align: end; font-weight: 600; letter-spacing: -0.3px;}

.cart-controls {margin-top: 16px;}
.cart-controls > .btn-primary {height: 44px;}
.cart-controls > .btn-primary > i {padding-inline-start: 10px; font-size: 12px;}

.cart-note {color: var(--gray-color-3); font-size: 12px; line-height: 1.35; margin-top: 10px;}

/* responsive */

@media only screen and (max-width: 1024px) {
    .cart-layout {grid-template-columns: 1fr;}
    .cart-summary {position: static;}
}

@media only screen and (max-width: 640px) {
    .cart-item {flex-wrap: wrap;}
    .cart-item > div:nth-of-type(1) {width: 90px;}
    .cart-item > div:nth-of-type(2) {width: calc(100% - 90px);}    
    .cart-item > div:nth-of-type(3) {width: 100%; align-items: start; gap: 8px; flex-direction: row; justify-content: space-between; margin-top: 8px;}
    .cart-item-photo {width: 90px;}
    .cart-item-price {font-size: 16px;}
}

/* ------------------------------- CHECKOUT ------------------------------- */

.checkout-title {display: flex; align-items: center; margin-top: 18px;}
.checkout-title > i {font-size: 18px; color: var(--black-color); margin-inline-end: 16px;}
.checkout-title > span {color: var(--black-color); font-size: 20px; font-weight: 500; line-height: 1.3;}

.checkout-layout {display: grid; grid-template-columns: 2fr 1fr; gap: 32px; margin-top: 18px;}

/* form */

.checkout-form {}
.checkout-section {border: 1px solid var(--gray-color-5); border-radius: 12px; padding: 16px; background: #FFF;}
.checkout-section + .checkout-section {margin-top: 16px;}
.checkout-section-title {font-size: 16px; font-weight: 500; color: var(--black-color); margin-bottom: 12px;}

.field-row {display: flex; gap: 16px;}
.field-row + .field-row {margin-top: 12px;}
.field {flex: 1 1 0;}
.field-label {font-size: 13px; color: var(--gray-color-1); margin-bottom: 8px;}
.field-input {height: 36px; width: 100%; border-radius: 8px; border: 1px solid var(--gray-color-5); padding: 0 12px; background: #FFF;}
.field-textarea {width: 100%; min-height: 90px; border-radius: 8px; border: 1px solid var(--gray-color-5); padding: 10px 12px; resize: vertical;}

.radio, .checkbox {display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;}
.radio > input, .checkbox > input {width: 16px; height: 16px;}
.delivery-methods, .payment-methods {display: flex; gap: 16px; margin-bottom: 12px;}

.promo-row {display: flex; gap: 12px; align-items: end;}
.promo-apply {height: 36px; padding: 0 12px; display: inline-flex; align-items: center;}

/* summary */

.checkout-summary {position: sticky; top: 100px; border: 1px solid var(--gray-color-5); border-radius: 12px; padding: 16px; background: #FFF;}
.checkout-subtotal-row {display: flex; padding: 8px 0;}
.checkout-subtotal-row > div {width: 50%;}
.checkout-subtotal-row > div:nth-of-type(1) {color: var(--gray-color-1); font-size: 14px; font-weight: 500;}
.checkout-subtotal-row > div:nth-of-type(2) {color: var(--gray-color-1); font-size: 14px; text-align: end;}

.checkout-total {display: flex; align-items: end; border-top: 1px solid var(--gray-color-6); padding-top: 12px; margin-top: 8px;}
.checkout-total > div {width: 50%;}
.checkout-total > div:nth-of-type(1) {color: var(--black-color); font-size: 18px;}
.checkout-total > div:nth-of-type(2) {color: var(--black-color); font-size: 22px; text-align: end; font-weight: 600; letter-spacing: -0.3px;}

.checkout-controls {margin-top: 16px;}
.checkout-controls > .btn-primary {height: 44px;}
.checkout-controls > .btn-primary > i {padding-inline-start: 10px; font-size: 12px;}
.checkout-note {color: var(--gray-color-3); font-size: 12px; line-height: 1.35; margin-top: 10px;}

/* responsive */

@media only screen and (max-width: 1024px) {
    .checkout-layout {grid-template-columns: 1fr;}
    .checkout-summary {position: static;}
}

@media only screen and (max-width: 640px) {
    .field-row {flex-wrap: wrap;}
    .field {flex-basis: 100%;}
}

/* ------------------------------- LOGIN ------------------------------- */

.login-title {display: flex; align-items: center; margin-top: 18px;}
.login-title > i {font-size: 18px; color: var(--black-color); margin-inline-end: 16px;}
.login-title > span {color: var(--black-color); font-size: 20px; font-weight: 500; line-height: 1.3;}

.login-layout {display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 18px;}
.login-card {border: 1px solid var(--gray-color-5); border-radius: 12px; padding: 16px; background: #FFF; max-width: 520px;}

.login-form {}
.login-section {}
.login-controls {margin-top: 12px;}
.login-hint {color: var(--gray-color-3); font-size: 12px; margin-top: 10px;}

.login-form-row {display: flex; align-items: center; justify-content: space-between; margin-top: 12px;}
.login-forgot {color: var(--gray-color-2); text-decoration: underline; font-size: 13px;}
.login-forgot:hover {text-decoration: none;}

@media only screen and (max-width: 640px) {
    .login-card {max-width: 100%;}
}


/* ------------------------------- PRODUCT: SHIPPING BOX ------------------------------- */
.shipping-box {background: #F6F7FA; border: 1px solid var(--gray-color-6); border-radius: 12px; padding: 14px;}
.shipping-box__title {font-size: 16px; font-weight: 600; color: var(--black-color); margin-bottom: 8px;}
.shipping-box__item {padding: 10px 0; border-top: 1px solid var(--gray-color-6);} 
.shipping-box__item:first-of-type {border-top: none;}
.shipping-box__subtitle {color: var(--black-color); font-weight: 500;}
.shipping-box__price {color: var(--black-color); font-weight: 600; margin-top: 4px;}
.shipping-box__desc {color: var(--gray-color-2); font-size: 13px; margin-top: 6px;}
.shipping-box__link {display: inline-block; color: var(--primary-color-1); font-size: 13px; margin-top: 6px; text-decoration: none;}
.shipping-box__link:hover {text-decoration: underline;}
.shipping-box__footer {margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray-color-6); color: var(--gray-color-1); font-size: 13px;}