/**/ /**/ @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/v2/fonts/GoogleSansFlex-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: 'Google Sans Flex'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/v2/fonts/GoogleSansFlex-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 { /**/ --gb-green: #258f1e; /**/ --gb-green-2: #1e7218; /**/ --gb-green-tint: #e9f4e9; /**/ --gb-green-tint-2: #bbdcb9; /**/ --gb-navy: #092857; /**/ --gb-navy-2: #072046; /**/ --gb-navy-3: #051834; /**/ --gb-navy-line: #111d47; /**/ --gb-navy-tint: #e6eaee; /**/ --gb-navy-mut: #b3bccb; /**/ /**/ --gb-ink: #1d242d; /**/ --gb-ink-2: #47586e; /**/ --gb-ink-inv: #d9dde3; /**/ --gb-mut-inv: #a3adbb; /**/ /**/ --gb-err: #ff412c; --gb-err-ink: #c0200e; /**/ --gb-warn: #cca61e; --gb-warn-bg: #fffae9; --gb-warn-bd: #fff0bb; --gb-warn-strong: #ffcf25; /**/ --gb-info: #1443ff; --gb-info-bg: #e8ecff; --gb-promo: #b03b5e; --gb-promo-bg: #f7ebef; --gb-star: #ffcf25; /**/ --gb-bg: #ffffff; --gb-bg-2: #fefefd; --gb-bg-4: #fbfbf8; /**/ --gb-line-3: #f3f1e7; /**/ --gb-line-4: #dbd9d0; /**/ /**/ --gb-r-sm: 5px; --gb-r-md: 15px; --gb-r-lg: 35px; --gb-r-pill: 999px; --gb-sp-xs: 5px; --gb-sp-sm: 10px; --gb-sp-md: 15px; --gb-sp-lg: 20px; --gb-sp-xl: 40px; --gb-sp-2xl: 60px; --gb-sp-3xl: 80px; --gb-shadow-sm: 0 2px 3px rgba(0, 0, 0, .04); /**/ --gb-z-drop: 70; --gb-z-modal: 90; /**/ --gb-shadow-drop: 0 12px 28px rgba(9, 40, 87, .18); /**/ --gb-font: 'Google Sans Flex', 'Segoe UI', Roboto, Arial, sans-serif; --gb-fs-input: 16px; --gb-fs-xxs: 12px; --gb-lh-xxs: 16.2px; --gb-fs-xs: 14px; --gb-lh-xs: 23.8px; --gb-fs-sm: 16px; --gb-lh-sm: 27.2px; --gb-lh-sm-tight: 21.6px; --gb-fs-lg: 20px; --gb-lh-lg: 34px; --gb-fs-xl: 24px; --gb-lh-xl: 32.4px; --gb-fs-2xl: 32px; --gb-lh-2xl: 54.4px; --gb-container: 1440px; --gb-gutter: 40px; } /**/ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--gb-font); font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm); color: var(--gb-ink); background: var(--gb-bg); } img, svg, video { display: block; max-width: 100%; } /**/ img { object-fit: contain; object-position: center; } /**/ .gb-mega__brands img, .gb-mnav__brands img, .gb-chip img, .gb-tile img, .gb-card__img img, .hp-cat__img img, .pl-subcats img, .pl-brand img, .vl__logo img, .pd-gallery__main img, .pd-gallery__thumbs img, .pd-colors a img, .pd-anchors__prod img, .gb-split__thumb, .bk-item__img img, .gb-cartdrop__thumb img, .gb-sg-item img { mix-blend-mode: multiply; } .gb-img-cover { object-fit: cover; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, select, textarea { font: inherit; } h1, h2, h3, h4, p, ul, ol, figure { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--gb-info); outline-offset: 2px; } /**/ [hidden] { display: none !important; } .gb-container { max-width: var(--gb-container); margin-inline: auto; padding-inline: var(--gb-gutter); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gb-bg); color: var(--gb-navy); padding: 10px 15px; } .skip-link:focus { left: 0; } /**/ .ico { width: 24px; height: 24px; flex: none; fill: currentColor; stroke: none; } .ico--sm { width: 16px; height: 16px; } /**/ .gb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gb-sp-sm); min-height: 44px; padding: 0 var(--gb-sp-lg); border-radius: var(--gb-r-sm); font-weight: 600; font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); text-decoration: none; white-space: nowrap; } .gb-btn--cta { background: var(--gb-green); color: #fff; border-radius: var(--gb-r-pill); min-height: 42px; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); text-transform: uppercase; letter-spacing: .02em; } .gb-btn--cta:hover { background: var(--gb-green-2); } .gb-btn--navy { background: var(--gb-navy); color: #fff; } .gb-btn--navy:hover { background: var(--gb-navy-2); } /**/ .gb-btn--light { background: #fff; color: var(--gb-navy); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-pill); } .gb-btn--light:hover { background: var(--gb-bg-4); border-color: var(--gb-navy-mut); } /**/ .gb-btn[disabled] { opacity: .6; cursor: default; } .gb-btn--block { width: 100%; } /**/ .gb-btn--google { background: #fff; color: #1f1f1f; border: 1px solid #747775; border-radius: var(--gb-r-pill); font-weight: 500; } .gb-btn--google:hover { background: #f8f9fa; color: #1f1f1f; } .gb-btn--google:focus-visible { outline: 2px solid var(--gb-navy); outline-offset: 2px; } .gb-btn--google svg { width: 18px; height: 18px; flex: none; } .gb-or { display: flex; align-items: center; gap: var(--gb-sp-sm); color: var(--gb-ink-2); font-size: var(--gb-fs-xxs); margin: var(--gb-sp-sm) 0; } .gb-or::before, .gb-or::after { content: ""; flex: 1; border-top: 1px solid var(--gb-line-4); } .gb-google-terms { margin: var(--gb-sp-xs) 0 0; color: var(--gb-ink-2); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); } /**/ .ac-google { display: grid; gap: var(--gb-sp-sm); justify-items: start; margin-top: var(--gb-sp-sm); } .ac-google__title { margin: 0; font-size: var(--gb-fs-sm); } .ac-google__row { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-sm); flex-wrap: wrap; width: 100%; } .ac-google__who { overflow-wrap: anywhere; } .ac-google__move { width: 100%; } .ac-google__move p { margin: 0 0 var(--gb-sp-sm); } .gb-btn--sm { min-height: 36px; padding: 0 var(--gb-sp-md); font-size: var(--gb-fs-xxs); } .gb-icon-btn { display: inline-flex; align-items: center; justify-content: center; position: relative; /**/ width: 44px; height: 44px; flex: none; border: 1px solid var(--gb-navy-mut); border-radius: 50%; color: #fff; } .gb-icon-btn:hover { background: rgba(255, 255, 255, .12); } /**/ .gb-dot { position: absolute; right: -2px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--gb-green); } /**/ .gb-topbar { background: var(--gb-warn-bg); color: var(--gb-ink); border-bottom: 1px solid var(--gb-warn-bd); min-height: 30px; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); display: flex; align-items: center; justify-content: center; text-align: center; padding: 3px var(--gb-sp-md); } /**/ /**/ .gb-header { background: var(--gb-navy); color: #fff; position: relative; } .gb-header__in { display: flex; align-items: center; height: 92px; } .gb-logo { flex: none; display: block; } .gb-logo img, .gb-logo svg { height: 44px; width: auto; } .gb-logo__dark { display: none; } /**/ .gb-search { display: flex; align-items: stretch; /**/ flex: 1 1 auto; min-width: 0; max-width: 690px; height: 44px; margin-left: clamp(20px, 7.85vw, 113px); margin-right: clamp(16px, 4.17vw, 60px); } .gb-search input { flex: 1 1 auto; min-width: 0; border: 0; border-radius: var(--gb-r-pill) 0 0 var(--gb-r-pill); background: #fff; color: var(--gb-ink); padding: 0 var(--gb-sp-lg); font-size: var(--gb-fs-input); /**/ line-height: var(--gb-lh-sm-tight); } .gb-search input::placeholder { color: var(--gb-mut-inv); } .gb-search input::-webkit-search-cancel-button { -webkit-appearance: none; } .gb-search button { flex: none; width: 60px; display: flex; align-items: center; justify-content: center; background: var(--gb-navy-tint); color: var(--gb-navy); border-radius: 0 var(--gb-r-pill) var(--gb-r-pill) 0; } .gb-search button:hover { background: var(--gb-navy-mut); } .gb-actions { display: flex; align-items: center; gap: var(--gb-sp-lg); flex: none; margin-left: auto; } .gb-actions__icons { display: flex; gap: var(--gb-sp-xs); } /**/ .gb-cart { position: relative; min-width: 150px; } .gb-cart__count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; background: #fff; color: var(--gb-navy); border-radius: var(--gb-r-pill); font-size: var(--gb-fs-xxs); line-height: 20px; font-weight: 600; text-align: center; } /**/ .gb-nav { background: var(--gb-navy-2); position: relative; box-shadow: inset 0 1px 0 var(--gb-navy-3); /**/ } .gb-nav__in { display: flex; align-items: stretch; height: 50px; } /**/ .gb-nav__list { display: flex; align-items: stretch; gap: var(--gb-sp-xs); min-width: 0; overflow-x: auto; scrollbar-width: none; } .gb-nav__list::-webkit-scrollbar { display: none; } .gb-nav__link { white-space: nowrap; } .gb-nav__item { display: flex; } .gb-nav__link { display: flex; align-items: center; gap: var(--gb-sp-xs); padding: 0 var(--gb-sp-md); color: #fff; text-decoration: none; font-size: var(--gb-fs-xs); line-height: 24px; font-weight: 600; text-transform: uppercase; } .gb-nav__link .ico { width: 16px; height: 16px; transition: transform .15s; } .gb-nav__item > .gb-nav__link { border-radius: var(--gb-r-md) var(--gb-r-md) 0 0; } .gb-nav__item:hover > .gb-nav__link { background: var(--gb-navy-3); } .gb-nav__item.is-open > .gb-nav__link { background: var(--gb-bg-4); color: var(--gb-ink); } .gb-nav__item.is-open > .gb-nav__link .ico { transform: rotate(180deg); } .gb-nav__aux { margin-left: auto; display: flex; align-items: stretch; } .gb-nav__aux a { display: flex; align-items: center; padding: 0 var(--gb-sp-lg); color: #fff; text-decoration: none; font-size: var(--gb-fs-xs); line-height: 24px; font-weight: 400; } .gb-nav__aux a:hover { background: var(--gb-navy-3); } /**/ .gb-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--gb-bg-4); box-shadow: 0 20px 30px rgba(9, 40, 87, .18); display: none; } .gb-nav__item.is-open .gb-mega { display: block; } /**/ .gb-mega__wrap { position: relative; } .gb-mega__in { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: var(--gb-sp-2xl); padding-top: var(--gb-sp-xl); padding-bottom: var(--gb-sp-lg); } .gb-mega__title { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; color: var(--gb-ink); } .gb-mega__title a { color: inherit; text-underline-offset: 4px; } .gb-mega__grid { margin-top: var(--gb-sp-lg); display: grid; grid-template-columns: repeat(auto-fill, minmax(295px, 1fr)); gap: var(--gb-sp-sm) var(--gb-sp-md); /**/ } .gb-tile { display: flex; align-items: center; gap: var(--gb-sp-md); min-height: 95px; padding: var(--gb-sp-sm) var(--gb-sp-md); background: var(--gb-bg); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); box-shadow: var(--gb-shadow-sm); text-decoration: none; color: var(--gb-ink); } .gb-tile:hover { border-color: var(--gb-line-4); box-shadow: 0 4px 10px rgba(0, 0, 0, .08); } .gb-tile img { width: 70px; height: 70px; object-fit: contain; flex: none; } .gb-tile__name { font-weight: 600; font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); } .gb-mega__aside { padding-top: var(--gb-sp-md); } /**/ .gb-mega__aside > a, .gb-mega__all { display: flex; align-items: center; gap: var(--gb-sp-sm); min-height: 51px; color: var(--gb-navy); font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); text-decoration: underline; text-underline-offset: 3px; } .gb-mega__aside .ico { color: var(--gb-green); } /**/ .gb-mega__linkgroup + .gb-mega__linkgroup { margin-top: var(--gb-sp-lg); } .gb-mega__linktitle { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; color: var(--gb-ink); margin-bottom: var(--gb-sp-xs); } .gb-mega__linkgroup ul { list-style: none; margin: 0; padding: 0; } .gb-mega__linkgroup a { display: flex; align-items: center; gap: var(--gb-sp-sm); min-height: 34px; color: var(--gb-navy); font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 400; text-decoration: none; } .gb-mega__linkgroup a:hover { text-decoration: underline; text-underline-offset: 3px; } .gb-mega__close { position: absolute; top: var(--gb-sp-xl); right: var(--gb-gutter); color: var(--gb-ink-2); width: 24px; height: 24px; } .gb-mega__brands { border-top: 1px dashed var(--gb-line-4); } /**/ /**/ .gb-mega__brands ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); align-items: center; gap: var(--gb-sp-sm); padding-block: var(--gb-sp-lg); } .gb-mega__brands a { display: flex; align-items: center; justify-content: center; height: 70px; } .gb-mega__brands img { max-height: 40px; max-width: 84px; width: auto; } /**/ .gb-drop { position: relative; display: flex; } .gb-drop__panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--gb-z-drop); min-width: 320px; background: var(--gb-bg); color: var(--gb-ink); border-radius: var(--gb-r-md); box-shadow: var(--gb-shadow-drop); overflow: hidden; text-align: left; } /**/ .gb-accdrop { padding-block: var(--gb-sp-xs); } .gb-accdrop__head { padding: var(--gb-sp-sm) var(--gb-sp-md); border-bottom: 1px solid var(--gb-line-3); } .gb-accdrop__head strong { display: block; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; } .gb-accdrop__head span { display: block; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); overflow-wrap: anywhere; } /**/ .gb-accdrop a:not(.gb-btn), .gb-accdrop button:not(.gb-btn) { display: flex; align-items: center; gap: var(--gb-sp-sm); width: 100%; min-height: 44px; padding: 0 var(--gb-sp-md); color: var(--gb-ink); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); text-decoration: none; text-align: left; } .gb-accdrop a:not(.gb-btn):hover, .gb-accdrop button:not(.gb-btn):hover { background: var(--gb-bg-4); } .gb-accdrop .ico { width: 18px; height: 18px; color: var(--gb-ink-2); } .gb-accdrop__list { margin: 0; } /**/ .gb-accdrop a.gb-accdrop__logout { color: var(--gb-ink-2); border-top: 1px solid var(--gb-line-3); margin-top: var(--gb-sp-xs); } .gb-accdrop__auth { display: grid; gap: var(--gb-sp-sm); padding: var(--gb-sp-md); } .gb-accdrop__auth .gb-btn { width: 100%; } /**/ .gb-cartdrop { width: 380px; } .gb-cartdrop__list { margin: 0; padding: 0; list-style: none; max-height: min(70vh, 560px); overflow-y: auto; } .gb-cartdrop__item { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: var(--gb-sp-md); padding: var(--gb-sp-sm) var(--gb-sp-md); border-bottom: 1px solid var(--gb-line-3); } .gb-cartdrop__thumb { width: 60px; height: 60px; display: block; } .gb-cartdrop__thumb img { width: 100%; height: 100%; } .gb-cartdrop__info { min-width: 0; } .gb-cartdrop__name { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; color: var(--gb-ink); text-decoration: none; } .gb-cartdrop__var, .gb-cartdrop__qty { display: block; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); } .gb-cartdrop__side { display: flex; align-items: center; gap: var(--gb-sp-sm); } .gb-cartdrop__price { text-align: right; font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-promo); } .gb-cartdrop__del { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; color: var(--gb-ink-2); border-radius: 50%; } .gb-cartdrop__del:hover { background: var(--gb-bg-4); color: var(--gb-err); } .gb-cartdrop__del .ico { width: 18px; height: 18px; } /**/ .gb-cartdrop__ship { display: flex; align-items: center; gap: var(--gb-sp-sm); padding: var(--gb-sp-sm) var(--gb-sp-md); background: var(--gb-green-tint); color: var(--gb-green-2); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); font-weight: 600; } .gb-cartdrop__ship .ico { width: 20px; height: 20px; flex: none; } .gb-cartdrop__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-sm); padding: var(--gb-sp-md); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .gb-cartdrop__total strong { font-size: var(--gb-fs-lg); line-height: 1.2; font-weight: 600; } .gb-cartdrop__foot { padding: 0 var(--gb-sp-md) var(--gb-sp-md); } .gb-cartdrop__foot .gb-btn { width: 100%; } .gb-cartdrop__empty { margin: var(--gb-sp-md); padding: var(--gb-sp-md); background: var(--gb-info-bg); color: var(--gb-info); border-radius: var(--gb-r-sm); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } /**/ .gb-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--gb-z-drop); background: var(--gb-bg-4); box-shadow: 0 20px 30px rgba(9, 40, 87, .18); color: var(--gb-ink); max-height: 78vh; overflow-y: auto; } /**/ .gb-suggest__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gb-sp-xl); padding-block: var(--gb-sp-lg); } .gb-suggest__in:has(.gb-suggest__main):has(.gb-suggest__aside) { grid-template-columns: minmax(0, 1fr) 320px; } /**/ .gb-suggest__main + .gb-suggest__aside { border-left: 1px dashed var(--gb-line-4); padding-left: var(--gb-sp-xl); } .gb-suggest__title { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; margin-bottom: var(--gb-sp-sm); } /**/ .gb-suggest__group + .gb-suggest__group { margin-top: var(--gb-sp-lg); } /**/ .gb-suggest__main, .gb-sg-item__info { min-width: 0; } .gb-suggest__loading { grid-column: 1 / -1; padding-block: var(--gb-sp-lg); color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .gb-suggest__all { grid-column: 1 / -1; display: flex; justify-content: center; } /**/ .gb-suggest__all a.is-active { background: var(--gb-navy-2); outline: 2px solid var(--gb-info); outline-offset: 2px; } .gb-suggest__empty { grid-column: 1 / -1; padding-block: var(--gb-sp-lg); color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .gb-sg-item { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: var(--gb-sp-md); min-height: 76px; padding: var(--gb-sp-sm) var(--gb-sp-md); background: var(--gb-bg); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); color: var(--gb-ink); text-decoration: none; } .gb-sg-item + .gb-sg-item { margin-top: var(--gb-sp-sm); } .gb-sg-item picture, .gb-sg-item__pic { display: block; width: 60px; height: 60px; } .gb-sg-item img { width: 100%; height: 100%; } .gb-sg-item__name { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 400; } /**/ .gb-sg-hl { font-weight: 600; } /**/ .gb-sg-badge { display: inline-block; margin: 0 6px 1px 0; padding: 1px 7px; border-radius: 999px; vertical-align: 1px; white-space: nowrap; font-size: 11px; line-height: 16px; font-weight: 700; background: var(--gb-navy); color: #fff; } .gb-sg-badge--sale { background: var(--gb-promo); } .gb-sg-badge--clearance { background: var(--gb-promo-bg); color: var(--gb-promo); } .gb-sg-badge--used { background: #f7e7d4; color: #8a4b0f; } @media (max-width: 767px) { .gb-sg-badge:not(.gb-sg-badge--used) { display: none; } } /**/ .gb-sg-item__stock { display: block; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); } .gb-sg-item__stock--available { color: var(--gb-green-2); } .gb-sg-item__stock--onway { color: var(--gb-warn); } .gb-sg-item__stock--unavailable { color: var(--gb-ink-2); } .gb-sg-item__prices { text-align: right; } .gb-sg-item__list { display: block; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); text-decoration: line-through; } .gb-sg-item__price { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; color: var(--gb-promo); } .gb-sg-item:hover, .gb-sg-item.is-active { background: var(--gb-bg-4); border-color: var(--gb-line-4); } .gb-suggest__chips { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm); } .gb-chip { display: inline-flex; align-items: center; gap: var(--gb-sp-sm); padding: 6px 12px; background: var(--gb-bg); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); color: var(--gb-ink); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); text-decoration: none; } .gb-chip:hover, .gb-chip.is-active { background: var(--gb-bg-4); border-color: var(--gb-line-4); } .gb-chip img { max-height: 24px; max-width: 60px; width: auto; } @media (max-width: 899px) { /**/ .gb-suggest__in, .gb-suggest__in:has(.gb-suggest__main):has(.gb-suggest__aside) { grid-template-columns: minmax(0, 1fr); gap: var(--gb-sp-lg); } .gb-suggest__main + .gb-suggest__aside { border-left: 0; padding-left: 0; border-top: 1px dashed var(--gb-line-4); padding-top: var(--gb-sp-lg); } } /**/ .gb-burger { display: none; } .gb-mnav { display: none; } @media (max-width: 1099px) { /**/ .gb-header__in { height: auto; flex-wrap: wrap; gap: var(--gb-sp-sm); padding-block: var(--gb-sp-sm); } /**/ .gb-logo { order: 2; flex: 1 1 0; min-width: 0; display: flex; justify-content: center; } .gb-logo img, .gb-logo svg { height: 36px; max-width: 100%; } .gb-burger { display: inline-flex; order: 1; border: 0; } .gb-actions { order: 3; margin-left: 0; gap: var(--gb-sp-sm); } .gb-actions__icons .gb-icon-btn--phone, .gb-actions__icons .gb-icon-btn--heart { display: none; } .gb-cta-label { display: none; } .gb-btn--cta { min-width: 42px; padding: 0 var(--gb-sp-sm); } .gb-search { order: 4; flex-basis: 100%; max-width: none; margin-inline: 0; } .gb-nav { display: none; } .gb-container { padding-inline: var(--gb-sp-md); } /**/ .gb-drop__panel { min-width: 0; width: min(320px, calc(100vw - 2 * var(--gb-sp-md))); } .gb-cartdrop { width: min(380px, calc(100vw - 2 * var(--gb-sp-md))); } /**/ .gb-mnav { display: grid; grid-template-rows: auto auto minmax(0, 1fr); position: fixed; inset: 0; z-index: 80; background: var(--gb-bg); /**/ overflow-y: auto; } /**/ /**/ .gb-mnav__bar { display: flex; align-items: center; gap: var(--gb-sp-md); background: var(--gb-navy); color: #fff; padding: var(--gb-sp-sm) var(--gb-sp-md); } .gb-mnav__logo { display: block; } .gb-mnav__logo img, .gb-mnav__logo svg { height: 36px; width: auto; } .gb-mnav__icons { display: flex; align-items: center; gap: var(--gb-sp-md); margin-left: auto; } .gb-mnav__icons a, .gb-mnav__icons button { position: relative; display: inline-flex; color: #fff; } .gb-mnav__icons .ico { width: 24px; height: 24px; } .gb-mnav__search { background: var(--gb-navy); padding: 0 var(--gb-sp-md) var(--gb-sp-md); } .gb-mnav__search .gb-search { margin-inline: 0; max-width: none; } .gb-mnav__scroll { grid-row: 3; grid-column: 1; overflow-y: auto; } /**/ .gb-mnav__panel { grid-row: 3; grid-column: 1; z-index: 1; background: var(--gb-bg); overflow-y: auto; } .gb-mnav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-sm); width: 100%; min-height: 60px; padding: 0 var(--gb-sp-md); border-bottom: 1px solid var(--gb-line-3); color: var(--gb-ink); font-size: var(--gb-fs-sm); font-weight: 600; text-decoration: none; text-align: left; } .gb-mnav__row .ico { color: var(--gb-ink-2); } /**/ .gb-mnav__row--cat { justify-content: flex-start; gap: var(--gb-sp-md); } .gb-mnav__thumb { width: 40px; height: 40px; flex: none; object-fit: contain; } /**/ .gb-mnav__row--sub { justify-content: flex-start; gap: var(--gb-sp-sm); min-height: 52px; font-weight: 400; color: var(--gb-ink-2); background: var(--gb-bg-4); border-bottom: 0; } .gb-mnav__row--sub:last-child { border-bottom: 1px solid var(--gb-line-3); } .gb-mnav__back { display: flex; align-items: center; gap: var(--gb-sp-md); width: 100%; min-height: 64px; padding: 0 var(--gb-sp-md); background: var(--gb-bg-4); border-bottom: 1px solid var(--gb-line-3); color: var(--gb-navy); font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; text-align: left; } .gb-mnav__backbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--gb-line-4); border-radius: 50%; } .gb-mnav__brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); place-items: center; gap: var(--gb-sp-lg); padding: var(--gb-sp-lg) var(--gb-sp-md); background: var(--gb-bg-4); border-top: 1px dashed var(--gb-line-4); } .gb-mnav__brands a { display: flex; align-items: center; justify-content: center; } .gb-mnav__brands img { max-height: 32px; max-width: 84px; width: auto; } } @media (prefers-reduced-motion: reduce) { .ico, .gb-nav__link .ico { transition: none; } } /**/ .gb-crumbs { padding-block: var(--gb-sp-md); } .gb-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-sp-xs); } .gb-crumbs li { display: flex; align-items: center; gap: var(--gb-sp-xs); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); color: var(--gb-ink-2); } .gb-crumbs a { color: var(--gb-ink-2); text-decoration: none; } .gb-crumbs a:hover { text-decoration: underline; } .gb-crumbs .ico { width: 14px; height: 14px; color: var(--gb-line-4); } /**/ .gb-usp { background: var(--gb-warn-bg); border-bottom: 1px solid var(--gb-warn-bd); } .gb-usp ul { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gb-sp-lg); padding-block: var(--gb-sp-xs); padding-inline: calc(2 * var(--gb-gutter)); text-align: center; } .gb-usp strong { display: block; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; } .gb-usp span { display: block; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); } @media (max-width: 1099px) { .gb-usp ul { padding-inline: var(--gb-sp-md); } /**/ } @media (max-width: 899px) { .gb-usp ul { justify-content: center; gap: 2px; } .gb-usp li + li { display: none; } /**/ } /**/ .gb-sec { padding-block: var(--gb-sp-2xl); } .gb-sec--soft { background: var(--gb-bg-4); } .gb-sec__head { text-align: center; margin-bottom: var(--gb-sp-lg); } .gb-sec__mark { width: 34px; height: 34px; margin: 0 auto var(--gb-sp-sm); } .gb-sec__head h2 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; } .gb-sec__head p { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); } .gb-sec__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-lg); margin-bottom: var(--gb-sp-lg); flex-wrap: wrap; } .gb-sec__bar h2 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; } .gb-center { text-align: center; margin-top: var(--gb-sp-lg); } /**/ .hp-hero { padding-top: var(--gb-sp-lg); } .hp-hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--gb-sp-md); scrollbar-width: none; border-radius: var(--gb-r-md); /**/ position: relative; } .hp-hero__track::-webkit-scrollbar { display: none; } .hp-hero__slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; border-radius: var(--gb-r-md); overflow: hidden; background: var(--gb-bg-4); } .hp-hero__slide img { width: 100%; height: auto; } .hp-hero__dots { display: flex; justify-content: center; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); } .hp-hero__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--gb-line-4); transition: background .15s, transform .15s; } .hp-hero__dot.is-active { background: var(--gb-navy); transform: scale(1.2); } .hp-hero__dot:hover { background: var(--gb-ink-2); } .hp-h1 { font-size: var(--gb-fs-2xl); line-height: var(--gb-lh-2xl); font-weight: 600; text-align: center; } .hp-h1__sub { text-align: center; color: var(--gb-ink-2); font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm); margin-bottom: var(--gb-sp-lg); } .hp-cats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gb-sp-md); } .hp-cat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--gb-sp-sm); padding: var(--gb-sp-md); background: var(--gb-bg); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); box-shadow: var(--gb-shadow-sm); text-decoration: none; color: var(--gb-ink); } .hp-cat:hover { border-color: var(--gb-line-4); box-shadow: 0 4px 10px rgba(0, 0, 0, .08); } .hp-cat__img { display: block; width: 120px; height: 120px; } .hp-cat__img img { width: 100%; height: 100%; object-fit: contain; } .hp-cat__name { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; } .hp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gb-sp-lg); } .hp-card { display: flex; flex-direction: column; min-width: 0; background: var(--gb-bg); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); overflow: hidden; box-shadow: var(--gb-shadow-sm); text-decoration: none; color: var(--gb-ink); } .hp-card:hover { border-color: var(--gb-line-4); box-shadow: 0 4px 10px rgba(0, 0, 0, .08); } .hp-card__img { display: block; position: relative; background: var(--gb-bg-4); } /**/ .hp-card__img img { width: 100%; height: 100%; object-fit: cover; } .hp-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(5, 24, 52, .25); } .hp-card__play .ico { width: 44px; height: 44px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); } .hp-card:hover .hp-card__play { background: rgba(5, 24, 52, .35); } .hp-card__body { display: flex; flex-direction: column; gap: 6px; padding: var(--gb-sp-md); flex: 1; } .hp-card__kicker { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--gb-green-2); } /**/ .hp-card__title { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; overflow-wrap: anywhere; } .hp-card__perex { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); color: var(--gb-ink-2); overflow-wrap: anywhere; } .hp-card__meta { margin-top: auto; padding-top: var(--gb-sp-sm); display: flex; align-items: center; gap: 6px; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); } .hp-card__meta .ico { color: var(--gb-line-4); } @media (max-width: 1099px) { .hp-cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .hp-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-sm); } .hp-cat__img { width: 88px; height: 88px; } .hp-cards { grid-template-columns: 1fr; } .hp-h1 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); } } /**/ .vl { padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); } .vl__head { margin-bottom: var(--gb-sp-lg); } .vl__head h1 { font-size: var(--gb-fs-2xl); line-height: var(--gb-lh-2xl); font-weight: 600; } .vl__head p { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .vl__empty { color: var(--gb-ink-2); } .vl__index { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: var(--gb-sp-xs); padding: var(--gb-sp-sm) 0; margin-bottom: var(--gb-sp-lg); background: var(--gb-bg); border-bottom: 1px solid var(--gb-line-3); } .vl__index a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding-inline: 8px; border-radius: var(--gb-r-sm); border: 1px solid var(--gb-line-3); font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-navy); text-decoration: none; } .vl__index a:hover { background: var(--gb-bg-4); border-color: var(--gb-line-4); } .vl__group + .vl__group { margin-top: var(--gb-sp-xl); } /**/ .vl__letter { scroll-margin-top: 60px; font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; color: var(--gb-navy); margin-bottom: var(--gb-sp-sm); } .vl__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gb-sp-md); } .vl__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gb-sp-sm); padding: var(--gb-sp-md) var(--gb-sp-sm); background: var(--gb-bg); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); box-shadow: var(--gb-shadow-sm); text-decoration: none; color: var(--gb-ink); text-align: center; } .vl__item:hover { border-color: var(--gb-line-4); box-shadow: 0 4px 10px rgba(0, 0, 0, .08); } .vl__logo { display: flex; align-items: center; justify-content: center; height: 56px; width: 100%; } .vl__logo img { max-height: 56px; max-width: 100%; width: auto; height: auto; object-fit: contain; } /**/ .vl__name { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-sm-tight); font-weight: 600; overflow-wrap: anywhere; min-height: calc(var(--gb-lh-sm-tight) * 2); } .vl__count { position: absolute; top: 6px; right: 8px; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-mut-inv); } /**/ .al { padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); } .al__head { margin-bottom: var(--gb-sp-lg); } .al__head h1 { font-size: var(--gb-fs-2xl); line-height: var(--gb-lh-2xl); font-weight: 600; } .al__head p { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .al__empty { color: var(--gb-ink-2); } .al__grid { margin-bottom: var(--gb-sp-xl); } /**/ .nf { padding-block: var(--gb-sp-2xl); text-align: center; max-width: 720px; margin-inline: auto; } /**/ .nf__acts { display: flex; gap: var(--gb-sp-sm); justify-content: center; flex-wrap: wrap; margin-top: var(--gb-sp-lg); } /**/ .pr { padding-block: var(--gb-sp-2xl); text-align: center; max-width: 640px; margin-inline: auto; } .pr h1 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; margin-top: var(--gb-sp-md); } .pr__lead { color: var(--gb-ink-2); margin-top: var(--gb-sp-sm); } .pr__meta { font-size: var(--gb-fs-xxs); margin-top: var(--gb-sp-md); } .pr__ico { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; } .pr__ico .ico { width: 40px; height: 40px; } .pr__ico--ok { background: var(--gb-green-tint); color: var(--gb-green-2); } .pr__ico--err { background: #ffe9e6; color: var(--gb-err); } .pr__ico--wait { background: var(--gb-warn-bg); color: #8a6d00; } .nf__code { font-size: 96px; line-height: 1; font-weight: 600; color: var(--gb-navy-tint); } .nf__title { font-size: var(--gb-fs-2xl); line-height: var(--gb-lh-2xl); font-weight: 600; margin-top: var(--gb-sp-sm); } .nf__lead { color: var(--gb-ink-2); margin-top: var(--gb-sp-sm); } .nf__lead code { background: var(--gb-bg-4); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); padding: 2px 6px; font-size: var(--gb-fs-xs); overflow-wrap: anywhere; } .nf__search { display: flex; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-lg); } .nf__search input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 var(--gb-sp-md); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: var(--gb-bg); color: var(--gb-ink); font-size: var(--gb-fs-input); } .nf__search input:focus-visible { border-color: var(--gb-info); } .nf__sugs-h { margin-top: var(--gb-sp-xl); font-weight: 600; } .nf__sugs { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm); justify-content: center; margin-top: var(--gb-sp-sm); } .nf__home { margin-top: var(--gb-sp-xl); } .nf__home a { display: inline-flex; align-items: center; gap: 6px; color: var(--gb-navy); font-weight: 600; text-decoration: none; } .nf__home a:hover { text-decoration: underline; } /**/ .nf { margin-inline: auto; } @media (max-width: 1099px) { .vl__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 599px) { .vl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-sm); } .vl__head h1, .al__head h1, .nf__title { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); } .nf__code { font-size: 64px; } .nf__search { flex-direction: column; } } /**/ .auth { padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); } .auth--narrow { max-width: 620px; margin-inline: auto; } /**/ .auth__grid { display: grid; grid-template-columns: minmax(0, 560px) 380px; gap: var(--gb-sp-xl); align-items: start; justify-content: center; } .auth__card { background: var(--gb-bg); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); box-shadow: var(--gb-shadow-sm); padding: var(--gb-sp-xl); } .auth__card--center { text-align: center; } .auth__title { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; margin-bottom: var(--gb-sp-md); } .auth__lead { color: var(--gb-ink-2); margin-bottom: var(--gb-sp-md); } .auth__card .gb-alert { margin-bottom: var(--gb-sp-md); } .auth__row { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; margin-block: var(--gb-sp-sm) var(--gb-sp-lg); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .auth__row a { color: var(--gb-navy); } .auth__actions { display: flex; gap: var(--gb-sp-sm); flex-wrap: wrap; } .auth__actions--center { justify-content: center; margin-top: var(--gb-sp-lg); } .auth__back { margin-top: var(--gb-sp-lg); } .auth__back a { display: inline-flex; align-items: center; gap: 6px; color: var(--gb-navy); font-size: var(--gb-fs-xs); text-decoration: none; } .auth__back a:hover { text-decoration: underline; } .auth__mark { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--gb-green-tint); color: var(--gb-green-2); margin-bottom: var(--gb-sp-md); } .auth__mark .ico { width: 32px; height: 32px; } .auth__aside { background: var(--gb-bg-4); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); padding: var(--gb-sp-xl); } .auth__aside h2 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; } .auth__aside > p { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); margin-bottom: var(--gb-sp-md); } .auth__aside ul { display: flex; flex-direction: column; gap: var(--gb-sp-md); } .auth__aside li { display: flex; gap: var(--gb-sp-sm); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .auth__aside li .ico { flex: none; margin-top: 3px; color: var(--gb-green); } .gb-field__hint { color: var(--gb-ink-2); } @media (max-width: 899px) { .auth__grid { grid-template-columns: 1fr; gap: var(--gb-sp-lg); } .auth__card, .auth__aside { padding: var(--gb-sp-lg); } } /**/ .reg__title { text-align: center; margin-bottom: var(--gb-sp-lg); } /**/ .reg .gb-form > section + section { margin-top: var(--gb-sp-lg); } .reg__legend { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm); font-weight: 600; } /**/ .reg__card > * + *, .reg__company > * + *, .reg__company [data-vies-widget] > * + * { margin-top: var(--gb-sp-md); } .reg__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .reg__company { margin-top: var(--gb-sp-lg); padding-top: var(--gb-sp-lg); border-top: 1px solid var(--gb-line-3); } /**/ /**/ .reg__addr { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.05fr) minmax(0, 1.9fr); gap: var(--gb-sp-md); } .reg__consent { align-items: flex-start; margin-top: var(--gb-sp-sm); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .reg__consent a { color: var(--gb-navy); } .reg__exists { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-sm); } .reg__exists-txt { flex: 1 1 260px; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .reg__exists-act { display: flex; gap: var(--gb-sp-sm); flex-wrap: wrap; } .reg__exists-act .gb-btn { min-height: 36px; font-size: var(--gb-fs-xxs); padding-inline: var(--gb-sp-md); } .reg__submit { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; margin-top: var(--gb-sp-lg); } .reg__submit a { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); } .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gb-sp-md); } .cf-ares { background: var(--gb-bg-4); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); padding: var(--gb-sp-md); margin-bottom: var(--gb-sp-md); } .cf-ares__label { display: block; font-weight: 600; font-size: var(--gb-fs-xs); margin-bottom: 6px; } .cf-ares__row { display: flex; gap: var(--gb-sp-sm); } .cf-ares__row input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 var(--gb-sp-md); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: var(--gb-bg); color: var(--gb-ink); font-size: var(--gb-fs-input); } .cf-note { margin-top: var(--gb-sp-sm); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); background: var(--gb-bg-4); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); padding: var(--gb-sp-sm); } .cf-note a { color: var(--gb-navy); } /**/ .gb-field input.is-invalid, .gb-field select.is-invalid, .cf-ares__row input.is-invalid { border-color: var(--gb-err); } .invalid-feedback { display: none; color: var(--gb-err); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); margin-top: 4px; } .invalid-feedback.d-block, .is-invalid ~ .invalid-feedback { display: block; } .form-text { color: var(--gb-ink-2); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); margin-top: 4px; } .ares-status, .vies-status, .ares-results { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); margin-top: var(--gb-sp-sm); } .ares-results button, .ares-results a { display: block; text-align: left; padding: 6px 8px; border-radius: var(--gb-r-sm); } .ares-results button:hover { background: var(--gb-bg-4); } @media (max-width: 899px) { .cf-row, .reg__addr { grid-template-columns: 1fr; } } /**/ .d-none { display: none !important; } [data-addr-check] .alert { display: block; margin-top: var(--gb-sp-sm); border-radius: var(--gb-r-sm); padding: var(--gb-sp-sm); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); background: var(--gb-warn-bg); border: 1px solid var(--gb-warn-bd); color: var(--gb-ink); } [data-addr-check] .btn { display: inline-flex; align-items: center; margin-left: var(--gb-sp-sm); min-height: 28px; padding-inline: var(--gb-sp-sm); border-radius: var(--gb-r-sm); background: var(--gb-warn-strong); color: var(--gb-ink); font-size: var(--gb-fs-xxs); font-weight: 600; } .ares-status--ok { color: var(--gb-green-2); } .ares-status--err, .ares-status--error { color: var(--gb-err); } .ares-results-list, .list-group { display: flex; flex-direction: column; gap: 2px; } .ares-result-item, .list-group-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: var(--gb-bg); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); } .ares-result-item:hover, .list-group-item-action:hover { background: var(--gb-bg-4); border-color: var(--gb-line-4); } /**/ .ck-steps { padding-block: var(--gb-sp-lg) 0; } /**/ .ck-steps ol { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm) var(--gb-sp-lg); list-style: none; padding: 0; } .ck-steps__item > * { display: inline-flex; align-items: center; gap: var(--gb-sp-sm); color: var(--gb-ink-2); text-decoration: none; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .ck-steps__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--gb-line-4); background: var(--gb-bg); font-weight: 600; font-size: var(--gb-fs-xs); } .ck-steps__item.is-current > * { color: var(--gb-ink); font-weight: 600; } .ck-steps__item.is-current .ck-steps__num { background: var(--gb-navy); border-color: var(--gb-navy); color: #fff; } .ck-steps__item.is-done > * { color: var(--gb-green-2); } .ck-steps__item.is-done .ck-steps__num { background: var(--gb-green-tint); border-color: var(--gb-green-tint-2); color: var(--gb-green-2); } .ck-steps__item.is-done a:hover .ck-steps__label { text-decoration: underline; } /**/ .bk { padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); } .bk__title { font-size: var(--gb-fs-2xl); line-height: var(--gb-lh-2xl); font-weight: 600; margin-bottom: var(--gb-sp-lg); } .bk .gb-alert, .bk__notice { margin-bottom: var(--gb-sp-md); } .bk__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--gb-sp-xl); align-items: start; } /**/ .bk { --bk-qty-w: 126px; --bk-price-w: 150px; } .bk__items { background: var(--gb-bg); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); overflow: hidden; } .bk-item { display: grid; /**/ grid-template-columns: 96px minmax(0, 1fr) var(--bk-qty-w, 126px) var(--bk-price-w, 150px) 44px; gap: var(--gb-sp-md); align-items: center; padding: var(--gb-sp-md); } .bk-item + .bk-item { border-top: 1px solid var(--gb-line-3); } .bk-item--hook { background: var(--gb-bg-4); } .bk-item--off { opacity: .65; } .bk-item--fee .bk-item__img { height: 0; } /**/ .bk-item__off { grid-column: 1 / -1; margin: 0 0 var(--gb-sp-sm); } .bk-item__img { display: block; width: 96px; height: 96px; } .bk-item__img img, .bk-item__img picture { width: 100%; height: 100%; object-fit: contain; } .bk-item__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .bk-item__name { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; } .bk-item__name a { text-decoration: none; } .bk-item__name a:hover { text-decoration: underline; } /**/ .bk-item__cond { display: block; margin-top: 4px; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); font-weight: 400; color: var(--gb-ink-2); } .bk-item__variant, .bk-item__code, .bk-item__avail { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); } .bk-item__variant:empty { display: none; } .bk-item__ok { color: var(--gb-green-2); } .bk-item__wait { color: var(--gb-err); } .bk-item__qty-fixed { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); } .bk-qty { display: inline-flex; align-items: center; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); overflow: hidden; } .bk-qty__btn { width: 36px; height: 40px; flex: none; font-size: 18px; line-height: 1; color: var(--gb-ink); background: var(--gb-bg-4); } .bk-qty__btn:hover:not([disabled], [aria-disabled="true"]) { background: var(--gb-line-3); } .bk-qty__btn:is([disabled], [aria-disabled="true"]) { opacity: .4; cursor: default; } /**/ .bk-qty input { width: 52px; height: 40px; border: 0; text-align: center; font-size: var(--gb-fs-xs); background: var(--gb-bg); color: var(--gb-ink); -moz-appearance: textfield; } .bk-qty input::-webkit-outer-spin-button, .bk-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .bk-item__price { text-align: right; white-space: nowrap; } .bk-item__price s { display: block; font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); } .bk-item__price strong { font-size: var(--gb-fs-sm); } .bk-item__sale { color: var(--gb-promo); } .bk-item__free { color: var(--gb-green-2); } /**/ .bk-item__now { display: block; font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); white-space: normal; } .bk-item__trash { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--gb-r-sm); color: var(--gb-ink-2); } .bk-item__trash:hover { background: var(--gb-promo-bg); color: var(--gb-promo); } .bk-vouchers { margin-top: var(--gb-sp-md); display: flex; flex-direction: column; gap: var(--gb-sp-sm); } .bk-vouchers li { display: flex; align-items: center; gap: var(--gb-sp-sm); padding: var(--gb-sp-sm) var(--gb-sp-md); background: var(--gb-green-tint); border: 1px solid var(--gb-green-tint-2); border-radius: var(--gb-r-sm); font-size: var(--gb-fs-xs); } .bk-vouchers__name { flex: 1 1 auto; min-width: 0; } .bk-vouchers__amount { color: var(--gb-green-2); font-weight: 600; } .bk-vouchers__del { /**/ display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: -12px -12px -12px 0; color: var(--gb-ink-2); } .bk-vouchers__del:hover { color: var(--gb-err); } .bk-voucher { margin-top: var(--gb-sp-lg); padding: var(--gb-sp-md); background: var(--gb-bg-4); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); } .bk-voucher label { display: block; margin-bottom: var(--gb-sp-sm); font-size: var(--gb-fs-xs); font-weight: 600; } .bk-voucher__row { display: flex; gap: var(--gb-sp-sm); } .bk-voucher__row input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 var(--gb-sp-md); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: var(--gb-bg); color: var(--gb-ink); font-size: var(--gb-fs-input); } .bk-voucher__msg:empty { display: none; } .bk-voucher__msg { margin-top: var(--gb-sp-sm); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); } .bk__side { position: sticky; top: var(--gb-sp-md); } .bk-sum { background: var(--gb-bg); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); box-shadow: var(--gb-shadow-sm); padding: var(--gb-sp-lg); } .bk-sum__title { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; margin-bottom: var(--gb-sp-md); } .bk-sum__row { display: flex; justify-content: space-between; gap: var(--gb-sp-md); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .bk-sum__row + .bk-sum__row { margin-top: 6px; } .bk-sum__minus, .bk-sum__free { color: var(--gb-green-2); } .bk-sum__ship { display: flex; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-sm); padding: var(--gb-sp-sm); border-radius: var(--gb-r-sm); background: var(--gb-warn-bg); border: 1px solid var(--gb-warn-bd); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); } .bk-sum__ship .ico { flex: none; margin-top: 1px; color: var(--gb-warn); } .bk-sum__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gb-sp-md); margin-top: var(--gb-sp-md); padding-top: var(--gb-sp-md); border-top: 1px solid var(--gb-line-3); font-size: var(--gb-fs-sm); font-weight: 600; } .bk-sum__total strong { font-size: var(--gb-fs-lg); } .bk-sum__cta { width: 100%; margin-top: var(--gb-sp-md); } .bk-sum__note, .bk-sum__vat { display: flex; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); } .bk-sum__note .ico { flex: none; margin-top: 1px; color: var(--gb-green); } .bk__back { margin-top: var(--gb-sp-md); text-align: center; } .bk__back a { display: inline-flex; align-items: center; gap: 6px; color: var(--gb-ink-2); font-size: var(--gb-fs-xs); text-decoration: none; } .bk__back a:hover { text-decoration: underline; } .bk__empty { text-align: center; padding-block: var(--gb-sp-2xl); } .bk__empty-mark { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--gb-bg-4); color: var(--gb-navy-mut); margin-bottom: var(--gb-sp-md); } .bk__empty-mark .ico { width: 32px; height: 32px; } .bk__empty p { color: var(--gb-ink-2); margin-bottom: var(--gb-sp-lg); } /**/ .gb-undo { position: fixed; left: 50%; bottom: calc(var(--gb-dock, 0px) + 16px); z-index: calc(var(--gb-z-modal) + 2); transform: translateX(-50%); display: flex; align-items: center; gap: var(--gb-sp-sm); width: max-content; max-width: min(520px, calc(100vw - 32px)); overflow: hidden; padding: 6px 6px 6px 18px; border-radius: var(--gb-r-md); background: var(--gb-navy); color: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); font-size: var(--gb-fs-xs); line-height: 1.3; animation: gb-undo-in .2s ease; } .gb-undo--in { position: absolute; left: 16px; right: 16px; width: auto; max-width: none; transform: none; animation-name: gb-undo-up; } .gb-undo__txt { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .gb-undo__btn, .gb-undo__x { flex: none; min-height: 44px; border: 0; background: transparent; color: #fff; cursor: pointer; } .gb-undo__btn { padding: 0 16px; border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--gb-r-pill); font: 700 var(--gb-fs-xs)/1 var(--gb-font); } .gb-undo__x { display: inline-flex; align-items: center; justify-content: center; width: 44px; border-radius: 50%; } .gb-undo__btn:hover, .gb-undo__x:hover { background: rgba(255, 255, 255, .14); } .gb-undo__btn[aria-busy="true"] { opacity: .6; cursor: progress; } .gb-undo__x .ico { width: 16px; height: 16px; } .gb-undo :focus-visible, .v3-side .gb-undo :focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .gb-undo__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .85); transform-origin: left center; animation: gb-undo-bar linear forwards; } .gb-undo.is-paused .gb-undo__bar { animation-play-state: paused; } @keyframes gb-undo-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes gb-undo-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes gb-undo-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .gb-undo, .gb-undo--in { animation: none; } } body.v3 .gb-undo { background: var(--v3-navy); } /**/ .beta-basket-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--gb-z-modal); background: var(--gb-navy); color: #fff; border-radius: var(--gb-r-pill); padding: 10px var(--gb-sp-lg); font-size: var(--gb-fs-xs); box-shadow: var(--gb-shadow-drop); } /**/ @media (min-width: 700px) { .bk-item__qty { display: flex; justify-content: center; } } /**/ @media (min-width: 1100px) and (max-width: 1299px) { .bk { --bk-price-w: 130px; } .bk-item { grid-template-columns: 80px minmax(0, 1fr) var(--bk-qty-w, 126px) var(--bk-price-w, 130px) 44px; } .bk-item__img { width: 80px; height: 80px; } } @media (max-width: 1099px) { /**/ .bk__grid { grid-template-columns: minmax(0, 1fr); } .bk__side { position: static; } } @media (max-width: 699px) { /**/ .bk-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gb-sp-sm) var(--gb-sp-md); } .bk-item__img { width: 72px; height: 72px; flex: none; } .bk-item__info { flex: 1 1 140px; } .bk-item__del { flex: none; order: 3; } .bk-item__qty { order: 4; flex: none; } .bk-item__price { order: 5; flex: 1 1 auto; text-align: right; align-self: center; } .bk-item__off { order: -1; flex-basis: 100%; } .bk__title { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); } .bk-voucher__row { flex-direction: column; } } /**/ .pd { padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); } .pd__grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: var(--gb-sp-xl); align-items: start; } @media (max-width: 1099px) { .pd__grid { grid-template-columns: minmax(0, 1fr) 420px; gap: var(--gb-sp-lg); } } /**/ @media (max-width: 899px) { .pd__grid { grid-template-columns: minmax(0, 1fr); } } /**/ .gb-badge { display: inline-block; padding: 3px 10px; border-radius: var(--gb-r-sm); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); font-weight: 600; background: var(--gb-promo-bg); color: var(--gb-promo); } .gb-badge--sale { background: var(--gb-promo-bg); color: var(--gb-promo); } .gb-badge--new { background: var(--gb-info-bg); color: var(--gb-info); } .gb-badge--ship { background: var(--gb-green-tint); color: var(--gb-green-2); } .gb-badge--top { background: var(--gb-warn-bg); color: var(--gb-warn); } /**/ .gb-badge--used { background: #f7e7d4; color: #8a4b0f; } /**/ .pd-used { border: 1px solid #ecd3b6; background: #fdf6ee; border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; margin: 12px 0; } .pd-used__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; } .pd-used__note { margin: 0; white-space: pre-line; color: var(--gb-ink); } .pd-used--offer { background: var(--gb-green-tint); border-color: var(--gb-green-tint-2); } /**/ .pd-used__alt { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 8px; background: var(--gb-bg); color: var(--gb-ink); text-decoration: none; } .pd-used__alt:hover strong, .pd-used__alt:focus-visible strong { text-decoration: underline; } .pd-used__alt img { width: 48px; height: 48px; object-fit: contain; } .pd-used__alt-txt { display: grid; gap: 2px; min-width: 0; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .pd-used__alt-txt strong { color: var(--gb-navy); } .pd-used--offer .pd-used__alt-txt strong { color: var(--gb-green-2); } .pd-used__alt-txt > span { color: var(--gb-ink-2); } /**/ .pd-used--offer .pd-used__alt-txt > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .pd-used__alt-txt .gb-badge { padding: 1px 7px; vertical-align: 1px; } .pd-used__alt-price { display: flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; } .pd-used__alt-price .ico { width: 16px; height: 16px; flex: none; } /**/ @media (max-width: 599px) { .pd-used__alt { grid-template-columns: 48px minmax(0, 1fr); align-items: start; } .pd-used__alt-price { grid-column: 2; } .pd-used__alt-price.is-bare { display: none; } /**/ } /**/ .pd-off { display: grid; justify-items: start; gap: 10px; margin: 12px 0; padding: 14px 16px; border: 1px solid var(--gb-line-3); border-radius: 10px; background: var(--gb-bg-4); } .pd-off__msg { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-weight: 600; color: var(--gb-ink); } .pd-off__msg .ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--gb-info); } .pd-off__ask { margin: 0; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); color: var(--gb-ink-2); } .pd-off--phone .pd-off__msg { font-weight: 400; } .pd-off--phone .pd-off__msg .ico { color: var(--gb-green-2); } .pd-off--phone a { font-weight: 600; white-space: nowrap; } /**/ .pd-usedm__note { padding: 8px 10px; border-radius: 8px; background: #fdf6ee; } .pd-usedm__save { font-weight: 700; color: var(--gb-green-2); } .pd-usedm__foot .gb-btn { flex: 1 1 auto; justify-content: center; } .pd-gallery { position: relative; } .pd-gallery__badges { position: absolute; top: 0; left: 0; z-index: 2; display: flex; flex-direction: column; gap: 5px; } /**/ .pd-gallery__main { border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff; padding: var(--gb-sp-lg); aspect-ratio: 1 / 1; } .pd-gallery__main picture { display: block; width: 100%; height: 100%; } .pd-gallery__main img { width: 100%; height: 100%; } .pd-gallery__thumbs { display: flex; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-sm); flex-wrap: wrap; } .pd-gallery__thumbs button { width: 70px; height: 70px; padding: 4px; border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: #fff; } .pd-gallery__thumbs button[aria-current="true"] { border-color: var(--gb-navy); } .pd-gallery__thumbs img { width: 100%; height: 100%; } /**/ .pd-gallery__main { position: relative; overflow: hidden; touch-action: pan-y; } .pd-gallery__open { display: block; width: 100%; height: 100%; cursor: zoom-in; } /**/ .pd-gallery__open img { transition: opacity .15s ease; } .pd-gallery__main.is-loading .pd-gallery__open img { opacity: .5; } .pd-gallery__main.is-loading .pd-gallery__open { cursor: progress; } /**/ #main[aria-busy="true"] .pd__grid, #main[aria-busy="true"] [data-gb-nav-pending] { opacity: .6; transition: opacity .15s ease .1s; } #main[aria-busy="true"] { cursor: progress; } .pd-gallery__open img.gb-nav-lqip { background: center / contain no-repeat; filter: blur(6px); } .pd-gallery__lens { position: absolute; inset: 0; pointer-events: none; background: #fff no-repeat 50% 50%; } /**/ .pd-gallery__video { position: absolute; inset: 0; z-index: 1; padding: inherit; background: inherit; display: flex; align-items: center; justify-content: center; container-type: size; } .pd-gallery__player { width: min(100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9; border-radius: var(--gb-r-sm); overflow: hidden; background: #000; } .pd-gallery__player > * { width: 100%; height: 100%; } .pd-gallery__video > video { width: 100%; height: 100%; object-fit: contain; } .pd-gallery__video img, :is(.pd-gallery__thumbs, .gb-lightbox__thumbs) .is-video img { mix-blend-mode: normal; object-fit: cover; } .pd-gallery.is-video :is(.pd-gallery__badges, .pd-gallery__play) { display: none; } .pd-gallery__play { position: absolute; left: var(--gb-sp-md); bottom: var(--gb-sp-md); z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(11, 42, 85, .16); color: var(--gb-navy); font-weight: 600; } .pd-gallery__play-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gb-navy); color: #fff; } .pd-gallery__play-ico .ico { width: 16px; height: 16px; } .pd-gallery__play:hover .pd-gallery__play-ico { background: var(--gb-green); } /**/ :is(.pd-gallery__thumbs, .gb-lightbox__thumbs) .is-video { position: relative; padding: 0; overflow: hidden; background: var(--gb-navy); } :is(.pd-gallery__thumbs, .gb-lightbox__thumbs) .is-video .ico { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 7px; border-radius: 50%; background: rgba(5, 24, 52, .72); color: #fff; } /**/ .gb-lightbox { position: fixed; inset: 0; z-index: calc(var(--gb-z-modal) + 1); display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; gap: var(--gb-sp-sm); padding: var(--gb-sp-md); background: #fff; color: var(--gb-ink); } .gb-lightbox__stage { position: relative; width: 100%; min-height: 0; margin: 0; overflow: hidden; touch-action: pan-y pinch-zoom; cursor: zoom-out; } .gb-lightbox__stage img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; cursor: zoom-in; user-select: none; transition: transform .2s ease; } /**/ .gb-lightbox__stage.is-zoomed { touch-action: none; } .gb-lightbox__stage.is-zoomed img { transform: scale(2.5); cursor: zoom-out; } @media (prefers-reduced-motion: reduce) { .gb-lightbox__stage img { transition: none; } } .gb-lightbox__close, .gb-lightbox__nav { position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--gb-bg-4); color: var(--gb-navy); } .gb-lightbox__close .ico, .gb-lightbox__nav .ico { width: 28px; height: 28px; } .gb-lightbox__close:hover, .gb-lightbox__nav:hover { background: var(--gb-navy); color: #fff; } .gb-lightbox__close { top: var(--gb-sp-md); right: var(--gb-sp-md); } .gb-lightbox__nav { top: 50%; transform: translateY(-50%); } .gb-lightbox__nav--prev { left: var(--gb-sp-md); } .gb-lightbox__nav--next { right: var(--gb-sp-md); } .gb-lightbox__count { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); color: var(--gb-ink-2); } .gb-lightbox__thumbs { display: flex; gap: var(--gb-sp-sm); max-width: 100%; overflow-x: auto; } .gb-lightbox__thumbs button { flex: none; width: 64px; height: 64px; padding: 4px; border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: #fff; } .gb-lightbox__thumbs button[aria-current="true"] { border-color: var(--gb-navy); } .gb-lightbox__thumbs img { width: 100%; height: 100%; object-fit: contain; } /**/ .pd-buy { background: var(--gb-bg-4); border-radius: var(--gb-r-md); padding: var(--gb-sp-lg); } .pd-buy__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gb-sp-md); } /**/ .pd-buy__top > :first-child { min-width: 0; } .pd-buy h1 { overflow-wrap: break-word; } .pd-buy__brand { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); color: var(--gb-ink-2); } .pd-buy__code { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-mut-inv); text-align: right; flex: none; } .pd-buy h1 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; margin-top: 2px; } .pd-buy__lead { margin-top: var(--gb-sp-sm); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); color: var(--gb-ink-2); } .pd-buy__lead p { margin: 0 0 var(--gb-sp-xs); } /**/ .pd-loc { margin-top: var(--gb-sp-md); } .pd-loc:empty { display: none; } .pd-loc__box { border-left: 3px solid var(--gb-info); border-radius: var(--gb-r-sm); background: var(--gb-info-bg); color: var(--gb-ink); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .pd-loc__box summary { min-height: 44px; padding: 10px var(--gb-sp-md); cursor: pointer; font-size: var(--gb-fs-sm); } .pd-loc__log { max-height: 240px; overflow-y: auto; padding: 0 var(--gb-sp-md) var(--gb-sp-sm); } .pd-loc__log table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .pd-loc__log th, .pd-loc__log td { padding: 4px 12px 4px 0; text-align: left; vertical-align: top; } .pd-loc__log th { font-weight: 600; color: var(--gb-ink-2); } /**/ .pd-var { margin-top: var(--gb-sp-lg); } .pd-var__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-sm); margin-bottom: var(--gb-sp-xs); } .pd-var__head strong { font-size: var(--gb-fs-xs); font-weight: 600; } .pd-var__head a { font-size: var(--gb-fs-xs); color: var(--gb-navy); } .pd-var__opts { display: flex; flex-wrap: wrap; gap: var(--gb-sp-xs); } .pd-var__opt { min-width: 60px; min-height: 44px; padding: 0 var(--gb-sp-md); display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .pd-var__opt:hover { border-color: var(--gb-navy-mut); } .pd-var__opt[aria-pressed="true"] { border-color: var(--gb-green); border-width: 2px; color: var(--gb-green-2); font-weight: 600; } /**/ .pd-var__opt { position: relative; overflow: hidden; } .pd-var__opt[data-state="ok"]::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--gb-green); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } /**/ .pd-var__opt[data-state="soldout"] { color: var(--gb-ink-2); } .pd-var__opt[data-state="unavailable"] { color: var(--gb-mut-inv); text-decoration: line-through; cursor: not-allowed; opacity: .6; } /**/ .pd-colors { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-sm); } .pd-colors a { width: 80px; height: 80px; padding: 4px; background: #fff; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); } .pd-colors a img { width: 100%; height: 100%; } .pd-colors a[aria-current="true"] { border-color: var(--gb-green); border-width: 2px; padding: 3px; } /**/ .pd-price { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--gb-sp-md); margin-top: var(--gb-sp-md); padding-top: var(--gb-sp-md); border-top: 1px solid var(--gb-line-3); } /**/ .pd-price__now { display: block; font-size: var(--gb-fs-2xl); line-height: 1.2; font-weight: 600; color: var(--gb-ink); } .pd-price__now.is-sale { color: var(--gb-promo); } .pd-price__old { font-size: var(--gb-fs-sm); color: var(--gb-ink-2); text-decoration: line-through; } .pd-price__row { display: flex; align-items: center; gap: var(--gb-sp-sm); } .pd-price__vat { font-size: var(--gb-fs-xxs); color: var(--gb-mut-inv); } .pd-price__aside { display: flex; align-items: center; gap: var(--gb-sp-xs); } .pd-price__aside a { font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-navy); text-underline-offset: 3px; } .pd-cta { display: flex; align-items: center; gap: var(--gb-sp-md); margin-top: var(--gb-sp-md); } .pd-qty { display: flex; align-items: center; gap: var(--gb-sp-xs); flex: none; } .pd-qty button { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gb-line-4); border-radius: 50%; background: #fff; font-size: var(--gb-fs-lg); line-height: 1; color: var(--gb-ink); } .pd-qty button:hover { border-color: var(--gb-navy-mut); } .pd-qty input { width: 44px; border: 0; background: none; text-align: center; font-weight: 600; -moz-appearance: textfield; } .pd-qty input::-webkit-outer-spin-button, .pd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /**/ .pd-qty--sm button { width: 40px; height: 44px; } .pd-qty--sm input { width: 56px; height: 44px; } .pd-cta .gb-btn--cta { flex: 1; min-height: 56px; font-size: var(--gb-fs-sm); } /**/ .pd-cta .pd-qty button { width: 56px; height: 56px; } .pd-cta .pd-qty input { width: 40px; } .pd-cta .gb-btn--cta[aria-disabled="true"] { background: var(--gb-navy-mut); } /**/ @media (max-width: 479px) { .pd-cta { flex-wrap: wrap; gap: 8px; } .pd-cta .pd-qty { gap: 0; } .pd-cta .pd-qty button { width: 44px; height: 44px; } .pd-cta .pd-qty input { width: 28px; padding: 0; } .pd-cta .gb-btn--cta { min-width: max-content; padding-inline: var(--gb-sp-md); } .pd-cta .gb-btn--cta .ico { display: none; } } .pd-stock { display: flex; align-items: center; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); font-weight: 600; font-size: var(--gb-fs-xs); } .pd-stock::before { content: ''; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--gb-line-4); } .pd-stock--available::before { background: var(--gb-green); } .pd-stock--available { color: var(--gb-green-2); } .pd-stock--onway::before { background: var(--gb-warn-strong); } .pd-stock--unavailable::before { background: var(--gb-err); } .pd-stock__note, .pd-stock__low { font-weight: 400; color: var(--gb-ink-2); font-size: var(--gb-fs-xxs); } .pd-stock__low { color: var(--gb-promo); } .pd-delivery { margin-top: var(--gb-sp-md); border-top: 1px dashed var(--gb-line-4); padding-top: var(--gb-sp-md); } .pd-delivery li { display: flex; align-items: center; gap: var(--gb-sp-sm); padding-block: 3px; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .pd-delivery .ico { width: 18px; height: 18px; color: var(--gb-green); } /**/ .pd-delivery__pay { flex-wrap: wrap; } .pd-delivery__pay .pay-marks { --pm-h: 20px; margin-top: 0; } /**/ /**/ .pd-expert { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gb-sp-md); margin-top: var(--gb-sp-md); padding-top: var(--gb-sp-md); border-top: 1px dashed var(--gb-line-4); } .pd-expert img { width: 64px; height: 64px; border-radius: 50%; flex: none; object-fit: cover; } .pd-expert strong { display: block; font-size: var(--gb-fs-xs); font-weight: 600; } .pd-expert p { font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); } .pd-expert .gb-btn { margin-left: auto; flex: none; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-pill); background: #fff; } /**/ .pd-anchors { position: sticky; top: 0; z-index: 40; background: var(--gb-bg-4); border-block: 1px solid var(--gb-line-3); } .pd-anchors__in { display: flex; align-items: center; gap: var(--gb-sp-lg); min-height: 70px; } .pd-anchors__prod { display: flex; align-items: center; gap: var(--gb-sp-sm); min-width: 0; } .pd-anchors__prod img { width: 44px; height: 44px; flex: none; } .pd-anchors__prod span { display: block; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; } .pd-anchors__prod strong { font-size: var(--gb-fs-xs); font-weight: 600; } .pd-anchors nav { display: flex; gap: var(--gb-sp-lg); margin-left: auto; flex-wrap: wrap; } .pd-anchors nav a { font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-ink); text-decoration: none; } .pd-anchors nav a:hover, .pd-anchors nav a.is-active { color: var(--gb-green-2); } @media (max-width: 899px) { .pd-anchors__prod { display: none; } .pd-anchors nav { margin: 0; gap: var(--gb-sp-md); overflow-x: auto; } .pd-anchors__in { min-height: 52px; } } /**/ .pd-params { overflow-x: auto; } .pd-params table { width: 100%; border-collapse: collapse; font-size: var(--gb-fs-xs); } .pd-params th, .pd-params td { padding: var(--gb-sp-md); text-align: left; border-bottom: 1px solid var(--gb-line-3); } .pd-params tbody tr:nth-child(odd) { background: var(--gb-bg-4); } .pd-params th { font-weight: 600; white-space: nowrap; } /**/ .pd-review, .pd-qa { background: var(--gb-bg-4); border-radius: var(--gb-r-md); padding: var(--gb-sp-lg); margin-bottom: var(--gb-sp-md); } .pd-review__head, .pd-qa__head { display: flex; align-items: baseline; gap: var(--gb-sp-sm); flex-wrap: wrap; } .pd-review__head strong, .pd-qa__head strong { font-size: var(--gb-fs-xs); font-weight: 600; } .pd-review__date, .pd-qa__date { font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); } .pd-review__verified { margin-left: auto; font-size: var(--gb-fs-xxs); color: var(--gb-green-2); text-transform: uppercase; font-weight: 600; } .pd-qa__body { margin-top: var(--gb-sp-sm); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .pd-qa--reply { background: var(--gb-green-tint); margin-left: var(--gb-sp-xl); } .pd-qa__ask { background: var(--gb-navy); color: #fff; border-radius: var(--gb-r-md); padding: var(--gb-sp-lg); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .pd-qa__ask .gb-btn { margin-top: var(--gb-sp-md); background: #fff; color: var(--gb-navy); border-radius: var(--gb-r-pill); } .pd-qa__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--gb-sp-xl); align-items: start; } @media (max-width: 899px) { .pd-qa__grid { grid-template-columns: 1fr; gap: var(--gb-sp-lg); } } /**/ .pd-brand { background: var(--gb-green); color: #fff; border-radius: var(--gb-r-md); padding: var(--gb-sp-xl); } .pd-brand__in { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--gb-sp-xl); align-items: center; } .pd-brand h2 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; } .pd-brand__logo { width: 96px; height: 96px; background: #fff; border-radius: var(--gb-r-sm); padding: 6px; margin-bottom: var(--gb-sp-sm); } .pd-brand .gb-btn { background: #fff; color: var(--gb-navy); border-radius: var(--gb-r-pill); margin-top: var(--gb-sp-md); } /**/ @media (max-width: 899px) { .pd-brand__in { grid-template-columns: minmax(0, 1fr); gap: var(--gb-sp-md); } .pd-brand .gb-btn { white-space: normal; height: auto; padding-block: var(--gb-sp-sm); } } /**/ .pd-mobilebar { display: none; } @media (max-width: 899px) { .pd-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: var(--gb-sp-md); background: #fff; border-top: 1px solid var(--gb-line-3); padding: var(--gb-sp-sm) var(--gb-sp-md); box-shadow: 0 -4px 12px rgba(0, 0, 0, .08); } .pd-mobilebar strong { font-size: var(--gb-fs-sm); font-weight: 600; } .pd-mobilebar .gb-btn { margin-left: auto; } /**/ body.has-mobilebar .gb-footer { padding-bottom: var(--gb-dock, 76px); } } /**/ .sp-promos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); } .sp-promo { display: grid; gap: 2px; padding: var(--gb-sp-md); border: 1px solid var(--gb-promo); border-radius: var(--gb-r-sm); background: var(--gb-promo-bg); font-size: var(--gb-fs-xs); } .sp-promo strong { color: var(--gb-promo); } .sp-promo__code b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .sp-promo__terms { font-size: var(--gb-fs-xxs); } .sp-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); } .sp-picks a { display: grid; gap: 2px; padding: var(--gb-sp-md); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: #fff; color: inherit; text-decoration: none; font-size: var(--gb-fs-xs); } .sp-picks a:hover { border-color: var(--gb-navy-mut); background: var(--gb-bg-4); } .sp-picks__eyebrow { font-size: var(--gb-fs-xxs); text-transform: uppercase; letter-spacing: .04em; color: var(--gb-mut-inv); } .sp-picks__cnt { font-size: var(--gb-fs-xxs); color: var(--gb-green-2); font-weight: 600; } .sp-rabatt { margin-top: var(--gb-sp-md); } .sp-seo { padding-bottom: var(--gb-sp-2xl); font-size: var(--gb-fs-xxs); } /**/ /**/ .ty { padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); display: grid; gap: var(--gb-sp-md); } .ty__head { display: grid; gap: var(--gb-sp-xs); justify-items: center; text-align: center; padding: var(--gb-sp-xl) var(--gb-sp-lg); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-md); background: var(--gb-bg); } .ty__paid { display: inline-flex; align-items: center; gap: var(--gb-sp-xs); margin-top: var(--gb-sp-xs); padding: var(--gb-sp-xs) var(--gb-sp-md); border-radius: 999px; background: var(--gb-green-tint); color: var(--gb-green-2); font-weight: 600; text-align: left; } .ty__paid .ico { width: 18px; height: 18px; flex: none; } .ty__mark { width: 56px; height: 56px; border-radius: 50%; background: var(--gb-green); display: grid; place-items: center; } .ty__mark .ico { width: 32px; height: 32px; color: #fff; } .ty__head h1 { font-size: var(--gb-fs-2xl); line-height: 1.25; font-weight: 600; } .ty__ref { font-size: var(--gb-fs-sm); } .ty__pay { display: grid; gap: var(--gb-sp-xs); justify-items: center; margin-top: var(--gb-sp-md); } .ty__back { text-align: center; } /**/ .ac { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--gb-sp-xl); align-items: start; padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); } .ac--solo { grid-template-columns: minmax(0, 1fr); } .ac__main { min-width: 0; display: grid; gap: var(--gb-sp-md); } .ac__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; } .ac__head h1 { font-size: var(--gb-fs-2xl); line-height: 1.25; font-weight: 600; } @media (max-width: 899px) { .ac { grid-template-columns: 1fr; gap: var(--gb-sp-md); } } /**/ .ac-nav { position: sticky; top: var(--gb-sp-md); display: grid; gap: 2px; } .ac-nav__title { margin-top: var(--gb-sp-md); padding: 0 var(--gb-sp-sm); font-size: var(--gb-fs-xxs); text-transform: uppercase; letter-spacing: .04em; color: var(--gb-ink-2); /**/ } .ac-nav__item { display: flex; align-items: center; gap: var(--gb-sp-sm); padding: var(--gb-sp-sm) var(--gb-sp-md); border-radius: var(--gb-r-sm); font-size: var(--gb-fs-xs); color: var(--gb-ink); text-decoration: none; } .ac-nav__item .ico { width: 20px; height: 20px; flex: none; color: var(--gb-ink-2); } .ac-nav__item:hover { background: var(--gb-bg-4); } .ac-nav__item.is-active { background: var(--gb-navy); color: #fff; font-weight: 600; } .ac-nav__item.is-active .ico { color: #fff; } .ac-nav__item--out { color: var(--gb-ink-2); } .ac-nav__ai { margin-left: auto; padding: 1px 6px; border-radius: var(--gb-r-pill); background: var(--gb-green-2); color: #fff; font-size: 10px; font-weight: 600; } @media (max-width: 899px) { /**/ .ac-nav { position: static; display: flex; gap: var(--gb-sp-xs); overflow-x: auto; padding-bottom: var(--gb-sp-xs); } .ac-nav__title { display: none; } .ac-nav__item { flex: none; white-space: nowrap; border: 1px solid var(--gb-line-3); } /**/ .ac-nav__item--out { display: none; } /**/ } /**/ .ac-me { display: none; } @media (max-width: 1099px) { .ac-me { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--gb-sp-sm); padding: var(--gb-sp-xs) var(--gb-sp-xs) var(--gb-sp-xs) var(--gb-sp-md); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff; } .ac-me > .ico { color: var(--gb-navy); } .ac-me__who { flex: 1 1 auto; min-width: 0; display: grid; font-size: var(--gb-fs-xs); line-height: 1.3; } .ac-me__who strong, .ac-me__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac-me__who span { color: var(--gb-ink-2); font-size: var(--gb-fs-xxs); } .ac-me__out { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--gb-sp-sm); border-radius: var(--gb-r-sm); font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-navy); text-decoration: none; } .ac-me__out .ico { width: 20px; height: 20px; } } /**/ .ac-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gb-sp-md); } .ac-tiles--sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 899px) { .ac-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 479px) { .ac-tiles, .ac-tiles--sum { grid-template-columns: 1fr; } } .ac-tile { display: grid; gap: 2px; padding: var(--gb-sp-md); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff; color: inherit; text-decoration: none; } a.ac-tile:hover { border-color: var(--gb-navy-mut); background: var(--gb-bg-4); } .ac-tile .ico { width: 22px; height: 22px; color: var(--gb-navy); } .ac-tile__n { font-size: var(--gb-fs-2xl); line-height: 1.1; font-weight: 600; } .ac-tile__label { font-size: var(--gb-fs-xs); color: var(--gb-ink-2); } .ac-tile__note { font-size: var(--gb-fs-xs); font-weight: 600; } .ac-tile__warn { font-size: var(--gb-fs-xxs); color: var(--gb-err); } .ac-tile.is-warn { border-color: var(--gb-warn-bd); background: var(--gb-warn-bg); } /**/ .ac-box { border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff; padding: var(--gb-sp-lg); display: grid; gap: var(--gb-sp-md); } .ac-box > h2 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; } .ac-box__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-md); } .ac-box__head h2 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; } .ac-box__head a { font-size: var(--gb-fs-xs); color: var(--gb-navy); } /**/ .ac-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gb-sp-md); } .ac-filter__toggle { display: none; } .ac-filter__fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gb-sp-md); flex: 1; } .ac-filter .gb-field { min-width: 150px; } .ac-filter__acts { display: flex; align-items: center; gap: var(--gb-sp-sm); } .ac-filter__clear { font-size: var(--gb-fs-xs); color: var(--gb-err); } .ac-filter__count { font-size: var(--gb-fs-xs); color: var(--gb-ink-2); margin-left: auto; } @media (max-width: 899px) { .ac-filter__toggle { display: inline-flex; align-items: center; gap: var(--gb-sp-sm); min-height: 40px; padding: 0 var(--gb-sp-md); border: 1px solid var(--gb-navy); border-radius: var(--gb-r-pill); font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-navy); } .ac-filter__toggle .ico { width: 18px; height: 18px; } .ac-filter__fields { width: 100%; } .ac-filter__fields[data-collapsed] { display: none; } } /**/ .ac-table table { width: 100%; border-collapse: collapse; font-size: var(--gb-fs-xs); } .ac-table th, .ac-table td { padding: var(--gb-sp-sm) var(--gb-sp-md); text-align: left; vertical-align: middle; } .ac-table thead th { border-bottom: 1px solid var(--gb-line-4); color: var(--gb-ink-2); font-weight: 400; white-space: nowrap; } .ac-table tbody tr { border-bottom: 1px solid var(--gb-line-3); } .ac-table tbody tr:hover { background: var(--gb-bg-4); } .ac-table .is-right { text-align: right; } .ac-table__act a { display: inline-flex; padding: 4px; color: var(--gb-ink-2); } .ac-table__act .ico { width: 18px; height: 18px; } .ac-table__expand > td { background: var(--gb-bg-4); padding: var(--gb-sp-md); } .ac-table__expand:hover > td { background: var(--gb-bg-4); } /**/ .ac-table thead a.ac-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; white-space: nowrap; } .ac-table thead a.ac-sort:hover, .ac-table thead a.ac-sort:focus-visible { color: var(--gb-ink); text-decoration: underline; } .ac-sort__ico { width: 14px; height: 14px; visibility: hidden; } .ac-sort:hover .ac-sort__ico, .ac-sort:focus-visible .ac-sort__ico, .ac-sort.is-active .ac-sort__ico { visibility: visible; } .ac-sort.is-active { color: var(--gb-ink); font-weight: 600; } .ac-sort.is-asc .ac-sort__ico { transform: rotate(180deg); } .ac-table th.is-right .ac-sort { flex-direction: row-reverse; } /**/ .ac-carrier { display: inline-flex; align-items: center; vertical-align: middle; } .ac-carrier img { display: block; height: 22px; width: auto; max-width: 84px; object-fit: contain; } .ac-subtable { width: 100%; border-collapse: collapse; font-size: var(--gb-fs-xxs); } .ac-subtable th, .ac-subtable td { padding: 6px var(--gb-sp-sm); text-align: left; } .ac-subtable thead th { color: var(--gb-ink-2); font-weight: 400; border-bottom: 1px solid var(--gb-line-4); } .ac-subtable tbody tr + tr td { border-top: 1px solid var(--gb-line-3); } .ac-subtable .is-right { text-align: right; } @media (max-width: 899px) { .ac-table thead, .ac-subtable thead { display: none; } .ac-table tbody tr, .ac-subtable tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--gb-sp-sm); padding: var(--gb-sp-sm) 0; } /**/ .ac-table td, .ac-subtable td { padding: 2px 0 2px 104px; display: block; text-indent: -104px; } .ac-table td::before, .ac-subtable td::before { content: attr(data-th) ':'; color: var(--gb-ink-2); display: inline-block; min-width: 96px; margin-right: var(--gb-sp-sm); text-indent: 0; vertical-align: top; } /**/ .ac-table td > *, .ac-subtable td > * { text-indent: 0; } .ac-table td[data-hide="mobile"], .ac-table th[data-hide="mobile"] { display: none; } .ac-table .is-right, .ac-subtable .is-right { text-align: left; } .ac-table__expand > td { grid-column: 1 / -1; padding: var(--gb-sp-md); text-indent: 0; } .ac-table__expand > td::before { content: none; } /**/ .ac-table td:not([data-th])::before, .ac-table td[data-th=""]::before, .ac-subtable td:not([data-th])::before, .ac-subtable td[data-th=""]::before { content: none; } } /**/ @media (max-width: 479px) { .ac-table tbody tr, .ac-subtable tbody tr { grid-template-columns: minmax(0, 1fr); } } .ac-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--gb-r-pill); font-size: var(--gb-fs-xxs); font-weight: 600; white-space: nowrap; } .ac-badge--ok { background: var(--gb-green-tint); color: var(--gb-green-2); } .ac-badge--wait { background: var(--gb-warn-bg); color: #8a6d00; } .ac-badge--err { background: #ffe9e6; color: var(--gb-err-ink); } .ac-badge--off { background: var(--gb-bg-4); color: var(--gb-ink-2); } .ac-badge--multiline { white-space: normal; overflow-wrap: anywhere; } .ac-empty { display: grid; gap: var(--gb-sp-sm); justify-items: center; padding: var(--gb-sp-2xl) 0; color: var(--gb-ink-2); text-align: center; } .ac-empty .ico { width: 36px; height: 36px; color: var(--gb-line-4); } /**/ .ac-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gb-sp-md); } @media (max-width: 899px) { .ac-quick { grid-template-columns: 1fr; } } .ac-quick a { display: flex; align-items: center; gap: var(--gb-sp-md); padding: var(--gb-sp-md); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); color: inherit; text-decoration: none; } .ac-quick a:hover { border-color: var(--gb-navy-mut); background: var(--gb-bg-4); } .ac-quick .ico { width: 24px; height: 24px; flex: none; color: var(--gb-green); } .ac-quick span { display: grid; gap: 2px; } .ac-quick strong { font-size: var(--gb-fs-xs); } .ac-quick small { font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); } /**/ .ac-link { display: inline-flex; align-items: center; gap: 6px; color: var(--gb-navy); } .ac-link .ico { width: 16px; height: 16px; flex: none; } /**/ .ac-ship__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; } .ac-ship__carrier { display: inline-flex; align-items: center; gap: var(--gb-sp-sm); font-size: var(--gb-fs-sm); } .ac-ship__carrier img { width: auto; height: 28px; max-width: 96px; } .ac-ship__state { font-size: var(--gb-fs-xs); padding: 4px 12px; } .ac-ship__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gb-sp-sm) var(--gb-sp-lg); margin: 0; } .ac-ship__facts dt { font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); font-weight: 400; } .ac-ship__facts dd { margin: 0; font-size: var(--gb-fs-sm); font-weight: 600; } .ac-ship__src { font-size: var(--gb-fs-xxs); } /**/ .ac-timeline { display: grid; } .ac-timeline__item { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 0 var(--gb-sp-md); padding-bottom: var(--gb-sp-md); } .ac-timeline__item:last-child { padding-bottom: 0; } .ac-timeline__item::before { content: ''; position: absolute; left: 9px; top: 18px; bottom: -2px; width: 2px; background: var(--gb-line-4); } .ac-timeline__item:last-child::before { display: none; } .ac-timeline__dot { position: relative; z-index: 1; width: 12px; height: 12px; margin: 6px 4px 0; border-radius: 50%; background: var(--gb-line-4); } .ac-timeline__item.is-current .ac-timeline__dot { width: 16px; height: 16px; margin: 4px 2px 0; background: var(--gb-navy); box-shadow: 0 0 0 4px var(--gb-navy-tint); } .ac-timeline__item.is-current.is-ok .ac-timeline__dot { background: var(--gb-green); box-shadow: 0 0 0 4px var(--gb-green-tint); } .ac-timeline__item.is-current.is-err .ac-timeline__dot { background: var(--gb-err); box-shadow: 0 0 0 4px #ffe9e6; } .ac-timeline__body { display: grid; gap: 2px; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .ac-timeline__item:not(.is-current) .ac-timeline__body strong { font-weight: 400; } .ac-timeline__at { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xs); color: var(--gb-ink-2); white-space: nowrap; } @media (max-width: 479px) { .ac-timeline__item { grid-template-columns: 20px minmax(0, 1fr); } .ac-timeline__at { grid-column: 2; } } /**/ .ac-order { display: grid; gap: var(--gb-sp-md); } /**/ .ac-order__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-md); } .ac-order__cols > .ac-box { align-content: start; } @media (max-width: 899px) { .ac-order__cols { grid-template-columns: 1fr; } } .ac-order__pay { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; } /**/ .ac-order__altpay { flex-basis: 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-sp-sm); font-size: var(--gb-fs-sm); } /**/ .ac-order__altpay .gb-btn { white-space: normal; max-width: 100%; text-align: center; } .ac-order__altpay .gb-form__err { flex-basis: 100%; margin: 0; } .ac-order__pays, .ac-order__parcels, .ac-order__docs { display: grid; gap: 4px; font-size: var(--gb-fs-xs); } .ac-order__pays li { display: flex; justify-content: space-between; gap: var(--gb-sp-sm); } .ac-order__refund { color: var(--gb-err); } .ac-order__parcels a, .ac-order__docs a { display: inline-flex; align-items: center; gap: 6px; color: var(--gb-navy); } .ac-order__parcels .ico, .ac-order__docs .ico { width: 18px; height: 18px; } /**/ .ac-order__contact { display: grid; gap: 4px; font-size: var(--gb-fs-xs); overflow-wrap: anywhere; } .ac-order__contact a { color: var(--gb-navy); } .ac-order__note { overflow-wrap: anywhere; } /**/ .ac-order__parcel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--gb-sp-md); } .ac-order__parcel-num { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .ac-order__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-sm); padding-top: var(--gb-sp-md); border-top: 1px solid var(--gb-line-4); font-size: var(--gb-fs-sm); } .ac-order__total strong { font-size: var(--gb-fs-xl); font-weight: 600; } .ac-cta { flex-direction: row; display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; } .ac-cta__acts { display: flex; gap: var(--gb-sp-sm); flex-wrap: wrap; } /**/ .ac-steps { display: flex; flex-wrap: wrap; gap: var(--gb-sp-lg); padding: var(--gb-sp-md) 0; } .ac-steps__item { display: flex; align-items: center; gap: var(--gb-sp-sm); font-size: var(--gb-fs-xs); color: var(--gb-mut-inv); } .ac-steps__item.is-done { color: var(--gb-ink); } .ac-steps__mark { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid var(--gb-line-4); background: #fff; display: grid; place-items: center; } .ac-steps__item.is-done .ac-steps__mark { background: var(--gb-green); border-color: var(--gb-green); } .ac-steps__mark .ico { width: 16px; height: 16px; color: #fff; } .ac-steps__note { color: var(--gb-ink-2); font-size: var(--gb-fs-xxs); } /**/ .ck { padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); } .ck__title { font-size: var(--gb-fs-2xl); line-height: 1.25; font-weight: 600; margin-bottom: var(--gb-sp-lg); } .ck > .gb-alert { margin-bottom: var(--gb-sp-md); } /**/ .ck__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--gb-sp-xl); align-items: start; } .ck__main { min-width: 0; display: grid; gap: var(--gb-sp-md); } .ck__side { position: sticky; top: var(--gb-sp-md); display: grid; gap: var(--gb-sp-md); } @media (max-width: 1099px) { .ck__grid { grid-template-columns: 1fr; } .ck__side { position: static; } } .ck-box { border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff; padding: var(--gb-sp-lg); display: grid; gap: var(--gb-sp-md); } .ck-box > h2 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; } .ck-box__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-md); } .ck-box__head h2 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; } .ck-box__head a { font-size: var(--gb-fs-xs); color: var(--gb-navy); } .ck-box__sub { font-size: var(--gb-fs-sm); font-weight: 600; } .ck-box--soft { background: var(--gb-bg-4); } .ck-box--ok { background: var(--gb-green-tint); border-color: var(--gb-green-tint-2); } /**/ .ck-box.is-invalid { box-shadow: 0 0 0 3px rgba(255, 65, 44, .35); } .ck-panel { } /**/ .ck-login { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .ck-login .ico { color: var(--gb-green); } @media (max-width: 599px) { .ck-login { grid-template-columns: 1fr; } } /**/ .ck-box--ok.ck-login { grid-template-columns: auto minmax(0, 1fr); } /**/ .ck-opts { display: grid; gap: var(--gb-sp-xs); } .ck-opt { position: relative; display: grid; align-items: center; grid-template-columns: 24px 64px minmax(0, 1fr) auto; gap: var(--gb-sp-md); padding: var(--gb-sp-md); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: #fff; cursor: pointer; } .ck-opt:hover { border-color: var(--gb-navy-mut); } .ck-opt:has(input:checked) { border-color: var(--gb-green); background: var(--gb-green-tint); } .ck-opt:has(input:focus-visible) { outline: 2px solid var(--gb-info); outline-offset: 2px; } .ck-opt input { position: absolute; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; } .ck-opt__mark { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid var(--gb-line-4); background: #fff; } .ck-opt input:checked + .ck-opt__mark { border-color: var(--gb-green); border-width: 6px; } .ck-opt__logo { width: 64px; height: 32px; object-fit: contain; } /**/ .ck-opt__body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; } .ck-opt__name { font-size: var(--gb-fs-sm); font-weight: 600; } .ck-opt__desc { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); } .ck-opt__desc p { margin: 0; } .ck-opt__price { text-align: right; font-size: var(--gb-fs-sm); font-weight: 600; white-space: nowrap; } .ck-opt__price small { display: block; font-size: var(--gb-fs-xxs); font-weight: 400; color: var(--gb-ink-2); } .ck-opt__limit { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-err); } /**/ .pay-marks { --pm-h: 24px; display: flex; flex-wrap: wrap; align-items: center; margin: 4px calc(var(--pm-h) * -.23) 0; } .pay-mark { display: block; flex: none; border-radius: 0 !important; width: auto !important; height: calc(var(--pm-h) * .8) !important; margin: 0 calc(var(--pm-h) * .23) !important; } .pay-mark--gpay { height: calc(var(--pm-h) * 1.855) !important; margin: calc(var(--pm-h) * -.19) !important; } .pay-mark--visa { height: calc(var(--pm-h) * .6) !important; } .ck-opt .pay-marks { --pm-h: 32px; } /**/ /**/ .ck-opt.is-off { opacity: .55; cursor: not-allowed; } .ck-opt.is-off:has(input:checked) { background: #fff; border-color: var(--gb-line-3); } .ck-opt__pickup { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gb-sp-xs); font-size: var(--gb-fs-xxs); } /**/ .ck-country { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-sp-xs); margin: 0 0 var(--gb-sp-md); } .ck-country__label, .ck-country__hint { flex-basis: 100%; color: var(--gb-ink-2); } .ck-country__label { font-size: var(--gb-fs-xs); } .ck-country__hint { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); } /**/ .ck-country__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-pill); background: #fff; color: var(--gb-ink-2); font: inherit; font-size: var(--gb-fs-xs); cursor: pointer; } .ck-country__btn:hover { border-color: var(--gb-ink-2); color: var(--gb-ink); } .ck-country__btn[aria-pressed="true"] { border-color: var(--gb-navy); box-shadow: inset 0 0 0 1px var(--gb-navy); background: var(--gb-bg-4); color: var(--gb-navy); font-weight: 600; } .ck-country__btn[aria-pressed="true"]::after { content: "✓"; font-size: .85em; line-height: 1; } .ck-country__btn:disabled { opacity: .6; cursor: progress; } .ck-country__btn img { width: 20px; height: 14px; border-radius: 2px; display: block; } /**/ .ck-country__dd { position: relative; display: inline-block; } .ck-country__ddbtn { display: inline-flex; align-items: center; gap: var(--gb-sp-xs); min-width: 230px; min-height: 38px; padding: 4px 12px; border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: #fff; color: var(--gb-ink); font: inherit; font-size: var(--gb-fs-xs); cursor: pointer; } .ck-country__ddbtn:hover, .ck-country__ddbtn[aria-expanded="true"] { border-color: var(--gb-navy); } .ck-country__ddbtn:disabled { opacity: .6; cursor: progress; } .ck-country__ddbtn > span:first-of-type { flex: 1 1 auto; text-align: left; } .ck-country__ddbtn img, .ck-country__opt img { width: 20px; height: 14px; border-radius: 2px; display: block; flex: 0 0 auto; } .ck-country__caret { color: var(--gb-ink-2); font-size: .8em; } .ck-country__list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 270px; max-height: 320px; overflow: auto; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); box-shadow: var(--gb-shadow-sm); } .ck-country__list[hidden] { display: none; } .ck-country__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--gb-r-sm); background: transparent; color: var(--gb-ink); font: inherit; font-size: var(--gb-fs-xs); text-align: left; cursor: pointer; } .ck-country__opt:hover, .ck-country__opt:focus { background: var(--gb-bg-4); outline: none; } .ck-country__list [aria-selected="true"] .ck-country__opt { color: var(--gb-navy); font-weight: 600; } .ck-country__list [aria-selected="true"] .ck-country__opt::after { content: "✓"; margin-left: auto; font-size: .85em; } /**/ .ck-pickmodal__bar { display: flex; gap: var(--gb-sp-xs); align-items: center; } .ck-pickmodal__bar .ck-pickmodal__q { flex: 1 1 auto; } .ck-pickmodal__near { flex: 0 0 auto; min-height: 40px; padding: 0 12px; border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: #fff; color: var(--gb-ink); font: inherit; font-size: var(--gb-fs-xxs); cursor: pointer; white-space: nowrap; } .ck-pickmodal__near:hover { border-color: var(--gb-navy); } .ck-opt__pickbtn { font-size: var(--gb-fs-xxs); font-weight: 600; color: var(--gb-navy); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 599px) { .ck-opt { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: var(--gb-sp-xs); } .ck-opt__logo { display: none; } } /**/ .ck-sum { border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: var(--gb-bg-4); padding: var(--gb-sp-lg); display: grid; gap: var(--gb-sp-md); } .ck-sum__title { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; } .ck-sum__rows { display: grid; gap: var(--gb-sp-xs); margin: 0; } .ck-sum__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-sm); font-size: var(--gb-fs-xs); } .ck-sum__row dt { color: var(--gb-ink-2); min-width: 0; } .ck-sum__row dd { margin: 0; white-space: nowrap; font-weight: 600; } .ck-sum__free { color: var(--gb-green-2); font-weight: 600; } .ck-sum__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-sm); padding-top: var(--gb-sp-md); border-top: 1px solid var(--gb-line-4); font-size: var(--gb-fs-sm); } .ck-sum__total strong { font-size: var(--gb-fs-xl); line-height: 1.2; font-weight: 600; } .ck-sum__note { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); } .ck-sum__cta { width: 100%; } .ck-sum__guarantee { display: flex; align-items: center; gap: var(--gb-sp-sm); font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); } .ck-sum__guarantee .ico { width: 20px; height: 20px; flex: none; color: var(--gb-green); } .ck-sum__back { text-align: center; font-size: var(--gb-fs-xs); } .ck-sum__back a { display: inline-flex; align-items: center; gap: var(--gb-sp-xs); color: var(--gb-ink-2); } .ck-sum__back .ico { width: 16px; height: 16px; } .ck-submit { margin: 0; } .ck-market { display: grid; gap: var(--gb-sp-sm); } .ck-carrierwarn { display: grid; gap: var(--gb-sp-sm); justify-items: start; } /**/ .ck-emailhint { display: grid; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-sm); } .ck-emailhint__acts { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm); } .ck-vzkaz { display: grid; gap: var(--gb-sp-xs); } .ck-pickup { display: flex; align-items: center; gap: var(--gb-sp-md); } .ck-pickup > div { display: grid; gap: 2px; font-size: var(--gb-fs-xs); } /**/ .ck-recap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-lg); } @media (max-width: 699px) { .ck-recap { grid-template-columns: 1fr; } } .ck-recap h3 { font-size: var(--gb-fs-sm); font-weight: 600; margin-bottom: var(--gb-sp-sm); } .ck-recap dl { display: grid; gap: 4px; margin: 0; } .ck-recap dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--gb-sp-sm); font-size: var(--gb-fs-xs); } .ck-recap dt { color: var(--gb-ink-2); } .ck-recap dd { margin: 0; font-weight: 600; } @media (max-width: 599px) { .ck-recap dl > div { grid-template-columns: 1fr; gap: 0; } } .ck-items { display: grid; gap: var(--gb-sp-sm); } .ck-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: var(--gb-sp-md); align-items: center; padding-bottom: var(--gb-sp-sm); border-bottom: 1px solid var(--gb-line-3); font-size: var(--gb-fs-xs); } .ck-item:last-child { border-bottom: 0; padding-bottom: 0; } .ck-item__img img, .ck-item__img picture { width: 64px; height: 64px; } .ck-item__body { min-width: 0; display: grid; gap: 2px; } /**/ .ck-item__body .ac-badge { justify-self: start; } .ck-item__body a { text-decoration: none; } .ck-item__body a:hover { text-decoration: underline; } .ck-item__qty, .ck-item__price { white-space: nowrap; font-weight: 600; } @media (max-width: 599px) { .ck-item { grid-template-columns: 56px minmax(0, 1fr) auto; row-gap: 4px; } .ck-item__img img, .ck-item__img picture { width: 56px; height: 56px; } .ck-item__qty { grid-column: 2; justify-self: start; font-weight: 400; color: var(--gb-ink-2); } } .ck-promo { display: grid; gap: var(--gb-sp-xs); } .ck-promo li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--gb-sp-sm); align-items: baseline; font-size: var(--gb-fs-xs); } .ck-promo .ico { width: 18px; height: 18px; color: var(--gb-green); } .ck-promo b { color: var(--gb-green-2); white-space: nowrap; } .ck-promo s { color: var(--gb-ink-2); font-weight: 400; } .ck-terms { font-size: var(--gb-fs-xxs); } /**/ .ck-pickmodal__frame { width: 100%; height: min(70vh, 620px); border: 0; border-radius: var(--gb-r-sm); } .ck-pickmodal__list { max-height: 50vh; overflow-y: auto; display: grid; gap: 4px; margin-top: var(--gb-sp-sm); } .ck-pickmodal__item { display: grid; gap: 2px; text-align: left; width: 100%; padding: var(--gb-sp-sm) var(--gb-sp-md); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: #fff; } .ck-pickmodal__item:hover { border-color: var(--gb-green); background: var(--gb-green-tint); } .ck-pickmodal__item small { color: var(--gb-ink-2); font-size: var(--gb-fs-xxs); } /**/ @media (max-width: 599px), (max-height: 500px) { .gb-modal.ck-pickmodal { padding: 0; } .gb-modal.ck-pickmodal .gb-modal__dialog { display: flex; flex-direction: column; width: 100%; height: 100%; border-radius: 0; padding: 0 var(--gb-sp-sm) var(--gb-sp-sm); } .ck-pickmodal .gb-modal__dialog > .gb-modal__close { position: absolute; top: 6px; right: 6px; margin: 0; } .ck-pickmodal .gb-modal__title { flex: none; margin: 0; padding: 14px 52px 10px 4px; font-size: var(--gb-fs-lg); line-height: 1.3; } .ck-pickmodal .gb-modal__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .ck-pickmodal__frame { flex: 1 1 auto; height: auto; min-height: 0; } .ck-pickmodal__list { flex: 1 1 auto; min-height: 0; max-height: none; } .ck-pickmodal .gb-modal__foot { flex: none; margin-top: var(--gb-sp-sm); } .ck-pickmodal .gb-modal__foot .gb-btn { width: 100%; white-space: normal; text-align: center; } } /**/ /**/ .pd-var__hint { display: block; width: 100%; text-align: left; cursor: pointer; margin-top: var(--gb-sp-md); padding: var(--gb-sp-sm) var(--gb-sp-md); border-radius: var(--gb-r-sm); background: var(--gb-warn-bg); border: 1px solid var(--gb-warn-bd); color: inherit; font-family: inherit; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .pd-var__hint:hover { text-decoration: underline; text-underline-offset: 3px; } .pd-var__picked { font-size: var(--gb-fs-xs); color: var(--gb-ink-2); } /**/ .pd-var--fixed { margin-top: var(--gb-sp-sm); } .pd-var__fixed { display: flex; gap: var(--gb-sp-xs); font-size: var(--gb-fs-xs); color: var(--gb-ink-2); } .pd-var__fixed strong { color: var(--gb-ink); } /**/ .pd-var__select { display: none; width: 100%; min-height: 44px; padding: 0 var(--gb-sp-md); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: #fff; font-size: var(--gb-fs-input); } .pd-var__select:focus { border-color: var(--gb-info); } .pd-var__select option[disabled] { color: var(--gb-mut-inv); } /**/ .pd-sel { position: relative; } .pd-sel__btn, .pd-sel__opt { width: 100%; display: flex; align-items: center; gap: var(--gb-sp-sm); text-align: left; background: #fff; padding: var(--gb-sp-sm) var(--gb-sp-md); min-height: 60px; font-family: inherit; color: inherit; } .pd-sel__btn { border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-md); cursor: pointer; } .pd-sel__btn:hover { border-color: var(--gb-navy-mut); } .pd-sel__btn:focus-visible, .pd-sel__opt:focus-visible { outline: 2px solid var(--gb-info); outline-offset: 2px; } .pd-sel__btn[aria-expanded="true"] { border-color: var(--gb-navy-mut); } .pd-sel__btn[aria-expanded="true"] .pd-sel__caret { transform: rotate(180deg); } .pd-sel__caret { width: 18px; height: 18px; flex: none; color: var(--gb-ink-2); transition: transform .15s ease; } /**/ .pd-sel__val { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--gb-sp-sm); } .pd-sel__name { flex: 1 0 100%; overflow-wrap: anywhere; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; color: var(--gb-ink); } .pd-sel__btn.is-empty .pd-sel__name { font-weight: 400; color: var(--gb-mut-inv); } .pd-sel__avail { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); font-weight: 500; } .pd-sel__avail--available { color: var(--gb-green-2); } .pd-sel__avail--onway { color: var(--gb-warn); } .pd-sel__avail--unavailable { color: var(--gb-err); } .pd-sel__price { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: var(--gb-fs-xs); white-space: nowrap; } .pd-sel__price:empty { display: none; } .pd-sel__price s { color: var(--gb-ink-2); } .pd-sel__now { font-weight: 600; color: var(--gb-ink); } .pd-sel__now.is-sale { color: var(--gb-promo); } .pd-sel__badge { padding: 2px 8px; } .pd-sel__list { position: absolute; z-index: var(--gb-z-drop); top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-md); box-shadow: var(--gb-shadow-drop); overflow: hidden auto; max-height: 340px; } .pd-sel__opt { border: 0; border-top: 1px solid var(--gb-line-3); cursor: pointer; } .pd-sel__opt:first-child { border-top: 0; } .pd-sel__opt:hover:not([disabled]) { background: var(--gb-bg-4); } .pd-sel__opt[aria-selected="true"] { background: var(--gb-green-tint); } .pd-sel__opt[disabled] { cursor: not-allowed; opacity: .55; } .pd-sel__opt[disabled] .pd-sel__name { text-decoration: line-through; } /**/ .pd-avail { margin-top: var(--gb-sp-lg); padding: var(--gb-sp-md) 0; border-top: 1px dashed var(--gb-line-4); border-bottom: 1px solid var(--gb-line-3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-md) var(--gb-sp-lg); } /**/ .pd-avail__row { display: grid; gap: 2px; align-items: start; align-content: start; min-width: 0; } .pd-avail__label { display: flex; align-items: center; gap: 8px; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 500; color: var(--gb-green-2); } .pd-avail__label .ico { width: 20px; height: 20px; flex: none; color: var(--gb-green); } .pd-avail__row strong { display: block; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; } .pd-avail__note { display: block; font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); } .pd-avail__note--low { color: var(--gb-warn); } .pd-avail__act { justify-self: start; margin-top: 2px; padding: 0; font-size: var(--gb-fs-xs); font-weight: 500; color: var(--gb-ink); text-decoration: underline; text-underline-offset: 3px; } .pd-avail__act:hover { color: var(--gb-green-2); } /**/ .pd-avail .pd-stock { margin-top: 0; display: block; font-size: var(--gb-fs-xs); } .pd-avail .pd-stock::before { content: none; } .pd-avail .pd-stock--available { color: var(--gb-ink); } .pd-avail .pd-stock--onway { color: var(--gb-ink); } .pd-avail .pd-stock--unavailable { color: var(--gb-err); } @media (max-width: 599px) { .pd-avail { grid-template-columns: 1fr; } } /**/ .pd-price__gar { display: inline-flex; align-items: center; gap: 6px; font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-navy); text-decoration: underline; text-underline-offset: 3px; } .pd-price__gar .ico { width: 18px; height: 18px; color: var(--gb-green); } .pd-price__gar:hover { color: var(--gb-green-2); } /**/ .pd-gar__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-md); padding: 9px 0; text-align: left; } .pd-gar__row + .pd-gar__row { border-top: 1px dashed var(--gb-line-4); } .pd-gar__row > span { font-size: 15px; line-height: 1.4; color: var(--gb-ink-2); } .pd-gar__row b { font-size: var(--gb-fs-sm); line-height: 1.4; white-space: nowrap; } .pd-gar__row b.is-red { color: var(--gb-err-ink); } /**/ .pd-gar__help { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 2px; vertical-align: 1px; border-radius: 50%; background: var(--gb-ink-2); color: #fff; /**/ font-size: 11px; font-weight: 700; line-height: 1; cursor: help; } .pd-gar__help:is(:hover, :focus)::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 3; transform: translateX(-50%); width: max-content; max-width: 240px; padding: 6px 10px; border-radius: 6px; background: var(--gb-navy); color: #fff; font-size: var(--gb-fs-xxs); font-weight: 400; line-height: 1.4; text-align: center; pointer-events: none; } .pd-gar__final { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-sm); margin-top: 8px; padding: 12px 14px; text-align: left; border: 1px solid var(--gb-green-tint-2); border-radius: 8px; background: var(--gb-green-tint); } .pd-gar__final span { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--gb-ink-2); } .pd-gar__final b { font-size: 22px; line-height: 1.4; color: var(--gb-green-2); white-space: nowrap; } .pd-gar__acts { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-sm); margin-top: 16px; } /**/ .pd-gar__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 4px; background: var(--gb-green-2); color: #fff; font-size: var(--gb-fs-sm); font-weight: 700; line-height: 1.2; } .pd-gar__btn:hover { background: var(--gb-navy); } .pd-gar__btn[disabled] { opacity: .6; cursor: default; } .pd-gar__btn .ico { width: 18px; height: 18px; } .pd-gar__updated { margin-top: 8px; text-align: left; font-size: 13px; line-height: 1.4; color: var(--gb-ink-2); } .pd-gar__flash { margin-top: 4px; text-align: left; font-size: 13px; line-height: 1.4; color: var(--gb-green-2); } .pd-gar__flash.is-warn { color: #a35f00; } /**/ .pd-gar__hint { margin-top: 6px; font-size: var(--gb-fs-xs); line-height: 1.4; color: var(--gb-ink-2); } .pd-gar__hint.is-auto { color: var(--gb-green-2); } .pd-gar__hint.is-manual { color: #a35f00; } /**/ .pd-qty--box { display: inline-flex; gap: 0; height: 44px; overflow: hidden; border: 1px solid var(--gb-line-4); border-radius: 8px; background: var(--gb-bg); } .pd-qty--box button { width: 44px; height: 100%; border: 0; border-radius: 0; color: var(--gb-navy); } .pd-qty--box button:hover { background: var(--gb-bg-4); } .gb-field .pd-qty.pd-qty--box > input[type] { width: 56px; min-height: 0; height: 100%; padding: 0; border: 0; border-inline: 1px solid var(--gb-line-4); border-radius: 0; font-weight: 600; } /**/ .pd-gar__result { padding: var(--gb-sp-lg) 0; text-align: center; } .pd-gar__result > * + * { margin-top: var(--gb-sp-md); } .pd-gar__result .gb-split__title, .pd-gar__result .gb-split__lead { margin-bottom: 0; } .pd-gar__result .pd-gar__updated { text-align: center; } /**/ .pd-gar__result h3:focus { outline: none; } .pd-gar__result-ico { display: grid; place-items: center; width: 64px; height: 64px; margin-inline: auto; border-radius: 50%; color: #fff; } .pd-gar__result-ico .ico { width: 30px; height: 30px; } .pd-gar__result-ico.is-ok { background: var(--gb-green); } .pd-gar__result-ico.is-pending { background: #d98a00; } .pd-gar__result-ico.is-info { background: var(--gb-ink-2); } .pd-gar__final--stack { display: inline-flex; flex-direction: column; gap: 2px; padding: 12px 24px; text-align: center; } .pd-gar__final--stack b { font-size: 27px; } .pd-gar__final--stack small { font-size: var(--gb-fs-xs); color: var(--gb-green-2); } .pd-gar__ref { display: inline-flex; align-items: baseline; gap: var(--gb-sp-sm); padding: 8px 12px; border-radius: 8px; background: var(--gb-bg); font-size: var(--gb-fs-xs); color: var(--gb-ink-2); } .pd-gar__ref b { color: var(--gb-navy); } .gb-req { color: var(--gb-err); } /**/ /**/ .gb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /**/ .gb-field--half { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-md); align-items: end; } /**/ .gb-field--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } /**/ .gb-field--top { align-items: start; } .gb-field--narrow input { max-width: 120px; } @media (max-width: 599px) { .gb-field--half, .gb-field--7-5 { grid-template-columns: 1fr; } } /**/ .gb-input-group { display: flex; align-items: stretch; } .gb-input-group input { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; } .gb-input-group__addon { display: inline-flex; align-items: center; padding: 0 var(--gb-sp-md); border: 1px solid var(--gb-line-4); border-left: 0; border-top-right-radius: var(--gb-r-sm); border-bottom-right-radius: var(--gb-r-sm); background: var(--gb-bg-4); color: var(--gb-ink-2); font-size: var(--gb-fs-xs); white-space: nowrap; } .gb-note { padding: var(--gb-sp-sm) var(--gb-sp-md); border-radius: var(--gb-r-sm); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); border: 1px solid var(--gb-line-4); background: var(--gb-bg-4); } .gb-note--warn { border-color: var(--gb-warn-bd); background: var(--gb-warn-bg); } .gb-note--ok { border-color: var(--gb-green-tint-2); background: var(--gb-green-tint); color: var(--gb-green-2); } .gb-note--err { border-color: #ffc9c2; background: #ffe9e6; color: var(--gb-err); } /**/ .ac-section { display: grid; gap: var(--gb-sp-md); } .ac-section > h2 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; } .rma-search { position: relative; max-width: 420px; } .rma-search .ico { position: absolute; left: var(--gb-sp-md); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gb-ink-2); pointer-events: none; } .rma-search input { width: 100%; min-height: 44px; padding: 0 var(--gb-sp-md) 0 42px; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-pill); background: #fff; font-size: var(--gb-fs-input); } .rma-search input:focus { border-color: var(--gb-info); } .rma-list { display: grid; gap: var(--gb-sp-sm); } .rma-item { display: grid; grid-template-columns: 24px 64px minmax(0, 1fr) auto; align-items: center; gap: var(--gb-sp-md); padding: var(--gb-sp-sm) var(--gb-sp-md); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff; } .rma-item.is-settled { background: var(--gb-bg-4); color: var(--gb-ink-2); } .rma-item__pick { display: flex; align-items: center; justify-content: center; cursor: pointer; } .rma-item__pick input { width: 20px; height: 20px; accent-color: var(--gb-green); cursor: pointer; } .rma-item__lock { display: flex; align-items: center; justify-content: center; color: var(--gb-mut-inv); } .rma-item__lock .ico { width: 18px; height: 18px; } .rma-item__img { display: block; width: 64px; height: 64px; } .rma-item__img img, .rma-item__img picture { width: 100%; height: 100%; } .rma-item__body { min-width: 0; } .rma-item__name { display: block; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; color: var(--gb-navy); text-decoration: none; } .rma-item__name:hover { text-decoration: underline; } .rma-item.is-settled .rma-item__name { color: inherit; } .rma-item__meta { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); margin-top: 2px; } .rma-item__meta a { color: inherit; } .rma-item__flags { display: flex; flex-wrap: wrap; gap: 4px var(--gb-sp-md); margin-top: 4px; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); } .rma-item__flags:empty { display: none; } .rma-flag { display: inline-flex; align-items: center; gap: 5px; } .rma-flag .ico { width: 14px; height: 14px; } .rma-flag--ok { color: var(--gb-green-2); } .rma-flag--late { color: var(--gb-err); } .rma-flag--off { color: var(--gb-ink-2); font-weight: 600; } /**/ .rma-flag--hint { color: var(--gb-ink-2); } .rma-item__acts { display: flex; gap: var(--gb-sp-xs); flex-wrap: wrap; } /**/ .rma-bar { position: fixed; left: 50%; bottom: var(--gb-sp-lg); transform: translateX(-50%); z-index: var(--gb-z-drop); display: flex; align-items: center; gap: var(--gb-sp-md); flex-wrap: wrap; padding: var(--gb-sp-sm) var(--gb-sp-lg); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-pill); background: #fff; box-shadow: var(--gb-shadow-drop); font-size: var(--gb-fs-xs); } @media (max-width: 899px) { .rma-item { grid-template-columns: 24px 56px minmax(0, 1fr); } .rma-item__acts { grid-column: 1 / -1; } .rma-item__acts .gb-btn { flex: 1 1 auto; } .rma-bar { left: var(--gb-sp-sm); right: var(--gb-sp-sm); transform: none; justify-content: center; border-radius: var(--gb-r-md); } } /**/ /**/ .gb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-md); overflow: hidden; background: #fff; } .gb-grid > * { position: relative; } .gb-grid > *::after { content: ''; position: absolute; top: 0; left: 0; right: -1px; bottom: -1px; z-index: 1; border-right: 1px solid var(--gb-line-4); border-bottom: 1px solid var(--gb-line-4); pointer-events: none; } @media (max-width: 1099px) { .gb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .gb-grid { grid-template-columns: 1fr; } } .gb-card { display: flex; flex-direction: column; padding: var(--gb-sp-md); text-decoration: none; color: inherit; } .gb-card:hover { background: var(--gb-bg-4); } .gb-card__img { aspect-ratio: 1 / 1; } /**/ .gb-card__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--gb-sp-sm); } .gb-card__img img, .gb-card__img picture { width: 100%; height: 100%; display: block; } .gb-card__name { margin-top: var(--gb-sp-sm); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .gb-card__foot { margin-top: auto; padding-top: var(--gb-sp-sm); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gb-sp-sm); } .gb-card__stock { font-size: var(--gb-fs-xxs); color: var(--gb-green-2); } .gb-card__stock--out { color: var(--gb-mut-inv); } .gb-card__price { text-align: right; } .gb-card__price s { display: block; font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); } .gb-card__price strong { font-size: var(--gb-fs-lg); line-height: 1.2; font-weight: 600; } .gb-card__price--sale strong { color: var(--gb-promo); } /**/ .pl__top { padding-bottom: var(--gb-sp-lg); } .pl__head h1 { font-size: var(--gb-fs-2xl); line-height: 1.25; font-weight: 600; } /**/ #main h1[tabindex="-1"]:focus { outline: none; } .pl__annot { max-width: 920px; margin-top: var(--gb-sp-sm); color: var(--gb-ink-2); } /**/ .pl-subcats { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-lg); } .pl-subcats a { display: inline-flex; align-items: center; gap: var(--gb-sp-sm); padding: var(--gb-sp-xs) var(--gb-sp-lg) var(--gb-sp-xs) var(--gb-sp-xs); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-pill); background: #fff; color: var(--gb-ink); text-decoration: none; font-size: var(--gb-fs-xs); font-weight: 600; } .pl-subcats a:hover { border-color: var(--gb-navy-mut); } .pl-subcats a[aria-current] { background: var(--gb-navy-tint); border-color: var(--gb-navy-mut); } .pl-subcats img { width: 32px; height: 32px; border-radius: 50%; background: var(--gb-bg-4); } /**/ .pl-bar { border-block: 1px solid var(--gb-line-3); background: var(--gb-bg-4); } .pl-bar__in { display: flex; align-items: center; gap: var(--gb-sp-md); flex-wrap: wrap; padding-block: var(--gb-sp-md); } .pl-bar__label { font-size: var(--gb-fs-xs); font-weight: 600; } /**/ .pl-bar__active { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-sp-sm) var(--gb-sp-md); } .pl-chips { display: flex; gap: var(--gb-sp-sm); flex-wrap: wrap; } /**/ .pl-chip { display: inline-flex; align-items: center; gap: var(--gb-sp-sm); padding: 5px var(--gb-sp-md); background: #fff; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); font-size: var(--gb-fs-xs); color: var(--gb-ink); } .pl-chip__group { color: var(--gb-ink-2); } .pl-chip__val { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; border-radius: var(--gb-r-sm); } .pl-chip__val b { font-weight: 600; } .pl-chip__val:hover { color: var(--gb-err); } .pl-chip .ico { width: 14px; height: 14px; color: var(--gb-ink-2); } .pl-chip__val:hover .ico { color: var(--gb-err); } .pl-bar__clear { color: var(--gb-err); font-size: var(--gb-fs-xs); } .pl-bar__right { margin-left: auto; display: flex; align-items: center; gap: var(--gb-sp-md); font-size: var(--gb-fs-xs); } .pl-bar__count { color: var(--gb-ink-2); white-space: nowrap; } .pl-bar__sort { display: inline-flex; align-items: center; gap: var(--gb-sp-xs); white-space: nowrap; } /**/ .pl-bar__sort select { border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); min-height: 40px; padding: 0 var(--gb-sp-sm); background: #fff; max-width: 190px; } /**/ .pl-bar__filters { display: none; align-items: center; gap: var(--gb-sp-sm); min-height: 40px; padding: 0 var(--gb-sp-md); border: 1px solid var(--gb-navy); border-radius: var(--gb-r-pill); font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-navy); background: #fff; } .pl-bar__filters .ico { width: 18px; height: 18px; } .pl-bar__filters-n { min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--gb-r-pill); background: var(--gb-green); color: #fff; font-size: var(--gb-fs-xxs); font-weight: 600; } /**/ .pl__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--gb-sp-xl); align-items: start; padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); } .pl__main { min-width: 0; } /**/ .pl__main.is-loading { opacity: .55; pointer-events: none; transition: opacity .15s; } /**/ .pl-filters__head, .pl-filters__foot { display: none; } .pl-fs { border: 0; padding: 0; margin: 0 0 var(--gb-sp-lg); } .pl-fs legend { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; margin-bottom: var(--gb-sp-sm); padding: 0; } /**/ .pl-fs legend.is-active { text-decoration: underline; text-underline-offset: 4px; } .pl-opts { display: flex; flex-direction: column; } .pl-opts--swatch { flex-direction: row; flex-wrap: wrap; gap: var(--gb-sp-sm); } /**/ .pl-opt { position: relative; display: flex; align-items: center; gap: var(--gb-sp-sm); padding: 5px 0; font-size: var(--gb-fs-xs); cursor: pointer; } .pl-opt input, .pl-brand input, .pl-swatch input { position: absolute; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer; } .pl-opt__box { width: 20px; height: 20px; flex: none; border: 1px solid var(--gb-line-4); border-radius: 4px; background: #fff; display: flex; align-items: center; justify-content: center; } .pl-opt__box .ico { width: 14px; height: 14px; color: #fff; opacity: 0; } .pl-opt input:checked + .pl-opt__box { background: var(--gb-green); border-color: var(--gb-green); } .pl-opt input:checked + .pl-opt__box .ico { opacity: 1; } .pl-opt input:focus-visible + .pl-opt__box { outline: 2px solid var(--gb-info); outline-offset: 2px; } .pl-opt__name { min-width: 0; } .pl-opt__count { margin-left: auto; color: var(--gb-mut-inv); font-size: var(--gb-fs-xxs); white-space: nowrap; } /**/ .pl-opt.is-off, .pl-brand.is-off { opacity: .45; cursor: not-allowed; } .pl-opt.is-off .pl-opt__name { text-decoration: line-through; } /**/ /**/ .pl-brand { position: relative; display: flex; align-items: center; gap: var(--gb-sp-sm); min-height: 56px; padding: var(--gb-sp-sm) var(--gb-sp-md); margin-bottom: var(--gb-sp-xs); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: #fff; font-size: var(--gb-fs-xs); cursor: pointer; } .pl-brand:hover { border-color: var(--gb-navy-mut); } .pl-brand:has(input:checked) { border-color: var(--gb-green); border-width: 2px; background: var(--gb-green-tint); /**/ padding: calc(var(--gb-sp-sm) - 1px) calc(var(--gb-sp-md) - 1px); } .pl-brand:has(input:focus-visible) { outline: 2px solid var(--gb-info); outline-offset: 2px; } .pl-brand img { width: 52px; height: 26px; flex: none; } /**/ .pl-opts > .is-fade { opacity: .4; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); } .pl-opts > .is-over { display: none; } /**/ .pl-sz__sys { margin-bottom: var(--gb-sp-sm); } .pl-fs--sz .pl-sz:not([data-sz-list="eu"]) { display: none; } html[data-sz-sys="uk"] .pl-fs--sz:has(.pl-sz[data-sz-list="uk"]) .pl-sz[data-sz-list="eu"], html[data-sz-sys="us"] .pl-fs--sz:has(.pl-sz[data-sz-list="us"]) .pl-sz[data-sz-list="eu"], html[data-sz-sys="mm"] .pl-fs--sz:has(.pl-sz[data-sz-list="mm"]) .pl-sz[data-sz-list="eu"] { display: none; } html[data-sz-sys="uk"] .pl-fs--sz .pl-sz[data-sz-list="uk"], html[data-sz-sys="us"] .pl-fs--sz .pl-sz[data-sz-list="us"], html[data-sz-sys="mm"] .pl-fs--sz .pl-sz[data-sz-list="mm"] { display: flex; } /**/ .pl-opt.is-near .pl-opt__box { position: relative; border-color: var(--gb-green); } .pl-opt.is-near .pl-opt__box::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; border-radius: 1px; background: var(--gb-green); transform: translate(-50%, -50%); } .pl-opt.is-near input:checked + .pl-opt__box::after { display: none; } .pl-filters__search { position: relative; margin-bottom: var(--gb-sp-sm); } .pl-filters__search .ico { position: absolute; left: var(--gb-sp-md); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gb-mut-inv); } .pl-filters__search input { width: 100%; min-height: 44px; padding: 0 var(--gb-sp-md) 0 42px; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: #fff; font-size: var(--gb-fs-xs); } .pl-more { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; color: var(--gb-navy); font-size: var(--gb-fs-xs); text-decoration: underline; text-underline-offset: 3px; } .pl-more .ico { width: 16px; height: 16px; } /**/ .pl-swatch { position: relative; cursor: pointer; } .pl-swatch__dot { display: block; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gb-line-4); box-shadow: inset 0 0 0 2px #fff; } .pl-swatch input:checked + .pl-swatch__dot { border-color: var(--gb-green); box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--gb-green); } .pl-swatch input:focus-visible + .pl-swatch__dot { outline: 2px solid var(--gb-info); outline-offset: 2px; } .pl-swatch.is-off { opacity: .35; cursor: not-allowed; } /**/ .pl-range { position: relative; height: 36px; margin-bottom: var(--gb-sp-md); } .pl-range__track { position: absolute; left: 0; right: 0; top: 13px; height: 10px; border: 1px solid var(--gb-navy-mut); border-radius: var(--gb-r-pill); background: var(--gb-navy-tint); } .pl-range__fill { position: absolute; top: -1px; bottom: -1px; background: var(--gb-navy-mut); border-radius: var(--gb-r-pill); } .pl-range__in { position: absolute; left: 0; top: 0; width: 100%; height: 36px; margin: 0; -webkit-appearance: none; appearance: none; background: none; pointer-events: none; } .pl-range__in::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--gb-navy); border: 0; cursor: grab; } .pl-range__in::-moz-range-thumb { pointer-events: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--gb-navy); border: 0; cursor: grab; } .pl-range__in:focus-visible { outline: none; } .pl-range__in:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--gb-info); outline-offset: 2px; } .pl-range__in:focus-visible::-moz-range-thumb { outline: 2px solid var(--gb-info); outline-offset: 2px; } /**/ .pl-range__cap { position: absolute; top: 0; height: 36px; width: 36px; display: flex; align-items: center; justify-content: center; left: calc(var(--pos, 0) * (100% - 36px)); font-size: var(--gb-fs-xxs); line-height: 1; font-weight: 600; color: #fff; pointer-events: none; } .pl-price { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); } .pl-price input { flex: 0 1 122px; min-width: 0; height: 42px; padding: 0 var(--gb-sp-sm); border: 1px solid var(--gb-navy-mut); border-radius: var(--gb-r-sm); background: #fff; color: var(--gb-ink); font-size: var(--gb-fs-sm); } .pl-price input::placeholder { color: var(--gb-mut-inv); } /**/ .pl-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1399px) { .pl-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1099px) { .pl-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /**/ @media (max-width: 599px) { .pl-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-products .gb-card { padding: var(--gb-sp-sm); } .pl-products .gb-card__price strong { font-size: var(--gb-fs-sm); } .pl-products .gb-card__foot { flex-direction: column; align-items: flex-start; gap: 2px; } .pl-products .gb-card__price { text-align: left; } } /**/ .pl-loadmore { display: flex; justify-content: center; margin-top: var(--gb-sp-lg); } .pl-loadmore button { min-width: 220px; justify-content: center; } .pl-loadmore__spin { display: none; width: 16px; height: 16px; margin-left: var(--gb-sp-sm); border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: gb-spin .7s linear infinite; } .pl-loadmore button.is-loading .pl-loadmore__spin { display: inline-block; } @keyframes gb-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pl-loadmore__spin { animation: none; } } .pl-pager { display: flex; align-items: center; justify-content: center; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-lg); flex-wrap: wrap; } .pl-pager a, .pl-pager span { min-width: 44px; min-height: 44px; padding: 0 var(--gb-sp-md); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--gb-r-pill); font-size: var(--gb-fs-xs); text-decoration: none; color: var(--gb-navy); } .pl-pager a:hover { background: var(--gb-bg-4); } /**/ .pl-pager a.is-loaded { font-weight: 600; } .pl-pager [aria-current="page"] { background: var(--gb-navy); color: #fff; font-weight: 600; } .pl-pager [aria-current="page"]:hover { background: var(--gb-navy); } .pl-pager__nav { border: 1px solid var(--gb-navy); } .pl-pager__gap { min-width: 20px; padding: 0; color: var(--gb-mut-inv); } .pl-empty { padding: var(--gb-sp-2xl) 0; text-align: center; color: var(--gb-ink-2); display: grid; gap: var(--gb-sp-lg); justify-items: center; } /**/ .pl-backdrop { position: fixed; inset: 0; z-index: 79; background: rgba(9, 40, 87, .45); } @media (max-width: 899px) { .pl__grid { grid-template-columns: 1fr; gap: var(--gb-sp-md); } .pl-bar__filters { display: inline-flex; } .pl-bar__label, .pl-bar__count { display: none; } .pl-bar__right { margin-left: auto; } .pl-filters { position: fixed; z-index: 80; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: min(92vw, 360px); padding: 0 var(--gb-sp-md); background: #fff; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--gb-shadow-drop); } body.pl-filters-open { overflow: hidden; } body.pl-filters-open .pl-filters { transform: translateX(0); } .pl-filters__head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; margin-inline: calc(-1 * var(--gb-sp-md)); padding: var(--gb-sp-md); background: #fff; border-bottom: 1px solid var(--gb-line-3); font-size: var(--gb-fs-lg); } .pl-filters__close { width: 44px; height: 44px; display: grid; place-items: center; } .pl-filters__close .ico { width: 20px; height: 20px; } /**/ .pl-filters__foot { display: block; position: sticky; bottom: 0; z-index: 1; margin: auto calc(-1 * var(--gb-sp-md)) 0; padding: var(--gb-sp-md); background: #fff; border-top: 1px solid var(--gb-line-3); } .pl-filters__foot .gb-btn { width: 100%; justify-content: center; } } @media (min-width: 900px) { /**/ .pl-backdrop { display: none; } } @media (prefers-reduced-motion: reduce) { .pl-filters { transition: none; } } /**/ .gb-pills { display: flex; gap: var(--gb-sp-sm); flex-wrap: wrap; } .gb-pills a, .gb-pills button { padding: 0 var(--gb-sp-lg); min-height: 44px; display: inline-flex; align-items: center; border: 1px solid var(--gb-navy); border-radius: var(--gb-r-pill); background: #fff; color: var(--gb-navy); font-size: var(--gb-fs-xs); font-weight: 600; text-decoration: none; } .gb-pills [aria-current="true"], .gb-pills .is-active { background: var(--gb-navy); color: #fff; } /**/ .gb-content { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm); } .gb-content > * + * { margin-top: var(--gb-sp-md); } .gb-content h2 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; margin-top: var(--gb-sp-xl); } .gb-content h3 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; margin-top: var(--gb-sp-lg); } .gb-content h4 { font-size: var(--gb-fs-sm); font-weight: 600; } .gb-content p { margin-block: 0; } /**/ .gb-content a:where(:not(.gb-btn, .btn)) { color: var(--gb-navy); text-underline-offset: 3px; } .gb-content ul, .gb-content ol { padding-left: 1.35em; } .gb-content li + li { margin-top: var(--gb-sp-xs); } .gb-content ul { list-style: disc; } .gb-content ol { list-style: decimal; } .gb-content img { height: auto; border-radius: var(--gb-r-sm); margin-inline: auto; } .gb-content figure { margin: 0; } .gb-content figcaption { font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); text-align: center; margin-top: var(--gb-sp-xs); } .gb-content hr { border: 0; border-top: 1px solid var(--gb-line-3); margin-block: var(--gb-sp-lg); } .gb-content blockquote { margin: 0; padding: var(--gb-sp-md) var(--gb-sp-lg); border-left: 3px solid var(--gb-green); background: var(--gb-bg-4); border-radius: 0 var(--gb-r-sm) var(--gb-r-sm) 0; } /**/ .gb-content table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-size: var(--gb-fs-xs); } .gb-content th, .gb-content td { padding: var(--gb-sp-sm) var(--gb-sp-md); border: 1px solid var(--gb-line-3); text-align: left; } .gb-content th { background: var(--gb-bg-4); font-weight: 600; } .gb-content iframe { max-width: 100%; border: 0; border-radius: var(--gb-r-sm); } /**/ .gb-content iframe[src*="youtube"], .gb-content iframe[src*="vimeo"] { width: 100%; aspect-ratio: 16 / 9; height: auto; } /**/ /**/ .gb-cols { display: grid; gap: var(--gb-sp-lg); grid-template-columns: repeat(2, minmax(0, 1fr)); } .gb-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gb-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 899px) { .gb-cols, .gb-cols--3, .gb-cols--4 { grid-template-columns: 1fr; } } /**/ .gb-cols > * > * + * { margin-top: var(--gb-sp-md); } /**/ .gb-box { padding: var(--gb-sp-lg); background: var(--gb-bg-4); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); } .gb-box > * + * { margin-top: var(--gb-sp-sm); } .gb-box--green { background: var(--gb-green-tint); border-color: var(--gb-green-tint-2); } .gb-box--navy { background: var(--gb-navy); border-color: var(--gb-navy); color: #fff; } .gb-box--navy a { color: #fff; } /**/ .gb-panel { padding: var(--gb-sp-2xl) var(--gb-sp-xl); border-radius: var(--gb-r-md); background: var(--gb-green); color: #fff; text-align: center; } .gb-panel > * + * { margin-top: var(--gb-sp-md); } .gb-panel h2, .gb-panel h3 { color: #fff; margin-top: 0; } .gb-panel a { color: #fff; } /**/ .gb-content :is(.gb-cols > *, .gb-panel) > * + p { margin-top: var(--gb-sp-md); } .gb-content .gb-box > * + p { margin-top: var(--gb-sp-sm); } /**/ .gb-content .gb-text > * + :is(p, ul, ol, blockquote, table, .gb-box, .gb-cols, .gb-alert) { margin-top: var(--gb-sp-md); } .gb-content .gb-text [id] { scroll-margin-top: 100px; } /**/ .gb-alert { display: flex; gap: var(--gb-sp-sm); padding: var(--gb-sp-md) var(--gb-sp-lg); border-radius: var(--gb-r-sm); background: var(--gb-info-bg); color: var(--gb-ink); border-left: 3px solid var(--gb-info); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .gb-alert--success { background: var(--gb-green-tint); border-left-color: var(--gb-green); } .gb-alert--warning { background: var(--gb-warn-bg); border-left-color: var(--gb-warn-strong); } .gb-alert--danger { background: var(--gb-promo-bg); border-left-color: var(--gb-err); } /**/ .gb-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gb-sp-lg); text-align: center; } .gb-features > * > strong { display: block; font-weight: 600; } .gb-features > * > span { font-size: var(--gb-fs-xs); opacity: .85; } @media (max-width: 899px) { .gb-features { grid-template-columns: 1fr; } } /**/ .gb-lead { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; } .gb-muted { color: var(--gb-ink-2); } .gb-center-text { text-align: center; } /**/ .gb-article__head { max-width: 850px; margin: 0 auto var(--gb-sp-lg); text-align: center; } .gb-article__head h1 { font-size: var(--gb-fs-2xl); line-height: 1.25; font-weight: 600; } .gb-article__date { margin-top: var(--gb-sp-xs); font-size: var(--gb-fs-xs); color: var(--gb-ink-2); } .gb-article__perex { margin-top: var(--gb-sp-md); font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); color: var(--gb-ink-2); } /**/ .gb-article__body { max-width: 850px; margin-inline: auto; } .gb-video { max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; } .gb-video iframe { width: 100%; height: 100%; border: 0; border-radius: var(--gb-r-md); } /**/ .gb-toast { position: fixed; left: 50%; bottom: var(--gb-sp-lg); transform: translateX(-50%); z-index: 90; background: var(--gb-green); color: #fff; border-radius: var(--gb-r-pill); padding: 12px 24px; font-weight: 600; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); } .gb-toast--err { background: var(--gb-err); } /**/ .gb-modal { position: fixed; inset: 0; z-index: var(--gb-z-modal); display: grid; padding: var(--gb-sp-md); overflow-y: auto; overscroll-behavior: contain; } .gb-modal__backdrop { position: fixed; inset: 0; background: rgba(5, 24, 52, .55); } .gb-modal__dialog { position: relative; width: min(440px, 92vw); margin: auto; max-height: calc(100vh - 2 * var(--gb-sp-md)); /**/ max-height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--gb-bg); color: var(--gb-ink); border-radius: var(--gb-r-md); padding: 0 var(--gb-sp-xl) var(--gb-sp-xl); /**/ box-shadow: var(--gb-shadow-drop); } /**/ .gb-modal__close { position: sticky; top: 11px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; margin: 11px -29px -3px auto; border-radius: 50%; background: var(--gb-bg); color: var(--gb-ink-2); } .gb-modal__close:hover { color: var(--gb-ink); } .gb-modal__title { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; margin-bottom: var(--gb-sp-lg); padding-right: var(--gb-sp-lg); } .gb-modal__row { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .gb-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; margin-top: var(--gb-sp-lg); font-size: var(--gb-fs-xs); } /**/ .gb-modal__dialog--wide { width: min(760px, 92vw); } /**/ .gb-modal__dialog--split { width: min(1340px, 94vw); padding: 0; } .gb-modal__dialog--split.gb-modal__dialog--narrow { width: min(800px, 94vw); } /**/ .gb-modal .gb-modal__dialog--split > .gb-modal__close { width: 40px; height: 40px; margin: 8px 8px -48px auto; } .gb-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .gb-split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .gb-split__side, .gb-split__main { padding: 48px; } .gb-split__side { background: var(--gb-bg); border-right: 1px solid var(--gb-line-3); } .gb-split__main { background: var(--gb-bg-4); } @media (max-width: 991px) { .gb-split__side, .gb-split__main { padding: 48px 24px 24px; } } @media (max-width: 767px) { .gb-split, .gb-split--5-7 { grid-template-columns: minmax(0, 1fr); } .gb-split__side { border-right: 0; border-bottom: 1px solid var(--gb-line-3); } .gb-split__main { padding-top: 24px; } } .gb-split__title { margin-bottom: 8px; text-align: center; font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--gb-navy); } .gb-split__lead { margin-bottom: 24px; text-align: center; font-size: 13px; line-height: 1.4; color: var(--gb-ink-2); } .gb-split__lead a { color: var(--gb-green-2); } /**/ .gb-split__prod { padding: 16px; border: 1px solid var(--gb-line-4); border-radius: 8px; text-align: center; } .gb-split__thumb { display: block; width: auto; height: auto; max-width: 130px; max-height: 110px; margin: 0 auto 8px; object-fit: contain; } .gb-split__name { font-size: var(--gb-fs-sm); line-height: 1.4; font-weight: 700; color: var(--gb-navy); } .gb-split__name:not(:last-child) { margin-bottom: 16px; } /**/ .gb-split .gb-field label { margin-bottom: 8px; font-size: var(--gb-fs-sm); line-height: 1.4; } .gb-split .gb-req { color: var(--gb-err-ink); } /**/ .gb-modal .gb-split .gb-field :is(input, select, textarea) { border-radius: 6px; } .gb-modal .gb-split .gb-field textarea { min-height: 0; } .gb-modal .gb-split .gb-input-group input { border-radius: 6px 0 0 6px; } .gb-split .gb-input-group__addon { border-radius: 0 6px 6px 0; font-size: var(--gb-fs-sm); color: var(--gb-ink); } /**/ .gb-split .gb-btn.gb-split__submit { min-height: 56px; border-radius: 8px; font-size: var(--gb-fs-sm); font-weight: 600; text-transform: none; letter-spacing: 0; } .gb-split__submit .ico { width: 18px; height: 18px; } .gb-split__terms { text-align: center; } .gb-split__terms a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.4; color: var(--gb-ink-2); text-decoration: none; } .gb-split__terms a:hover { text-decoration: underline; } .gb-split__terms .ico { width: 16px; height: 16px; } .gb-modal__body { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .gb-modal__body > * + * { margin-top: var(--gb-sp-sm); } /**/ .gb-form > * + * { margin-top: var(--gb-sp-md); } .gb-field label { display: block; margin-bottom: 4px; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .gb-field input, .gb-field select, .gb-field textarea { width: 100%; min-height: 44px; padding: 0 var(--gb-sp-md); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: var(--gb-bg); color: var(--gb-ink); font-size: var(--gb-fs-input); /**/ } .gb-field textarea { padding-block: var(--gb-sp-sm); min-height: 120px; } /**/ .gb-field input:focus, .gb-field select:focus, .gb-field textarea:focus { border-color: var(--gb-info); } .gb-check { display: inline-flex; align-items: center; gap: var(--gb-sp-sm); cursor: pointer; } .gb-check input { width: 20px; height: 20px; flex: none; accent-color: var(--gb-green); } .gb-form__err { color: var(--gb-err); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } /**/ .rt-hero { background: var(--gb-navy); color: #fff; } .rt-hero__in { display: flex; align-items: center; gap: var(--gb-sp-lg); padding-block: var(--gb-sp-2xl); flex-wrap: wrap; } .rt-hero__ico { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; flex: none; border-radius: var(--gb-r-md); background: rgba(37, 143, 30, .22); border: 1px solid rgba(37, 143, 30, .55); color: #8fd47f; } .rt-hero__ico .ico { width: 40px; height: 40px; } .rt-hero h1 { font-size: var(--gb-fs-2xl); line-height: 1.2; font-weight: 600; } .rt-hero p { max-width: 720px; margin-top: var(--gb-sp-sm); color: var(--gb-ink-inv); } .rt-h2 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; } .rt-sub, .rt-p { color: var(--gb-ink-2); margin-top: var(--gb-sp-xs); } .rt-lead { margin-bottom: var(--gb-sp-md); } /**/ .rt-gate { border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff; overflow: hidden; box-shadow: var(--gb-shadow-sm); } .rt-gate__head { background: var(--gb-navy); color: #fff; padding: var(--gb-sp-md) var(--gb-sp-lg); } .rt-gate__head h2 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; } .rt-gate__body { padding: var(--gb-sp-lg); display: grid; gap: var(--gb-sp-md); } .rt-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-lg); } .rt-way { display: flex; flex-direction: column; gap: var(--gb-sp-sm); padding: var(--gb-sp-lg); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); } .rt-way h3 { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; color: var(--gb-navy); } .rt-way p { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .rt-way__form { margin-top: auto; } .rt-way__ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--gb-r-sm); } .rt-way__ico .ico { width: 22px; height: 22px; } .rt-way__ico--acc { background: var(--gb-navy-tint); color: var(--gb-navy); } .rt-way__ico--guest { background: var(--gb-green-tint); color: var(--gb-green-2); } .rt-note { display: flex; align-items: flex-start; gap: 8px; font-size: var(--gb-fs-xs); color: var(--gb-ink-2); } .rt-note .ico { width: 16px; height: 16px; flex: none; margin-top: 3px; } /**/ .rt-bought { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-sm); } .rt-bought__item { display: flex; align-items: center; gap: var(--gb-sp-sm); padding: var(--gb-sp-sm); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); } .rt-bought__img { width: 56px; height: 56px; flex: none; } .rt-bought__img img, .rt-bought__img picture { width: 100%; height: 100%; mix-blend-mode: multiply; } .rt-bought__info { min-width: 0; flex: 1 1 auto; } .rt-bought__name { display: block; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; color: var(--gb-navy); } .rt-bought__meta { display: block; font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); } /**/ .rt-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gb-sp-lg); margin-top: var(--gb-sp-lg); } .rt-step { padding: var(--gb-sp-lg); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff; } .rt-step__num { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: var(--gb-sp-sm); border-radius: 50%; background: var(--gb-navy); color: #fff; font-weight: 600; } .rt-step h3 { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; color: var(--gb-navy); } .rt-step p { margin-top: var(--gb-sp-xs); color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } /**/ .rt-list { list-style: none; margin: var(--gb-sp-md) 0 0; padding: 0; display: grid; gap: var(--gb-sp-sm); } .rt-list li { display: flex; align-items: flex-start; gap: var(--gb-sp-sm); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .rt-list .ico { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--gb-green); } .rt-list--warn .ico { color: var(--gb-warn); } /**/ .rt-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-lg); margin-top: var(--gb-sp-lg); } .rt-kind { display: flex; flex-direction: column; gap: var(--gb-sp-xs); padding: var(--gb-sp-lg); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff; } .rt-kind.is-active { border-color: var(--gb-navy); box-shadow: var(--gb-shadow-sm); } .rt-kind h3 { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; color: var(--gb-navy); } .rt-kind p { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .rt-kind .gb-btn, .rt-kind__here { margin-top: auto; } .rt-kind__badge { align-self: flex-start; padding: 3px 10px; border-radius: var(--gb-r-pill); font-size: var(--gb-fs-xxs); font-weight: 600; } .rt-kind__badge--ret { background: var(--gb-green-tint); color: var(--gb-green-2); } .rt-kind__badge--cla { background: var(--gb-navy-tint); color: var(--gb-navy); } .rt-kind__here { display: flex; align-items: center; gap: 6px; padding-top: var(--gb-sp-md); font-size: var(--gb-fs-xxs); font-weight: 600; color: var(--gb-ink-2); } .rt-kind__here .ico { width: 14px; height: 14px; } /**/ .rt-ship { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gb-sp-xl); align-items: start; } /**/ .rt-crosslink { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--gb-ink-2); } .rt-crosslink .ico { width: 18px; height: 18px; flex: none; margin-top: 2px; } /**/ .rt-faq { display: grid; gap: var(--gb-sp-xs); margin-top: var(--gb-sp-lg); } .rt-faq__item { border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: #fff; } .rt-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); padding: var(--gb-sp-md) var(--gb-sp-lg); cursor: pointer; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; list-style: none; } .rt-faq__item summary::-webkit-details-marker { display: none; } .rt-faq__item summary .ico { width: 18px; height: 18px; flex: none; color: var(--gb-ink-2); transition: transform .15s ease; } .rt-faq__item[open] summary .ico { transform: rotate(180deg); } .rt-faq__item[open] summary { color: var(--gb-navy); } .rt-faq__body { padding: 0 var(--gb-sp-lg) var(--gb-sp-md); color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .rt-faq__terms { margin-top: var(--gb-sp-md); } /**/ .rt-cta { padding: var(--gb-sp-2xl) var(--gb-sp-lg); border-radius: var(--gb-r-md); background: var(--gb-bg-4); text-align: center; } .rt-cta h2 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; } .rt-cta p { margin: var(--gb-sp-xs) 0 var(--gb-sp-md); color: var(--gb-ink-2); } @media (max-width: 899px) { .rt-ways, .rt-steps, .rt-kinds, .rt-bought, .rt-ship { grid-template-columns: 1fr; } .rt-hero__in { gap: var(--gb-sp-md); } .rt-hero__ico { width: 60px; height: 60px; } .rt-hero__ico .ico { width: 28px; height: 28px; } } /**/ .rw { display: grid; gap: var(--gb-sp-md); } .rw-item { border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff; padding: var(--gb-sp-md); } .rw-item.is-picked { border-color: var(--gb-green); box-shadow: inset 0 0 0 1px var(--gb-green); } .rw-item.is-settled { background: var(--gb-bg-4); color: var(--gb-ink-2); } .rw-item__head { display: grid; grid-template-columns: 24px 64px minmax(0, 1fr); align-items: center; gap: var(--gb-sp-md); } .rw-item__detail { border-top: 1px solid var(--gb-line-3); margin-top: var(--gb-sp-md); padding-top: var(--gb-sp-md); display: grid; gap: var(--gb-sp-md); } /**/ /**/ .rw-kind { display: inline-flex; justify-self: start; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); overflow: hidden; } .rw-kind button { padding: 9px var(--gb-sp-lg); border: 0; background: #fff; color: var(--gb-ink); font-family: inherit; font-size: var(--gb-fs-xs); font-weight: 600; cursor: pointer; } .rw-kind button + button { border-left: 1px solid var(--gb-line-4); } .rw-kind button.is-on { background: var(--gb-green); color: #fff; } .rw-kindbadge { display: inline-block; align-self: start; padding: 3px 12px; border-radius: var(--gb-r-pill); font-size: var(--gb-fs-xxs); font-weight: 600; } .rw-kindbadge--claim { background: var(--gb-promo-bg); color: var(--gb-promo); } .rw-kindbadge--ret { background: var(--gb-green-tint); color: var(--gb-green-2); } .rw-kindbadge--storno { background: var(--gb-warn-bg); color: #8a6d00; } .rw-hint { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); } .rw-fields { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--gb-sp-md); align-items: start; } .rw-fields__note textarea { min-height: 72px; } /**/ .rw-reason select { max-width: 340px; } .rw-swap { border: 1px solid var(--gb-green); border-radius: var(--gb-r-md); background: var(--gb-green-tint); padding: var(--gb-sp-md); display: grid; gap: var(--gb-sp-sm); } .rw-swap__title { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; color: var(--gb-navy); } .rw-swap__opts { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm); } .rw-swap__opt { display: inline-flex; align-items: center; gap: var(--gb-sp-xs); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: #fff; padding: 6px 10px; cursor: pointer; } .rw-swap__opt input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--gb-green); } .rw-swap__opt > span { display: flex; flex-direction: column; line-height: 1.15; } .rw-swap__opt strong { font-size: var(--gb-fs-xs); color: var(--gb-navy); } .rw-swap__opt em { font-style: normal; font-size: var(--gb-fs-xxs); color: var(--gb-green-2); } .rw-swap__hint { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); } /**/ .rw-box { border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff; padding: var(--gb-sp-lg); display: grid; gap: var(--gb-sp-sm); } .rw-box > h2 { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; color: var(--gb-navy); } .rw-radio { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--gb-sp-sm); align-items: start; cursor: pointer; } .rw-radio input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gb-green); } .rw-radio strong { display: block; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .rw-radio .gb-muted { display: block; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); } .rw-bank { border-top: 1px solid var(--gb-line-3); padding-top: var(--gb-sp-md); display: grid; gap: var(--gb-sp-md); } .rw-or { text-align: center; font-size: var(--gb-fs-xxs); letter-spacing: .04em; text-transform: uppercase; color: var(--gb-mut-inv); } .rw-actions { display: flex; align-items: center; gap: var(--gb-sp-sm); flex-wrap: wrap; } @media (max-width: 899px) { .rw-item__head { grid-template-columns: 24px 56px minmax(0, 1fr); } .rw-fields { grid-template-columns: 1fr; } } /**/ .rd-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--gb-sp-xs) var(--gb-sp-lg); margin: 0; } .rd-kv dt { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .rd-kv dd { margin: 0; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .rd-media { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm); } .rd-photo, .rd-file { display: block; width: 110px; height: 110px; overflow: hidden; border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: var(--gb-bg-4); } /**/ .rd-photo img { width: 100%; height: 100%; object-fit: cover; } .rd-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--gb-sp-sm); text-align: center; text-decoration: none; color: var(--gb-ink-2); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); } .rd-file .ico { width: 28px; height: 28px; color: var(--gb-promo); } .rd-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .rd-video { position: relative; width: 190px; height: 110px; overflow: hidden; border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: #000; } /**/ .rd-video video { width: 100%; height: 100%; object-fit: contain; cursor: pointer; } .rd-video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; pointer-events: none; } .rd-video__play .ico { width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .8)); } .rd-video__tag { position: absolute; left: 0; bottom: 0; padding: 1px 6px; background: rgba(0, 0, 0, .6); color: #fff; font-size: var(--gb-fs-xxs); pointer-events: none; } .rd-vfail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 190px; height: 110px; padding: var(--gb-sp-sm); text-align: center; border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: var(--gb-bg-4); color: var(--gb-ink-2); font-size: var(--gb-fs-xxs); } .rd-lightbox { position: fixed; inset: 0; z-index: var(--gb-z-modal); display: flex; align-items: center; justify-content: center; background: rgba(5, 24, 52, .88); } .rd-lightbox video { max-width: 92vw; max-height: 92vh; background: #000; } /**/ .rd-msgs { list-style: none; margin: 0 0 var(--gb-sp-md); padding: 0; } .rd-msgs li { padding: var(--gb-sp-sm) 0; border-top: 1px solid var(--gb-line-3); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .rd-msgs li:first-child { border-top: 0; padding-top: 0; } .rd-msgs p { margin: 2px 0 0; white-space: pre-wrap; } /**/ .ac-boxhead { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; } .ac-boxhead h2 { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; color: var(--gb-navy); } .ac-subhead { font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-ink-2); } .rw-box.is-default { border-color: var(--gb-green); } .ac-newaddr { border: 1px dashed var(--gb-line-4); border-radius: var(--gb-r-sm); padding: var(--gb-sp-md); display: grid; gap: var(--gb-sp-sm); } /**/ .ac-addr { display: grid; gap: var(--gb-sp-md); } /**/ .ac-addr__row { display: grid; gap: var(--gb-sp-md); align-items: start; } .ac-addr__row--name { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .ac-addr__row--city { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); } .ac-addr__row--contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ac-addr__acts { display: flex; gap: var(--gb-sp-sm); justify-content: flex-end; flex-wrap: wrap; } /**/ .ac-field--btn { display: flex; align-items: flex-end; } .ac-btn-del { color: var(--gb-err-ink); border-color: #ffc9c2; } .ac-btn-del:hover { background: #ffe9e6; border-color: var(--gb-err); } /**/ .ac-emails { display: grid; gap: 6px; border-top: 1px solid var(--gb-line-3); padding-top: var(--gb-sp-md); } .ac-emails__head { font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-ink-2); } .ac-email { display: flex; align-items: center; gap: var(--gb-sp-sm); flex-wrap: wrap; padding: 6px 10px; border-radius: var(--gb-r-sm); background: var(--gb-bg-4); } .ac-email__addr { min-width: 180px; font-size: var(--gb-fs-xs); font-weight: 500; } .ac-email__nl { font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); } /**/ .ac-email__nl.is-on { color: var(--gb-green-2); } .ac-email__nlhint { font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); } /**/ .ac-emailadd { display: flex; gap: var(--gb-sp-sm); align-items: center; margin-top: var(--gb-sp-sm); flex-wrap: wrap; } .ac-emailadd input { flex: 1 1 240px; max-width: 300px; min-height: 36px; padding: 0 var(--gb-sp-md); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: #fff; font-size: var(--gb-fs-xs); } /**/ .ac-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: var(--gb-r-pill); border: 1px solid var(--gb-line-4); background: #fff; color: var(--gb-ink-2); font-family: inherit; font-size: var(--gb-fs-xxs); font-weight: 600; white-space: nowrap; cursor: pointer; } .ac-pill:hover { border-color: var(--gb-navy-mut); color: var(--gb-ink); } .ac-pill--on { color: var(--gb-green-2); border-color: var(--gb-green-tint-2); } .ac-pill--on:hover { background: var(--gb-green-tint); } .ac-pill--off { color: var(--gb-ink-2); } .ac-pill--del { color: var(--gb-err-ink); padding-inline: 10px; } .ac-pill--del:hover { background: #ffe9e6; border-color: var(--gb-err); color: var(--gb-err-ink); } @media (max-width: 899px) { .ac-addr__row--name, .ac-addr__row--city, .ac-addr__row--contact { grid-template-columns: 1fr; } .ac-addr__acts { justify-content: stretch; } .ac-addr__acts .gb-btn { flex: 1 1 auto; } } /**/ .ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gb-sp-sm); } .ph-card { position: relative; margin: 0; border-radius: var(--gb-r-md); overflow: hidden; background: var(--gb-bg-4); } .ph-card__open { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 0; background: none; cursor: zoom-in; } /**/ .ph-card__open img { width: 100%; height: 100%; object-fit: cover; } .ph-card__meta { position: absolute; left: 0; bottom: 0; right: 0; padding: 6px 8px; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); color: #fff; font-size: var(--gb-fs-xxs); pointer-events: none; } .ph-card__acts { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s ease; } .ph-card:hover .ph-card__acts, .ph-card:focus-within .ph-card__acts { opacity: 1; } /**/ @media (hover: none) { .ph-card__acts { opacity: 1; } } .ph-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--gb-r-sm); background: rgba(255, 255, 255, .94); color: var(--gb-ink); cursor: pointer; } .ph-btn .ico { width: 16px; height: 16px; } .ph-btn:hover { background: #fff; } .ph-btn--del:hover { background: var(--gb-err); color: #fff; } .ph-view img { max-width: 100%; max-height: 70vh; margin: 0 auto; } .ph-view .gb-modal__foot { justify-content: center; } /**/ .gt-list--tight { margin-top: var(--gb-sp-sm); gap: var(--gb-sp-xs); } .gt-list--no .ico { color: var(--gb-err); } .gt-badge--manual { background: var(--gb-warn-bg); color: #8a6d00; } .gt-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-lg); flex-wrap: wrap; text-align: left; } .gt-cta h2, .gt-cta p { text-align: left; } .gt-cta p { margin-bottom: 0; } .gt-disclaimer { margin-top: var(--gb-sp-md); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); } @media (max-width: 899px) { .gt-cta { flex-direction: column; align-items: stretch; text-align: center; } } /**/ .as { display: grid; gap: var(--gb-sp-md); } .as__form { gap: var(--gb-sp-md); } .as__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gb-sp-md); align-items: end; } .as__stock { padding-bottom: var(--gb-sp-sm); } .as__brands { max-height: 240px; overflow-y: auto; padding: var(--gb-sp-md); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: var(--gb-bg-4); display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gb-sp-xs); } .as__brands .gb-check { font-size: var(--gb-fs-xs); } .as__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-md); } .as__cats { display: flex; flex-wrap: wrap; gap: var(--gb-sp-xs); } @media (max-width: 899px) { .as__row { grid-template-columns: 1fr; } .as__cols { grid-template-columns: 1fr; } } /**/ .of { padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); display: grid; gap: var(--gb-sp-md); } .of__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; } .of__head h1 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; } .of__cards { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gb-sp-md); align-items: stretch; } .of-card { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } .of-card__label { font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); } .of-card__addrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-md); margin-top: var(--gb-sp-xs); } .of-card__addrs:has(> :only-child) { grid-template-columns: 1fr; } .of-card__stamp { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); margin-top: auto; } .of-card select { width: 100%; min-height: 40px; padding: 0 var(--gb-sp-sm); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: #fff; font-size: var(--gb-fs-xs); } .of__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gb-sp-md); align-items: start; } .of-sticky { position: sticky; top: var(--gb-sp-md); } /**/ .of-item { display: grid; grid-template-columns: 24px 72px minmax(0, 1fr) 60px 140px; align-items: center; gap: var(--gb-sp-md); padding: var(--gb-sp-md) 0; border-top: 1px solid var(--gb-line-3); } .of-item:first-of-type { border-top: 0; } .of-item.is-off { opacity: .5; } .of-item__pick { display: flex; align-items: center; justify-content: center; cursor: pointer; } .of-item__pick input { width: 20px; height: 20px; accent-color: var(--gb-green); cursor: pointer; } .of-item__img { display: block; width: 72px; height: 72px; } .of-item__img img, .of-item__img picture { width: 100%; height: 100%; mix-blend-mode: multiply; } .of-item__body { min-width: 0; } .of-item__name { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; } .of-item__name a { color: var(--gb-navy); text-decoration: none; } .of-item__name a:hover { text-decoration: underline; } .of-item__meta, .of-item__stock { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); margin-top: 2px; } .of-item__instock { color: var(--gb-green-2); } .of-item__flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .of-item__flags:empty { display: none; } .of-item__qty { text-align: right; font-size: var(--gb-fs-xs); white-space: nowrap; } .of-item__price { text-align: right; } .of-item__price s { display: block; font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); } .of-item__price strong { display: block; font-size: var(--gb-fs-sm); white-space: nowrap; } .of-item__price .gb-muted { display: block; font-size: var(--gb-fs-xxs); white-space: nowrap; } /**/ .of-sum { display: grid; gap: 6px; } .of-sum__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-md); font-size: var(--gb-fs-xs); } .of-sum__row--total { font-size: var(--gb-fs-lg); font-weight: 600; padding-top: var(--gb-sp-sm); border-top: 1px solid var(--gb-line-3); } .of-sum__row--save { color: var(--gb-green-2); } .of-sum__note { font-size: var(--gb-fs-xxs); } .of-sum__acts { display: grid; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); } .of-sum__acts .gb-muted { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); } .of__challenge { max-width: 560px; } @media (max-width: 1099px) { .of__cards { grid-template-columns: 1fr; } .of__grid { grid-template-columns: 1fr; } .of-sticky { position: static; } } @media (max-width: 599px) { .of-item { grid-template-columns: 24px 56px minmax(0, 1fr); } .of-item__qty, .of-item__price { grid-column: 2 / -1; text-align: left; } .of-item__price { display: flex; align-items: baseline; gap: var(--gb-sp-sm); } .of-item__price s, .of-item__price strong, .of-item__price .gb-muted { display: inline; } } /**/ .se { display: grid; gap: var(--gb-sp-md); margin-bottom: var(--gb-sp-lg); } .se__title { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; color: var(--gb-ink-2); margin-bottom: var(--gb-sp-xs); } .se__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--gb-sp-xs); } .se__cat, .se__brand { display: flex; align-items: center; gap: var(--gb-sp-sm); min-height: 52px; padding: var(--gb-sp-xs) var(--gb-sp-md); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: #fff; color: var(--gb-ink); text-decoration: none; } .se__cat { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; } .se__cat:hover, .se__brand:hover { border-color: var(--gb-navy-mut); background: var(--gb-bg-4); } .se__name { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; } .se__parent { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); } .se__logo { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; } .se__logo img, .se__logo picture { max-width: 100%; max-height: 100%; width: auto; height: auto; mix-blend-mode: multiply; } /**/ .gb-footer { background: var(--gb-navy); color: var(--gb-ink-inv); margin-top: var(--gb-sp-3xl); } /**/ .gb-footer { padding-bottom: var(--gb-dock, 0px); } .gb-footer a { color: #fff; } .gb-footer__bar { border-top: 1px solid var(--gb-navy-line); } .gb-footer__bar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; padding-block: var(--gb-sp-md); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-navy-mut); } .gb-footer__legal { display: flex; flex-wrap: wrap; gap: var(--gb-sp-md); } .gb-footer__legal a { color: var(--gb-navy-mut); text-decoration: none; } .gb-footer__legal a:hover { text-decoration: underline; } /**/ .gb-footer__legacy .grid.large { max-width: var(--gb-container); margin-inline: auto; padding-inline: var(--gb-gutter); } /**/ .gb-footer__legacy #fullscreen-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gb-sp-lg); padding-block: var(--gb-sp-2xl); padding-inline: max(var(--gb-gutter), calc((100% - var(--gb-container)) / 2 + var(--gb-gutter))); background: var(--gb-bg-4); color: var(--gb-ink); text-align: center; } .gb-footer__legacy #fullscreen-items > .title { grid-column: 1 / -1; font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; } .gb-footer__legacy #fullscreen-items .item svg { width: 64px; height: 64px; margin: 0 auto var(--gb-sp-sm); } .gb-footer__legacy #fullscreen-items .item > span { display: block; font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; } .gb-footer__legacy #fullscreen-items .item p { margin-top: var(--gb-sp-xs); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); color: var(--gb-ink-2); } /**/ .gb-footer__legacy #newsletter { background: var(--gb-navy); color: #fff; padding-block: var(--gb-sp-xl); } .gb-footer__legacy .container-newsletter { display: flex; align-items: center; justify-content: center; gap: var(--gb-sp-lg); flex-wrap: wrap; } .gb-footer__legacy .container-newsletter svg { flex: none; } .gb-footer__legacy .news_form { display: flex; align-items: stretch; width: min(560px, 100%); height: 44px; background: #fff; border-radius: var(--gb-r-pill); overflow: hidden; } .gb-footer__legacy .news_form input { flex: 1 1 auto; min-width: 0; border: 0; padding: 0 var(--gb-sp-lg); background: #fff; color: var(--gb-ink); font-size: var(--gb-fs-input); } .gb-footer__legacy .news_form input::placeholder { color: var(--gb-mut-inv); } .gb-footer__legacy .news_form .btn { flex: none; padding: 0 var(--gb-sp-lg); background: var(--gb-green); color: #fff; border-radius: var(--gb-r-pill); font-size: var(--gb-fs-xs); font-weight: 600; } .gb-footer__legacy .news_form .btn:hover { background: var(--gb-green-2); } /**/ .gb-footer__legacy footer .wrap { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--gb-sp-xl); padding-block: var(--gb-sp-2xl) var(--gb-sp-lg); } /**/ .gb-footer__legacy .copyright .flb-img { width: 200px; max-width: 100%; height: auto; margin-bottom: var(--gb-sp-md); filter: brightness(0) invert(1); } .gb-footer__legacy .copyright .info span { display: block; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); } /**/ .gb-footer__legacy .socials { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); } .gb-footer__legacy .socials > span { display: inline-flex; } .gb-footer__legacy .socials a.social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gb-navy-mut); color: #fff; text-decoration: none; overflow: hidden; } .gb-footer__legacy .socials a.social:hover { background: rgba(255, 255, 255, .12); } .gb-footer__legacy .socials a.social span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .gb-footer__legacy .socials a.social::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; } .gb-footer__legacy .socials a.fb::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H16.7V3.6c-.3 0-1.3-.13-2.47-.13-2.44 0-4.11 1.49-4.11 4.23v2.2H7.4V13h2.72v8h3.38z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H16.7V3.6c-.3 0-1.3-.13-2.47-.13-2.44 0-4.11 1.49-4.11 4.23v2.2H7.4V13h2.72v8h3.38z'/%3E%3C/svg%3E"); } .gb-footer__legacy .socials a.yt::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 7.2a2.5 2.5 0 0 0-1.76-1.77C18.25 5 12 5 12 5s-6.25 0-7.84.43A2.5 2.5 0 0 0 2.4 7.2 26 26 0 0 0 2 12a26 26 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.76 1.77C5.75 19 12 19 12 19s6.25 0 7.84-.43a2.5 2.5 0 0 0 1.76-1.77A26 26 0 0 0 22 12a26 26 0 0 0-.4-4.8ZM10 15.2V8.8l5.2 3.2-5.2 3.2Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 7.2a2.5 2.5 0 0 0-1.76-1.77C18.25 5 12 5 12 5s-6.25 0-7.84.43A2.5 2.5 0 0 0 2.4 7.2 26 26 0 0 0 2 12a26 26 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.76 1.77C5.75 19 12 19 12 19s6.25 0 7.84-.43a2.5 2.5 0 0 0 1.76-1.77A26 26 0 0 0 22 12a26 26 0 0 0-.4-4.8ZM10 15.2V8.8l5.2 3.2-5.2 3.2Z'/%3E%3C/svg%3E"); } .gb-footer__legacy .socials a.tw::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 3h3l-6.6 7.5L21.8 21h-6l-4.7-6.1L5.7 21h-3l7-8-6.9-10h6.1l4.3 5.6L17.5 3Zm-1 16h1.7L8.1 4.8H6.3L16.5 19Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 3h3l-6.6 7.5L21.8 21h-6l-4.7-6.1L5.7 21h-3l7-8-6.9-10h6.1l4.3 5.6L17.5 3Zm-1 16h1.7L8.1 4.8H6.3L16.5 19Z'/%3E%3C/svg%3E"); } .gb-footer__legacy .socials a.in::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9A5.5 5.5 0 0 1 16.5 22h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2Zm0 2A3.5 3.5 0 0 0 4 7.5v9A3.5 3.5 0 0 0 7.5 20h9a3.5 3.5 0 0 0 3.5-3.5v-9A3.5 3.5 0 0 0 16.5 4h-9ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm5.5-3.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9A5.5 5.5 0 0 1 16.5 22h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2Zm0 2A3.5 3.5 0 0 0 4 7.5v9A3.5 3.5 0 0 0 7.5 20h9a3.5 3.5 0 0 0 3.5-3.5v-9A3.5 3.5 0 0 0 16.5 4h-9ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm5.5-3.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z'/%3E%3C/svg%3E"); } /**/ .gb-footer__legacy .socials a.social:not(.fb):not(.yt):not(.tw):not(.in) { width: auto; padding-inline: var(--gb-sp-md); border-radius: var(--gb-r-pill); font-size: var(--gb-fs-xs); } .gb-footer__legacy .socials a.social:not(.fb):not(.yt):not(.tw):not(.in) span { position: static; width: auto; height: auto; margin: 0; clip: auto; } .gb-footer__legacy .socials a.social:not(.fb):not(.yt):not(.tw):not(.in)::before { display: none; } .gb-footer__legacy .footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gb-sp-lg); } .gb-footer__legacy .footer-nav ul { list-style: none; margin: 0; padding: 0; } .gb-footer__legacy .footer-nav a { display: flex; align-items: center; min-height: 30px; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); text-decoration: none; } .gb-footer__legacy .footer-nav a:hover { text-decoration: underline; } /**/ .gb-footer__legacy .partners { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: var(--gb-sp-lg); padding: var(--gb-sp-md) var(--gb-sp-lg); background: #fff; border-radius: var(--gb-r-md); } .gb-footer__legacy .partners img { max-height: 28px; width: auto; } /**/ .gb-footer__legacy .partners img[src*="/google-pay.svg"] { width: auto !important; height: calc(28px * 1.855); max-height: none; margin: calc(28px * -.19); } /**/ .gb-footer__legacy .partners .listify img { height: 20px; } /**/ .gb-footer__legacy .d-none { display: none !important; } .gb-footer__legacy .partners .author { margin-left: auto; } .gb-footer__legacy .partners .author a { color: var(--gb-navy); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); text-decoration: none; } .gb-footer__legacy .partners .author a:hover { text-decoration: underline; } @media (max-width: 1099px) { .gb-footer__legacy .grid.large { padding-inline: var(--gb-sp-md); } .gb-footer__legacy #fullscreen-items { padding-inline: var(--gb-sp-md); } } @media (max-width: 899px) { .gb-footer__legacy #fullscreen-items { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: var(--gb-sp-xl); } .gb-footer__legacy footer .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--gb-sp-lg); padding-block: var(--gb-sp-xl) var(--gb-sp-md); } .gb-footer__legacy .footer-nav { grid-template-columns: minmax(0, 1fr); gap: var(--gb-sp-sm); } .gb-footer__legacy .partners { gap: var(--gb-sp-md); } .gb-footer__legacy .partners .author { margin-left: 0; flex-basis: 100%; } } /**/ body.gb-legacy main { max-width: var(--gb-container); margin-inline: auto; padding: var(--gb-sp-lg) var(--gb-gutter) var(--gb-sp-2xl); } @media (max-width: 1099px) { body.gb-legacy main { padding-inline: var(--gb-sp-md); } } /**/ body.gb-legacy main img { height: auto; } /**/ /**/ .pr--order { max-width: 1080px; padding-block: var(--gb-sp-xl); } .pr__order { margin-top: var(--gb-sp-lg); text-align: left; } .pr__live:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); font-size: var(--gb-fs-xs); color: var(--gb-ink-2); } /**/ .ac-method { display: flex; align-items: center; gap: var(--gb-sp-sm); } .ac-method__logo { flex: none; width: 60px; height: 30px; object-fit: contain; } /**/ .ac-method + .pay-marks { --pm-h: 30px; margin-top: calc(-1 * var(--gb-sp-sm)); } /**/ .ac-method:has(.ac-method__logo) + .pay-marks { margin-left: calc(60px + var(--gb-sp-sm) - var(--pm-h) * .23); } /**/ .ac-bt__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gb-sp-md) var(--gb-sp-xl); align-items: center; } .ac-bt__qr { display: grid; justify-items: center; gap: var(--gb-sp-xs); margin: 0; } .ac-bt__qr img { width: 180px; height: 180px; image-rendering: pixelated; background: #fff; } .ac-bt__qr figcaption { max-width: 180px; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); text-align: center; } .ac-bt__data { display: grid; gap: var(--gb-sp-sm); margin: 0; } .ac-bt__row { display: grid; grid-template-columns: minmax(130px, max-content) minmax(0, 1fr); gap: var(--gb-sp-sm); align-items: center; } .ac-bt__row dt { font-size: var(--gb-fs-xs); color: var(--gb-ink-2); } .ac-bt__row dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-sp-xs) var(--gb-sp-sm); margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .ac-bt__copy { min-height: 32px; padding: 0 12px; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-pill); background: var(--gb-bg); color: var(--gb-navy); font: 600 var(--gb-fs-xxs)/1 var(--gb-font); cursor: pointer; } .ac-bt__copy:hover { border-color: var(--gb-navy); } .ac-bt__copy:focus-visible { outline: 2px solid var(--gb-info); outline-offset: 2px; } .ac-bt__copy.is-done { border-color: var(--gb-green-2); color: var(--gb-green-2); } .ac-bt__state { display: flex; align-items: center; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); font-size: var(--gb-fs-xs); color: var(--gb-ink-2); } /**/ :is(.ac-bt__state, .pr__live).is-live::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gb-green); animation: ac-bt-pulse 1.6s ease-in-out infinite; } :is(.ac-bt__state, .pr__live).is-paid { color: var(--gb-green-2); font-weight: 600; } @keyframes ac-bt-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } } @media (prefers-reduced-motion: reduce) { :is(.ac-bt__state, .pr__live).is-live::before { animation: none; } } @media (max-width: 599px) { .ac-bt__grid { grid-template-columns: minmax(0, 1fr); } .ac-bt__row { grid-template-columns: minmax(0, 1fr); gap: 2px; } } /**/ .gb-merge { width: min(520px, 92vw); padding-top: var(--gb-sp-xl); } .gb-merge__list { display: grid; max-height: min(40vh, 320px); overflow-y: auto; margin-top: var(--gb-sp-md); padding: 0; border-top: 1px solid var(--gb-line-4); } .gb-merge__item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--gb-sp-sm); padding: 6px 0; border-bottom: 1px solid var(--gb-line-4); font-size: var(--gb-fs-xs); line-height: 1.35; } .gb-merge__img img { display: block; width: 48px; height: 48px; object-fit: contain; } .gb-merge__qty { white-space: nowrap; color: var(--gb-ink-2); font-variant-numeric: tabular-nums; } @media (max-width: 479px) { /**/ .gb-merge__item { grid-template-columns: 48px minmax(0, 1fr); row-gap: 0; } .gb-merge__qty { grid-column: 2; } } .gb-merge__foot { flex-wrap: wrap-reverse; } /**/ .gb-merge__foot .gb-btn { flex: 1 1 100%; white-space: normal; text-align: center; } /**/ .pd-videos { display: grid; gap: var(--gb-sp-md); max-width: 860px; margin-inline: auto; } .pd-videos:has(> :nth-child(2)) { max-width: 1080px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); } .pd-videos__item { aspect-ratio: 16 / 9; border-radius: var(--gb-r-md); overflow: hidden; background: #000; } .pd-videos__item > * { width: 100%; height: 100%; } .pd-videos__item > video { object-fit: contain; }