.ico { width: 18px; height: 18px; flex: none; } .btn .ico { width: 18px; height: 18px; } .topbar__item .ico { width: 15px; height: 15px; } .nav__link .ico { width: 15px; height: 15px; } .foot .ico { width: 16px; height: 16px; } .trust__i .ic .ico, .feature__ic .ico, .catcard__ic .ico { width: 24px; height: 24px; } .catcard__arw .ico, .node__foot .go .ico { width: 16px; height: 16px; } .woocommerce ul.products, ul.products { list-style: none; margin: 0; padding: 0; } .woocommerce ul.products::before, .woocommerce ul.products::after, ul.products::before, ul.products::after { content: none; } .woocommerce ul.products > li, ul.products > li { margin: 0; padding: 0; width: auto; float: none; clear: none; min-width: 0; list-style: none; } .product { min-width: 0; } .product > * { min-width: 0; } .product__name, .product__art, .product__fit { overflow-wrap: anywhere; } .products.is-grid .product__name { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .products.is-grid .product { height: 100%; } .products.is-grid > li { display: grid; min-width: 0; } .cartlink { position: relative; display: inline-flex; align-items: center; gap: 10px; } .cartlink__count { position: absolute; top: -6px; left: 22px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; font-size: 11px; font-weight: 700; color: #fff; background: var(--brand); border-radius: var(--r-pill); } .woocommerce .button:not(.btn), .woocommerce button.button:not(.btn), .woocommerce a.button:not(.btn), .woocommerce input.button:not(.btn), .woocommerce #respond input#submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border: 1.5px solid transparent; border-radius: var(--r-sm); background: var(--brand); color: #fff; font: inherit; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; } form.cart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin: 0; } form.cart:not(:has(.quantity)) { grid-template-columns: minmax(0, 1fr); } form.cart .quantity { margin: 0; } form.cart .quantity input { width: 88px; text-align: center; padding: 13px 10px; border: 1.5px solid var(--line); border-radius: var(--r-sm); font: inherit; } form.cart .button { width: 100%; white-space: nowrap; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .92); } .topbar :where(a, button):focus-visible, .foot :where(a, button):focus-visible, .hero :where(a, button):focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px rgba(16, 17, 20, .8); } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; background: var(--ink); color: #fff; border-radius: 0 0 var(--r-sm) 0; } .skip:focus { left: 0; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .formcard__msg { margin: 0; font-size: 14px; min-height: 1.2em; } .formcard__msg.is-ok { color: var(--ok); font-weight: 600; } .formcard__msg.is-err { color: var(--brand); font-weight: 600; } .catbar__search { position: relative; } .search__drop { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-3); overflow: hidden auto; max-height: min(70vh, 520px); } .sug { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; color: var(--ink); border-bottom: 1px solid var(--line-2); } .sug:last-child { border-bottom: 0; } .sug:hover { background: var(--surface-2); } .sug img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: var(--surface-2); } .sug__noimg { width: 44px; height: 44px; border-radius: 8px; background: var(--surface-3); } .sug__body { display: grid; gap: 2px; min-width: 0; } .sug__title { font-size: 14px; font-weight: 600; line-height: 1.3; } .sug__art { font-size: 12px; color: var(--muted); } .sug__price { font-size: 14px; font-weight: 700; white-space: nowrap; } .sug--all { grid-template-columns: 1fr; justify-items: center; font-weight: 700; color: var(--brand); background: var(--surface-2); } .ph { display: grid; place-content: center; gap: 4px; width: 100%; height: 100%; background: radial-gradient(circle at 50% 42%, var(--surface-3) 0 38%, transparent 38%), var(--surface-2); text-align: center; } .ph__kind { font-weight: 700; font-size: 14px; color: var(--muted); } .ph__note { font-size: 11.5px; color: var(--faint); } .mbar { display: none; } @media (max-width: 860px) { .mbar { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .mbar__item { display: grid; place-items: center; gap: 3px; min-height: 56px; padding: 8px 4px; background: none; border: 0; font-size: 11px; font-weight: 600; color: var(--ink-2); } .mbar__item .ico { width: 20px; height: 20px; } .mbar__item--wa { color: #128c4a; } .mbar__item--max { color: #5b3ee0; } body { padding-bottom: 62px; } } .prose img, .prose table { max-width: 100%; } .prose table { display: block; overflow-x: auto; } .prose table { border-collapse: collapse; font-size: .92rem; border: 1px solid var(--line); border-radius: var(--r-sm); } .prose th, .prose td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line-2); } .prose thead th { background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .prose tbody tr:last-child td { border-bottom: 0; } .prose tbody th { font-weight: 600; color: var(--ink-2); white-space: nowrap; } .spec__facts, .spec__meta { min-width: 0; } .ptable-wrap { overflow-x: auto; } .crumbs-bar { border-bottom: 1px solid var(--line); background: #fff; } .crumbs-bar .crumbs { padding-block: 12px; } .node__foot .parts { margin-top: 0; } .foot__socials .ico { width: 19px; height: 19px; } .sng-count { color: var(--faint); font-size: .8rem; font-weight: 600; } .sng-buy { margin-top: 22px; display: grid; gap: 14px; } .sng-buy .price { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; line-height: 1; } .sng-buy .price__from { font-size: .5em; font-weight: 600; color: var(--muted); font-style: normal; } .sng-buy__cart { display: grid; gap: 10px; } .sng-spec-photo .diagram__stage img { width: 100%; height: 100%; object-fit: contain; } .sng-spec-photo .diagram__stage .ph { height: 100%; } .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 20px; } .woocommerce-message, .woocommerce-info, .woocommerce-error { margin: 0 0 14px; padding: 14px 18px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); list-style: none; font-size: .95rem; } .woocommerce-message { border-color: var(--ok); color: var(--ok); } .woocommerce-error { border-color: var(--brand); color: var(--brand); } .spec__facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; } .products.is-grid { grid-auto-rows: 1fr; } @font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/rubik-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/rubik-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/rubik-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/rubik-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --font: "Rubik", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif; } body, input, select, textarea, button { font-family: var(--font); } body { font-weight: 400; } h1, h2, h3, h4, h5, h6, .h-display, .h-section, .logo__word, .logo__word b, .logo__word span, .phones a, .cart__count, .cartlink .cart__count, .catbar__trigger, .catbar__fav span, .hero__card .tel b, .feature b, .rail__head, .rail-promo b, .article-line h4, .product__name, .product__price .amt, .group__head .mark, .node__num, .node__body b, .parts__head .n, .ptable thead th, .ptable .pos span, .ptable .price, .brand-chip, .foot__contact .tel a, strong, b, th, .btn, .badge, .eyebrow, .cart__meta b, .price, .sng-buy .price, .woocommerce-Price-amount, .foot h4, .sug__price, .sug--all { font-weight: 600; } :root { --sh-1: none; --sh-2: none; --sh-3: none; --sh-red: none; } .btn, .btn--primary, .btn--dark, .btn--light, .catmenu .rail, .mega, .search__drop, .modal__box, .drawer__panel { box-shadow: none; } .search__drop, .mega { border: 1px solid var(--line); } .topbar { color: #fff; font-weight: 400; } .topbar a, .topbar__item, .topbar__phone { color: #fff; font-weight: 400; } .topbar__item .ico { color: var(--brand); } .topbar__socials a { width: 26px; height: 26px; background: none; border-radius: 6px; } .topbar__socials a:hover { background: none; opacity: .8; } .ico--brand { width: 24px; height: 24px; border-radius: 6px; } .topbar__socials .ico--brand { width: 26px; height: 26px; } .foot__socials a { width: auto; height: auto; background: none; } .foot__socials a:hover { background: none; opacity: .8; } .foot__socials .ico--brand { width: 32px; height: 32px; border-radius: 8px; } .btn .ico--brand, .mbar__item .ico--brand { width: 20px; height: 20px; border-radius: 5px; } .nav__link { font-weight: 400; } .btn--callback { font-weight: 400; } .logo__img { display: block; height: clamp(22px, 3.2vw, 30px); width: auto; } .foot .logo__img { height: clamp(26px, 3.6vw, 36px); } .drawer__head .logo__img { height: 24px; } :root { --h-ctl: 42px; } .masthead__contact .btn { height: var(--h-ctl); padding: 0 16px; } .masthead { border-bottom: 0; } .cartlink .cart__ico { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--ink); } .cartlink .cart__ico .ico { width: 20px; height: 20px; } .cartlink .cart__count { position: absolute; top: -5px; right: -5px; left: auto; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--brand); color: #fff; font-size: .68rem; font-weight: 600; } .cartlink .cart__meta { line-height: 1.2; } .cartlink .cart__meta small { display: block; font-size: .72rem; color: var(--muted); } .catbar__nav { display: flex; align-items: center; margin-right: auto; } .catbar__search { max-width: none; padding-left: 14px; height: var(--h-ctl); } .catbar__search .search__input { padding-block: 0; align-self: stretch; } .catbar__search .catbar__go { flex: none; margin: 4px; width: calc(var(--h-ctl) - 11px); height: calc(var(--h-ctl) - 11px); display: grid; place-items: center; padding: 0; border-radius: 8px; background: var(--brand); color: #fff; } .catbar__search .catbar__go:hover { background: var(--brand-600); } .catbar__search .catbar__go .ico { width: 18px; height: 18px; } @media (max-width: 1200px) { .burger { display: none; } .masthead__in { min-height: 72px; } } @media (max-width: 700px) { .masthead__in { flex-wrap: wrap; row-gap: 10px; padding-bottom: 12px; } .masthead__in .catbar__search { order: 3; flex: 1 0 100%; } .masthead__contact { margin-left: auto; } } @media (max-width: 900px) { .catbar__nav { display: none; } .burger { display: grid; } } .topbar__item { white-space: nowrap; } .topbar__note { font-style: normal; opacity: .75; } .topbar__note::before { content: '·'; margin-right: 8px; } @media (max-width: 1240px) { .topbar__note { display: none; } } @media (max-width: 1080px) { .topbar__addr { display: none; } } @media (max-width: 1000px) { .topbar__hours { display: none; } } @media (max-width: 860px) { .topbar__mail { display: none; } } .hero__in { grid-template-columns: minmax(0, 1fr); } .hero h1 { margin: 0; max-width: 620px; font-size: clamp(1.4rem, 2.5vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; } .hero__sub { margin-top: 16px; max-width: 520px; font-size: clamp(.9rem, 1vw, .96rem); font-weight: 300; } .hero__cta { align-items: center; margin-top: 26px; } .hero__go { height: 40px; padding: 0 20px; font-size: .95rem; font-weight: 400; } .hero__socials { display: inline-flex; align-items: center; gap: 10px; } .hero__socials .ico--brand { width: 40px; height: 40px; border-radius: 10px; } .hero__socials a:hover { opacity: .8; } .hero__in { min-height: clamp(300px, 26.667vw, 512px); padding-block: clamp(28px, 3.4vw, 48px); } .hero__bg img { object-position: 58% 45%; } .hero { background: #dfe6ee; color: #fff; } .hero h1 { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); } .hero__sub { color: rgba(255, 255, 255, .92); font-weight: 400; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); } .hero { width: auto; margin: 0; border-radius: 0; } .hero__bg::after { background: linear-gradient(90deg, rgba(14, 15, 19, .62) 0%, rgba(14, 15, 19, .42) 30%, rgba(14, 15, 19, .12) 55%, rgba(14, 15, 19, 0) 75%); } @media (max-width: 860px) { .hero__bg::after { background: linear-gradient(180deg, rgba(14, 15, 19, .5) 0%, rgba(14, 15, 19, .35) 60%, rgba(14, 15, 19, .5) 100%); } .hero h1, .hero__sub { max-width: none; } } .cat-grid { gap: clamp(14px, 1.6vw, 22px); } .catcard { display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .22s var(--ease), transform .22s var(--ease); } .catcard:hover { transform: translateY(-3px); border-color: var(--ink); } .catcard__media { position: relative; display: block; aspect-ratio: 16 / 10; background: linear-gradient(150deg, var(--surface-2) 0%, var(--surface-3) 100%); overflow: hidden; } .catcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .catcard:hover .catcard__media img { transform: scale(1.04); } .catcard--photo .catcard__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(180deg, rgba(16, 18, 22, 0), rgba(16, 18, 22, .42)); } .catcard .catcard__ic { position: absolute; inset: 0; width: auto; height: auto; margin: 0; display: grid; place-items: center; background: none; color: var(--faint); } .catcard .catcard__ic .ico { width: 52px; height: 52px; padding: 14px; border: 1px solid var(--line); border-radius: 50%; box-sizing: content-box; background: rgba(255, 255, 255, .6); } .catcard__count { position: absolute; left: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; margin: 0; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); color: var(--ink-2); font-size: .78rem; font-weight: 400; } .catcard__body { display: block; position: relative; padding: 18px 58px 20px 20px; } .catcard h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; } .catcard p { margin-top: 6px; color: var(--muted); font-size: .875rem; font-weight: 400; line-height: 1.5; } .catcard .catcard__arw { position: absolute; top: 20px; right: 18px; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .catcard:hover .catcard__arw { background: var(--brand); border-color: var(--brand); color: #fff; } .product { border-radius: var(--r-lg); } .product__img .product__stock { position: absolute; top: 8px; left: 8px; z-index: 1; } .product__img .badge { font-weight: 400; } .badge--stock { background: var(--ok); color: #fff; } .product__brand { display: block; margin-bottom: 6px; color: var(--brand); font-size: .72rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; } .product__name { font-size: 1rem; font-weight: 600; line-height: 1.35; } .product__art, .product__fit { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; margin-top: 8px; font-size: .82rem; font-weight: 400; color: var(--muted); } .product__art .ico, .product__fit .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--faint); } .product__art b { font-weight: 400; color: var(--ink-2); } .product__fit b { font-weight: 400; } .product__art { font-size: .95rem; } .badge--sku { font-size: .95rem; padding-block: 6px; } .cartrow__art { font-size: .92rem; } .product__art b, .badge--sku b, .spec__sku, .ptable .code, .cartrow__art b { font-family: var(--font); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .02em; font-weight: 500; } .product__art b, .badge--sku b, .cartrow__art b { font-size: 1.06em; } .badge--sku b, .spec__sku { font-weight: 600; color: var(--ink); } .catalogs__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .catalogs__head .ico { width: 22px; height: 22px; color: var(--brand); } .catalogs__lead { margin: 0 0 14px; color: var(--muted); font-size: .92rem; } .catalogs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .catalogs__grid .node--mini .node__img > .ico { color: var(--brand); width: 22px; height: 22px; } .catalogs__grid .node--mini .node__body b { -webkit-line-clamp: 3; line-clamp: 3; } @media (max-width: 900px) { .catalogs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .catalogs__grid { grid-template-columns: 1fr; } } .product__price { display: flex; align-items: baseline; gap: 8px; } .products:not(.is-grid) .product__price { justify-content: flex-end; } .product__pricelbl { color: var(--faint); font-size: .74rem; font-weight: 400; white-space: nowrap; } .product__price .amt { font-size: 1.3rem; font-weight: 600; } .product__price .amt.q { font-size: 1rem; } .products.is-grid .product__price { margin-top: auto; padding-top: 14px; } .product__actions .btn { padding: 9px 14px; font-size: .86rem; font-weight: 400; } .product__actions .btn .ico { width: 16px; height: 16px; } .products.is-grid .product { padding: 0; gap: 0; overflow: hidden; grid-template-rows: auto 1fr auto auto; } .products.is-grid .product__img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; background: var(--surface-2); } .products.is-grid .product__img img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; object-fit: contain; } .products.is-grid .product__main { padding: 12px 14px 0; } .products.is-grid .product__price { padding: 10px 14px 0; } .products.is-grid .product__actions { padding: 12px 14px 14px; } .product__actions .btn { flex: 1; width: 100%; } @media (max-width: 900px) { .products.is-grid .product { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: auto 1fr auto auto; row-gap: 0; } .products.is-grid .product__img, .products.is-grid .product__main, .products.is-grid .product__price, .products.is-grid .product__actions { grid-area: auto; } .products.is-grid .product__price { text-align: left; } .products.is-grid .product__actions { flex-direction: row; } } .catcard--photo { background: #fff; color: var(--ink); border-radius: var(--r); border-color: var(--line); } .catcard--photo .catcard__media { aspect-ratio: 16 / 10; background: #fff; } .catcard--photo .catcard__media img { object-fit: cover; object-position: center; padding: 0; transition: none; } .catcard--photo:hover .catcard__media img { transform: none; } .catcard--photo .catcard__media::after { content: none; } .catcard--photo .catcard__count { top: auto; left: 12px; bottom: 12px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(0, 0, 0, .06); backdrop-filter: blur(6px); } .catcard--photo .catcard__media img.catcard__brand { position: absolute; top: 12px; right: 12px; z-index: 1; width: auto; height: 26px; padding: 0; opacity: .9; } .catcard--photo .catcard__body { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 16px; background: #fff; } .catcard--photo h3 { font-size: 1rem; } .catcard--photo .catcard__arw { position: static; flex: none; width: 32px; height: 32px; background: transparent; border-color: var(--line); color: var(--ink-2); } .catcard--photo:hover { transform: none; border-color: #cfd3da; box-shadow: var(--sh-2); } .catcard--photo:hover .catcard__arw { background: transparent; border-color: var(--brand); color: var(--brand); } .foldtext__body { max-width: none; } .js .foldtext__body { position: relative; max-height: 5.4em; overflow: hidden; } .js .foldtext__body::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2.4em; background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--surface)); pointer-events: none; } .section--tint .foldtext__body::after { background: linear-gradient(180deg, rgba(245, 246, 249, 0), var(--surface-2)); } .js .foldtext.is-open .foldtext__body { max-height: none; } .js .foldtext.is-open .foldtext__body::after { content: none; } .js .foldtext.is-open .foldtext__body { max-width: 74ch; } .foldtext__more { margin-top: 12px; padding: 0; border: 0; background: none; color: var(--brand); font: inherit; font-size: .94rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .foldtext__more:hover { color: var(--ink); } .pagehead--photo { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 44%); } .pagehead--photo::before { content: none; } .pagehead--photo .pagehead__bg { left: auto; right: max(16px, calc((100% - var(--wrap)) / 2 + clamp(16px, 4vw, 40px))); width: min(52%, 680px); } .pagehead--photo .pagehead__bg img { object-fit: contain; object-position: right center; padding-block: 12px; box-sizing: border-box; } .pagehead--photo .pagehead__bg::after { content: none; } .pagehead--photo .pagehead__in { min-height: 150px; padding-block: clamp(14px, 1.8vw, 22px); } .pagehead--photo h1 { font-size: clamp(1.3rem, 2.2vw, 1.72rem); } .pagehead--photo h1 { color: var(--ink); max-width: 54%; } .pagehead--photo p { color: var(--ink-2); max-width: 46ch; } .pagehead--photo .crumbs { color: var(--muted); } .pagehead--photo .crumbs a:hover { color: var(--ink); } .pagehead--photo .crumbs svg { color: var(--faint); } .pagehead--photo .crumbs [aria-current] { color: var(--ink); } @media (max-width: 760px) { .pagehead--photo .pagehead__bg { display: none; } .pagehead--photo h1, .pagehead--photo p { max-width: none; } } .node-grid--mini { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .node--mini { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; } .node--mini:hover { transform: none; } .node--mini .node__img { width: 44px; height: 44px; flex: none; aspect-ratio: auto; border-radius: 10px; background: none; } .node--mini .node__img img { padding: 5px; } .node--mini .node__img > .ico { width: 18px; height: 20px; padding: 0; color: var(--faint); } .node--mini .node__body { padding: 0; gap: 2px; min-width: 0; } .node--mini .node__body b { font-size: .85rem; font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .node--mini .node__foot { margin-top: 0; padding-top: 2px; } .node--mini .node__foot .parts { font-size: .76rem; font-weight: 400; } .node--mini > .ico { flex: none; margin-left: auto; width: 15px; height: 15px; color: var(--faint); } .node--mini:hover > .ico { color: var(--brand); } @media (max-width: 1180px) { .node-grid--mini { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 980px) { .node-grid--mini { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .node-grid--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .node-grid--mini { grid-template-columns: 1fr; } } .section--tight { padding-block: clamp(18px, 2.2vw, 30px); } .section--tight .section-head { margin-bottom: 14px; } .section--tight .h-section { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-top: 0; } .section--nodes { padding-top: clamp(14px, 1.6vw, 22px); } .product__ask { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; width: 100%; } .product__asklbl { color: var(--muted); font-size: .85rem; font-weight: 400; } .product__channels { display: inline-flex; align-items: center; gap: 8px; } .product__channels a { display: inline-flex; } .product__channels .ico--brand { width: 32px; height: 32px; border-radius: 8px; transition: opacity .16s var(--ease); } .product__channels a:hover .ico--brand { opacity: .82; } .products.is-grid .product__ask { flex-direction: column; align-items: flex-start; gap: 8px; } .layout--nofilters { grid-template-columns: minmax(0, 1fr); } @media (max-width: 900px) { .catbar { display: none; } } .drawer__panel .nav__link { white-space: normal; align-items: flex-start; gap: 12px; line-height: 1.3; } .drawer__panel .nav__link .sng-count { flex: none; } @media (max-width: 700px) { .viewtoggle { display: none; } .products.is-grid .product { grid-template-rows: auto auto auto auto; } .catbar__search .catbar__go { width: 40px; height: 40px; } .topbar__socials a { width: 34px; height: 34px; } .product__actions .btn { padding: 12px 14px; } .foldtext__more { padding: 8px 0; margin-top: 6px; } .products:not(.is-grid) .product__price { justify-content: flex-start; } } .btn--oneclick { --bg: transparent; --fg: var(--brand); --bd: var(--brand); border-width: 1px; padding: 7px 14px; font-size: .82rem; font-weight: 400; } .btn--oneclick:hover { --bg: var(--brand-tint); } .product__actions .btn--oneclick { padding: 6px 14px; font-size: .8rem; font-weight: 400; } .products.is-grid .product__actions { flex-direction: column; align-items: stretch; gap: 8px; } .sng-buy__cart .btn--oneclick { margin-top: 10px; } .cartctl { display: block; } .cartctl__add { width: 100%; } .cartctl__step { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; height: 43px; border-radius: var(--r-sm); background: var(--dark); color: #fff; overflow: hidden; } .cartctl__pm { height: 100%; display: grid; place-items: center; font-size: 1.15rem; line-height: 1; color: rgba(255, 255, 255, .75); transition: background .16s var(--ease), color .16s var(--ease); } .cartctl__pm:hover { background: var(--dark-3); color: #fff; } .cartctl__n { text-align: center; font-size: .88rem; font-weight: 400; white-space: nowrap; } .cartctl[data-busy] { opacity: .6; pointer-events: none; } .sng-buy__cart .cartctl { margin: 0; } @media (prefers-reduced-motion: no-preference) { .cta-band::before { animation: sng-glow 25s ease-in-out infinite; will-change: transform, opacity; } } @keyframes sng-glow { 0% { transform: translate(0, 0) scale(1); opacity: .9; } 33% { transform: translate(-38px, 26px) scale(1.14); opacity: 1; } 66% { transform: translate(18px, -14px) scale(.94); opacity: .78; } 100% { transform: translate(0, 0) scale(1); opacity: .9; } } .modal__channels { display: grid; justify-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .modal__channels-lbl { color: var(--muted); font-size: .84rem; } .modal__channels-row { display: inline-flex; gap: 12px; } .modal__channels-row .ico--brand { width: 40px; height: 40px; border-radius: 10px; } .modal__channels-row a:hover { opacity: .8; } .modal__channels-tel { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: .95rem; } .modal__channels-tel .ico { width: 16px; height: 16px; color: var(--brand); } .modal__channels-tel:hover { color: var(--brand); } .filters { position: sticky; top: 96px; display: grid; gap: 18px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .filters__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .filters__head b { font-weight: 600; font-size: .98rem; color: var(--ink); } .filters__reset { color: var(--muted); font-size: .82rem; } .filters__reset:hover { color: var(--brand); } .filters__group { display: grid; gap: 8px; } .filters__label { color: var(--ink-2); font-size: .84rem; } .filters__list { display: grid; gap: 2px; } .filters__list--scroll { max-height: 260px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; } .filters__opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 8px; margin-inline: -8px; border-radius: 8px; font-size: .86rem; color: var(--ink-2); cursor: pointer; } .filters__opt:hover { background: var(--surface-2); } .filters__opt input { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; } .filters__opt i { color: var(--faint); font-style: normal; font-size: .78rem; } .filters__price { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .filters__price label { display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); } .filters__price label:focus-within { border-color: var(--brand); background: #fff; } .filters__price span { color: var(--faint); font-size: .8rem; } .filters__price input { width: 100%; min-width: 0; padding: 9px 0; border: 0; background: none; font-size: .88rem; } .filters__price input:focus { outline: none; } .filters__switch { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: .86rem; color: var(--ink-2); cursor: pointer; } .filters__switch input { position: absolute; opacity: 0; width: 0; height: 0; } .filters__switch i { position: relative; width: 40px; height: 22px; border-radius: var(--r-pill); background: var(--surface-3); transition: background .18s var(--ease); } .filters__switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s var(--ease); } .filters__switch input:checked + i { background: var(--brand); } .filters__switch input:checked + i::after { transform: translateX(18px); } .filters__switch input:focus-visible + i { outline: 3px solid var(--ink); outline-offset: 2px; } .filters__clear { font-weight: 400; } @media (max-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr); } .filters { position: static; } } .select--per { display: inline-flex; align-items: center; gap: 8px; } .select__lbl { color: var(--muted); font-size: .86rem; white-space: nowrap; } .select--per select { font-weight: 400; } .select select { font-weight: 400; } @media (max-width: 700px) { .select__lbl { display: none; } } .catmenu { width: min(1240px, calc(100vw - 24px)); } .megacat { display: grid; grid-template-columns: 296px minmax(0, 1fr); background: var(--dark); border-radius: var(--r); overflow: hidden; } .megacat__rail { padding: 10px; border-right: 1px solid rgba(255, 255, 255, .08); } .megacat__fam { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--on-dark); font-size: .92rem; transition: background .16s var(--ease), color .16s var(--ease); } .megacat__fam:hover, .megacat__fam.is-active { background: rgba(255, 255, 255, .08); color: #fff; } .megacat__fam[aria-current="true"] { background: var(--brand); color: #fff; } .megacat__pic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, .06); overflow: hidden; } .megacat__pic img { width: 100%; height: 100%; object-fit: cover; } .megacat__pic .ico { width: 20px; height: 20px; color: var(--brand); } .megacat__pic--logo { background: var(--surface); padding: 6px; } .megacat__pic--logo img { width: 100%; height: 100%; object-fit: contain; } .megacat__name { min-width: 0; line-height: 1.25; } .megacat__n { color: var(--on-dark-muted); font-style: normal; font-size: .78rem; } .megacat__fam .arw { width: 16px; height: 16px; color: var(--on-dark-muted); transition: transform .16s var(--ease); } .megacat__fam:hover .arw, .megacat__fam.is-active .arw { transform: translateX(3px); color: #fff; } .megacat__panels { position: relative; display: flex; flex-direction: column; min-height: 430px; } .megacat__panel { display: none; padding: 18px 20px 6px; } .megacat__panel.is-active { display: block; } .megacat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); } .megacat__head b { color: #fff; font-size: 1.05rem; font-weight: 600; } .megacat__head a { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); font-size: .86rem; white-space: nowrap; } .megacat__head a:hover { color: #fff; } .megacat__head .ico { width: 14px; height: 14px; } .megacat__nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 14px; max-height: min(62vh, 560px); overflow: hidden auto; scrollbar-width: thin; padding-inline: 10px; margin-inline: -10px; } .megacat__nodes a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 10px; margin-inline: -10px; border-radius: 8px; color: var(--on-dark); font-size: .86rem; } .megacat__nodes a:hover { background: rgba(255, 255, 255, .07); color: #fff; } .megacat__nodes i { color: var(--on-dark-muted); font-style: normal; font-size: .76rem; } @media (max-width: 1180px) { .megacat__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .megacat__nodes { grid-template-columns: minmax(0, 1fr); } } .megacat__empty { padding: 6px 0 14px; color: var(--on-dark-muted); font-size: .86rem; max-width: 52ch; } .megacat__foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; margin-top: auto; padding: 14px 20px; background: rgba(255, 255, 255, .04); border-top: 1px solid rgba(255, 255, 255, .08); } .megacat__contacts { display: inline-flex; align-items: center; gap: 10px; } .megacat__tel { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: .92rem; white-space: nowrap; } .megacat__tel .ico { width: 15px; height: 15px; color: var(--brand); } .megacat__tel:hover { color: var(--brand); } .megacat__contacts .ico--brand { width: 26px; height: 26px; border-radius: 7px; } .megacat__contacts a:hover { opacity: .8; } @media (max-width: 1000px) { .catmenu { width: min(340px, calc(100vw - 24px)); } .megacat { grid-template-columns: minmax(0, 1fr); } .megacat__rail { border-right: 0; } .megacat__panels { display: none; } } .wrap--narrow { max-width: 780px; } .article-single__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 18px; color: var(--muted); font-size: .86rem; } .article-single__cover { margin: 0 0 24px; border-radius: var(--r); overflow: hidden; background: var(--surface-2); } .article-single__cover img { width: 100%; height: auto; display: block; } .acard__title { font-size: 1.06rem; font-weight: 600; line-height: 1.35; color: var(--ink); } .acard:hover .acard__title { color: var(--brand); } .acard__ex { margin-top: 8px; color: var(--muted); font-size: .88rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .articles-row--list { grid-template-columns: minmax(0, 1fr); } .empty { padding-block: clamp(40px, 7vw, 90px); text-align: center; } .empty h1, .empty h2 { margin-bottom: 12px; } .empty p { color: var(--muted); margin-inline: auto; max-width: 56ch; } .empty .btn { margin-top: 22px; } .search--inline { display: flex; align-items: center; gap: 8px; max-width: 520px; padding-left: 14px; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: var(--r-sm); } .search--inline:focus-within { border-color: var(--brand); background: #fff; } .search--inline input { flex: 1; min-width: 0; padding: 11px 0; border: 0; background: none; } .search--inline input:focus { outline: none; } .search--inline button { flex: none; margin: 4px; padding: 8px 16px; border-radius: 8px; background: var(--brand); color: #fff; font-size: .88rem; } .search--inline button:hover { background: var(--brand-600); } .price--request { color: var(--muted); font-size: .95rem; font-weight: 400; white-space: nowrap; } .foot__widget { margin-bottom: 22px; } .foot__wtitle { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; } .foot__widget ul { display: grid; gap: 6px; } .foot__widget a { color: var(--on-dark-muted); font-size: .92rem; } .foot__widget a:hover { color: #fff; } .cta-band__act { display: flex; gap: 12px; flex-wrap: wrap; } .cta-band__act .btn { font-weight: 400; } .spec__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .badge--sku { background: var(--surface-2); color: var(--ink-2); font-weight: 400; } .spec__chips { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 14px; } .spec__chip { font-size: .92rem; color: var(--ink); } .spec__chip small { color: var(--faint); font-size: .82rem; } .spec__chip b { font-weight: 600; } .sng-buy { margin-top: 20px; padding: 20px; border: 0; border-radius: var(--r); background: var(--surface-2); } .sng-buy .quantity { background: var(--surface); } .sng-buy__price { display: flex; align-items: baseline; gap: 10px; } .sng-buy__price small { color: var(--faint); font-size: .8rem; } .sng-buy__cart { margin-top: 14px; } .sng-buy__row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .sng-buy__row .btn { flex: 1 1 auto; } .sng-buy__note { font-size: .88rem; margin-top: 10px; } .btn--ask { --bg: transparent; --fg: var(--ok); --bd: var(--ok); border-width: 1px; padding: 9px 14px; font-size: .86rem; font-weight: 400; } .btn--ask:hover { --bg: var(--ok-tint); } .sng-buy form.cart { grid-template-columns: auto minmax(0, 1fr); } .spec__terms { display: grid; gap: 9px; margin-top: 20px; padding: 0; background: none; } .spec__terms li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--muted); font-size: .86rem; line-height: 1.45; } .spec__terms .ico { width: 18px; height: 18px; color: var(--brand); margin-top: 2px; } .spec__terms b { color: var(--ink); font-weight: 600; } .tabs { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .tabs__bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 6px; border-bottom: 1px solid var(--line); } .tabs__tab { position: relative; padding: 15px 16px; color: var(--muted); font-size: .92rem; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .16s var(--ease), border-color .16s var(--ease); } .tabs__tab:hover { color: var(--ink); } .tabs__tab.is-active { color: var(--brand); border-bottom-color: var(--brand); } .tabs__panel { padding: clamp(18px, 2.4vw, 30px); } .spectable { display: grid; } .spectable > div { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-2); } .spectable > div:last-child { border-bottom: 0; } .spectable dt { color: var(--muted); font-size: .9rem; } .spectable dd { margin: 0; color: var(--ink); font-size: .92rem; } .sng-rowhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .sng-rowhead .h-section { margin: 0; } @media (max-width: 900px) { .spectable > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } } .sng-spec-photo { padding: 0; border-radius: var(--r); overflow: hidden; } .sng-spec-photo .diagram__stage { background: none; border-radius: 0; } .spec { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); } @media (max-width: 1080px) { .spec { grid-template-columns: minmax(0, 1fr); } .spec__media { position: static; } } .sng-buy .quantity { width: 118px; display: flex; align-items: stretch; height: 46px; border: 1.5px solid var(--line); border-radius: var(--r-sm); overflow: hidden; } .sng-buy .quantity > label { display: none; } .sng-buy .quantity input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; text-align: center; font-size: .95rem; -moz-appearance: textfield; appearance: textfield; } .sng-buy .quantity input::-webkit-outer-spin-button, .sng-buy .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sng-buy .quantity input:focus { outline: none; } .sng-buy .qty-pm { flex: none; width: 38px; height: 100%; display: grid; place-items: center; font-size: 1.15rem; line-height: 1; color: var(--muted); transition: background .16s var(--ease), color .16s var(--ease); } .sng-buy .qty-pm:hover { background: var(--surface-2); color: var(--ink); } .foot { padding-top: 0; position: relative; } .foot__main { padding-top: clamp(48px, 6vw, 72px); background: linear-gradient(90deg, var(--dark) 0%, rgba(23, 24, 28, .9) 28%, rgba(23, 24, 28, .3) 66%, rgba(23, 24, 28, 0) 100%), url("../img/footer-bg.webp") right top / cover no-repeat, var(--dark); } .foot__top { grid-template-columns: 1.7fr 1.15fr .8fr .95fr 1fr; gap: clamp(18px, 2vw, 28px); padding-bottom: clamp(48px, 6vw, 72px); border-bottom: 0; } .foot__about { color: var(--on-dark-muted); max-width: 32ch; } .foot__soctitle { margin: 26px 0 12px; color: var(--on-dark-muted); font-size: .88rem; } .foot__socials { gap: 12px; margin-top: 0; } .foot__socials .ico--brand { width: 40px; height: 40px; border-radius: 11px; } .foot__col h4 { font-weight: 600; } .foot__col .sng-count { margin-left: 6px; color: rgba(255, 255, 255, .38); } .foot__linkbtn { display: block; padding: 6px 0; font: inherit; font-size: .92rem; text-align: left; color: var(--on-dark-muted); background: none; border: 0; cursor: pointer; transition: color .16s var(--ease); } .foot__linkbtn:hover { color: #fff; } .foot__row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; } .foot__row > .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--brand); flex: none; } .foot__row a { color: var(--on-dark-muted); transition: color .16s var(--ease); } .foot__row a:hover { color: #fff; } .foot__row small { display: block; margin-top: 2px; color: var(--on-dark-muted); font-size: .84rem; } .foot__tel { color: #fff !important; font-size: 1.15rem; font-weight: 600; } .foot__band { background: rgba(255, 255, 255, .028); border-top: 1px solid rgba(255, 255, 255, .06); } .foot__band-in { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 48px); flex-wrap: wrap; padding: 22px 0; } .foot__bar { flex: 1 1 100%; padding-block: 0; gap: clamp(16px, 2.2vw, 32px); } .foot__legal { display: inline-flex; gap: clamp(16px, 2.2vw, 32px); flex-wrap: wrap; } @media (max-width: 1200px) { .foot__top { grid-template-columns: repeat(4, minmax(0, 1fr)); } .foot__brand { grid-column: 1 / -1; } .foot__main { background-image: linear-gradient(90deg, var(--dark) 0%, rgba(23, 24, 28, .94) 34%, rgba(23, 24, 28, .62) 100%), url("../img/footer-bg.webp"); } } @media (max-width: 900px) { .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__main { background-image: linear-gradient(90deg, var(--dark) 0%, rgba(23, 24, 28, .92) 100%), url("../img/footer-bg.webp"); } } @media (max-width: 560px) { .foot__top { grid-template-columns: minmax(0, 1fr); } .foot__band-in { flex-direction: column; align-items: flex-start; gap: 18px; } .foot__bar { flex-direction: column; align-items: flex-start; gap: 10px; } .foot__legal { flex-direction: column; gap: 8px; } } .crumbs-bar { border-bottom: 0; } .crumbs-bar .crumbs { padding-block: 22px 12px; } .sng-tabs-sec { padding-top: clamp(18px, 2vw, 26px); padding-bottom: clamp(24px, 3vw, 40px); } .sng-tabs-sec .tabs { border: 0; border-radius: 0; background: none; } .sng-tabs-sec .tabs__bar { padding: 0; } .sng-tabs-sec .tabs__panel { padding: 22px 0 0; } .prose__more { display: inline-flex; align-items: center; gap: 6px; } .prose__more .ico { width: 14px; height: 14px; } .fitcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .fitcard { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .18s var(--ease), transform .18s var(--ease); } .fitcard:hover { border-color: var(--ink); transform: translateY(-2px); } .fitcard small { color: var(--faint); font-size: .78rem; } .fitcard b { color: var(--ink); font-size: 1.02rem; font-weight: 600; line-height: 1.3; } .fitcard span { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--brand); font-size: .84rem; } .fitcard .ico { width: 14px; height: 14px; } .fitnote { margin-top: 16px; color: var(--muted); font-size: .9rem; line-height: 1.6; max-width: 68ch; } .fitnote b { color: var(--ink-2); font-weight: 600; } .fitnote a { color: var(--brand); } .layout--aside-end { grid-template-columns: minmax(0, 1fr) 276px; } .blog-main { min-width: 0; } @media (max-width: 1024px) { .layout--aside-end { grid-template-columns: minmax(0, 1fr); } .blog-aside { order: 2; } } .toolbar--blog { flex-wrap: nowrap; align-items: flex-start; gap: 14px; margin-bottom: 26px; } .toolbar--blog .chips--blog { flex: 1 1 auto; min-width: 0; } .toolbar--blog .toolbar__end { flex: none; margin-left: auto; } @media (max-width: 700px) { .toolbar--blog { flex-wrap: wrap; } .toolbar--blog .toolbar__end { margin-left: 0; } } .chips--blog .chip { padding: 9px 13px; font-size: .85rem; } .chips--blog .chip { text-decoration: none; } .chips--blog .chip--active { background: var(--ink); border-color: var(--ink); color: #fff; } .chips--blog .chip--active:hover { background: var(--dark-2); border-color: var(--dark-2); } .card-grid--posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } @media (max-width: 820px) { .card-grid--posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .card-grid--posts { grid-template-columns: minmax(0, 1fr); } } .acard--post .acard__body { padding: 16px 18px 18px; } .acard--post .acard__meta { justify-content: space-between; gap: 10px; } .acard--post .acard__meta time { color: var(--faint); } .acard--post h3 { font-size: 1.02rem; line-height: 1.35; margin: 12px 0 8px; } .acard--post p { font-size: .86rem; line-height: 1.55; -webkit-line-clamp: 3; } .badge--cat { background: var(--brand-tint); color: var(--brand); font-size: .72rem; white-space: nowrap; } .acard__foot { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); } .acard__stat { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--faint); } .acard__stat .ico { width: 14px; height: 14px; } .acard__go { width: 34px; height: 34px; margin-left: auto; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--brand); transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .acard__go .ico { width: 15px; height: 15px; } .acard:hover .acard__go { background: var(--brand); border-color: var(--brand); color: #fff; } .acard__img--empty { display: grid; place-items: center; background: radial-gradient(120% 100% at 20% 0%, rgba(227, 6, 19, .22), transparent 62%), linear-gradient(140deg, var(--dark-2), var(--dark)); } .acard__img--empty .ico { width: 40px; height: 40px; color: rgba(255, 255, 255, .34); transition: color .4s var(--ease), transform .4s var(--ease); } .acard:hover .acard__img--empty .ico { color: rgba(255, 255, 255, .6); transform: scale(1.06); } .blog-aside { display: grid; gap: 16px; align-content: start; position: sticky; top: 18px; } @media (max-width: 1024px) { .blog-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } .side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; } .side-card__title { font-size: 1.02rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; } .side-list { display: grid; gap: 2px; } .side-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; margin-inline: -10px; border-radius: var(--r-sm); font-size: .92rem; color: var(--ink-2); transition: background .16s var(--ease), color .16s var(--ease); } .side-list a:hover { background: var(--surface-2); color: var(--ink); } .side-list b { color: var(--faint); font-weight: 600; font-size: .84rem; } .side-list [aria-current] { color: var(--brand); font-weight: 600; } .side-list [aria-current] b { color: var(--brand); } .side-posts { display: grid; gap: 14px; } .side-posts a { display: flex; gap: 12px; align-items: flex-start; } .side-posts__img { width: 56px; height: 56px; flex: none; border-radius: 10px; overflow: hidden; background: var(--surface-2); } .side-posts__img img { width: 100%; height: 100%; object-fit: cover; } .side-posts__img--empty { display: grid; place-items: center; background: linear-gradient(140deg, var(--dark-2), var(--dark)); } .side-posts__img--empty .ico { width: 20px; height: 20px; color: rgba(255, 255, 255, .38); } .side-posts__text { display: grid; gap: 5px; min-width: 0; } .side-posts b { font-size: .86rem; font-weight: 600; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .16s var(--ease); } .side-posts a:hover b { color: var(--brand); } .side-posts small { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--faint); } .side-posts small .ico { width: 13px; height: 13px; } .rail-help--left { margin-top: 0; text-align: left; padding: 22px 20px; } .rail-help--left .ic { margin: 0 0 12px; } .rail-help--left small { margin: 6px 0 16px; } .postmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; font-size: .88rem; font-weight: 600; color: rgba(255, 255, 255, .72); } .postmeta span { display: inline-flex; align-items: center; gap: 6px; } .postmeta .ico { width: 15px; height: 15px; } .postmeta__cat { padding: 4px 11px; border-radius: var(--r-pill); background: rgba(227, 6, 19, .18); color: #fff; font-size: .78rem; transition: background .16s var(--ease); } .postmeta__cat:hover { background: var(--brand); } .pager .ico--flip { transform: rotate(180deg); } .select .ico { transform: translateY(-50%) rotate(90deg); } .acard__img--empty[data-tile="1"] { background: radial-gradient(120% 100% at 82% 6%, rgba(227, 6, 19, .20), transparent 60%), linear-gradient(200deg, var(--dark-2), var(--dark)); } .acard__img--empty[data-tile="2"] { background: radial-gradient(140% 120% at 50% 108%, rgba(227, 6, 19, .22), transparent 62%), linear-gradient(160deg, var(--dark-3), var(--dark)); } .acard__img--empty[data-tile="3"] { background: radial-gradient(110% 90% at 8% 94%, rgba(227, 6, 19, .18), transparent 58%), linear-gradient(120deg, var(--dark-2), var(--dark)); } .pagehead__contacts { display: flex; flex-wrap: wrap; gap: 18px clamp(24px, 4vw, 60px); margin-top: clamp(24px, 3vw, 36px); } .phc { display: flex; align-items: center; gap: 14px; } .phc__ic { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; } .phc__ic .ico { width: 22px; height: 22px; } .phc__body { display: grid; gap: 2px; min-width: 0; } .phc__main { color: #fff; font-size: 1.06rem; font-weight: 600; line-height: 1.25; } .phc__main:hover { color: #fff; text-decoration: underline; } .phc__sub { color: rgba(255, 255, 255, .62); font-size: .84rem; line-height: 1.3; } a.phc__sub:hover { color: #fff; } .contacts__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .98fr) minmax(0, 1.04fr); gap: var(--gap); align-items: stretch; } @media (max-width: 1100px) { .contacts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contacts__grid .formcard--ask { grid-column: 1 / -1; } } @media (max-width: 720px) { .contacts__grid { grid-template-columns: minmax(0, 1fr); } } .info--panel { padding: clamp(20px, 2vw, 28px); display: grid; align-content: start; gap: 16px; } .info__head { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.12rem; font-weight: 600; color: var(--ink); } .info--panel .info__ic { width: auto; height: auto; margin: 0; background: none; border-radius: 0; color: var(--brand); } .info--panel .info__ic .ico { width: 20px; height: 20px; } .info--panel .info__addr { margin: 0; color: var(--ink-2); font-size: .98rem; } .info--panel:has(.map--card) { grid-template-rows: auto auto 1fr; } .map--card { aspect-ratio: auto; min-height: 190px; border-radius: var(--r-sm); } .hours { display: grid; } .hours__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: .95rem; } .hours__row:last-child { border-bottom: 0; padding-bottom: 0; } .hours__row:first-child { padding-top: 0; } .hours dt { color: var(--muted); white-space: nowrap; } .hours dd { margin: 0; color: var(--ink); font-weight: 600; white-space: nowrap; } .note--warn { display: grid; gap: 8px; padding: 16px 18px; background: var(--brand-tint); border: 1px solid #f6d2d5; border-radius: var(--r-sm); } .note--warn b { display: flex; align-items: center; gap: 8px; color: var(--brand); font-size: .96rem; font-weight: 600; } .note--warn .ico { width: 18px; height: 18px; flex: none; } .note--warn p { margin: 0; color: var(--ink-2); font-size: .88rem; line-height: 1.6; } .formcard--ask { padding: clamp(22px, 2.2vw, 30px); } .formcard--ask h2 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.2; } .formcard--ask > .muted { margin: 10px 0 22px; font-size: .94rem; line-height: 1.5; } .formcard--ask .field { margin-bottom: 14px; } .formcard__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 520px) { .formcard__row { grid-template-columns: minmax(0, 1fr); } } .field--ico { position: relative; } .field--ico > .ico { position: absolute; left: 15px; top: 16px; width: 16px; height: 16px; color: var(--faint); pointer-events: none; } .field--ico input { padding-left: 41px; } .formcard--ask .consent { margin-top: 14px; } .formcard--ask .formcard__msg { margin-top: 12px; } .section--flush { padding-top: 0; } .features--flat { margin-top: 0; } .features--flat .features__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line-2); box-shadow: none; overflow: hidden; } .features--flat .feature { background: #fff; border-right: 0; align-items: center; gap: 12px; padding: 20px clamp(12px, 1.1vw, 16px); } .features--flat .feature__ic { width: auto; height: auto; background: none; border-radius: 0; color: var(--brand); } .features--flat .feature__ic .ico { width: 26px; height: 26px; } .feature__body { display: grid; gap: 2px; min-width: 0; } .features--flat .feature b { font-size: .85rem; font-weight: 600; line-height: 1.3; } .features--flat .feature small { color: var(--ink-2); font-size: .84rem; line-height: 1.35; } @media (max-width: 1160px) { .features--flat .features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 780px) { .features--flat .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .features--flat .features__grid { grid-template-columns: minmax(0, 1fr); } } .rail-help .ic .ico { width: 22px; height: 22px; } .acard--post .acard__meta time { white-space: nowrap; } .acard--post .acard__meta .badge--cat { overflow: hidden; text-overflow: ellipsis; display: block; } .delivery .wrap, .dwhy { max-width: 1160px; } .dintro { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(24px, 3vw, 36px); color: var(--ink); font-size: clamp(.98rem, 1.2vw, 1.08rem); font-weight: 600; line-height: 1.6; max-width: 62ch; } .dintro__ic { width: 56px; height: 56px; flex: none; border-radius: var(--r); background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; } .dintro__ic .ico { width: 26px; height: 26px; } .dsteps { display: grid; gap: clamp(14px, 1.6vw, 20px); list-style: none; padding: 0; margin: 0; } .dstep { position: relative; padding-left: 46px; } .dstep__n { position: absolute; left: 0; top: clamp(20px, 2.2vw, 28px); width: 28px; height: 30px; border-radius: 7px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .92rem; font-weight: 600; } .dstep__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 2.2vw, 28px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 2vw, 26px); align-items: start; } .dstep__ic { width: 72px; height: 72px; flex: none; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; } .dstep__ic .ico { width: 32px; height: 32px; } .dstep__body h2 { font-size: clamp(1.12rem, 1.5vw, 1.3rem); font-weight: 600; } .dstep__body > p:not(.dstep__addr):not(.dnote) { margin: 12px 0 0; color: var(--ink-2); font-size: .94rem; line-height: 1.7; } .dstep__addr { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--muted); font-size: .92rem; } .dstep__addr .ico { width: 16px; height: 16px; flex: none; color: var(--brand); } .dchips { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; margin-top: 16px; } .dchip { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--brand-tint); border-radius: var(--r-sm); } .dchip .ico { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--brand); } .dchip b { display: block; color: var(--ink); font-size: .9rem; font-weight: 600; line-height: 1.4; } .dchip small { display: block; margin-top: 3px; color: var(--muted); font-size: .84rem; line-height: 1.45; } a.dchip { transition: background .18s var(--ease); } a.dchip:hover { background: #fbdcde; } .dnote { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 14px 18px; background: var(--brand-tint); border-radius: var(--r-sm); } .dnote .ico { width: 20px; height: 20px; flex: none; color: var(--brand); } .dnote b { color: var(--ink); font-size: .94rem; font-weight: 600; line-height: 1.45; } .dnote a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .dwarn { margin-top: clamp(24px, 3vw, 36px); padding: clamp(22px, 2.6vw, 32px); background: #fffafa; border: 1.5px solid #f3c6ca; border-radius: var(--r); display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(24px, 3vw, 44px); align-items: start; } .dwarn__head { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; } .dwarn__head .mark { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; } .dwarn__head .mark .ico { width: 18px; height: 18px; } .dwarn__head b { color: var(--ink); font-size: 1.02rem; font-weight: 600; letter-spacing: .04em; } .dwarn__list { display: grid; gap: 18px; } .dwarn__item { display: flex; align-items: flex-start; gap: 14px; } .dwarn__item .ic { width: 42px; height: 42px; flex: none; border-radius: 11px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; } .dwarn__item .ic .ico { width: 20px; height: 20px; } .dwarn__item b { display: block; color: var(--ink); font-size: .94rem; font-weight: 600; } .dwarn__item b + span { display: block; margin-top: 4px; color: var(--ink-2); font-size: .88rem; line-height: 1.6; } .dwarn__text { display: grid; gap: 14px; } .dwarn__text p { margin: 0; color: var(--ink-2); font-size: .88rem; line-height: 1.65; } .dwhy { text-align: center; } .dwhy h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 600; } .dwhy__grid { margin-top: clamp(24px, 3vw, 34px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); text-align: left; } .dwhy__i { display: flex; align-items: center; gap: 14px; } .dwhy__i .ic { width: 54px; height: 54px; flex: none; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; } .dwhy__i .ic .ico { width: 24px; height: 24px; } .dwhy__i b { display: block; color: var(--ink); font-size: .94rem; font-weight: 600; } .dwhy__i small { display: block; margin-top: 3px; color: var(--muted); font-size: .86rem; line-height: 1.45; } @media (max-width: 860px) { .dwarn { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .dwhy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .dstep { padding-left: 0; } .dstep__n { position: static; margin-bottom: 10px; } .dstep__card { grid-template-columns: minmax(0, 1fr); gap: 16px; } .dstep__ic { width: 56px; height: 56px; } .dstep__ic .ico { width: 26px; height: 26px; } .dintro { gap: 14px; } .dintro__ic { width: 48px; height: 48px; } .dintro__ic .ico { width: 22px; height: 22px; } } @media (max-width: 520px) { .dwhy__grid { grid-template-columns: minmax(0, 1fr); } } .acard__img img, .article-line__img img, .acard:hover .acard__img img, .article-line:hover .article-line__img img { filter: contrast(1.03); } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results-button { -webkit-appearance: none; appearance: none; } input[type="search"]::-ms-clear { display: none; } .catbar__search .catbar__clear { flex: none; width: 30px; height: 30px; margin: 0; padding: 0; display: grid; place-items: center; border-radius: 50%; background: transparent; color: var(--faint); transition: background .16s var(--ease), color .16s var(--ease); } .catbar__search .catbar__clear:hover { background: var(--surface-3); color: var(--ink); } .catbar__search .catbar__clear .ico { width: 15px; height: 15px; } .catbar__search .catbar__clear[hidden] { display: none; } @media (max-width: 900px) { .products:not(.is-grid) .product__img { width: 100%; } .products:not(.is-grid) .product__img .badge { white-space: nowrap; font-size: .66rem; padding: 4px 8px; } .products:not(.is-grid) .product__img .ph__kind { font-size: 12px; } .products:not(.is-grid) .product__img .ph__note { font-size: 10px; } } .e404 { position: relative; overflow: hidden; background: var(--surface); } .e404__in { position: relative; z-index: 1; padding-block: clamp(34px, 5vw, 68px); } .e404__num { margin: 0; color: var(--brand); font-size: clamp(4.6rem, 13vw, 10.5rem); font-weight: 800; line-height: .82; letter-spacing: -.055em; } .e404__num span { color: var(--ink); } .e404__title { margin-top: clamp(8px, 1.4vw, 16px); font-size: clamp(1.8rem, 4.4vw, 3.05rem); letter-spacing: -.03em; } .e404__lead { margin-top: 14px; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.08rem); } .e404__note { margin-top: 6px; color: var(--ink); font-weight: 700; } .e404__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vw, 32px); } .e404 .btn--ghost { background: #fff; } .e404 .btn--ghost:hover { background: var(--surface-2); } .e404__chat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; } .e404__msg { padding: 12px 18px; font-size: .95rem; } .e404__msg .ico--brand { width: 22px; height: 22px; border-radius: 6px; } .e404__msg.btn--wa:hover { --bd: #2bb741; } .e404__msg.btn--tg:hover { --bd: #2aabee; } .e404__msg.btn--max:hover { --bd: #5533ee; } .e404__chat-note { color: var(--faint); font-size: .9rem; } .e404__media { margin-top: clamp(22px, 3vw, 30px); } .e404__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 92% 60%; border-radius: var(--r); } @media (min-width: 700px) { .e404__media img { aspect-ratio: 21 / 9; object-position: 85% 60%; } } @media (min-width: 1000px) { .e404__in { display: flex; flex-direction: column; justify-content: center; min-height: clamp(470px, 44vw, 620px); padding-right: min(40%, 480px); } .e404__media { position: absolute; inset: 0 0 0 auto; width: min(64%, 1040px); margin: 0; pointer-events: none; } .e404__media img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 100% 58%; border-radius: 0; } .e404__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .92) 16%, rgba(255, 255, 255, 0) 56%), linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 22%); } } .e404-help { padding-top: clamp(26px, 3.6vw, 44px); } .e404-help__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 18px; margin-bottom: clamp(16px, 2vw, 24px); } .e404-help__head .h-section { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.9rem); } .e404-help__all { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-weight: 600; font-size: .95rem; } .e404-help__all svg { width: 16px; height: 16px; transition: transform .2s var(--ease); } .e404-help__all:hover svg { transform: translateX(3px); } .e404-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } @media (min-width: 700px) { .e404-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1080px) { .e404-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .e404-cats > li { display: grid; } .e404-cat { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .2s; } .e404-cat:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: transparent; } .e404-cat__media { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: var(--surface-2); } .e404-cat__media img { width: 100%; height: 100%; object-fit: cover; } .e404-cat__media svg { width: 26px; height: 26px; color: var(--faint); } .e404-cat__name { color: var(--ink); font-weight: 700; font-size: .98rem; line-height: 1.25; } .e404-cat__count { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .82rem; } .e404-cat__count svg { flex: none; width: 15px; height: 15px; color: var(--brand); transition: transform .2s var(--ease); } .e404-cat:hover .e404-cat__count svg { transform: translateX(3px); } .e404-often { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: clamp(20px, 2.6vw, 30px); } .e404-often > b { color: var(--ink); font-size: 1.02rem; } @media (max-width: 560px) { .e404__lead br { display: none; } .e404__cta .btn { flex: 1 1 100%; justify-content: center; } .e404__cta .btn, .e404__msg { padding: 13px 18px; font-size: .95rem; } .e404__chat-note { flex: 1 1 100%; } } .cartpage { padding-block: clamp(18px, 2.4vw, 30px) clamp(44px, 5vw, 76px); } .cartpage__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px; margin-bottom: clamp(20px, 2.6vw, 30px); } .cartpage__h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); } .cartpage__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(18px, 2.2vw, 30px); align-items: start; } .cartpage__main { min-width: 0; } .cartpage__grid[data-busy] .cartlist, .cartpage__grid[data-busy] .cartsum { opacity: .55; pointer-events: none; } .cartlist, .cartsum { transition: opacity .16s var(--ease); } .cartpage__update { margin-top: 14px; } .cartbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 14px; } .cartbar__all { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: .95rem; cursor: pointer; } .cartbar__del { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--muted); font-size: .92rem; transition: color .18s var(--ease); } .cartbar__del:hover:not(:disabled) { color: var(--brand); } .cartbar__del:disabled { opacity: .45; cursor: default; } .cartbar__del .ico { width: 17px; height: 17px; } .cartbar__all input, .cartrow__pick input { appearance: none; width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; transition: background .16s var(--ease), border-color .16s var(--ease); } .cartbar__all input:hover, .cartrow__pick input:hover { border-color: var(--faint); } .cartbar__all input:checked, .cartbar__all input:indeterminate, .cartrow__pick input:checked { background: var(--brand); border-color: var(--brand); } .cartbar__all input:checked::after, .cartrow__pick input:checked::after { content: ""; width: 11px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); } .cartbar__all input:indeterminate::after { content: ""; width: 11px; height: 2px; border-radius: 2px; background: #fff; } .cartlist { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; } .cartrow { display: grid; grid-template-columns: auto 72px minmax(0, 1fr) auto auto auto; align-items: center; gap: clamp(12px, 1.6vw, 20px); padding: 16px clamp(14px, 1.6vw, 20px); background: #fff; border: 1px solid var(--line); border-radius: var(--r); } .cartrow__pick { display: grid; place-items: center; } .cartrow__media { width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--surface-2); } .cartrow__media img { width: 100%; height: 100%; object-fit: contain; } .cartrow__media .ph { width: 100%; height: 100%; } .cartrow__info { display: grid; gap: 3px; min-width: 0; } .cartrow__name { color: var(--ink); font-weight: 600; font-size: .98rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .18s var(--ease); } a.cartrow__name:hover { color: var(--brand); } .cartrow__art { color: var(--muted); font-size: .84rem; } .cartrow__unit { margin-top: 5px; color: var(--ink); font-size: 1rem; font-weight: 600; } .cartrow__sum { min-width: 96px; text-align: right; color: var(--ink); font-size: 1.02rem; font-weight: 600; white-space: nowrap; } .cartrow__x { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; color: var(--faint); transition: color .18s var(--ease), background .18s var(--ease); } .cartrow__x:hover { color: var(--brand); background: var(--brand-tint); } .cartrow__x .ico { width: 18px; height: 18px; } .cartqty { display: inline-flex; align-items: center; padding: 3px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; } .cartqty__pm { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 6px; color: var(--ink); font-size: 1.05rem; line-height: 1; transition: background .16s var(--ease), color .16s var(--ease); } .cartqty__pm:hover { background: var(--surface-2); color: var(--brand); } .cartqty__n { width: 44px; padding: 0; border: 0; background: transparent; text-align: center; color: var(--ink); font-size: .98rem; font-weight: 600; appearance: textfield; -moz-appearance: textfield; } .cartqty__n::-webkit-outer-spin-button, .cartqty__n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .carttrust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(16px, 2vw, 22px); background: var(--surface-2); border-radius: var(--r); list-style: none; padding: 0; } .carttrust__i { display: flex; align-items: center; gap: 12px; padding: 18px clamp(14px, 1.6vw, 20px); border-right: 1px solid var(--line); } .carttrust__i:last-child { border-right: 0; } .carttrust__ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 11px; background: #fff; color: var(--ink); } .carttrust__ic .ico { width: 20px; height: 20px; } .carttrust__body { display: grid; gap: 2px; min-width: 0; } .carttrust__body b { color: var(--ink); font-size: .94rem; font-weight: 600; } .carttrust__body small { color: var(--muted); font-size: .84rem; line-height: 1.4; } .cartside { position: sticky; top: 18px; } .cartsum { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: clamp(20px, 2.2vw, 26px); } .cartsum__h { font-size: 1.22rem; font-weight: 600; margin-bottom: 18px; } .cartsum__rows { display: grid; gap: 12px; } .cartsum__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .95rem; } .cartsum__row b { color: var(--ink); font-weight: 600; white-space: nowrap; } .cartsum__row b.cartsum__save { color: var(--ok); } .cartsum__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .cartsum__total span { color: var(--ink); font-size: 1.05rem; font-weight: 600; } .cartsum__total b { color: var(--brand); font-weight: 600; white-space: nowrap; font-size: clamp(1.3rem, 2.2vw, 1.6rem); } .cartsum__note { margin-top: 10px; color: var(--muted); font-size: .84rem; line-height: 1.45; } .cartsum__go { margin-top: 18px; } .cartsum__back { display: block; margin-top: 12px; text-align: center; color: var(--muted); font-size: .9rem; transition: color .18s var(--ease); } .cartsum__back:hover { color: var(--brand); } .cartempty { max-width: 560px; margin: clamp(16px, 3vw, 32px) auto; padding: clamp(28px, 4vw, 46px) clamp(20px, 3vw, 32px); text-align: center; background: var(--surface-2); border-radius: var(--r-lg); } .cartempty__ic { width: 74px; height: 74px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--brand); } .cartempty__ic .ico { width: 30px; height: 30px; } .cartempty__h { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 600; } .cartempty__lead { margin-top: 10px; color: var(--muted); font-size: .98rem; } .cartempty__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; } @media (max-width: 980px) { .cartpage__grid { grid-template-columns: minmax(0, 1fr); } .cartside { position: static; } } @media (max-width: 860px) { .carttrust { grid-template-columns: minmax(0, 1fr); } .carttrust__i { border-right: 0; border-bottom: 1px solid var(--line); } .carttrust__i:last-child { border-bottom: 0; } } @media (max-width: 760px) { .cartrow { grid-template-columns: auto 64px minmax(0, 1fr) auto; grid-template-areas: "pick media info x" "pick qty   qty  sum"; row-gap: 14px; } .cartrow__pick { grid-area: pick; align-self: start; padding-top: 6px; } .cartrow__media { grid-area: media; width: 64px; height: 64px; align-self: start; } .cartrow__info { grid-area: info; } .cartrow__x { grid-area: x; align-self: start; } .cartqty { grid-area: qty; justify-self: start; } .cartrow__sum { grid-area: sum; align-self: center; } } @media (max-width: 620px) { .cartpage__head { align-items: flex-start; flex-direction: column; } } @media (max-width: 460px) { .cartrow { grid-template-columns: auto 56px minmax(0, 1fr) auto; gap: 12px 10px; padding: 14px 12px; } .cartrow__media { width: 56px; height: 56px; } .cartrow__name { font-size: .92rem; } .cartrow__unit { font-size: .95rem; } .cartrow__sum { min-width: 0; font-size: .96rem; } .cartempty__cta .btn { width: 100%; } } [hidden] { display: none !important; } .copage { padding-block: clamp(18px, 2.4vw, 30px) clamp(44px, 5vw, 76px); } .copage__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px; margin-bottom: clamp(20px, 2.6vw, 30px); } .copage__h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); } .costeps { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; list-style: none; margin: 0; padding: 0; } .costeps__i { display: flex; align-items: center; gap: 9px; } .costeps__i a { display: flex; align-items: center; gap: 9px; } .costeps__i a:hover .costeps__lbl { color: var(--brand); } .costeps__n { width: 27px; height: 27px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--faint); font-size: .8rem; font-weight: 700; line-height: 1; } .costeps__n .ico { width: 14px; height: 14px; } .costeps__i.is-done .costeps__n { background: var(--surface-3); color: var(--ink); } .costeps__i.is-now .costeps__n { background: var(--brand); color: #fff; } .costeps__lbl { color: var(--muted); font-size: .92rem; transition: color .18s var(--ease); } .costeps__i.is-now .costeps__lbl { color: var(--ink); font-weight: 600; } .costeps__sep { display: grid; place-items: center; color: var(--faint); } .costeps__sep .ico { width: 15px; height: 15px; } .cogrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(18px, 2.2vw, 30px); align-items: start; } .cogrid__main { display: grid; gap: clamp(12px, 1.4vw, 16px); min-width: 0; } .cogrid__side { position: sticky; top: 18px; display: grid; gap: 16px; } .woocommerce-checkout .blockUI.blockOverlay { background: #fff !important; opacity: .6 !important; } .cocard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(18px, 2vw, 24px); } .cocard__h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 1.06rem; font-weight: 600; } .cocard__n { width: 27px; height: 27px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font-size: .82rem; font-weight: 700; line-height: 1; } .cofields { display: grid; gap: 14px; } .cofields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cofield { position: relative; margin: 0; } .cofield input { width: 100%; padding: 15px 15px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink); font-size: .97rem; transition: border-color .2s var(--ease), box-shadow .2s; } .cofield input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); outline: none; } .cofield label { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); padding-inline: 5px; background: #fff; color: var(--muted); font-size: .97rem; line-height: 1; pointer-events: none; transition: top .16s var(--ease), font-size .16s var(--ease), color .16s var(--ease); } .cofield input:focus + label, .cofield input:not(:placeholder-shown) + label { top: 0; font-size: .74rem; font-weight: 500; color: var(--faint); } .cofield input:focus + label { color: var(--brand); } .cofield.woocommerce-invalid input { border-color: var(--brand); background: #fff6f6; } .cohint { margin-top: 8px; color: var(--muted); font-size: .84rem; } .coopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; } .coopts--pay { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .coopt { position: relative; } .coopt > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; appearance: none; pointer-events: none; } .coopt > label { position: relative; display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 38px 14px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease); } .coopt:hover > label { border-color: var(--faint); } .coopt:has(input:checked) > label { border-color: var(--brand); background: var(--brand-tint); } .coopt:has(input:focus-visible) > label { outline: 3px solid rgba(227, 6, 19, .45); outline-offset: 2px; } .coopt__ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--ink); transition: background .18s var(--ease), color .18s var(--ease); } .coopt__ic .ico { width: 20px; height: 20px; } .coopt:has(input:checked) .coopt__ic { background: #fff; color: var(--brand); } .coopt__body { display: grid; gap: 2px; min-width: 0; } .coopt__body b { color: var(--ink); font-size: .94rem; font-weight: 600; } .coopt__body small { color: var(--muted); font-size: .8rem; line-height: 1.4; } .coopt__price { margin-top: 3px; color: var(--ink); font-size: .82rem; font-weight: 600; } .coopt:has(input:checked) .coopt__price { color: var(--brand); } .coopt__mark { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; opacity: 0; transform: scale(.7); transition: opacity .16s var(--ease), transform .16s var(--ease); } .coopt__mark .ico { width: 12px; height: 12px; } .coopt:has(input:checked) .coopt__mark { opacity: 1; transform: none; } .conote { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted); font-size: .88rem; line-height: 1.5; list-style: none; } .conote .ico { width: 17px; height: 17px; margin-top: 2px; color: var(--faint); } .copoint { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--r-sm); background: var(--surface-2); } .copoint__ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #fff; color: var(--brand); } .copoint__ic .ico { width: 20px; height: 20px; } .copoint__body { display: grid; gap: 3px; min-width: 0; } .copoint__body b { color: var(--ink); font-size: .96rem; font-weight: 600; } .copoint__body small { color: var(--muted); font-size: .86rem; line-height: 1.5; } .copoint__body a { color: var(--brand); font-weight: 600; white-space: nowrap; } .cocomment { margin-top: 14px; } .cocomment summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--r-sm); color: var(--muted); font-size: .92rem; cursor: pointer; list-style: none; transition: border-color .18s var(--ease), color .18s var(--ease); } .cocomment summary::-webkit-details-marker { display: none; } .cocomment summary:hover { border-color: var(--faint); color: var(--ink); } .cocomment summary .ico { width: 17px; height: 17px; color: var(--faint); transition: transform .18s var(--ease); } .cocomment[open] summary .ico { transform: rotate(90deg); } .cocomment textarea { width: 100%; margin-top: 10px; min-height: 92px; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink); font-size: .95rem; resize: vertical; } .cocomment textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); outline: none; } .copay__update { margin-top: 14px; } .coconsent { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; } .coconsent input { appearance: none; width: 22px; height: 22px; flex: none; display: grid; place-items: center; margin-top: 1px; border: 1.5px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; transition: background .16s var(--ease), border-color .16s var(--ease); } .coconsent input:hover { border-color: var(--faint); } .coconsent input:checked { background: var(--brand); border-color: var(--brand); } .coconsent input:checked::after { content: ""; width: 11px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); } .coconsent.woocommerce-invalid input { border-color: var(--brand); background: #fff6f6; } .coconsent label { color: var(--muted); font-size: .86rem; line-height: 1.5; cursor: pointer; } .coconsent a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } .cosubmit { position: relative; margin-top: 16px; } .cosubmit__btn { padding-inline: 46px; } .cosubmit__lock { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); display: grid; place-items: center; color: rgba(255, 255, 255, .85); pointer-events: none; } .cosubmit__lock .ico { width: 17px; height: 17px; } .cosubmit__note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; color: var(--muted); font-size: .86rem; } .cosubmit__note .ico { width: 16px; height: 16px; color: var(--ok); } .cosum { background: #fff; border-color: var(--line); box-shadow: var(--sh-1); } .colines { display: grid; gap: 14px; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--line); list-style: none; } .coline { display: grid; grid-template-columns: 44px 22px minmax(0, 1fr) auto; align-items: start; gap: 10px; } .coline__media { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: var(--surface-2); } .coline__media img { width: 100%; height: 100%; object-fit: contain; } .coline__media .ph { width: 100%; height: 100%; } .coline__media .ph__note { display: none; } .coline__media .ph__kind { font-size: 9px; } .coline__qty { width: 22px; height: 22px; display: grid; place-items: center; margin-top: 11px; border-radius: 50%; background: var(--dark); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1; } .coline__body { display: grid; gap: 2px; min-width: 0; } .coline__name { color: var(--ink); font-size: .88rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .coline__art { color: var(--faint); font-size: .78rem; } .coline__sum { color: var(--ink); font-size: .9rem; font-weight: 600; white-space: nowrap; text-align: right; } .cartsum__row b.cartsum__quote { color: var(--muted); font-weight: 500; font-size: .86rem; white-space: normal; text-align: right; max-width: 14ch; } .cosafe { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .cosafe__ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--ok-tint); color: var(--ok); } .cosafe__ic .ico { width: 19px; height: 19px; } .cosafe > span:last-child { display: grid; gap: 2px; min-width: 0; } .cosafe b { color: var(--ink); font-size: .88rem; font-weight: 600; } .cosafe small { color: var(--muted); font-size: .8rem; line-height: 1.4; } .carttrust--side { grid-template-columns: minmax(0, 1fr); margin-top: 0; } .carttrust--side .carttrust__i { padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--line); } .carttrust--side .carttrust__i:last-child { border-bottom: 0; } .cogrid__side .cartsum__back { margin-top: 0; } @media (max-width: 980px) { .cogrid { grid-template-columns: minmax(0, 1fr); } .cogrid__side { position: static; } } @media (max-width: 620px) { .copage__head { align-items: flex-start; flex-direction: column; } .cofields--2 { grid-template-columns: minmax(0, 1fr); } .coopts, .coopts--pay { grid-template-columns: minmax(0, 1fr); } .costeps__lbl { font-size: .86rem; } } .copage--done { max-width: none; } .copage--done .woocommerce-order { max-width: 760px; } .woocommerce-thankyou-order-received, .woocommerce-notice--success { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 16px 20px; border-radius: var(--r); background: var(--ok-tint); color: var(--ok); font-weight: 600; } .woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin: 0 0 22px; padding: 0; overflow: hidden; border-radius: var(--r); background: var(--line); list-style: none; } .woocommerce-order-overview li { display: grid; gap: 4px; padding: 16px 18px; background: #fff; color: var(--muted); font-size: .84rem; } .woocommerce-order-overview li strong { color: var(--ink); font-size: 1rem; font-weight: 600; } .woocommerce-order h2, .woocommerce-order h3 { margin: 26px 0 14px; font-size: 1.12rem; font-weight: 600; } .woocommerce-order table { width: 100%; border: 1px solid var(--line); border-radius: var(--r); border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: .93rem; } .woocommerce-order table th, .woocommerce-order table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line-2); } .woocommerce-order table thead th { background: var(--surface-2); color: var(--ink); font-weight: 600; } .woocommerce-order table tfoot th { color: var(--muted); font-weight: 500; } .woocommerce-order table td:last-child, .woocommerce-order table th:last-child { text-align: right; white-space: nowrap; } .woocommerce-order table tfoot tr:last-child th, .woocommerce-order table tfoot tr:last-child td { border-bottom: 0; color: var(--ink); font-weight: 700; } .woocommerce-order table a { color: var(--ink); } .woocommerce-order table a:hover { color: var(--brand); } .woocommerce-customer-details .woocommerce-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); } .woocommerce-customer-details address { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); font-style: normal; color: var(--ink-2); line-height: 1.7; } .foot__col .foot__ctitle { margin: 0 0 16px; color: #fff; font-size: .82rem; font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; } .sng-captcha { margin: 14px 0 4px; min-height: 100px; } .sng-captcha:empty { min-height: 0; } .cookiebar { position: fixed; inset: auto 0 0 0; z-index: 60; background: #16181d; color: rgba(255, 255, 255, .82); border-top: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 -8px 24px rgba(0, 0, 0, .28); } .cookiebar[hidden] { display: none; } .cookiebar__in { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 0; } .cookiebar__text { margin: 0; flex: 1 1 320px; font-size: .88rem; line-height: 1.5; } .cookiebar__text a { color: #fff; text-decoration: underline; } .cookiebar .btn { flex: 0 0 auto; } @media (max-width: 860px) { .cookiebar { bottom: 64px; } .cookiebar__in { padding: 12px 0; gap: 12px; } } .coconsent + .coconsent { margin-top: 8px; } .stagingbar { position: relative; z-index: 70; padding: 7px 16px; background: #9A5A00; color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-align: center; } @media (max-width: 700px) { input[type="text"], input[type="tel"], input[type="email"], input[type="search"], input[type="number"], input[type="password"], textarea, select, .field input, .field textarea, .field select, .cofield input, .cocomment textarea, .catbar__search input, .search input, .select select { font-size: 16px; } } .product { border-radius: var(--r); border-color: var(--line); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .product:hover { border-color: #cfd3da; box-shadow: var(--sh-2); } .product__img, .products.is-grid .product__img { background: #fff; } .products:not(.is-grid) .product__img { border: 0; border-radius: 8px; } .products:not(.is-grid) .product__img img { padding: 0; } .products.is-grid .product__img { border-bottom: 1px solid var(--line-2); } .products.is-grid .product__img img { padding: 12px; } .product__img .badge { padding: 3px 8px; font-size: .68rem; letter-spacing: .02em; border-radius: 6px; } .product__img .product__stock { top: 6px; left: 6px; } .products.is-grid .product__img .product__stock { top: 10px; left: 10px; } .product__brand { font-size: .6rem; letter-spacing: .08em; margin-bottom: 3px; opacity: .85; } .product__name { font-weight: 500; font-size: .98rem; } .product__art { margin-top: 6px; font-size: .86rem; display: block; } .product__art .ico { display: none; } .product__art b { font-size: 1em; font-weight: 500; color: var(--ink-2); } .product__price .amt { font-size: 1.18rem; font-weight: 600; } .product__pricelbl { font-size: .72rem; } .product__actions .btn--primary, .product__actions .cartctl__add { box-shadow: none; } .product__actions .btn { padding: 8px 14px; font-size: .84rem; border-radius: 8px; } .product__actions .btn--oneclick { --bd: transparent; --bg: transparent; padding: 4px 0; font-size: .8rem; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; } .product__actions .btn--oneclick:hover { --bg: transparent; color: var(--brand); text-decoration-color: var(--brand); } .product__actions { gap: 6px; } .products.is-grid .product__actions { gap: 6px; } .products:not(.is-grid) .product { padding: 14px 18px; gap: 18px; } .products:not(.is-grid) .product__img { width: 120px; height: 90px; } .products:not(.is-grid) .product { grid-template-columns: 120px 1fr 140px 200px; } .products:not(.is-grid) .product--post { grid-template-columns: minmax(0, 1fr); } @media (max-width: 900px) { .products:not(.is-grid) .product { grid-template-columns: 100px minmax(0, 1fr); } .products:not(.is-grid) .product--post { grid-template-columns: minmax(0, 1fr); } .products:not(.is-grid) .product__img { width: 100%; } .products:not(.is-grid) .product__price { justify-content: flex-start; } } .sng-spec-photo { border: 0; box-shadow: none; background: #fff; } .sng-spec-photo .diagram__stage { background: #fff; } .spec__gallery { gap: 8px; margin-top: 12px; } .spec__gallery button { width: 60px; height: 50px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; } .spec__gallery button[aria-pressed="true"] { border-color: var(--ink); } .spec__gallery button img { padding: 4px; } .spec__head h1 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-weight: 600; letter-spacing: -.01em; } .spec__meta { margin-top: 12px; gap: 12px; } .badge--sku { background: transparent; padding: 0; color: var(--muted); font-size: .92rem; } .badge--sku b { font-size: 1em; color: var(--ink); } .spec__meta .badge--stock { padding: 3px 8px; font-size: .68rem; font-weight: 400; border-radius: 6px; } .spec__chips { margin-top: 12px; gap: 6px 22px; } .spec__chip { font-size: .88rem; } .spec__chip b { font-weight: 500; } .sng-buy { margin-top: 18px; padding: 18px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent; } .sng-buy .price { font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 1.8rem); } .sng-buy .single_add_to_cart_button, .sng-buy .btn--primary { box-shadow: none; font-weight: 500; } .sng-buy__row { gap: 8px; } .sng-buy__row .btn { flex: 0 1 auto; } .sng-buy__cart .btn--oneclick, .sng-buy__row .btn--oneclick { --bd: transparent; --bg: transparent; padding: 6px 0; margin-right: 6px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; } .sng-buy__row .btn--oneclick:hover { --bg: transparent; color: var(--brand); text-decoration-color: var(--brand); } .btn--ask { --fg: var(--ink-2); --bd: var(--line); padding: 7px 12px; font-size: .82rem; border-radius: 8px; } .btn--ask:hover { --bg: var(--surface-2); --bd: #cfd3da; } .spec__terms { margin-top: 18px; gap: 8px; } .spec__terms li { font-size: .84rem; } .spec__terms b { font-weight: 500; } .spec__terms .ico { color: var(--faint); } .pagehead:not(.pagehead--photo) .pagehead__bg::after { background: linear-gradient(90deg, rgba(17, 18, 22, .68) 0, rgba(17, 18, 22, .68) calc(50% - 640px), rgba(17, 18, 22, .46) calc(50% - 205px), rgba(17, 18, 22, .14) calc(50% + 155px), rgba(17, 18, 22, 0) calc(50% + 410px)); } .pagehead:not(.pagehead--photo)::before { content: none; } .pagehead:not(.pagehead--photo) h1, .pagehead:not(.pagehead--photo) p { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); } @media (max-width: 860px) { .pagehead:not(.pagehead--photo) .pagehead__bg::after { background: linear-gradient(180deg, rgba(17, 18, 22, .6) 0%, rgba(17, 18, 22, .5) 100%); } } .pagehead:not(.pagehead--photo) { display: flex; flex-direction: column; justify-content: center; min-height: 340px; } @media (max-width: 860px) { .pagehead:not(.pagehead--photo) { min-height: 240px; } }