:root { --ink: #0a0d11; --muted: #737b86; --line: #e7eaee; --surface: #f4f6f8; --white: #fff; --lime: #d8ff5d; --blue: #b8ddff; --purple: #c7b7ff; --shadow: 0 18px 60px rgba(10,13,17,.08); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: 'DM Sans', Arial, sans-serif; font-size: 16px; line-height: 1.45; }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { border: 0; cursor: pointer; }
.hidden { display: none !important; }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.icon { width: 20px; height: 20px; display: block; }
.topline { min-height: 30px; padding: 7px 24px; background: var(--ink); color: #c8ced6; font-size: 11px; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.pulse-dot, .lime-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: var(--lime); vertical-align: middle; margin-right: 7px; }
.topline-separator { color: #58616d; margin-inline: 9px; }
.site-header { height: 82px; width: min(1328px, calc(100% - 48px)); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -.04em; white-space: nowrap; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: var(--lime); color: var(--ink); font-size: 17px; font-weight: 700; }
.brand-word span { color: #84909d; font-weight: 500; }
.main-nav { display: flex; align-items: center; gap: 27px; margin-left: auto; margin-right: auto; }
.main-nav a { color: #69727c; font-size: 13px; font-weight: 500; transition: color .2s ease; }
.main-nav a:hover { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-button, .profile-button, .mobile-menu { min-width: 37px; height: 37px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; color: var(--ink); position: relative; }
.icon-button:hover, .profile-button:hover, .mobile-menu:hover { background: var(--surface); }
.profile-button { gap: 7px; padding: 0 11px; width: auto; border-radius: 18px; font-size: 12px; }
.profile-button .icon { width: 17px; height: 17px; }
.badge { position: absolute; top: -1px; right: -1px; min-width: 15px; height: 15px; padding: 0 4px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 9px; background: var(--lime); color: var(--ink); font-size: 9px; font-weight: 700; }
.mobile-menu { display: none; }
.hero { min-height: 590px; display: grid; grid-template-columns: 1fr .88fr; align-items: center; gap: 72px; padding-top: 50px; padding-bottom: 58px; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 9px; color: #8c96a2; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow-line { width: 25px; height: 1px; background: var(--lime); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.055em; }
h1 { margin-top: 21px; max-width: 600px; font-size: clamp(52px, 7vw, 84px); line-height: .95; font-weight: 600; }
h1 em, h2 em { color: #9ca8b4; font-style: normal; }
.hero-text { max-width: 460px; margin-top: 28px; color: #68727d; font-size: 17px; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 34px; }
.button { min-height: 48px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; border-radius: 6px; font-size: 13px; font-weight: 700; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--ink); color: #fff; box-shadow: 0 8px 20px rgba(10,13,17,.13); }
.button-primary:hover { background: #222a33; }
.button-ghost { background: var(--surface); color: var(--ink); }
.button-light { background: #fff; color: var(--ink); }
.button-dark { background: var(--ink); color: #fff; }
.full-width { width: 100%; }
.hero-metrics { display: flex; gap: 34px; margin-top: 64px; }
.hero-metrics div { display: flex; flex-direction: column; gap: 3px; }
.hero-metrics strong { font-family: 'Space Grotesk', sans-serif; font-size: 20px; letter-spacing: -.04em; }
.hero-metrics span { color: #8b949d; font-size: 11px; }
.hero-visual { min-height: 490px; position: relative; overflow: hidden; border-radius: 10px; background: #eef2f3; }
.hero-glow { width: 330px; height: 330px; position: absolute; top: 70px; right: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(216,255,93,.65), rgba(216,255,93,0) 68%); filter: blur(4px); }
.hero-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(10,13,17,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(10,13,17,.08) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(120deg, black 15%, transparent 75%); }
.hero-card { position: absolute; overflow: hidden; background: #fff; box-shadow: 0 24px 70px rgba(10,13,17,.16); }
.hero-card-main { width: 315px; height: 406px; top: 53px; left: 56px; border-radius: 10px; transform: rotate(-5deg); }
.hero-card-main img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.82); }
.hero-card-tag { position: absolute; z-index: 1; top: 16px; left: 17px; right: 17px; display: flex; justify-content: space-between; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.hero-card-caption { position: absolute; bottom: 15px; left: 16px; right: 16px; display: flex; justify-content: space-between; color: #fff; font-size: 12px; font-weight: 600; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.hero-card-small { width: 156px; height: 206px; right: 33px; bottom: 44px; border-radius: 9px; transform: rotate(6deg); }
.hero-card-small img { width: 100%; height: 100%; object-fit: cover; }
.hero-card-small span { position: absolute; bottom: 12px; left: 12px; color: #fff; font-size: 10px; font-weight: 700; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.hero-note { position: absolute; top: 25px; right: 21px; display: flex; align-items: center; gap: 9px; color: #59636d; font-size: 10px; line-height: 1.15; text-transform: uppercase; letter-spacing: .08em; }
.note-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 14px; }
.section { padding-top: 104px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 31px; }
.section-heading h2 { margin-top: 10px; font-size: clamp(32px, 4vw, 44px); font-weight: 600; line-height: 1.02; }
.text-link { color: #68727d; font-size: 12px; font-weight: 700; }
.text-link span { color: var(--ink); margin-left: 7px; }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.category-card { min-height: 188px; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; border-radius: 8px; text-align: left; transition: transform .25s ease, box-shadow .25s ease; }
.category-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.category-dark { background: var(--ink); color: #fff; }.category-blue { background: var(--blue); }.category-lime { background: var(--lime); }.category-purple { background: var(--purple); }
.category-icon { font-family: 'Space Grotesk'; font-size: 43px; line-height: 1; opacity: .8; }
.category-title { font-family: 'Space Grotesk'; font-size: 21px; font-weight: 600; letter-spacing: -.05em; }
.category-meta { width: 100%; display: flex; justify-content: space-between; color: rgba(10,13,17,.55); font-size: 11px; }.category-dark .category-meta { color: #aeb7c0; }.category-meta span { color: currentColor; font-size: 15px; }
.section-controls { display: flex; gap: 6px; }.carousel-control { width: 39px; height: 39px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: #737d86; }.carousel-control.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
.product-grid-featured { display: flex; overflow-x: auto; scrollbar-width: none; padding: 4px 0 14px; scroll-snap-type: x mandatory; }.product-grid-featured::-webkit-scrollbar { display: none; }.product-grid-featured .product-card { min-width: calc(25% - 13px); scroll-snap-align: start; }
.product-card { min-width: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.product-image-wrap { height: 218px; position: relative; overflow: hidden; background: var(--surface); }.product-image-wrap::after { content: ''; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(transparent, rgba(10,13,17,.14)); pointer-events: none; }.product-image { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }.product-card:hover .product-image { transform: scale(1.04); }.product-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 8px; border-radius: 4px; background: var(--lime); color: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: .03em; }.heart-button { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.88); color: var(--ink); }.heart-button .icon { width: 16px; }.heart-button.is-active { background: var(--ink); color: var(--lime); }.quick-button { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; min-height: 32px; border-radius: 4px; background: rgba(10,13,17,.9); color: #fff; opacity: 0; transform: translateY(5px); font-size: 10px; font-weight: 700; transition: opacity .2s ease, transform .2s ease; }.product-card:hover .quick-button { opacity: 1; transform: translateY(0); }.quick-button span { float: right; font-size: 14px; }
.product-info { padding: 14px 14px 13px; }.product-meta { display: flex; justify-content: space-between; color: #929ba5; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }.rating { color: #5f6973; font-weight: 700; text-transform: none; letter-spacing: 0; }.rating small { color: #a0a8b0; font-size: 10px; font-weight: 500; }.product-info h3 { margin-top: 8px; font-size: 18px; font-weight: 600; line-height: 1.08; }.product-specs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 11px; }.product-specs span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 3px; color: #808a95; font-size: 9px; }.product-buy { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-top: 17px; }.product-buy strong { display: block; font-family: 'Space Grotesk'; font-size: 18px; letter-spacing: -.04em; }.product-buy del { color: #a4adb5; font-size: 10px; }.product-actions { display: flex; gap: 5px; }.compare-button, .cart-button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: #67727c; }.compare-button.is-active { border-color: var(--blue); background: var(--blue); color: var(--ink); }.cart-button { border-color: var(--ink); background: var(--ink); color: #fff; }.cart-button .icon { width: 16px; height: 16px; }
.promo-band { min-height: 400px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; margin-top: 105px; padding: 56px 65px; border-radius: 8px; background: var(--ink); color: #fff; position: relative; overflow: hidden; }.promo-band::after { content: ''; width: 370px; height: 370px; position: absolute; right: -80px; bottom: -180px; border-radius: 50%; background: var(--lime); opacity: .9; }.promo-copy { position: relative; z-index: 1; }.promo-copy .section-kicker { color: #8f99a5; }.promo-copy h2 { margin-top: 16px; font-size: 48px; line-height: .96; }.promo-copy h2 em { color: var(--lime); }.promo-copy p { max-width: 350px; margin-top: 20px; color: #9ca5ae; font-size: 14px; }.promo-copy .button { margin-top: 26px; }.promo-stats { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 1; padding: 12px 0; }.promo-stat { display: flex; align-items: center; gap: 20px; padding: 19px 0; border-bottom: 1px solid rgba(255,255,255,.15); }.promo-stat:last-child { border-bottom: 0; }.promo-stat strong { color: var(--lime); font-family: 'Space Grotesk'; font-size: 14px; }.promo-stat span { color: #d8dde2; font-size: 17px; line-height: 1.1; }
.new-products-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 17px; }.new-products-grid .product-card:first-child { grid-row: span 2; }.new-products-grid .product-card:first-child .product-image-wrap { height: 452px; }.new-products-grid .product-image-wrap { height: 218px; }
.catalog-section { margin-top: 110px; padding: 88px 0 112px; background: var(--surface); }.catalog-heading { align-items: end; }.catalog-result { color: #8e98a2; font-size: 12px; }.catalog-layout { display: grid; grid-template-columns: 240px 1fr; gap: 36px; }.filters-panel { align-self: start; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.filter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; font-family: 'Space Grotesk'; font-size: 18px; font-weight: 600; }.filter-reset { padding: 0; background: transparent; color: #929ca6; font-size: 10px; }.field-label { display: block; margin: 17px 0 8px; color: #747f89; font-size: 11px; font-weight: 600; }.filters-panel select, .sort-select select { width: 100%; height: 39px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); font-size: 12px; outline: none; }.filters-panel select:focus, .sort-select select:focus, .search-box:focus-within { border-color: var(--ink); }.filter-block { margin-top: 25px; }.filter-label-row { display: flex; justify-content: space-between; color: #747f89; font-size: 11px; }.filter-label-row span:last-child { color: var(--ink); font-weight: 600; }.filters-panel input[type='range'] { width: 100%; margin-top: 13px; accent-color: var(--ink); }.check-row { display: flex; align-items: center; gap: 9px; margin-top: 11px; color: #606b75; font-size: 12px; }.check-row input { width: 14px; height: 14px; accent-color: var(--ink); }.catalog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }.search-box { min-width: 0; flex: 1; height: 44px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: #99a1a8; transition: border .2s ease; }.search-box .icon { width: 16px; }.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }.search-box button { background: transparent; color: #9aa2ab; font-size: 18px; }.sort-select { width: 185px; display: flex; align-items: center; gap: 8px; }.sort-select span { color: #7d8791; font-size: 11px; white-space: nowrap; }.sort-select select { flex: 1; }
.empty-state { padding: 70px 20px; text-align: center; }.empty-state > span { color: #a6afb7; font-size: 38px; }.empty-state h3 { margin-top: 12px; font-size: 22px; }.empty-state p { margin: 8px auto 20px; color: #7b858f; font-size: 13px; }
.site-footer { padding: 70px 0 24px; background: #fff; }.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 65px; }.footer-brand p { margin-top: 24px; color: #8c96a0; font-size: 13px; line-height: 1.45; }.footer-copy { display: block; margin-top: 50px; color: #a1a9b1; font-size: 11px; }.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }.footer-title { margin-bottom: 8px; color: #8b959f; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.footer-grid a:not(.brand) { color: #5e6873; font-size: 12px; }.footer-grid a:not(.brand):hover { color: var(--ink); }.footer-socials { display: flex; gap: 6px; margin-top: 10px; }.footer-socials a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: #69747e !important; font-size: 10px !important; text-transform: uppercase; }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 19px; border-top: 1px solid var(--line); color: #a1a9b1; font-size: 10px; }.created-by { color: var(--ink); font-weight: 700; letter-spacing: .06em; }
.modal-backdrop { position: fixed; z-index: 20; inset: 0; background: rgba(10,13,17,.58); backdrop-filter: blur(4px); }.modal { position: fixed; z-index: 21; top: 50%; left: 50%; width: min(860px, calc(100% - 30px)); max-height: calc(100vh - 30px); overflow: auto; transform: translate(-50%, -50%); border-radius: 10px; background: #fff; box-shadow: 0 30px 100px rgba(0,0,0,.25); }.modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.8); color: var(--ink); font-size: 22px; }.quick-view-grid { display: grid; grid-template-columns: .95fr 1.05fr; min-height: 440px; }.quick-view-image { min-height: 440px; background: var(--surface); }.quick-view-image img { width: 100%; height: 100%; object-fit: cover; }.quick-view-copy { padding: 52px 40px 38px; }.quick-view-copy h2, .compare-modal-content h2 { margin-top: 12px; font-size: 42px; line-height: .97; }.quick-rating { margin-top: 18px; color: #4d5964; font-weight: 700; font-size: 13px; }.quick-rating span { color: #96a0a9; font-weight: 400; margin-left: 7px; }.quick-view-copy p { margin-top: 23px; color: #68737d; font-size: 15px; line-height: 1.55; }.quick-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 21px; }.quick-specs span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; color: #68737d; font-size: 11px; }.quick-price { display: flex; align-items: baseline; gap: 9px; margin: 26px 0 19px; }.quick-price strong { font-family: 'Space Grotesk'; font-size: 29px; letter-spacing: -.06em; }.quick-price del { color: #9ca5ad; font-size: 12px; }.quick-favorite { width: 100%; min-height: 39px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: #636e78; font-size: 12px; }.quick-favorite .icon { width: 15px; }.quick-favorite.is-active { border-color: var(--ink); color: var(--ink); }.profile-modal { width: min(400px, calc(100% - 30px)); padding: 41px 35px 35px; text-align: center; }.profile-icon { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 21px; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 22px; }.profile-modal .section-kicker { justify-content: center; }.profile-modal h2 { margin-top: 11px; font-size: 38px; }.profile-modal p { margin-top: 14px; color: #727c86; font-size: 13px; }.auth-button { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 0 15px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); font-size: 12px; }.auth-email { margin-top: 24px; border-color: var(--ink); background: var(--ink); color: #fff; }.auth-note { display: block; margin-top: 17px; color: #a1a9b1; font-size: 10px; }.compare-modal-content { padding: 45px 40px 40px; }.compare-table { overflow: hidden; margin-top: 30px; border: 1px solid var(--line); border-radius: 6px; }.compare-table-row { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); border-bottom: 1px solid var(--line); }.compare-table-row:last-child { border-bottom: 0; }.compare-table-row > * { min-height: 52px; display: flex; align-items: center; padding: 0 13px; border-right: 1px solid var(--line); color: #626d77; font-size: 12px; }.compare-table-row > *:last-child { border-right: 0; }.compare-table-row strong { color: #9099a2; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }.side-drawer { position: fixed; z-index: 22; top: 0; right: 0; width: min(430px, 100%); height: 100vh; display: flex; flex-direction: column; background: #fff; box-shadow: -20px 0 80px rgba(0,0,0,.16); }.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 24px 24px 20px; border-bottom: 1px solid var(--line); }.drawer-head h2 { font-size: 27px; }.drawer-head h2 span { color: #99a2ab; font-size: 13px; font-family: 'DM Sans'; letter-spacing: 0; }.drawer-body { flex: 1; overflow-y: auto; padding: 13px 24px; }.drawer-footer { padding: 16px 24px 24px; border-top: 1px solid var(--line); }.drawer-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }.drawer-total span { color: #7d8791; font-size: 12px; }.drawer-total strong { font-family: 'Space Grotesk'; font-size: 24px; letter-spacing: -.05em; }.drawer-product { display: grid; grid-template-columns: 67px 1fr auto; gap: 13px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }.drawer-product img { width: 67px; height: 76px; object-fit: cover; border-radius: 5px; background: var(--surface); }.drawer-product strong { display: block; font-size: 13px; }.drawer-product > div > span { display: block; margin-top: 4px; color: #7e8892; font-size: 12px; }.remove-button { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: #78828b; font-size: 18px; }.qty-controls { display: flex; align-items: center; gap: 10px; margin-top: 10px; }.qty-controls button { width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 3px; background: #fff; color: #66717b; }.qty-controls span { min-width: 10px; text-align: center; font-size: 11px; }.drawer-link { padding: 0; margin-top: 10px; background: transparent; color: #66717b; font-size: 11px; font-weight: 700; }.drawer-empty { display: grid; place-items: center; padding: 100px 20px 30px; text-align: center; }.drawer-empty > span { color: #adb5bc; font-size: 42px; }.drawer-empty h3 { margin-top: 11px; font-size: 22px; }.drawer-empty p { max-width: 240px; margin: 8px auto 20px; color: #858f99; font-size: 12px; }.compare-list { margin-bottom: 20px; }.compare-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 11px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }.compare-row img { width: 52px; height: 58px; object-fit: cover; border-radius: 4px; }.compare-row strong { display: block; font-size: 12px; }.compare-row span { display: block; margin-top: 4px; color: #7e8892; font-size: 10px; }.toast { position: fixed; z-index: 30; left: 50%; bottom: 25px; min-height: 42px; padding: 0 18px; display: grid; place-items: center; transform: translateX(-50%); border-radius: 5px; background: var(--ink); color: #fff; box-shadow: var(--shadow); font-size: 12px; }
@media (max-width: 980px) { .site-header { width: min(100% - 32px, 1180px); }.main-nav { gap: 15px; }.main-nav a { font-size: 12px; }.hero { grid-template-columns: 1fr .9fr; gap: 35px; }.hero-card-main { left: 26px; }.hero-card-small { right: 16px; }.product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }.product-grid-featured .product-card { min-width: calc(33.333% - 11px); }.new-products-grid { grid-template-columns: repeat(2, 1fr); }.new-products-grid .product-card:first-child { grid-row: span 1; }.new-products-grid .product-card:first-child .product-image-wrap { height: 218px; }.promo-band { padding: 48px; }.catalog-layout { grid-template-columns: 210px 1fr; gap: 20px; } }
@media (max-width: 720px) { .container { width: min(100% - 32px, 620px); }.topline { font-size: 9px; letter-spacing: .05em; }.site-header { height: 70px; }.main-nav { position: absolute; top: 100px; left: 16px; right: 16px; z-index: 5; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: var(--shadow); }.main-nav.is-open { display: flex; }.main-nav a { padding: 11px 10px; }.profile-button span { display: none; }.profile-button { padding: 0; }.mobile-menu { display: inline-flex; }.hero { min-height: auto; grid-template-columns: 1fr; gap: 42px; padding-top: 50px; }.hero h1 { font-size: clamp(50px, 15vw, 74px); }.hero-text { font-size: 15px; }.hero-metrics { gap: 16px; margin-top: 45px; }.hero-metrics strong { font-size: 17px; }.hero-metrics span { font-size: 9px; }.hero-visual { min-height: 410px; }.hero-card-main { width: 245px; height: 320px; left: calc(50% - 150px); top: 47px; }.hero-card-small { width: 125px; height: 162px; right: 12px; bottom: 34px; }.hero-note { top: 19px; right: 15px; }.section { padding-top: 76px; }.section-heading { margin-bottom: 22px; }.section-heading h2 { font-size: 34px; }.category-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }.category-card { min-height: 150px; padding: 16px; }.category-icon { font-size: 34px; }.category-title { font-size: 17px; }.product-grid, .new-products-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }.product-grid-featured { gap: 10px; }.product-grid-featured .product-card { min-width: calc(50% - 5px); }.product-image-wrap, .new-products-grid .product-image-wrap, .new-products-grid .product-card:first-child .product-image-wrap { height: 165px; }.product-info { padding: 11px 10px; }.product-info h3 { font-size: 15px; }.product-buy strong { font-size: 15px; }.product-specs span { font-size: 8px; padding: 3px 5px; }.compare-button, .cart-button { width: 27px; height: 27px; }.promo-band { min-height: auto; grid-template-columns: 1fr; margin-top: 76px; padding: 35px 28px; }.promo-copy h2 { font-size: 40px; }.promo-stats { margin-top: 35px; }.promo-stat span { font-size: 15px; }.catalog-section { margin-top: 76px; padding: 65px 0 80px; }.catalog-layout { grid-template-columns: 1fr; }.filters-panel { order: 2; }.catalog-content { order: 1; }.catalog-toolbar { flex-direction: column; align-items: stretch; }.sort-select { width: 100%; }.footer-grid { grid-template-columns: repeat(2, 1fr); gap: 35px 20px; padding-bottom: 40px; }.footer-brand { grid-column: span 2; }.footer-copy { margin-top: 25px; }.footer-bottom { flex-direction: column; gap: 9px; }.quick-view-grid { grid-template-columns: 1fr; }.quick-view-image { min-height: 250px; max-height: 300px; }.quick-view-copy { padding: 30px 24px; }.quick-view-copy h2, .compare-modal-content h2 { font-size: 34px; }.compare-modal-content { padding: 35px 20px 25px; }.compare-table-row { grid-template-columns: 95px repeat(3, 1fr); }.compare-table-row > * { padding: 0 8px; font-size: 10px; }.profile-modal { padding: 36px 23px 28px; } }
@media (max-width: 420px) { .header-actions { gap: 2px; }.icon-button { min-width: 32px; }.hero-metrics { gap: 10px; }.hero-metrics strong { font-size: 15px; }.hero-metrics span { font-size: 8px; }.product-meta { font-size: 8px; }.rating small { display: none; }.product-buy { align-items: center; }.product-actions { gap: 3px; }.product-badge { top: 8px; left: 8px; font-size: 8px; }.heart-button { top: 6px; right: 6px; }.quick-button { display: none; } }