/* PP Neue Montreal — текстовый шрифт сайта. В репозитории лежат веб-версии из
купленного набора: woff2 и woff, как их отдал поставщик. Раньше здесь были
файлы, сконвертированные нами из набора «для личного использования», — их
больше нет.
Начертание Light отвечает и за 300, и за 400: тема набрана преимущественно
четырёхсотым, и без этого обычный текст шёл бы Regular'ом вместо светлого. */
@font-face { font-family: 'PP Neue Montreal'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/PPNeueMontreal-Light.woff2') format('woff2'), url('fonts/PPNeueMontreal-Light.woff') format('woff'); }
@font-face { font-family: 'PP Neue Montreal'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/PPNeueMontreal-Light.woff2') format('woff2'), url('fonts/PPNeueMontreal-Light.woff') format('woff'); }
@font-face { font-family: 'PP Neue Montreal'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/PPNeueMontreal-LightItalic.woff2') format('woff2'), url('fonts/PPNeueMontreal-LightItalic.woff') format('woff'); }
@font-face { font-family: 'PP Neue Montreal'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/PPNeueMontreal-LightItalic.woff2') format('woff2'), url('fonts/PPNeueMontreal-LightItalic.woff') format('woff'); }
/* Тяжёлых начертаний у гарнитуры не куплено: здесь были Regular и Semibold,
сконвертированные из набора «для личного использования». Файлы удалены, а
вместе с ними и объявления — веса 500, 600 и 700 браузер теперь подделывает
сам там, где это разрешено (см. fonts-light-faux.css). */
@font-face { font-family: 'Prata'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Prata-Regular-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Prata'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Prata-Regular-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Inter-Light-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Inter-Light-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter-Regular-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter-Regular-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter-Medium-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter-Medium-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter-SemiBold-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter-SemiBold-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+2116; }
:root {
/* Стек в одном месте: шрифт меняется правкой одной строки, а не сотни.
Inter остаётся запасным на случай, если основной не отдался. */
--pepfer-sans: 'PP Neue Montreal', 'Inter', system-ui, sans-serif;
--pepfer-serif: 'Prata', Georgia, serif;
--pepfer-ink: #201B14;
--pepfer-muted: #6E6353;
/* Neutral, not warm beige: on a white canvas a beige rule reads as dirty. */
--pepfer-line: #E4E4E4;
/* White canvas: product and editorial photography is shot on pure #FFFFFF
(verified by sampling image corners), so any warmer page colour draws a
visible rectangle around every photo. */
--pepfer-paper: #FFFFFF;
--pepfer-soft: #FCFBF8;
--pepfer-accent: #E14E1D;
--pepfer-accent-deep: #9A3413;
/* Must match .container padding in style.css; the inset dividers key off it. */
--pepfer-gutter: 12px;
}
body { color: var(--pepfer-ink); background: var(--pepfer-paper); }
.container { max-width: 1320px; }
/* Height comes from min-height, never padding, so the bar stays a predictable
30px while the icons sit outside the flow (see .notice-bar__arrow below). */
/* Zero-height layer holding both the bar and the tab. Because they are absolutely
positioned inside it, neither contributes to the header's height, so swapping a
30px bar for a 20px tab can no longer move the page. */
.notice-layer { position: relative; height: 0; z-index: 30; }
/* The layer is an empty box, so it no longer blocks margin collapsing the way the
in-flow bar did: .info_logo_personal's margin-top would escape through the
header's top edge and push the whole header down. flow-root contains it. */
#header { display: flow-root; }
/* No height here at all: the title sits in normal flow and its line box is what
sizes the bar, so the height follows font-size (e.g. 10px on mobile) instead of
a hard-coded px. line-height is unitless so it scales with the font. */
.notice-bar { box-sizing: border-box; position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1.8; border-bottom: 1px solid var(--pepfer-line); background: var(--pepfer-ink); color: var(--pepfer-paper); font-family: var(--pepfer-sans); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
/* The clipping lives here, not on the bar, so tooltips can escape downward. It
spans the full bar width, so the title still slides the whole way out of view. */
.notice-bar__viewport { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; overflow: hidden; }
/* Slides out of view rather than collapsing: height is auto now and auto is not
animatable. It costs nothing, since the bar is out of flow either way. */
.notice-bar.is-hidden { transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none; }
/* Stands in for the dismissed bar: a bell (what comes back) plus a chevron
(which way it comes back). Sits in the right corner, clear of the edge, and
collapses to zero height so it takes no space while the bar is showing. */
/* width:max-content and the auto left margin are belt-and-braces: a flex container
that loses its absolute positioning would otherwise become block-level and
stretch to the full page width. Both keep it shrink-wrapped and right-aligned. */
.notice-restore { position: absolute; top: 0; right: 24px; width: max-content; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 3px 12px; margin: 0 0 0 auto; border: 0; background: var(--pepfer-ink); color: var(--pepfer-paper); cursor: pointer; transform: translateY(-100%); opacity: 0; visibility: hidden; }
.notice-restore.is-shown { transform: translateY(0); opacity: 1; visibility: visible; }
.notice-restore[hidden] { display: none; }
/* Transitions are gated behind .is-animated, added a frame after load, so a bar
that starts collapsed does not replay the collapse on every page view.
visibility is delayed to the end of the collapse so it cannot cut the fade. */
.notice-bar.is-animated,
.notice-restore.is-animated { transition: transform .3s ease, opacity .22s ease, visibility 0s linear .3s; }
.notice-bar.is-animated:not(.is-hidden),
.notice-restore.is-animated.is-shown { transition: transform .3s ease, opacity .22s ease, visibility 0s linear 0s; }
@media (prefers-reduced-motion: reduce) {
.notice-bar.is-animated,
.notice-restore.is-animated { transition: none; }
}
.notice-restore svg { width: 12px; height: 12px; display: block; stroke-width: 2; }
.notice-restore svg + svg { width: 10px; height: 10px; stroke-width: 2.4; }
/* Pinned to the same ink, not left unset: the theme's global button:hover paints
every button green, which would show through here. */
.notice-restore:hover,
.notice-restore:focus { background: var(--pepfer-ink); color: var(--pepfer-paper); outline: none; }
/* Tooltips are the browser's own (title attribute): the OS styles them, and it
keeps them inside the window, which hand-positioned ones near the right edge
could not do. */
/* Back in normal flow, because something must generate the line box that gives the
bar its height. It is the only in-flow child (the icons are absolute), so the
parent's justify-content centres it with no gutter arithmetic involved.
max-width keeps the title clear of the icons: 48px covers one on the left, two
on the right. line-height is restated because `font: inherit` resets it. */
.notice-bar__text { appearance: none; margin: 0; border: 0; background: transparent; color: inherit; font: inherit; line-height: inherit; display: block; max-width: calc(100% - 96px); padding: 0 4px; text-align: center; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: transform .32s cubic-bezier(.4, 0, .2, 1); }
/* Notification swap: JS sets --notice-shift far enough to clear the bar edge, so
the title visibly travels out rather than dissolving. No opacity change — the
bar's overflow does the hiding, which is what makes it read as movement.
.is-instant suppresses the transition for the off-view repositioning step. */
.notice-bar__text.is-shifted { transform: translateX(var(--notice-shift, 0)); }
.notice-bar__text.is-instant { transition: none; }
@media (prefers-reduced-motion: reduce) { .notice-bar__text { transition: none; } }
.notice-bar__text:hover,
.notice-bar__text:focus {
background: transparent;
text-decoration: none;
outline: none;
}
.notice-panel { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(22, 20, 15, .55); padding: 24px; }
.notice-panel[hidden] { display: none; }
.notice-panel__card { position: relative; width: min(480px, 100%); background: var(--pepfer-soft); border: 1px solid var(--pepfer-line); padding: 40px 32px 32px; }
.notice-panel__close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--pepfer-ink); cursor: pointer; }
.notice-panel__close svg { width: 14px; height: 14px; }
.notice-panel__title { font-family: var(--pepfer-serif); font-size: 22px; line-height: 1.2; color: var(--pepfer-ink); margin-bottom: 14px; }
.notice-panel__content { font-family: var(--pepfer-sans); font-size: 15px; line-height: 1.65; color: var(--pepfer-muted); }
.notice-panel__link { display: inline-block; margin-top: 20px; font-family: var(--pepfer-sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pepfer-accent-deep); text-decoration: none; }
.notice-panel__link:hover { text-decoration: underline; }
.notice-panel__link[hidden] { display: none; }
/* Height follows the logo instead of a 96px floor, so the block is no longer
mostly empty space above and below the mark. */
/* minmax(0, ...) on every track: an `auto` middle column keeps its content width
and pushes the neighbours out when the header narrows, which is what made the
logo ride over the search field. A 0 floor lets all three give way instead. */
/* The middle track is a definite 319px rather than `auto`. With `auto` the column
sized itself to the logo, while the logo's max-width:100% sized itself to the
column — a circular dependency the browser resolved arbitrarily. A definite max
with a 0 floor breaks the cycle and lets all three tracks give way when the
header narrows, instead of the logo riding over the search. */
.info_logo_personal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 319px) minmax(0, 1fr); align-items: center; gap: 24px; min-height: 0; margin-top: 10px; padding-bottom: 10px; font-family: var(--pepfer-sans); }
/* max-width:none clears the legacy 40% cap, which held the logo to 40% of its
column (127.6px of 319px) and was the real reason it rendered small. */
.info_logo_personal .logo { justify-self: stretch; min-width: 0; max-width: none; text-align: center; }
/* Поле повторяет пропорции самого файла — 357 к 113. Прежний знак был обрезан
с запасом по краям и в поле 11:3 ложился с полями; новый обрезан вплотную,
поэтому при прежнем поле слово вышло бы заметно крупнее.
Ширина 190 даёт высоту 60 — примерно тот же оптический размер, что и раньше,
когда в 87 пикселей помещался знак вместе с монограммой. */
.info_logo_personal .logo img { width: 100%; max-width: 190px; height: auto; aspect-ratio: 357 / 113; object-fit: contain; }
/* Right column: language switcher stacked above the action row. */
/* stretch, not flex-end: with flex-end the action row shrink-wrapped to its content
and simply overflowed its column on narrow screens, sliding under the logo.
Stretched, it fills the column and its children compress instead. */
.personal-stack { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.lang-switch { align-self: flex-end; }
.lang-switch { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.lang-switch__item { appearance: none; border: 0; background: transparent; padding: 2px 5px; font-family: var(--pepfer-sans); font-size: 11px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--pepfer-muted); cursor: pointer; }
.lang-switch__item.is-active { color: var(--pepfer-ink); font-weight: 600; cursor: default; }
/* Explicit, because the theme's global button:hover paints every button green. */
.lang-switch__item:hover,
.lang-switch__item:focus { background: transparent; color: var(--pepfer-ink); outline: none; }
.info_logo_personal .info, .info_logo_personal .personal { display: flex; align-items: center; gap: 20px; }
.info_logo_personal img[src*="menu.svg"],
.info_logo_personal img[src*="login.svg"],
.info_logo_personal img[src*="favorite.svg"] { width: 20px; height: 20px; }
#search { font-family: var(--pepfer-sans); }
/* The legacy rule caps this column at 30% and sets flex-flow:wrap, which is what
broke the four controls onto three lines. Same specificity, later file wins. */
.info_logo_personal .personal { display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-end; gap: 18px; width: auto; max-width: none; min-width: 0; position: relative; }
.info_logo_personal .personal .header_search,
.info_logo_personal .personal .wishlist,
.info_logo_personal .personal .login_url,
.info_logo_personal .personal .cart_header { display: flex; align-items: center; margin-left: 0; width: auto; max-width: none; height: auto; flex: none; }
/* Only the search gives ground when space runs out; the icons keep their size. */
.info_logo_personal .personal .header_search { flex: 0 1 auto; min-width: 0; }
/* ---- Search ---- */
#search .search { position: relative; display: block; width: 100%; }
/* ID selector so it outranks the legacy .info_logo_personal .personal .header_search .search input chain. */
/* Transparent rather than a named surface colour: the field then sits on whatever
the header background happens to be, with nothing to keep in sync. */
#search input { box-sizing: border-box; width: 138px; max-width: 100%; height: 30px; padding: 0 26px 0 0; background: transparent; border: 0; border-bottom: 1px solid var(--pepfer-line); border-radius: 0; color: var(--pepfer-ink); font-family: var(--pepfer-sans); font-size: 13px; line-height: 1.4; transition: width .25s ease, border-color .25s ease; }
#search input:focus { outline: none; }
#search input::placeholder { color: var(--pepfer-muted); }
/* Widens while focused, and stays wide as long as it holds a query. */
#search.is-active input,
#search.is-filled input { width: 238px; max-width: 100%; border-bottom-color: var(--pepfer-ink); }
/* Both icons are painted as masks filled with currentColor, so their colour comes
from the theme rather than from the asset (search.svg is hard-coded #000) or
from a hex baked into a data URI. */
#search .search button { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 22px; height: 22px; margin: 0; padding: 0; border: 0; color: var(--pepfer-ink); background-color: currentColor; background-image: none; -webkit-mask: url('../image/search.svg') no-repeat center / 16px 16px; mask: url('../image/search.svg') no-repeat center / 16px 16px; cursor: pointer; }
#search .search button:hover,
#search .search button:focus { background-color: currentColor; outline: none; }
/* Once there is a query the same button becomes a reset. */
#search.is-filled .search button { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E"); -webkit-mask-size: 12px 12px; mask-size: 12px 12px; }
/* ---- Cart ---- */
/* Count and total sit to the left of the bag; the icon moves to a pseudo-element
so the label is normal flow text instead of an absolutely positioned overlay. */
.info_logo_personal .personal .cart_header .cart_button { display: inline-flex; align-items: center; gap: 8px; width: auto; height: auto; background: none; color: var(--pepfer-ink); font-family: var(--pepfer-sans); font-size: 12px; line-height: 1; text-decoration: none; white-space: nowrap; }
.info_logo_personal .personal .cart_header .cart_button::before { content: ''; flex: none; width: 22px; height: 22px; background: url('../image/shop.svg') no-repeat center / contain; }
.info_logo_personal .personal .cart_header .cart_button span { position: static; left: auto; right: auto; top: auto; width: auto; height: auto; }
/* Two lines: count over price. Smaller type so the pair stays no taller than the icon. */
.info_logo_personal .personal .cart_header .cart_button #cart-total { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.info_logo_personal .personal .cart_header .cart_button .cart_button__count { font-size: 10px; color: var(--pepfer-ink); }
/* Accent only when the cart is not empty: a grey zero needs no attention, and it
also stops the count reading as the same grey as the inactive language code. */
.info_logo_personal .personal .cart_header .cart_button .cart_button__count.has-items { color: var(--pepfer-accent); font-weight: 600; }
.info_logo_personal .personal .cart_header .cart_button .cart_button__sum { font-size: 11px; font-weight: 500; }
.menu_head { border-top: 1px solid var(--pepfer-line); border-bottom: 1px solid var(--pepfer-line); background: var(--pepfer-paper); }
.menu_head .categories_list { display: flex; justify-content: center; gap: clamp(18px, 3vw, 46px); min-height: 48px; margin: 0; }
.menu_head .categories_list > li > a { min-height: 48px; display: inline-flex; align-items: center; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.menu_head .categories_list .dropdown .dropdown-menu { left: 0; right: 0; width: 100vw; margin-left: calc(50% - 50vw); padding: 22px 0 32px; border-top: 1px solid var(--pepfer-line); background: var(--pepfer-paper); box-shadow: 0 18px 38px rgba(0, 0, 0, .08); }
.menu_head .categories_list .dropdown .dropdown-menu .dropdown-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px 36px; }
.header_full.header_full.fixed_menu { box-shadow: 0 8px 22px rgba(0, 0, 0, .07); }
.banner, .banner .swiper, .banner .swiper-slide { min-height: clamp(420px, 62vw, 720px); }
.banner img { width: 100%; height: clamp(420px, 62vw, 720px); object-fit: cover; }
.big_cats, .services_home, .products_related_home { margin-top: clamp(48px, 7vw, 96px); margin-bottom: clamp(48px, 7vw, 96px); }
.big_cats .block { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.big_cats .image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.big_cats h2 { font-size: clamp(30px, 5vw, 64px); line-height: 1.04; margin: 0 0 18px; letter-spacing: 0; }
.big_cats .sub_title { color: var(--pepfer-muted); font-size: 16px; line-height: 1.7; }
/* max-width:none for the same reason as .products .block: style.css caps the grid
at 80%, so a fifth of the content width sat unused on every listing page. */
.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 28px; align-items: start; max-width: none; }
/* max-width:none matters: style.css caps .products .block at 24% — a leftover from
the old float layout that put four cards per row. Inside the grid that 24% is
measured against the cell, shrinking every product card to a quarter of its
column. width alone did not undo it. */
.products .block { width: auto; max-width: none; margin: 0; position: relative; }
.products .block .images, .products .block .image, .product-thumb .image { display: block; visibility: visible; opacity: 1; overflow: hidden; background: var(--pepfer-soft); aspect-ratio: 3 / 4; }
.products .block .images a, .products .block .image a, .product-thumb .image a { display: block; height: 100%; }
.products .block .images img, .products .block .image img, .product-thumb .image img { display: block; visibility: visible; opacity: 1; width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
.products .block .images img.swap-image, .products .block .images img.hover-image, .products .block .image img.hover-image { opacity: 0; }
.products .block .images:hover img.swap-image, .products .block .images:hover img.hover-image, .products .block .image:hover img.hover-image { opacity: 1; }
.quickview, .quickview_button { display: none !important; }
.products .block .title { margin-top: 14px; }
.products .block .title a, .product-thumb .caption h4 a { color: var(--pepfer-ink); font-size: 15px; line-height: 1.45; text-decoration: none; }
.products .block .price, .product-thumb .price { margin-top: 8px; font-size: 14px; letter-spacing: .03em; }
.price-old { color: var(--pepfer-muted); text-decoration: line-through; margin-left: 8px; }
.price-new { color: var(--pepfer-accent); }
/* A listing card is a photo, a name and a price. Buying happens on the product
page, where sizes and colours can actually be chosen; comparison lives there
too. Any button-group the default markup still emits stays out of sight. */
.products .button-group, .product-thumb .button-group { display: none; }
/* Верхнее поле — двадцать пикселей: линия отчёркивает подвал от страницы, и
отходить от неё на полсотни незачем. Нижнее оставлено прежним: под колонками
идёт подписка, и там воздух работает. */
.footer_menu { border-top: 1px solid var(--pepfer-line); border-bottom: 1px solid var(--pepfer-line); padding: 20px 0 56px; }
.footer_menu .blocks.footer-columns {
display: grid !important;
/* Колонок четыре: соцсети и подписка съехались в одну. Последняя шире
остальных — в ней форма с полем ввода и кнопкой, и в равной доле поле
сжималось до нечитаемого. */
grid-template-columns: repeat(3, minmax(0, 1fr)) 1.55fr;
gap: 32px;
}
.footer-column { width: auto !important; max-width: none !important; }
.footer-column .title {
/* Заголовочная гарнитура: столбцы подвала — это названия разделов, и набирать
их тем же шрифтом, что и ссылки под ними, значит не отличать их вовсе. */
font-family: var(--pepfer-serif);
font-size: 11px;
font-weight: 400;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pepfer-ink) !important;
margin-bottom: 18px;
}
.footer-column ul { margin: 0; padding: 0; list-style: none; }
.footer-column li { margin-bottom: 10px; }
.footer-column li:last-child { margin-bottom: 0; }
.footer-column a,
.footer-column li {
font-family: var(--pepfer-sans);
font-size: 13px;
line-height: 1.5;
color: var(--pepfer-muted);
}
.footer-column a { text-decoration: none; }
.footer-column a:hover { color: var(--pepfer-ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-contacts li { color: var(--pepfer-muted); }
@media (max-width: 1024px) {
.footer_menu .blocks.footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
}
/* На телефоне столбцы идут один под другим: в две колонки по 164 пикселя
названия разделов переносились по два-три слова и читались тяжелее,
чем один длинный список. */
@media (max-width: 640px) {
.footer_menu { padding: 20px 0 32px; }
.footer_menu .blocks.footer-columns { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
.copyright {
padding: 24px 0 36px;
color: var(--pepfer-muted);
font-family: var(--pepfer-sans);
font-size: 12px;
letter-spacing: .04em;
}
/* 242 and 132 are multiples of 11 too, so the height stays whole (66 and 36). */
@media (max-width: 1024px) { .info_logo_personal { grid-template-columns: minmax(0, 1fr) minmax(0, 242px) minmax(0, 1fr); gap: 16px; } .info_logo_personal .logo img { max-width: 160px; } .products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .notice-bar { font-size: 10px; } .info_logo_personal { min-height: 72px; grid-template-columns: 44px 1fr auto; } .info_logo_personal .logo { justify-self: start; } .info_logo_personal .logo img { max-width: 124px; } .info_logo_personal .personal { gap: 12px; } .menu_head { display: none; } .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; } .products_filter { display: block; } .big_cats .block { grid-template-columns: 1fr; } .banner, .banner .swiper, .banner .swiper-slide, .banner img { min-height: 420px; height: 420px; } .pepfer-card-actions, .products .button-group { flex-direction: column; align-items: stretch; } }
@media (max-width: 420px) { .products { grid-template-columns: 1fr; } }
/* Keep the base OpenCart category menu visible as a separate header row. */
.header_full .menu_head {
display: block !important;
position: relative;
z-index: 30;
min-height: 56px;
overflow: visible;
border-top: 1px solid var(--pepfer-line);
border-bottom: 1px solid var(--pepfer-line);
background: var(--pepfer-paper);
}
.header_full .menu_head > .container {
max-width: 1650px;
margin: 0 auto;
}
.header_full .menu_head .categories_list {
display: flex !important;
align-items: center;
justify-content: center;
gap: clamp(18px, 2.7vw, 44px);
min-height: 56px;
margin: 0;
padding: 0;
list-style: none;
overflow: visible;
}
.header_full .menu_head .categories_list > li {
display: flex;
align-items: center;
min-height: 56px;
margin: 0;
padding: 0;
position: static;
}
.header_full .menu_head .categories_list > li > a {
display: inline-flex !important;
align-items: center;
min-height: 56px;
color: var(--pepfer-ink) !important;
opacity: 1 !important;
visibility: visible !important;
/* Текстовая гарнитура: меню читают, а не разглядывают, и рядом с
засечками логотипа сплошная строка заглавных набиралась тяжело. */
font-family: var(--pepfer-sans);
font-size: 13px;
/* Веса здесь нет намеренно: купленное начертание одно — Light. Обводка в
треть пикселя утолщала штрих, но съедала чёткость букв, а подделка веса
браузером заплывает в просветах. Настоящий вес появится, когда купят
Medium; до тех пор меню набрано светлым, только крупнее. */
font-weight: 400;
line-height: 1.2;
letter-spacing: .1em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: border-color 160ms ease;
}
.header_full .menu_head .categories_list .dropdown .dropdown-menu {
top: 100% !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
max-height: none;
margin-left: calc(50% - 50vw);
/* Восемнадцать сверху вместо тридцати четырёх: подпункты отходили от
линии на полсотни пикселей вместе с полем самой сетки, и связь с
разделом, под которым они висят, терялась. */
padding: 18px 0 32px;
opacity: 0;
visibility: hidden;
pointer-events: none;
background: var(--pepfer-paper);
border: 0;
border-top: 1px solid var(--pepfer-line);
box-shadow: 0 18px 38px rgba(0, 0, 0, .08);
transition: opacity .2s ease, visibility .2s ease;
}
.header_full .menu_head .categories_list .dropdown:hover .dropdown-menu,
.header_full .menu_head .categories_list .dropdown:focus-within .dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.header_full .menu_head .categories_list .dropdown .dropdown-menu .container {
max-width: 1180px;
}
.header_full .menu_head .categories_list .dropdown .dropdown-menu .dropdown-inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 18px 36px;
}
@media (max-width: 767px) {
.header_full .menu_head { display: none !important; }
}
.notice-bar__arrow,
.notice-bar__close {
appearance: none;
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--pepfer-paper);
cursor: pointer;
}
/* Out of flow on purpose: the title then centres on the bar itself, so the
lopsided gutters (one icon left, two right) can no longer pull it off-centre. */
.notice-bar__arrow[data-notice-prev] { left: 0; }
.notice-bar__arrow[data-notice-next] { right: 24px; }
.notice-bar__close { right: 0; }
/* Stroke weight lives here, not in the markup, so it can be tuned in one place.
At a 24-unit viewBox drawn 12px wide, stroke-width 2 lands on exactly 1px —
a whole pixel renders crisp, where fractional widths blur and read as thin. */
.notice-bar__arrow svg,
.notice-bar__close svg {
width: 12px;
height: 12px;
display: block;
stroke-width: 2;
}
/* The cross is drawn 10px, so it needs a proportionally heavier stroke to hit
the same 1px optical weight as the 12px arrows. */
.notice-bar__close svg {
width: 10px;
height: 10px;
stroke-width: 2.4;
}
.notice-bar__arrow:hover,
.notice-bar__close:hover,
.notice-bar__arrow:focus,
.notice-bar__close:focus {
background: transparent;
color: var(--pepfer-paper);
outline: none;
}
/* The header scrolls away with the page. It was sticky and 153px tall, which
parked it on top of everything in the first screen of content — the
breadcrumbs sat 24px below it and were covered outright on a narrow viewport,
where the controls wrap and the header grows taller still. */
#header {
position: static;
background: var(--pepfer-paper);
}
/* style.css bolts .header_fixed on during scroll; neutralise it so nothing
re-pins the header behind our back. */
#header.header_fixed {
position: static !important;
top: auto !important;
padding-top: 0 !important;
background: var(--pepfer-paper) !important;
box-shadow: none !important;
}
#header .header_full,
#header .header_full.fixed_menu,
#header.header_fixed .header_full,
#header.header_fixed .header_full.fixed_menu {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: none !important;
z-index: auto !important;
background: var(--pepfer-paper) !important;
box-shadow: none !important;
}
#header .container_full,
#header.header_fixed .container_full {
background: var(--pepfer-paper) !important;
}
#header .notice-bar {
width: 100%;
box-shadow: none !important;
}
#header .info_logo_personal,
#header .menu_head {
background: var(--pepfer-paper) !important;
}
/* Final header cleanup: no inner shadows or stray horizontal rules. */
#header,
#header.header_fixed {
box-shadow: none !important;
border: 0 !important;
background: var(--pepfer-paper) !important;
}
#header .container,
#header .container_full,
#header .header_full,
#header .header_full.fixed_menu,
#header .info_logo_personal,
#header .menu_head,
#header .menu_head > .container {
box-shadow: none !important;
border-top: 0 !important;
border-bottom: 0 !important;
background: var(--pepfer-paper) !important;
}
#header .notice-bar {
border-bottom: 0 !important;
box-shadow: none !important;
}
/* No visual divider under sticky header. */
#header,
#header.header_fixed,
#header .header_full,
#header .header_full.fixed_menu,
#header .container_full,
#header .menu_head,
#header .info_logo_personal {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
border-bottom: 0 !important;
}
#header::before,
#header::after,
#header .header_full::before,
#header .header_full::after,
#header .menu_head::before,
#header .menu_head::after {
display: none !important;
content: none !important;
box-shadow: none !important;
border: 0 !important;
}
/* Dropdown panel must open without an extra horizontal divider. */
#header .menu_head .categories_list .dropdown .dropdown-menu,
#header .menu_head .categories_list .dropdown:hover .dropdown-menu,
#header .menu_head .categories_list .dropdown:focus-within .dropdown-menu {
border-top: 0 !important;
border-bottom: 0 !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu::before,
#header .menu_head .categories_list .dropdown .dropdown-menu::after,
#header .menu_head .categories_list .dropdown:hover .dropdown-menu::before,
#header .menu_head .categories_list .dropdown:hover .dropdown-menu::after {
display: none !important;
content: none !important;
border: 0 !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
/* Anya Hindmarch-style category mega panel. */
#header .menu_head {
position: relative !important;
overflow: visible !important;
}
#header .menu_head .categories_list > li {
position: static !important;
}
#header .menu_head .categories_list > li > a {
border-bottom: 1px solid transparent !important;
padding-top: 1px;
}
#header .menu_head .categories_list > li:hover > a,
#header .menu_head .categories_list > li:focus-within > a,
#header .menu_head .categories_list > li.active > a {
border-bottom-color: var(--pepfer-ink) !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu,
#header .menu_head .categories_list .dropdown:hover .dropdown-menu,
#header .menu_head .categories_list .dropdown:focus-within .dropdown-menu {
display: block !important;
position: absolute !important;
top: 100% !important;
left: 50% !important;
right: auto !important;
width: 100vw !important;
max-height: none !important;
margin: 0 !important;
/* Восемнадцать сверху вместо сорока шести: подпункты отходили от линии,
которой заканчивается ряд разделов, на полсотни пикселей — связь с
разделом, под которым они висят, терялась. Снизу поле оставлено больше:
там список кончается, и воздух отделяет его от страницы. */
padding: 18px 0 40px !important;
transform: translateX(-50%) !important;
background: var(--pepfer-paper) !important;
border-top: 1px solid var(--pepfer-line) !important;
border-bottom: 0 !important;
box-shadow: none !important;
overflow: visible !important;
z-index: 90 !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu::before,
#header .menu_head .categories_list .dropdown .dropdown-menu::after {
display: none !important;
content: none !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu > .container {
max-width: 1710px !important;
margin: 0 auto !important;
padding: 0 clamp(40px, 5vw, 96px) !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu .see-all {
display: inline-block !important;
margin: 0 0 22px !important;
min-height: 0 !important;
padding: 0 !important;
color: var(--pepfer-ink) !important;
font-size: 14px !important;
line-height: 1.35 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
text-decoration: none !important;
border: 0 !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu .dropdown-inner {
display: block !important;
max-width: 980px !important;
margin: 0 !important;
padding: 0 !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu .dropdown-inner ul {
columns: 3 220px;
column-gap: clamp(44px, 7vw, 120px);
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu li {
break-inside: avoid;
margin: 0 0 13px !important;
padding: 0 !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu li a {
display: inline !important;
min-height: 0 !important;
padding: 0 !important;
color: var(--pepfer-ink) !important;
font-family: inherit !important;
font-size: 16px !important;
line-height: 1.45 !important;
letter-spacing: .01em !important;
text-transform: none !important;
text-decoration: none !important;
border: 0 !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu li a:hover {
text-decoration: underline !important;
text-underline-offset: 4px;
}
#header .menu_head .categories_list .dropdown .dropdown-menu li a::after,
#header .menu_head .categories_list .dropdown .dropdown-menu .see-all::after {
display: none !important;
content: none !important;
}
@media (max-width: 1024px) {
#header .menu_head .categories_list .dropdown .dropdown-menu .dropdown-inner ul {
columns: 2 220px;
}
}
/* Keep mega menu content aligned with the main header container. */
#header .menu_head .categories_list .dropdown .dropdown-menu > .container {
width: min(100% - 88px, 1708px) !important;
max-width: 1708px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu .dropdown-inner {
max-width: 1260px !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu .dropdown-inner ul {
columns: 3 260px;
column-gap: clamp(72px, 9vw, 180px);
}
@media (max-width: 1200px) {
#header .menu_head .categories_list .dropdown .dropdown-menu > .container {
width: calc(100% - 48px) !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu .dropdown-inner ul {
column-gap: 56px;
}
}
/* Match dropdown content width to the visible header/nav container. */
#header .menu_head .categories_list .dropdown .dropdown-menu > .container {
width: min(calc(100vw - 248px), 1650px) !important;
max-width: 1650px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu .see-all,
#header .menu_head .categories_list .dropdown .dropdown-menu .dropdown-inner {
margin-left: 0 !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu .dropdown-inner {
width: min(100%, 1080px) !important;
max-width: 1080px !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu .dropdown-inner ul {
columns: 3 220px !important;
column-gap: clamp(56px, 7vw, 130px) !important;
}
@media (max-width: 1400px) {
#header .menu_head .categories_list .dropdown .dropdown-menu > .container {
width: calc(100vw - 96px) !important;
}
}
@media (max-width: 900px) {
#header .menu_head .categories_list .dropdown .dropdown-menu > .container {
width: calc(100vw - 40px) !important;
}
}
/* Constrain the mega menu divider to the content width. */
#header .menu_head .categories_list .dropdown .dropdown-menu,
#header .menu_head .categories_list .dropdown:hover .dropdown-menu,
#header .menu_head .categories_list .dropdown:focus-within .dropdown-menu {
border-top: 0 !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu::before,
#header .menu_head .categories_list .dropdown:hover .dropdown-menu::before,
#header .menu_head .categories_list .dropdown:focus-within .dropdown-menu::before {
content: '' !important;
display: block !important;
position: absolute !important;
top: 0 !important;
left: 50% !important;
width: min(calc(100vw - 248px), 1650px) !important;
height: 1px !important;
transform: translateX(-50%) !important;
border: 0 !important;
border-top: 1px solid var(--pepfer-line) !important;
box-shadow: none !important;
pointer-events: none !important;
}
@media (max-width: 1400px) {
#header .menu_head .categories_list .dropdown .dropdown-menu::before,
#header .menu_head .categories_list .dropdown:hover .dropdown-menu::before,
#header .menu_head .categories_list .dropdown:focus-within .dropdown-menu::before {
width: calc(100vw - 96px) !important;
}
}
@media (max-width: 900px) {
#header .menu_head .categories_list .dropdown .dropdown-menu::before,
#header .menu_head .categories_list .dropdown:hover .dropdown-menu::before,
#header .menu_head .categories_list .dropdown:focus-within .dropdown-menu::before {
width: calc(100vw - 40px) !important;
}
}
/* Prevent mega menu from creating page-level horizontal overflow. */
html,
body {
overflow-x: clip;
}
@supports not (overflow-x: clip) {
html,
body {
overflow-x: hidden;
}
}
#header .menu_head .categories_list .dropdown .dropdown-menu,
#header .menu_head .categories_list .dropdown:hover .dropdown-menu,
#header .menu_head .categories_list .dropdown:focus-within .dropdown-menu {
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
transform: none !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu > .container {
width: min(calc(100% - 248px), 1650px) !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu::before,
#header .menu_head .categories_list .dropdown:hover .dropdown-menu::before,
#header .menu_head .categories_list .dropdown:focus-within .dropdown-menu::before {
width: min(calc(100% - 248px), 1650px) !important;
}
@media (max-width: 1400px) {
#header .menu_head .categories_list .dropdown .dropdown-menu > .container,
#header .menu_head .categories_list .dropdown .dropdown-menu::before,
#header .menu_head .categories_list .dropdown:hover .dropdown-menu::before,
#header .menu_head .categories_list .dropdown:focus-within .dropdown-menu::before {
width: calc(100% - 96px) !important;
}
}
@media (max-width: 900px) {
#header .menu_head .categories_list .dropdown .dropdown-menu > .container,
#header .menu_head .categories_list .dropdown .dropdown-menu::before,
#header .menu_head .categories_list .dropdown:hover .dropdown-menu::before,
#header .menu_head .categories_list .dropdown:focus-within .dropdown-menu::before {
width: calc(100% - 40px) !important;
}
}
/* Fast mega-menu reveal with the theme typography. */
#header .menu_head .categories_list .dropdown .dropdown-menu {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
clip-path: inset(0 0 100% 0) !important;
transition:
opacity 200ms ease-out,
clip-path 320ms cubic-bezier(.4, 0, .2, 1),
visibility 0s linear 320ms !important;
will-change: clip-path, opacity;
}
#header .menu_head .categories_list .dropdown:hover .dropdown-menu,
#header .menu_head .categories_list .dropdown:focus-within .dropdown-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
clip-path: inset(0 0 0 0) !important;
transition:
opacity 200ms ease-out,
clip-path 320ms cubic-bezier(.4, 0, .2, 1),
visibility 0s linear 0s !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu,
#header .menu_head .categories_list .dropdown .dropdown-menu * {
font-family: var(--pepfer-sans) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#header .menu_head .categories_list .dropdown .dropdown-menu .see-all,
#header .menu_head .categories_list .dropdown .dropdown-menu li a {
font-weight: 400 !important;
font-synthesis: none;
letter-spacing: .01em !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu .see-all {
font-size: 12px !important;
line-height: 1.45 !important;
font-weight: 400 !important;
/* Курсивом: строка стоит над списком и говорит не о разделе, а о том, что
со списком делать. Начертание куплено, подделывать наклон не нужно. */
font-style: italic !important;
letter-spacing: .06em !important;
margin-bottom: 14px !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu li a {
font-size: 12px !important;
line-height: 1.55 !important;
}
@media (prefers-reduced-motion: reduce) {
#header .menu_head .categories_list .dropdown .dropdown-menu,
#header .menu_head .categories_list .dropdown:hover .dropdown-menu,
#header .menu_head .categories_list .dropdown:focus-within .dropdown-menu {
transition: none !important;
transform: none !important;
}
}
/* Block 7 — Новинки (new arrivals single-row carousel). */
.new-arrivals {
margin-top: clamp(48px, 7vw, 96px);
margin-bottom: clamp(48px, 7vw, 96px);
}
.new-arrivals__head {
display: flex;
align-items: baseline;
gap: 24px;
margin-bottom: 32px;
}
.new-arrivals__title {
font-family: var(--pepfer-serif);
font-weight: 400;
font-size: clamp(24px, 2.6vw, 32px);
line-height: 1.15;
margin: 0;
color: var(--pepfer-ink);
}
/* The slider is inset so the arrows have their own gutters and never cover a
product image. */
.new-arrivals__viewport {
position: relative;
padding: 0 52px;
}
/* Centred on the slider, not the head: top:50% of the viewport wrapper. */
/* Стрелки ленты — ниже, в своём разделе: они собраны из чёрточек, и правил у
них больше, чем помещается между соседними блоками. */
.carousel-arrow.swiper-button-disabled {
opacity: .3;
cursor: default;
pointer-events: none;
}
.new-arrivals__slider {
overflow: hidden;
}
.new-arrivals__card {
display: flex;
flex-direction: column;
}
.new-arrivals__image {
display: block;
aspect-ratio: 3 / 4;
background: var(--pepfer-soft);
overflow: hidden;
margin-bottom: 16px;
}
.new-arrivals__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 400ms ease;
}
.new-arrivals__image:hover img {
transform: scale(1.03);
}
.new-arrivals__name {
font-family: var(--pepfer-sans);
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: var(--pepfer-ink);
text-decoration: none;
text-align: left;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.new-arrivals__price {
font-family: var(--pepfer-sans);
font-size: 14px;
font-weight: 600;
color: var(--pepfer-ink);
margin-top: 6px;
text-align: left;
font-variant-numeric: tabular-nums;
}
.new-arrivals__price-new {
color: var(--pepfer-accent-deep);
}
.new-arrivals__price-old {
color: var(--pepfer-muted);
text-decoration: line-through;
margin-left: 6px;
font-weight: 400;
}
@media (max-width: 767px) {
.new-arrivals__head { margin-bottom: 20px; }
}
/* Block 5 — Блог/журнал (editorial full-width rows, reused for collections). */
.editorial-block {
margin-top: clamp(48px, 7vw, 96px);
margin-bottom: clamp(48px, 7vw, 96px);
}
.editorial-row {
position: relative;
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: center;
/* Просвет внутри строки меньше просвета между строками — иначе описание
висит ровно посередине между своим снимком и чужим заголовком, и
непонятно, к чему оно относится. Здесь примерно втрое меньше. */
gap: clamp(20px, 2.6vw, 40px);
text-decoration: none;
color: var(--pepfer-ink);
}
.editorial-row + .editorial-row {
margin-top: clamp(72px, 9vw, 128px);
}
.editorial-row__media {
aspect-ratio: 4 / 3;
background: var(--pepfer-soft);
overflow: hidden;
}
.editorial-row__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 500ms ease;
}
.editorial-row:hover .editorial-row__media img {
transform: scale(1.02);
}
.editorial-row__eyebrow {
display: block;
font-family: var(--pepfer-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pepfer-muted);
margin-bottom: 16px;
}
.editorial-row__title {
font-family: var(--pepfer-serif);
font-weight: 400;
font-size: clamp(26px, 3vw, 40px);
line-height: 1.15;
margin: 0 0 16px;
color: var(--pepfer-ink);
}
.editorial-row__subtitle {
font-family: var(--pepfer-sans);
font-size: 15px;
line-height: 1.65;
color: var(--pepfer-muted);
margin: 0 0 20px;
max-width: 44ch;
}
/* «Далее» под текстом коллекции.
-----------------------------------------------------------------------
Черта стояла в восьми пикселях от букв: межстрочный интервал строки — 24
пикселя при кегле 12, и шесть из них приходились на пустоту под глифами,
куда и опускалась граница. Интерлиньяж сведён к кеглю, и остаётся только
заданный просвет.
Подчёркивание здесь то же, что у ссылок всего сайта: бледная линия в покое
и своя краска, набегающая слева при наведении. Своим правилом, а не общим:
ссылка — вся строка целиком, и система подчёркиваний её намеренно обходит,
иначе черта тянулась бы под всей карточкой. */
.editorial-row__link {
display: inline-block;
font-family: var(--pepfer-sans);
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pepfer-ink);
background-image:
linear-gradient(to right, currentColor, currentColor),
linear-gradient(to right, var(--pepfer-underline-rest), var(--pepfer-underline-rest));
background-size: 0 1px, 100% 1px;
background-position: 0 100%, 0 100%;
background-repeat: no-repeat;
padding-bottom: 3px;
transition: background-size var(--pepfer-underline-speed, 240ms) ease-out;
}
/* Линия набегает, когда указатель на самой надписи, а не где угодно в строке:
строка — ссылка целиком, и от наведения на снимок черта дёргалась бы в
стороне от курсора.
Клавиатурный обход — исключение: там рамку получает вся строка, и подсветить
надпись больше нечем. */
/* Нажатие по всей строке. Раньше строка сама была ссылкой; теперь её роль
играет невидимая область, растянутая от «Далее» на всю строку. Так внутри
строки может стоять проигрыватель — ссылка в ссылке недопустима, и браузер
разбирал такую строку на куски. */
.editorial-row__link::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
/* Подчёркивание отзывается и на наведение мышью где угодно по строке — раньше
это делала сама ссылка-обёртка. */
.editorial-row:hover .editorial-row__link,
.editorial-row__link:hover,
.editorial-row__link:focus-visible {
background-size: 100% 1px, 100% 1px;
}
/* Проигрыватель лежит выше области нажатия: иначе его кнопки не нажать. */
.editorial-row--video .editorial-row__media {
position: relative;
z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
.editorial-row__link { transition: none; }
}
@media (max-width: 767px) {
.editorial-row { grid-template-columns: 1fr; gap: 16px; }
.editorial-row + .editorial-row { margin-top: 56px; }
}
/* Blog article page. */
/* Full content width, aligned to the site gutter like every other block. */
.blog-article__body { max-width: none; margin: 0; padding: 32px 0 64px; }
.blog-article__meta {
font-family: var(--pepfer-sans);
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--pepfer-muted);
margin-bottom: 12px;
}
.blog-article__title {
font-family: var(--pepfer-serif);
font-weight: 400;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.12;
margin: 0 0 16px;
color: var(--pepfer-ink);
}
.blog-article__subtitle {
font-family: var(--pepfer-sans);
font-size: 17px;
line-height: 1.6;
color: var(--pepfer-muted);
margin: 0 0 32px;
}
.blog-article__image { margin-bottom: 32px; }
.blog-article__image img { width: 100%; height: auto; display: block; }
.blog-article__content {
font-family: var(--pepfer-sans);
font-size: 16px;
line-height: 1.75;
color: var(--pepfer-ink);
}
.blog-article__content img { max-width: 100%; height: auto; }
.blog-article__content p { margin: 0 0 20px; }
/* Block 6 — Страница коллекции. */
/* Разворот в две половины, как в карточке товара: слово слева, галерея
справа — или наоборот, как выбрано в админке.
-----------------------------------------------------------------------
Прежде описание шло полосой во всю ширину, а плавающий снимок внутри
текста то оставлял под собой поле в пол-экрана, то растягивал строку на
полтораста знаков. Две колонки снимают и то и другое: текст держит свою
меру сам, а высоту разворота задаёт та половина, которой больше.
Порядок колонок меняется классом, а не порядком в разметке: в исходнике
сначала заголовок и текст, и читалке достаётся связный документ, какую бы
сторону ни выбрал сотрудник. */
.collection-spread {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(24px, 3vw, 56px);
align-items: start;
padding: 10px 0;
}
.collection-spread--left .collection-intro { order: 2; }
.collection-spread--left .collection-gallery { order: 1; }
/* Без галереи делить нечего: текст занимает полосу целиком, но меру строки
держит — иначе вернулись бы те же полтораста знаков. */
.collection-spread:not(:has(.collection-gallery)) {
display: block;
max-width: 71ch;
}
@media (max-width: 767px) {
.collection-spread {
display: block;
padding: 10px 0;
}
}
.collection-intro {
font-size: 15px;
text-align: left;
}
.collection-intro::after { content: ''; display: block; clear: both; }
.collection-intro__text {
--pepfer-gutter: clamp(20px, 2vw, 32px);
font-family: var(--pepfer-sans);
font-size: 15px;
line-height: 1.6;
color: var(--pepfer-ink);
}
.collection-intro__text p { margin: 0 0 1em; }
.collection-intro__text p:last-child { margin-bottom: 0; }
/* Внутри текста ролик и картинка обтекаются по-прежнему: сотрудник ставит их
меткой со стороной или кнопкой выравнивания. В половине разворота они
занимают её долю, а не полполосы — колонка здесь и так вдвое уже. */
.collection-intro__text .pepfer-video.pepfer-video--left,
.collection-intro__text .pepfer-video.pepfer-video--right,
.collection-intro__text img[style*="float"],
.collection-intro__text img.pepfer-float-left,
.collection-intro__text img.pepfer-float-right {
width: 46% !important;
max-width: none !important;
height: auto !important;
margin-top: 6px;
margin-bottom: 18px;
}
.collection-intro__text img[style*="float: left"],
.collection-intro__text img[style*="float:left"],
.collection-intro__text img.pepfer-float-left {
float: left;
margin-left: 0;
margin-right: var(--pepfer-gutter);
}
.collection-intro__text img[style*="float: right"],
.collection-intro__text img[style*="float:right"],
.collection-intro__text img.pepfer-float-right {
float: right;
margin-right: 0;
margin-left: var(--pepfer-gutter);
}
@media (max-width: 767px) {
.collection-intro__text .pepfer-video.pepfer-video--left,
.collection-intro__text .pepfer-video.pepfer-video--right,
.collection-intro__text img[style*="float"],
.collection-intro__text img.pepfer-float-left,
.collection-intro__text img.pepfer-float-right {
float: none !important;
width: 100% !important;
margin: 0 0 18px !important;
}
}
.collection-intro__title {
font-family: var(--pepfer-serif);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 42px);
line-height: 1.15;
margin: 0 0 16px;
color: var(--pepfer-ink);
}
.collection-intro__subtitle {
font-family: var(--pepfer-sans);
font-size: 16px;
color: var(--pepfer-muted);
margin: 0 0 24px;
}
/* Галерея: плитки в строку, доля ширины у каждой своя.
-----------------------------------------------------------------------
Раскладку считает браузер: плитки идут подряд, пока хватает места, и
переносятся, когда доли перестают складываться в сотню. Ровно этого и
ждёт сотрудник, ставя 50 и 50 или 50 и 51.
Просвет сделан полями внутри плиток, а не свойством gap: с gap две доли по
пятьдесят уже не помещались бы в строку — сотня процентов плюс просвет
шире колонки, и вторая плитка уезжала бы вниз вопреки написанному. Поля
же входят в саму долю, а лишнее по краям снимает отрицательное поле
галереи. Доли складываются ровно так, как их задал сотрудник. */
.collection-gallery {
--pepfer-tile-gap: 12px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin: 0 calc(var(--pepfer-tile-gap) / -2);
}
.collection-gallery__tile {
flex: 0 0 var(--pepfer-tile, 100%);
max-width: var(--pepfer-tile, 100%);
min-width: 0;
padding: 0 calc(var(--pepfer-tile-gap) / 2);
margin-bottom: var(--pepfer-tile-gap);
box-sizing: border-box;
}
.collection-gallery__tile img {
display: block;
width: 100%;
height: auto;
}
/* Ролик в плитке — во всю её ширину и без своих полей: рамку задаёт плитка.
Класс продублирован: вертикальным роликам в pepfer-video.css задан свой
предел ширины селектором с атрибутом, а тот весит больше одного класса. */
.collection-gallery__tile .pepfer-video.pepfer-video {
width: 100%;
max-width: none;
margin: 0;
}
/* Plyr держит за проигрывателем двести пикселей ширины — при доле в четверть
колонки он вылезал за плитку и накрывал соседнюю. Ширину задаёт плитка, а
не проигрыватель: доля, написанная сотрудником, должна значить ровно то,
что написано. */
.collection-gallery__tile .plyr {
min-width: 0;
max-width: 100%;
}
/* Узкой плитке нечем показывать время и громкость — кнопки налезли бы друг
на друга. Прячутся они по ширине самой плитки, а не окна: в широком окне
плитка бывает и в четверть колонки, а в узком — во всю. Широкая плитка
сохраняет полный набор кнопок. */
.collection-gallery__tile {
container-type: inline-size;
}
@container (max-width: 320px) {
.plyr__time,
.plyr__volume,
.plyr__menu {
display: none;
}
}
@media (max-width: 767px) {
.collection-gallery { margin-top: 24px; }
/* На телефоне доли не делятся: плитка в треть ширины на экране в триста
пикселей — это сто пикселей, разглядеть нечего. */
.collection-gallery__tile {
flex-basis: 100%;
max-width: 100%;
}
}
/* Коллекция на главной, у которой ещё нет обложки: пустая половина строки
читалась бы как несработавшая картинка. Пока обложки нет, слово занимает
строку целиком. */
/* Коллекция, у которой ещё нет обложки.
-----------------------------------------------------------------------
Строка развёрнута под большой снимок: без него половина её пустует, а
чередование сторон разбрасывает заголовки по всей ширине — читается как
поломка, а не как замысел.
Пока обложки нет, строка становится короткой записью в столбик: одна
колонка, выключка влево, шаг между строками вдвое меньше. Появится снимок
— строка сама вернётся к развороту, править ничего не нужно. */
.editorial-row--textonly {
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding-bottom: 20px;
border-bottom: 1px solid var(--pepfer-line);
}
.editorial-row--textonly .editorial-row__media { display: none; }
.editorial-row--textonly .editorial-row__text {
width: 100%;
max-width: 100%;
text-align: left;
}
/* Чередование сторон задаётся скриптом; здесь оно ни к чему — колонка одна.
Селектор длиннее, чем хотелось бы: правило чередования ниже по файлу и
весит четыре класса, коротким его не перебить. */
.editorial-block .editorial-row.editorial-row--textonly.is-reversed .editorial-row__text {
text-align: left;
}
.editorial-row--textonly + .editorial-row--textonly {
margin-top: 20px;
}
/* ---- Просветы блока коллекций -------------------------------------------
Вдвое меньше, чем у журнала: у журнала строк три-четыре и каждая с большой
обложкой, а коллекций дюжина, и прежний воздух растягивал главную на
несколько экранов пустоты.
Значения повторяют журнальные, поделённые пополам: 96 → 48 сверху и снизу
блока, 88 → 44 между строками. Мера в vw уменьшена так же, чтобы на широком
экране просветы не разъезжались обратно. */
.editorial-block--collection {
margin-top: clamp(24px, 3.5vw, 48px);
margin-bottom: clamp(24px, 3.5vw, 48px);
}
/* Между строками — вдвое больше, чем внутри строки (там 33 пикселя на
тысяче двухсот). Пока эти два просвета были почти равны, описание висело
ровно посередине между своим снимком и чужим заголовком, и к чему оно
относится, приходилось догадываться.
До прежних восьмидесяти восьми не возвращаемся: коллекций дюжина, и такой
воздух растягивал главную на несколько экранов пустоты. */
.editorial-block--collection .editorial-row + .editorial-row {
margin-top: clamp(40px, 5vw, 72px);
}
/* Строки без обложки идут своим, ещё более тесным шагом — правило ниже по
файлу, но вес у него меньше нового, поэтому оно повторено с той же
приставкой блока. */
.editorial-block--collection .editorial-row--textonly + .editorial-row--textonly {
margin-top: 32px;
}
@media (max-width: 767px) {
/* На телефоне снимок и текст стоят друг под другом с просветом в
шестнадцать пикселей — между коллекциями нужно заметно больше, иначе
лента читается сплошняком. */
.editorial-block--collection .editorial-row + .editorial-row {
margin-top: 44px;
}
}
/* ---- Коллекция на главной с описанием ------------------------------------
Флаг в форме коллекции добавляет к строке вводный текст. Без обложки такая
строка занимает всю ширину — но текст держит свою меру, иначе строка
растянулась бы на полтораста знаков и читать её стало бы нечем. */
.editorial-row--wide .editorial-row__intro {
margin: 12px 0 0;
max-width: 62ch;
font-family: var(--pepfer-sans);
font-size: 15px;
line-height: 1.6;
color: var(--pepfer-ink);
}
.editorial-row--wide .editorial-row__intro p { margin: 0 0 .8em; }
.editorial-row--wide .editorial-row__intro p:last-child { margin-bottom: 0; }
/* С описанием строка перестаёт быть короткой записью: ей нужен воздух, но не
тот, что у строки с большим снимком. */
.editorial-row--textonly.editorial-row--wide {
padding-bottom: 28px;
}
.editorial-block--collection .editorial-row--textonly.editorial-row--wide + .editorial-row--textonly,
.editorial-row--textonly.editorial-row--wide + .editorial-row--textonly {
margin-top: 28px;
}
/* ---- Вложенные подборки на странице коллекции ---------------------------- */
.collection-children {
padding: 8px 0 12px;
}
.collection-children .editorial-row + .editorial-row {
margin-top: 28px;
}
/* ---- Блок «Коллекция» в карточке товара ---------------------------------- */
.products_related_collection .products_related__title a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--pepfer-line);
}
.products_related_collection .products_related__title a:hover {
border-bottom-color: var(--pepfer-ink);
}
.collection-products {
padding-top: 20px;
padding-bottom: clamp(48px, 7vw, 96px);
}
.collection-products__title {
font-family: var(--pepfer-serif);
font-weight: 400;
font-size: clamp(22px, 2.4vw, 28px);
/* Поля нет вовсе: у карточек товара свой отступ сверху, и вместе с полем
заголовка он читался как разрыв между заголовком и тем, что он называет. */
margin: 0;
color: var(--pepfer-ink);
}
/* ---- Main menu rules ------------------------------------------------------ */
/* Both dividers are permanent. The bottom one especially: if it only appeared
with an open panel, the page would shift by a pixel on every hover.
!important because an earlier cleanup block zeroes borders across the header. */
#header .menu_head {
border-top: 1px solid var(--pepfer-line) !important;
border-bottom: 1px solid var(--pepfer-line) !important;
}
/* The links span the full height of the bar, so their underline can be pinned to
the bar's own bottom edge rather than floating somewhere above it. */
#header .menu_head > .container {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#header .menu_head .categories_list {
align-items: stretch !important;
min-height: 0 !important;
}
#header .menu_head .categories_list > li {
display: flex !important;
align-items: stretch !important;
}
#header .menu_head .categories_list > li > a {
position: relative !important;
border-bottom: 0 !important;
padding-top: 0 !important;
}
/* Полоса меню была на 10px выше своего содержимого: пункты укоротили до 46px
(«Slightly shorter menu bar» ниже), а саму полосу оставили 56px, и запас снизу
стоял пустым. Выпадающая панель раскрывается от низа полосы, метка же лежала у
низа пункта — на те самые 10px выше. Отсюда и впечатление, что тонкая линия
«расширяется вниз»: сразу под ней начинала разворачиваться панель. Полоса
укорочена до высоты пунктов — метка и панель теперь на одной черте. */
#header .menu_head {
min-height: 46px;
}
/* Ни растягивания слева направо, ни изменения толщины: линия появляется целиком
и сразу на своём месте. Меняется только её видимость. */
#header .menu_head .categories_list > li > a::after {
content: '' !important;
display: block !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
/* Черту покоя под полосой рисует псевдоэлемент контейнера: нулевая высота
плюс верхняя граница в пиксель, прижатая к низу. Метка сделана точно так же
и с тем же прижатием — значит, ложится в те же самые пиксели экрана, а не
соседние. Прежде она была на пиксель ниже, и две черты впритык читались как
одна вдвое толще. Черта на экране остаётся одна: под наведённым пунктом она
просто темнее. */
bottom: 0 !important;
height: 0 !important;
border-top: 1px solid var(--pepfer-ink) !important;
background: none !important;
transform: none;
opacity: 0;
transition: opacity 180ms ease-out;
}
#header .menu_head .categories_list > li:hover > a::after,
#header .menu_head .categories_list > li:focus-within > a::after,
#header .menu_head .categories_list > li.active > a::after {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
#header .menu_head .categories_list > li > a::after { transition: none; }
#header .menu_head .categories_list .dropdown .dropdown-menu,
#header .menu_head .categories_list .dropdown:hover .dropdown-menu,
#header .menu_head .categories_list .dropdown:focus-within .dropdown-menu { transition: none !important; }
}
/* The menu bar now owns the divider (border-bottom above), so the panel's own
inset rule is redundant: it rendered as a second, shorter line whose ends
showed as stray segments beside the bar. */
#header .menu_head .categories_list .dropdown .dropdown-menu::before,
#header .menu_head .categories_list .dropdown:hover .dropdown-menu::before,
#header .menu_head .categories_list .dropdown:focus-within .dropdown-menu::before {
display: none !important;
content: none !important;
}
/* The divider is now drawn inside .menu_head > .container (see below), so the bar
itself has no border and the panel can sit flush at 100%: the line stays visible
above it and no gap opens between them. */
#header .menu_head .categories_list .dropdown .dropdown-menu,
#header .menu_head .categories_list .dropdown:hover .dropdown-menu,
#header .menu_head .categories_list .dropdown:focus-within .dropdown-menu {
top: 100% !important;
}
/* ---- Divider alignment ----------------------------------------------------
The outer .container_full has no horizontal padding while the inner .container
has 15px, so a border on the outer element ran 15px wider than the content on
each side. Moving the border to the inner container would not help: padding sits
inside the border box. Drawing the rules as inset pseudo-elements instead makes
them start and end exactly where the content does. */
#header .menu_head {
border-top: 0 !important;
border-bottom: 0 !important;
}
#header .menu_head > .container {
position: relative !important;
}
#header .menu_head > .container::before,
#header .menu_head > .container::after {
content: '' !important;
display: block !important;
position: absolute !important;
left: var(--pepfer-gutter) !important;
right: var(--pepfer-gutter) !important;
height: 0 !important;
border-top: 1px solid var(--pepfer-line) !important;
background: none !important;
pointer-events: none;
}
#header .menu_head > .container::before { top: 0 !important; }
#header .menu_head > .container::after { bottom: 0 !important; }
/* Подвал не должен начинаться сразу за последней карточкой: на странице
каталога между списком товаров и линией подвала оставался один пиксель.
Двадцать — минимум, при котором линия читается как граница раздела, а не
как подчёркивание последней цены.
Поле у самого подвала, а не у списка: списков на сайте несколько, и у
каждого свои отступы снизу; граница же одна. */
footer { margin-top: 20px; }
.footer_menu {
position: relative;
border-top: 0 !important;
}
.footer_menu::before {
content: '';
position: absolute;
top: 0;
left: var(--pepfer-gutter);
right: var(--pepfer-gutter);
height: 0;
border-top: 1px solid var(--pepfer-line);
background: none;
pointer-events: none;
}
/* Общий зелёный ховер кнопок темы стрелкам ленты не нужен: они не залиты. */
.carousel-arrow:hover,
.carousel-arrow:focus { background: transparent; color: var(--pepfer-ink); outline: none; }
/* Social links as icons. */
.footer_menu .footer-column .footer-social { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.footer-social__link { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--pepfer-ink); transition: opacity 160ms ease; }
.footer-social__link svg { width: 20px; height: 20px; display: block; }
/* Hover moves opacity, not colour: the brand marks carry their colour in the file,
so a colour change would apply to the VK glyph only and break the match. */
.footer-social__link:hover,
.footer-social__link:focus { opacity: .65; outline: none; }
/* 2. Slightly shorter menu bar. */
#header .menu_head .categories_list,
#header .menu_head .categories_list > li,
#header .menu_head .categories_list > li > a { min-height: 46px !important; }
@media (max-width: 767px) {
.new-arrivals__viewport { padding: 0 40px; }
}
/* The panel is full-bleed, but its contents must line up with the page grid.
Previously its inner container used fixed 48px side margins while page content
is centred inside max-width:1320px — so the two only agreed at one viewport
width and drifted badly on wide screens. Give it the same geometry as
.container instead: same cap, same auto margins, same gutter. */
#header .menu_head .categories_list .dropdown .dropdown-menu > .container {
width: 100% !important;
max-width: 1320px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--pepfer-gutter) !important;
padding-right: var(--pepfer-gutter) !important;
}
/* Left-aligned inside that container: the max-width stays for readability, but
the block starts at the content edge rather than being centred. */
#header .menu_head .categories_list .dropdown .dropdown-menu .dropdown-inner {
margin-left: 0 !important;
margin-right: 0 !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu .see-all {
margin-left: 0 !important;
}
/* ---- Footer newsletter ---------------------------------------------------- */
.footer-subscribe__form { margin-top: 4px; }
.footer-subscribe__row {
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid var(--pepfer-line);
padding-bottom: 6px;
}
.footer-subscribe__input {
flex: 1 1 auto;
min-width: 0;
box-sizing: border-box;
background: transparent;
border: 0;
padding: 0;
color: var(--pepfer-ink);
font-family: var(--pepfer-sans);
font-size: 13px;
line-height: 1.6;
}
.footer-subscribe__input:focus { outline: none; }
.footer-subscribe__input::placeholder { color: var(--pepfer-muted); }
/* Explicit background/colour: the theme's global button rule paints every button
dark with a green hover, which would swamp a bare arrow here. */
.footer-subscribe__submit {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--pepfer-ink);
cursor: pointer;
}
.footer-subscribe__submit:hover,
.footer-subscribe__submit:focus { background: transparent; color: var(--pepfer-accent); outline: none; }
.footer-subscribe__submit[disabled] { opacity: .4; cursor: default; }
.footer-subscribe__submit svg { width: 16px; height: 16px; display: block; }
.footer-subscribe__consent {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 12px;
color: var(--pepfer-muted);
font-family: var(--pepfer-sans);
font-size: 11px;
line-height: 1.45;
cursor: pointer;
}
.footer-subscribe__consent input { flex: none; margin: 2px 0 0; }
.footer-subscribe__message {
margin-top: 10px;
font-family: var(--pepfer-sans);
font-size: 11px;
line-height: 1.45;
min-height: 1em;
}
.footer-subscribe__message.is-error { color: var(--pepfer-accent-deep); }
.footer-subscribe__message.is-success { color: var(--pepfer-ink); }
/* Text-label social entries (MAX, Сделано в Москве) until their official logo
files are supplied. Deliberately not borrowing another brand's glyph. */
.footer-social__link--text {
width: auto;
height: auto;
font-family: var(--pepfer-sans);
font-size: 11px;
line-height: 1.4;
letter-spacing: .04em;
white-space: nowrap;
}
/* Brand marks are supplied as files and rendered as , not inlined: MAX ships
with a mask, clip-path and filter carrying fixed ids, and the social list is
output twice (desktop footer + mobile menu), which would duplicate those ids.
Colours are left as delivered — MAX is monochrome black, the Moscow badge is a
certification mark whose red is part of its meaning. */
.footer-social__link { width: auto; }
.footer-social__link img { display: block; width: auto; }
.footer-social__link[aria-label="MAX"] img { height: 18px; }
.footer-social__link[aria-label="Сделано в Москве"] img { height: 26px; }
.footer-social__link[aria-label="MAX"],
.footer-social__link[aria-label="Сделано в Москве"] { height: auto; }
.footer_menu .footer-column .footer-social { align-items: center; gap: 16px; }
/* ---- Newsletter form: override the theme's global form styling ---------------
style.css styles inputs by attribute (input[type="email"] etc), which outranks a
plain class — the field was picking up its border, white fill, 17px type and
padding. These selectors match that specificity and win on order. Checkboxes are
caught by a width:100% rule elsewhere, which is what stretched the consent box
across the whole column. */
.footer-subscribe .footer-subscribe__form input[type="email"] {
width: 100%;
box-sizing: border-box;
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
color: var(--pepfer-ink);
font-family: var(--pepfer-sans);
font-size: 13px;
line-height: 1.6;
transition: none;
}
.footer-subscribe .footer-subscribe__form input[type="email"]:hover,
.footer-subscribe .footer-subscribe__form input[type="email"]:focus {
border: 0;
box-shadow: none;
outline: none;
background: transparent;
}
.footer-subscribe .footer-subscribe__form input[type="checkbox"] {
width: 13px;
height: 13px;
min-width: 13px;
flex: none;
margin: 1px 0 0;
padding: 0;
accent-color: var(--pepfer-ink);
}
.footer-subscribe__consent { align-items: flex-start; }
.footer-subscribe__consent span { flex: 1 1 auto; min-width: 0; }
/* Stray rule colours normalised onto the theme token, so every hairline on the
page is the same 1px in the same grey. style.css uses #e2e8f0 in three places,
one of them with !important, so these match its specificity and follow it. */
.mobile_menu .footer_mobile_menu .block_other,
.mobile_menu .footer_mobile_menu .block .accordion { border-color: var(--pepfer-line) !important; }
/* Social links sit inside .footer-column, whose `a` rule (a class plus an element,
so heavier than a bare class) was colouring the VK glyph muted and adding an
underline on hover — which is why it looked different from the image marks and
appeared to flicker between states. */
.footer_menu .footer-column .footer-social .footer-social__link {
color: var(--pepfer-ink);
text-decoration: none;
}
.footer_menu .footer-column .footer-social .footer-social__link:hover,
.footer_menu .footer-column .footer-social .footer-social__link:focus {
color: var(--pepfer-ink);
text-decoration: none;
opacity: .65;
}
/* Third-level categories in the mega menu. */
.menu_head .categories_list .dropdown .dropdown-menu .sub-children {
list-style: none;
margin: 6px 0 0;
padding: 0 0 0 12px;
}
#header .menu_head .categories_list .dropdown .dropdown-menu .sub-children li {
margin: 0 0 4px;
}
#header .menu_head .categories_list .dropdown .dropdown-menu .sub-children li a {
color: var(--pepfer-muted) !important;
font-size: 12px !important;
}
#header .menu_head .categories_list .dropdown .dropdown-menu .sub-children li a:hover {
color: var(--pepfer-ink) !important;
}
/* The legacy rule pins .sub-children as an absolutely positioned flyout
(left:310px, width:500px, min-height:400px) left over from the old design —
that is what threw the third-level items across the other columns. It carries
six classes, so this needs the #header prefix to outrank it. Third level is now
a plain nested list under its parent: no overlap, and nothing to show or hide. */
#header .menu_head .categories_list .dropdown .dropdown-menu .dropdown-inner ul li .sub-children {
position: static !important;
display: block !important;
left: auto !important;
top: auto !important;
width: auto !important;
min-height: 0 !important;
background: none !important;
list-style: none !important;
margin: 6px 0 10px !important;
padding: 0 0 0 12px !important;
border-left: 1px solid var(--pepfer-line);
}
/* ---- Editorial rows -------------------------------------------------------- */
/* Title aligns with the top of the image instead of being centred against it. */
.editorial-block .editorial-row { align-items: start; }
/* Alternating sides. The class is assigned in JS by document order rather than by
:nth-child, because blog and collections are separate s — nth-child
restarts in each one and would put two images on the same side at the seam. */
.editorial-block .editorial-row.is-reversed .editorial-row__media { grid-column: 2; grid-row: 1; }
.editorial-block .editorial-row.is-reversed .editorial-row__text { grid-column: 1; grid-row: 1; }
@media (max-width: 767px) {
.editorial-block .editorial-row.is-reversed .editorial-row__media,
.editorial-block .editorial-row.is-reversed .editorial-row__text { grid-column: 1; grid-row: auto; }
}
/* ---- Editorial rows: natural image proportions ------------------------------
The 4/3 box with object-fit:cover forced every photo into the same crop. Images
now keep their own ratio, so the column height follows the picture and the two
columns simply start together at the top. */
.editorial-block .editorial-row__media {
aspect-ratio: auto;
background: none;
}
.editorial-block .editorial-row__media img {
width: 100%;
height: auto;
object-fit: fill;
}
/* Mirrored rows mirror their text too, otherwise the copy drifts away from the
image it belongs to. */
.editorial-block .editorial-row.is-reversed .editorial-row__text { text-align: right; }
.editorial-block .editorial-row.is-reversed .editorial-row__subtitle { margin-left: auto; }
@media (max-width: 767px) {
.editorial-block .editorial-row.is-reversed .editorial-row__text { text-align: left; }
.editorial-block .editorial-row.is-reversed .editorial-row__subtitle { margin-left: 0; }
}
/* Коллекция со снимком справа: всё прижато к правому краю колонки.
-----------------------------------------------------------------------
Выключка вправо в такой строке была всегда, но в одну линию текст не
вставал: у вводного текста своя мера (62 знака), а коробка с ней прижималась
к левому краю колонки. Строки внутри выключались вправо — но по правому
краю этой коробки, а он на сотню пикселей левее заголовка. Получалось две
правые границы вместо одной.
Коробка отправлена вправо автоматическим полем — мера сохраняется, а край
совпадает с заголовком, подзаголовком и «Далее».
Пять классов в отборе — против правила выше: оно тоже длинное и стоит
позже, коротким его не перебить. */
.editorial-block.editorial-block--collection .editorial-row.is-reversed .editorial-row__intro {
margin-left: auto;
margin-right: 0;
}
@media (max-width: 767px) {
/* На телефоне снимок и текст идут друг под другом, зеркалить нечего. */
.editorial-block.editorial-block--collection .editorial-row.is-reversed .editorial-row__intro {
margin-left: 0;
}
}
/* Collection page cards: slightly quieter type so the photography leads. */
.collection-products .products .block .title a { font-size: 13px; line-height: 1.4; }
.collection-products .products .block .price { font-size: 13px; margin-top: 6px; }
/* ---- Category page --------------------------------------------------------
The heading repeated the menu item the visitor just clicked and, at 38px, read
as a second logo. It stays in the markup for document structure and search
engines, but is removed from view; the breadcrumb now carries the wayfinding. */
#product-category h1 {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Breadcrumbs, not scoped to the category page: every route draws the same list,
and they should read alike. style.css had them uppercase at 14px with 1px of
tracking — that is what made them look heavy. Sentence case, lighter, wider. */
.breadcrumb {
align-items: center;
gap: 14px;
/* Сверху поля не было вовсе — строка прижималась к полосе меню, а снизу
висело 20px. Поля равные, по 10px: строка стоит в своём просвете, а не
липнет ни к меню сверху, ни к тексту снизу. */
margin: 10px 0;
padding: 0;
list-style: none;
font-family: var(--pepfer-sans);
}
.breadcrumb li {
align-items: center;
font-size: 11px;
font-weight: 300;
line-height: 1.4;
letter-spacing: .02em;
text-transform: none;
}
/* style.css already draws a separator with li::after; adding one of our own gave
"ГЛАВНАЯ / / СУМКИ". Restyle the existing one instead of adding a second.
A glyph chevron is only as thin as the font cuts it, so draw it instead: two
1px borders on a rotated square give an exact stroke width and an exact
height, independent of whichever face ends up loading. */
.breadcrumb li::after {
content: '';
width: 6px;
height: 6px;
margin: 0 0 0 16px;
border-right: 1px solid #C4C0BA;
border-top: 1px solid #C4C0BA;
transform: rotate(45deg);
transform-origin: center;
align-self: center;
position: relative;
top: -1px; /* optical centring: the rotated square hangs slightly low */
}
.breadcrumb a { color: var(--pepfer-muted); text-decoration: none; transition: color .2s ease; }
.breadcrumb li:last-child a { color: var(--pepfer-ink); }
.breadcrumb a:hover { color: var(--pepfer-ink); }
/* The sidebar is gone, so the filter row is a plain stack again: sort bar on top,
grid below, both full width. */
#product-category .products_filter { display: block; }
#product-category .results_sort {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin: 0 0 5px;
font-family: var(--pepfer-sans);
font-size: 13px;
color: var(--pepfer-muted);
}
#product-category .results_sort .sort { display: flex; align-items: center; gap: 10px; }
#product-category .results_sort .sort select {
border: 0;
border-bottom: 1px solid var(--pepfer-line);
border-radius: 0;
background: transparent;
padding: 4px 0;
font-family: var(--pepfer-sans);
font-size: 13px;
color: var(--pepfer-ink);
}
/* Product names sat in FuturaNowHeadline-Medium, the same face and weight as the
main menu, so the grid shouted as loudly as the navigation. */
.products .block .title a,
.product-thumb .caption h4 a {
font-family: var(--pepfer-sans);
font-size: 13px;
font-weight: 400;
line-height: 1.45;
letter-spacing: .02em;
text-transform: none;
}
.products .block .price {
font-family: var(--pepfer-sans);
font-weight: 500;
letter-spacing: .02em;
}
/* Подложка под фотографией товара.
-----------------------------------------------------------------------
Была тёплая кремовая (#FCFBF8): рядом со снимками на чистом белом она
отдавала желтизной, поэтому её сделали нейтральной, как и волосяные линии.
Теперь она белая. Причина не в цвете, а в том, что сквозь неё видно: часть
снимков каталога — PNG с прозрачностью, и квадратный кадр OpenCart дополняет
до пропорций плитки прозрачными полями. Серая подложка проступала в них
полосами сверху и снизу — так, будто у вещи обрезан фон. Белая совпадает и
с полем страницы, и с фоном самих съёмок, и полос не видно.
Снимки, которые заполняют кадр целиком, подложку закрывают: для них ничего
не изменилось. */
.products .block .images,
.products .block .image,
.product-thumb .image {
background: var(--pepfer-paper, #FFFFFF);
}
/* style.css fades the main image out on hover so a second photo can take its
place — but it does that whether or not a second photo exists. Where there is
none the card simply empties out onto the placeholder. Restore the fade only
for cards that actually carry a swap image. */
.products .block .images:hover img.main-image {
opacity: 1;
}
.products .block .images:has(img.swap-image):hover img.main-image {
opacity: 0;
}
/* Wishlist toggle: was a 34px solid-black heart sitting flush in the corner and
competing with the product itself. Smaller, inset, and quiet until pointed at. */
.products .block .favorite_button {
width: 20px;
height: 20px;
top: 10px;
right: 10px;
opacity: .38;
transition: opacity .2s ease;
}
.products .block .favorite_button:hover,
.products .block:hover .favorite_button {
opacity: .75;
}
.products .block .favorite_button:hover {
opacity: 1;
}
/* style.css sets the card price in FuturaNowHeadline-Medium with 1px tracking —
a display weight on a number, which shouted over the product name. The price
is information, not a headline: same family as the name, one step quieter. */
.products .block .price,
.product-thumb .price {
font-family: var(--pepfer-sans);
font-size: 13px;
font-weight: 400;
line-height: 1.4;
letter-spacing: .01em;
color: var(--pepfer-muted);
}
/* Discounted products: the old price stays, struck through and receding; the new
price carries the accent so the reduction reads at a glance. */
.products .block .price .price-new,
.product-thumb .price .price-new {
color: var(--pepfer-accent);
margin-right: 8px;
}
.products .block .price .price-old,
.product-thumb .price .price-old {
color: var(--pepfer-line);
text-decoration: line-through;
}
/* style.css nails .header_full to 143px (media.css to 100px). The block inside
is a logo row plus a menu row whose real height depends on the viewport — on
a narrow window it outgrows the box and spills over whatever follows, which
is what buried the breadcrumbs even at zero scroll. Let it size itself. */
.header_full,
#header .header_full,
#header .header_full.fixed_menu {
height: auto !important;
overflow: visible;
}
/* Comparison on the product page: a text link, not a third button competing
with "Купить". It is the only entry point left now the listings dropped it. */
.pepfer-compare-link {
display: inline-block;
margin-top: 14px;
padding: 0;
border: 0;
background: none;
font-family: var(--pepfer-sans);
font-size: 12px;
letter-spacing: .04em;
color: var(--pepfer-muted);
text-decoration: none;
border-bottom: 1px solid var(--pepfer-line);
cursor: pointer;
transition: color .2s ease, border-color .2s ease;
}
.pepfer-compare-link:hover {
color: var(--pepfer-ink);
border-bottom-color: var(--pepfer-ink);
}
/* Wishlist stays permanently visible, so its purpose is discoverable without
hovering — just held below the product in contrast. */
.products .block .favorite_button {
opacity: .55;
}
.products .block:hover .favorite_button {
opacity: .8;
}
.products .block .favorite_button:hover {
opacity: 1;
}
/* The struck-through price was set in --pepfer-line (#E4E4E4) — a colour meant
for hairlines, not text; on white it was barely legible. It should recede,
not vanish: the customer needs to read what the saving is. */
.products .block .price .price-old,
.product-thumb .price .price-old,
.product_block .right .price_list .price-old {
color: #A8A29A;
font-size: 12px;
}
/* Product page: the reduced price carries the same accent as in the grid. */
.product_block .right .price_list .special-price {
color: var(--pepfer-accent);
}
/* ---- Filter bar ------------------------------------------------------- */
#product-category .results_sort {
align-items: flex-start;
}
.pepfer-filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.pepfer-filter {
position: relative;
}
.pepfer-filter__toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border: 1px solid var(--pepfer-line);
background: transparent;
font-family: var(--pepfer-sans);
font-size: 12px;
font-weight: 400;
letter-spacing: .04em;
color: var(--pepfer-ink);
cursor: pointer;
transition: border-color .2s ease;
}
.pepfer-filter__toggle::after {
content: '';
width: 5px;
height: 5px;
margin-top: -3px;
border-right: 1px solid var(--pepfer-muted);
border-bottom: 1px solid var(--pepfer-muted);
transform: rotate(45deg);
transition: transform .2s ease, margin-top .2s ease;
}
.pepfer-filter.is-open .pepfer-filter__toggle::after {
margin-top: 2px;
transform: rotate(-135deg);
}
.pepfer-filter__toggle:hover { border-color: var(--pepfer-muted); }
.pepfer-filter.is-active .pepfer-filter__toggle {
border-color: var(--pepfer-ink);
}
.pepfer-filter__panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 40;
min-width: 200px;
padding: 8px 0;
border: 1px solid var(--pepfer-line);
background: var(--pepfer-paper);
box-shadow: 0 12px 28px rgba(0, 0, 0, .07);
/* Collapsed by default so the bar reads as one row, not a wall of options. */
display: none;
}
.pepfer-filter.is-open .pepfer-filter__panel { display: block; }
.pepfer-filter__option {
display: block;
padding: 8px 16px;
font-family: var(--pepfer-sans);
font-size: 12px;
letter-spacing: .02em;
color: var(--pepfer-muted);
text-decoration: none;
transition: color .2s ease, background-color .2s ease;
}
.pepfer-filter__option:hover { color: var(--pepfer-ink); background: var(--pepfer-soft); }
.pepfer-filter__option.is-selected {
color: var(--pepfer-ink);
}
.pepfer-filter__option.is-selected::before {
content: '×';
margin-right: 8px;
color: var(--pepfer-accent);
}
.pepfer-filter__reset {
font-family: var(--pepfer-sans);
font-size: 12px;
letter-spacing: .04em;
color: var(--pepfer-muted);
text-decoration: none;
border-bottom: 1px solid var(--pepfer-line);
padding-bottom: 2px;
margin-left: 6px;
}
.pepfer-filter__reset:hover { color: var(--pepfer-ink); border-bottom-color: var(--pepfer-ink); }
/* With no filters configured the bar is absent, so the sort control would drift
left; keep it pinned right either way. */
#product-category .results_sort .sort { margin-left: auto; }
/* ---- Infinite scroll -------------------------------------------------- */
.pepfer-infinite-sentinel {
width: 100%;
height: 1px;
}
.pepfer-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 40px 0;
font-family: var(--pepfer-sans);
font-size: 12px;
letter-spacing: .06em;
color: var(--pepfer-muted);
}
.pepfer-loading[hidden] { display: none; }
.pepfer-loading__ring {
width: 18px;
height: 18px;
border: 1px solid var(--pepfer-line);
border-top-color: var(--pepfer-accent);
border-radius: 50%;
animation: pepfer-spin .7s linear infinite;
}
@keyframes pepfer-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.pepfer-loading__ring { animation-duration: 2.4s; }
}
/* ---- PhotoSwipe ------------------------------------------------------- */
/* The stock chrome is a dark bar with filled icon buttons. Strip it back to
hairline glyphs on the backdrop itself, so nothing frames the photograph.
Класс назван дважды не для красоты: photoswipe.css подключается в шаблоне
карточки, то есть после наших стилей, и при равном весе его чёрный фон
побеждал. Отбор из двух классов тяжелее, и порядок подключения больше
ничего не решает. */
.pswp.pswp {
--pswp-bg: #FFFFFF;
/* Заглушка на время загрузки — тоже белая: серый прямоугольник мигал на
белом полноэкранном фоне. */
--pswp-placeholder-bg: #FFFFFF;
--pswp-icon-color: var(--pepfer-ink);
--pswp-icon-color-secondary: transparent;
--pswp-icon-stroke-color: transparent;
--pswp-icon-stroke-width: 0;
--pswp-error-text-color: var(--pepfer-muted);
}
.pswp__top-bar {
background: none;
padding: 8px 8px 0 0;
}
.pswp__button {
opacity: .45;
transition: opacity .2s ease;
}
.pswp__button:hover,
.pswp__button:focus-visible {
opacity: 1;
}
/* Arrows sit clear of the image rather than on top of it. */
.pswp__button--arrow {
width: 64px;
}
.pswp__counter {
font-family: var(--pepfer-sans);
font-size: 12px;
font-weight: 400;
letter-spacing: .06em;
color: var(--pepfer-muted);
opacity: 1;
height: auto;
margin: 14px 0 0 18px;
}
/* The gallery link is a plain image holder — no focus ring box, no underline. */
#pepfer-gallery a {
display: block;
cursor: zoom-in;
}
#pepfer-gallery a img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 767px) {
/* Thumb-sized targets, and arrows out of the way of a swipe. */
.pswp__button--arrow { display: none; }
.pswp__button { opacity: .6; }
}
/* ---- Live Search dropdown --------------------------------------------- */
/* The module anchors its panel to the search box itself, so it inherited that
box's ~300px width: three float columns at 23%/49%/17% left the name and the
price stacked on top of each other. Re-anchor it to the header's content
container instead, so it spans exactly the page gutters. */
#search.ps-live-search-container {
position: static;
}
/* .personal is relative, so it — not the header row — was the containing block,
which is where the 437px came from. The panel is moved into this row by
pepfer-theme.js; its box is already the page content width. */
.info_logo_personal {
position: relative;
}
#ps-live-search.ps-live-search-list {
left: 0;
right: 0;
width: auto;
top: 100%;
margin-top: 0;
padding: 8px 0 12px;
border: 0;
border-top: 1px solid var(--pepfer-line);
border-radius: 0;
background: var(--pepfer-paper);
box-shadow: 0 18px 34px -24px rgba(0, 0, 0, .35);
font-family: var(--pepfer-sans);
color: var(--pepfer-ink);
max-height: 70vh;
overflow-y: auto;
}
/* Floats cannot hold a row together across widths; a three-track grid can. */
#ps-live-search.ps-live-search-list .ps-live-search-item {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) auto;
align-items: start;
column-gap: 20px;
padding: 8px var(--pepfer-gutter);
}
#ps-live-search.ps-live-search-list .ps-live-search-item .thumb,
#ps-live-search.ps-live-search-list .ps-live-search-item .info,
#ps-live-search.ps-live-search-list .ps-live-search-item .prices {
float: none;
width: auto;
margin: 0;
text-align: left;
}
#ps-live-search.ps-live-search-list .ps-live-search-item .thumb img {
display: block;
width: 100%;
height: auto;
background: var(--pepfer-paper, #FFFFFF);
}
#ps-live-search.ps-live-search-list .ps-live-search-item .info > *,
#ps-live-search.ps-live-search-list .ps-live-search-item .prices > * {
margin-bottom: 4px;
}
#ps-live-search.ps-live-search-list .ps-live-search-item strong.name {
font-size: 13px;
font-weight: 400;
letter-spacing: .02em;
color: var(--pepfer-ink);
text-transform: uppercase;
}
/* Descriptions are a whole paragraph of copy; two lines is enough to recognise
the item, and it keeps every row the same height. */
#ps-live-search.ps-live-search-list .ps-live-search-item .description {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 12px;
line-height: 1.5;
color: var(--pepfer-muted);
}
#ps-live-search.ps-live-search-list .ps-live-search-item .prices {
text-align: right;
white-space: nowrap;
font-size: 13px;
}
#ps-live-search.ps-live-search-list .ps-live-search-item .price-new { color: var(--pepfer-ink); }
#ps-live-search.ps-live-search-list .ps-live-search-item .price-old {
color: #A8A29A;
text-decoration: line-through;
font-size: 12px;
}
#ps-live-search.ps-live-search-list .ps-live-search-item:hover,
#ps-live-search.ps-live-search-list .ps-live-search-item:focus {
background: var(--pepfer-soft);
}
/* Section headings and the "results for …" line share the row padding. */
#ps-live-search.ps-live-search-list .ps-live-search-item-text {
padding: 4px var(--pepfer-gutter) 8px;
}
#ps-live-search.ps-live-search-list .ps-live-search-subheader {
display: block;
padding: 8px var(--pepfer-gutter);
font-size: 12px;
letter-spacing: .04em;
color: var(--pepfer-muted);
}
/* Линия рисуется по верхней границе заголовка: поле сверху — это просвет
до линии, внутренний отступ — от линии до самой надписи. Оба были
заметно шире, чем расстояние от надписи до её содержимого, и раздел
зрительно прилипал к чужому списку. */
#ps-live-search.ps-live-search-list .ps-live-search-header {
margin: 8px 0 0;
padding: 10px var(--pepfer-gutter) 2px;
font-family: var(--pepfer-sans);
font-size: 11px;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pepfer-muted);
}
@media (max-width: 767px) {
#ps-live-search.ps-live-search-list .ps-live-search-item {
grid-template-columns: 52px minmax(0, 1fr);
row-gap: 6px;
}
/* The price moves under the text rather than squeezing a third column. */
#ps-live-search.ps-live-search-list .ps-live-search-item .prices,
#ps-live-search .ps-live-search-item .prices {
grid-column: 2;
justify-self: start;
text-align: left;
}
}
/* Moving the panel into .info_logo_personal put it inside the header's own
scope, where `.info` and `.thumb` are already taken by the mobile-menu block.
Those rules were landing on the result rows — `.info` came out display:flex
and would not fill its grid track. Reset the three parts explicitly. */
#ps-live-search .ps-live-search-item .thumb,
#ps-live-search .ps-live-search-item .info,
#ps-live-search .ps-live-search-item .prices {
display: block;
float: none;
width: auto;
/* The header carries percentage max-width caps left over from the float era —
.info was capped at 30%, which is where the 318px came from. */
max-width: none;
min-width: 0;
margin: 0;
padding: 0;
justify-self: stretch;
}
#ps-live-search .ps-live-search-item .prices {
justify-self: end;
}
/* ======================================================================
Product page
====================================================================== */
/* 1. Article number: an identifier, not a headline. Sits above the title in
the same grey as secondary copy. */
.product_block .right .product-sku {
font-family: var(--pepfer-sans);
font-size: 13px;
font-weight: 300;
letter-spacing: .06em;
color: var(--pepfer-muted);
margin-bottom: 10px;
}
/* 2. The title was 25px in the display face. It stays the largest thing in the
column, but stops competing with the photograph. */
.product_block .right h1 {
font-family: var(--pepfer-sans);
font-size: 20px;
font-weight: 400;
line-height: 1.3;
letter-spacing: .02em;
margin: 0 0 12px;
color: var(--pepfer-ink);
}
/* 3. Price: was 24px, a hair under the title and in a different face again.
Clearly subordinate now. */
.product_block .right .price_list {
display: flex;
align-items: baseline;
gap: 10px;
margin: 0 0 24px;
padding: 0;
list-style: none;
}
.product_block .right .price_list .price,
.product_block .right .price_list .special-price {
font-family: var(--pepfer-sans);
font-size: 15px;
font-weight: 400;
line-height: 1.4;
letter-spacing: .02em;
color: var(--pepfer-ink);
}
.product_block .right .price_list .special-price { color: var(--pepfer-accent); }
.product_block .right .price_list .price-old {
font-family: var(--pepfer-sans);
font-size: 13px;
color: #A8A29A;
text-decoration: line-through;
}
/* 4. Variant chips. The markup is OpenCart's radio option; the native input is
hidden and :checked drives the selected state, so no script is involved. */
.product_block .right .radio_full { margin-top: 0; margin-bottom: 22px; }
.product_block .right .radio_full > .title {
font-family: var(--pepfer-sans);
font-size: 11px;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pepfer-muted);
margin-bottom: 10px;
}
.product_block .right .radio_list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.product_block .right .radio_product {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 46px;
padding: 9px 14px;
border: 1px solid var(--pepfer-line);
font-family: var(--pepfer-sans);
font-size: 13px;
line-height: 1;
color: var(--pepfer-ink);
cursor: pointer;
transition: border-color .2s ease;
}
.product_block .right .radio_product input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.product_block .right .radio_product:hover { border-color: var(--pepfer-muted); }
.product_block .right .radio_product:has(input:checked) {
border-color: var(--pepfer-ink);
box-shadow: inset 0 0 0 1px var(--pepfer-ink);
}
.product_block .right .radio_product__price { color: var(--pepfer-muted); font-size: 12px; }
.product_block .right .radio_product img { width: 22px; height: 22px; object-fit: cover; }
/* 5. Buy button owns the column: full width, quantity beside it, ink-coloured
like the notice bar but a touch warmer. */
.product_block .right .count_button.cart {
/* Quantity now sits on the variants row, so this holds nothing but the
button and the button takes the whole column. */
display: block;
margin: 0 0 14px;
}
.product_block .right .count_button [type="button"]#button-cart {
width: 100%;
max-width: none;
margin: 0;
min-height: 46px;
padding: 0 20px;
/* Рамка есть и в покое — того же цвета, что заливка. Иначе на ховере она
появлялась бы из ниоткуда и сдвигала подпись на пиксель. */
border: 1px solid #241F1A;
border-radius: 0;
background-color: #241F1A;
color: var(--pepfer-paper);
font-family: var(--pepfer-sans);
font-size: 12px;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
transition: background-color .2s ease, color .2s ease;
}
/* Инверсия, а не осветление. Прежний ховер менял #241F1A на #3A322A — тот же
коричневый чуть светлее, разницу почти не видно. Здесь заливка и текст
меняются местами: тёмная кнопка становится светлой с тёмной рамкой. */
.product_block .right .count_button [type="button"]#button-cart:hover,
.product_block .right .count_button [type="button"]#button-cart:focus-visible {
background-color: var(--pepfer-paper);
color: #241F1A;
}
/* Нажатие возвращает тёмное: щелчок должен ощущаться как нажатие, а не как
вторая половина того же ховера. */
.product_block .right .count_button [type="button"]#button-cart:active {
background-color: #241F1A;
color: var(--pepfer-paper);
}
.product_block .right .count_button [type="button"]#button-cart:focus-visible {
outline: 2px solid var(--pepfer-accent);
outline-offset: 2px;
}
/* 6-8. Secondary actions on one quiet row: wishlist, compare, share, contact. */
.product-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 26px;
}
.product-action {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 10px;
border: 0;
background: none;
font-family: var(--pepfer-sans);
font-size: 12px;
font-weight: 400;
letter-spacing: .04em;
color: var(--pepfer-muted);
cursor: pointer;
transition: color .2s ease;
}
.product-action:hover { color: var(--pepfer-ink); }
.product-action--icon {
width: 34px;
padding: 0;
justify-content: center;
}
/* The wishlist glyph is a background image inherited from the grid card. */
.product_block .right .product-action.favorite_button {
position: static;
width: 34px;
height: 34px;
background-image: url("/catalog/view/theme/pepfer/image/favorite.svg");
background-size: 20px 20px;
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
opacity: .55;
transition: opacity .2s ease;
}
.product_block .right .product-action.favorite_button:hover { opacity: 1; }
.product-action--compare svg { width: 20px; height: 20px; opacity: .75; }
.product-action--compare:hover svg { opacity: 1; }
/* Dropdowns for sharing and contact. */
.product-menu { position: relative; }
.product-menu [data-menu-toggle]::after {
content: '';
width: 5px;
height: 5px;
margin-top: -3px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg);
transition: transform .2s ease, margin-top .2s ease;
}
.product-menu.is-open [data-menu-toggle]::after {
margin-top: 2px;
transform: rotate(-135deg);
}
.product-menu__panel {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 60;
min-width: 200px;
padding: 6px 0;
border: 1px solid var(--pepfer-line);
background: var(--pepfer-paper);
box-shadow: 0 12px 28px rgba(0, 0, 0, .07);
}
.product-menu.is-open .product-menu__panel { display: block; }
.product-menu__item {
display: block;
width: 100%;
padding: 9px 16px;
border: 0;
background: none;
font-family: var(--pepfer-sans);
font-size: 12px;
letter-spacing: .02em;
text-align: left;
color: var(--pepfer-muted);
text-decoration: none;
cursor: pointer;
transition: color .2s ease, background-color .2s ease;
}
.product-menu__item:hover { color: var(--pepfer-ink); background: var(--pepfer-soft); }
.product-menu__item.is-copied { color: var(--pepfer-accent); }
/* 9. Section headings were 15px in the display face; same quiet weight as the
rest of the column now. */
.product_block .right .accordion {
font-family: var(--pepfer-sans);
font-size: 12px;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pepfer-muted);
border-top: 1px solid var(--pepfer-line) !important;
}
/* 10. Specifications as two columns: label, value. `display: contents` on the
row lets the label and value become cells of the outer grid. */
.product_block .right .info_list {
display: grid;
grid-template-columns: minmax(120px, 38%) 1fr;
margin: 4px 0 18px;
padding: 0;
list-style: none;
}
.product_block .right .info_list li {
display: contents;
font-family: var(--pepfer-sans);
font-size: 13px;
}
.product_block .right .info_list li > span {
display: block;
margin: 0;
padding: 9px 16px 9px 0;
border-top: 1px solid var(--pepfer-line);
font-weight: 400;
text-transform: none;
color: var(--pepfer-muted);
}
.product_block .right .info_list li > a,
.product_block .right .info_list li > strong,
.product_block .right .info_list li > em {
padding: 9px 0;
border-top: 1px solid var(--pepfer-line);
color: var(--pepfer-ink);
}
/* 11. Gallery arrows, vertically centred over the photograph. */
.gallery-top-wrap { position: relative; }
.gallery-nav {
position: absolute;
top: 50%;
z-index: 5;
width: 44px;
height: 44px;
transform: translateY(-50%);
border: 0;
background: none;
cursor: pointer;
opacity: .5;
transition: opacity .2s ease;
}
.gallery-nav:hover { opacity: 1; }
.gallery-nav--prev { left: 6px; }
.gallery-nav--next { right: 6px; }
.gallery-nav::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
border-top: 1px solid var(--pepfer-ink);
border-right: 1px solid var(--pepfer-ink);
}
.gallery-nav--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.gallery-nav--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
/* 12. Related products read like the catalogue grid. */
.products.products_related .products_related__title {
margin: 0 0 14px;
font-family: var(--pepfer-sans);
font-size: 16px;
font-weight: 400;
letter-spacing: .06em;
text-align: center;
color: var(--pepfer-ink);
}
.products.products_related .block { width: auto; max-width: none; margin: 0; }
.products.products_related .block .images,
.products.products_related .block .image {
aspect-ratio: 3 / 4;
overflow: hidden;
/* Белая по той же причине, что и в каталоге: сквозь серую проступали
прозрачные поля снимков. */
background: var(--pepfer-paper, #FFFFFF);
}
.products.products_related .block .images img {
width: 100%;
height: 100%;
object-fit: cover;
}
.products.products_related .block .title a {
font-family: var(--pepfer-sans);
font-size: 13px;
font-weight: 400;
line-height: 1.45;
letter-spacing: .02em;
text-transform: none;
color: var(--pepfer-ink);
text-decoration: none;
}
.products.products_related .block .price {
font-family: var(--pepfer-sans);
font-size: 13px;
font-weight: 400;
letter-spacing: .01em;
color: var(--pepfer-muted);
}
/* The share toggle is an icon now, so the chevron would only add clutter. */
.product-menu [data-menu-toggle].product-action--icon::after { content: none; }
.product-menu [data-menu-toggle].product-action--icon svg { width: 20px; height: 20px; opacity: .75; }
.product-menu [data-menu-toggle].product-action--icon:hover svg { opacity: 1; }
/* The related block carries the .products class, so it inherited the catalogue
grid: `display: grid` with four columns turned its heading and its slider into
two 289px cells sitting side by side. It is a carousel, not a grid — the
listing rules have to stop at its door. */
.products.products_related {
display: block;
width: 100%;
max-width: none;
margin: 64px 0 0;
}
.products.products_related .slider_products_related {
width: 100%;
}
/* Swiper sizes the slides itself; the grid-cell rules must not fight it. */
.products.products_related .swiper-wrapper {
display: flex;
align-items: stretch;
}
.products.products_related .swiper-slide {
height: auto;
}
.products.products_related .block {
width: 100%;
max-width: none;
margin: 0;
}
/* The prev/next arrows were sitting at the page edges, far from the carousel. */
.products_related .swiper-button-prev,
.products_related .swiper-button-next {
width: 40px;
height: 40px;
margin-top: 0;
color: var(--pepfer-ink);
opacity: .45;
transition: opacity .2s ease;
}
.products_related .swiper-button-prev:hover,
.products_related .swiper-button-next:hover { opacity: 1; }
.products_related .swiper-button-prev::after,
.products_related .swiper-button-next::after {
font-size: 18px;
}
/* Specification rows: no rules between them, and values are not italic —
the was mine, and it read as emphasis where none was meant. */
.product_block .right .info_list li > span,
.product_block .right .info_list li > .value {
border-top: 0;
padding: 7px 16px 7px 0;
font-style: normal;
}
.product_block .right .info_list li > .value {
padding-right: 0;
color: var(--pepfer-ink);
}
/* The arrows sit outside .slider_products_related, so Swiper's absolute
positioning resolved against the page instead of the carousel and threw
them out to the screen edges. Anchor them to the block. */
.products.products_related { position: relative; }
.products_related .swiper-button-prev,
.products_related .swiper-button-next {
top: 50%;
transform: translateY(-50%);
}
.products_related .swiper-button-prev { left: -10px; }
.products_related .swiper-button-next { right: -10px; }
/* ---- Product page: reclaim the first screen ---------------------------- */
/* Breadcrumbs sat 32px below the menu and 24px above the product, spending
71px of the fold on one 15px line. */
#product-product .breadcrumb {
margin: 8px 0 12px;
}
/* The big photograph was as tall as its own 3:4 ratio allowed — around 800px
in a 600px column — so the buy button fell below the fold on a laptop.
Capping it against the viewport keeps the whole card on one screen; the
full-size shot is one click away in the lightbox. */
.gallery-top .swiper-slide img {
max-height: calc(100vh - 260px);
width: auto;
max-width: 100%;
margin: 0 auto;
object-fit: contain;
}
.gallery-top .swiper-slide a {
display: flex;
justify-content: center;
}
/* Thumbnails were generated 74×74 — a square crop box for a 3:4 photograph, so
OpenCart padded them and `object-fit: fill` then stretched the result. Now
generated 90×120 and cropped, not squashed. */
.gallery-thumbs .swiper-slide img {
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
display: block;
}
.gallery-thumbs .swiper-slide span {
display: block;
}
/* Gallery arrows: they existed but at 50% opacity over a photograph they read
as part of the image. A soft disc lifts them off it. */
.gallery-nav {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, .82);
box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
opacity: 1;
}
.gallery-nav:hover {
background: #fff;
}
.gallery-nav::before {
width: 10px;
height: 10px;
border-top-width: 1.5px;
border-right-width: 1.5px;
}
.gallery-nav--prev { left: 12px; }
.gallery-nav--next { right: 12px; }
/* ---- Spacing around the related block ---------------------------------- */
/* The white space was all above the block and none below it: the heading floated
away from the products it introduces while the carousel sat flush against the
footer. Moved to the other end — the heading now belongs to its row, and the
block has room to end before the footer starts. */
.products.products_related {
margin: 24px 0 64px;
}
/* Swiper measures its own height from the slides; anything fixed here leaves a
band of empty page under the carousel. */
.products.products_related .slider_products_related {
height: auto;
}
.products.products_related .swiper-wrapper {
height: auto;
}
/* style.css pins these arrows 47px outside the block with !important, which put
them at the very edges of the window once the block became full width. */
.products_related .swiper-button-prev {
left: 0 !important;
}
.products_related .swiper-button-next {
right: 0 !important;
}
/* The related block is the last thing on the page; the footer brings its own
56px of breathing room, so nothing extra is needed here. */
.product_page > .container:last-of-type {
margin-bottom: 0;
padding-bottom: 0;
}
.product_page {
margin-bottom: 0;
padding-bottom: 0;
}
/* style.css puts a 103px top margin on .footer_menu. It collapses out through
the footer and shows up as a band of empty page above it — the gap that
survived every other adjustment. The block already carries 56px of its own
padding, which is separation enough. */
.footer_menu {
margin-top: 0;
}
/* ---- Product actions: one hover behaviour for all four ------------------ */
/* style.css paints every