/* assets/css/page-home.css - копия без комментариев, править исходник */
.page-container { max-width: 1398px; margin: 0 auto; padding: 0 32px; }  .hero-screen { position: relative; height: auto; min-height: calc(100vh - 48px); min-height: calc(100svh - 48px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: #121212; }  .hero-screen__slides { position: absolute; inset: 0; z-index: 0; } .hero-screen__slide { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity 0.6s ease; } .hero-screen__slide.is-active { opacity: 1; } .hero-screen::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.12) 100%); z-index: 1; } .hero-screen__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 800px; }  .hero-screen__subtitle[hidden] { display: none; }  .hero-screen--keep-subtitle .hero-screen__subtitle.is-empty { visibility: hidden; min-height: 26px; }  .hero-screen__subtitle { font-size: 16px; line-height: 26px; color: #fff; margin-bottom: 14px; } .hero-screen__title { font-family: var(--font-display); font-weight: 500; font-size: 64px; line-height: 72px; color: #fff; margin-bottom: 50px; } .hero-screen__search { display: flex; align-items: center; gap: 6px; width: 800px; max-width: 100%; height: 64px; background: #fff; border-radius: 12px; padding: 6px 6px 6px 24px; margin-bottom: 32px; } .hero-screen__search-input-wrap { display: flex; align-items: center; flex: 1; height: 100%; position: relative; } .hero-screen__search-icon { display: none; } .hero-screen__search input { flex: 1; border: none; background: transparent; font-size: 16px; color: #252B2B; } .hero-screen__search input:focus { outline: none; } .hero-screen__search input::placeholder { color: #868686; } .hero-screen__search-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 170px; height: 52px; padding: 0; background: #006C66; color: #fff; border-radius: 4px; font-size: 16px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,108,102,0.24), 0 4px 4px rgba(0,0,0,0.15); transition: background 0.2s; } .hero-screen__search-btn:hover { background: #057F72; } .hero-screen__tags { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .hero-screen__tag {  white-space: nowrap; display: flex; align-items: center; height: 40px; padding: 0 14px; background: rgba(255,255,255,0.14); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 999px; font-size: 14px; font-weight: 500; color: #fff; transition: background 0.2s; }  .hero-screen__tag:hover { background: rgba(255,255,255,0.20); } .hero-screen__tag:active { background: rgba(255,255,255,0.26); }  .hero-screen__progress { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; z-index: 2; height: 24px; padding: 0 12px; box-sizing: border-box; border-radius: 20px; background: rgba(0, 0, 0, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hero-screen__progress-item { position: relative; flex: none; width: 35px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }  .hero-screen__progress-item::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(255, 255, 255, .5); }  .hero-screen__progress-item::after { content: ''; position: absolute; top: 0; bottom: 0; left: -5px; right: -5px; } .hero-screen__progress-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }  .hero-screen__progress-fill { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; width: 0; border-radius: 2px; background: #fff; } @keyframes hero-progress { from { width: 0; } to { width: 100%; } }  .hero-screen__progress-item.is-active .hero-screen__progress-fill { animation: hero-progress var(--hero-interval, 6000ms) linear forwards; } .hero-screen.is-paused .hero-screen__progress-fill { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .hero-screen__slide { transition: none; } .hero-screen__progress-item.is-active .hero-screen__progress-fill { animation: none; width: 100%; } } @media (max-width: 1024px) { .hero-screen { min-height: calc(100vh - 50px); min-height: calc(100svh - 50px); } } @media (max-width: 768px) {  .hero-screen { min-height: calc(100vh - 130px); min-height: calc(100svh - 50px - 80px - env(safe-area-inset-bottom, 0px)); } .hero-screen { padding: 24px 16px; justify-content: center; }  .hero-screen__content { width: 100%; align-items: center; transform: translateY(7px); } .hero-screen__subtitle { display: none !important; } .hero-screen__title { font-size: 36px !important; line-height: 40px !important; font-weight: 500; font-family: var(--font-display); color: #FFFFFF; margin-bottom: 24px; text-align: center; width: 100%; } .hero-screen__search { display: flex !important; flex-direction: column !important; gap: 10px; width: 100% !important; height: auto !important; background: transparent !important; padding: 0 !important; margin-bottom: 24px; } .hero-screen__search-input-wrap { position: relative; width: 100% !important; height: 48px !important; min-height: 48px !important; background: #FFFFFF !important; border-radius: 8px !important; display: flex !important; align-items: center; padding: 0 !important; box-sizing: border-box !important; } .hero-screen__search-icon { display: flex !important; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #868686; pointer-events: none; } .hero-screen__search-input { width: 100% !important; height: 48px !important; min-height: 48px !important; border: none !important; background: transparent !important; padding-left: 43px !important; padding-right: 16px !important; font-family: var(--font-body) !important; font-size: 12px !important; line-height: 48px !important; color: #252B2B !important; box-sizing: border-box !important; } .hero-screen__search-input::placeholder { color: #868686 !important; font-size: 12px !important; } .hero-screen__search-btn { width: 100% !important; height: 48px !important; background: #006C66 !important; color: #FFFFFF !important; border-radius: 4px !important; border: none !important; font-size: 16px !important; font-weight: 500 !important; display: flex !important; align-items: center; justify-content: center; box-shadow: none !important; } .hero-screen__search-btn svg { display: none !important; }  .hero-screen__tags { display: flex !important; gap: 8px !important; overflow-x: auto !important; flex-wrap: nowrap !important; justify-content: flex-start !important; width: calc(100% + 32px) !important; max-width: none !important; margin-left: -16px !important; margin-right: -16px !important; padding: 0 16px !important; scroll-padding: 0 16px; box-sizing: border-box !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .hero-screen__tags::-webkit-scrollbar { display: none !important; }  .hero-screen__tag { height: 34px !important; padding: 0 12px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 34px !important; background: rgba(255, 255, 255, 0.14) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; color: #FFFFFF !important; border: none !important; border-radius: 999px !important; white-space: nowrap !important; flex-shrink: 0 !important; } .hero-screen__progress { bottom: 16px; height: 20px; padding: 0 12px; gap: 6px; } .hero-screen__progress-item { width: 24px; height: 20px; } .hero-screen__progress-item::after { left: -3px; right: -3px; } }  .why-us { padding: 80px 0; } .why-us__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 237px; margin-bottom: 56px; } .why-us__title { font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 64px; color: #252B2B; flex-shrink: 0; } .why-us__title span { text-transform: lowercase; } .why-us__subtitle { font-size: 18px; line-height: 30px; color: #979E9F; max-width: 616px; padding-top: 12px; } .why-us__grid-wrapper { max-width: 1892px; margin: 0 auto; padding: 0 14px; width: 100%; box-sizing: border-box; } .why-us__grid { display: grid; grid-template-columns: 1.54fr 1fr 1.54fr; grid-template-rows: 540px 238px; grid-template-areas: "protection testing warranty" "service service warranty"; gap: 14px; } .why-card--protection { grid-area: protection; background-image: linear-gradient(202deg, transparent 49%, rgba(0, 0, 0, 0.4) 100%), url("/wp-content/themes/rokodil/assets/img/banners/figma-card-protection-3d0d03.webp"); } .why-card--testing { grid-area: testing; } .why-card--warranty { grid-area: warranty; background-image: linear-gradient(209deg, rgba(0, 108, 102, 0) 34%, rgba(0, 108, 102, 0.6) 100%), url("/wp-content/themes/rokodil/assets/img/banners/figma-card-warranty-46eec0.webp"); } .why-service { grid-area: service; } .why-card { position: relative; border-radius: 4px; overflow: hidden; color: #fff; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .why-card__scrim { position: absolute; z-index: 1; overflow: visible; pointer-events: none; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); } .why-card__scrim::before { content: ''; position: absolute; pointer-events: none; } .why-card--protection .why-card__scrim { left: 0; right: 0; bottom: 0; height: 216px; } .why-card--protection .why-card__scrim::before { inset: 0; background: rgba(1, 50, 50, 0.3); filter: blur(40px); } .why-card--warranty .why-card__scrim { left: -20px; right: -19px; bottom: -18px; height: 202px; } .why-card--warranty .why-card__scrim::before { inset: 0; background: rgba(18, 97, 93, 0.4); filter: blur(30px); } @media (min-width: 1025px) { .why-card__scrim { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px, #000 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 64px, #000 100%); } } .why-card__caption { position: absolute; z-index: 2; } .why-card--protection .why-card__caption { left: 190px; right: 40px; bottom: 46px; text-align: left; } .why-card--warranty .why-card__caption { left: 56px; right: 56px; bottom: 46px; } .why-card__title { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 46px; margin-bottom: 20px; } .why-card__desc { font-size: 16px; line-height: 26px; } .why-card--protection .why-card__desc { max-width: 374px; margin: 0; } .why-card--warranty .why-card__desc { max-width: 389px; } .why-card--testing { background: linear-gradient(180deg, #00181A 0%, #000203 42%, #000002 100%); display: flex; flex-direction: column; } .why-card__testing-top { padding: 80px 43px 24px; position: relative; z-index: 2; } .why-card--testing .why-card__desc { color: rgba(255,255,255,0.6); } .why-card__testing-photo { margin-top: auto; height: 304px; background: url("/wp-content/themes/rokodil/assets/img/banners/figma-card-testing.webp") center/cover no-repeat; } .why-service { background: #F7F7F7; border-radius: 4px; position: relative; overflow: hidden; } .why-service__info { position: absolute; left: 190px; top: 60px; max-width: 448px; z-index: 2; } .why-service__title { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 46px; color: #252B2B; margin-bottom: 20px; } .why-service__desc { font-size: 16px; line-height: 26px; color: #555B5C; } .why-service__map { position: absolute; right: -10px; top: -52px; width: 580px; height: 320px; background: url("/wp-content/themes/rokodil/assets/img/banners/map-russia.webp") center right / contain no-repeat; z-index: 1; pointer-events: none; } @media (max-width: 1100px) { .why-us__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-template-areas: "protection testing" "warranty warranty" "service service"; } .why-card--warranty { grid-area: warranty; } .why-us__head { flex-direction: column; gap: 16px; } } @media (max-width: 768px) { .why-us { padding: 48px 0; } .why-us__head { flex-direction: column; gap: 12px; margin-bottom: 40px; } .why-us__title { font-size: 32px; line-height: 38px; } .why-us__subtitle { display: none; } .why-us__grid-wrapper { padding: 0 16px; } .why-us__grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "protection" "testing" "service" "warranty"; gap: 10px; grid-template-rows: auto; }  .why-card { min-height: 0; height: auto; aspect-ratio: 343 / 420; border-radius: 5px; box-sizing: border-box; } .why-card--protection .why-card__caption { position: absolute; left: 18px; right: 17px; bottom: 32px; z-index: 2; text-align: left; }  .why-card--testing { display: block; position: relative; } .why-card__testing-top { position: absolute; right: 17px; bottom: 32px; left: 18px; z-index: 2; padding: 0; } .why-card__testing-photo { position: absolute; top: -4.05%; left: -8.75%; width: 132.94%; height: 72.38%; margin: 0; }  .why-card--testing .why-card__desc { color: #FFFFFF; }  .why-card--protection .why-card__scrim { top: 40.48%; height: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 64%, #000 100%); } .why-card--warranty .why-card__scrim { top: 40.95%; right: -13px; bottom: 0; left: -15px; height: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64.5%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 64.5%, #000 100%); }   .why-card--protection { background-size: 170% 100%; background-position: 50% center; } .why-service { min-height: 0; height: auto; aspect-ratio: 343 / 420; border-radius: 5px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; background: #F7F7F7; } .why-service__info { position: absolute; top: auto; right: 17px; bottom: 32px; left: 18px; z-index: 2; max-width: none; padding: 0; } .why-service__title { font-size: 26px; line-height: 34px; color: #252B2B; margin-bottom: 20px; font-family: var(--font-display); font-weight: 500; } .why-service__desc { font-size: 14px; line-height: 20px; color: #555B5C; }  .why-service__map { position: absolute; top: 0; right: 0; left: 0; width: auto; height: auto; aspect-ratio: 343 / 414; background: url("/wp-content/themes/rokodil/assets/img/banners/why-map-mobile.webp") top center / 100% 100% no-repeat; z-index: 1; opacity: 1; pointer-events: none; } .why-card--warranty .why-card__caption { position: absolute; left: 18px; right: 17px; bottom: 32px; z-index: 2; text-align: left; } .why-card__title { font-size: 26px; line-height: 34px; margin-bottom: 20px; font-family: var(--font-display); font-weight: 500; } .why-card__desc { font-size: 14px; line-height: 20px; } }  .technologies { position: relative; overflow: hidden; padding-bottom: 132px; background: #121212; color: #fff; } .technologies__mobile { display: none; } .technologies__skin { position: absolute; top: 0; left: calc(50% - 1057px); z-index: 0; width: 1056px; height: 704px; } .technologies__inner { position: relative; z-index: 1; padding-top: 132px; } .technologies__head { display: grid; grid-template-columns: 810px 574px; gap: 14px; align-items: start; } .technologies__title { max-width: 587px; margin: 0; font-family: var(--font-display); font-size: 48px; font-weight: 500; line-height: 64px; background: linear-gradient(166deg, #fff 0%, rgba(255, 255, 255, .4) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .technologies__subtitle { margin: 19px 0 0; color: rgba(255, 255, 255, .6); font-size: 18px; line-height: 30px; } .technologies__title-art, .technologies__subtitle-art { display: none; } .tech-carousel__viewport { position: relative; z-index: 1; margin-top: 60px;  overflow: hidden; overflow: clip; touch-action: pan-y; cursor: auto; } .tech-carousel__viewport.is-dragging { cursor: none; } .tech-carousel__cursor { position: absolute; top: 0; left: 0; z-index: 6; display: grid; grid-template-columns: 20px 35px 20px; align-items: center; justify-content: center; column-gap: 5px; width: 90px; height: 90px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; background: rgba(255, 255, 255, .1); backdrop-filter: blur(10px); color: #fff; font-size: 15px; font-weight: 500; line-height: 15px; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); transition: transform .15s ease; } .tech-carousel__cursor.is-visible { opacity: 1; } .tech-carousel__cursor.is-dragging { transition: none; transform: translate(-50%, -50%) scale(.94); } .tech-carousel__cursor svg { width: 20px; height: 20px; fill: none; stroke: #949494; stroke-width: 1.25; stroke-linecap: round; } .tech-carousel__track { display: flex; gap: 40px; width: max-content; will-change: transform; } .tech-slide { cursor: none; -webkit-user-select: none; user-select: none; display: grid; flex: 0 0 min(1398px, calc(100vw - 32px)); grid-template-columns: 810px 574px; gap: 14px; opacity: .5; transition: opacity .45s ease; } .tech-slide.is-active { opacity: 1; } .tech-comparison { position: relative; width: 810px; height: 700px; overflow: hidden; border-radius: 4px; background: linear-gradient(180deg, #DFDDDC 0%, #DFDFDC 100%); user-select: none; }  .tech-slide.is-active .tech-comparison { cursor: pointer; } .tech-comparison__after { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: fill; } .tech-comparison__inactive { position: absolute; inset: 0; z-index: 5; display: none; width: 100%; height: 100%; object-fit: fill; pointer-events: none; } .tech-comparison__before { position: absolute; inset: 0; z-index: 2; overflow: hidden; clip-path: inset(0 50% 0 0); } .tech-comparison__before-scene { position: relative; width: 100%; height: 100%; overflow: hidden; } .tech-comparison__before-bg { position: absolute; top: 0; left: -434px; width: 1244px; height: 700px; max-width: none; object-fit: fill; } .tech-comparison__before-tool { position: absolute; top: 13px; left: 82px; width: 676px; height: 676px; max-width: none; object-fit: fill; } .tech-comparison__label { position: absolute; top: 36px; z-index: 4; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 500; line-height: 20px; } .tech-comparison__label--before { left: 36px; width: 74px; background: rgba(0, 0, 0, .6); } .tech-comparison__label--after { right: 36px; width: 81px; background: rgba(255, 255, 255, .2); } .tech-comparison__handle { position: absolute; top: 0; left: 50%; z-index: 3; width: 4px; height: 100%; padding: 0; border: 0; background: #fff; box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .2), 0 10px 15px -3px rgba(0, 0, 0, .15); color: #252B2B; cursor: pointer; touch-action: none; transform: translateX(-50%); } .tech-comparison__knob { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: flex-start; gap: 4px; padding: 0 7px; box-sizing: border-box; width: 50px; height: 50px; border-radius: 50%; background: #fff; box-shadow: 0 12.5px 15.6px -9.4px rgba(0, 0, 0, .3), 0 31.25px 39px -7.8px rgba(0, 0, 0, .3); transform: translate(-50%, -50%); } .tech-comparison__knob-icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 16px; } .tech-comparison__knob-icon:first-child img { width: 6px; height: 11px; } .tech-comparison__knob-icon:last-child img { width: 16px; height: 16px; } .tech-info { display: flex; flex-direction: column; height: 700px; box-sizing: border-box; padding: 50px; border-radius: 4px; background: #303030; } .tech-info__num { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 78px; border-radius: 50%; background: #fff; color: #252B2B; font-size: 14px; line-height: 20px; }  .tech-info__category { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; height: 40px; margin-bottom: 24px; padding: 0 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; color: #fff; font-size: 14px; line-height: 20px; white-space: nowrap; } .tech-info__title { margin: 0; font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 56px; } .tech-info__text { margin: 36px 0 0; color: rgba(255, 255, 255, .6); font-size: 16px; line-height: 26px; }  .tech-carousel__pagination { position: absolute; left: calc(50% + 175px); bottom: 50px; z-index: 7; display: flex; align-items: center; gap: 5px; } .tech-carousel__dot { width: 5px; height: 5px; flex: 0 0 5px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .2); cursor: pointer; transition: width .3s ease, flex-basis .3s ease, background-color .3s ease; } .tech-carousel__dot.is-active { width: 20px; flex-basis: 20px; background: rgba(255, 255, 255, .8); }  .tech-carousel__dot.is-active:not(:first-child):not(:last-child) { margin: 0 1px; } .tech-carousel__dot.is-active:first-child { margin-right: 1px; } .tech-carousel__dot.is-active:last-child { margin-left: 1px; }  .tech-carousel__dot::after { content: ''; position: absolute; top: -10px; right: -2.5px; bottom: -10px; left: -2.5px; } .tech-carousel__dot { position: relative; } .tech-carousel__dot:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 4px; }  .tech-comparison__before-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tech-comparison--photo .tech-comparison__after { object-fit: cover; } .tech-slide:not(.is-active) .tech-comparison__handle { pointer-events: none; } .tech-slide:not(.is-active) .tech-comparison__inactive { display: block; } @media (min-width: 769px) { .technologies__skin { top: 0; left: 0; width: 1920px; height: 1152px; background: url("/wp-content/themes/rokodil/assets/img/banners/figma-tech-background-desktop.webp") center top / 1920px 1152px no-repeat; opacity: 1; } .technologies > .technologies__inner .technologies__subtitle { width: 574px; margin-top: 25px; } .tech-slide .tech-comparison__before-bg { width: 1244.44px; }  .tech-slide .tech-info__category { box-sizing: border-box; justify-content: center; min-width: 150px; } .tech-slide .tech-info__title { width: 475px; } .tech-slide .tech-info__text { width: 448px; } .technologies__title { position: relative; width: 587px; height: 128px; } .technologies__subtitle { position: relative; } } @media (min-width: 769px) and (max-width: 1400px) { .technologies__inner { padding-right: 32px; padding-left: 32px; } .technologies__head, .tech-slide { grid-template-columns: minmax(0, 1fr); } .technologies__subtitle { margin-top: 0; } .tech-comparison { width: 100%; height: 560px; } .tech-comparison__before-bg { left: 0; width: 100%; height: 560px; } .tech-comparison__before-tool { top: 0; left: 10%; width: 80%; height: 100%; } .tech-info { height: auto; min-height: 400px; } } @media (max-width: 768px) { .technologies { padding-bottom: 0; }  .technologies__skin { left: 0; width: 100%; max-width: none; height: 100%; background: url("/wp-content/themes/rokodil/assets/img/banners/tech-background-mobile.webp") top center / 100% auto no-repeat; opacity: 1; } .technologies > .technologies__inner, .tech-carousel__viewport { display: none; } .technologies__mobile { position: relative; z-index: 1; display: block; padding: 48px 16px; } .technologies__mobile .technologies__head { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; } .technologies__mobile .technologies__title { max-width: 100%; margin-bottom: 12px; font-size: 32px; font-weight: 500; line-height: 38px; color: #fff; background: none; -webkit-text-fill-color: #fff; } .technologies__mobile .technologies__subtitle { margin-top: 0; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .6); }  .technologies__mobile-viewport { overflow: hidden; overflow: clip; touch-action: pan-y; } .technologies__mobile-track { display: flex; align-items: flex-start; will-change: transform; transition: transform .45s ease; }  .technologies__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; flex: 0 0 100%; max-width: 100%; } .tech-slider { position: relative; width: 100%; height: 300px; overflow: hidden;  border-radius: 0; background: linear-gradient(180deg, #DFDDDC 0%, #DFDDDC 100%); cursor: ew-resize; user-select: none; } .tech-slider__after { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: fill; } .tech-slider__before { position: absolute; inset: 0; z-index: 2; overflow: hidden; clip-path: inset(0 50% 0 0); } .tech-slider__before-scene { position: relative; width: 100%; height: 100%; overflow: hidden; } .tech-slider__before-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tech-slider--photo .tech-slider__after { object-fit: cover; } .tech-slider__before-bg { position: absolute; top: 0; left: 0; width: 100%; height: 300px; max-width: none; object-fit: fill; } .tech-slider__before-tool { position: absolute; top: 0; left: 10%; width: 80%; height: 100%; max-width: none; object-fit: fill; } .tech-slider__label { position: absolute; z-index: 4; display: flex; align-items: center; justify-content: center; top: 15px; height: 24px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 400; line-height: 14px; } .tech-slider__label--before { left: 15px; width: 41px; background: rgba(0, 0, 0, .6); } .tech-slider__label--after { right: 15px; width: 61px; background: rgba(255, 255, 255, .2); } .tech-slider__handle { position: absolute; top: 0; left: 50%; z-index: 3; width: 2px; height: 100%; background: #fff; box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .2), 0 10px 15px -3px rgba(0, 0, 0, .15); cursor: pointer; transform: translateX(-50%); } .tech-slider__knob { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; gap: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); } .tech-slider__knob svg { width: 10px; height: 10px; } .technologies__mobile .tech-info { height: auto; min-height: 462px; padding: 24px 18px 32px; border-radius: 0; background: #303030; } .technologies__mobile .tech-info__num { width: 32px; height: 32px; margin-bottom: 24px; font-size: 12px; } .technologies__mobile .tech-info__category { height: 30px; margin-bottom: 20px; font-size: 12px; } .technologies__mobile .tech-info__title { font-size: 26px; line-height: 34px; margin-bottom: 16px; font-weight: 500; } .technologies__mobile .tech-info__text { margin-top: 0; margin-bottom: 32px; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .6); } .technologies__mobile .tech-info__progress { position: relative; height: 2px; margin-top: auto; border-radius: 1px; background: rgba(255, 255, 255, .15); } .technologies__mobile .tech-info__progress-fill { width: 33%; height: 100%; border-radius: 1px; background: #fff; } }  .flagman { position: relative; background: #fff; } .flagman__head { display: flex; align-items: center; gap: 0; padding-top: 48px; margin-bottom: 32px; flex-wrap: wrap; } .flagman__title { font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 64px; color: #252B2B; margin-right: auto; }  .flagman__tabs { display: flex; align-items: center; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .flagman__tabs::-webkit-scrollbar { display: none; }  .flagman__tab { display: flex; align-items: center; justify-content: center; height: 42px; padding: 0 24px; flex: none; white-space: nowrap; background: transparent; border-radius: 999px; font-size: 16px; font-weight: 500; line-height: 20px; color: #979E9F; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .flagman__tab:hover { background: #FBFBFB; color: #868686; }  .flagman__tab:active { background: #F8F8F8; color: #555B5C; }  .flagman__tab:focus-visible {  outline: none; background: transparent; color: #555B5C; box-shadow: inset 0 0 0 1px #555B5C; } .flagman__tab.is-active, .flagman__tab.is-active:hover, .flagman__tab.is-active:active { background: #F5F5F5; color: #252B2B; box-shadow: none; } .flagman__banner { position: relative; background: url("/wp-content/themes/rokodil/assets/img/banners/flagman-bg.webp") center/cover no-repeat; border-radius: 4px; overflow: hidden; display: grid; grid-template-columns: 680px 1fr; gap: 26px; padding: 85px 32px; min-height: 680px; align-items: center; } .flagman__viewport { width: 100%; overflow: hidden; }  .flagman__track { display: flex; width: 100%; transition: transform 600ms cubic-bezier(.22, .61, .36, 1); will-change: transform; }  .flagman__slide { flex: 0 0 100%; min-width: 0; overflow-x: clip; } .flagman__banner-inner { position: relative; } .flagman:not(.has-hotspots) .hotspot { display: none; } .flagman__product { display: flex; justify-content: center; }  .flagman__product [data-flagman-image] { max-width: 100%; max-height: 590px; object-fit: contain; } .flagman__info { max-width: 520px; } .flagman__badges { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } .flagman__name { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 56px; background: linear-gradient(90deg, #252B2B 0%, #7D9191 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 20px; } .flagman__desc { font-size: 16px; line-height: 26px; color: #555B5C; margin-bottom: 24px; } .flagman__price-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 20px 60px rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: space-between; gap: 16px; }  .hotspot__tooltip { position: absolute; top: calc(100% + 32px); left: 50%; transform: translateX(-50%) translateY(-6px); display: flex; align-items: flex-start; gap: 14px; box-sizing: border-box; width: 340px; min-height: 96px; padding: 14px 12px; background: #FFFFFF; border-radius: 8px; box-shadow: 0 12px 24px rgba(0, 0, 0, .10), 0 30px 60px rgba(0, 0, 0, .12); white-space: normal; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 100; text-align: left; } .hotspot__tooltip-img { flex: 0 0 68px; width: 68px; height: 68px; border-radius: 4px; object-fit: cover; display: block; }  .hotspot__tooltip-body { padding-top: 6px; min-width: 0; } .hotspot:hover .hotspot__tooltip, .hotspot:focus-within .hotspot__tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .hotspot__tooltip-title { font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 16px; color: #252B2B; margin-bottom: 8px; }  .hotspot__tooltip-desc { margin: 0; padding: 0 0 0 20.7px; list-style: none; font-family: var(--font-body); font-weight: 400; font-size: 13px; line-height: 18px; color: #555B5C; } .hotspot__tooltip-desc > li { position: relative; } .hotspot__tooltip-desc > li::before { content: ''; position: absolute; top: 7.2px; left: -11.2px; width: 3.6px; height: 3.6px; border-radius: 50%; background: currentColor; } .flagman__price-card { background: #FFFFFF; border-radius: 12px; padding: 24px 32px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 8px 24px rgba(0,0,0,0.06); } .flagman__price { font-family: var(--font-body); font-weight: 700; font-size: 22px; line-height: 28px; color: #252B2B; } .flagman__price-actions { display: flex; align-items: center; gap: 10px; } .flagman__add-to-cart { flex: 0 0 180px; width: 180px; } .btn-fav { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #F7F7F7; border: none; border-radius: 4px; cursor: pointer; transition: background 0.2s; } .btn-fav:hover { background: #EAEAEA; } .btn-fav { color: #555B5C; } .btn-fav svg path { stroke: currentColor; }  .flagman__old-price { font-size: 16px; color: #979E9F; text-decoration: line-through; margin-left: 8px; } @media (max-width: 1024px) { .flagman__banner { grid-template-columns: 1fr; } .flagman__product { order: -1; } .flagman__product [data-flagman-image] { max-height: 400px; } } @media (max-width: 768px) { .flagman { padding: 48px 0; } .flagman__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; } .flagman__title { font-size: 32px; line-height: 38px; } .flagman__tabs { display: flex !important; gap: 6px; overflow-x: auto; width: 100%; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .flagman__tabs::-webkit-scrollbar { display: none; } .flagman__tab { font-size: 14px; height: 36px; padding: 0 16px; white-space: nowrap; flex-shrink: 0; } .flagman__banner { grid-template-columns: 1fr; padding: 32px 16px; min-height: auto; border-radius: 8px; gap: 20px; } .flagman__name { font-size: 32px; line-height: 38px; margin-bottom: 12px; } .flagman__desc { font-size: 14px; line-height: 20px; margin-bottom: 16px; } .flagman__price-card { padding: 16px; border-radius: 8px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; } .flagman__price { font-size: 20px; line-height: 24px; } } .flagman__pagination { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; }  .flagman__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: #D3D3D3; cursor: pointer; } .flagman__dot--active { width: 28px; background: #9B9B9B; } .flagman__arrows { position: absolute; right: max(16px, calc((100% - var(--container-width)) / 2)); bottom: 31px; display: flex; gap: 20px; } .flagman__arrow { display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; cursor: pointer; transition: opacity .2s ease; } .flagman__arrow:disabled { opacity: .3; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { .flagman__track { transition: none; } }  .best-sellers { padding: 80px 0; } .best-sellers__head { display: flex; align-items: center; justify-content: space-between; height: 72px; margin-bottom: 46px; } .best-sellers__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 72px; color: #242627; } .best-sellers__nav { display: flex; gap: 20px; } .best-sellers__arrow { width: 24px; height: 24px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; color: #252B2B; cursor: pointer; transition: opacity 200ms ease, transform 200ms ease; } .best-sellers__arrow:disabled { opacity: .3; cursor: default; } .best-sellers__viewport { width: 100%; overflow: hidden; outline: none; } .best-sellers__viewport:focus-visible { outline: 2px solid #006C66; outline-offset: 4px; border-radius: 4px; } .best-sellers__track { display: flex; gap: 14px; transition: transform 480ms cubic-bezier(.22, .61, .36, 1); will-change: transform; } .best-sellers .product-card { flex: 0 0 339px; width: 339px; height: 624px; border: 0; box-shadow: none; } .best-sellers .product-card__media { flex: 0 0 321px; width: 100%; height: 321px; aspect-ratio: auto; } .best-sellers .product-card__media img { padding: 48px 45px 24px; box-sizing: border-box; } .best-sellers .product-card__actions { top: 16px; right: 16px; gap: 10px; } .best-sellers .badge--hit { top: 16px; left: 16px; width: 146px; height: 32px; padding: 0 16px 0 10px; gap: 6px; box-sizing: border-box; font-size: 16px; font-weight: 400; line-height: 21px; } .best-sellers .badge--hit svg { width: 20px; height: 20px; flex: 0 0 20px; } .best-sellers .product-card__body { position: relative; display: block; flex: 0 0 303px; height: 303px; padding: 0 16px 16px; box-sizing: border-box; } .best-sellers .product-card__header { width: 100%; height: 41px; padding: 0; margin: 0; border-top: 1px solid #F3F3F3; border-bottom: 1px solid #F3F3F3; box-sizing: border-box; } .best-sellers .product-card__title { height: auto; max-height: 52px; margin: 19px 0 0; font-size: 15px; line-height: 26px; } .best-sellers .product-card__price { position: absolute; top: 143px; left: 16px; right: 16px; margin: 0; font-size: 20px; line-height: 26px; } .best-sellers .product-card__footer { position: absolute; top: 193px; left: 16px; right: 16px; height: 40px; margin: 0; gap: 14px; } .best-sellers .product-card__footer .qty { width: 133px; height: 40px; } .best-sellers .product-card__footer .qty__input { width: 61px; height: 38px; } .best-sellers .product-card__buy { flex: 0 0 160px; width: 160px; min-height: 0; height: 40px; padding: 0 24px; border-radius: 4px; } .best-sellers .product-card__quick-buy { position: absolute; top: 247px; left: 16px; width: 307px; height: 40px; margin: 0; padding: 0 20px; border-radius: 4px; } .best-sellers__pagination { display: flex; align-items: center; justify-content: center; gap: 6px; height: 6px; margin-top: 34px; } .best-sellers__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: #E3E5E6; cursor: pointer; transition: width 280ms ease, background-color 280ms ease; } .best-sellers__dot.is-active { width: 28px; background: #9B9B9B; } @media (max-width: 768px) { .best-sellers { padding: 48px 0; } .best-sellers__head { height: 48px; margin-bottom: 24px; } .best-sellers__title { font-size: 32px; line-height: 48px; } .best-sellers .product-card { flex-basis: 100%; width: 100%; } } @media (prefers-reduced-motion: reduce) { .best-sellers__track, .best-sellers__dot, .best-sellers__arrow { transition-duration: 1ms; } }  .promo-section { padding: 80px 0; } .promo-section__head { display: flex; align-items: center; gap: 0; margin-bottom: 32px; flex-wrap: wrap; } .promo-section__title { font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 64px; color: #252B2B; margin-right: auto; } .promo-section__tabs { display: flex; gap: 8px; } .promo-banner { position: relative; background: url("/wp-content/themes/rokodil/assets/img/banners/promo-bg.webp") center/cover no-repeat; border-radius: 4px; overflow: hidden; display: block; padding: 85px 32px; min-height: 680px; } .promo-banner__viewport { width: 100%; overflow: hidden; }  .promo-banner__track { display: flex; width: 100%; transition: transform 600ms cubic-bezier(.22, .61, .36, 1); will-change: transform; } .promo-banner__slide { flex: 0 0 100%; min-width: 0; } .promo-banner__product { position: relative; width: 680px; display: flex; justify-content: center; align-items: center; } .promo-banner__product img { max-width: 646px; width: 100%; height: auto; object-fit: contain; display: block; } .promo-banner__info { max-width: 600px; } .promo-banner__name { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 56px; background: linear-gradient(90deg, #252B2B 0%, #7D9191 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 20px; } .promo-banner__desc { font-size: 16px; line-height: 26px; color: #555B5C; margin-bottom: 24px; } .promo-banner__card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 20px 60px rgba(0,0,0,0.12); max-width: 692px; } @media (max-width: 1024px) { .promo-banner { grid-template-columns: 1fr; } .promo-banner__product { order: -1; } } @media (max-width: 768px) { .promo-section { padding: 48px 0; } .promo-section__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; } .promo-section__title { font-size: 32px; line-height: 38px; } .promo-section__tabs { display: flex !important; gap: 8px; overflow-x: auto; width: 100%; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .promo-section__tabs::-webkit-scrollbar { display: none; } .promo-section__tab { font-size: 14px; height: 36px; padding: 0 16px; white-space: nowrap; flex-shrink: 0; } .promo-banner { grid-template-columns: 1fr; padding: 32px 16px; min-height: auto; border-radius: 8px; gap: 20px; } .promo-banner__product { width: 100%; } .promo-banner__name { font-size: 32px; line-height: 38px; margin-bottom: 12px; } .promo-banner__desc { font-size: 14px; line-height: 20px; margin-bottom: 16px; } .promo-banner__card { padding: 16px; border-radius: 8px; width: 100%; box-sizing: border-box; } .promo-card { flex-direction: column; gap: 16px; padding: 16px; width: 100%; box-sizing: border-box; } .promo-card__divider { width: 100%; height: 1px; margin: 12px 0; } .promo-card__buttons { flex-direction: column; gap: 8px; width: 100%; } .btn--promo-cart, .btn--secondary-grey { width: 100%; height: 48px; } } .promo-banner__pagination { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; z-index: 5; } .promo-banner__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: #D3D3D3; flex-shrink: 0; cursor: pointer; } .promo-banner__dot--active { width: 28px; background: #9B9B9B; } .promo-banner__arrows { position: absolute; bottom: 31px; right: max(16px, calc((100% - var(--container-width)) / 2)); display: flex; gap: 20px; z-index: 5; } .promo-banner__arrow { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .promo-banner__arrow:disabled { opacity: .3; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { .promo-banner__track { transition: none; } }  .reviews { padding: 80px 0; overflow: hidden; } .reviews__head { position: relative; height: 168px; margin-bottom: 80px; } .reviews__head-left { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .reviews__caption { display: inline-flex; align-items: center; gap: 8px; color: #006C66; font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 1px; text-transform: uppercase; } .reviews__caption img { width: 18px; height: 18px; flex: 0 0 18px; } .reviews__title { max-width: 626px; margin: 0; color: #252B2B; font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 64px; } .reviews__title span { color: #006C66; } .reviews__head-right { position: absolute; top: 20px; left: 825px; display: flex; flex-direction: column; align-items: flex-start; gap: 41px; } .reviews__stats { display: flex; align-items: center; gap: 20px; width: 573px; } .reviews__avatars { display: flex; width: 116px; } .reviews__avatar { display: block; width: 44px; height: 44px; margin-left: -20px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; box-sizing: border-box; } .reviews__avatar:first-child { margin-left: 0; } .reviews__stats-text { display: flex; flex-direction: column; } .reviews__stats-text strong { color: #252B2B; font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 26px; } .reviews__stats-text span { color: #252B2B; font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 26px; white-space: nowrap; } .reviews__btn { width: 200px; height: 48px; font-family: var(--font-body); font-size: 16px; font-weight: 400; } .reviews__viewport { position: relative; width: calc(100vw - max(16px, (100vw - var(--container-width)) / 2)); overflow: hidden; touch-action: pan-y; } .reviews__track { display: flex; gap: 14px; width: max-content; transition: transform .35s ease; will-change: transform; } .reviews__slide { flex: 0 0 574px; width: 574px; min-width: 0; } .review-card { display: block; width: 574px; height: 448px; } .review-card__product { position: relative; display: block; width: 574px; height: 94px; color: inherit; text-decoration: none; background: #F9F9F9; } .review-card__product-img { position: absolute; top: 15px; left: 24px; display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; background: #fff; } .review-card__product-img img { width: 100%; height: 100%; object-fit: contain; } .review-card__product-info { position: absolute; top: 50%; left: 102px; display: flex; flex-direction: column; gap: 6px; width: 324px; transform: translateY(-50%); } .review-card__product-label { color: #979E9F; font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 20px; } .review-card__product-name { display: -webkit-box; overflow: hidden; color: #252B2B; font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 20px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .review-card__product-rating { position: absolute; top: 22px; right: 24px; display: flex; gap: 1px; width: 101px; height: 18px; } .review-card__product-rating svg { flex: 0 0 18px; } .review-card__review { position: relative; width: 574px; height: 354px; box-sizing: border-box; border-bottom: 1px solid #E3E5E6; } .review-card__quote { position: absolute; top: 24px; left: 24px; display: block; width: 34px; height: 24px; } .review-card__text { position: absolute; top: 72px; right: 24px; left: 24px; display: -webkit-box; max-height: 115px; margin: 0; overflow: hidden; color: #252B2B; font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 23px; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow-wrap: anywhere; } .review-card__photos { position: absolute; top: 172px; left: 24px; display: flex; gap: 10px; height: 58px; }  .review-card__review:has(.review-card__photos) .review-card__text { max-height: 92px; -webkit-line-clamp: 4; } .review-card__photo { position: relative; width: 58px; height: 58px; flex: 0 0 58px; overflow: hidden; border-radius: 3px; } .review-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .review-card__photo .review-media__play { width: 22px; height: 22px; } .review-card__photo .review-media__play svg { width: 10px; height: 10px; } .review-card__photo--more::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .6); } .review-card__photo--more span { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; color: #fff; font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 20px; } .review-card__footer { position: absolute; top: 270px; right: 24px; left: 24px; display: flex; align-items: flex-start; justify-content: space-between; } .review-card__user { display: flex; align-items: flex-start; gap: 14px; } .review-card__avatar { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; color: #fff; background: #9D9D9D; font-family: var(--font-body); font-size: 20px; font-weight: 600; } .review-card__user-info { display: flex; flex-direction: column; gap: 4px; } .review-card__user-name { display: flex; align-items: center; gap: 8px; color: #252B2B; font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 20px; white-space: nowrap; } .review-card__verified { width: 20px; height: 20px; flex: 0 0 20px; } .review-card__user-date { color: #979E9F; font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 16px; } .review-card__source { display: flex; align-items: center; gap: 10px; min-height: 22px; color: #979E9F; font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 20px; white-space: nowrap; } .review-card__source img { display: block; width: 89px; height: 22px; object-fit: contain; } .review-card__source img.review-card__source-ozon { width: 79px; height: 22px; } .review-card__source strong { color: #252B2B; font-weight: 500; } .reviews__pagination { display: flex; align-items: center; justify-content: center; gap: 6px; width: 1398px; margin-top: 30px; } .reviews__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: #E3E5E6; cursor: pointer; } .reviews__dot--active { width: 28px; background: #9B9B9B; } @media (min-width: 769px) { .reviews { min-height: 732px; margin-top: 132px; padding: 0; }  .reviews__slide { -webkit-user-select: none; user-select: none; } } @media (max-width: 768px) { .reviews { padding: 48px 0; } .reviews__head { display: flex; height: auto; margin-bottom: 32px; flex-direction: column; gap: 24px; } .reviews__head-right { position: static; gap: 16px; } .reviews__title { max-width: 100%; font-size: 32px; line-height: 40px; } .reviews__stats { align-items: flex-start; gap: 12px; } .reviews__stats-text span { white-space: normal; font-size: 14px; line-height: 20px; } .reviews__viewport { width: 100%; } .reviews__track { width: 100%; } .reviews__slide { flex: 0 0 100%; width: 100%; } .review-card { width: 100%; height: 448px; } .review-card__product, .review-card__review { width: 100%; } .review-card__product-info { right: 116px; width: auto; } .review-card__product-rating { right: 16px; } .review-card__source { display: none; } .reviews__pagination { width: 100%; } }  .journal { padding: 80px 0; } .journal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 52px; } .journal__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 64px; color: #252B2B; } .journal__all { width: 200px; height: 48px; display: flex; align-items: center; justify-content: center; }  .journal__featured { display: none; } .journal-card--small.journal-card--mobile { display: none; } .journal__pagination.journal__pagination--mobile { display: none; } .journal__viewport { width: 100%; overflow: hidden; outline: none; } .journal__viewport:focus-visible { outline: 2px solid #006C66; outline-offset: 4px; border-radius: 4px; } .journal__track { display: flex; gap: 2px; width: 100%; transition: transform 480ms cubic-bezier(.22, .61, .36, 1); will-change: transform; } .journal__slide { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: 692px 1fr 1fr; gap: 14px; align-items: start; } .journal-card--large { position: relative; width: 100%; height: 520px; border-radius: 4px; overflow: hidden; display: block; color: #fff; text-decoration: none; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .35) 100%), var(--journal-card-image, url("/wp-content/themes/rokodil/assets/img/banners/journal-large.webp")); background-position: center; background-size: cover; background-repeat: no-repeat; } .journal-card__image-link { position: absolute; inset: 0; z-index: 0; }  .journal-card--large .journal-card__tag { position: absolute; left: 40px; top: 352px; z-index: 2; display: inline-flex; align-items: center; height: 40px; padding: 0 23.5px; background: rgba(255,255,255,.14); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 999px; font-size: 14px; line-height: 20px; color: #fff; }  .journal-card--large .journal-card__overlay { position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 142px; padding: 30px 60px 30px 40px; box-sizing: border-box; display: flex; align-items: flex-start; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.25)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .journal-card--large .journal-card__title { font-family: var(--font-body); font-size: 24px; font-weight: 600; line-height: 36px; color: #fff; }  .journal-card--small { height: 480px; display: block; background: #fff; color: #252B2B; text-decoration: none; } .journal-card--small .journal-card__img { display: block; width: 100%; height: 240px; overflow: hidden; border-radius: 4px; } .journal-card--small .journal-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 480ms cubic-bezier(.22, .61, .36, 1); } .journal-card__img:hover img { transform: scale(1.025); } .journal-card--small .journal-card__body { display: block; height: 240px; padding: 16px 10px 12px; box-sizing: border-box; user-select: text; } .journal-card__meta { display: flex; align-items: center; gap: 20px; height: 34px; margin-bottom: 16px; }  .journal-card__small-tag { display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border: 1px solid #E3E5E6; border-radius: 999px; box-sizing: border-box; font-size: 12px; line-height: 20px; color: #252B2B; flex-shrink: 0; }  .journal-card--small .journal-card__title { display: -webkit-box; height: 51px; margin-bottom: 16px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 24px; color: #252B2B; }  .journal-card__excerpt { display: -webkit-box; height: 60px; margin-bottom: 15px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 20px; color: #979E9F; }  .journal-card__date { display: flex; align-items: center; gap: 8px; min-width: 0; color: #979E9F; } .journal-card__date svg { width: 16px; height: 16px; flex: 0 0 16px; } .journal-card__date time { overflow: hidden; font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 16px; color: #979E9F; white-space: nowrap; } .journal-card__read { display: block; width: fit-content; font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 20px; color: #006C66; text-decoration: none; } .journal__bottom { position: relative; height: 62px; } .journal__pagination { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; } .journal__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: #E3E5E6; cursor: pointer; transition: width 280ms ease, background-color 280ms ease; } .journal__dot.is-active { width: 28px; background: #9B9B9B; } .journal__arrows { position: absolute; top: 0; right: 0; display: flex; gap: 20px; } .journal__arrow { width: 24px; height: 24px; background: none; border: 0; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 200ms ease, transform 200ms ease; } .journal__arrow g { opacity: 1; } .journal__arrow:disabled { opacity: .3; cursor: default; } @media (max-width: 1100px) { .journal__slide { grid-template-columns: 1fr 1fr; } .journal-card--large { grid-column: 1 / -1; height: 420px; } .journal-card--large .journal-card__tag { top: auto; bottom: 116px; } } @media (max-width: 768px) { .journal { padding: 48px 0; } .journal__head { gap: 16px; margin-bottom: 24px; } .journal__title { font-size: 32px; line-height: 38px; } .journal__all { width: 132px; height: 44px; flex: 0 0 132px; } .journal__slide { grid-template-columns: 1fr; gap: 16px; } .journal-card--large { grid-column: auto; height: 320px; } .journal-card--large .journal-card__tag { left: 24px; bottom: 96px; height: 34px; padding: 0 12px; font-size: 12px; } .journal-card--large .journal-card__overlay { height: 112px; padding: 24px; } .journal-card--large .journal-card__title { font-size: 20px; line-height: 28px; } .journal__bottom { height: 54px; } } @media (prefers-reduced-motion: reduce) { .journal__track, .journal-card--small .journal-card__img img, .journal__dot, .journal__arrow { transition-duration: 1ms; } }  .newsletter-section { background: #000; } .newsletter { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; padding: 0; display: flex; align-items: center; min-height: 562px; }  .newsletter__bg { position: relative; width: 880px; height: 495px; flex-shrink: 0; border-radius: 4px; overflow: hidden; } .newsletter__bg img { width: 100%; height: 100%; object-fit: cover; } .newsletter__content { flex: 1; max-width: 699px; color: #fff; } .newsletter__title { font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 64px; margin-bottom: 30px; } .newsletter__subtitle { font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 26px; color: rgba(255,255,255,0.6); margin-bottom: 46px; } .newsletter__form { display: flex; align-items: center; gap: 6px; height: 64px; max-width: 653px; width: 100%; margin-bottom: 30px; background: #fff; border-radius: 8px; padding-right: 6px; box-sizing: border-box; } .newsletter__input-wrap { flex: 1; position: relative; height: 100%; } .newsletter__input { width: 100%; height: 100%; padding: 0 24px 0 58px; border: none; background: transparent; font-family: var(--font-body); font-size: 16px; border-radius: 8px; } .newsletter__input::placeholder { color: #979E9F; } .newsletter__input:focus { outline: none; } .newsletter__mail-icon { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: #979E9F; } .newsletter__btn { display: flex; align-items: center; justify-content: center; width: 170px; height: 52px; flex-shrink: 0; background: #006C66; color: #fff; border: none; border-radius: 4px; font-family: var(--font-body); font-size: 16px; font-weight: 500; cursor: pointer; box-shadow: 0 4px 12px rgba(0,108,102,0.24), 0 4px 4px rgba(0,0,0,0.15); transition: background 0.2s; } .newsletter__btn:hover { background: #057F72; } .newsletter__consents { display: flex; flex-direction: column; gap: 8px; width: 441px; } .newsletter__consents .checkbox { width: 441px; box-sizing: border-box; color: rgba(255,255,255,0.6); font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 15px; } .newsletter__consents .checkbox:first-child { height: 36px; } .newsletter__consents .checkbox:nth-child(2) { height: 32px; } .newsletter__consents .checkbox:first-child .checkbox__box, .newsletter__consents .checkbox:nth-child(2) .checkbox__box { margin-top: 8px; } .newsletter__consents .checkbox:first-child > span:last-child { margin-top: 6px; } .newsletter__consents .checkbox:nth-child(2) > span:last-child { margin-top: 9px; }  .newsletter__consents .checkbox a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color .2s; } .newsletter__consents .checkbox a:hover { color: #fff; }  .newsletter__consents .checkbox__box { width: 16px; height: 16px; border: none; border-radius: 2px; background: #fff; transition: background .2s; } .newsletter__consents .checkbox__input:checked + .checkbox__box { background: #fff; }  .newsletter__consents .checkbox__input:checked + .checkbox__box::after { inset: 0; left: 0; top: 0; width: auto; height: auto; border: 0; transform: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7' viewBox='0 0 9 7' fill='none'%3E%3Cpath d='M1 3.6 3.4 6 8 1' stroke='%23006C66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px 7px no-repeat; }  .newsletter__consents .checkbox:hover .checkbox__box { background: #EDEDED; }  .newsletter__form, .newsletter__consents { position: relative; } .newsletter__error { position: absolute; left: 0; right: 0; display: flex; align-items: flex-start; gap: 8px; margin: 0; font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 20px; color: #FFB4B2; text-align: left; } .newsletter__error:empty { display: none; } .newsletter__error::before { content: ''; flex: 0 0 16px; width: 16px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFB4B2' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") no-repeat center / 16px 16px; } .newsletter__form .newsletter__error { top: calc(100% + 5px); } .newsletter__consents .newsletter__error { top: calc(100% + 8px); } .newsletter__form.has-error { box-shadow: 0 0 0 1px #D15E5D; background: #FDF2F2; } .newsletter__consents .checkbox.has-error .checkbox__box { box-shadow: 0 0 0 1px #D15E5D; } @media (max-width: 768px) {  .newsletter__form.has-error { box-shadow: none; background: transparent; } .newsletter__form.has-error .newsletter__input-wrap { box-shadow: 0 0 0 1px #D15E5D; background: #FDF2F2; } .newsletter__form .newsletter__error { top: calc(100% + 6px); } } @media (max-width: 768px) { .newsletter-section .newsletter { min-height: auto; padding: 0; flex-direction: column; align-items: flex-start; } .newsletter .newsletter-inner { display: block; padding: 48px 16px; } .newsletter__bg { display: none; } .newsletter__content { max-width: 100%; } .newsletter__title { font-size: 28px; line-height: 34px; margin-bottom: 16px; } .newsletter__subtitle { font-size: 14px; line-height: 20px; margin-bottom: 24px; } .newsletter__form { flex-direction: column; height: auto; background: transparent; padding: 0; gap: 12px; margin-bottom: 20px; border-radius: 0; } .newsletter__input-wrap { flex: 0 0 48px; width: 100%; height: 48px; background: #fff; border-radius: 4px; } .newsletter__input { border-radius: 4px; font-size: 14px; padding: 0 16px 0 44px; }  .newsletter__mail-icon { left: 14px; } .newsletter__btn { width: 100%; height: 48px; border-radius: 4px; font-size: 14px; } .newsletter__consents, .newsletter__consents .checkbox { width: 100%; }  .newsletter__consents { gap: 12px; } }  .hotspot { position: absolute; transform: translate(-50%, -50%); cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; } .hotspot__btn { width: 36px; height: 36px; background: #fff; border-radius: 50%; color: var(--color-primary); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sticky); z-index: 2; transition: transform 0.2s; }  .hotspot__btn svg { transition: transform 0.25s ease; } .hotspot:hover .hotspot__btn, .hotspot:focus-within .hotspot__btn { transform: scale(1.2); } .hotspot:hover .hotspot__btn svg, .hotspot:focus-within .hotspot__btn svg { transform: rotate(45deg); }  .hotspot::before { content: ''; position: absolute; width: 80px; height: 80px; border-radius: 50%; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 0; }  .hotspot__pulse { position: absolute; width: 80px; height: 80px; background: rgba(255, 255, 255, .12); border-radius: 50%; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: hotspot-pulse 2.4s ease-out infinite; z-index: 1; } @keyframes hotspot-pulse { 0% { transform: scale(0.45); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }  @media (prefers-reduced-motion: reduce) { .hotspot__pulse { animation: none; opacity: 0; } }  .flagman__specs { display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: space-between; align-items: center; column-gap: 16px; border-top: 1px solid #E2E2E2; border-bottom: 1px solid #E2E2E2; padding: 16px 0; margin: 24px 0; box-sizing: border-box; }   .flagman__spec { display: grid; grid-template-columns: max-content 1fr; grid-template-rows: minmax(30px, auto) auto; column-gap: 10px; row-gap: 4px; align-items: start; min-width: 0; } .flagman__spec[hidden], .flagman__spec-divider[hidden] { display: none; } .flagman__spec > div { display: contents; } .flagman__spec-icon { width: 28px; height: 28px; flex-shrink: 0; } .flagman__spec:first-child .flagman__spec-icon { width: 30px; height: 30px; } .flagman__spec-val { display: block; min-width: 0; font-family: var(--font-body); font-size: 22px; font-weight: 700; line-height: 28px; overflow-wrap: anywhere; color: #252B2B; }  .flagman__spec:not(.flagman__spec--long) .flagman__spec-val { white-space: nowrap; }  .flagman__spec--long .flagman__spec-val { align-self: center; font-size: 16px; line-height: 22px; } .flagman__spec-label { display: block; grid-column: 1 / -1; min-width: 0; font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 26px; overflow-wrap: anywhere; color: #979E9F; } .flagman__spec-label:empty { display: none; } .flagman__spec-divider { align-self: center; width: 1px; height: 55px; background: #E2E2E2; } .promo-timer { margin-bottom: 20px; } .promo-timer__label { display: block; font-family: 'Roboto', Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 12px; color: #555B5C;  margin-top: 2px; text-transform: uppercase; letter-spacing: 0; } .promo-timer__units { display: flex; align-items: center; gap: 12px; } .promo-timer__unit { display: flex; flex-direction: column; align-items: center; }  .promo-timer__val { font-family: 'Roboto', Arial, sans-serif; font-size: 48px; font-weight: 500; line-height: 56px; color: #252B2B; text-align: center;  font-variant-numeric: tabular-nums; }  .promo-timer__val--seconds { display: inline-flex; justify-content: center; } .promo-timer__seconds-roll { position: relative; display: inline-block; vertical-align: top; }  .promo-timer__seconds-current { display: block; } .promo-timer__seconds-previous { position: absolute; inset: 0; display: none; text-align: center; } .promo-timer__val--seconds.is-roll-preparing .promo-timer__seconds-previous { display: block; transform: translateY(0); } .promo-timer__val--seconds.is-roll-preparing .promo-timer__seconds-current { transform: translateY(100%); } .promo-timer__val--seconds.is-rolling .promo-timer__seconds-previous { display: block; animation: promo-seconds-out 520ms cubic-bezier(.4, 0, .2, 1) both; } .promo-timer__val--seconds.is-rolling .promo-timer__seconds-current { animation: promo-seconds-in 520ms cubic-bezier(.4, 0, .2, 1) both; }  @property --roll-fade { syntax: '<number>'; inherits: false; initial-value: 0; } .promo-timer__seconds-roll { --roll-fade: 0; overflow: visible;  -webkit-mask-image: linear-gradient(180deg, transparent calc(33% - 8% * var(--roll-fade)), #000 calc(33% + 13.7% * var(--roll-fade)), #000 calc(67% - 12.7% * var(--roll-fade)), transparent calc(67% + 4.7% * var(--roll-fade))); mask-image: linear-gradient(180deg, transparent calc(33% - 8% * var(--roll-fade)), #000 calc(33% + 13.7% * var(--roll-fade)), #000 calc(67% - 12.7% * var(--roll-fade)), transparent calc(67% + 4.7% * var(--roll-fade))); -webkit-mask-size: 100% 300%; mask-size: 100% 300%; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .promo-timer__val--seconds.is-rolling .promo-timer__seconds-roll { animation: promo-seconds-fade 520ms cubic-bezier(.4, 0, .2, 1) both; } @keyframes promo-seconds-fade { 0%, 100% { --roll-fade: 0; } 50% { --roll-fade: 1; } }   @keyframes promo-seconds-out { 0% { transform: translateY(0); }  50% { transform: translateY(-54.4%); } 100% { transform: translateY(-100%); } } @keyframes promo-seconds-in { 0% { transform: translateY(100%); }  50% { transform: translateY(21%); } 100% { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .promo-timer__val--seconds.is-rolling .promo-timer__seconds-previous, .promo-timer__val--seconds.is-rolling .promo-timer__seconds-current { animation: none; } .promo-timer__val--seconds.is-rolling .promo-timer__seconds-previous { display: none; } } .promo-timer__desc { font-size: 11px; color: var(--color-gray); margin-top: 4px; } .promo-timer__colon { font-family: 'Roboto', Arial, sans-serif; font-size: 20px; font-weight: 500; color: #252B2B; line-height: 24px; margin-top: -14px; } .promo-banner__special-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--color-primary); margin-bottom: 16px; text-transform: uppercase; }  .flagman__banner { background: url("/wp-content/themes/rokodil/assets/img/banners/flagman-bg.webp") center/cover no-repeat; width: 100%; min-height: 680px; display: block; align-items: center; padding: 0; border-radius: 0; grid-template-columns: none; gap: 0; } .flagman__banner-inner { position: relative; display: grid; grid-template-columns: 680px 1fr; gap: 26px; align-items: center; max-width: var(--container-width); margin: 0 auto; padding: 85px 16px; box-sizing: border-box; } .promo-banner { background: url("/wp-content/themes/rokodil/assets/img/banners/promo-bg.webp") center/cover no-repeat; width: 100%; min-height: 680px; display: block; align-items: center; padding: 0; border-radius: 0; grid-template-columns: none; gap: 0; } .promo-banner-inner { position: relative; display: grid; grid-template-columns: 680px 1fr; gap: 26px; align-items: center; max-width: var(--container-width); margin: 0 auto; padding: 85px 16px; box-sizing: border-box; } .newsletter-section { background: #000; padding: 0; } .newsletter { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; padding: 0; display: flex; align-items: center; min-height: 562px; } .newsletter-inner { display: flex; align-items: center; gap: 46px; width: 100%; max-width: 1920px; margin: 0 auto; padding: 67px 40px 0 34px; box-sizing: border-box; } @media (max-width: 1024px) { .flagman__banner-inner { grid-template-columns: 1fr; padding: 48px 16px; } .promo-banner-inner { grid-template-columns: 1fr; padding: 48px 16px; } .newsletter-inner { display: flex; align-items: center; gap: 46px; width: 100%; max-width: 1920px; margin: 0 auto; padding: 67px 40px 0 34px; box-sizing: border-box; } }  .badge--hit { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #C60100; color: #fff; font-size: 13px; font-weight: 500; border-radius: 999px; } .badge--novinka { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; background: #81A554; color: #fff; font-size: 13px; font-weight: 500; border-radius: 999px; } .badge--hit-red { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #C60100; color: #fff; font-size: 13px; font-weight: 500; border-radius: 999px; } .flagman__badges .badge, .promo-banner__badges .badge { position: relative !important; top: auto !important; left: auto !important; }   .promo-card { background: #FFFFFF; border-radius: 12px; padding: 30px 40px;  display: flex; align-items: center; gap: 30px; max-width: 692px; box-sizing: border-box; } .promo-card__timer-col { flex: 1; } .promo-card__title { font-family: var(--font-body); font-weight: 700; font-size: 22px; line-height: 28px; color: #252B2B; margin-bottom: 4px; } .promo-card__subtitle { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 20px;  color: #979E9F; display: block; margin-bottom: 16px; } .promo-card__divider { width: 1px; height: 200px; background: #F1F1F1; flex-shrink: 0; } .promo-card__action-col { flex: 1; display: flex; flex-direction: column; gap: 16px; }  .promo-card__price-row { display: flex; align-items: flex-end; justify-content: flex-start; gap: 8px; } .promo-card__prices { display: flex; flex-direction: column; gap: 6px; }  .promo-card__old-row { display: flex; align-items: center; gap: 8px; } .promo-card__price { font-family: var(--font-body); font-weight: 700; font-size: 24px; line-height: 28px; color: #252B2B; } .promo-card__old-price { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 20px; color: #979E9F; text-decoration: line-through; }  .promo-card__discount { flex: none; font-weight: 400; box-sizing: border-box; width: 42px; min-width: 42px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 14px; } .promo-card__buttons { display: flex; flex-direction: column; gap: 12px; } .btn--promo-cart { width: 100% !important; } .btn--secondary-grey { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; background: #F7F7F7; color: #252B2B; border-radius: 4px; font-family: var(--font-body); font-size: 16px; font-weight: 400; text-decoration: none; transition: background 0.2s; } .btn--secondary-grey:hover { background: #EAEAEA; } .newsletter-section { position: relative; background: #000; overflow: hidden; }  .newsletter { position: relative; } .newsletter__bg { position: relative; z-index: 0; } .newsletter__content { position: relative; z-index: 2; } .newsletter__blur { position: absolute; left: 445px; top: 184px; width: 1456px; height: 642px; pointer-events: none; z-index: 1; } .newsletter__blur img { width: 100%; height: 100%; object-fit: contain; } .newsletter__content { position: relative; z-index: 3; } .section-head__divider { display: inline-block; width: 1px; height: 62px; background: #D5D5D5;  flex-shrink: 0; } .flagman__head, .promo-section__head { display: flex; align-items: center; gap: 40px; margin-bottom: 32px; flex-wrap: wrap; } .flagman__title, .promo-section__title { margin-right: 0; } @media (min-width: 769px) { .why-us { padding: 62px 0 104px; } .why-us__head { margin-bottom: 94px; } .why-us__grid-wrapper { padding: 0; } .flagman { margin-top: 132px; } .flagman__head { padding-top: 0; margin-bottom: 36px; } .flagman__banner { min-height: 770px; } .best-sellers { margin-top: 132px; padding: 0 0 40px; } .best-sellers .product-card { height: 624px; } .promo-section { margin-top: 132px; padding: 0; } .promo-section__head { margin-bottom: 36px; } .promo-banner { min-height: 770px; } .journal { margin-top: 132px; padding: 0; } .newsletter-section { margin-top: 132px; } .newsletter__content { transform: translateY(-29px); } } @media (min-width: 1501px) {  .hero-screen__content { position: relative; margin-top: 184px; } .hero-screen__search { border-radius: 8px; } .hero-screen__tags { align-self: flex-start; gap: 8px; margin-left: 31px; }  .hero-screen__tag { box-sizing: border-box; justify-content: center; padding: 0 14px; }  .why-us { padding: 132px 0 104px; } .tech-carousel__viewport { margin-top: 62px; }  .flagman__head { align-items: flex-start; margin-bottom: 43px; } .flagman__head .section-head__divider { margin-top: 5px; transform: translateX(1px); } .flagman__tabs { gap: 4px; margin-top: 15px; }  .flagman__banner { min-height: 760px; } .flagman__banner-inner { display: block; padding: 0; } .flagman__badges { width: 275px; flex-wrap: nowrap !important; } .flagman__badges .badge { box-sizing: border-box; height: 32px; gap: 8px; padding: 0 10px; font-size: 16px; font-weight: 400; line-height: 26px; flex: 0 0 auto; } .flagman__badges .badge svg { width: 20px; height: 20px; flex: 0 0 20px; } .flagman__badges .badge--novinka { width: 119px; flex-basis: 119px; } .flagman__badges .badge--hit-red { width: 146px; flex-basis: 146px; } .flagman__product { position: absolute !important; top: 85px; left: 0; width: 680px; height: 590px; align-items: center; } .flagman__product [data-flagman-image] { width: 398px; height: 590px; max-width: none; max-height: none; object-fit: contain; }  .flagman__banner-inner { height: auto; min-height: 760px; } .flagman__info { position: relative; display: flex; flex-direction: column; width: 520px; max-width: none; margin-left: 706px; padding: 100px 0 168px; } .flagman__name { display: -webkit-box; width: 100%; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .flagman__desc { display: -webkit-box; width: 100%; margin: 20px 0 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .flagman__rating { display: flex; height: 24px; margin-top: 24px; } .flagman__rating .rating { height: 24px; gap: 5px; } .flagman__rating .rating__stars { height: 24px; gap: 0; } .flagman__rating .rating__star { width: 24px; height: 24px; flex: 0 0 24px; color: #FFD100; } .flagman__rating .rating__score { font-size: 14px; font-weight: 500; line-height: 20px; color: #555B5C; } .flagman__rating .rating__count { font-size: 14px; font-weight: 400; line-height: 20px; color: #979E9F; }  .flagman__specs { min-height: 128px; margin: 40px 0 0; padding: 33px 0 32px; align-items: start; }  .flagman__spec:nth-child(3) { column-gap: 8px; } .flagman__spec-divider { align-self: start; height: 55px; margin-top: -1px; } .flagman__price-card { position: relative; flex: none; width: 520px; height: 108px; margin-top: 40px; padding: 0; box-sizing: border-box; box-shadow: 0 8px 24px rgba(0, 0, 0, .08), 0 20px 60px rgba(0, 0, 0, .12); } .flagman__price { position: absolute; top: 40px; left: 40px; } .flagman__price-actions { position: absolute; top: 30px; left: 242px; width: 238px; height: 48px; gap: 10px; } .flagman__pagination { bottom: 55px; } .flagman__arrows { bottom: 46px; }  .promo-section { height: 870px; } .promo-section__head { align-items: flex-start; margin-bottom: 43px; } .promo-section__head .section-head__divider { margin-top: 5px; } .promo-section__head .flagman__tabs { gap: 4px; margin-top: 15px; transform: translateX(-1px); flex-wrap: nowrap; }  .promo-banner { height: 760px; min-height: 760px; padding: 0; border-radius: 0; } .promo-banner__viewport, .promo-banner__track, .promo-banner__slide { height: 760px; } .promo-banner__slide { position: relative; } .promo-banner-inner { position: relative; display: block; height: 760px; padding: 0; } .promo-banner__badges { width: 347px; flex-wrap: nowrap !important; } .promo-banner__badges .badge { box-sizing: border-box; height: 32px; gap: 8px; padding: 0 10px; font-size: 16px; font-weight: 400; line-height: 26px; flex: 0 0 auto; } .promo-banner__badges .badge svg { width: 20px; height: 20px; flex: 0 0 20px; } .promo-banner__badges .badge--novinka { width: 119px; flex-basis: 119px; } .promo-banner__badges .badge--hit { width: 146px; flex-basis: 146px; } .promo-banner__badges .badge--dark { width: 62px; flex-basis: 62px; } .promo-banner__product { position: absolute !important; top: 85px; left: 0; width: 680px; height: 590px; align-items: center; } .promo-banner__product img { width: 646px; height: 537px; max-width: none; max-height: none; object-fit: contain; } .promo-banner__info { position: absolute; top: 100px; left: 706px; width: 692px; height: 520px; max-width: none; }  .promo-banner__name { position: absolute; top: 0; left: 0; display: -webkit-box; overflow: hidden; width: 387px; height: 56px; margin: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .promo-banner__desc { position: absolute; top: 86px; left: 0; display: -webkit-box; overflow: hidden; width: 603px; height: 52px; margin: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .promo-banner__info > .rating { position: absolute; top: 164px; left: 0; height: 24px; gap: 5px; margin: 0 !important; } .promo-banner__info > .rating .rating__stars { height: 24px; gap: 0; } .promo-banner__info > .rating .rating__star { width: 24px; height: 24px; flex: 0 0 24px; color: #FFD100; } .promo-banner__info > .rating .rating__score { margin-left: 0; color: #555B5C; font-size: 14px; font-weight: 500; line-height: 20px; } .promo-banner__info > .rating .rating__count { color: #979E9F; font-size: 14px; font-weight: 400; line-height: 20px; } .promo-card { position: absolute; top: 240px; left: 0; width: 692px; height: 280px; max-width: none; padding: 0; border-radius: 12px; box-shadow: none; display: block; } .promo-card__timer-col, .promo-card__action-col, .promo-card__price-row { position: static; display: block; } .promo-card__title { position: absolute; top: 50px; left: 50px; width: 265px; height: 28px; margin: 0; } .promo-card__subtitle { position: absolute; top: 90px; left: 50px; width: 265px; height: 20px; margin: 0; } .promo-timer { position: absolute; top: 110px; left: 50px; width: 264.03px; height: 121px; } .promo-timer__units { position: relative; display: block; width: 264.03px; height: 121px; } .promo-timer__unit { position: absolute; top: 0; width: 68px; height: 121px; text-align: center; } .promo-timer__unit:nth-child(1) { left: 0; } .promo-timer__unit:nth-child(3) { left: 99.38px; } .promo-timer__unit:nth-child(5) { left: 198.77px; } .promo-timer__val { position: absolute; top: 37.52px; left: 0; display: flex; align-items: flex-start; justify-content: center; width: 68px; height: 69px; font-family: 'Roboto', Arial, sans-serif; font-size: 59.234px; font-weight: 500; line-height: 69px; color: #252B2B; box-sizing: border-box; min-width: 0; padding: 0; border-radius: 0; background: none; } .promo-timer__label { position: absolute; top: 101.69px; left: 0; width: 68px; height: 11px; margin: 0; font-family: 'Roboto', Arial, sans-serif; font-size: 9.214px; font-weight: 400; line-height: 11px; letter-spacing: 0; text-align: center; text-transform: uppercase; } .promo-timer__colon { position: absolute; top: 58px; width: 7px; height: 28px; margin: 0; font-family: 'Roboto', Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 28px; color: #252B2B; } .promo-timer__colon:nth-child(2) { left: 80px; } .promo-timer__colon:nth-child(4) { left: 180px; }  .promo-timer__val--seconds { justify-content: center; } .promo-card__divider { position: absolute; top: 50px; left: 375px; width: 1px; height: 200px; background: #F1F1F1; } .promo-card__prices { position: absolute; top: 50px; left: 435px; display: flex; flex-direction: column; gap: 6px; width: max-content; height: 55px; }  .promo-card__price, .promo-card__old-price { position: static; display: block; width: max-content; } .promo-card__discount { position: static; width: 42px; min-width: 42px; height: 20px; padding: 0; justify-content: center; font-size: 12px; font-weight: 400; line-height: 14px; } .promo-card__buttons { position: absolute; top: 123px; left: 435px; display: flex; width: 200px; height: 108px; gap: 12px; } .promo-card__buttons .btn { width: 200px !important; height: 48px; border-radius: 4px; } .promo-banner__pagination { bottom: 55px; }  .promo-banner__arrows { bottom: 46px; } .best-sellers { padding-bottom: 0; } }  .catalog-showmore { display: flex; justify-content: center; margin-top: 32px; } .catalog-showmore__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 24px; background: #006C66; color: #fff; border: none; border-radius: 8px; font-family: var(--font-body); font-size: 13px; font-weight: 400; cursor: pointer; transition: background 0.2s; } .catalog-showmore__btn:hover { background: #057F72; } .catalog-showmore__btn svg { animation: spin 1s linear infinite; }  .why-cards { padding: 100px 0; background: #F9F9F9; } .why-cards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .why-cards__card { display: flex; flex-direction: column; align-items: center; text-align: center; } .why-cards__icon { margin-bottom: 20px; display: flex; align-items: center; justify-content: center; } .why-cards__icon img { width: 46px; height: 46px; object-fit: contain; } .why-cards__title { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 600; font-size: 18px; line-height: 26px; color: #252B2B; margin: 0 0 12px 0; text-align: center; } .why-cards__desc { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 24px; color: #555B5C; margin: 0; text-align: center; } @media (max-width: 1100px) { .catalog-layout .products-grid { grid-template-columns: repeat(2, 1fr); } .why-cards__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .catalog-hero__title { font-size: 40px; line-height: 48px; } .catalog-layout .products-grid { grid-template-columns: 1fr; } .why-cards__grid { grid-template-columns: 1fr; } .catalog-layout { grid-template-columns: 1fr; } }  @media (max-width: 768px) { .hero-screen { padding: 24px 16px; box-sizing: border-box; } .hero-screen__slide { background-position: 52% center; }  .why-us { padding: 74px 0; box-sizing: border-box; } .technologies { height: 1105px; } .technologies__mobile { height: 1105px; padding: 54px 16px; box-sizing: border-box; } .technologies__mobile .technologies__head { display: block; margin: 0 0 33px; } .technologies__mobile .technologies__title { min-height: 76px; margin: 0 0 24px; font-size: 32px; line-height: 38px; } .technologies__mobile .technologies__subtitle { min-height: 80px; margin: 0; } .technologies__grid { gap: 19px; } .technologies__mobile .tech-info { position: relative; min-height: 440px; height: 440px; padding: 24px 18px 30px; box-sizing: border-box; overflow: visible; }  .technologies__mobile .tech-info { padding-top: 32px; } .technologies__mobile .tech-info__category { margin-bottom: 24px; } .technologies__mobile .tech-info__title { margin-bottom: 20px; }  .technologies__mobile .tech-mobile-dots { display: flex; align-items: center; justify-content: center; gap: 5px; height: 5px; margin: 20px 0 0; } .technologies__mobile .tech-mobile-dots__item { position: relative; width: 5px; height: 5px; flex: 0 0 5px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .2); cursor: pointer; transition: width .3s ease, flex-basis .3s ease, background-color .3s ease; }  .technologies__mobile .tech-mobile-dots__item::after { content: ''; position: absolute; top: -10px; right: -2.5px; bottom: -10px; left: -2.5px; } .technologies__mobile .tech-mobile-dots__item.is-active { width: 20px; flex-basis: 20px; background: rgba(255, 255, 255, .8); }  .technologies__mobile .tech-mobile-dots__item.is-active:not(:first-child):not(:last-child) { margin: 0 1px; } .technologies__mobile .tech-mobile-dots__item.is-active:first-child { margin-right: 1px; } .technologies__mobile .tech-mobile-dots__item.is-active:last-child { margin-left: 1px; } .flagman { margin-top: 80px; padding: 0; overflow: hidden; } .flagman > .container { height: 106px; } .flagman__head { display: block; height: 106px; padding: 0; margin: 0 0 26px; } .flagman__title { height: 38px; margin: 0; font-size: 32px; line-height: 38px; } .flagman__head .section-head__divider, .promo-section__head .section-head__divider { display: none; }  .flagman__tabs, .promo-section .flagman__tabs {  width: auto; max-width: none; height: 42px; margin-top: 26px; margin-right: -16px; margin-left: -16px; padding: 0 16px; gap: 6px; scroll-padding: 0 16px;  position: relative; top: -2px; } .flagman__tab, .promo-section .flagman__tab { height: 42px; padding: 0 16px; font-size: 14px; }   .flagman__banner { min-height: 892px; margin-top: 26px; padding: 0; border-radius: 0; box-sizing: border-box; }  .flagman__banner-inner { position: relative; display: flow-root; min-height: 892px; padding: 0 16px 54px; box-sizing: border-box; } .flagman__badges, .promo-banner__badges { top: 24px !important; left: 16px !important; gap: 8px !important; } .flagman__badges .badge, .promo-banner__badges .badge { box-sizing: border-box; gap: 4px; font-size: 13px; line-height: 18px; white-space: nowrap; } .flagman__badges .badge svg, .promo-banner__badges .badge svg { width: 16px; height: 16px; flex-basis: 16px; } .flagman__badges .badge--novinka, .promo-banner__badges .badge--novinka { width: 94px; height: 28px; padding: 2px 10px; } .flagman__badges .badge--hit, .promo-banner__badges .badge--hit { width: 113px; height: 28px; padding: 0 10px; }   .flagman__product { position: absolute !important; top: 76px; right: 16px; left: 16px; width: auto; height: 320px; min-height: 0; align-items: center; } .flagman__product [data-flagman-image] { width: 100%; height: 100%; max-height: none; object-fit: contain; }  .hotspot::before, .hotspot__pulse { width: 46px; height: 46px; -webkit-backdrop-filter: blur(2.3px); backdrop-filter: blur(2.3px); } .hotspot__btn { width: 20.7px; height: 20.7px; } .hotspot__btn svg { width: 10.4px; height: 10.4px; }  .hotspot__tooltip { width: calc(100vw - 32px); top: calc(100% + 16.65px); transform: translateX(calc(-50% + (50 - var(--spot-left, 50)) * (100vw - 32px) / 100)) translateY(-6px); } .hotspot:hover .hotspot__tooltip, .hotspot:focus-within .hotspot__tooltip { transform: translateX(calc(-50% + (50 - var(--spot-left, 50)) * (100vw - 32px) / 100)) translateY(0); }  .flagman__info { position: relative; display: flex; flex-direction: column; width: 100%; max-width: none; margin-top: 432px; } .flagman__name { display: -webkit-box; width: 100%; margin: 0; overflow: hidden; font-size: 26px; line-height: 34px; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }  .flagman__desc { display: -webkit-box; width: 100%; margin: 20px 0 0; overflow: hidden; font-size: 14px; line-height: 20px; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .flagman__rating { display: flex; justify-content: center; width: 100%; height: 16px; margin-top: 20px; }   .flagman__specs { min-height: 84px; margin: 24px 0 0; padding: 16px 0; column-gap: 8px; }  .flagman__spec { grid-template-rows: minmax(20px, auto) auto; column-gap: 6px; row-gap: 6px; align-items: center; } .flagman__spec-icon, .flagman__spec:first-child .flagman__spec-icon { width: 20px; height: 20px; }  .flagman__spec-val { font-size: 14px; line-height: 16px; } .flagman__spec--long .flagman__spec-val { font-size: 12px; line-height: 14px; } .flagman__specs .flagman__spec-label { font-size: 12px; font-weight: 500; line-height: 14px; color: #979E9F; }  .flagman__spec-divider { height: 40px; } .flagman__price-card { position: relative; flex: none; width: 100%; height: 144px; margin-top: 24px; padding: 0; box-sizing: border-box; } .flagman__price { position: absolute; top: 24px; left: 0; width: 100%; text-align: center; } .flagman__price-actions { position: absolute; top: 72px; right: 20px; left: 20px; gap: 8px; } .flagman__add-to-cart { flex: 1 1 auto; width: auto; }  .flagman__pagination { bottom: 24px; } .flagman__arrows { display: none; } .best-sellers { height: 535px; margin-top: 80px; padding: 0; overflow: hidden; box-sizing: border-box; } .best-sellers__head { height: 38px; margin: 0 0 32px; } .best-sellers__title { font-size: 32px; line-height: 38px; } .best-sellers__nav { display: none; } .best-sellers__track { gap: 9px; } .best-sellers .product-card { position: relative; flex: 0 0 167px; width: 167px; height: 435px; overflow: hidden; } .best-sellers .product-card__media { width: 167px; height: 167px; flex-basis: 167px; overflow: visible; } .best-sellers .product-card__media img { padding: 0; } .best-sellers .product-card__actions { top: 337px; right: auto; left: 56px; flex-direction: row; gap: 6px; }  .best-sellers .product-card__actions .icon-btn, .best-sellers .product-card__actions .icon-btn:hover, .best-sellers .product-card__actions .icon-btn:active { background: transparent; border-radius: 4px; } .best-sellers .product-card__actions .icon-btn { width: 46px; height: 46px; } .best-sellers .badge--hit { top: 0; left: 0; width: 102px; height: 24px; padding: 0 6px; gap: 4px; font-size: 12px; line-height: 12px; } .best-sellers .badge--hit svg { width: 14px; height: 14px; flex-basis: 14px; } .best-sellers .product-card__body { position: relative; width: 167px; height: 268px; padding: 0; flex-basis: 268px; } .best-sellers .product-card__header { position: absolute; top: 18px; left: 0; width: 167px; height: 37px; padding: 0; } .best-sellers .product-card__art, .best-sellers .product-card__header .rating__score { font-size: 9px; line-height: 12px; }  .best-sellers .product-card__header .rating__stars { display: inline-flex; gap: 0; margin-right: -2px; } .best-sellers .product-card__header .rating__star { width: 13px; height: 13px; } .best-sellers .product-card__header .rating__star:not(:first-child) { display: none; } .best-sellers .product-card__title { position: absolute; top: 67px; left: 0; width: 167px; max-height: 48px; margin: 0; overflow: hidden; font-size: 12px; line-height: 16px; -webkit-line-clamp: 3; } .best-sellers .product-card__price { top: 133px; left: 0; right: 0; font-size: 16px; line-height: 20px; } .best-sellers .product-card__footer { top: 170px; left: 0; right: auto; width: 46px; height: 46px; gap: 0; } .best-sellers .product-card__footer .qty { display: none; }  .best-sellers .product-card__buy { flex: 0 0 46px; width: 46px; min-width: 46px; height: 46px; padding: 0; gap: 0; font-size: 0; } .best-sellers .product-card__buy::before { content: ""; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M1.667 2.5l.874.175a1.667 1.667 0 0 1 1.332 1.468L4 5.417l.824 6.865a1.667 1.667 0 0 0 1.655 1.468h7.494a2.917 2.917 0 0 0 2.829-2.21l.936-3.742a1.917 1.917 0 0 0-1.86-2.381H4'/%3E%3Cpath d='M10.833 11.25H7.5'/%3E%3Ccircle cx='7.083' cy='16.667' r='1.25' fill='%23fff' stroke='none'/%3E%3Ccircle cx='14.583' cy='16.667' r='1.25' fill='%23fff' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat; } .best-sellers .product-card__quick-buy { top: 222px; left: 0; width: 167px; height: 46px; padding: 0 8px; font-size: 11px; } .best-sellers__pagination { height: 6px; margin-top: 24px; }  .promo-section { margin-top: 80px; padding: 0; overflow: hidden; box-sizing: border-box; } .promo-section > .container { height: 106px; } .promo-section__head { display: block; height: 106px; margin: 0; } .promo-section__title { height: 38px; margin: 0; font-size: 32px; line-height: 38px; }  .promo-banner { min-height: 0; margin-top: 26px; padding: 0; border-radius: 0; box-sizing: border-box;  background: #E4E4E4 url("/wp-content/themes/rokodil/assets/img/banners/flagman-bg.webp") calc(50% - 134px) 0 / 1923px 1081px no-repeat; }  .promo-banner-inner { position: relative; display: block; min-height: 0; padding: 76px 16px 54px; box-sizing: border-box; }  .promo-banner__badges .badge { font-size: 12px; font-weight: 400; line-height: 14px; } .promo-banner__badges .badge--dark { height: 28px; padding: 0 12px; }  .promo-banner__product { width: 100%; height: 320px; min-height: 0; align-items: flex-start; } .promo-banner__product img { position: relative; z-index: 1; width: 100%; height: 285px; max-height: none; margin-top: 10px; object-fit: contain; }  .promo-banner__product::before { content: ''; position: absolute; top: 294.86px; left: calc(50% - 123.74px); width: 224.07px; height: 15.4px; border-radius: 50%; background: #8D8D8D; filter: blur(11.5px); pointer-events: none; } .promo-banner__info { max-width: none; margin-top: 36px; }  .promo-banner__name { display: -webkit-box; overflow: hidden; width: fit-content; max-width: 100%; margin: 0 auto; font-size: 26px; line-height: 34px; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 1;  position: relative; top: 1px; }  .promo-banner__desc { display: -webkit-box; overflow: hidden; min-height: 60px; margin: 20px 0 0; font-size: 14px; line-height: 20px; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }   .promo-banner__info > .rating { display: flex; justify-content: center; width: 100%; height: 16px; gap: 5px; margin: 20px 0 0 !important; padding-right: 1px; box-sizing: border-box; } .promo-banner__info > .rating .rating__stars { gap: 0; } .promo-banner__info > .rating .rating__score, .promo-banner__info > .rating .rating__count { margin-left: 0; font-family: var(--font-body); font-size: 12px; line-height: 14px; } .promo-banner__info > .rating .rating__score { color: #555B5C; font-weight: 500; } .promo-banner__info > .rating .rating__count { margin-left: 1.5px; color: #979E9F; font-weight: 400; }  .promo-card { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; max-width: none; margin-top: 24px; padding: 24px 20px; box-sizing: border-box; } .promo-card__timer-col, .promo-card__action-col { display: contents; }  .promo-card__title { position: relative; left: 1px; width: 100%; margin: 0; font-size: 16px; line-height: 26px; text-align: center; } .promo-card__subtitle { width: 100%; margin: 4px 0 0; font-size: 12px; line-height: 20px; text-align: center; }  .promo-card .promo-timer { flex: none; width: 207px; height: 95px; margin: 4px 0 0; padding-top: 29px; box-sizing: border-box; } .promo-card .promo-timer__units { gap: 10px; }  .promo-card .promo-timer__val { width: 53px; font-size: 46.45px; line-height: 54px; text-align: left; } .promo-card .promo-timer__label { margin-top: -3px; font-size: 7.23px; line-height: 8px; } .promo-card .promo-timer__colon { margin-top: -3px; font-size: 18.82px; line-height: 22px; } .promo-card__divider { width: 100%; height: 1px; margin: 24px 0 0; } .promo-card__price-row { margin-top: 23px; }  .promo-card__prices { align-items: center; gap: 6px; } .promo-card__price { font-size: 22px; line-height: 26px; } .promo-card__old-row { gap: 10px; }  .promo-card__old-price { position: relative; top: -1px; font-size: 14px; line-height: 17px; } .promo-card__buttons { gap: 8px; width: 100%; margin-top: 20px; }  .promo-card__buttons .btn { width: 100%; height: 48px; font-size: 14px; line-height: 20px; } .promo-card__buttons .btn--secondary-grey { background: #F5F5F5; font-weight: 500; } .promo-card__buttons .btn--secondary-grey:hover { background: #EAEAEA; }  .promo-banner__pagination { bottom: 24px; }    .reviews__dot:not(.reviews__dot--active), .journal__dot:not(.is-active) { background: #D3D3D3; } .promo-banner__arrows { display: none; } .reviews { position: relative; height: 805px; margin-top: 80px; padding: 0; box-sizing: border-box; } .reviews__head { position: relative; display: block; height: 307px; margin: 0 0 28px; }  .reviews__caption { position: absolute; top: 0; left: 0; gap: 6px; font-size: 12px; line-height: 14px; white-space: nowrap; } .reviews__caption img { width: 16px; height: 16px; flex-basis: 16px; } .reviews__title { position: absolute; top: 34px; left: 0; width: 343px; height: 114px; font-size: 32px; line-height: 38px; } .reviews__head-right { position: static; display: contents; } .reviews__stats { position: absolute; top: 166px; left: 0; width: 343px; height: 54px; gap: 12px; } .reviews__avatars { width: 95px; flex: 0 0 95px; } .reviews__avatar { width: 36px; height: 36px; margin-left: -16px; } .reviews__stats-text { width: 236px; flex: 0 0 236px; align-items: flex-start; gap: 8px; } .reviews__stats-text strong { font-size: 14px; line-height: 18px; } .reviews__stats-text span { font-size: 12px; line-height: 14px; } .reviews__btn { position: absolute; top: 259px; left: 0; width: 200px; height: 48px; font-size: 14px; } .review-card { height: 440px; } .review-card__product { height: 89px; }  .review-card__product-img { top: 16px; left: 6px; width: 44px; height: 44px; } .review-card__product-info { top: 19px; left: 60px; right: 14px; width: auto; gap: 6px; transform: none; } .review-card__product-label, .review-card__product-name { font-size: 12px; line-height: 16px; }  .review-card__product-rating { top: 20px; right: 14px; gap: 2px; width: 78px; height: 14px; } .review-card__product-rating svg { width: 14px; height: 14px; flex: 0 0 14px; } .review-card__review { height: 351px; }   .review-card__quote { top: 20px; left: 0; } .review-card__text { top: 60px; right: 0; left: 0; }  .review-card__photos { top: 175px; right: 0; left: 0; overflow: hidden; } .review-card__footer { top: 263px; right: 0; left: 0; }  .review-card__avatar { width: 40px; height: 40px; flex-basis: 40px; } .review-card__user { gap: 6px; } .review-card__user-info { gap: 7px; } .review-card__user-name { font-size: 14px; } .reviews__pagination { height: 6px; margin-top: 24px; } .journal { position: relative; height: 932px; margin-top: 80px; padding: 0; overflow: hidden; box-sizing: border-box; } .journal__head { height: 38px; margin: 0 0 32px; } .journal__title { font-size: 32px; line-height: 38px; }  .journal__all { position: absolute; top: 884px; left: 50%; transform: translateX(-50%); z-index: 3; width: 200px; height: 48px; }  .journal { container-type: inline-size; } .journal__viewport {  width: auto; height: 480px; margin-right: -16px;  overflow: hidden; overflow: clip; } .journal__track { width: max-content; gap: 10px; align-items: flex-start; }  .journal__featured { display: block; width: calc(100cqi - 32px); margin-bottom: 20px; } .journal__featured .journal-card--large { width: 100%; height: 260px; } .journal__slide { display: contents; } .journal-card--small.journal-card--mobile { display: block; } .journal__viewport .journal-card--large { display: none; }  .journal-card--large .journal-card__tag { left: 20px; bottom: 72px; height: 28px; padding: 0 18px; font-size: 10px; } .journal-card--large .journal-card__overlay { height: 80px; padding: 20px; } .journal-card--large .journal-card__title { font-size: 14px; line-height: 20px; } .journal-card--small { width: calc(100cqi - 32px); flex: 0 0 calc(100cqi - 32px); height: 480px; }  .journal-card--small .journal-card__img { height: 242px; } .journal-card--small .journal-card__body { height: 238px; } .journal-card--small:nth-of-type(2) { grid-column: 1; } .journal-card--small:nth-of-type(3) { grid-column: 2; } .journal__pagination:not(.journal__pagination--mobile) { display: none; } .journal__pagination.journal__pagination--mobile { display: flex; } .journal__bottom { position: absolute; top: 854px; right: 16px; left: 16px; height: 6px; } .journal__pagination { top: 0; bottom: auto; } .journal__arrows { display: none; } .newsletter-section { position: relative; height: 776px; margin-top: 80px; overflow: hidden; } .newsletter-section .newsletter { position: relative; display: block; height: 776px; min-height: 776px; } .newsletter .newsletter-inner { position: static; display: block; height: 776px; padding: 0; }  .newsletter__bg { position: absolute; top: 472px; right: -96px; left: -69px; display: block; width: auto; height: 304px; border-radius: 0; }  .newsletter__blur { display: none; } .newsletter-section { background: #000 url("/wp-content/themes/rokodil/assets/img/banners/subscribe-blur-mobile.webp") top center / 100% 500px no-repeat; } .newsletter__content { position: static; max-width: none; } .newsletter__title { position: absolute; top: 54px; right: 16px; left: 16px; width: auto; min-height: 76px; margin: 0; font-size: 32px; line-height: 38px; text-align: center; } .newsletter__subtitle { position: absolute; top: 150px; right: 16px; left: 16px; width: auto; height: 40px; margin: 0; font-size: 14px; line-height: 20px; text-align: center; } .newsletter__form { position: absolute; top: 222px; right: 16px; left: 16px; width: auto; height: 106px; margin: 0; gap: 10px; } .newsletter__consents { position: absolute; top: 360px; right: 16px; left: 16px; width: auto; }  .newsletter__consents .checkbox { width: auto; } } @media (max-width: 359px) { .best-sellers .product-card { flex-basis: calc((100vw - 41px) / 2); width: calc((100vw - 41px) / 2); } .best-sellers .product-card__media, .best-sellers .product-card__body, .best-sellers .product-card__header, .best-sellers .product-card__title, .best-sellers .product-card__quick-buy { width: calc((100vw - 41px) / 2); } .best-sellers .product-card__footer, .best-sellers .product-card__buy { width: 42px; min-width: 42px; } .best-sellers .product-card__actions { left: 46px; gap: 4px; } .best-sellers .product-card__actions .icon-btn { width: 42px; } }