/* Overrides on top of the SaltShop "salt" theme. Loaded after the theme CSS, so plain specificity is enough. */ /* --- wider layout: theme ships 73.75rem (1180px), we want 1420px -------- !important is required: the theme lazy-loads common.XAI6HU7Q.css from a #linksLazy block at the end of , so its `.container{max-width:73.75rem}` lands later in the cascade than this file and would win on equal specificity. */ .container, .footer-container, .site-head-inner, .site-body-inner, .site-footer-top-level-inner, .site-footer-bottom-level-inner, .recently-list__container { max-width: 1320px !important; min-width: 0 !important; margin-left: auto; margin-right: auto; } /* Full-bleed backgrounds: only the inner content is boxed, the coloured bands (footer, saltages strip, bottom toolbar) span the whole viewport. */ .stretch-container, .site-footer-wrap, .site-footer, .site-footer-top-level, .site-footer-bottom-level, .static-our-saltages, .toolbar-top, .toolbar-bottom { max-width: none !important; min-width: 0 !important; width: auto !important; } /* below the design width fall back to fluid so nothing scrolls sideways */ @media (max-width: 1340px) { .container, .footer-container, .site-head-inner, .site-body-inner, .site-footer-top-level-inner, .site-footer-bottom-level-inner, .recently-list__container { max-width: 100% !important; } } /* --- home page SEO text ------------------------------------------------- */ .home-seo-text { margin: 32px 0 8px; } .home-seo-text h1 { font-size: 1.5rem; margin: 0 0 14px; } .home-seo-text p { margin: 0 0 10px; line-height: 1.55; } /* --- kill the dead space the unused Angular includes leave behind ------- */ .mobile-overlap, .oc-lazy-load-cloak:empty, .toaster-container-alternative:empty, .notification-message-cust:empty { display: none !important; } /* --- tabs: the theme hides panes until Angular adds the active class ---- */ .details-tabs-deacription img, .staticpage-content img, .news-item-content img { max-width: 100%; height: auto; } /* --- migrated content tables should not blow out the layout ------------- */ .staticpage-content table, .details-tabs-deacription table, .news-item-content table { max-width: 100%; } .staticpage-content, .details-tabs-deacription, .news-item-content { overflow-x: auto; } /* --- quantity spinbox rendered by salt-ui.js --------------------------- */ .spinbox { display: inline-flex; align-items: center; } .spinbox .btn { min-width: 2rem; padding: 0 .5rem; } /* --- city confirmation bubble ------------------------------------------ */ .salt-geo-bubble { position: fixed; z-index: 2147483001; top: 12px; right: 12px; max-width: 320px; background: #fff; border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); padding: 16px 18px; font-size: .875rem; line-height: 1.5; } .salt-geo-bubble__row { margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* the field and the buttons share one height, so the row does not look ragged */ .salt-geo-bubble select, .salt-geo-bubble .salt-geo-input { flex: 1 1 100%; min-width: 0; max-width: 100%; box-sizing: border-box; height: 34px; padding: 0 .6rem; border: 1px solid #e2e3e4; border-radius: .25rem; font-size: .875rem; color: #2d2c2c; background: #fff; } .salt-geo-bubble .salt-geo-input:focus { outline: none; border-color: #c98c6a; box-shadow: 0 0 0 3px rgba(201, 140, 106, .18); } .salt-geo-bubble__row .btn { height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; border-radius: .25rem; } /* --- search suggestions ------------------------------------------------- */ .salt-suggest { position: absolute; z-index: 2147483000; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid #e2e2e2; border-radius: 0 0 4px 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); max-height: 60vh; overflow-y: auto; } .salt-suggest__item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; text-decoration: none; border-bottom: 1px solid #f2f2f2; } .salt-suggest__item:last-child { border-bottom: 0; } .salt-suggest__item:hover, .salt-suggest__item.is-active { background: #f7f4f2; } .salt-suggest__item img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 40px; } .salt-suggest__name { flex: 1 1 auto; font-size: .8125rem; } .salt-suggest__price { white-space: nowrap; font-weight: 700; font-size: .8125rem; } .salt-suggest__empty { padding: 12px 10px; color: #888; font-size: .8125rem; } /* --- search results page ---------------------------------------------- */ .salt-search-summary { margin-bottom: 16px; } /* ========================================================================== MOBILE The theme's own phone layout was driven by its Angular bundle plus a viewport of initial-scale=0.1 ("desktop version on a phone"). With a real responsive viewport its media queries apply again, but the parts that needed JS — the catalogue sidebar, the wide tables, the toolbars — need handling here. ========================================================================== */ @media (max-width: 1024px) { /* the aside/main split is a fixed 3/9 grid; stack it */ .site-body-aside, .site-body-menu, .site-body-main, .site-body-carousel, .col-xs-3.site-body-aside, .col-xs-9.site-body-main { flex-basis: 100% !important; max-width: 100% !important; } .site-body-carousel-block { display: none; } /* side promos, not worth the height */ } @media (max-width: 768px) { html { -webkit-text-size-adjust: 100%; } .container, .container-fluid, .site-head-inner, .site-body-inner { padding-left: 12px !important; padding-right: 12px !important; } /* ---- header: logo, search and phone stack instead of sitting in a row -- */ .site-head-inner > .row { flex-direction: column; align-items: stretch; } .site-head-logo-block, .site-head-menu-col, .site-head-phone-col { flex-basis: 100% !important; max-width: 100% !important; margin-top: .5rem !important; margin-bottom: .5rem !important; text-align: left; } .site-head-logo-picture { width: min(200px, 60%) !important; } .site-head-phone-col { text-align: left !important; } .site-head-cart-phone { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .site-head-phone { font-size: 1.125rem !important; } /* ---- catalogue menu: collapsed behind the yellow button --------------- */ .menu-dropdown-list { position: static !important; width: auto !important; } .menu-dropdown-sub { position: static !important; width: auto !important; box-shadow: none; } .menu-general { display: flex; flex-wrap: wrap; } .menu-general-item { flex: 0 0 auto; } .menu-general-root-link { padding: .5rem .75rem !important; } /* ---- product grid: two per row, one on the narrowest phones ----------- */ .products-view-block, .products-view-tile .products-view-block { flex-basis: 50% !important; max-width: 50% !important; } .product-categories-item-slim { flex-basis: 50% !important; max-width: 50% !important; } .products-view-item { padding-left: 0 !important; min-height: 0 !important; } .products-view-pictures { width: 100% !important; } .products-view-picture-link { height: auto !important; } .products-view-picture { width: 100%; height: auto; } /* ---- product page: gallery over the buy box -------------------------- */ .details-block-row { flex-direction: column; } .details-block-row > .col-xs-5, .details-block-row > .col-xs-7 { flex-basis: 100% !important; max-width: 100% !important; } .gallery-picture-obj { max-height: none !important; width: 100%; height: auto; } .details-tabs .tabs-headers { display: flex; flex-wrap: wrap; } /* ---- wide content scrolls inside its own box, never the page ---------- */ .staticpage-content, .details-tabs-deacription, .news-item-content, .salt-cart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { max-width: 100%; } /* ---- news list: image above the text --------------------------------- */ .news-list-item { flex-direction: column; } .news-item-img-col { flex-basis: 100% !important; max-width: 100% !important; } /* ---- footer columns stack ------------------------------------------- */ .site-footer-top-level__row { flex-direction: column; } .footer-menu { flex-basis: 100% !important; max-width: 100% !important; margin-bottom: 1rem; } .static-our-saltages-block, .static-our-saltages-block { flex-basis: 50% !important; max-width: 50% !important; margin-bottom: 1rem; } /* ---- bottom toolbar: it is fixed, so keep content clear of it -------- */ .toolbar-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; } .toolbar-bottom .toolbar-bottom-links { display: none; } html.mobile-version body { padding-bottom: 72px; } /* ---- our own widgets ------------------------------------------------- */ .salt-geo-bubble { left: 8px; right: 8px; top: auto; bottom: 60px; max-width: none; } .salt-suggest { max-height: 55vh; } .salt-checkout .col-sm-6 { flex-basis: 100% !important; max-width: 100% !important; } /* the cart/compare tables are wide; let them scroll in place */ [data-salt-page] > table, [data-salt-page] table { min-width: 520px; } [data-salt-page] { overflow-x: auto; } .home-seo-text h1 { font-size: 1.25rem; } } @media (max-width: 480px) { .products-view-block, .products-view-tile .products-view-block, .product-categories-item-slim { flex-basis: 100% !important; max-width: 100% !important; } .static-our-saltages-block, .static-our-saltages-block { flex-basis: 100% !important; max-width: 100% !important; } .breadcrumbs { font-size: .75rem; } } /* click-to-load map placeholder */ .salt-map { border: 1px solid #e6e0dc; border-radius: 5px; padding: 20px; text-align: center; margin: 14px 0; } .salt-map__note { font-size: .8125rem; margin-top: 10px; } /* ========================================================================== MOBILE VERSION (/m/) — the separate SaltShop mobile template. Its own CSS comes from /Areas/Mobile/dist/entries/*; these are the bits our own markup needs (category tiles, product page, version switch). ========================================================================== */ .salt-m-tiles { display: grid; grid-template-columns: 1fr; gap: 1px; margin: 0 0 18px; } .salt-m-tile { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-decoration: none; } .salt-m-tile__img { width: 56px; height: 56px; object-fit: contain; flex: 0 0 56px; } .salt-m-tile__name { flex: 1 1 auto; font-size: .9375rem; } .salt-m-tile__count { font-size: .75rem; opacity: .6; } /* product page */ .salt-m-gallery { margin: 0 0 16px; } .salt-m-gallery__main { display: block; } .salt-m-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; -webkit-overflow-scrolling: touch; } .salt-m-thumb { width: 64px; height: 64px; object-fit: cover; border: 2px solid transparent; border-radius: 4px; flex: 0 0 64px; } .salt-m-thumb.is-active { border-color: #c98c6a; } .salt-m-buy { margin: 0 0 20px; } .salt-m-buy__price { font-size: 1.5rem; font-weight: 700; margin-bottom: 12px; } .salt-m-buy__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .salt-m-buy__row .cart-add { flex: 1 1 auto; } .salt-m-buy__controls { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .salt-m-buy__controls .btn { flex: 1 1 auto; } .salt-m-buy__note { margin-top: 10px; font-size: .8125rem; } .salt-m-desc { margin-top: 8px; } .salt-m-desc img { max-width: 100%; height: auto; } .salt-m-desc table { max-width: 100%; } .salt-m-desc h2 { font-size: 1.125rem; margin: 18px 0 8px; } /* product cards inside our horizontal blocks */ .mainpage-products__content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mainpage-products__content .mobile-product-view-item { width: auto; } /* the sidebar submenu opens inline */ .menu__submenu { padding-left: 10px; } .menu__arrow-down { transform: rotate(90deg); display: inline-block; } /* version switch */ .salt-switch-version { padding: 18px 12px; text-align: center; } .salt-switch-version a { font-size: .875rem; } /* the mobile template pins a bottom panel — keep content clear of it */ .bottom-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: #fff; box-shadow: 0 -2px 10px rgba(0, 0, 0, .12); } .bottom-panel__menu-block { display: flex; } .bottom-panel__menu-link { flex: 1 1 0; padding: 8px 2px; text-align: center; font-size: .6875rem; text-decoration: none; } html.mobile-version body { padding-bottom: 72px; } @media (min-width: 560px) { .salt-m-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mainpage-products__content { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* the mobile template assumes a phone-width viewport; keep it sane if a desktop browser lands on /m/ (shared links, bots, manual switch) */ .mobile-body { max-width: 640px; margin-left: auto; margin-right: auto; } .mobile-header { max-width: 640px; margin-left: auto; margin-right: auto; } .bottom-panel__menu-block { max-width: 640px; margin: 0 auto; } /* hero slider: cap the height instead of letting a 1200px photo fill the page */ .carousel-main--mobile .carousel-main-list { display: flex; overflow-x: auto; } .carousel-main--mobile .carousel-main-item { flex: 0 0 100%; } .carousel-main--mobile img { width: 100%; height: auto; max-height: 220px; object-fit: cover; border-radius: 5px; } /* ========================================================================== MOBILE HEADER / FOOTER / SIDEBAR corrections ========================================================================== */ /* --- header: burger and search left, logo centred, phone right ---------- */ .mobile-header { display: flex; align-items: center; gap: 6px; padding: 0 8px; } .mobile-header__menu-trgger-block { order: 1; flex: 0 0 auto; } .mobile-header__search-block { order: 2; flex: 0 0 auto; } .mobile-header__logo-block { order: 3; flex: 1 1 auto; text-align: center; } .mobile-header__phone-block { order: 4; flex: 0 0 auto; } .mobile-header__search-form-block { order: 5; } .mobile-header__logo-img { display: inline-block; max-height: 44px; width: auto !important; } /* --- burger: bars fold into a cross, drawer slides in ------------------ State lives on (see initBurger in salt-ui.js): the theme's checkbox sits after the header in the DOM, so no CSS sibling selector can reach the burger from it. --------------------------------------------------------- */ .mobile-header__menu-triger { position: relative; display: block; width: 24px; height: 18px; cursor: pointer; } .mobile-header__menu-triger span { position: absolute; left: 0; display: block; width: 100%; height: 2px; background: currentcolor; transition: transform .25s ease, opacity .18s ease, top .25s ease; } .mobile-header__menu-triger span:nth-child(1) { top: 0; } .mobile-header__menu-triger span:nth-child(2), .mobile-header__menu-triger span:nth-child(3) { top: 8px; } .mobile-header__menu-triger span:nth-child(4) { top: 16px; } .salt-menu-open .mobile-header__menu-triger span:nth-child(1), .salt-menu-open .mobile-header__menu-triger span:nth-child(4) { opacity: 0; top: 8px; } .salt-menu-open .mobile-header__menu-triger span:nth-child(2) { transform: rotate(45deg); } .salt-menu-open .mobile-header__menu-triger span:nth-child(3) { transform: rotate(-45deg); } .sidebars-container .sidebar-content-static { visibility: visible !important; } .sidebars-container .sidebar { transform: translateX(-102%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); will-change: transform; top: 0; left: 0; box-shadow: 2px 0 18px rgba(0, 0, 0, .18); } .salt-menu-open .sidebars-container .sidebar { transform: translateX(0); } /* backdrop; clicks on it are handled in JS */ .sidebars-container::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .28s ease; z-index: 105; } .salt-menu-open .sidebars-container::after { opacity: 1; pointer-events: auto; } .salt-menu-open { overflow: hidden; } /* --- footer: the wrapper ships light grey while only the inner band is dark, so the payment block and version links sat on white. Make the whole footer the band's colour and lift every child onto it. ----------------- */ #footer { background: #2d2c2c !important; color: rgba(255, 255, 255, .82); } #footer .panel, #footer .footer-menu-list.cs-bg-4--mobile, #footer .footer-static-block, #footer .salt-switch-version, #footer .accordion-css__header, #footer .footer-menu-head { background: transparent !important; } #footer, #footer a, #footer h3, #footer .footer-menu-link, #footer .footer-menu-head, #footer .footer-menu-text, #footer .salt-switch-version a, #footer .footer-static-block { color: rgba(255, 255, 255, .82) !important; } #footer a:hover { color: #fff !important; } #footer .footer-static-block img { max-width: 200px; height: auto; /* dark card artwork on a dark ground needs a light plate */ background: rgba(255, 255, 255, .92); border-radius: 4px; padding: 6px 8px; } #footer .salt-switch-version { padding: 10px 12px; text-align: center; } #footer .footer-menu-head, .site-footer-top-level .footer-menu-head { border-width: 0 !important; } /* --- carousel: real slides, contained height --------------------------- */ .carousel-main--mobile .carousel-main-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .carousel-main--mobile .carousel-main-item { flex: 0 0 100%; scroll-snap-align: start; } .carousel-dots.carousel-mobile-dots { display: flex; justify-content: center; gap: 6px; list-style: none; padding: 8px 0 0; margin: 0; } .carousel-dots-item-inner { display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, .25); } .carousel-dots-item.carousel-dots-selected .carousel-dots-item-inner { background: #c98c6a; } /* --- bottom panel: the theme's icons need room ------------------------- */ .bottom-panel__menu-icon { position: relative; display: inline-block; } .bottom-panel__menu-icon svg { width: 30px; height: 30px; } .bottom-panel__menu-link { padding: 6px 2px 4px; } .bottom-panel__menu-descr { font-size: .625rem; line-height: 1.2; margin-top: 2px; } .mobile-header__cart-count, .mobile-header__wishlist-count { position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 8px; font-size: .625rem; text-align: center; } /* the flex header must span the bar, not shrink to its contents */ .mobile-header { width: 100%; box-sizing: border-box; } /* the theme offsets the slider by -100% for its cloned slides; we render a plain list, so cancel that or the first slide sits off-screen */ .carousel-main--mobile .carousel-main-list--with-clones { left: auto; } .carousel-main--mobile .carousel-main-list { position: relative; left: auto; } /* --- the theme's mobile CSS loads last, so these need !important --------- */ .sidebars-container .sidebar { transform: translateX(-102%) !important; transition: transform .28s cubic-bezier(.4, 0, .2, 1) !important; } html.salt-menu-open .sidebars-container .sidebar { transform: translateX(0) !important; } /* buy button: btn-confirm is yellow in this colour scheme, the brief asks green */ .cart-add.btn-confirm, .mobile-version .cart-add, .salt-m-buy .cart-add { background-color: #3faa35 !important; border-color: #3faa35 !important; color: #fff !important; } .cart-add.btn-confirm:hover, .mobile-version .cart-add:hover { background-color: #369130 !important; } /* --- category listing: two products per row ---------------------------- */ .catalog-view.products-view-mobile-modern-tile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; } .catalog-view__product-item-wrap { min-width: 0; } .catalog-view__product-item-wrap .mobile-product-view-item { height: 100%; } @media (min-width: 640px) { .catalog-view.products-view-mobile-modern-tile { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --- catalogue sort / filter bar (salt-ui.js) --------------------------- */ .salt-filter { padding: 10px 0; margin-bottom: 12px; } .salt-filter__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .8125rem; } .salt-filter input[type="number"] { width: 6rem; } .salt-filter__count { margin-left: auto; white-space: nowrap; } /* the sort/price captions are block-level uppercase labels on mobile; on the desktop bar they sit inline so the whole thing stays one row */ .salt-filter__sort, .salt-filter__price { display: inline-flex; align-items: center; gap: 8px; } .salt-filter__row > .salt-filter__sort .salt-filter__price-label, .salt-filter__row > .salt-filter__price .salt-filter__price-label { display: inline; margin: 0; font-size: inherit; text-transform: none; letter-spacing: normal; color: #6b6b6b; } .salt-filter__field { display: inline-flex; align-items: center; gap: 6px; } .salt-filter__actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } .salt-filter__actions .salt-filter__count { margin-left: 4px; } @media (max-width: 768px) { .salt-filter { padding: 12px 15px; border-bottom: 1px solid rgba(0, 0, 0, .08); } .salt-filter__row { font-size: .875rem; display: grid; grid-template-columns: 1fr auto auto; gap: 8px 10px; align-items: center; } .salt-filter__price { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .salt-filter__price input[type="number"] { flex: 1 1 0; width: auto; min-width: 0; } .salt-filter__actions { grid-column: 1 / -1; } .salt-filter__count { margin: 0; text-align: right; } /* the listing sits edge to edge while the sort bar is inset by 15px */ .catalog-view.products-view-mobile-modern-tile { padding: 0 15px; box-sizing: border-box; } .mobile-product-view-item__name { font-size: .8125rem; line-height: 1.3; } .mobile-product-view-item-price-data { padding: 0 8px 10px; } .mobile-product-view-item .price-current { font-size: 1rem; } .mobile-product-view-item .products-view-buy { padding: 0 .5rem; font-size: .75rem; } } /* The drawer is position:fixed with z-index 110 and covers the whole viewport height, so it painted over the header — the cross was rendered correctly but hidden underneath. Keep the header on top and start the drawer below it. */ .mobile-header { position: sticky; top: 0; z-index: 120; background: #fff; } .salt-menu-open .mobile-header { z-index: 120; } /* Drawer starts one pixel below the header, otherwise the header's bottom border showed through as a grey line across the screen while the menu was open. Same values as the #sidebar rule further down — kept in one place. */ .sidebars-container .sidebar { top: 61px !important; height: calc(var(--min-full-height, 100vh) - 51px) !important; } .sidebars-container::after { top: 61px; } /* the version link reads as body text, not a call to action — match the copyright grey next to it */ .salt-switch-version a, .footer-bottom-level-inner .salt-switch-version a { color: #8c8c8c !important; } .salt-switch-version a:hover { color: #b5b5b5 !important; } #footer .salt-switch-version a { color: rgba(255, 255, 255, .82) !important; } /* --- sort select: the theme leaves native chrome, dress it up ----------- */ .salt-filter select, select.salt-sort { appearance: none; -webkit-appearance: none; padding: .45rem 2rem .45rem .75rem; border: 1px solid #e2e3e4; border-radius: .25rem; background-color: #fff; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .6rem center; font-size: .8125rem; line-height: 1.3; color: #2d2c2c; cursor: pointer; min-width: 12rem; transition: border-color .15s ease, box-shadow .15s ease; } .salt-filter select:hover { border-color: #c9c9c9; } .salt-filter select:focus { outline: none; border-color: #c98c6a; box-shadow: 0 0 0 3px rgba(201, 140, 106, .18); } .salt-filter input[type="number"] { border: 1px solid #e2e3e4; border-radius: .25rem; padding: .45rem .5rem; font-size: .8125rem; } .salt-filter input[type="number"]:focus { outline: none; border-color: #c98c6a; box-shadow: 0 0 0 3px rgba(201, 140, 106, .18); } .salt-filter .btn { border-radius: .25rem; } /* --- home page product blocks as carousels ----------------------------- */ .salt-carousel { position: relative; } .salt-carousel .products-view.products-view-tile { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0; } .salt-carousel .products-view.products-view-tile::-webkit-scrollbar { display: none; } .salt-carousel .products-view-block { scroll-snap-align: start; flex: 0 0 20% !important; max-width: 20% !important; } .salt-carousel__nav { position: absolute; top: 40%; z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e2e3e4; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: #555; transition: opacity .2s ease; } .salt-carousel__nav--prev { left: -18px; } .salt-carousel__nav--next { right: -18px; } .salt-carousel__nav[disabled] { opacity: .25; cursor: default; } @media (max-width: 1024px) { .salt-carousel .products-view-block { flex-basis: 33.333% !important; max-width: 33.333% !important; } .salt-carousel__nav--prev { left: 0; } .salt-carousel__nav--next { right: 0; } } @media (max-width: 640px) { .salt-carousel .products-view-block { flex-basis: 60% !important; max-width: 60% !important; } } /* --- lightbox ---------------------------------------------------------- */ .salt-lightbox { position: fixed; inset: 0; z-index: 2147483002; background: rgba(0, 0, 0, .88); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease; } .salt-lightbox.is-open { opacity: 1; } .salt-lightbox__img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 4px; } .salt-lightbox__btn { position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; } .salt-lightbox__btn:hover { background: rgba(255, 255, 255, .24); } .salt-lightbox__close { top: 18px; right: 18px; } .salt-lightbox__prev { left: 18px; top: 50%; transform: translateY(-50%); } .salt-lightbox__next { right: 18px; top: 50%; transform: translateY(-50%); } .salt-lightbox__counter { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .75); font-size: .8125rem; } .gallery-picture-link, .salt-m-gallery__main, .gallery-photos-item a { cursor: zoom-in; } /* --- one-click order modal --------------------------------------------- */ .salt-oneclick { position: fixed; inset: 0; z-index: 2147483003; background: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; padding: 16px; } .salt-oneclick__box { background: #fff; border-radius: 6px; padding: 22px; width: 380px; max-width: 100%; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); } .salt-oneclick__box h3 { margin: 0 0 6px; font-size: 1.125rem; } .salt-oneclick__box input { width: 100%; box-sizing: border-box; margin: 6px 0 10px; padding: .55rem .7rem; border: 1px solid #e2e3e4; border-radius: .25rem; } .salt-oneclick__msg { min-height: 18px; font-size: .8125rem; margin-bottom: 8px; } .salt-oneclick__row { display: flex; gap: 8px; } .salt-oneclick__row .btn { flex: 1 1 auto; } /* --- compare table ------------------------------------------------------ */ .salt-cmp { overflow-x: auto; } .salt-cmp__table { border-collapse: collapse; width: 100%; } .salt-cmp__table th, .salt-cmp__table td { padding: 12px 10px; text-align: left; vertical-align: top; } .salt-cmp__head { min-width: 190px; border-bottom: 1px solid #ececec; } .salt-cmp__head img { max-width: 120px; height: auto; display: block; margin-bottom: 8px; } .salt-cmp__actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .salt-cmp__label { min-width: 190px; color: #6b6b6b; font-weight: 400; } .salt-cmp__row { border-top: 1px solid #f0f0f0; } .salt-cmp__row:nth-child(odd) { background: #fafafa; } .salt-cmp__note { margin-bottom: 14px; color: #6b6b6b; } .salt-cmp__foot { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; } .salt-cmp__diff { font-size: .875rem; color: #6b6b6b; cursor: pointer; } .salt-cmp--diff .salt-cmp__row.is-same { display: none; } /* --- home hero ---------------------------------------------------------- */ /* The slides are product shots, not the 865x400 banners the theme expects, so they blew the block up to 800px. Cap the height (~1.5x smaller) and let the photo sit inside instead of being stretched. */ .carousel-main .carousel-inner { max-height: 533px; } .carousel-main .carousel-main-link { display: block; height: 533px; background: #faf7f5; } .carousel-main .carousel-main-link img { width: 100% !important; height: 533px !important; object-fit: contain; object-position: center; } @media (max-width: 767px) { .carousel-main .carousel-inner, .carousel-main .carousel-main-link, .carousel-main .carousel-main-link img { height: 320px; max-height: 320px; } .carousel-main .carousel-main-link img { height: 320px !important; } } /* --- "С этим товаром покупают" on mobile -------------------------------- */ /* The product page ships a different CSS bundle than the home page, where the same block scrolls sideways — pin the horizontal layout so both match. */ html.mobile-version .mainpage-products--best .mainpage-products__content, .is-mobile .mainpage-products--best .mainpage-products__content { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } html.mobile-version .mainpage-products--best .mainpage-products__content > *, .is-mobile .mainpage-products--best .mainpage-products__content > * { flex: 0 0 45% !important; max-width: 45% !important; scroll-snap-align: start; } .mainpage-products--best .mainpage-products__header-title { font-size: 1rem; font-weight: 700; padding: 14px 14px 8px; } /* the block titles sit tight above their carousel — no rule, no gap */ .products-specials-header { margin: 0 !important; border-bottom: 0 !important; } /* --- block titles ------------------------------------------------------- */ .products-specials-header a { text-transform: uppercase; font-size: 1.125rem; font-weight: 500; padding-left: 1.5rem; position: relative; line-height: 1; margin-top: 0.85rem; /* the lazy-loaded theme sheet sets 20px here and would win on specificity */ margin-bottom: 0.6rem !important; } /* --- "Читать далее" ----------------------------------------------------- */ /* Green like the site accent, underlined with a thin rule of the same colour. The theme's own dotted border is replaced, not layered on top. */ .link-dotted:not(.gallery-zoom) { color: #4ea41a !important; font-size: .9375rem; font-weight: 500; display: inline-block; line-height: 1.3; margin-top: 5px; text-decoration: none !important; border-bottom: 1px solid #4ea41a !important; padding-bottom: 1px; } /* trailing arrow, drawn in CSS so it inherits the link colour */ .link-dotted:not(.gallery-zoom)::after { content: ""; display: inline-block; width: .34em; height: .34em; margin-left: .45em; vertical-align: baseline; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-.12em) rotate(45deg); transition: transform .15s ease; } .link-dotted:not(.gallery-zoom):hover::after, .link-dotted:not(.gallery-zoom):focus::after { transform: translateY(-.12em) translateX(.15em) rotate(45deg); } .link-dotted:not(.gallery-zoom):hover, .link-dotted:not(.gallery-zoom):focus { color: #3d8514 !important; border-bottom-color: #3d8514 !important; } /* --- "Вернуться к новостям" --------------------------------------------- */ /* Same treatment as "Читать далее", with the chevron mirrored to point back. */ .link-return { color: #4ea41a !important; font-weight: 500; display: inline-block; line-height: 1.3; text-decoration: none !important; border-bottom: 1px solid #4ea41a !important; padding-bottom: 1px; } .link-return::before { content: ""; display: inline-block; width: .34em; height: .34em; margin-right: .45em; vertical-align: baseline; border-bottom: 1.5px solid currentColor; border-left: 1.5px solid currentColor; transform: translateY(-.12em) rotate(45deg); transition: transform .15s ease; } .link-return:hover, .link-return:focus { color: #3d8514 !important; border-bottom-color: #3d8514 !important; } .link-return:hover::before, .link-return:focus::before { transform: translateY(-.12em) translateX(-.15em) rotate(45deg); } /* --- contacts map ------------------------------------------------------- */ /* The map now loads on its own, so the framed placeholder box is gone too. */ .salt-map { border: 0 !important; padding: 0 !important; } .salt-map iframe { display: block; border: 0 !important; width: 100%; max-width: 100%; } /* the detected city is the value next to "Ваш город:" — it was lighter than its own label, which read as disabled */ .static-block-email-header [data-zone-current] { color: #4f4e4e !important; } /* toolbar item: no dividers, box tightened */ .toolbar-top-item { border-left: 0 !important; border-right: 0 !important; padding: 0 !important; font-size: .8125rem; /* the theme's own toolbar rule wins on specificity without this */ height: 0.6rem !important; } .static-block-email-header a:hover [data-zone-current] { color: #2d2c2c !important; } /* --- PhotoSwipe --------------------------------------------------------- */ /* The theme applies max-width/max-height:100% to every img. Inside the viewer the parent has no intrinsic height, so that collapsed the slide to 0px — PhotoSwipe sizes its images by inline width/height and must keep them. */ .pswp img, .pswp__img { max-width: none !important; max-height: none !important; width: auto; height: auto; } .pswp { --pswp-bg: #101010; z-index: 2147483040 !important; } .pswp__bg { background: #101010 !important; } .pswp__counter { opacity: .75; } /* Keep PhotoSwipe's own icon palette: a white glyph with the dark bars of the zoom "+" showing through it. The theme's global svg rules must not repaint these, but the two colours have to stay distinct. */ .pswp { --pswp-icon-color: #fff; --pswp-icon-color-secondary: #4f4f4f; } .pswp__icn { fill: var(--pswp-icon-color) !important; } .pswp__icn-shadow { fill: none !important; } .pswp__zoom-icn-bar-h, .pswp__zoom-icn-bar-v { fill: var(--pswp-icon-color-secondary) !important; } /* --- header navigation row ---------------------------------------------- */ /* The catalogue button (col-xs-3) and the main menu (col-xs-9) add up to exactly the row width once the container is pinned at its 1320px maximum. Sub-pixel rounding then tipped the menu onto a second line, where it fell outside the green bar: the navigation looked missing and left a 48px empty strip above the breadcrumbs. The pair simply must not wrap. Deliberately left outside any media query: these two columns are 25% + 75% of the same row at every width, so no viewport wants a second line — and no breakpoint boundary is introduced that could leave a fractional-pixel gap. */ .row.menu-block { flex-wrap: nowrap !important; } .row.menu-block > .site-body-main { min-width: 0; } /* --- "Увеличить" over the product photo --------------------------------- */ /* The theme parks this button in a row below the gallery and leaves its icon slot empty (the icon font has no glyph for it here). Move it onto the photo and draw the magnifier inline, so it needs no webfont. */ .gallery-picture-inner { position: relative; } /* salt-ui.js moves the button inside .gallery-picture-inner; the row it came from is left empty and must not keep taking vertical space */ .gallery-picture-inner .details-photos__right { position: absolute; top: 10px; right: 10px; z-index: 3; margin: 0 !important; } .details-additional-graphics:empty { display: none; } .gallery-zoom.btn-link { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border: 0 !important; border-radius: .25rem; background: rgba(0, 0, 0, .5); color: #fff !important; font-size: .8125rem; line-height: 1.2; text-decoration: none !important; cursor: zoom-in; transition: background .15s ease; } .gallery-zoom.btn-link:hover, .gallery-zoom.btn-link:focus { background: rgba(0, 0, 0, .72); color: #fff !important; } /* Magnifier drawn inline — the icon font has no glyph for it. The theme's .icon-search-before-abs rule still applies transform: translateY(-8px) here (it was meant for an absolutely positioned icon), which lifted the glyph above the label; `top` pushes it back onto the text's line. */ .gallery-zoom.btn-link::before { content: ""; position: relative; display: block; width: 16px; height: 16px; top: 8.3px; flex: 0 0 16px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .gallery-zoom.btn-link::after { content: none !important; } /* --- product tabs ------------------------------------------------------- */ /* The line under the selected tab is not the tab's own border — it is the top border of .tabs-content running beneath the whole header row. Pull the active tab down over it so the rule is interrupted under it, the way a tab strip is meant to read. */ .details-tabs .tabs-headers .tabs-header-item.tabs-header-active { position: relative; z-index: 1; } /* Masked with an overlay rather than by padding the tab: the theme's own padding-bottom sets the tab height, and overriding it made the tab 9px shorter and opened a gap above the content. */ .details-tabs .tabs-headers .tabs-header-item.tabs-header-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #fff; } /* --- news teasers ------------------------------------------------------- */ /* The headline came out at 12px while its date sat at 14px, so the date read as the more important line. Restore the order and give the title room. */ .news-block-title, .news-block-title a { font-size: .9375rem; line-height: 1.35; font-weight: 500; } .news-block-title { margin-bottom: .5rem; } /* scoped to the date that follows a headline — .subheader is used elsewhere */ .news-block-title + .subheader { font-size: .75rem; line-height: 1.2; } /* --- header search ------------------------------------------------------ */ /* 12px reads small in a 40px-tall field. The input itself is bumped too, so the typed query does not end up smaller than its own placeholder. */ .site-head-search-input { font-size: .875rem !important; } .site-head-search-input::placeholder { font-size: .875rem; } /* The field is sized by its line-height plus padding and the button by its own, so they drifted apart (42.3 vs 40.2px) as soon as the font grew. Pin both to the same height and centre the icon instead. */ .site-head-search-input, .site-head-search-btn { height: 42px !important; box-sizing: border-box; } .site-head-search-btn { display: inline-flex !important; align-items: center; justify-content: center; padding-top: 0 !important; padding-bottom: 0 !important; } /* --- product buy row ---------------------------------------------------- */ /* "Купить в один клик" is now the last item of the payment row, next to the wishlist and compare buttons rather than under the cart button. */ .details-row.details-payment { align-items: center; flex-wrap: wrap; } /* The theme pins this button with position:absolute; bottom:8px, so moving it in the DOM alone kept it parked under the cart button. Put it back in flow to let it take its place at the end of the row. */ .details-row.details-payment > .details-payment-item.details-payment-oneclick-btn { position: static !important; margin-left: 1rem; align-self: center; } .details-payment-inline { display: inline-block !important; margin-bottom: 0 !important; vertical-align: top !important; } /* --- search result cards ------------------------------------------------ */ /* Cards are rendered client-side by salt-ui.js from the theme's classes, but without the theme's grid wrapper they inherit no alignment of their own. */ /* The theme's .row carries -10px side margins that a .container's padding normally absorbs. Inside .staticpage-content there is no such padding, so the row ran 20px wider than its box and .staticpage-content grew a scrollbar. */ [data-salt-page="search"] .row.products-view { margin-left: 0; margin-right: 0; } [data-salt-page="search"] .products-view-name { padding-left: .75rem; padding-right: .75rem; } [data-salt-page="search"] .products-view-price-block { text-align: center; } [data-salt-page="search"] .price-current { margin-top: 10px; } [data-salt-page="search"] .products-view-price, [data-salt-page="search"] .products-view-price .price, [data-salt-page="search"] .products-view-price .price-current { justify-content: center; } /* --- cart & checkout modal ---------------------------------------------- */ .salt-cart__foot { display: flex; gap: 12px; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-top: 4px; } .salt-done h2 { margin: 0 0 12px; } .salt-modal { position: fixed; inset: 0; z-index: 2147483030; background: rgba(30, 28, 27, .55); display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; opacity: 0; transition: opacity .18s ease; } .salt-modal.is-open { opacity: 1; } .salt-modal__box { position: relative; background: #fff; border-radius: 6px; padding: 26px 28px 22px; width: 420px; max-width: 100%; box-shadow: 0 18px 60px rgba(0, 0, 0, .28); transform: translateY(10px); transition: transform .18s ease; } .salt-modal.is-open .salt-modal__box { transform: none; } .salt-modal__box--wide { width: 620px; } .salt-modal__close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; background: none; font-size: 26px; line-height: 1; color: #9a9a9a; cursor: pointer; border-radius: 50%; } .salt-modal__close:hover { color: #2d2c2c; background: #f2f2f2; } .salt-modal__title { margin: 0 0 6px; font-size: 1.375rem; line-height: 1.2; padding-right: 28px; } .salt-modal__summary { font-size: .875rem; color: #6b6b6b; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #ececec; } .salt-modal__note { margin-left: 8px; color: #9a9a9a; } .salt-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; } .salt-modal__grid > label { display: block; font-size: .8125rem; color: #6b6b6b; } .salt-modal__wide { grid-column: 1 / -1; } .salt-modal__grid input, .salt-modal__grid textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; padding: .55rem .7rem; border: 1px solid #e2e3e4; border-radius: .25rem; font-size: .875rem; color: #2d2c2c; font-family: inherit; } .salt-modal__grid input:focus, .salt-modal__grid textarea:focus { outline: none; border-color: #c98c6a; box-shadow: 0 0 0 3px rgba(201, 140, 106, .18); } /* the theme's .textarea-middle forces ~155px, which stretched the dialog */ .salt-modal__grid textarea { resize: vertical; height: auto !important; min-height: 74px; } .salt-modal__msg { min-height: 20px; font-size: .8125rem; margin: 12px 0 4px; } .salt-modal__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .salt-modal__fine { margin: 14px 0 0; font-size: .75rem; color: #9a9a9a; line-height: 1.45; } @media (max-width: 560px) { .salt-modal { padding: 12px; align-items: flex-start; } .salt-modal__box { padding: 22px 18px 18px; } .salt-modal__grid { grid-template-columns: 1fr; } .salt-modal__actions .btn { width: 100%; } } /* --- mobile home -------------------------------------------------------- */ html.mobile-version .site-head, html.mobile-version .mobile-header, .is-mobile .site-head, .is-mobile .mobile-header { height: 60px !important; } /* hero slider: native scroll-snap track, so swiping works without a library. The theme parked the row at left:-100% for its Angular clone trick. */ .salt-hero-track { left: auto !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .salt-hero-track::-webkit-scrollbar { display: none; } .salt-hero-track .carousel-main-item { scroll-snap-align: start; flex: 0 0 100%; } .carousel-dots-item { cursor: pointer; } /* section headers: title and "Смотреть все" on one line, the title giving way first when the 25px gap can no longer be kept */ .mainpage-products__header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 25px; align-items: center; /* the theme's own 10px/15px padding wins without this */ padding: 2em 1em 0 1em !important; } .mainpage-products__header-title { /* basis 0, not auto: flexbox decides whether to wrap from the unflexed size, so a long title jumped to a second line before it ever shrank */ flex: 1 1 0; min-width: 0; } .mainpage-products__header-title, .mainpage-products__header-title a { text-align: left; } .mainpage-products__header-title a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mainpage-products__all { flex: 0 0 auto; } /* --- mobile news teasers ------------------------------------------------ */ .salt-m-news { display: flex; flex-direction: column; gap: 14px; padding: 14px 14px 0; } .salt-m-news__item { display: flex; gap: 12px; border-radius: 5px; overflow: hidden; } .salt-m-news__pic { flex: 0 0 108px; display: block; } .salt-m-news__pic img { width: 108px; height: 100%; min-height: 92px; object-fit: cover; display: block; } .salt-m-news__body { padding: 10px 12px 12px 0; min-width: 0; } .salt-m-news__title { font-size: .9375rem; font-weight: 500; line-height: 1.3; margin-bottom: .35rem; } .salt-m-news__date { font-size: .75rem; margin-bottom: .35rem; } .salt-m-news__text { font-size: .8125rem; line-height: 1.4; margin-bottom: .45rem; } /* --- mobile closing text ------------------------------------------------ */ .salt-m-seo { padding: 24px 14px 8px; } .salt-m-seo h1 { font-size: 1.125rem; line-height: 1.3; margin: 0 0 12px; } .salt-m-seo p { font-size: .8125rem; line-height: 1.5; margin: 0 0 10px; } /* The burger's state checkbox is absolutely positioned but sits after the footer in the DOM, so it stretched the page ~70px past the footer and left a white strip under it. Menu state is driven by a class on , so the input only needs to stay out of the way. */ html.mobile-version .sidebar-state-menu__input, .is-mobile .sidebar-state-menu__input, .sidebar-state-menu__input { position: absolute !important; top: 0 !important; left: 0 !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; } /* The bottom toolbar is position:sticky, so it reserved 72px of flow space *and* got a padding-bottom reservation on — 128px of blank page under the footer. Pin it like the fixed toolbar it visually is and keep a single reservation matching its height. */ .bottom-panel { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 115; } /* --- mobile category grid ----------------------------------------------- */ /* The theme lays these cards out as a flex row of two, so each card carries flex-basis/max-width: 50%. The list here is a 2-column grid, so that 50% applied *inside* the cell and every card came out half its column — 77px of a 154px slot. Inside the grid a card must fill its cell. */ .catalog-view.products-view-mobile-modern-tile .mobile-product-view-item, .catalog-view.products-view-mobile-modern-tile .catalog-view__product-item-wrap > * { flex-basis: 100% !important; max-width: 100% !important; width: 100% !important; } /* --- mobile category chips ---------------------------------------------- */ /* Was a 2564px horizontal strip: nine categories in one line, most of them off-screen. Stacked into a 200px box that scrolls vertically instead. */ .categories-root__items { display: block !important; box-sizing: border-box; /* keep the box itself at 200px, padding in */ max-height: 200px; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 10px 15px !important; scrollbar-width: thin; } /* The theme declares ::-webkit-scrollbar { width: 100px; height: 2px } here — harmless while the strip only scrolled sideways, but as a vertical scroller that 100px ate a third of the row (clientWidth 223 of 322). */ .categories-root__items::-webkit-scrollbar { width: 6px !important; height: 6px !important; } .categories-root__items::-webkit-scrollbar-thumb { background-color: #bfbfbf; border-radius: 3px; } .categories-root__item { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 0 8px !important; box-sizing: border-box; } .categories-root__item:last-child { margin-bottom: 0 !important; } .categories-root__item-name { white-space: normal; overflow: visible; text-overflow: clip; } /* --- floating Telegram bubble (carried over from the old site) ----------- */ .salt-tg { position: fixed; right: 60px; bottom: 60px; z-index: 2147483000; display: flex; align-items: center; padding: 7px; background: #eee; border-radius: 25px; box-shadow: 0 4px 18px rgba(0, 0, 0, .18); } .salt-tg__text { margin-right: 10px; padding: 10px; background: #262626; color: #fff; border-radius: 25px; white-space: nowrap; font-size: 14px; line-height: 20px; align-self: center; } .salt-tg:hover .salt-tg__text { background: #000; transition-duration: 300ms; } .salt-tg__link { display: block; line-height: 0; } .salt-tg__link img { width: 40px; height: 40px; display: block; } /* clear of the mobile toolbar */ @media (max-width: 640px) { .salt-tg { right: 12px; bottom: 84px; padding: 5px; } .salt-tg__text { font-size: 12px; line-height: 16px; padding: 7px 10px; margin-right: 7px; } } html.mobile-version .salt-tg, .is-mobile .salt-tg { bottom: 84px; right: 12px; } /* --- recently viewed ---------------------------------------------------- */ .salt-m-recent[hidden] { display: none !important; } /* The block inherits the theme's grey cs-t-9 on its heading (the other section titles are links and get their own colour), so it read lighter than its own content. Names and prices were already #2d2c2c. */ .salt-m-recent, .salt-m-recent .mainpage-products__header-title, .salt-m-recent__name, .salt-m-recent__price { color: #2d2c2c; } .salt-m-recent__list { display: flex; gap: 10px; overflow-x: auto; padding: 0; scroll-snap-type: x proximity; scrollbar-width: none; } .salt-m-recent__list::-webkit-scrollbar { display: none; } .salt-m-recent__item { flex: 0 0 157px; box-sizing: border-box; padding: 10px 13px; scroll-snap-align: start; display: block; text-decoration: none; color: inherit; } .salt-m-recent__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 5px; display: block; background: #f6f6f6; } .salt-m-recent__name { display: block; font-size: .75rem; line-height: 1.3; margin: 6px 0 2px; max-height: 2.6em; overflow: hidden; } .salt-m-recent__price { display: block; font-size: .8125rem; font-weight: 700; } /* --- wholesale block ---------------------------------------------------- */ .salt-m-opt { margin: 24px 0 4px 0; padding: 28px 16px; border: 1px solid #e6e0dc; border-radius: 6px; background: #fbf8f6; } .salt-m-opt__head { font-size: 1.0625rem; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; } .salt-m-opt__lead { font-size: .8125rem; line-height: 1.45; color: #6b6b6b; margin: 0 0 12px; } .salt-m-opt__table { border-top: 1px solid #eae3de; margin-bottom: 14px; } .salt-m-opt__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eae3de; font-size: .875rem; } .salt-m-opt__row span { color: #6b6b6b; } .salt-m-opt__actions { display: flex; gap: 8px; flex-wrap: wrap; } .salt-m-opt__actions .btn { flex: 1 1 auto; } .salt-m-opt__note { margin-top: 12px; font-size: .75rem; color: #9a9a9a; } /* --- counter badges ----------------------------------------------------- */ /* The theme's badge rules name only .mobile-header__cart-count and __wishlist-count, so the compare badge — renamed to its own class — lost both the absolute circle styling and the top placement, and sat inline under the icon at 6x12px. Both rules are mirrored for it here. */ .mobile-header__compare-count { position: absolute; border-radius: 50%; font-size: 8px; min-width: 16px; min-height: 16px; display: flex; justify-content: center; align-items: center; top: -6px; right: -6px; padding: 0 2px; box-sizing: border-box; } .bottom-panel__menu-link .mobile-header__compare-count { top: -2px; right: 10%; font-size: 10px; min-width: 17px; min-height: 17px; } /* One yellow circle everywhere: the cart badge used to be dark while wishlist and compare were yellow. Digits are dark rather than the theme's white — white on #fed303 fails contrast at this size. */ .toolbar-bottom-count, .mobile-header__cart-count, .mobile-header__wishlist-count, .mobile-header__compare-count { background-color: #fed303 !important; } /* The theme pins the digits white with !important from a two-class selector (.bottom-panel__menu-link .mobile-header__cart-count) in a sheet that loads after ours, so equal specificity loses on order. The class is repeated to outweigh it without depending on the surrounding markup. */ .toolbar-bottom-count.toolbar-bottom-count.toolbar-bottom-count, .mobile-header__cart-count.mobile-header__cart-count.mobile-header__cart-count, .mobile-header__wishlist-count.mobile-header__wishlist-count.mobile-header__wishlist-count, .mobile-header__compare-count.mobile-header__compare-count.mobile-header__compare-count { color: #2d2c2c !important; } /* --- mobile catalogue filter -------------------------------------------- */ /* One card holding sort and price, replacing the theme's display:table panel whose overlaid sort label collided with our buttons. */ .catalog-sort-pnl[hidden], .catalog-filter-trigger-wrap--mobile[hidden] { display: none !important; } html.mobile-version .salt-filter, .is-mobile .salt-filter { display: block; padding: 14px 15px 16px; } html.mobile-version .salt-filter__row, .is-mobile .salt-filter__row { display: flex; flex-direction: column; align-items: stretch; /* the theme centres this area, we want full width */ gap: 14px; text-align: left; } .salt-filter__price-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; color: #9a9a9a; margin-bottom: 6px; } html.mobile-version .salt-filter__sort, .is-mobile .salt-filter__sort { display: block; } html.mobile-version .salt-filter__sort select, .is-mobile .salt-filter__sort select { width: 100%; min-width: 0; } html.mobile-version .salt-filter__price, .is-mobile .salt-filter__price { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } html.mobile-version .salt-filter__price .salt-filter__price-label, .is-mobile .salt-filter__price .salt-filter__price-label { flex: 1 1 100%; margin-bottom: 0; } /* Mobile only: on the desktop bar these fields sit in an inline-flex row sized to content, so flex-basis 0 collapsed them to zero width and the "от" and "до" captions ended up on top of each other. */ html.mobile-version .salt-filter__field, .is-mobile .salt-filter__field { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: #6b6b6b; } html.mobile-version .salt-filter__field input, .is-mobile .salt-filter__field input { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; height: 38px; padding: 0 .6rem; border: 1px solid #e2e3e4; border-radius: .25rem; font-size: .875rem; color: #2d2c2c; } html.mobile-version .salt-filter__field input:focus, .is-mobile .salt-filter__field input:focus { outline: none; border-color: #c98c6a; box-shadow: 0 0 0 3px rgba(201, 140, 106, .18); } /* buttons share one row, the primary one carrying the accent */ .salt-filter__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } html.mobile-version .salt-filter__actions .btn, .is-mobile .salt-filter__actions .btn { flex: 1 1 0; min-width: 0; } html.mobile-version .salt-filter__actions .salt-filter__count, .is-mobile .salt-filter__actions .salt-filter__count { flex: 1 1 100%; } html.mobile-version .salt-filter__apply, html.mobile-version .salt-filter__reset, .is-mobile .salt-filter__apply, .is-mobile .salt-filter__reset { height: 40px; margin: 0; border-radius: .25rem; font-size: .875rem; } html.mobile-version .salt-filter__apply, .is-mobile .salt-filter__apply { background: #fed303; border-color: #fed303; color: #2d2c2c; font-weight: 500; } html.mobile-version .salt-filter__count, .is-mobile .salt-filter__count { font-size: .75rem; color: #9a9a9a; } /* --- product tabs: equal halves ----------------------------------------- */ /* The theme floats these items and sizes them by their label, so on a narrow screen "Описание" (139px) and "Характеристики" (206px) did not fit 292px and the second dropped to its own line. Split the row evenly instead. */ .details-tabs .tabs-headers { display: flex; flex-wrap: nowrap; width: 100%; } .details-tabs .tabs-headers .tabs-header-item { float: none; flex: 1 1 0; min-width: 0; margin: 0; text-align: center; } .details-tabs .tabs-headers .tabs-header-item-link { display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 420px) { .details-tabs .tabs-headers .tabs-header-item-link { font-size: .8125rem; } } /* --- "С этим товаром покупают": no rule under the heading ---------------- */ /* Each card carries border-top: 1px #e2e3e4, and since they all start at the heading's bottom edge those borders merged into one line across the block. */ .mainpage-products--best .mobile-product-view-item { border-top: 0 !important; } /* --- search results summary --------------------------------------------- */ /* On the mobile search page the host has no gutter, so this line ran edge to edge while every other caption on the page is inset by 15px. */ html.mobile-version .salt-search-summary, .is-mobile .salt-search-summary, html.mobile-version [data-salt-page="wishlist"], .is-mobile [data-salt-page="wishlist"], html.mobile-version [data-salt-page="compare"], .is-mobile [data-salt-page="compare"], html.mobile-version [data-salt-page="cart"], .is-mobile [data-salt-page="cart"] { padding-left: 15px; padding-right: 15px; } /* the tables inside them scroll on their own, so the gutter must not clip them */ html.mobile-version [data-salt-page] .salt-cmp, .is-mobile [data-salt-page] .salt-cmp { margin: 0 -15px; padding: 0 15px; } /* --- hero carousel controls --------------------------------------------- */ /* Safety net for the theme's lazy-load marker: it caps the image at 1px and salt-ui.js strips the class, but a slide added later must not collapse. */ .carousel-main .carousel-placeholder { max-width: 100% !important; max-height: none !important; } .carousel-main { position: relative; } /* arrows sit inside the block, one on each side, vertically centred */ .salt-hero-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .82); box-shadow: 0 2px 10px rgba(0, 0, 0, .16); color: #2d2c2c; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; } .salt-hero-nav:hover { background: #fff; } .salt-hero-nav--prev { left: 12px; } .salt-hero-nav--next { right: 12px; } /* dots inside the block, along its bottom edge */ .salt-hero-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 4; display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .salt-hero-dots .carousel-dots-item { width: 9px; height: 9px; cursor: pointer; } .salt-hero-dots .carousel-dots-item-inner { display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .65); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); } .salt-hero-dots .carousel-dots-selected .carousel-dots-item-inner { background: #fed303; } @media (max-width: 640px) { .salt-hero-nav { width: 32px; height: 32px; font-size: 18px; } .salt-hero-nav--prev { left: 6px; } .salt-hero-nav--next { right: 6px; } } /* --- burger drawer ------------------------------------------------------- */ /* Sits just below the header instead of butting against it, which showed the header's bottom border as a grey line across the screen. */ #sidebar, #sidebar_overlay, .sidebar, .sidebar_overlay { top: 61px !important; height: calc(var(--min-full-height, 100vh) - 51px) !important; } /* --- page scrollbar ----------------------------------------------------- */ /* Only the window scrollbar: styling it through the universal selector also repainted every scrollable block (carousels, filter lists), which is not what the brief asked for. */ html { scrollbar-width: thin; scrollbar-color: #c2ada1 #f3efec; } /* scrollbar-color is an inherited property, so setting it on the root leaked into every scrollable block — and a block with an explicit scrollbar-color is drawn by Chrome in the thick "standard" style instead of the thin one. Descendants are reset back to the browser default. */ body, body * { scrollbar-color: auto; scrollbar-width: auto; } html::-webkit-scrollbar { width: 12px; } html::-webkit-scrollbar-track { background: #f3efec; } html::-webkit-scrollbar-thumb { background: #c2ada1; border: 3px solid #f3efec; border-radius: 6px; } html::-webkit-scrollbar-thumb:hover { background: #a98d7e; } /* --- catalogue sort block ------------------------------------------------ */ /* The theme pins it under the header while the listing scrolls past. */ .catalog-sort-block { position: static !important; top: auto !important; } /* --- thin scrollbars inside UI blocks ----------------------------------- */ /* The site palette, but kept slim: a ::-webkit-scrollbar width turns Chrome's overlay bar into a permanent one, so these stay at 6px instead of the 12px used for the page itself. */ .catalog-sort-block, .catalog-sort-block *, .salt-filter, .salt-filter *, .salt-cmp, .salt-modal__box, .details-tabs-properties, .mobile-details-modules { scrollbar-width: thin; scrollbar-color: #c2ada1 #f3efec; } .catalog-sort-block ::-webkit-scrollbar, .salt-filter ::-webkit-scrollbar, .salt-cmp::-webkit-scrollbar, .salt-modal__box::-webkit-scrollbar, .details-tabs-properties::-webkit-scrollbar, .mobile-details-modules::-webkit-scrollbar { width: 6px; height: 6px; } .catalog-sort-block ::-webkit-scrollbar-track, .salt-filter ::-webkit-scrollbar-track, .salt-cmp::-webkit-scrollbar-track, .salt-modal__box::-webkit-scrollbar-track, .details-tabs-properties::-webkit-scrollbar-track, .mobile-details-modules::-webkit-scrollbar-track { background: #f3efec; } .catalog-sort-block ::-webkit-scrollbar-thumb, .salt-filter ::-webkit-scrollbar-thumb, .salt-cmp::-webkit-scrollbar-thumb, .salt-modal__box::-webkit-scrollbar-thumb, .details-tabs-properties::-webkit-scrollbar-thumb, .mobile-details-modules::-webkit-scrollbar-thumb { background: #c2ada1; border-radius: 3px; } /* --- breadcrumbs: same scrollbar as the .scroll-always-visible product row */ /* .breadcrumbs__inner already scrolls sideways (overflow-x:auto); on mobile it fell back to the default fat bar. Copy the homepage carousel bar 1:1. */ .breadcrumbs__inner::-webkit-scrollbar { -webkit-appearance: none; appearance: none; width: 100px; height: 2px; } .breadcrumbs__inner::-webkit-scrollbar-thumb { background-color: #bfbfbf; box-shadow: 0 0 1px #ffffff80; } /* --- mobile sidebar submenu: open in place, not as an off-screen flyout ---- The mobile bundle positions .menu__submenu absolute at left:100% (a desktop flyout), so when the JS toggles it to display:block on tap it lands off the right edge — the row expands but its links are invisible ("empty dropdown"). Scope the reset to the mobile sidebar submenu only so desktop hover menus keep their flyout positioning. */ [data-salt-mobile-submenu] { position: static !important; left: auto !important; top: auto !important; width: auto !important; padding-left: 10px; }