@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Manrope:wght@200..800&display=swap'); /* Local Inter (variable font: weights 100-900, optical sizes 14-32). License: assets/font/Inter/OFL.txt */ @font-face { font-family: 'Inter'; src: url('../font/Inter/Inter-Variable.ttf') format('truetype-variations'), url('../font/Inter/Inter-Variable.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../font/Inter/Inter-Variable-Italic.ttf') format('truetype-variations'), url('../font/Inter/Inter-Variable-Italic.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; } :root { --container-left-offset: 0px; --container-right-offset: 0px; } /* Always reserve the scrollbar gutter so opening a modal (which may hide the scrollbar) doesn't shift right-anchored fixed elements. */ html { scrollbar-gutter: stable; } /* ========================================================================= Filter Panel (fp-* namespace) — clean, no !important, no global collisions ========================================================================= */ /* lock page scroll while the panel is open */ body.fp-open { overflow: hidden; } /* ---------- Root panel ---------- */ /* Backdrop behind the panel — separate fixed element, no z-index tricks */ .fp-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; z-index: 9998; } .fp-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s linear 0s; } .fp { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 460px; background: #fff; z-index: 9999; transform: translateX(100%); opacity: 0; visibility: hidden; transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1), opacity .3s ease, visibility 0s linear .4s; box-shadow: -8px 0 24px rgba(0, 0, 0, .08); will-change: transform, opacity; letter-spacing: 0; color: #171717; } .fp.is-open { transform: translateX(0); opacity: 1; visibility: visible; transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1), opacity .3s ease, visibility 0s linear 0s; } .fp__inner { height: 100%; display: flex; flex-direction: column; background: #fff; } /* ---------- Header / footer ---------- */ .fp__header { display: flex; align-items: center; justify-content: center; padding: 22px 26px; position: relative; } /* thin divider under the header — short, doesn't reach side edges */ .fp__header::after { content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 1px; background: #EEEEEE; } .fp__title { font-weight: 400; font-size: 20px; letter-spacing: .15em; text-transform: uppercase; color: #171717; } .fp__close { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; padding: 6px; cursor: pointer; } .fp__body { flex: 1; width: 100%; overflow-y: auto; padding: 8px 0 16px; margin: 0; /* hide the panel's own scrollbar — wheel/touch scroll still works. The global page scrollbar on is the only visible one. */ scrollbar-width: none; -ms-overflow-style: none; } .fp__body::-webkit-scrollbar { width: 0; height: 0; display: none; } .fp__footer { padding: 3px 26px 3px; display: flex; justify-content: center; background: #fff; position: relative; } /* thin divider above the footer — short, doesn't reach side edges */ .fp__footer::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 1px; background: #EEEEEE; } .fp__reset { padding: 12px 28px; font-weight: 400; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #171717; background: transparent; border: 0; cursor: pointer; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color .25s ease; } .fp__reset:hover { text-decoration-color: #171717; } /* ---------- Collapsible section ---------- */ .fp-sec { /* horizontal padding moved here from .fp__body so the scrollbar can sit at the panel edge */ padding: 18px 26px 16px; display: block; } .fp-sec__head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; width: 100%; } .fp-sec__title { font-weight: 400; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; color: #171717; } .fp-sec__chart { font-weight: 300; margin-left: 4px; } .fp-sec__count { color: #171717; font-weight: 400; } /* +/- icon — horizontal bar is always there; vertical bar fades when open */ .fp-sec__icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; } .fp-sec__icon::before, .fp-sec__icon::after { content: ""; position: absolute; background: #171717; transition: transform .25s ease, opacity .25s ease; } .fp-sec__icon::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; } .fp-sec__icon::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; } .fp-sec.is-open .fp-sec__icon::after { opacity: 0; transform: rotate(90deg); } .fp-sec__body { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .fp-sec.is-open .fp-sec__body { max-height: 600px; padding-top: 14px; } /* ---------- Options list ---------- */ .fp-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .fp-opts > li { list-style: none; margin: 0; padding: 0; } .fp-opt { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; cursor: pointer; font-size: 18px; font-weight: 300; letter-spacing: 1px; padding: 4px 0; position: relative; } .fp-opts--color .fp-opt { grid-template-columns: 20px 1fr auto 26px; } /* native checkbox: visually hidden but still focusable / clickable via the parent label. Selector `.fp-opt > input.fp-opt__input` has specificity (0,2,1) which beats the global `input[type="checkbox"]` rule (0,1,1) further down in the file. */ .fp-opt > input.fp-opt__input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; padding: 0; border: 0; appearance: none; -webkit-appearance: none; pointer-events: none; clip: rect(0 0 0 0); overflow: hidden; } .fp-opt > .fp-opt__box { width: 18px; height: 18px; border: 1px solid #BCBCBC; border-radius: 3px; position: relative; transition: background .2s ease, border-color .2s ease; background: #fff; } .fp-opt > input.fp-opt__input:checked + .fp-opt__box { background: #D12C4C; border-color: #D12C4C; } .fp-opt > input.fp-opt__input:checked + .fp-opt__box::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .fp-opt__label { font-weight: 300; line-height: 1.2; color: #171717; } .fp-opt__count { font-weight: 300; font-size: 15px; color: #171717; white-space: nowrap; } .fp-opt__swatch { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; } /* ---------- Price slider ---------- */ .fp-price__values { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 14px; color: #171717; font-weight: 300; } .fp-price__slider { position: relative; height: 28px; margin: 0 12px; } .fp-price__track { position: absolute; top: 50%; left: 0; right: 0; height: 4px; margin-top: -2px; background: #EEEEEE; border-radius: 2px; } .fp-price__range { /* same light-grey as the track per mockup — no black active segment */ position: absolute; top: 50%; height: 4px; margin-top: -2px; background: #EEEEEE; border-radius: 2px; } .fp-price__thumb { position: absolute; top: 50%; width: 22px; height: 22px; margin-left: -11px; margin-top: -11px; background: #D12C4C; border: 0; border-radius: 4px; cursor: grab; padding: 0; z-index: 2; } .fp-price__thumb:active { cursor: grabbing; } .fp-price__thumb::before { /* three white vertical bars on the thumb (per mockup) */ content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, #fff 0%, #fff 100%), linear-gradient(to right, #fff 0%, #fff 100%), linear-gradient(to right, #fff 0%, #fff 100%); background-size: 1px 8px, 1px 8px, 1px 8px; background-repeat: no-repeat; background-position: 7px center, 11px center, 15px center; } /* ---------- Mobile ---------- */ @media (max-width: 600px) { .fp { max-width: 100%; } .fp__body { padding: 8px 18px 16px; } .fp__header, .fp__footer { padding-left: 18px; padding-right: 18px; } } body { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-style: normal; line-height: 1.3; letter-spacing: 0.1em; overflow-x: hidden; padding-top: 61px; } /* Cascading fade-in reveal. `js-reveal` is set on by an inline script in (BEFORE first paint) on pages that use the cascade, so sections start hidden without any flash. JS then adds `.is-revealed` per section as it enters view. */ html.js-reveal main > section:not(:first-child) { opacity: 0; transition: opacity .45s ease; transition-delay: var(--reveal-delay, 0s); } html.js-reveal main > section.is-revealed { opacity: 1; } /* On catalog pages: products-block container shows instantly; the cascade is done on individual cards (wave-by-wave) so the grid fills row by row. */ html.js-reveal .product-item { opacity: 0; transition: opacity .4s ease; transition-delay: var(--reveal-delay, 0s); } html.js-reveal .product-item.is-revealed { opacity: 1; } @media (prefers-reduced-motion: reduce) { html.js-reveal main > section:not(:first-child), html.js-reveal .product-item { opacity: 1; transition: none; } } body.nav--active { overflow: hidden; } @media (min-width: 1500px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1652px; } } @media (max-width: 1500px) { .container { max-width: 100%; } } input[type="radio"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 2px solid #171717; border-radius: 50%; cursor: pointer; position: relative; outline: none; box-shadow: none; flex-shrink: 0; } input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 2px solid #171717; border-radius: 4px; cursor: pointer; position: relative; outline: none; box-shadow: none; flex-shrink: 0; } input[type="radio"]:checked::before { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; background: #171717; border-radius: 50%; flex-shrink: 0; } input[type="checkbox"]:checked::before { content: ""; position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; background: #171717; border-radius: 4px; flex-shrink: 0; } .form-select:active, .form-select:focus, .form-select:hover { box-shadow: none; outline: none; } .add-items { text-align: center; padding-top: 30px; } .add-items button, .add-items a { border: 1px solid #D12C4C; padding: 16px 32px; font-weight: 400; font-size: 13px; line-height: 120%; vertical-align: middle; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 4px; text-decoration: none; color: #D12C4C; } .add-items button:hover, .add-items a:hover { background: #D12C4C; color: #FFFFFF; } .add-items button:hover svg path, .add-items a:hover svg path { fill: #FFFFFF; } .btn { font-weight: 500; font-size: 15px; line-height: 140%; width: 100%; padding: 14.5px 30px; background: #D12C4C; border-radius: 4px; color: #FFFFFF; text-transform: uppercase; } a:hover { text-decoration: underline; } .btn svg { margin-left: 13px; } .btn:hover { background: #D12C4C !important; color: #FFFFFF !important; text-decoration: none !important; } .btn2 { font-weight: 300; font-size: 15px; line-height: 140%; text-transform: uppercase; text-decoration: none; padding: 14.5px 30px; background: transparent; border-radius: 4px; color: #171717; border: 1px solid #EEEEEE; width: 100%; } .btn2 svg { margin-left: 13px; } .btn2:hover { background: #900000 !important; color: #FFFFFF !important; border-color: #FFFFFF; text-decoration: none !important; } .btn2:hover svg path { stroke: #ffffff; } .btn3 { font-weight: 300; font-size: 14px; line-height: 140%; text-transform: uppercase; text-decoration: none; padding: 10px 29px; background: transparent; border-radius: 4px; color: #171717; border: 1px solid #171717; text-transform: uppercase; } .btn3 svg { margin-left: 13px; } .btn3:hover { background: #900000 !important; color: #FFFFFF !important; border-color: #FFFFFF; text-decoration: none !important; } .btn3:hover svg path { stroke: #ffffff; } .btn4 { font-weight: 300; font-size: 14px; line-height: 140%; text-transform: uppercase; text-decoration: none; padding: 10px 29px; background: transparent; border-radius: 4px; color: #FFFFFF; border: 1px solid #FFFFFF; } .btn4 svg { margin-left: 13px; } .btn4:hover { background: #D8DCDF !important; color: #171717 !important; border-color: #171717; text-decoration: none !important; } .btn4:hover svg path { stroke: #171717; } .tablets, .desktop { display: none; } @media (min-width: 768px) { body { padding-top: 70px; } .btn { font-size: 18px; max-width: 330px; padding: 16px 30px; text-align: center; color: #FFFFFF; } .btn2 { font-size: 18px; max-width: 330px; padding: 16px 30px; text-align: center; } .mobile { display: none; } .tablets { display: block; } input[type="radio"] { width: 20px; height: 20px; } input[type="radio"]:checked::before { width: 12px; height: 12px; } } @media (min-width: 992px) { body { padding-top: 80px; } .mobile { display: none; } .tablets { display: none; } .desktop { display: block; } } header { background: white; border-bottom: 1px solid #EEEEEE; padding: 10px 0; color: #171717; position: fixed; left: 0; right: 0; top: 0; z-index: 200; } .header-tops { justify-content: space-between; } a { color: #171717; } .menu-top { margin-left: auto; margin-right: auto; } /*mainmenu*/ header .nav { display: none; background: #FFFFFF; } .nav--active .nav { padding: 20px 10px; } .nav-link { padding: 0 25px; } .nav--active .mega-menu { list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0px; margin-bottom: 20px; } .nav--active .nav-link { font-weight: 300; font-size: 15px; line-height: 120%; text-transform: uppercase; text-decoration: none; color: #171717; padding: 10px 0; margin-bottom: 0px; } .sub-menus .container { padding: 0; } .nav--active .mega-menu ul { list-style-type: none; margin: 0; padding: 0; } .nav--active .mega-menu > li.megamenu > div.sub-menus .sub-menu { display: flex; flex-wrap: wrap; flex-direction: row; gap: 10px 40px; margin: 10px 0 30px; } .nav--active .mega-menu ul a { text-decoration: none } .nav--active .mega-menu > li.megamenu > div.sub-menus .sub-menu .children { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin: 10px; } .nav--active .mega-menu > li.megamenu a.item { font-weight: 300; font-size: 13px; line-height: 120%; text-decoration: none; color: #171717; text-transform: uppercase; } /* Animated underline for header / footer links. Native underline is always present but transparent — on hover the color fades in. This keeps the line strictly under the text (not under padding, dropdown arrow, etc). */ .mega-menu .nav-link, .mega-menu a.item, .mega-menu a.children-item, .footer-link a { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .55s cubic-bezier(0.4, 0, 0.2, 1); } .mega-menu .nav-link:hover, .mega-menu .nav-link:focus, .mega-menu a.item:hover, .mega-menu a.item:focus, .mega-menu a.children-item:hover, .mega-menu a.children-item:focus, .footer-link a:hover, .footer-link a:focus { text-decoration-color: currentColor; } /* :visited — keep underline transparent (browser would otherwise re-add it). Do not touch color. */ .mega-menu .nav-link:visited, .mega-menu a.item:visited, .mega-menu a.children-item:visited, .footer-link a:visited { text-decoration-color: transparent; } /* re-assert hover after :visited so it always wins (LVHA: link, visited, hover, active). !important guards against the global `a:hover { text-decoration: underline }` shorthand at line ~137. */ .mega-menu .nav-link:hover, .mega-menu .nav-link:focus, .mega-menu a.item:hover, .mega-menu a.item:focus, .mega-menu a.children-item:hover, .mega-menu a.children-item:focus { text-decoration-line: underline !important; text-decoration-color: #171717 !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; } .footer-link a:hover, .footer-link a:focus { text-decoration-line: underline !important; text-decoration-color: #ffffff !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; } .mega-menu > li.megamenu.megamenu2 > div.sub-menus > div .col-menu { border-right: 0; padding-top: 50px; padding-right: 0px; margin-bottom: 50px; } header .button-top { justify-content: end; gap: 20px; align-items: center; } .user-top-bl, .languages-top-bl { display: none; } .mob_bottom { display: flex; align-items: center; justify-content: space-between; } .mob-languages { display: flex; align-items: center; gap: 15px; } .mob-users a, .mob-languages a { font-weight: 200; font-size: 14px; line-height: 120%; text-decoration: none; color: #171717; } .mob-users a.active, .mob-languages a.active { font-weight: 500; } .mob-users a svg { margin-left: 6px; } .mob-languages a svg { margin-left: 6px; opacity: 0.4; } .mob-languages a:hover svg, .mob-languages a.active svg { opacity: 1; } header .logo-top img { width: 130px; height: auto; } header .button-top > div > a > svg { width: 21px; height: auto; } .cart-top-bl > a { position: relative; } .cart-top-bl .cart-total { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #D12C4C; font-weight: 600; font-size: 11px; line-height: 1; color: white; position: absolute; right: -8px; top: -6px; display: flex; align-items: center; justify-content: center; letter-spacing: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.15); box-sizing: border-box; } .mini-search-blok { position: absolute; top: 40px; right: 0; min-width: 360px; padding-top: 61px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; z-index: 100; background: white; } /* Mobile: full-screen slide-in panel from the right (like the filter panel) */ .mini-cart-blok { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 100vw; background: white; z-index: 9999; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.7,.2,1); overflow-y: auto; -webkit-overflow-scrolling: touch; visibility: visible; opacity: 1; } .mini-cart-blok.is-open { transform: translateX(0); } .mini-search-blok { height: auto; min-width: 270px; width: 100%; } .mini-search, .mini-cart { background: white; padding: 20px 10px 10px 10px; } .mini-search { height: auto; } .mini-cart-product-items { display: grid; grid-template-columns: 130px auto; gap: 12px; } .mini-cart-product-items .image { height: 150px; overflow: hidden; } .search-top-bl:hover .mini-search-blok { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s; } .mini-cart-close { background: none; border: none; cursor: pointer; color: #888; font-size: 20px; line-height: 1; padding: 0; transition: color .2s; } .mini-cart-close:hover { color: #1a1a1a; } .mini-cart-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 0px 24px; } .mini-cart-header-title { font-weight: 300; font-size: 24px; line-height: 140%; text-transform: uppercase; color: #171717; } .mini-cart-product-items .info-model { font-weight: 400; font-size: 10px; line-height: 140%; background: #F0F0F0; border-radius: 4px; padding: 5px 12px; margin-bottom: 7px; display: inline-block; text-transform: uppercase; } .mini-cart-product-items .info-title { font-weight: 400; font-size: 18px; line-height: 90%; text-transform: uppercase; text-decoration: none; display: block; margin-bottom: 7px; } .mini-cart-product-items .info-params-price { font-weight: 600; font-size: 15px; line-height: 130%; margin-bottom: 6px; } .mini-cart-product-items .info-params-title { font-weight: 300; font-size: 15px; line-height: 140%; text-transform: uppercase; color: #303030; display: flex; align-items: center; } .mini-cart-product-items .info-params-title span { color: #30303080; width: 90px; display: inline-block; } .mini-cart-product-items .info-params-title svg { margin-left: 7px; } .mini-cart-product-items .info-params { display: flex; gap: 5px; flex-direction: column; } .mini-cart-body { height: calc(100vh - 190px); overflow-y: auto; } .mini-cart .info-cart-totals { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; } .mini-cart .info-cart-total { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #EEEEEE; padding-bottom: 12px; } .mini-cart .info-cart-total .title { font-weight: 300; font-size: 12px; line-height: 140%; text-transform: uppercase; } .mini-cart .info-cart-total .price { font-weight: 500; font-size: 15px; line-height: 140%; text-align: right; } .mini-cart .info-cart-total:last-child .price { font-size: 18px; } .mini-cart .btn-block { display: flex; flex-direction: column; gap: 15px; margin-top: 25px; } .mini-cart .btn-block a { width: 100%; display: block; max-width: unset; text-decoration: none; } .mini-cart .btn-block .btn2 { font-weight: 300; font-size: 18px; line-height: 140%; text-transform: uppercase; border: 1px solid #EEEEEE; border-radius: 4px; padding: 13px; text-align: center; color: #171717; } .mini-cart .btn-block .btn2:hover { background: #171717; color: #FFFFFF; } .mini-cart-upsell { padding: 20px 0px 40px; display: flex; flex-direction: column; align-items: center; } .upsell-title { font-weight: 300; font-size: 19px; line-height: 140%; text-transform: uppercase; margin-bottom: 25px; } .upsell-grid { display: grid; grid-template-columns: 164px 164px; gap: 12px; } .upsell-card { position: relative; cursor: pointer; } .upsell-img { height: 260px; width: 164px; background: #f0eeea; border-radius: 8px; aspect-ratio: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; transition: opacity .2s; } .upsell-card:hover .upsell-img { opacity: .85; } .upsell-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .upsell-badge { position: absolute; top: 7px; left: 7px; background: #c8174d; color: #fff; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.03em; } .upsell-name { font-size: 12px; color: #1a1a1a; } .upsell-prices { display: flex; align-items: center; gap: 5px; margin-top: 3px; flex-wrap: wrap; flex-direction: row; } .upsell-price-new { font-weight: 500; font-size: 12px; line-height: 130%; color: #171717; } .upsell-price-old { font-weight: 500; font-size: 12px; line-height: 130%; color: #D12C4C; text-decoration: line-through; } .upsell-colors { font-size: 11px; color: #aaa; margin-left: auto; } .qty-controls { display: flex; align-items: center; gap: 0px; margin-top: 14px; } .qty-btn { width: 30px; height: 30px; border: 0; background: #171717; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; color: #1a1a1a; transition: border-color .2s, background .2s; } .qty-btn.left { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .qty-btn.right { } .qty-val { font-weight: 300; font-size: 15px; line-height: 100%; color: #000000; border: 1px solid #EEEEEE; width: 65px; height: 30px; padding-top: 6px; padding-right: 29px; padding-bottom: 6px; padding-left: 29px; } .qty-delete { width: 30px; height: 30px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; transition: color .2s; border: 1px solid #EEEEEE; background: #FFFFFF; } .qty-delete:hover { color: #c8174d; } .mini-search-input { display: flex; align-items: center; border-bottom: 1px solid #171717; gap: 7px; padding-bottom: 11px; } .mini-search-input .search-input { font-weight: 400; font-size: 15px; line-height: 100%; border: 0; box-shadow: none; outline: none; width: calc(100% - 50px); } .search-input-clear { border: 0; } .mini-search-result { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; max-height: 380px; overflow-y: auto; padding-right: 4px; } /* compact product card: thumbnail | (name + price) */ .mini-search-item { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 6px; text-decoration: none; color: inherit; transition: background .15s ease; } .mini-search-item:hover { background: #f6f6f6; } .mini-search-img { width: 56px; height: 56px; border-radius: 4px; overflow: hidden; background: #f5f5f5; flex-shrink: 0; } .mini-search-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .mini-search-info { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; } .mini-search-name { font-weight: 400; font-size: 14px; line-height: 1.2; color: #171717; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini-search-name span { color: #BCBCBC; } .mini-search-price { font-weight: 500; font-size: 14px; line-height: 1; color: #171717; } .mini-search-all { display: block; text-align: center; padding: 12px 8px; margin-top: 8px; border-top: 1px solid #eee; font-size: 13px; letter-spacing: .5px; color: #171717; text-decoration: none; text-transform: uppercase; transition: color .15s ease; } .mini-search-all:hover { color: #c8174d; } /* anchor the search dropdown to the search trigger so it opens directly under it */ .search-top-bl { position: relative; } .search-top-bl > a .search-input { display: none; } .header__nav { width: 40px; height: 40px; position: relative; display: flex; border-radius: 3px; border: 0; padding: 0; align-items: center; justify-content: center; background: #fff; } .header__nav i, .header__nav i:after, .header__nav i:before { position: absolute; top: 50%; left: 9px; width: 22px; height: 2px; display: block; background: #202027; border-radius: 3px; transition: all 0.3s linear; } .header__nav i { margin: -1px 0 0 0; } .header__nav i:after, .header__nav i:before { width: 22px; content: ""; top: -8px; left: 0; } .header__nav i:after { top: 8px; } .nav--active .header__nav i { background: #fff; } .nav--active .header__nav i:after, .nav--active .header__nav i:before { top: 0; } .nav--active .header__nav i:after { transform: rotate(-45deg); } .nav--active .header__nav i:before { transform: rotate(45deg); } .nav--active .nav { display: block; position: absolute; top: 61px; left: 0; right: 0; z-index: 100; } .cat_img { display: none; } .mail-url { display: none; text-decoration: none; } .mob_bottoms .user-top-bl { font-weight: 200; font-size: 14px; line-height: 120%; color: #171717; display: flex; align-items: center; gap: 18px; } .mob_bottoms2 { display: flex; align-items: center; justify-content: space-between; margin-top: 34px; } @media (max-width: 991px) { .megamenu2{ display: none; } .nav--active .mega-menu > li.megamenu > div.sub-menus .sub-menu{ display: grid; grid-template-columns: repeat(3,1fr); gap: 0px 20px; border-bottom: 1px solid #EEEEEE; margin-bottom: 0; margin-top: 0; padding-bottom: 20px; } .logo-top{ margin-right: auto; margin-left: 18px; } .col-menu .tit { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; cursor: pointer; font-weight: 300; font-size: 15px; line-height: 120%; text-transform: uppercase; border-bottom: 1px solid #EEEEEE; } .col-menu .tit.active{ border-bottom: 0; } .languages-top-bl { display: none; } .col-menu .tit.active span { transform: rotate(-90deg); } .col-menu .sub-menu { display: none; padding: 8px 0 12px; } .col-menu .sub-menu li { padding: 5px 0; } .nav-item.dropdownmenu .sub-menus { display: none; } .nav-item { border-bottom: 1px solid #EEEEEE; } .nav-item:first-child { border-bottom: 0; } .nav-item.dropdownmenu .sub-menus .sub-menu li { padding: 8px 0; border-bottom: 0.5px solid rgba(0, 0, 0, .1); } .nav-item.dropdownmenu .sub-menus .sub-menu li:last-child { border-bottom: none; } } @media (min-width: 768px) { header { padding: 15px 0; } .mini-search-blok, .mini-cart-blok { min-width: 448px; top: 71px; } /* Desktop: restore the small dropdown popup near the cart icon */ .mini-cart-blok { position: absolute; right: 0; bottom: auto; width: auto; max-width: 590px; z-index: 100; transform: translateY(-8px); opacity: 0; visibility: hidden; overflow: visible; transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; } .mini-cart-blok.is-open { transform: translateY(0); opacity: 1; visibility: visible; transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s; } .nav--active .nav { top: 71px; } .mini-cart-product-items { display: grid; grid-template-columns: 200px auto; gap: 16px; } .mini-cart-product-items .info-params-price { font-size: 24px; font-weight: 500; margin-bottom: 18px; } .mini-cart-product-items .image { height: 240px; } .mini-cart .info-cart-total .title { font-size: 15px; } .mini-cart .info-cart-total:last-child .price { font-size: 22px; } .mini-cart-product-items .info-params-title { font-size: 15px; } .mini-cart-product-items .info-title { font-size: 26px; font-weight: 300; } .mini-cart .btn-block .btn2 { font-size: 17px; padding: 18px; } .user-top-bl, .wishlist-top-bl { display: block; } .cart-top-bl .cart-total { min-width: 20px; height: 20px; font-size: 12px; border-radius: 10px; right: -9px; top: -7px; } .cart-top-bl > a { /*width: 30px; height: 30px;*/ display: inline-flex; align-items: center; justify-content: center; } } @media all and (min-width: 992px) { .mob_bottoms, .header__nav { display: none; } .cat_img { display: block; } .mini-search-blok { /* dropdown anchored to .search-top-bl, opens right under the trigger */ position: absolute; top: 100%; right: 0; left: auto; min-width: 380px; max-width: 420px; padding-top: 18px; } .mini-cart-blok { position: absolute; top: 80px; right: 0; min-width: 584px; padding-top: 0px; } .mini-search-blok { height: auto; } .mini-cart { background: white; padding: 20px; padding-right: var(--container-right-offset); } /* Search dropdown is anchored to the trigger now, so no container-right-offset shift */ .mini-search { background: white; padding: 20px; } .mini-search-input .search-input { width: 100%; } } @media (min-width: 1200px) { .nav-link { padding: 0 15px; } header .button-top { gap: 30px; align-items: center; } } @media (min-width: 992px) { .container-md { --bs-gutter-x: 20px; padding-right: 20px; padding-left: 20px; } header { padding: 17px 0; } header .nav { display: flex; } .mega-menu li a { font-weight: 400; font-size: 16px; text-align: center; color: #171717; } .mega-menu li a:hover { color: #171717; } .mega-menu { margin: 0 auto; padding-left: 0; align-items: center; background: #FFFFFF; } .mega-menu ul { margin: 0; padding: 0; } .mega-menu li { margin: 0; list-style-type: none; } .mega-menu li a { font-weight: 300; font-size: 16px; line-height: 120%; text-transform: uppercase; display: flex; } .mega-menu > li.dropdownmenu > div.sub-menus { visibility: hidden; position: absolute; box-sizing: border-box; z-index: 3; opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; text-align: left; margin-left: 0px; } .mega-menu > li.megamenu > div.sub-menus { visibility: hidden; position: absolute; margin-top: 0px; box-sizing: border-box; z-index: 3; opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; text-align: left; left: 0; right: 0; margin-left: 0px; } .mega-menu > li.megamenu > div.sub-menus > div, .mega-menu > li.dropdownmenu > div.sub-menus > div { flex-wrap: wrap; margin-top: 30px; box-shadow: 0px 0px 1px 0px #2828287d; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background: white; padding: 0 25px; } .mega-menu > li.megamenu > div.sub-menus > div > div > div { gap: 0px 40px; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; background: #ffffff; } .mega-menu > li.megamenu > div.sub-menus > div .col-menu { border-right: 1px solid #EEEEEEEE; padding-right: 50px; margin-bottom: 40px; } .mega-menu > li.megamenu > div.sub-menus > div .col-menu:last-child { border-right: 0; } .mega-menu > li.megamenu > div.sub-menus .tit { font-weight: 500; font-size: 18px; line-height: 120%; text-transform: uppercase; color: #171717; margin-bottom: 20px; margin-top: 30px; } .mega-menu > li.megamenu > div.sub-menus .sub-menu { display: grid; /* auto-width columns so long labels (e.g. "Головные уборы") keep their natural width */ grid-template-columns: repeat(3, max-content); gap: 15px 40px; } /* Keep every mega-menu item on a single line; prevents wraps for future long labels too */ .mega-menu > li.megamenu > div.sub-menus .sub-menu .item, .mega-menu > li.megamenu > div.sub-menus .sub-menu li { white-space: nowrap; } .mega-menu > li.megamenu > div.sub-menus .sub-menu > li .mega-menu > li.megamenu > div.sub-menus .sub-menu > li { display: flex; flex-direction: row; justify-content: space-between; gap: 30px; } .mega-menu > li.megamenu > div.sub-menus .sub-menu > li > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .mega-menu > li.megamenu > div.sub-menus .sub-menu:last-child > li > ul { padding-right: 0; } .mega-menu > li > a.nav-link > span { background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 0.5L4 4L0.5 0.5' stroke='%23171717' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); display: inline-block; background-repeat: no-repeat; background-position: center center; margin-left: 6px; width: 20px; height: 20px; } .mega-menu > li:hover > a.nav-link span { transform: rotate(-180deg); } .mega-menu > li.dropdownmenu:hover > div.sub-menus, .mega-menu > li.megamenu:hover > div.sub-menus { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s; } .mega-menu > li.dropdownmenu a.item, .mega-menu > li.megamenu a.item { font-weight: 300; font-size: 16px; line-height: 200%; text-transform: uppercase; text-decoration-line: underline; text-decoration-color: transparent; color: #171717; } .mega-menu > li.megamenu a.children-item { text-decoration-line: underline; text-decoration-color: transparent; } /* default underline hovers replaced by animated text-decoration-color further down */ header .logo-top img { width: 175px; height: auto; } .languages-top-bl, .user-top-bl, .wishlist-top-bl { display: block; } .button-top { gap: 20px; } header .button-top > div > a > svg { width: 30px; height: auto; } header .button-top > div { order: 2; } .search-top-bl { order: 1 !important; } .search-top-bl > a { background: #EEEEEEB2; border-radius: 6px; padding: 15px 12px; position: relative; margin-right: 31px; } .search-top-bl > a .search-input:hover, .search-top-bl > a .search-input:focus { outline: 0; } .search-top-bl > a .search-input { border: 0; background: transparent; max-width: 150px; font-weight: 300; font-size: 13px; line-height: 120%; text-transform: uppercase; color: #171717; display: inline-block; } .search-top-bl .mini-search-input { display: none; } .search-top-bl > a::before { display: none; } } /*footer*/ footer { background: #171717; padding: 30px 0 17px; } .footer-logo { margin-bottom: 50px; text-align: center; order: 8; grid-column: span 3; } .footer-top .footer-block1 { display: grid; gap: 0px 20px; grid-template-columns: repeat(3, 1fr); } .footer-logo img { height: 43px; width: auto; margin-bottom: 19px; } .footer-logo-text { font-weight: 200; font-size: 12px; line-height: 100%; text-align: center; text-transform: uppercase; color: #FFFFFF; max-width: 210px; margin-left: auto; margin-right: auto; } .footer-link1 { order: 1; } .footer-brend-text, .footer-link .title { font-weight: 200; font-size: 16px; line-height: 120%; text-transform: uppercase; color: #FFFFFF; margin-bottom: 15px; text-align: center; } .footer-brend-text { order: 2; grid-column: span 3; } .footer-link ul { margin: 0; padding: 0; list-style-type: none; } .footer-link1 { margin-bottom: 50px; grid-column: span 3; } .footer-link1 ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 32px; } .footer-link span, .footer-link a { font-weight: 200; font-size: 14px; line-height: 120%; color: #b1a8a8; opacity: 0.5; text-decoration: none; text-align: center; } /* .footer-link a:hover handled by animated text-decoration-color above */ .footer-link2 { order: 6; grid-column: span 3; margin-bottom: 29px; margin-top: 50px; } .footer-link2 ul { display: flex; flex-direction: column; gap: 15px; justify-content: center; } .footer-link2 ul li { text-align: center } .footer-brend img { height: 18px; width: auto; } .footer-brend1 { order: 3; } .footer-brend2 { order: 4; } .footer-brend3 { order: 5; } .footer-link3 { order: 7; grid-column: span 3; margin-top: 28px; display: grid; grid-template-columns: 1fr 178px; margin-bottom: 40px; } .footer-link3 .title { text-align: left; } .copyright { order: 11; grid-column: span 3; font-weight: 200; font-size: 13px; line-height: 120%; text-align: center; text-transform: uppercase; margin-top: 33px; color: #FFFFFF; } footer a.btn2 { font-weight: 300; font-size: 13px; line-height: 100%; text-transform: uppercase; color: #171717; padding: 6px 50px; border-radius: 20px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; max-width: min-content; opacity: 1; height: 40px; } .social-block { order: 7; grid-column: span 3; display: flex; align-items: center; justify-content: center; } .footer-text { order: 10; font-weight: 200; font-size: 12px; line-height: 100%; color: #FFFFFF; grid-column: span 3; text-align: center; } .social-icon { display: flex; align-items: center; gap: 20px; } .social-icon svg { width: 30px; height: auto; } @media (min-width: 768px) { footer { padding: 50px 0 37px; } .footer-top .footer-block1 { grid-column: span 4; gap: 23px; align-items: center; justify-content: space-between; flex-direction: row; } .footer-link a { font-size: 14px; } .social-block { margin-top: 20px; max-width: 400px; justify-content: space-between; } .footer-logo svg { height: 68px; width: auto; } .footer-top { display: grid; grid-template-columns: auto auto auto auto; gap: 34px 20px; } .footer-link .title { font-size: 20px; margin-bottom: 20px; } .footer-link ul { gap: 20px; } .footer-bottom { margin-top: 34px; } .footer-bottom .copyright { font-size: 13px; } .social-icon { gap: 15px; } .social-icon svg { width: 46px; height: auto; } } @media (min-width: 992px) { footer { padding: 69px 0 63px; } .footer-top .footer-block1 { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; grid-template-areas: "logo brend1 brend2 brend3" "social nav contacts question" "copy nav contacts question"; column-gap: 50px; row-gap: 0; align-items: start; } .footer-logo { grid-area: logo; margin: 0 0 0 0; text-align: left; } .footer-logo img { height: 82px; width: auto; margin-bottom: 30px; } .footer-logo-text { font-size: 16px; text-align: left; margin-left: unset; margin-right: unset; max-width: unset; } .footer-brend-text { display: none; } .social-block { grid-area: social; padding-top: 0px; margin-top: 30px; } .copyright { grid-area: copy; text-align: left; padding-top: 0px; margin-top: auto; font-size: 16px; } .footer-brend1 { grid-area: brend1; align-self: start; } .footer-brend2 { grid-area: brend2; align-self: start; } .footer-brend3 { grid-area: brend3; align-self: start; } .footer-text { grid-area: nav; text-align: left; padding-top: 0px; margin-top: auto; font-size: 16px; } .footer-brend img { width: auto; height: auto; display: block; } .footer-link1 { grid-area: nav; margin-top: -20px; margin-bottom: 28px; } .footer-link2 { grid-area: contacts; margin-top: -20px; } .footer-link3 { grid-area: question; margin: 0; margin-top: -20px; display: flex; gap: 24px; flex-direction: column; } .footer-link .title { font-size: 24px; margin-bottom: 16px; text-align: left; } .social-icon svg { width: 50px; height: auto; } .footer-link2 ul li { text-align: left; } .footer-link1 ul, .footer-link2 ul { display: flex; flex-direction: column; gap: 10px; text-align: left; } .footer-link a { font-size: 18px; } footer a.btn2 { font-weight: 200; font-size: 24px; line-height: 100%; text-transform: none; padding: 10px 75px; margin-left: unset; max-width: 100%; } .footer-link3 .text { display: block; opacity: 0.6; font-weight: 300; font-size: 16px; line-height: 120%; margin-top: 35px; color: white; } } .fiximage { position: relative; overflow: hidden; } .fiximage img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100% !important; object-position: center; object-fit: cover; z-index: 1; } @media (min-width: 768px) { .container-fluid, .container { padding-right: 20px; padding-left: 20px; } .row { margin-right: -20px; margin-left: -20px; } .row > * { padding-right: 20px; padding-left: 20px; } .fulimage { margin-left: -20px; margin-right: -20px; } .fulimage { margin-left: unset; margin-right: unset; } } /*breadcrumb*/ .breadcrumbs { padding-top: 30px; } .breadcrumbs.top2 { padding-top: 40px; } .breadcrumb { display: flex; gap: 5px; align-items: center; margin-bottom: 20px; } .breadcrumb a { font-weight: 400; font-size: 13px; line-height: 140%; text-transform: uppercase; text-decoration: none; color: #171717; } .breadcrumb span.separator { margin-top: -1px; } .breadcrumb span { font-weight: 400; font-size: 13px; line-height: 140%; text-transform: uppercase; text-decoration: none; color: #171717; } h1 { font-weight: 300; font-size: 30px; line-height: 90%; text-transform: uppercase; margin-bottom: 25px; color: #171717; } h1 span { font-weight: 400; line-height: 140%; font-size: 20px; } .breadcrumbs .image { height: 200px; margin-bottom: 20px; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /**/ .categories { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; margin-left: -12px; margin-right: -12px; background: #BCBCBC1A; } .categories a { font-weight: 300; font-size: 16px; line-height: 120%; text-transform: uppercase; text-decoration: none; } .categories a:hover { color: #171717; } .categories a.active { color: #171717; } .categories .sub-menu { display: none; } /**/ .categories { display: flex; align-items: center; position: static; } .categories .nav-item { position: static; display: inline-block; padding: 16px 12px; } .categories .nav-item > a { font-weight: 300; font-size: 16px; line-height: 120%; text-transform: uppercase; text-align: center; text-decoration: none; } /* animated underline on the category tabs (Обувь / Одежда / Аксессуары) — line under text only */ .categories .nav-item > a { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .35s cubic-bezier(0.4, 0, 0.2, 1); } .categories .nav-item > a:hover, .categories .nav-item > a.active { text-decoration-color: #171717; } /* sub-menu drops in smoothly under the tabs (fade + slide-down) */ .categories .sub-menu { display: block; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; position: fixed; left: 0; right: 0; width: 100%; background: #fff; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; z-index: 9999; list-style: none; pointer-events: none; } .categories .sub-menu .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 16px; padding-top: 20px; padding-bottom: 20px; } .categories .nav-item:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s; pointer-events: auto; } .categories .sub-menu li { list-style: none; } /* sub-menu items: same animated-underline hover, font matches parent tabs */ .categories .sub-menu li a { font-size: 16px; letter-spacing: .07em; text-transform: uppercase; color: inherit; display: block; padding: 4px 0; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .35s cubic-bezier(0.4, 0, 0.2, 1); } /* kill browser visited colors */ .categories .sub-menu li a:visited { color: inherit; } .categories .sub-menu li a:hover, .categories .sub-menu li a:focus { text-decoration-color: currentColor; } @media (max-width: 991px) { .categories .sub-menu .container { grid-template-columns: repeat(2, 1fr); } } /**/ .sort-filter { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; } .sort-block { position: relative; z-index: 100; } .fort-block .title, .sort-block .title { font-weight: 300; font-size: 15px; line-height: 140%; text-decoration: none; display: flex; align-items: center; gap: 8px; color: #171717; text-transform: uppercase; } .sort-block .title span { width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.58301 11H17.4163M10.9997 4.58334V17.4167' stroke='%23171717' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center center; display: inline-block; } .fort-block .title span { width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.83398 4.58334H20.1673M5.50065 11H16.5007M8.25065 17.4167H13.7507' stroke='%23171717' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center center; } .sort-block-popap { position: absolute; top: calc(100% + 15px); right: 0; left: auto; z-index: 100; min-width: 340px; padding: 25px; display: flex; gap: 10px; flex-direction: column; background: #FFFFFF; border-radius: 4px; box-shadow: 0px 0px 10px 0px #2828280F; opacity: 0; visibility: hidden; transform: translateY(5px); transition: all 0.2s ease; z-index: 10; } .sort-block-popap a { background-color: #EEEEEE; padding: 15px 15px 15px 57px; font-weight: 300; font-size: 16px; line-height: 140%; text-decoration: none; background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='29' height='29' rx='14.5' stroke='%23171717'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: left 15px center; border-radius: 4px; text-transform: uppercase; } .sort-block-popap a:hover, .sort-block-popap a.active { background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='29' height='29' rx='14.5' stroke='white'/%3E%3Crect x='4' y='4' width='22' height='22' rx='11' fill='white'/%3E%3C/svg%3E%0A"); background-color: #D12C4C; color: #FFFFFF; } .sort-block:hover .sort-block-popap { opacity: 1; visibility: visible; transform: translateY(0); } .sort-block:hover .title span { background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.41699 13H20.5837' stroke='%23171717' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .pagination { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 40px; } .pagination .page-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px !important; border: 1px solid #EEEEEE; font-weight: 300; font-size: 14px; line-height: 130%; text-align: center; color: #171717; } .pagination .page-item:hover .page-link, .pagination .page-item.active .page-link { background: #D12C4C; border: 1px solid #D12C4C; color: #FFFFFF; } .pagination .page-item.prev { margin-right: 10px; } .pagination .page-item.next { margin-left: 10px; } .pagination .page-item.next:hover .page-link, .pagination .page-item.prev:hover .page-link { background: #D12C4C; border: 1.4px solid #D12C4C; color: #FFFFFF; } .pagination .page-item.next:hover .page-link svg path, .pagination .page-item.prev:hover .page-link svg path { stroke: white; } .catalogs-info { margin-bottom: 60px; } .catalogs-info .texts-block { display: flex; flex-direction: column; } .catalogs-info .text-block { margin-top: 80px; order: 1; } .catalogs-info .left { order: 2; } .catalogs-info .title { font-weight: 300; font-size: 24px; line-height: 140%; margin-bottom: 40px; color: #171717; } .catalogs-info .title2 { font-weight: 300; font-size: 16px; line-height: 100%; text-transform: uppercase; margin-bottom: 20px; color: #171717; } .catalogs-info .text { color: #171717; font-weight: 200; font-size: 12px; line-height: 140%; text-transform: uppercase; margin-bottom: 30px; } .catalogs-info .text b { font-weight: 700; } .catalogs-info .image { overflow: hidden; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .catalogs-info .image img { border-radius: 6px; } /*catalog*/ .products-items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .product-item .image { overflow: hidden; position: relative; aspect-ratio: 3 / 4; box-shadow: none; } .product-item .image img { border-radius: 1.7px; } .product-item .image .boton-top { position: absolute; right: 7px; bottom: 20px; left: 7px; z-index: 2; background: #FFFFFF; padding: 5px 9px; align-items: center; justify-content: space-between; display: flex; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; } .product-item .image .boton-top svg { width: 16px; height: auto; margin-left: 10px; } .product-item:hover .image .boton-top { opacity: 1; transform: translateY(0); pointer-events: auto; } /* keep .size in flex layout at all times so it doesn't collapse to inline text during the .boton-top fade-out transition */ .product-item .image .size { display: flex; gap: 5px 13px; font-weight: 300; font-size: 10px; line-height: 130%; color: #171717; flex-wrap: wrap; } .product-item .image .size .no { color: #BCBCBC; } .product-item .image .size span { cursor: pointer; text-decoration: none; text-underline-offset: 3px; } .product-item .image .size span:hover { text-decoration: underline; } /* SKU / article number — bottom-right of the photo, fades out when hover overlay appears */ .product-item .image .article, .product-module .image .article { position: absolute; right: 12px; bottom: 12px; z-index: 1; font-weight: 400; font-size: 13px; letter-spacing: .05em; color: #171717; opacity: 1; transition: opacity .35s ease; pointer-events: none; } .product-item:hover .image .article, .product-module:hover .image .article { opacity: 0; } /* pointer cursor on product cards — they navigate to /product.php */ .product-module, .product-module .image, .product-item, .product-item .image { cursor: pointer; } /* strikethrough old price in the prices row (next to the current price) */ .product-item .prices .price { color: #171717; font-weight: 500; } .product-item .prices .sale { text-decoration: line-through; color: #D12C4C; font-weight: 400; } .product-item .image .size span.no { cursor: not-allowed; } .product-item .image .size span.no:hover { text-decoration: none; } .product-item .image .wishlist svg path { transition: stroke .25s ease, fill .25s ease; } .product-item .image .wishlist:hover svg path { stroke: #D12C4C; fill: #D12C4C; } .product-item .image .sale { position: absolute; left: 9px; top: 9px; z-index: 2; background: #D12C4C; border-radius: 5px; font-weight: 500; font-size: 12px; line-height: 130%; text-align: center; padding: 4px 10px; display: inline-flex; align-items: center; justify-content: center; color: white; transition: opacity .3s ease; } .product-item:hover .image .sale { opacity: 0; } .product-item .title { margin-top: 9px; font-weight: 300; font-size: 14px; line-height: 130%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: #303030; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .35s ease; } .product-item .image img { transition: transform .6s cubic-bezier(0.4, 0, 0.2, 1); } .product-item:hover .image img { transform: scale(1.05); } .product-item:hover .title, .product-item .title:hover, .product-item .title:focus { text-decoration-color: #171717 !important; } .product-item .title svg { transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1); } .product-item:hover .title svg { transform: translateX(6px); } .product-item .prices { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 12px; line-height: 130%; } .product-item .prices .price { white-space: nowrap; } .product-item .prices .sale { color: #D12C4C; text-decoration: line-through; font-weight: 500; font-size: 12px; line-height: 130%; white-space: nowrap; } .product-item .prices .color { display: flex; align-items: center; gap: 6px; margin-left: auto; } .product-item .prices .color span:not(.swatch-count) { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.13); flex-shrink: 0; } .product-item .prices .color .swatch-count { font-weight: 300; font-size: 12px; line-height: 130%; color: #303030; white-space: nowrap; display: none; } @media (min-width: 500px) { .products-items { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } } @media (min-width: 768px) { .breadcrumb a, .breadcrumb span { font-size: 15px; } .breadcrumbs.top2 { padding-top: 60px; } .breadcrumbs .image { height: 400px; margin-bottom: 50px; } h1 { font-size: 70px; margin-bottom: 35px; } .products-items { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; } .product-item .title { margin-bottom: 20px; } .catalogs .col-12 { display: flex; flex-direction: row; gap: 10px; justify-content: space-between; align-items: center; } .categories { gap: 15px; margin-bottom: 0; } .categories a { padding: 14px 15px; font-size: 18px; } .fort-block .title, .sort-block .title { font-size: 20px; gap: 10px; } .sort-filter { margin-bottom: 0px; gap: 30px; } .product-item .image .sale { left: 20px; top: 20px; border-radius: 5px; font-size: 17px; width: 70px; height: 50px; } .product-item .prices { font-size: 22px; gap: 30px; } .product-item .prices .sale { font-size: 22px; } .product-item .prices .sale, .product-item .prices { font-size: 20px; } .product-item .prices .color span:not(.swatch-count) { width: 20px; height: 20px; } .product-item .prices .color { gap: 8px; } .product-item .image .boton-top { right: 22px; bottom: 15px; left: 22px; } .product-item .image .boton-top svg { width: 30px; height: auto; margin-left: 10px; } .product-item .image .size { font-size: 18px; } .pagination { margin-top: 52px; } .pagination .page-link { width: 46px; height: 46px; font-size: 17px; } .products-block { padding-bottom: 60px; } .catalogs-info .text-block { margin-top: 0px; } .catalogs-info .title { font-size: 30px; margin-bottom: 28px; } .catalogs-info .text { margin-bottom: 26px; } .catalogs-info .image { height: 500px; } .catalogs-info { margin-bottom: 100px; } } @media (min-width: 992px) { .breadcrumbs { padding-top: 50px; } .catalogs { background: #BCBCBC1A; } .categories { background: transparent; } .breadcrumb { margin-bottom: 42px; justify-content: start; } .breadcrumbs .image { height: 700px; margin-bottom: 80px; } .breadcrumbs.top2 { padding-top: 60px; } .products-block { border-top: 1px solid #EEEEEE; padding-top: 50px; padding-bottom: 50px; } .products-items { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 30px; } .product-item .title { font-size: 18px; margin-bottom: 20px; } .product-item .prices { font-size: 20px; gap: 15px; } .product-item .prices .sale { font-size: 20px; } .pagination { margin-top: 60px; } .catalogs-info { padding-top: 0px; margin-bottom: 20px; } .catalogs-info .title { font-size: 40px; margin-bottom: 40px; } .catalogs-info .title2 { font-size: 24px; } .catalogs-info .text { font-size: 16px; margin-bottom: 30px; } .catalogs-info .texts-block { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 78px; } .catalogs-info .left { order: 1; } .catalogs-info .text-block { order: 2; } .catalogs-info .image { height: 708px; gap: 20px; } } @media (min-width: 1280px) { .products-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } } @media (min-width: 1280px) and (max-width: 1400px) { /* .product-item .image { height: 320px; }*/ } /*product*/ .product-block { display: flex; flex-direction: column; gap: 48px; } .product-single-media { display: flex; flex-direction: column; gap: 10px; } .product-single-image { width: 100%; height: 360px; margin-left: auto; margin-right: auto; position: relative; box-shadow: 0px 0px 10px 0px #2828280F; } .product-single-media .swiper-slide { background-size: cover; background-position: center; } .product-single-thumbnail { height: 82px; width: 100%; } .product-single-thumbnail .swiper-slide { opacity: 0.3; } .product-single-thumbnail .swiper-slide img { border-radius: 4px; box-shadow: 0px 0px 10px 0px #2828280F; } .product-single-thumbnail .swiper-slide:hover, .product-single-thumbnail .swiper-slide-thumb-active { opacity: 1; } .product-single-media .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .product-single-image .boton-top { position: absolute; right: 20px; top: 20px; z-index: 2; } .product-single-image .boton-bottom { position: absolute; left: 20px; bottom: 20px; z-index: 2; } .product-single-image .boton-bottom a { box-shadow: 0px 0px 10px 0px #2828280F; border-radius: 4px; background: #FFFFFF; padding: 10px 18px; font-weight: 300; font-size: 12px; line-height: 130%; text-transform: uppercase; text-decoration: none; color: #171717; display: inline-block; } .product-single-image .boton-bottom a:hover { background: #171717; color: #FFFFFF; } .product-single-image .boton-bottom a:hover svg path { stroke: white; } .product-top-name { display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-bottom: 27px; } .product-single-name { font-weight: 300; font-size: 26px; line-height: 90%; text-transform: uppercase; margin-bottom: 0; } .product-right .info-model { padding: 8px 11px; background: #F0F0F0; border-radius: 4px; font-weight: 300; font-size: 14px; line-height: 140%; display: inline-block; } .product-single-price { display: flex; gap: 15px; align-items: center; margin-bottom: 24px; } .product-single-price .special-price { font-weight: 500; font-size: 19px; line-height: 130%; text-decoration: line-through; color: #17171766; } .product-single-price .old-price { font-weight: 600; font-size: 30px; line-height: 130%; color: #171717; } .product-single-price .sale-price { font-weight: 500; font-size: 14px; line-height: 130%; text-align: center; padding: 8px 12px; background: #D12C4C; color: #FFFFFF; border-radius: 4px; } .product-single-dimensional { font-weight: 300; font-size: 16px; line-height: 140%; cursor: pointer; display: flex; align-items: center; flex-direction: row; gap: 12px; } .product-single-dimensional span { margin-right: 12px; width: 35px; height: 35px; border-radius: 40px; background: #D12C4C; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .product-single-addtocart { display: flex; align-items: center; justify-content: space-between; gap: 17px; gap: 17px; } .product-single-addtocart #button-cart { font-weight: 300; font-size: 13px; line-height: 140%; text-transform: uppercase; padding: 14px 25px; } .product-single-option { display: flex; flex-direction: column; gap: 26px; } .product-single-option .control-label { font-weight: 300; font-size: 16px; line-height: 140%; margin-bottom: 10px; } #input-option1 { margin-bottom: 25px; } #input-option1 .radio { display: inline-block; margin-right: 6px; margin-bottom: 6px; } #input-option1 .radio:last-of-type { margin-right: 0; } #input-option1 .radio input { display: none; } #input-option1 .radio span { position: relative; height: 50px; width: 50px; background-color: #F0F0F0; font-weight: 400; font-size: 15px; line-height: 140%; text-align: center; border-radius: 8px; transition: all 0.2s ease-in-out; display: flex; justify-content: center; align-items: center; cursor: pointer; } #input-option1 .radio span:hover { background: #171717; color: #ffffff; } #input-option1 .radio input:checked + span { background: #171717; color: #ffffff; } #input-option2 { margin-bottom: 30px; } #input-option2 .radio { display: inline-block; margin-right: 6px; margin-bottom: 6px; } #input-option2 .radio:last-of-type { margin-right: 0; } #input-option2 .radio input { display: none; } #input-option2 .radio span { position: relative; height: 48px; width: 48px; background-color: #F0F0F0; font-weight: 400; font-size: 15px; line-height: 140%; text-align: center; border-radius: 4px; transition: all 0.2s ease-in-out; display: flex; justify-content: center; align-items: center; cursor: pointer; border: 1px solid #F0F0F0; } #input-option2 .radio span span { height: 30px; width: 30px; border-radius: 4px; display: flex; justify-content: center; align-items: center; cursor: pointer; } #input-option2 .radio > span:hover { background: #F0F0F0; color: #ffffff; border: 1px solid #171717; } #input-option2 .radio input:checked + span { background: #F0F0F0; color: #ffffff; border: 1px solid #171717; } #input-option3 { display: flex; gap: 10px; } #input-option3 .image-radio { position: relative; } #input-option3 .image-radio input { display: none; } #input-option3 .image-radio label { display: block; width: 60px; height: 60px; border-radius: 50%; background: #f5f5f5; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; } #input-option3 .image-radio img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } /* hover эффект */ #input-option3 .image-radio label:hover { border-color: #E4E4E4; } /* выбранный */ #input-option3 .image-radio input:checked + label { border-color: #D12C4C; } .button-onecart { border-radius: 4px; border: 1px solid #EEEEEE; padding: 13px; width: 100%; font-weight: 500; font-size: 15px; line-height: 140%; text-align: center; margin-top: 20px; margin-bottom: 25px; cursor: pointer; background: #ffffff; } .button-onecart:hover { background: #171717; color: #FFFFFF; } .product-single-specification .title { font-weight: 600; font-size: 17px; line-height: 130%; margin-bottom: 12px; } .product-single-specification .params { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; font-weight: 500; font-size: 15px; line-height: 140%; color: #17171780; margin-right: 37px; } .product-single-specification .param { display: flex; flex-direction: column; gap: 6px; position: relative; } .product-single-specification .param:after { content: ''; position: absolute; height: 20px; width: 1px; background: #EEEEEE; right: -20px; top: 50%; transform: translate(0, -50%); } .product-single-specification .param:last-child:after { content: none; } .product-single-specification .param span { display: inline-flex; align-items: center; gap: 7px; color: #171717; } .product-single-short-desc .text-block { font-weight: 300; font-size: 13px; line-height: 140%; } .qty-control { display: flex; align-items: center; height: 40px; width: 111px; } .qty-control__increase, .qty-control__reduce { display: flex; height: 40px; width: 40px; align-items: center; justify-content: center; background: #F0F0F0; border-radius: 4px; cursor: pointer; } .qty-control__increase:hover, .qty-control__reduce:hover { background: #D12C4C; } .qty-control__increase:hover svg path, .qty-control__reduce:hover svg path { stroke: white; } /* Для Chrome, Safari, Edge */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Для Firefox */ input[type="number"] { -moz-appearance: textfield; } .qty-control__number:focus { outline: none; box-shadow: none; } .qty-control__number { width: 30px; height: 40px; font-weight: 500; font-size: 15px; line-height: 140%; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; } .addtocart-form { margin-bottom: 35px; } .nav-tabs { display: flex; align-items: center; gap: 15px; border-bottom: 2px solid #EEEEEE; margin-bottom: 15px; } .nav-tabs .nav-item { text-align: center; margin-bottom: -2px; } .nav-tabs .nav-link { font-weight: 300; font-size: 13px; line-height: 140%; color: #171717; margin-bottom: 0; border: 0; padding: 0; padding-bottom: 15px; border-bottom: 2px solid transparent; border-top-left-radius: 0; border-top-right-radius: 0; text-transform: uppercase; } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #171717; font-weight: 400; background-color: transparent; border-bottom: 2px solid #D12C4C; } .tab-content { margin-bottom: 60px; } .product-single-short-desc .text-block.params { display: grid; grid-template-columns: 125px auto; gap: 14px; } .product-single-short-desc .text-block.params .param { display: grid; grid-template-columns: 30px auto; gap: 10px; } .product-single-short-desc .text-block.params .icon { background: #F4F4F4; width: 30px; height: 30px; border-radius: 100%; display: inline-flex; align-items: center; justify-content: center; } .product-single-short-desc .text-block.params svg { width: 15px; height: auto; } .product-single-short-desc .text-block.params .text { font-weight: 400; font-size: 12px; line-height: 130%; color: #BCBCBC; margin-bottom: 2px; } .product-single-short-desc .text-block.params .text span { color: #171717; display: block; } .modal-header { text-align: center; font-weight: 600; font-size: 20px; line-height: 140%; } #staticDimensional .modal-title { margin-left: auto; margin-right: auto; font-weight: 300; font-size: 16px; line-height: 140%; letter-spacing: 0%; color: #171717; text-transform: uppercase; } #staticDimensional .modal-header { margin-bottom: 15px; } #staticDimensional .modal-header .btn-close { margin-left: unset; } #staticDimensional .btn-close { height: 24px; width: 24px; overflow: hidden; } #staticDimensional .modal-content { background: transparent; } #staticDimensional .modal-body { padding: 0px; display: flex; flex-direction: column; gap: 10px; } #staticDimensional .modal-body > div { box-shadow: 0px 0px 10px 0px #2828280F; border-radius: 6px; background: #FFFFFF; padding: 10px; } .dimensional-block { width: 100%; display: flex; flex-direction: column; gap: 5px; } .dimensional-block > div { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; } .dimensional-block div div { display: flex; align-items: center; justify-content: center; background: #EEEEEE66; border-radius: 4px; font-weight: 600; font-size: 12px; line-height: 140%; text-align: center; max-width: 52px; height: 40px; width: 100%; } .dimensional-block2 .dimensional-image .image { text-align: center; } .dimensional-block2 .dimensional-image .image img { height: 255px; width: auto; } .dimensional-header > div { display: flex; align-items: center; justify-content: center; background: #EEEEEE !important; border-radius: 4px; font-weight: 600; font-size: 20px; line-height: 140%; text-align: center } @media (min-width: 768px) { .product-single-image { height: 650px; } .product-single-thumbnail { height: 155px; } .product-block { gap: 50px; } .product-top-name { display: flex; align-items: center; justify-content: space-between; margin-bottom: 89px; } .product-single-name { font-size: 50px; line-height: 90%; margin-bottom: unset; } .product-right .info-model { padding: 8px 18px; font-size: 14px; line-height: 140%; margin-bottom: unset; } .product-single-price { gap: 19px; float: left; } .product-single-price .special-price { font-size: 22px; } .product-single-price .old-price { font-size: 36px; } .product-single-price .sale-price { font-size: 17px; padding: 9px 15px; margin-bottom: unset; } .product-single-dimensional { font-size: 18px; } .product-single-dimensional span { width: 40px; height: 40px; } .form-select { height: 56px; } .product-single-option { clear: both; display: flex; flex-direction: column; justify-content: space-between; } .product-single-option .control-label { font-size: 18px; margin-bottom: 17px; } #input-option1 .radio span { font-size: 17px; } #input-option3 .image-radio label { width: 80px; height: 80px; } #input-option3 { gap: 13px; } .product-single-addtocart { display: flex; align-items: center; gap: 30px; justify-content: space-between; } .qty-control__increase, .qty-control__reduce { height: 56px; width: 56px; } .qty-control { height: 60px; width: 172px; margin-bottom: unset; } .qty-control__number { width: 52px; height: 60px; font-size: 20px; } .addtocart-form { margin-bottom: 45px; } #button-cart { font-size: 20px; padding: 15px 20px; height: 56px; max-width: 100%; } .button-onecart { padding: 16px; font-size: 17px; margin-top: unset; margin-bottom: unset; } .nav-tabs .nav-link { font-size: 20px; padding-bottom: 20px; } .nav-tabs { gap: 70px; margin-bottom: 24px; } .product-single-specification { margin-top: 25px; } .product-single-specification .title { font-size: 20px; line-height: 140%; margin-bottom: 15px; } .product-single-specification .params { font-size: 17px; gap: 60px; margin-right: 84px; } .product-single-specification .param { flex-direction: row; gap: 22px; } .product-single-specification .param::after { right: -30px; } .tab-content { margin-bottom: 100px; } .product-single-short-desc .title { font-size: 20px; margin-bottom: 15px; } .product-single-short-desc .text-block { font-size: 17px; } .product-single-short-desc .text-block.params { grid-template-columns: 331px 331px; gap: 14px; } .product-single-short-desc .text-block.params svg { width: 25px; } .product-single-short-desc .text-block.params .param { grid-template-columns: 50px auto; } .product-single-short-desc .text-block.params .icon { width: 50px; height: 50px; border-radius: 4px; } .product-single-short-desc .text-block.params .text { font-size: 15px; } } @media (min-width: 992px) { .product-single { margin-top: 0px; } .product-block { display: flex; flex-direction: row; gap: 40px; justify-content: space-between; margin-bottom: 100px; } .product-right, .product-left { flex: 0 0 calc(50% - 20px); overflow: hidden; } .product-single-media { display: flex; flex-direction: row-reverse; gap: 20px; } .product-single-image { height: 750px; } .product-single-thumbnail { width: 175px; height: 664px; margin: 43px 0; } .product-single-thumbnail .swiper-slide { overflow: hidden; } .product-top-name { margin-bottom: 40px; } .product-single-price { gap: 19px; margin-bottom: 30px; } .tab-content { margin-bottom: 0px; } #input-option1 .radio span { height: 50px; width: 90px; } #input-option1 .radio { margin-right: 12px; margin-bottom: 0px; } #input-option1 { margin-bottom: 30px; } #input-option1 .radio span { font-size: 20px; } .product-single-specification { margin-top: 30px; } .dimensional-block div div { max-width: 74px; height: 50px; } #staticDimensional .modal-body { flex-direction: row; } .product-single-image .boton-bottom { right: 30px; bottom: 30px; left: unset; } .product-single-image .boton-bottom a { font-size: 14px; } #staticDimensional .modal-dialog { max-width: 1600px; width: 100%; } #staticDimensional .modal-body > div.left { width: 600px; } .dimensional-block2 { display: flex; flex-direction: row; gap: 30px; } #staticDimensional .modal-content { border: 0; } .dimensional-block div div { max-width: 86px; height: 50px; font-size: 20px; } .dimensional-block2 .dimensional-image .image img { height: 450px; width: auto; } } /*about*/ .about-block1 .title { font-weight: 700; font-size: 20px; line-height: 130%; margin-bottom: 15px; } .about-block1 .text { font-weight: 400; font-size: 14px; line-height: 130%; margin-bottom: 15px; } .about-block1 .image img { border-radius: 4px; margin-bottom: 20px; } .about-block2 .title { font-weight: 700; font-size: 20px; line-height: 130%; margin-bottom: 15px; } .about-block2 .text { font-weight: 400; font-size: 14px; line-height: 130%; margin-bottom: 20px; } .about-block3 .image img { border-radius: 4px; margin-bottom: 20px; } .about-block3 .title { font-weight: 700; font-size: 20px; line-height: 130%; margin-bottom: 10px; } .about-block3 .text { font-weight: 400; font-size: 13px; line-height: 130%; margin-bottom: 40px; } .about-block3 .text .tit { font-weight: 600; font-size: 13px; line-height: 130%; margin-bottom: 10px; } .about-block3 .text ul { font-weight: 600; font-size: 13px; line-height: 130%; } .about-module { padding-top: 40px; border-top: 1px solid #EEEEEE; margin-bottom: 100px; } .about-module .titles { font-family: "Cormorant Garamond", sans-serif; font-weight: 400; font-size: 30px; line-height: 90%; text-align: center; margin-bottom: 20px; } .about-module .text-block { background: url("../image/about.jpg") no-repeat center center; padding: 10px; display: flex; flex-direction: column; gap: 10px; } .about-module .text-block .row-text { background: #FFFFFF; border-radius: 4px; padding: 20px; } .about-module .text-block .row-text .title { font-weight: 600; font-size: 17px; line-height: 120%; margin-bottom: 10px; } .about-module .text-block .row-text ul { margin: 0; padding: 0; margin-left: 13px; font-weight: 400; font-size: 14px; line-height: 120%; display: flex; gap: 10px; flex-direction: column; } @media (min-width: 768px) { .about-block3 .title, .about-block2 .title, .about-block1 .title { font-size: 22px; line-height: 140%; } .about-block3 .text, .about-block2 .text, .about-block1 .text { font-size: 15px; line-height: 140%; margin-bottom: 30px; } .about-block3 .image img, .about-block1 .image img { margin-bottom: 30px; max-height: 500px; width: auto; } .about-module { border-top: 0; margin-bottom: 120px; } .about-module .titles { font-size: 50px; line-height: 100%; margin-bottom: 30px; } .about-module .text-block .row-text ul { font-size: 15px; } .about-module .text-block { display: grid; grid-template-columns: repeat(2, 1fr); } .about-module .text-block .row-text:last-child { grid-column: span 2; } } @media (min-width: 992px) { .about-pages { border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; } .about-block { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 100px; } .about-block > div { padding-top: 35px; } .about-block .about-block1 { position: relative; } .about-block .about-block1:after { content: ''; position: absolute; right: -50px; top: 0; bottom: 0; width: 1px; height: 100%; background: #EEEEEE; } .about-block3 .text, .about-block2 .text, .about-block1 .text { font-size: 17px; } .about-block1 { padding-bottom: 80px; } .about-block2 { display: flex; justify-content: center; flex-direction: column; } .about-block3 .image { margin-top: -105px; } .about-module { padding-top: 90px; margin-bottom: 150px; } .about-module .titles { font-size: 60px; margin-bottom: 34px; } .about-module .text-block .row-text .title { font-size: 22px; } .about-module .text-block .row-text ul { font-size: 17px; } .about-module .text-block { display: grid; grid-template-columns: repeat(5, 1fr); } .about-module .text-block .row-text:last-child { grid-column: unset; } .about-module .text-block { background: url("../image/about3.jpg") no-repeat center center; } } /*exchange*/ .exchange-block1 .text { font-weight: 400; font-size: 14px; line-height: 130%; margin-bottom: 16px; } .exchange-block1 .title { font-weight: 700; font-size: 18px; line-height: 140%; margin-bottom: 10px; } .exchange-block2 .image { height: 300px; margin-bottom: 100px; } .exchange-block2 .image img { border-radius: 4px; } @media (min-width: 768px) { .exchange-block1 .text { font-size: 17px; margin-bottom: 25px; } .exchange-block1 .title { font-size: 22px; margin-bottom: 15px; } .exchange-block2 .image { height: 400px; margin-bottom: 120px; } } @media (min-width: 992px) { .exchange-pages { border-top: 1px solid #EEEEEE; } .exchange-block2 .image { height: 671px; max-width: 960px; margin-bottom: unset; margin-left: auto; } .exchange-block2 .image img { margin-left: auto; } .exchange-block { display: grid; grid-template-columns: 1fr 2fr; gap: 290px; } .exchange-block .exchange-block1 { padding-top: 40px; position: relative; } .exchange-block .exchange-block1:after { content: ''; position: absolute; right: -100px; top: 0; bottom: 0; width: 1px; height: 100%; background: #EEEEEE; } .exchange-block .exchange-block2 { margin-top: -109px; text-align: right; margin-bottom: 153px; } } /*contact*/ .contact-pages { margin-bottom: 205px; } .contact-block1 { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; } .contact-block1 .row-block { display: grid; grid-template-columns: 40px auto; gap: 13px; } .contact-block1 .row-block .icon { background: #F4F4F4; border-radius: 6px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; } .contact-block1 .row-block .icon svg { width: 20px; height: auto; } .contact-block1 .row-block .icon.icon-big svg { width: 24px; height: auto; } .contact-block1 .row-block .text { font-weight: 600; font-size: 15px; line-height: 130%; } .contact-block1 .row-block .text a { text-decoration: none; } .contact-block1 .row-block .text span { font-weight: 400; font-size: 15px; line-height: 130%; display: block; } #map { width: 100%; height: 300px; } .contact-block2 { position: relative; margin-left: -10px; margin-right: -10px; margin-top: 30px; } .contact-map-info { background: #D12C4C; border-radius: 4px; padding: 15px 20px; display: flex; flex-direction: column; gap: 11px; position: absolute; bottom: -105px; margin-left: 10px; margin-right: 10px; } .contact-map-info .title { font-weight: 600; font-size: 17px; line-height: 130%; margin-bottom: 7px; color: white; } .contact-map-info .text { font-weight: 400; font-size: 14px; line-height: 130%; color: white; } @media (min-width: 768px) { .contact-pages { margin-bottom: unset; } .contact-block { display: grid; grid-template-columns: 265px auto; gap: 35px; } .contact-block1 { grid-template-columns:1fr; gap: 20px; margin-bottom: 50px; } .contact-block1 .row-block { grid-template-columns: 50px auto; } .contact-block1 .row-block .icon { width: 50px; height: 50px; } .contact-block1 .row-block .icon svg { width: unset; } .contact-block1 .row-block .icon.icon-big svg { width: unset; } .contact-block1 .row-block .text { font-size: 17px; } .contact-block1 .row-block .text span { margin-top: 3px; } .contact-block2 { position: relative; margin-left: -20px; margin-right: -20px; margin-top: 0; } #map { height: 400px; } .contact-map-info { max-width: 300px; padding: 20px 24px; top: 20px; left: 40px; gap: 12px; bottom: unset; margin-left: unset; margin-right: unset; } .contact-map-info .title { font-size: 20px; } .contact-map-info .text { font-size: 16px; } } @media (min-width: 992px) { .contacts-block { display: grid; grid-template-columns: 1fr 2fr; gap: 50px; } .contact-block { display: grid; grid-template-columns:1fr; gap: 0px; grid-auto-rows: min-content; align-items: start; border-right: 1px solid #EEEEEE; } .contact-block1 { padding-top: 35px; margin-bottom: 35px; position: relative; } .contact-block1::before { content: ''; position: fixed; top: auto; left: 0; right: 0; height: 1px; background: #EEEEEE; margin-top: -35px; } #map { height: 520px; margin-top: -126px; margin-bottom: 150px; } .contact-map-info { top: -106px; left: 20px; } .contact-block1 { grid-template-columns:1fr 1fr; gap: 20px; grid-auto-flow: unset; grid-auto-rows: min-content; align-items: start; } .contact-block1 .row-block { display: grid; grid-template-columns: 50px auto; gap: 15px; } .contact-block2 { position: relative; width: calc(100% + var(--container-left-offset)); } } /*pages404*/ .pages404 { padding: 100px 0; } .pages404 .title { font-family: "Cormorant Garamond", sans-serif; font-weight: 400; font-size: 40px; line-height: 100%; text-align: center; color: #BCBCBC; margin-bottom: 40px; } .pages404 .title span { font-family: "Cormorant Garamond", sans-serif; font-weight: 400; font-size: 40px; line-height: 90%; color: #171717; display: block; margin-top: 20px; } @media (min-width: 768px) { .pages404 .btn-block { text-align: center; } } @media (min-width: 992px) { .pages404-block { max-width: 1226px; margin-left: auto; margin-right: auto; } .pages404 { padding: 188px 0 195px; } .pages404 .title { font-size: 100px; margin-bottom: 48px; } .pages404 .title span { font-size: 100px; color: #171717; margin-top: 29px; text-align: right; } .pages404 .btn-block { text-align: left; } } /*cart*/ .cart-block { display: grid; grid-template-columns:1fr; gap: 0px; margin-bottom: 100px; } .cart-block .title1 { font-weight: 400; font-size: 18px; line-height: 140%; text-transform: uppercase; margin-bottom: 7px; color: #303030; order: 2; text-align: center; } .cart-block .cart-infos { order: 1; } .cart-block .left { order: 3; } .cart-block .right { order: 4; } .card-product-items { display: grid; grid-template-columns:120px auto; gap: 11px; border-bottom: 1px solid #EEEEEE; margin-bottom: 20px; padding-bottom: 20px; } .card-product-items .image { height: 170px; overflow: hidden; } .card-product-items .image img { border-radius: 4px; } .card-product-items .info-title { font-weight: 400; font-size: 16px; line-height: 140%; text-transform: uppercase; margin-bottom: 13px; display: block; text-decoration: none; } .card-product-items .info-title:hover { text-decoration: underline; } .card-product-items .info-params { display: grid; grid-template-columns:1fr; gap: 5px; margin-bottom: 8px; } .card-product-items .info-params-title { font-weight: 400; font-size: 10px; line-height: 140%; text-transform: uppercase; color: #303030; } .card-product-items .info-params-title span { width: 70px; display: inline-block; color: #30303080; margin-right: 9px; } .card-product-items .info-params-price { margin-bottom: 3px; } .card-product-items .special-price { font-weight: 500; font-size: 18px; line-height: 130%; } .card-product-items .old-price { font-weight: 300; font-size: 15px; line-height: 120%; text-decoration: line-through; color: #30303066; } .card-product-items .qty-control__increase, .card-product-items .qty-control__reduce { height: 34px; width: 34px; } .card-product-items .qty-control__increase svg, .card-product-items .qty-control__reduce svg { height: auto; width: 20px; } .card-product-items .qty-control__number { width: 33px; height: 34px; font-weight: 500; font-size: 15px; line-height: 140%; } .cart-totals { margin-bottom: 30px; } .cart-totals .title2 { font-weight: 400; font-size: 16px; line-height: 140%; text-transform: uppercase; margin-bottom: 15px; text-align: center; } .cart-totals .cart-total { border-bottom: 1px solid #EEEEEE; padding-bottom: 10px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; font-weight: 300; font-size: 15px; line-height: 140%; } .cart-totals .cart-total .price.delivery { text-align: right; font-weight: 300; font-size: 12px; line-height: 140%; text-decoration: underline; color: #303030; } .cart-url-block { display: flex; flex-direction: column; gap: 15px; order: 5; margin-bottom: 10px; } .cart-url-block .title { display: flex; align-items: center; gap: 14px; flex-direction: row; font-weight: 300; font-size: 15px; line-height: 130%; color: #171717; } .cart-infos { display: flex; align-items: center; gap: 20px; flex-direction: column; margin-bottom: 46px; } .cart-infos .cart-info { width: 100%; } .cart-infos .form-control { font-weight: 300; font-size: 14px; line-height: 130%; vertical-align: middle; color: #303030; padding: 15px; width: 100%; border-radius: 4px; border: 1px solid #000000; } .cart-form .title { font-weight: 400; font-size: 16px; line-height: 140%; text-transform: uppercase; margin-bottom: 7px; } .cart-delivery-form .delivery-block, .cart-address-form .user-block, .cart-form .user-block { display: flex; gap: 8px; flex-direction: column; margin-bottom: 25px; } .cart-delivery-form .delivery-block .form-control, .cart-address-form .user-block .form-control, .cart-form .user-block .form-control { font-weight: 300; font-size: 14px; line-height: 130%; vertical-align: middle; color: #303030; border: 0; outline: none; box-shadow: none; padding: 15px; border-radius: 4px; background: #F0F0F0CC; } .form-control:focus, .form-control:hover { outline: none; box-shadow: none; } .form-control:disabled { background: transparent; color: #BCBCBC; cursor: not-allowed; border: 1px solid #BCBCBC; } .cart-delivery-form { display: flex; gap: 0px; flex-direction: column; margin-bottom: 25px; } .cart-address-form > .title, .cart-payment-form > .title, .cart-delivery-form > .title { font-weight: 400; font-size: 16px; line-height: 90%; text-transform: uppercase; color: #171717; text-align: center; margin-bottom: 8px; } .cart-payment-items .title, .cart-delivery-items .title { font-weight: 300; font-size: 15px; line-height: 130%; display: flex; align-items: center; gap: 0 10px; margin-bottom: 22px; color: #171717; flex-direction: row; flex-wrap: wrap; } .cart-payment-items img { height: 11px; width: auto; } .cart-payment-items .text, .cart-delivery-items .text { font-weight: 300; font-size: 12px; line-height: 130%; color: #171717; margin-bottom: 0px; padding-left: 27px; padding-top: 8px; } .cart-delivery-items .price { font-weight: 600; font-size: 17px; line-height: 120%; } .cart-delivery-items.active { color: #171717; } .btn-block2 { margin-bottom: 30px; display: flex; gap: 11px; flex-direction: column; } .btn-block2 .url1 { font-weight: 400; font-size: 15px; line-height: 120%; color: #BCBCBC; text-decoration: none; } .btn-block2 .url2 { font-weight: 500; font-size: 15px; line-height: 120%; text-decoration: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; color: #171717; } .info-block .delete { display: none; } .cart-block .order-btn { order: 6; margin-top: 20px; } @media (min-width: 768px) { .cart-block .title1 { font-size: 20px; margin-bottom: 30px; } .card-product-items .image { height: 190px; } .card-product-items { grid-template-columns: 160px auto; gap: 20px; padding-bottom: 25px; margin-bottom: 25px; } .card-product-items .info-title { font-size: 30px; margin-bottom: 14px; } .card-product-items .info-params-title { font-size: 15px; line-height: 140%; } .card-product-items .special-price { font-size: 24px; } .card-product-items .old-price { font-size: 18px; line-height: 130%; } .card-product-items .info-params-price { float: left; margin-bottom: 0; margin-top: 12px; } .card-product-items .qty-control { float: right; height: 44px; display: flex; justify-content: end; } .card-product-items .qty-control__increase, .card-product-items .qty-control__reduce { height: 44px; width: 44px; } .card-product-items .qty-control__number { width: 42px; height: 44px; font-size: 20px; } .cart-totals { margin-bottom: 24px; } .cart-totals .title2 { font-size: 20px; } .cart-totals .cart-total { padding-bottom: 17px; margin-bottom: 20px; font-size: 17px; } .cart-infos { font-size: 20px; margin-bottom: 25px; } .cart-form .title { font-size: 17px; margin-bottom: 16px; } .cart-address-form .user-block, .cart-form .user-block { display: grid; grid-template-columns:1fr 1fr; gap: 20px; } .cart-delivery-form { display: grid; gap: 40px; margin-bottom: 49px; } .cart-delivery-items .title { margin-bottom: 12px; } .cart-delivery-items .text { margin-bottom: 12px; } .cart-address-form .title { font-size: 20px; margin-bottom: 12px; } .btn-block2 { margin-bottom: 35px; } .btn-block2 .url2, .btn-block2 .url1 { font-size: 17px; } .order-btn .btn2, .order-btn .btn { width: 100%; max-width: unset; } .cart-block { margin-bottom: 120px; } .card-product-items .info-block { position: relative; } .card-product-items .info-block .delete { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; position: absolute; top: 5px; right: 0; } } @media (min-width: 992px) { .cart-block { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0px; margin-bottom: 100px; position: relative; } .cart-block .title1 { font-size: 26px; margin-bottom: 0px; order: 1; text-align: left; margin-top: 20px; grid-column: 1; grid-row: 1 } .cart-block .left { border-top: 1px solid #EEEEEE; padding-right: 70px; padding-bottom: 0px; margin-top: 30px; order: 3; grid-column: 1; grid-row: 2; } .cart-block .right { border-left: 1px solid #EEEEEE; padding-bottom: 0px; border-top: 1px solid #EEEEEE; padding-left: 70px; margin-top: 30px; order: 4; grid-column: 2; grid-row: 2 / 7; } .card-products { padding-top: 25px; } .cart-form .title { padding-top: 20px; } .cart-totals .title2 { font-size: 26px; } .cart-totals .cart-total { font-size: 20px; } .cart-totals { margin-bottom: 40px; } .cart-url-block { grid-column: 1; grid-row: 3; font-size: 16px; } .cart-infos { order: 2; flex-direction: row; gap: 20px; margin-bottom: 0; padding-left: 71px; grid-column: 2; grid-row: 1; } .cart-block .order-btn.btn-right { grid-column: 1; grid-row: 4; width: 100%; } .cart-block .order-btn.btn-left { grid-column: 2; grid-row: 7; width: 100%; margin-top: 0; padding-left: 70px; } .order-btn .btn { width: unset; max-width: unset; } .cart-form .title { font-size: 20px; margin-bottom: 12px; } .cart-address-form .user-block, .cart-form .user-block { gap: 10px; margin-bottom: 30px; } .cart-address-form > .title, .cart-payment-form > .title, .cart-delivery-form > .title { font-size: 20px; margin-bottom: 18px; text-align: left; } .cart-delivery-items .text { font-size: 17px; } .cart-delivery-form { display: grid; gap: 0px; margin-bottom: 49px; } .cart-delivery-form { margin-bottom: 30px; } .btn-block2 { float: left; width: 50%; padding-right: 10px; } .cart-payment-items img { height: unset; width: auto; } .order-btn { float: right; width: 50%; } .cart-address-form .user-block, .cart-form .user-block { gap: 20px; } .cart-address-form .user-block { margin-bottom: 18px; } .cart-delivery-form .delivery-block, .cart-address-form .user-block, .cart-form .user-block { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); margin-bottom: 40px; } .cart-payment-items .title, .cart-delivery-items .title { font-size: 16px; margin-bottom: 18px; } .cart-payment-items .text, .cart-delivery-items .text { width: 100%; } .cart-address-form .user-block .cols, .cart-form .user-block .cols { grid-column: span 2; } } /**/ .registration-pages { padding-bottom: 100px; } .registration-pages .right { display: none; } .registrations-form-items .title { font-weight: 600; font-size: 15px; line-height: 130%; margin-bottom: 15px; } .registrations-form-items .user-block { display: flex; gap: 15px; flex-direction: column; margin-bottom: 25px; } .registrations-form-items .user-block .form-control { font-weight: 400; font-size: 14px; line-height: 130%; vertical-align: middle; color: #171717; border: 0; outline: none; box-shadow: none; padding: 15px; border-radius: 4px; background: #F0F0F0CC; } .registrations-form-items .user-block .password { position: relative; } .registrations-form-items .user-block .password span { position: absolute; right: 15px; top: 15px; width: 20px; height: 20px; cursor: pointer; } .registrations-form-line { margin: 20px 0; font-weight: 500; font-size: 14px; line-height: 130%; text-align: center; display: flex; align-items: center; color: #171717; } .registrations-form-line::before, .registrations-form-line::after { content: ""; flex: 1; border-bottom: 1px solid #EEEEEE; } .registrations-form-line:not(:empty)::before { margin-right: 10px; } .registrations-form-line:not(:empty)::after { margin-left: 10px; } .registrations-form .btn-block { display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 15px; line-height: 130%; text-align: center; } .registrations-form .btn-block a { font-weight: 600; } .registrations-form .btn { width: 100%; max-width: unset; } .registrations-form .google-login { font-weight: 500; font-size: 14px; line-height: 140%; border: 1px solid #EEEEEE; border-radius: 4px; width: 100%; padding: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 15px; text-decoration: none; } @media (min-width: 768px) { .registration-pages { padding-bottom: 120px; } .registrations-form-items .title { font-size: 17px; } .registrations-form-items .user-block { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; margin-bottom: 30px; } .registrations-form-line { margin: 30px 0; font-size: 15px; } .registrations-form .google-login { font-size: 15px; gap: 10px; margin-bottom: 20px; } } @media (min-width: 992px) { .registration-block { display: grid; gap: 50px; grid-template-columns: 1fr 1fr; position: relative; } .registration-pages .left { padding-top: 30px; } .registration-pages .right { display: block; } .registration-pages .right .image { margin-top: -158px; width: calc(100% + var(--container-left-offset)); height: 822px; } .registrations-form-items .title { font-size: 20px; } .registrations-form .google-login { font-size: 18px; margin-bottom: 30px; } .registration-block::before { content: ''; position: absolute; top: 0; left: -50%; right: -50%; height: 1px; background: #EEEEEE; margin-top: 0px; z-index: -1; } } /*wishlist*/ .wishlist-page { padding: 40px 0 100px; } .users-block { display: grid; gap: 10px; grid-template-columns: 1fr; } .user_menu { position: relative; width: 100%; display: flex; flex-direction: column; } .user_menu.collapsed .list-group-item:not(.active) { display: none; } .user_menu .list-group-item { display: grid; gap: 12px; grid-template-columns: 36px auto; border-left: 0; font-weight: 500; font-size: 15px; line-height: 140%; align-items: center; border-color: #EEEEEE; color: #171717; order: 2; height: 60px; padding: 10px; } .user_menu .list-group-item.active { order: 1; display: flex; align-items: center; border: 1px solid #EEEEEE; } .user_menu .list-group-item.active::before { content: ''; position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border: 1px solid #EEEEEE; border-radius: 4px; } .user_menu .list-group-item.active::after { content: ''; position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23171717' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center center; transition: 0.3s; } .user_menu.open .list-group-item.active::after { transform: rotate(-180deg); } .user_menu.open .list-group-item.active::before { border-color: #D12C4C; background-color: #D12C4C; } .user_menu.open .list-group-item.active::after { background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .user_menu .list-group-item { position: relative; background: #fff; border: 1px solid #e4e4e4; border-radius: 5px; margin-bottom: 6px; color: #171717; } .user_menu .list-group-item .title { display: inline-block; vertical-align: middle; } .user_menu .list-group-item .icon { border: 1px solid #EEEEEE; border-radius: 4px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; } .user_menu .list-group-item .icon.info { border: 0; } .user_menu .list-group-item.logout { border: 0; text-align: center; color: #D90B0B; display: flex; align-items: center; justify-content: center; gap: 12px; } .user_menu .list-group-item:hover, .user_menu .list-group-item.active { background: transparent; color: #171717; } .user_menu .list-group-item:not(.acount):hover .icon, .user_menu .list-group-item:not(.acount).active .icon { border-color: #D12C4C; background-color: #D12C4C; } .user_menu .list-group-item:not(.acount):hover .icon svg path, .user_menu .list-group-item:not(.acount).active .icon svg path { stroke: white; } .user_menu .dropdown-list { position: absolute; top: 100%; left: 0; width: 100%; background: #fff; border: 1px solid #e4e4e4; border-radius: 0px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); z-index: 3; display: none; } /* Отступы между пунктами */ .user_menu .dropdown-list .list-group-item { border: none; border-bottom: 1px solid #f0f0f0; border-radius: 0; margin: 0; cursor: pointer; padding: 10px 14px; } .user_menu .dropdown-list .list-group-item:last-child { border-bottom: none; } .user_menu .dropdown-list .list-group-item:hover { background: #f9f9f9; } .wishlist-block .products-items { gap: 25px; } .wishlist-block .titles { display: none; } .wishlist-block .product-item .title { margin-top: 12px; font-size: 15px; margin-bottom: 8px; } .wishlist-block .product-item .image .boton-top { position: absolute; right: 22px; top: 24px; } .wishlist-block .product-item .image .sale { right: 15px; top: 15px; font-size: 14px; width: 50px; height: 40px; } .wishlist-block .product-item .title svg { width: 22px; height: auto; } .wishlist-block .product-item .prices { font-size: 20px; } .wishlist-block .product-item .prices .sale { font-size: 16px; } .wishlist-block .pagination { margin-top: 50px; } @media (min-width: 768px) { .wishlist-page { padding: 60px 0 100px; } .users-block { display: grid; gap: 20px; grid-template-columns: 280px auto; } .user_menu .list-group-item::after, .user_menu .list-group-item::before { content: none !important; } .user_menu .list-group-item .title { color: #D12C4C; } .user_menu .list-group-item { position: relative; background: #fff; border: 1px solid #e4e4e4; border-radius: 0px; margin-bottom: 0px; color: #171717; border-left: 0 !important; border-top: 0; height: unset; padding: 15px 0; order: unset; } .user_menu .list-group-item.active { order: unset; } .user_menu .list-group-item .title span { color: #171717; } .wishlist-block .titles { display: block; font-family: "Cormorant Garamond", sans-serif; font-weight: 400; font-size: 36px; line-height: 90%; text-transform: capitalize; margin-bottom: 20px; } .wishlist-block .product-item .image { height: 190px; } .wishlist-block .products-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .wishlist-block .product-item .image .boton-top { position: absolute; right: 12px; top: 12px; } .wishlist-block .product-item .image .sale { position: absolute; right: 10px; bottom: 10px; font-size: 14px; width: 60px; height: 26px; } .wishlist-block .product-item .title { margin-top: 6px; font-size: 14px; margin-bottom: 9px; } .wishlist-block .list-group { border-radius: 0; } } @media (min-width: 992px) { .wishlist-page { padding: 50px 0 150px; } .users-block { gap: 40px; } .wishlist-block .products-items { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; } .wishlist-block .product-item .image { height: 280px; } .wishlist-block .titles { font-size: 40px; margin-bottom: 30px; } .wishlist-block .product-item .title { margin-top: 8px; font-size: 15px; margin-bottom: 12px; } .wishlist-block .product-item .prices .sale { font-size: 20px; } .wishlist-block .product-item .title svg { width: 26px; height: auto; } } /*acount*/ .acount-pages { padding: 40px 0 100px; } .acount-pages .titles { display: none; } .acount-form-items .title { font-weight: 600; font-size: 14px; line-height: 130%; margin-bottom: 10px; } .acount-form-items .user-block { display: flex; gap: 15px; flex-direction: column; margin-bottom: 25px; } .acount-form-items .user-block .form-control { font-weight: 400; font-size: 14px; line-height: 130%; vertical-align: middle; color: #171717; border: 0; outline: none; box-shadow: none; padding: 15px; border-radius: 4px; background: #F0F0F0CC; } .acount-form-items .user-block .password { position: relative; } .acount-form-items .user-block .password span { position: absolute; right: 15px; top: 15px; width: 20px; height: 20px; cursor: pointer; } .acount-form .btn-block { display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 15px; line-height: 130%; text-align: center; } .acount-form .btn { width: 100%; max-width: 100px; padding: 13px; text-align: center; } .acount-form-item2 .user-block { display: grid; gap: 10px; grid-template-columns: auto 100px; } @media (min-width: 768px) { .acount-pages { padding-bottom: 120px; } .acount-block { display: grid; gap: 20px; grid-template-columns: 280px auto; } .acount-form-items .title { font-size: 15px; } .acount-form-items .user-block { display: grid; gap: 10px; grid-template-columns: auto 120px; margin-bottom: 24px; } .acount-form .btn { width: 100%; max-width: 120px; padding: 13px; font-size: 15px; } .acount-form-items.acount-form-item1 .user-block { display: grid; gap: 15px; grid-template-columns: 1fr; margin-bottom: 24px; } .acount-pages .titles { display: block; font-family: "Cormorant Garamond", sans-serif; font-weight: 400; font-size: 36px; line-height: 90%; text-transform: capitalize; margin-bottom: 24px; } } @media (min-width: 992px) { .acount-pages { padding: 50px 0 150px; } .acount-block { gap: 40px; } .acount-form-items .title { font-size: 20px; } .acount-form .google-login { font-size: 18px; margin-bottom: 30px; } .acount-pages .titles { font-size: 40px; margin-bottom: 30px; } .acount-form-items .title { font-size: 17px; margin-bottom: 15px; } .acount-form-items .user-block, .acount-form-items.acount-form-item1 .user-block { display: grid; gap: 15px; grid-template-columns: 300px 300px 300px; margin-bottom: 30px; } } /*userorder-block*/ .userorder-pages { padding: 40px 0 100px; } .userorder-block .titles { display: none; } .userorder-tables { display: grid; gap: 10px; grid-template-columns: 1fr; } .userorder-table-item { border: 1px solid #EEEEEE; border-radius: 4px; padding: 12px 10px 15px 12px; position: relative; transition: 0.3s; } .userorder-table-item .dropdown { position: absolute; top: 22px; right: 10px; width: 20px; height: 20px; cursor: pointer; background-position: center center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23171717' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .userorder-table-item .dropdown.active { transform: rotate(-180deg); } .userorder-table-item .image { height: 40px; width: 40px; float: left; margin-right: 10px; } .userorder-table-item .image img { border-radius: 4px; } .userorder-table-item .info { float: left; } .userorder-table-item .info .order-id { font-weight: 600; font-size: 12px; line-height: 140%; } .userorder-table-item .info .order-id span.order-date { font-weight: 400; font-size: 12px; line-height: 140%; margin-left: 10px; } .userorder-table-item .info .order-type { font-weight: 600; font-size: 12px; line-height: 140%; color: #00A046; } .userorder-table-item .info-user { clear: both; display: grid; gap: 20px; grid-template-columns: auto auto; align-items: center; margin-right: 30px; } .userorder-table-item .info-user .title { font-weight: 600; font-size: 14px; line-height: 140%; } .userorder-table-item .info-user .user-name { font-weight: 600; font-size: 12px; line-height: 140%; color: #D12C4C; } .userorder-table-item .info-user .user-email a { font-weight: 400; font-size: 12px; line-height: 140%; color: #171717; text-decoration: none; } .userorder-table-item .user-product { display: none; border-top: 1px solid #EEEEEE; padding-top: 10px; margin-top: 12px; } .user-product-items { display: grid; grid-template-columns:130px auto; gap: 15px; } .user-product-items .info-block { display: grid; gap: 5px; grid-template-columns: 1fr; } .user-product-items .user-product-image { height: 150px; width: 130px; } .user-product-items .user-product-image img { border-radius: 4px; } .user-product-items .info-title { text-decoration: none; font-family: "Cormorant Garamond", sans-serif; font-weight: 400; font-size: 24px; line-height: 100%; text-transform: capitalize; margin-bottom: 13px; display: block; } .user-product-items .info-params { display: grid; grid-template-columns:1fr; gap: 5px; margin-bottom: 8px; } .user-product-items .info-params-title { font-weight: 500; font-size: 12px; line-height: 140%; color: #171717; } .user-product-items .info-params-title span { width: 65px; display: inline-block; color: #17171780; margin-right: 5px; } .user-product-items .info-params-price { margin-top: 25px; } .user-product-items .special-price { font-weight: 600; font-size: 18px; line-height: 130%; } .user-product-items .old-price { font-weight: 500; font-size: 16px; line-height: 120%; text-decoration: line-through; color: #17171766; } .user-product-totals { margin-bottom: 15px; margin-top: 15px; } .user-product-totals .title2 { font-weight: 600; font-size: 17px; line-height: 140%; margin-bottom: 15px; } .user-product-totals .user-product-total { border-bottom: 1px solid #EEEEEE; padding-bottom: 10px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 15px; line-height: 140%; } .user-product-total.all { color: #D12C4C; } @media (min-width: 992px) { .userorder-table-item .info-user { clear: unset; margin-right: auto; margin-left: auto; max-width: 320px; } .userorder-table-item .image { height: 46px; width: 46px; margin-right: 14px; } .userorder-table-item .info .order-id { font-size: 14px; } .userorder-table-item .info .order-id span.order-date { font-size: 13px; } .userorder-table-item .info .order-type { font-size: 14px; } .userorder-table-item .user-product { clear: both; padding-top: 20px; margin-top: 20px; grid-template-columns: 470px auto; } .user-product-totals { max-width: 400px; margin: 0; } .user-product-totals .title2 { font-size: 20px; margin-bottom: 20px; } .user-product-totals .user-product-total { padding-bottom: 15px; margin-bottom: 15px; font-size: 16px; } .userorder-table-item .btn-block { margin-top: -30px; } } /*home-sections1*/ .home-sections1 { background: #F7F7F7; padding: 50px 0 55px; } .home-sections1 .col-12 { display: flex; flex-direction: column; gap: 10px; } .home-sections1 .text-block { order: 1; margin-bottom: 10px; } .home-sections1 .image1 { order: 2; height: 220px; overflow: hidden; } .home-sections1 .image2 { order: 3; height: 220px; overflow: hidden; } .home-sections1 .text-block .title { font-family: "Cormorant Garamond", sans-serif; font-weight: 400; font-size: 36px; line-height: 100%; text-align: center; color: #171717; margin-bottom: 20px; } .home-sections1 .text-block .title span { color: #D12C4C; } .home-sections1 .text-block .text { font-weight: 400; font-size: 14px; line-height: 140%; text-align: center; color: #171717; margin-bottom: 20px; } @media (min-width: 768px) { .home-sections1 { padding: 67px 0 76px; } .home-sections1 .text-block { grid-column: span 2; margin-bottom: 0; } .home-sections1 .text-block .title { font-size: 50px; } .home-sections1 .text-block .text { font-size: 16px; } .home-sections1 .text-block .btn-block { text-align: center; } .home-sections1 .col-12 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 20px; } .home-sections1 .image1, .home-sections1 .image2 { height: 400px; } } @media (min-width: 992px) { .home-sections1 { padding: 80px 0; } .home-sections1 .col-12 { display: grid; grid-template-columns: 0.8fr 1.2fr 0.8fr; gap: 0px 47px; align-items: center; } .home-sections1 .image1 { order: 1; height: 600px; margin-top: 120px; } .home-sections1 .image2 { order: 3; height: 600px; } .home-sections1 .text-block { grid-column: span 1; order: 2; margin-bottom: 0; } .home-sections1 .text-block .title { font-size: 60px; margin-bottom: 30px; } .home-sections1 .text-block .text { font-size: 18px; margin-bottom: 30px; } } /*sections-products-module*/ .sections-products-module { padding: 20px 0 60px; } .sections-products-module .titles { font-weight: 300; font-size: 26px; line-height: 140%; margin-bottom: 25px; text-transform: uppercase; order: 1; } .sections-products-module .homeSwiper { order: 2; width: 100%; overflow: hidden; } .sections-products-module .products-module:hover { } .sections-products-module .products-module .image { overflow: hidden; position: relative; aspect-ratio: 3 / 4; box-shadow: none; } .sections-products-module .products-module .image img { border-radius: 1.7px; } .sections-products-module .products-module .image .boton-top { position: absolute; right: 7px; bottom: 20px; left: 7px; z-index: 2; display: none; background: #FFFFFF; padding: 5px 9px; align-items: center; justify-content: space-between; } .sections-products-module .products-module .image .boton-top svg { width: 16px; height: auto; margin-left: 10px; } /* keep boton-top in the flow at all times — toggle opacity instead of display so it can transition */ .sections-products-module .products-module .image .boton-top { display: flex; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; } .sections-products-module .product-module:hover .image .boton-top { opacity: 1; transform: translateY(0); pointer-events: auto; } /* size strip — visible state styling */ .sections-products-module .products-module .image .size { display: flex; gap: 5px 13px; font-weight: 300; font-size: 10px; line-height: 130%; color: #171717; flex-wrap: wrap; } .sections-products-module .products-module .image .size .no { color: #BCBCBC; } /* clickable size pills with animated underline */ .sections-products-module .products-module .image .size span { cursor: pointer; text-decoration: none; text-underline-offset: 3px; } .sections-products-module .products-module .image .size span:hover { text-decoration: underline; } .sections-products-module .products-module .image .size span.no { cursor: not-allowed; } .sections-products-module .products-module .image .size span.no:hover { text-decoration: none; } /* wishlist heart — turns red on hover */ .sections-products-module .products-module .image .wishlist svg path { transition: stroke .25s ease, fill .25s ease; } .sections-products-module .products-module .image .wishlist:hover svg path { stroke: #D12C4C; fill: #D12C4C; } /* fade out the -25% sale badge on hover so it doesn't fight with the size strip */ .sections-products-module .products-module .image .sale { transition: opacity .3s ease; } .sections-products-module .product-module:hover .image .sale { opacity: 0; } /* smooth zoom-in of the product photo */ .sections-products-module .products-module .image img { transition: transform .6s cubic-bezier(0.4, 0, 0.2, 1); } .sections-products-module .product-module:hover .image img { transform: scale(1.05); } /* title underline + arrow slide-right — all triggered by hovering the whole card */ .sections-products-module .products-module .title { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .35s ease; } .sections-products-module .product-module:hover .title, .sections-products-module .products-module .title:hover, .sections-products-module .products-module .title:focus { text-decoration-color: #171717 !important; } .sections-products-module .products-module .title svg { transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1); } .sections-products-module .product-module:hover .title svg { transform: translateX(6px); } .sections-products-module .products-module .image .sale { position: absolute; left: 9px; top: 9px; z-index: 2; background: #D12C4C; border-radius: 5px; font-weight: 500; font-size: 12px; line-height: 130%; text-align: center; padding: 4px 10px; display: inline-flex; align-items: center; justify-content: center; color: white; } .sections-products-module .products-module .title { margin-top: 12px; font-weight: 300; font-size: 14px; line-height: 130%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; } /* .title:hover replaced by animated text-decoration-color above (triggered by whole-card hover) */ .sections-products-module .products-module .prices { display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: 12px; line-height: 130%; flex-wrap: nowrap; overflow: hidden; } .sections-products-module .products-module .prices .price { white-space: nowrap; flex-shrink: 0; } .sections-products-module .products-module .prices .sale { color: #D12C4C; text-decoration: line-through; white-space: nowrap; flex-shrink: 0; } .sections-products-module .products-module .prices .color { display: flex; align-items: center; margin-left: auto; gap: 4px; min-width: 0; overflow: hidden; padding-right: 2px; } .upsell-prices .color span:not(.swatch-count), .sections-products-module .products-module .prices .color span:not(.swatch-count) { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.13); flex-shrink: 0; box-sizing: content-box; /* ← добавь */ } .upsell-prices .color .swatch-count, .sections-products-module .products-module .prices .color .swatch-count { font-weight: 300; font-size: 12px; line-height: 130%; color: #303030; white-space: nowrap; display: none; } .sections-products-module .products-module-block { display: flex; flex-direction: column; max-width: 100%; } .sections-products-module .swiper-nav { order: 3; display: flex; gap: 8px; justify-content: end; margin-top: 20px; } .nav-btn { width: 22px; height: 32px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: none; background: #EEEEEE; flex-shrink: 0; border: 0; } .nav-btn svg { width: 9px; height: auto; } .nav-btn:hover { background: #D12C4C; } .nav-btn:hover svg path { stroke: white; } @media (min-width: 768px) { .sections-products-module { padding: 50px 0 100px; } .sections-products-module .titles { font-size: 40px; margin-bottom: 35px; order: 1; } .sections-products-module .swiper-nav { order: 2; margin-top: 0px; justify-content: end; } .nav-btn { width: 36px; height: 60px; } .sections-products-module .products-module .title { font-size: 17px; margin-bottom: 20px; } .sections-products-module .products-module .prices .sale, .sections-products-module .products-module .prices { font-size: 22px; } .sections-products-module .products-module .image .sale { left: 20px; top: 20px; border-radius: 5px; font-size: 17px; width: 70px; height: 50px; } .sections-products-module .products-module-block { display: grid; grid-template-columns: 1fr 160px; } .sections-products-module .homeSwiper { order: 3; grid-column: span 2; } } @media (min-width: 992px) { .sections-products-module { padding: 80px 0 130px; } .sections-products-module .titles { font-size: 40px; margin-bottom: 40px; } .sections-products-module .products-module .title { font-size: 18px; margin-bottom: 20px; } .sections-products-module .products-module .prices .sale, .sections-products-module .products-module .prices { font-size: 20px; } .sections-products-module .products-module .prices .color span:not(.swatch-count) { width: 20px; height: 20px; } .sections-products-module .products-module .prices .color { gap: 8px; } .sections-products-module .products-module .image .boton-top { right: 22px; bottom: 20px; left: 22px; } .sections-products-module .products-module .image .boton-top svg { width: 30px; height: auto; margin-left: 10px; } .sections-products-module .products-module .image .size { font-size: 18px; } } /*home-sections2*/ .home-sections2 { background: #FFFFFF; padding: 0px 0 50px; } .home-sections2 .text-block { margin-bottom: 16px; } .home-sections2 .image1 { margin-bottom: 15px; border-radius: 6px; overflow: hidden; } .home-sections2 .image1 div { display: none; } .home-sections2 .image2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; overflow: hidden; } .home-sections2 .image2 img { border-radius: 6px; } .home-sections2 .text-block .title { font-weight: 300; font-size: 24px; line-height: 140%; color: #171717; margin-bottom: 10px; text-align: center; } .home-sections2 .text-block .title2 { font-weight: 200; font-size: 16px; line-height: 140%; text-transform: uppercase; text-align: center; color: #171717; margin-bottom: 20px; } .home-sections2 .text-block .text { font-weight: 200; font-size: 12px; line-height: 150%; text-transform: uppercase; color: #171717; margin-bottom: 0px; } .home-sections2 .text-block .text .left { margin-bottom: 25px; } .home-sections2 .text-block .text .tit { font-weight: 300; font-size: 16px; line-height: 100%; text-align: center; text-transform: uppercase; margin-bottom: 10px; text-align: center; } .home-sections2 .text-block .text b { font-weight: 700; } @media (min-width: 768px) { .home-sections2 { padding: 0; } .home-sections2 .text-block .title { font-size: 40px; margin-bottom: 10px; } .home-sections2 .text-block .title2 { font-size: 24px; margin-bottom: 40px; } .home-sections2 .text-block .text { font-size: 16px; margin-bottom: 40px; } .home-sections2 .image1 { height: 660px; margin-bottom: 50px; } .home-sections2 .image2 { height: 400px; } } @media (min-width: 992px) { .home-sections2 .col-12 { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 40px; align-items: start; } .home-sections2 .image1 { height: 752px; margin-bottom: 0; max-width: 670px; display: flex; flex-direction: column; } /* image fills remaining vertical space, opis below it gets its natural height */ .home-sections2 .image1 img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: cover; } .home-sections2 .image1 div { display: block; flex-shrink: 0; font-weight: 200; font-size: 16px; line-height: 140%; text-transform: uppercase; color: #171717; margin-top: 24px; } .home-sections2 .image2 { height: 477px; } .home-sections2 .text-block .text .left { margin-bottom: 0px; } .home-sections2 .text-block .text { font-size: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-bottom: 25px; } .home-sections2 .image2 { grid-template-columns: repeat(3, 1fr); gap: 20px; } .home-sections2 .text-block { margin-bottom: 0px; } } @media (min-width: 1400px) { .home-sections2 .image1 { grid-column: 1; grid-row: 1 / 3; height: 800px; margin-bottom: 0; } .home-sections2 .col-12 { display: grid; grid-template-columns:auto 1fr; grid-template-rows: auto auto; gap: 40px; align-items: start; } .home-sections2 .text-block { grid-column: 2; grid-row: 1; } .home-sections2 .image2 { grid-column: 2; grid-row: 2; height: 477px; } } /*.sections-reviews-module*/ .sections-reviews-module { padding: 20px 0 60px; } .reviews-module-block { display: flex; flex-direction: column; max-width: 100%; } .reviews-module-block .titles { font-weight: 200; font-size: 24px; line-height: 140%; text-transform: uppercase; color: #171717; margin-bottom: 10px; order: 1; text-align: center; } .reviews-module-block .reviewsSwiper { order: 2; width: 100%; } .reviews-module-block .reviews-module .block-info { background: #F7F7F7; border-radius: 6px; padding: 15px; } .reviews-module-block .reviews-module .block-info .info { display: grid; grid-template-columns: 1fr 80px; align-items: center; margin-bottom: 18px; } .reviews-module-block .reviews-module .block-info .icon img { width: 71px; height: auto; } .reviews-module-block .reviews-module .block-info .image { display: flex; gap: 14px; flex-direction: row; align-items: center; } .reviews-module-block .reviews-module .block-info .image img { width: 50px; height: auto; } .reviews-module-block .reviews-module .block-info .name { font-weight: 400; font-size: 14px; line-height: 140%; text-transform: uppercase; color: #171717; } .reviews-module-block .reviews-module .block-info .text { font-weight: 300; font-size: 13px; line-height: 130%; color: #171717; } .reviews-module-block .swiper-nav { order: 3; display: flex; gap: 20px; justify-content: center; margin-top: 48px; display: none; } .reviews-module-block .swiper-nav .nav-btn { width: 40px; height: 40px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: none; background: #FFFFFF; border: 1px solid #EEEEEE; flex-shrink: 0; } .reviews-module-block .swiper-nav .nav-btn:hover { background: #D12C4C; } .reviews-module-block .swiper-nav .nav-btn:hover svg path { stroke: white; } @media (min-width: 768px) { .sections-reviews-module { padding: 0px 0 90px; } .reviews-module-block .titles { font-size: 40px; margin-bottom: 0px; } .reviews-module-block .reviews-module .block-info { padding: 25px; } .reviews-module-block .reviews-module .block-info .name { font-size: 17px; } .reviews-module-block .reviews-module .block-info .text { font-size: 17px; } .reviews-module-block .reviewsSwiper { order: 3; grid-column: span 2; margin-top: 30px; } .reviews-module-block .swiper-nav { order: 2; gap: 20px; margin-top: 0; justify-content: end; } .reviews-module-block { display: grid; grid-template-columns: 1fr 160px; align-items: center; } .reviews-module-block .swiper-nav .nav-btn { width: 50px; height: 50px; } } @media (min-width: 992px) { .sections-reviews-module { padding: 0px 0 120px; } .reviews-module-block .titles { font-size: 40px; } } /**/ .sections-maps-module { padding: 0px 0; } .maps-module-block .maps { margin-right: -12px; margin-left: -12px; margin-bottom: 30px; height: 400px; } .maps-module-block .maps iframe { width: 100%; height: 100%; } .maps-module-block .info-maps .title { font-family: "Cormorant Garamond", sans-serif; font-weight: 400; font-size: 36px; line-height: 90%; color: #171717; margin-bottom: 20px; } .maps-module-block .contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 10px; margin-bottom: 15px; } .maps-module-block .contact-item { display: flex; gap: 8px; align-items: center; } .maps-module-block .contact-item .tit { font-weight: 600; font-size: 13px; line-height: 130%; color: #171717; } .maps-module-block .contact-item a { color: #171717; text-decoration: none; font-weight: 400; font-size: 13px; line-height: 130%; white-space: nowrap; } .maps-module-block .icon { background: #D12C4C; width: 24px; height: 24px; border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .maps-module-block .icon svg { width: 14px; height: auto; } .maps-module-block .address { margin-bottom: 16px; } .maps-module-block .address .tit, .maps-module-block .work-time .tit { font-weight: 600; font-size: 14px; line-height: 130%; color: #171717; margin-bottom: 5px; } .maps-module-block .address .txt, .maps-module-block .work-time .txt { font-weight: 400; font-size: 12px; line-height: 130%; color: #171717; } @media (min-width: 768px) { .maps-module-block .maps { margin-right: -20px; margin-left: -20px; margin-bottom: 50px; height: 500px; } .maps-module-block .info-maps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; max-width: 550px; } .maps-module-block .info-maps .title { font-size: 50px; margin-bottom: 24px; grid-column: span 2; } .maps-module-block .icon { width: 36px; height: 36px; } .maps-module-block .icon svg { width: 20px; height: auto; } .maps-module-block .contact-item { gap: 12px; } .maps-module-block .contact-item .tit { font-size: 15px; margin-bottom: 3px; } .maps-module-block .contact-item a { font-size: 15px; } .maps-module-block .contacts-grid { gap: 20px 80px; margin-bottom: 30px; grid-column: span 2; } .maps-module-block .address .tit, .maps-module-block .work-time .tit { font-size: 18px; margin-bottom: 7px; } .maps-module-block .address .txt, .maps-module-block .work-time .txt { font-size: 15px; } } @media (min-width: 992px) { .maps-module-block .maps { margin-right: 0px; margin-left: 0px; margin-bottom: 0px; height: 660px; } .maps-module-block { position: relative; } .maps-module-block .info-maps { position: absolute; left: 40px; bottom: 40px; background: #FFFFFF; padding: 30px; padding-right: 70px; } .maps-module-block .info-maps .title { font-size: 60px; margin-bottom: 25px; } .maps-module-block .info-maps { gap: 0 100px; max-width: 720px; } .maps-module-block .contacts-grid { gap: 20px 100px; } } /*sections-questions-module*/ .sections-questions-module { padding: 0px 0 50px; } .questions-module-block .title { font-weight: 200; font-size: 26px; line-height: 140%; text-transform: uppercase; margin-bottom: 36px; color: #171717; } .questions-module-block .accordion-block { margin-bottom: 20px; } .questions-module-block .image { height: 300px; border-radius: 4px; overflow: hidden; } .accordion-item { color: #171717; background-color: transparent; border: 0; margin-bottom: 5px; border-radius: 0px !important; overflow: hidden; } .accordion-item:first-of-type > .accordion-header .accordion-button { border-top-left-radius: 0px; border-top-right-radius: 0px; } .accordion-button { background: transparent; padding: 15px 0px; color: #171717; font-weight: 200; font-size: 16px; line-height: 140%; text-transform: uppercase; box-shadow: none; } .accordion-button:not(.collapsed) { color: #171717; background: transparent; font-weight: 200; line-height: 140%; text-transform: uppercase; box-shadow: none; } .accordion-body { padding: 0; background-color: transparent; font-weight: 300; font-size: 14px; line-height: 150%; color: #303030; border-top: 1px solid #EEEEEE; padding-top: 13px; } @media (min-width: 768px) { .questions-module-block .title { font-size: 40px; } .accordion-button { font-size: 20px; } .questions-module-block .image { height: 400px; border-radius: 4px; } .questions-module-block .accordion-block { margin-bottom: 35px; } .accordion-body { font-size: 17px; } } @media (min-width: 992px) { .sections-questions-module { padding: 0px 0; } .questions-module-block { max-width: 1000px; margin-left: auto; margin-right: auto; } .questions-module-block .title { font-size: 40px; margin-bottom: 31px; } .questions-module-block .accordion-block { } } .star_ratings { position: relative; display: inline-block; font-size: 22px; color: #E4E4E4; white-space: nowrap; line-height: 1; letter-spacing: 8px; } .star_ratings::before { content: "☆☆☆☆☆"; position: relative; z-index: 1; color: #E4E4E4; } .star_ratings s { position: absolute; top: 0; left: 0; z-index: 2; overflow: hidden; white-space: nowrap; color: #D12C4C; display: block; bottom: 0; } .star_ratings s::before { content: "★★★★★"; position: absolute; top: 0; left: 0; } .stars-outer { position: relative; display: inline-block; font-size: 22px; color: #E4E4E4; letter-spacing: 1px; line-height: 1; } .stars-outer::before { content: '★★★★★'; display: block; } .stars-inner { position: absolute; top: 0; left: 0; white-space: nowrap; overflow: hidden; color: #D12C4C; width: 0; pointer-events: none; } .stars-inner::before { content: '★★★★★'; display: block; } /*product-reviews-module*/ .product-reviews-module .titles-modul { font-weight: 300; font-size: 26px; line-height: 90%; color: #171717; text-transform: uppercase; margin-bottom: 25px; } .product-reviews-block { border: 1px solid #EEEEEE; border-radius: 5px; margin-bottom: 20px; } .product-reviews-block .title { font-weight: 300; font-size: 14px; line-height: 120%; vertical-align: middle; text-transform: uppercase; color: #171717; border-bottom: 1px solid #EEEEEE; padding: 11px 14px; } .product-reviews-block .text { display: grid; align-items: center; justify-content: space-between; grid-template-columns: 96px auto; gap: 30px; padding: 11px 18px 21px 24px; } .product-reviews-block .left { text-align: center; } .product-reviews-block .reviews-all { font-weight: 700; font-size: 54px; line-height: 100%; text-align: center; vertical-align: middle; color: #171717; margin-bottom: 10px; text-transform: uppercase; } .product-reviews-block .reviews-txt { font-weight: 400; font-size: 14px; line-height: 16px; text-align: center; vertical-align: middle; text-transform: uppercase; color: #171717; } .product-reviews-block .reviews-rating { margin-bottom: 6px; } .rating-info-rows { display: flex; flex-direction: column; gap: 6px; } .rating-info-row { display: flex; flex-direction: row; align-items: center; gap: 4px; } .rating-info-row .rating-number { font-weight: 500; font-size: 15px; line-height: 100%; vertical-align: middle; color: #171717; width: 10px; } .rating-info-row .rating-icon svg { width: 16px; height: auto; margin-top: -5px; } .rating-info-row .rating-url { padding-left: 10px; font-weight: 300; font-size: 14px; line-height: 100%; vertical-align: middle; text-decoration: underline; text-decoration-style: solid; text-transform: uppercase; color: #D12C4C; white-space: nowrap; } .rating-info-row .rating-scale { width: 67px; height: 5px; border-radius: 4px; background: #E4E4E4; position: relative; } .rating-info-row .rating-scale .stars-inner { background: #D12C4C; height: 5px; border-radius: 4px; } .product-reviews-block .reviews-rating .stars-outer { position: relative; display: inline-block; font-size: 22px; color: #E4E4E4; letter-spacing: 1px; line-height: 1; } .product-foto-reviews { border: 1px solid #EEEEEE; border-radius: 5px; margin-bottom: 30px; } .product-foto-reviews .title { font-weight: 300; font-size: 14px; line-height: 120%; text-transform: uppercase; vertical-align: middle; color: #171717; border-bottom: 1px solid #EEEEEE; padding: 11px 15px; } .product-foto-reviews-block { display: grid; align-items: center; justify-content: space-between; grid-template-columns: 100px 100px 100px; gap: 10px; padding: 15px; } .product-foto-reviews-block div { background: #EEEEEE; border-radius: 5px; display: flex; align-items: center; justify-content: center; overflow: hidden; height: 100%; } .product-foto-reviews-block div a { font-weight: 500; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; text-decoration: underline; text-decoration-style: solid; color: #171717; } .product-add-reviews { background: #EEEEEE; border-radius: 5px; padding: 25px 20px; text-align: center; margin-bottom: 30px; } .product-add-reviews .title { font-weight: 600; font-size: 16px; line-height: 120%; text-align: center; vertical-align: middle; color: #171717; margin-bottom: 16px; } .product-add-reviews .btn { background: #D12C4C; display: inline-flex; align-items: center; justify-content: center; padding: 13px 30px; max-width: 100%; } .product-add-reviews .btn:hover { background: #FF8D28; } .product-reviews-views { display: flex; gap: 10px; flex-direction: column; } .product-reviews-view { border: 1px solid #EEEEEE; border-radius: 5px; } .product-reviews-view .title { font-weight: 600; font-size: 14px; line-height: 120%; vertical-align: middle; color: #171717; border-bottom: 1px solid #EEEEEE; padding: 11px 15px; display: flex; align-items: center; justify-content: space-between; } .product-reviews-view .title span { font-weight: 400; font-size: 12px; line-height: 120%; vertical-align: middle; color: #AAAAAA; margin-left: auto; margin-right: 12px; } .product-reviews-view .title .copy-review-link.copied svg path { fill: #1EA451; } .product-reviews-view .text-block { padding: 18px 15px; } .copy-review-link { flex-shrink: 0; width: 20px; height: 20px; display: flex; } .copy-review-link svg { width: 18px; height: auto; } .product-reviews-view .text-block .text { font-weight: 400; font-size: 14px; line-height: 120%; vertical-align: middle; color: #171717; margin-top: 8px; margin-bottom: 15px; } .product-reviews-view .text-block .text-minus, .product-reviews-view .text-block .text-plus { font-weight: 600; font-size: 14px; line-height: 120%; vertical-align: middle; color: #171717; } .product-reviews-view .text-block .text-minus span, .product-reviews-view .text-block .text-plus span { font-weight: 400; font-size: 14px; line-height: 120%; vertical-align: middle; color: #171717; margin-top: 8px; display: block; } .product-reviews-view .text-block .text-plus { margin-bottom: 15px; } .product-reviews-view .text-block .text-minus { float: left; margin-bottom: 20px; } .product-reviews-view .text-block .rating-review { float: right; text-align: right; display: inline-flex; align-items: center; flex-direction: row; gap: 16px; margin-top: 25px; font-weight: 400; font-size: 12px; line-height: 120%; letter-spacing: 0%; vertical-align: middle; color: #AAAAAA; } .product-reviews-view .text-block .rating-review div { display: inline-flex; align-items: center; flex-direction: row; gap: 3px; } .product-reviews-view .text-block .stars-outer { letter-spacing: 1px; } .product-reviews-view .text-block .rating-review div:first-child { color: #D12C4C; } .product-reviews-view .text-block .rating-review svg { width: 16px; height: auto; } .product-reviews-views-block .add-items { text-align: center; padding-top: 40px; } .product-reviews-views-block { margin-bottom: 7px; } .btn-review-like, .btn-review-dislike { background: transparent; display: flex; gap: 4px; align-items: center; justify-content: center; border: 0; height: 25px; } .btn-review-like { color: #D12C4C; } .btn-review-like svg, .btn-review-dislike svg { flex-shrink: 0; } @media (min-width: 768px) { .product-reviews-text { display: flex; gap: 20px; flex-direction: column; max-width: 476px; } .product-reviews-block .title { font-size: 17px; padding: 17px 24px; } .product-reviews-block { margin-bottom: 0; } .product-foto-reviews-block { padding: 17px 20px; } .product-foto-reviews .title, .product-reviews-block .text { padding: 20px 24px; } .product-reviews-block .text { grid-template-columns: 100px auto; justify-content: center; } .product-foto-reviews-block { grid-template-columns: 132px 132px 132px; gap: 16px; padding: 20px 24px; } .product-reviews-block .reviews-all { font-size: 50px; } .product-reviews-block .reviews-txt { font-size: 14px; } .product-reviews-block .reviews-rating .stars-outer { font-size: 24px; } .rating-info-row .rating-number { font-size: 14px; width: 9px; } .rating-info-row .rating-icon svg { width: 20px; height: auto; } .rating-info-row .rating-url { padding-left: 0px; font-size: 14px; } .rating-info-row { gap: 10px; } .product-add-reviews { padding: 17px 17px 17px 23px; text-align: center; display: flex; align-items: center; justify-content: space-between; } .product-add-reviews .title { font-size: 18px; font-weight: 300; margin-bottom: 0px; text-transform: uppercase; } .product-add-reviews .btn { font-weight: 300; font-size: 16px; line-height: 140%; text-transform: uppercase; } .product-reviews-view .title { font-size: 16px; padding: 17px 24px; } .product-reviews-view .title span { font-size: 14px; margin-right: 10px; } .product-reviews-views { gap: 20px; } .product-reviews-view .text-block { padding: 20px 24px; } .product-reviews-view .text-block .text { font-size: 14px; line-height: 16px; margin-top: 12px; margin-bottom: 20px; } .product-reviews-view .text-block .text-minus, .product-reviews-view .text-block .text-plus { font-size: 14px; line-height: 16px; } .product-reviews-view .text-block .text-minus span, .product-reviews-view .text-block .text-plus span { font-size: 14px; line-height: 16px; } .product-reviews-view .text-block .text-plus { margin-bottom: 20px; } .product-reviews-view .text-block .rating-review { font-size: 14px; line-height: 16px; } .product-reviews-view .text-block .rating-review svg { width: 20px; height: auto; } } @media (min-width: 992px) { .product-reviews-module .titles-modul { font-size: 40px; margin-bottom: 34px; } .product-reviews-text { display: grid; gap: 30px; flex-direction: row; grid-template-columns: 1fr 1fr; max-width: unset; justify-content: space-between; margin-bottom: 20px; } .product-reviews-views-block, .product-add-reviews, .product-reviews { max-width: 955px; } .product-reviews-block .reviews-all { font-size: 64px; } .product-foto-reviews, .product-reviews-block { height: 100%; } .product-foto-reviews { margin-bottom: 0px; } .rating-info-row .rating-url { font-size: 18px; } .rating-info-row .rating-icon svg { width: 24px; height: auto; } .rating-info-row .rating-number { font-size: 18px; width: 13px; } .product-add-reviews .title { font-size: 20px; } .product-reviews-view .title { font-size: 17px; padding: 18px 24px; } .product-reviews-view .text-block .text { font-size: 15px; } .product-reviews-view .text-block .text-minus, .product-reviews-view .text-block .text-plus { font-size: 15px; line-height: 16px; } } .size-title { font-weight: 700; font-size: 11px; line-height: 140%; color: #171717; margin-bottom: 4px; } .size-title span { margin-right: 6px; } .size-text { font-weight: 400; font-size: 11px; line-height: 140%; color: #171717; margin-bottom: 15px; } @media (min-width: 768px) { } @media (min-width: 992px) { .size-text, .size-title { font-size: 16px; } } .home-video-block { position: relative; margin-left: -12px; margin-right: -12px; } .home-video { position: relative; overflow: hidden; height: 550px; } .home-video .image { height: 550px; overflow: hidden; } /* hero background YouTube iframe — cover-fit, behind poster and content */ .hero-video-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #000; } .hero-video-bg iframe { position: absolute; top: 50%; left: 50%; width: 177.78vh; height: 56.25vw; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); border: 0; pointer-events: none; } /* transparent layer above the iframe — eats hover so YouTube's native overlay never appears */ .hero-video-shield { position: absolute; inset: 0; z-index: 2; background: transparent; } /* poster image sits on top of the iframe until the video has played for 2s */ .hero-video-poster { position: absolute; inset: 0; z-index: 1; opacity: 1; transition: opacity .8s ease; pointer-events: none; } .hero-video-poster.is-hidden { opacity: 0; } /* stretch the container chain to full section height so .video-play bottom: 30px lands inside */ .home-video .container { position: relative; z-index: 3; height: 100%; } .home-video .container > .row, .home-video .row > [class*="col-"], .home-video .home-video-block { height: 100%; } .home-video-block .catalog-block { background: #FFFFFF; padding: 20px 30px 25px; border-radius: 6px; text-align: center; position: absolute; right: 13px; bottom: 30px; z-index: 2; } .home-video-block .catalog-title { font-family: "Cormorant Garamond", sans-serif; font-weight: 400; font-size: 22px; line-height: 90%; text-align: center; margin-bottom: 19px; color: #171717; } .home-video-block .catalog-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .home-video-block .catalog-list li { display: flex; align-items: center; justify-content: center; gap: 10px; } .home-video-block .catalog-list .text { font-weight: 400; font-size: 12px; line-height: 120%; color: #171717; } .home-video-block .catalog-list .line { display: block; width: 20px; height: 1px; background: #DE6980; } .home-video-block .video-play { position: absolute; left: 10px; bottom: 30px; z-index: 2; display: flex; align-items: center; gap: 0; flex-direction: row; } .video-play span, .video-play button { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 10px; flex-shrink: 0; background: transparent; border: 0; padding: 0; cursor: pointer; } .video-play svg { width: 30px; height: auto; flex-shrink: 0; } /* default state: video is playing, audio is muted (autoplay constraint) */ .video-play .play .icon-play, .video-play .sound .icon-sound { display: none; } /* paused: swap pause icon for play icon */ .video-play .play.is-paused .icon-pause { display: none; } .video-play .play.is-paused .icon-play { display: inline-block; } /* unmuted: swap muted icon for active sound icon */ .video-play .sound:not(.is-muted) .icon-muted { display: none; } .video-play .sound:not(.is-muted) .icon-sound { display: inline-block; } @media (min-width: 768px) { .home-video { height: calc(100vh - 71px); } .home-video .image { height: calc(100vh - 71px); } .home-video-block { margin-left: -20px; margin-right: -20px; } .home-video-block .catalog-block { background: #FFFFFF; padding: 20px 32px 28px; border-radius: 6px; right: 30px; bottom: 30px; } .home-video-block .catalog-title { font-size: 30px; margin-bottom: 19px; } .home-video-block .catalog-list .text { font-size: 14px; } .home-video-block .catalog-list { gap: 17px; } .home-video-block .video-play { left: 30px; bottom: 30px; } .video-play span, .video-play button { width: 40px; height: 40px; margin-right: 15px; } .video-play svg { width: 40px; height: auto; } } @media (min-width: 992px) { .home-video-block { margin-left: 0px; margin-right: 0px; } .home-video { height: calc(100vh - 81px); } .home-video .image { height: calc(100vh - 81px); } .home-video-block .catalog-list .text { font-size: 16px; } .home-video-block .catalog-title { font-size: 35px; margin-bottom: 22px; } .video-play span, .video-play button { width: 50px; height: 50px; margin-right: 15px; } .video-play svg { width: 50px; height: auto; } .home-video-block .catalog-block { bottom: 0; right: 50px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 20px 75px 32px; } } /**/ .home-sections3 { background: url('../image/homesections3_bg.png'), #E2E3E5; background-position: left -250px bottom; background-repeat: no-repeat; background-size: 270%; height: 340px; } .home-sections3 .icon img { width: 139px; height: auto; } .home-sections3 .text-block { margin-top: 46px; display: flex; flex-direction: column; gap: 20px; justify-content: center; max-width: 320px; } .home-sections3 .title { font-weight: 200; font-size: 24px; line-height: 150%; color: #171717; margin-bottom: 20px; } .sections-products-module .products-module-block { position: relative; } .home-sections4 { position: relative; overflow: hidden; } .home-sections4::before { content: ''; position: absolute; inset: 0; background-image: url('../image/homesections4_bg21.jpg'); background-position: calc(50% - 150px) top; background-repeat: no-repeat; background-size: cover; transform: scale(-1, 1); z-index: 0; } .home-sections4 > * { position: relative; z-index: 1; } .home-sections4 .icon svg { width: 122px; height: auto; } .home-sections4 .text-block { height: 300px; display: flex; flex-direction: column; gap: 25px; justify-content: center; max-width: 160px; } .home-sections4 .title { font-weight: 200; font-size: 24px; line-height: 150%; margin-bottom: 20px; color: #FFFFFF; } .home-sections5 { background: url('../image/homesections5_bg.jpg'), linear-gradient(267.37deg, rgba(216, 220, 223, 0) 79.88%, #D8DCDF 97.89%); background-position: right -283px top -13px; background-repeat: no-repeat; background-size: 350%; height: 360px; } .home-sections5 .icon svg { width: 218px; height: auto; } .home-sections5 .text-block { margin-top: 51px; display: flex; flex-direction: column; gap: 15px; justify-content: center; /*max-width: 160px;*/ } .home-sections5 .title { font-weight: 300; font-size: 20px; line-height: 150%; color: #592F37; } @media (min-width: 992px) { .home-sections3 { background: url('../image/homesections33_bg.jpg'), #E2E3E5; background-position: center center; background-repeat: no-repeat; background-size: cover; height: 600px; } .home-sections3 .text-block { margin-top: 180px; display: flex; flex-direction: row; gap: 40px; justify-content: space-between; max-width: unset; } .home-sections3 .icon { order: 2; } .home-sections3 .right { order: 1; } .home-sections3 .icon img { width: 100%; height: auto; } .home-sections3 .title { font-size: 50px; margin-bottom: 40px; max-width: 662px; } .btn3 { font-size: 20px; padding: 18px 93px; } .sections-products-module .homeSwiper { width: calc(100% - 120px); margin-left: auto; margin-right: auto; } .sections-products-module .swiper-nav { top: calc(50% - 70px); margin-right: 0px; margin-left: 0px; left: 0; right: 0; justify-content: space-between; position: absolute; z-index: 5; } .nav-btn svg { width: unset; height: auto; } .home-sections4 { background-image: url('../image/homesections4_bg21.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; } .home-sections4 .text-block { height: 600px; display: flex; flex-direction: row; justify-content: space-between; max-width: unset; align-items: center; } .home-sections4 .text-block .right { text-align: right; } .home-sections4 .icon svg { width: 443px; height: auto; } .home-sections4 .title { font-size: 50px; max-width: 513px; margin-bottom: 40px; } .btn4 { font-size: 20px; padding: 18px 93px; } .home-sections5 { background: url('../image/homesections52_bg.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 600px; } .home-sections5 .text-block { margin-top: 193px; display: flex; flex-direction: column; gap: 30px; max-width: unset; } .home-sections5 .icon svg { width: 776px; height: auto; } .home-sections5 .title { font-size: 50px; } } .lang-wrapper { position: relative; display: inline-block } .lang-btn { font-weight: 200; font-size: 21px; line-height: 100%; color: #000000; cursor: pointer; user-select: none } .lang-wrapper { position: relative; display: inline-block; padding-bottom: 6px } .lang-dropdown { position: absolute; top: 100%; right: 0; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; z-index: 9999; padding-top: 25px; } .lang-dropdown-block { background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; } .lang-wrapper:hover .lang-dropdown { visibility: visible; opacity: 1; transform: translateY(0) } .lang-item { display: block; padding: 9px 15px; font-weight: 200; font-size: 21px; line-height: 100%; color: #000000; text-decoration: none } /**/ /* ── SEARCH BAR ── */ .search-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 30px; } .search-bar input { border: none; background-color: #EEEEEEB2; background-repeat: no-repeat; background-position: center right 20px; background-image: url("data:image/svg+xml,%3Csvg width='20' height='19' viewBox='0 0 20 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.974 18.3252C19.049 18.4002 19.074 18.6065 18.9615 18.7377C18.849 18.869 18.6427 18.7502 18.5552 18.669L13.574 13.7815C11.4115 15.769 8.4865 16.444 5.55524 15.5377C3.14899 14.794 0.992743 12.719 0.267743 10.0565C-0.357257 7.75646 0.136493 5.32521 1.49274 3.41271C4.32399 -0.593538 9.96775 -1.15604 13.524 2.16896C16.7302 5.16896 16.9615 10.144 13.9427 13.3815L18.974 18.3252ZM15.499 7.97521C15.499 3.86271 12.1615 0.531461 8.04899 0.531461C3.93649 0.531461 0.592743 3.86271 0.592743 7.97521C0.592743 12.0877 3.93024 15.419 8.04274 15.419C12.1552 15.419 15.4927 12.0877 15.4927 7.97521H15.499Z' fill='black'/%3E%3C/svg%3E%0A"); padding: 15px 60px 15px 15px; width: calc(100% - 160px); font-weight: 300; font-size: 12px; line-height: 120%; outline: none; color: #171717; height: 51px; border-radius: 4px; } .search-wrap input::placeholder { color: #aaa; } .search-icon { padding: 0 12px; color: #aaa; cursor: pointer; } .btn-apply { padding: 14px 17px; width: max-content; } .cart-header-label { display: none; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap; } .cart-header-label .x { color: #aaa; font-size: 18px; } .layout { display: flex; flex-direction: column; } .catalog { display: flex; gap: 10px; flex-direction: column; margin-bottom: 60px; } .table-header { display: none; padding: 12px 20px; background: #fff; border-bottom: 2px solid #e0e0e0; font-weight: 700; font-size: 13px; color: #555; } .product-row { border-radius: 6px; border: 1px solid #EEEEEE; padding: 10px; } .product-row:hover { background: #fafafa; } .row-grid { display: grid; grid-template-columns: 110px 1fr; grid-template-areas: "photo sizes" "photo info" "meta meta"; gap: 12px 12px; align-items: start; } .col-photo { grid-area: photo; } .product-img { width: 110px; height: 150px; object-fit: cover; border-radius: 6px; display: block; } .col-sizes { grid-area: sizes; display: flex; gap: 5px; flex-wrap: wrap; } .size-chip { border: 1px solid #EEEEEE; border-radius: 6px; padding: 3px 8px; font-weight: 300; font-size: 12px; line-height: 120%; text-align: center; text-transform: uppercase; cursor: pointer; transition: all 0.15s; color: #171717; } .size-chip:hover, .size-chip.active { background: #D12C4C; border-color: #D12C4C; color: #fff; } .col-info { grid-area: info; } .prop { font-weight: 300; font-size: 12px; line-height: 120%; letter-spacing: 0.05em; color: #171717; margin-bottom: 10px; } .prop b { font-weight: 500; } .download-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; flex-shrink: 0; margin-left: auto; } .color-dot { width: 13px; height: 13px; border-radius: 50%; background: #1a1a1a; border: 1px solid #555; flex-shrink: 0; display: none; } .color-row.info-color { grid-column: span 2; font-weight: 300; font-size: 14px; line-height: 120%; color: #171717; } .color-row.info-color span:not(.color-dot) { font-weight: 500; font-size: 12px; line-height: 120%; color: #171717; margin-right: 5px; } .download-btn:hover { border-color: #C8102E; color: #C8102E; } .col-price-sale { font-weight: 500; font-size: 14px; line-height: 120%; color: #D12C4C; } .col-right { display: flex; grid-column: span 2; flex-direction: row; flex-wrap: wrap; gap: 16px 14px; font-weight: 300; font-size: 12px; line-height: 120%; } .product-row .tit { font-weight: 500; font-size: 12px; line-height: 120%; color: #171717; margin-right: 5px; white-space: nowrap; } .cart-panel { margin-bottom: 22px; } .cart-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 21px; } .cart-title { font-weight: 300; font-size: 26px; line-height: 140%; text-transform: uppercase; color: #171717; } .cart-panel-body { border: 1px solid #EEEEEE; border-radius: 6px; } .cart-panel-body .cart-col1 { padding: 10px; border-bottom: 1px solid #e0e0e0; } .cart-panel-body .cart-col2 { padding: 10px; } .cart-item { display: flex; gap: 18px; margin-bottom: 12px; } .cart-item-img { width: 100px; height: 140px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #e8e0d8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect width='60' height='60' fill='%23e8e0d8'/%3E%3Cellipse cx='30' cy='33' rx='21' ry='10' fill='%23c8b89a'/%3E%3Cellipse cx='30' cy='27' rx='16' ry='6' fill='%23a08060'/%3E%3C/svg%3E") center/cover; } .cart-item-info { flex: 1; font-size: 12px; } .cart-item-info p { font-weight: 500; font-size: 12px; line-height: 120%; margin-bottom: 10px; color: #171717; } .cart-item-info p b { font-weight: 300; color: #171717; } .cart-item-info p.price { color: #D12C4C; } .sale-input { width: 100%; border: 1px solid #000000; border-radius: 3px; padding: 8px 9px; font-weight: 300; font-size: 12px; line-height: 120%; vertical-align: middle; outline: none; margin-bottom: 9px; color: #BCBCBC; } .sale-input:focus { border-color: #C8102E; } .sale-input::placeholder { color: #aaa; } .profit-line { font-weight: 500; font-size: 12px; line-height: 120%; color: #34A853; } .profit-qty { display: flex; align-items: center; justify-content: space-between; } .cart-summary { font-size: 13px; } .summary-row { display: flex; justify-content: space-between; padding: 6px 0; color: #171717; font-weight: 300; font-size: 12px; line-height: 120%; } .summary-row b { color: #1a1a1a; font-weight: 600; } .summary-row .c-red { color: #C8102E; font-weight: 700; } .summary-row .c-green { color: #2e7d32; font-weight: 700; } .btn-order { width: 100%; margin-top: 26px; transition: background 0.18s; } .btn-continue { width: 100%; margin-top: 15px; } .color-foto{ display: none; } @media (min-width: 992px) { .search-bar { padding: 0; display: grid; grid-template-columns:1fr 435px; gap: 20px; } .cart-header-search { width: 100%; display: flex; align-items: center; justify-content: space-between; } .cart-header-label { display: flex; align-items: center; justify-content: space-between; font-size: 30px; font-weight: 300; } .layout { align-items: flex-start; padding-bottom: 0; display: grid; grid-template-columns:1fr 435px; gap: 20px; margin-bottom: 100px; } .table-header { display: grid; grid-template-columns: auto auto auto auto; background: #EEEEEE66; border-top-right-radius: 6px; border-top-left-radius: 6px; border: 1px solid #EEEEEE; padding: 0; } .table-header div { padding: 0px; align-items: center; justify-content: center; display: flex; height: 60px; flex-wrap: nowrap; border-right:1px solid #EEEEEE; } .table-header div .col-title{ display: grid; grid-template-columns: repeat(4,1fr); border: 0; } .col-right > div, .table-header .col-title div{ padding: 0 5px; } .table-header .col-title div:last-child{ border: 0; } .product-row { padding: 0; border-radius: 0; margin-top: -1px; } .row-grid { grid-template-columns: auto auto auto auto; align-items: center; grid-template-areas:unset; gap: 0; } .col-title, .col-right { display: grid; grid-column: span 1; flex-direction: row; flex-wrap: wrap; grid-template-columns: repeat(4,1fr); } .col-photo { padding: 0; grid-area: unset; align-items: center; display: flex; justify-content: end; border-right:1px solid #EEEEEE; height: 100%; flex-direction: column; padding-top: 10px; } .product-img { width: 125px; height: 158px; } .col-sizes { grid-area: unset; padding: 19px 0; flex-direction: column; gap: 5px; justify-content: center; flex-wrap: nowrap; align-items: center; border-right:1px solid #EEEEEE; height: 100%; } .size-chip { text-align: center; width: 40px; height: 32px; border-radius: 6px; font-size: 14px; padding: 7px 8px; } .catalog { gap: 0px; margin-bottom: 0px; } .col-info { grid-area: unset; padding: 0 18px; border-right:1px solid #EEEEEE; height: 100%; display: flex; justify-content: center; flex-direction: column; } .color-row.info-color { grid-column: span 1; display: none; } .col-price-orig { font-size: 14px; } .col-price-sale { display: flex; align-items: center; gap: 0px; } .info-color { display: flex; } .cart-panel { } .cart-title-row { display: none; } .search-bar input { width: calc(100% - 255px); font-size: 15px; height: 60px; border-radius: 6px; } .btn-apply { padding: 19px 53px; width: max-content; height: 60px; font-size: 16px; } .catalog{ display:table; width:100%; } .table-header, .product-row{ display:table-row; } .table-header > *, .product-row > *{ display:table-cell; vertical-align:middle; } .row-grid, .table-header .row-grid{ display:grid; grid-template-columns: 150px 110px 0.6fr 1.4fr; border:1px solid #EEEEEE; margin-top: -1px; } .product-row .tit{ display: none; } .col-right{ height: 100%; font-size: 14px; gap: 0; } .col-right > div{ text-align: center; height: 100%; border-right:1px solid #EEEEEE; display: flex; flex-direction: row; justify-content: center; align-items: center; } .col-right > div:last-child{ border-right:0; } .download-btn{ width: 100%; height: 100%; } .cart-panel-body .cart-col1 { padding: 20px; } .cart-item-img { width: 135px; height: 150px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .cart-item-info p { font-size: 14px; } .profit-line { font-size: 14px; } .cart-col1 .qty-control__increase, .cart-col1 .qty-control__reduce { height: 44px; width: 44px; } .cart-col1 .qty-control { height: 44px; width: 130px; margin-bottom: unset; } .cart-col1 .qty-control__number { width: 40px; height: 44px; font-size: 18px; } .cart-panel-body .cart-col2 { padding: 20px; } .summary-row { font-size: 14px; } .btn-continue, .btn-order{ width: 100%; max-width: unset; } .color-foto{ display: block; padding: 7px 0; font-weight: 300; font-size: 14px; line-height: 120%; text-align: left; } .color-foto span{ font-weight: 500;} } @media (max-width: 991px) { .nav-btn { width: 32px; height: 32px; } .footer-link3 .title{ max-width: 140px; } }