/* ============================================ PersonaMarket — WordPress Theme Prototype Based on Figma design (personamarket.fig) -------------------------------------------- File: theme.css Contains: design tokens + base layout + components ============================================ */ /* ---------- Design Tokens (из Figma "Styles") ---------- */ :root{ /* Colors */ --c-black: #000000; --c-text: #151515; /* rgb(21,21,21) — заголовки */ --c-text-2: #1C1B1F; /* rgb(28,27,31) — иконки */ --c-text-3: #2B2929; /* rgb(43,41,41) — тёмный фон */ --c-text-muted: #7E7E7E; /* rgb(126,126,126) — описания */ --c-text-muted-2: #757575; --c-text-muted-3: #828286; /* rgb(130,130,134) */ --c-grey-line: #ABABAB; --c-grey-line-2: #ACACAC; --c-grey: #A1A1A1; --c-grey-soft: #D9D9D9; --c-grey-bg: #F9F9F9; /* фон страниц */ --c-grey-bg-2: #F6F6F6; --c-grey-bg-3: #EDEDED; --c-grey-bg-4: #E5E5E5; --c-white: #FFFFFF; --c-accent-pink: #FF3474; /* sale badge */ --c-accent-pink-bright: #FF4E73; /* Button bright-pink (UI-kit) */ --c-accent-pink-light: #FFCADC; --c-accent-pink-soft: #F8BECA; --c-accent-pink-bg: #FBB3C2; /* бонус-чип */ --c-accent-rose: #F7AEBD; /* promo bg */ --c-accent-rose-bg: #FCCDCD; /* лента */ --c-accent-olive: #B7C24D; /* hover green */ --c-accent-green-dark: #5A8D4B; /* Styles swatch */ --c-accent-yellow: #FFD632; /* Styles swatch */ --c-accent-burgundy: #C58989; /* accent-text */ --c-accent-brown: #967E4E; --c-footer-bg: #262626; --c-link-blue: #0070BA; /* Typography */ /* Базовый шрифт по Figma — Roboto (400/500/600/700, локально подключён). Inter Tight 700 — только для огромных декоративных надписей (--ff-huge). */ /* Z6 (07.05.2026): Inter Tight для display, Inter для body. Roboto в fallback. */ --ff-display: "Inter Tight", "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --ff-body: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --ff-roboto: "Inter", "Roboto", system-ui, sans-serif; --ff-huge: "Inter Tight", "Inter", "Roboto", system-ui, sans-serif; /* Layout */ --container-w: 1312px; --page-pad-x: 64px; --radius-pill: 999px; --ease: cubic-bezier(.2,.7,.2,1); } /* ---------- Reset / Base ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } /* `overflow-x:hidden` на html/body ломает `position:sticky` у потомков (тогда navbar не липнет при скролле). Используем `overflow-x:clip` — обрезает горизонтальный overflow без создания scroll-контейнера. */ html{ overflow-x:clip; } body{ margin:0; font-family:var(--ff-body); font-size:16px; line-height:1.5; color:var(--c-black); background:var(--c-grey-bg); -webkit-font-smoothing:antialiased; overflow-x:clip; max-width:100vw; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; } input,textarea,select{ font:inherit; color:inherit; } /* type scale */ h1,h2,h3,h4{ margin:0; font-family:var(--ff-display); font-weight:700; line-height:1.2; color:var(--c-black); } .h1{ font-size:48px; line-height:1.2; } .h2{ font-size:48px; line-height:1.2; font-family:var(--ff-roboto); } .h3{ font-size:30px; line-height:1.2; } .h4{ font-size:20px; line-height:1.5; font-weight:700; } .body-l{ font-size:18px; line-height:1.5; } .body-m{ font-size:16px; line-height:1.5; } .body-s{ font-size:14px; line-height:1.5; } .caption{ font-size:12px; line-height:1.5; color:var(--c-text-muted); } .tagline{ font-size:20px; line-height:1.5; font-weight:500; font-family:var(--ff-display); } /* ---------- Layout ---------- */ .container{ max-width:var(--container-w); margin:0 auto; padding:0 var(--page-pad-x); } .section{ padding:40px 80px 112px; } .section--sm{ padding:40px 64px; } .section--lg{ padding:112px 64px; } /* ---------- Header / Navbar ---------- */ .navbar{ background:var(--c-white); padding:16px 64px; position:sticky; top:0; z-index:100; /* R2: панель скрывается через transform — overflow:hidden обрезает её визуально. Но overflow на самом .navbar также резал выпадающее мегаменю (Z5). Перенесли overflow на .navbar__inner — он тоже содержит панель, но НЕ содержит pm-megamenu (тот sibling-uncle). */ overflow:visible; } @media (min-width: 768px){ body.is-scrolled .navbar{ box-shadow:0 2px 12px rgba(0,0,0,.06); } /* slide-up анимация на нижней строке меню */ .navbar__panel{ transition:transform .25s ease-out, opacity .2s ease-out; transform:translateY(0); opacity:1; will-change:transform; } body.is-nav-hidden .navbar__panel{ transform:translateY(-100%); opacity:0; pointer-events:none; } /* Когда панель спрятана — убираем gap между __main и __panel чтобы не было пустой строки (но это всё ещё не reflow — gap CSS-property меняет computed layout мгновенно, не анимируется). */ body.is-nav-hidden .navbar__inner{ gap:0; } /* Когда panel translated-up — убираем нижний padding шапки чтобы контент под ней поднялся (без полупустой полосы). */ body.is-nav-hidden .navbar{ padding-bottom:0; } } /* На мобиле slide-логика не нужна (panel и так скрыт desktop-only). */ @media (max-width: 767px){ body.is-nav-hidden .navbar{ box-shadow:0 2px 8px rgba(0,0,0,.06); } } .navbar__inner{ max-width:var(--container-w); margin:0 auto; display:flex; flex-direction:column; gap:32px; overflow:hidden; } .navbar__main{ display:flex; justify-content:space-between; align-items:center; height:48px; /* z-index 2 — main всегда поверх translated-up панели (R2 z-coord). */ position:relative; z-index:2; background:var(--c-white); } .navbar__logo img{ height:38px !important; width:auto !important; max-width:200px; display:block; } .navbar__right.only-desktop{ display:flex; gap:64px; align-items:center; } .navbar__geo{ display:flex; gap:6px; align-items:center; color:var(--c-accent-burgundy); font-family:var(--ff-display); font-weight:400; font-size:16px; } .navbar__geo svg{ width:12px; height:14px; fill:currentColor; } .navbar__actions{ display:flex; gap:20px; align-items:center; } .navbar__actions .ico-btn{ width:28px; height:28px; display:grid; place-items:center; color:var(--c-text-2); transition:opacity .2s; } .navbar__actions .ico-btn:hover{ opacity:.6; } .navbar__actions .ico-btn svg{ width:28px; height:28px; } .navbar__panel{ padding:10px; } .nav-links{ list-style:none; margin:0; padding:0; display:flex; gap:32px; align-items:center; } .nav-links li{ list-style:none; margin:0; padding:0; } .nav-links a{ font-family:var(--ff-display); font-size:16px; line-height:1.5; color:var(--c-black); position:relative; } .nav-links a:hover{ color:var(--c-accent-burgundy); } .nav-links a.is-active{ color:var(--c-accent-burgundy); } .navbar__burger{ display:none; width:28px; height:28px; } .navbar__burger svg{ width:100%; height:100%; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:12px 24px; font-family:var(--ff-body); font-weight:500; font-size:16px; line-height:1.5; border:1px solid transparent; border-radius:0; background:transparent; color:var(--c-black); transition:background .2s, color .2s, border-color .2s; white-space:nowrap; } .btn--primary{ background:var(--c-text-3); color:var(--c-white); } .btn--primary:hover{ background:var(--c-accent-olive); } .btn--primary:active{ background:var(--c-accent-pink); } .btn--pink{ background:var(--c-accent-pink-soft); color:var(--c-white); } .btn--pink:hover{ background:var(--c-accent-pink-light); color:var(--c-white); } .btn--pink-bright{ background:var(--c-accent-pink-bright); color:var(--c-white); } .btn--pink-bright:hover{ background:var(--c-accent-pink); color:var(--c-white); } .btn--white{ background:var(--c-white); color:var(--c-black); } .btn--white:hover{ background:var(--c-grey-bg-3); } .btn--stroke{ background:transparent; color:var(--c-black); border-color:var(--c-black); } .btn--stroke:hover{ background:var(--c-black); color:var(--c-white); } .btn--stroke-white{ background:transparent; color:var(--c-white); border-color:var(--c-white); } .btn--stroke-white:hover{ background:var(--c-white); color:var(--c-black); } .btn--green{ background:var(--c-accent-olive); color:var(--c-white); } .btn--green:hover{ background:var(--c-accent-green-dark); } .btn--full{ width:100%; } .btn--sm{ height:40px; padding:8px 16px; font-size:14px; } /* arrow/ghost circular buttons */ .arrow-btn{ width:40px; height:40px; display:inline-grid; place-items:center; background:transparent; color:var(--c-black); border:0; border-radius:0; transition:color .2s; cursor:pointer; padding:0; } .arrow-btn:hover{ color:var(--c-accent-pink); } .arrow-btn--ghost{ color:var(--c-black); } .arrow-btn--ghost:hover{ color:var(--c-accent-pink); } .arrow-btn--ghost-pink{ color:var(--c-accent-pink); } .arrow-btn--ghost-pink:hover{ color:var(--c-accent-burgundy); } .arrow-btn--white{ color:var(--c-white); } .arrow-btn svg{ width:25px; height:19px; } /* link with trailing arrow */ .link-arrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-display); font-size:14px; color:var(--c-black); } .link-arrow:hover{ color:var(--c-accent-burgundy); } .link-arrow svg{ width:16px; height:16px; } /* ---------- Product Card ---------- */ .product-card{ display:flex; flex-direction:column; gap:16px; width:296px; background:var(--c-white); position:relative; /* R13 (13.05.2026, Figma 246:3088): hover-анимация карточки — лёгкий лифт + soft shadow. Без перебарщивания, чтобы не отвлекало. */ transition:transform .25s ease, box-shadow .25s ease; } @media (hover:hover){ .product-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.08); } .product-card:hover .product-card__image{ transform:scale(1.03); } .product-card__image{ transition:transform .35s ease; } .product-card .btn{ transition:opacity .2s ease, background .2s ease; } .product-card:hover .btn{ background:var(--c-accent-burgundy); } } .product-card__image{ width:100%; aspect-ratio:1/1; /* R7 (07.05.2026): подложка белая — у узких/вертикальных фото исчезают серые полоски pillarbox, карточка выглядит чище. */ background-color:#fff; background-position:center center; background-size:contain !important; /* !important — defensive */ background-repeat:no-repeat; position:relative; } .product-card--bg{ background:var(--c-white); } .product-card--bg .product-card__body{ padding:0 16px 16px; } .product-card__body{ display:flex; flex-direction:column; gap:16px; flex:1 1 auto; min-height:244px; } .product-card__desc{ font-family:var(--ff-display); font-size:14px; color:var(--c-text-muted); min-height:21px; } .product-card__name{ font-family:var(--ff-display); font-weight:600; font-size:20px; line-height:1.5; color:var(--c-black); min-height:30px; /* Длинные слова без пробелов (например "Hydration") должны переноситься, иначе текст вылезает за правую границу карточки. */ overflow-wrap:break-word; word-break:break-word; hyphens:auto; /* Жёсткий лимит — макс 3 строки, остаток с многоточием. Применяется на всех ширинах, иначе на планшетах/сужённых десктопах длинные английские названия рвут карточку. */ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; } /* Карточка вне зависимости от ширины не должна выпускать контент за границу. */ .product-card{ overflow:hidden; } .product-card__body{ box-sizing:border-box; } .product-card__price{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; font-family:var(--ff-display); font-weight:600; font-size:20px; min-height:30px; margin-top:auto; } .product-card__price > span{ white-space:nowrap; } .product-card__price--old{ color:var(--c-grey-line-2); text-decoration:line-through; font-weight:600; } /* R8 (07.05.2026): порядок «новая → старая», без underline у новой цены, старая #ACACAC со strike. Filter pm_format_sale_price меняет порядок в HTML. */ .product-card__price ins{ background:transparent; text-decoration:none; font-weight:700; color:var(--c-black); } .product-card__price del{ color:#ACACAC; text-decoration:line-through; font-weight:500; margin-left:8px; } .product-card__price del *{ color:inherit; } .product-card__sale{ position:absolute; left:0; top:0; width:40px; height:40px; background:var(--c-accent-pink); color:var(--c-white); display:grid; place-items:center; font-family:"Inter"; font-size:24px; font-weight:900; } .product-card__preorder{ font-family:var(--ff-display); font-size:14px; color:var(--c-text-muted); display:inline-flex; align-items:center; gap:4px; margin-left:auto; } .product-card__preorder__ico{ width:16px; height:16px; border-radius:50%; background:#D9D9D9; display:inline-grid; place-items:center; flex-shrink:0; } .product-card__preorder__ico svg{ width:12px; height:12px; color:var(--c-text-2); } /* margin-top:auto переехал на .product-card__price — он тянет вниз пару (цена+кнопка). Если оставить auto и здесь — flex делит свободное место между двумя auto-margin'ами и между ценой и кнопкой образуется большая дыра. */ .product-card .btn{ width:100%; } /* disabled (out of stock) product-card */ .product-card.is-outstock .product-card__image{ opacity:.6; } .product-card.is-outstock .btn{ background:transparent; color:var(--c-text-muted); border:1px solid var(--c-grey-line); cursor:not-allowed; } /* Stock badges (out-of-stock / backorder) */ .product-card__badge{ position:absolute; top:12px; left:12px; padding:4px 10px; font-family:var(--ff-body); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; z-index:1; line-height:1.2; } .product-card__badge--oos{ background:rgba(38,38,38,.85); color:var(--c-white); } .product-card__badge--backorder{ background:var(--c-accent-olive); color:var(--c-white); } /* ---------- Hero slider ---------- */ .hero{ position:relative; aspect-ratio:2240/510; max-height:510px; overflow:hidden; background:#D1D1D1; } @media (max-width:991px){ .hero{ aspect-ratio:700/380; max-height:none; } .hero__bg img{ object-position:right center; } .hero__cta-wrap{ left:50%; bottom:56px; } /* над точками .hero__dots (bottom:24) */ } @media (max-width:480px){ .hero{ aspect-ratio:5/4; } } .hero__slide{ position:absolute; inset:0; display:block; opacity:0; transition:opacity .5s var(--ease); } .hero__slide.is-active{ opacity:1; } .hero__bg{ position:absolute; inset:0; display:block; } .hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; } .hero__cta-wrap{ position:absolute; left:50%; transform:translateX(-50%); bottom:56px; z-index:2; } .hero__content{ position:absolute; left:50%; transform:translateX(-50%); width:1200px; max-width:calc(100% - 240px); display:grid; grid-template-columns:504px 32px 504px; align-items:center; top:0; bottom:0; padding:80px 0; } .hero__content > .hero__compensator{ display:block; } .hero__right{ grid-column:3 / 4; display:flex; flex-direction:column; gap:32px; padding:0; align-items:flex-start; text-align:left; } .hero__title-block{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; } .hero__right .h1{ font-family:var(--ff-display); font-weight:700; font-size:48px; line-height:1.2; color:var(--c-white); margin:0; } .hero__right .hero__sub{ font-family:var(--ff-display); font-weight:600; font-size:20px; line-height:1.5; color:var(--c-white); } .hero__right .btn{ align-self:flex-start; margin-top:16px; } .btn--white-arrow{ background:var(--c-white); color:var(--c-black); border:none; display:inline-flex; align-items:center; gap:12px; padding:12px 24px; height:48px; border-radius:0; font-family:var(--ff-body); font-weight:500; font-size:16px; text-decoration:none; transition:background .2s, color .2s; } .btn--white-arrow:hover{ background:var(--c-black); color:var(--c-white); } .btn--white-arrow .btn__arrow{ font-size:18px; line-height:1; } .hero__nav{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; background:transparent; color:var(--c-white); display:grid; place-items:center; border:0; cursor:pointer; padding:0; transition:color .2s; } .hero__nav:hover{ color:var(--c-accent-pink); } .hero__nav--prev{ left:24px; } .hero__nav--next{ right:24px; } .hero__nav svg{ width:25px; height:19px; } .hero__dots{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:8px; } .hero__dots button{ width:8px; height:8px; padding:0; border:none; box-sizing:content-box; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:background .2s; flex:0 0 auto; } .hero__dots button.is-active{ background:var(--c-white); } /* ---------- Section titles ---------- */ .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:80px; } .sec-head__title{ display:flex; flex-direction:column; gap:16px; } .sec-head__tagline{ font-family:var(--ff-roboto); font-weight:400; font-size:18px; line-height:1.5; color:var(--c-black); } .sec-head__heading{ font-family:var(--ff-roboto); font-weight:700; font-size:48px; line-height:1.2; color:var(--c-black); } .sec-head__sub{ font-family:var(--ff-roboto); font-size:18px; } .sec-head__nav{ display:flex; gap:12px; flex-shrink:0; } /* ---------- Product Row / Slider ---------- */ .product-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; } .product-slider{ display:flex; gap:32px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none; } .product-slider::-webkit-scrollbar{ display:none; } .product-slider .product-card{ scroll-snap-align:start; flex:0 0 296px; } /* Section variant: slider bleeds past the right edge. Альaign-grid cо всеми остальными секциями (.editorial и т.п.): left-edge = max(80px, (100vw - 1312px) / 2 + 80px) от viewport. Если просто оставить асимметричный padding (left:80, right:0), `margin:0 auto` у `.container` центрирует его в смещённой области и блок «Хиты» оказывается правее остальных. Поэтому считаем margin-left явно. */ .section--bleed-right{ overflow:hidden; padding-right:0; /* padding-left наследуется от .section = 80px */ } .section--bleed-right > .container{ padding-left:0; padding-right:0; margin-left: max(0px, calc((100vw - var(--container-w) - 160px) / 2)); margin-right: 0; } .section--bleed-right .product-slider{ margin-right: calc(-1 * (100vw - 100%) / 2); padding-right:0; } /* Inner padding for product-card text (button stays full-width) */ .product-card__desc, .product-card__name, .product-card__price{ padding-left:16px; padding-right:16px; } /* ---------- Two-column intro ---------- */ .two-col{ padding:80px 0; } .two-col__inner{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; } .two-col__heading{ font-family:var(--ff-display); font-weight:700; font-size:56px; line-height:1.2; color:var(--c-black); } .two-col__right{ display:flex; flex-direction:column; gap:32px; } .two-col__body{ font-family:var(--ff-body); font-size:18px; line-height:1.5; color:var(--c-black); margin:0; } .two-col__actions{ display:flex; gap:16px; } .two-col__actions .btn--primary{ width:156px; height:48px; } .two-col__actions .btn--stroke{ width:296px; height:48px; } /* ---------- Brand strip ---------- */ .brand-strip{ padding:32px 0; border-block:0; overflow:hidden; } .brand-strip__inner{ display:flex; gap:16px; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; /* Z15: центрируем по container_w как остальные секции главной; при узком viewport боковой отступ совпадает с .container. */ max-width:var(--container-w); margin:0 auto; padding:0 var(--page-pad-x); scrollbar-width:none; } .brand-strip__inner::-webkit-scrollbar{ display:none; } .brand-card{ min-width:134px; height:45px; padding:8px 22px; border:1px solid var(--c-black); border-radius:var(--radius-pill); display:inline-flex; gap:10px; align-items:center; justify-content:center; font-family:var(--ff-display); font-weight:700; font-size:14px; white-space:nowrap; flex-shrink:0; transition:background .2s, color .2s; } .brand-card:hover{ background:var(--c-black); color:var(--c-white); } .brand-card__dot{ width:29px; height:29px; border-radius:50%; background:var(--c-grey-soft); flex-shrink:0; } .brand-card__logo{ width:29px; height:29px; flex-shrink:0; object-fit:contain; object-position:center; display:block; } /* ---------- Bonus section ---------- */ .bonus{ position:relative; overflow:hidden; padding:96px 80px; background-color:var(--c-white); background-image:var(--bonus-bg); background-size:cover; background-position:right center; background-repeat:no-repeat; } .bonus__container{ max-width:var(--container-w); margin:0 auto; display:flex; flex-direction:column; gap:48px; align-items:flex-start; } .bonus__text{ display:flex; flex-direction:column; gap:16px; max-width:560px; } .bonus__text .tagline{ font-family:var(--ff-display); font-weight:500; font-size:20px; line-height:1.5; color:var(--c-accent-burgundy); } .bonus__text .h2{ font-family:var(--ff-display); font-weight:700; font-size:48px; line-height:1.2; color:var(--c-black); } .bonus__content{ max-width:520px; display:flex; flex-direction:column; gap:32px; } .bonus__body{ font-family:var(--ff-body); font-weight:400; font-size:18px; line-height:1.5; color:var(--c-black); margin:0; } .bonus__actions{ display:flex; gap:24px; align-items:center; } .bonus__actions .btn{ height:48px; } .bonus__actions .btn--primary{ width:296px; } .bonus__actions .btn--stroke{ width:122px; min-width:122px; } .bonus__link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-body); font-size:16px; font-weight:500; color:var(--c-black); text-decoration:none; padding:12px 16px; } .bonus__link-arrow{ font-size:20px; line-height:1; } .bonus__link:hover{ color:rgb(255,52,116); } /* ---------- Promo (sale) section ---------- */ .promo{ background:rgb(247,174,189); position:relative; overflow:hidden; padding:48px 80px 112px; min-height:812px; } .promo__bg{ position:absolute; left:92px; top:226px; width:736px; height:736px; background:center/contain no-repeat; opacity:.53; pointer-events:none; z-index:1; } /* R11 (07.05.2026): bleed-right как в «Хитах». Container прижат к левому контейнеру, правая колонка уходит за правый край viewport (последняя карточка слайдера обрезана — это ожидаемо, slider скроллится). */ .promo__container{ max-width:none; position:relative; display:grid; grid-template-columns:360px 1fr; gap:32px; align-items:stretch; z-index:2; /* Left-edge — на уровне container (как у обычных секций) */ margin-left: max(0px, calc((100vw - var(--container-w) - 160px) / 2)); margin-right: 0; } .promo__left{ display:flex; flex-direction:column; justify-content:space-between; padding:0; width:360px; gap:80px; /* R9 (07.05.2026): heading на уровне верхнего края карточек (а не со строкой стрелок). Слайдер начинается ниже стрелок на ≈72px. */ padding-top:72px; } .promo__head{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; text-align:left; } .promo__head .h2{ font-family:var(--ff-display); font-weight:700; font-size:48px; line-height:1.2; color:var(--c-white); width:360px; text-align:left; } .promo__head .sub{ font-family:var(--ff-body); font-size:18px; line-height:1.5; color:var(--c-white); width:360px; text-align:left; } /* R10 (13.05.2026, Figma 246:3088): «Все товары» нижним краем должен совпадать с нижним краем карточек справа. Поэтому: margin-top:auto к CTA (страхует space-between на случай если у head вырастет высота), padding-bottom у слайдера обнуляем — оно сдвигало bottom правой колонки на 8px вниз и ломало выравнивание с CTA. */ .promo__cta{ width:296px; align-self:flex-start; margin-top:auto; } .promo__cta .btn{ width:296px; height:48px; } .promo__right .product-slider{ padding-bottom:0; } .promo__right{ display:flex; flex-direction:column; gap:32px; min-width:0; } .promo__right .product-slider{ min-width:0; width:100%; gap:16px; } /* В promo показываем ровно 3 карточки в ряд независимо от ширины правой колонки — глобальный flex:0 0 296px не помещался (3×296 + 2×32 = 952px > ~792px колонки), и третья карточка визуально обрезалась. Фиксируем ширину как 1/3 колонки. */ .promo__right .product-slider .product-card{ flex:0 0 calc((100% - 32px) / 3); } .promo__nav{ align-self:flex-end; display:flex; gap:12px; z-index:5; } .promo__nav .arrow-btn{ color:var(--c-white); } .promo__nav .arrow-btn:hover{ color:var(--c-black); } /* ---------- Blog Post Header (feat. editorial card) ---------- */ .editorial{ padding:112px 80px 40px; } .editorial__grid{ display:grid; grid-template-columns:778px 1fr; gap:48px; max-width:var(--container-w); margin:0 auto; } .editorial__feature{ position:relative; height:450px; overflow:hidden; background:#ccc center/cover no-repeat; padding:40px; display:flex; flex-direction:column; justify-content:flex-end; gap:24px; text-decoration:none; } .editorial__feature::before{ content:""; position:absolute; inset:0; background:radial-gradient(closest-side at 30% 70%, rgba(0,0,0,.5), rgba(0,0,0,0) 70%); } .editorial__feature h2,.editorial__feature .btn{ position:relative; z-index:1; } .editorial__feature .h1{ color:var(--c-white); max-width:446px; } .editorial__feature .btn{ align-self:flex-start; } .editorial__side{ display:flex; flex-direction:column; gap:32px; } .tabs{ display:flex; padding:4px; border:1px solid var(--c-black); border-radius:24px; } .tabs button{ flex:1; height:48px; border-radius:24px; font-family:var(--ff-display); font-size:16px; color:var(--c-black); transition:background .2s, color .2s; } .tabs button.is-active{ background:var(--c-black); color:var(--c-white); } .editorial__list{ display:flex; flex-direction:column; } .editorial__item{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--c-grey-line); font-family:var(--ff-display); font-weight:500; font-size:20px; color:var(--c-black); transition:color .2s; } .editorial__item:last-child{ border-bottom:1px solid var(--c-grey-line); } .editorial__item:hover{ color:var(--c-accent-burgundy); } .editorial__item svg{ width:25px; height:19px; fill:currentColor; flex-shrink:0; } /* ---------- Category blog grid ---------- */ .blog-grid{ padding:40px 80px 112px; } .blog-grid__container{ max-width:var(--container-w); margin:0 auto; display:grid; grid-template-columns:445px 1fr; gap:48px; } .blog-grid__intro{ display:flex; flex-direction:column; gap:16px; justify-content:center; } .blog-grid__items{ display:grid; grid-template-columns:1fr 1fr; gap:25px 24px; } .article-frame{ position:relative; height:288px; background:#ccc center/cover no-repeat; padding:18px 20px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; } .article-frame__btn{ background:var(--c-white); color:var(--c-black); min-height:54px; padding:12px 24px; display:flex; align-items:center; justify-content:center; gap:10px; font-family:var(--ff-display); font-weight:500; font-size:18px; line-height:1.3; transition:background .2s, color .2s; width:100%; /* Длинные заголовки переносим, обрезаем по 3 строки. */ text-align:center; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; word-break:break-word; overflow-wrap:break-word; } .article-frame:hover .article-frame__btn{ background:var(--c-accent-olive); color:var(--c-white); } .article-frame:hover .article-frame__btn .arrow-btn{ display:inline-grid; } .article-frame__btn .arrow-btn{ display:none; width:40px; height:40px; background:transparent; color:var(--c-white); margin-left:auto; } /* ---------- CTA ---------- */ .cta{ position:relative; overflow:hidden; color:var(--c-white); padding:112px 80px; min-height:358px; background:#BABABA; } .cta__container{ max-width:var(--container-w); margin:0 auto; position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; } .cta__bg{ position:absolute; left:160px; top:-169px; width:604px; height:604px; border-radius:50%; overflow:hidden; pointer-events:none; z-index:1; } .cta__bg img{ width:100%; height:100%; object-fit:cover; display:block; } .cta__title{ font-family:var(--ff-display); font-weight:700; font-size:48px; line-height:1.2; white-space:pre-line; color:var(--c-white); } .cta__right{ display:flex; flex-direction:column; gap:32px; } .cta__text{ font-family:var(--ff-body); font-size:18px; line-height:1.5; color:var(--c-white); } .cta__actions{ display:flex; gap:16px; align-items:center; } .cta__actions .btn{ height:48px; } .cta__actions .btn--white{ width:296px; } .cta__actions .btn--stroke-white{ width:199px; min-width:199px; } /* ---------- CTA: full-bleed banner вариант (новый) ---------- */ .cta--banner{ position:relative; padding:0; min-height:auto; background:transparent; color:inherit; overflow:hidden; } .cta--banner .cta__bg-img{ display:block; width:100%; } .cta--banner .cta__bg-img img{ width:100%; height:auto; display:block; } .cta--banner .cta__cta-wrap{ position:absolute; left:35%; bottom:48px; z-index:2; } .cta--banner .cta__cta-wrap .btn{ height:48px; } /* ---------- Footer ---------- */ .footer{ background:var(--c-footer-bg); color:var(--c-white); padding:80px 80px 40px; } .footer__inner{ max-width:var(--container-w); margin:0 auto; display:flex; flex-direction:column; gap:80px; } .footer__top{ display:grid; grid-template-columns:1fr auto; gap:32px; } .footer__about{ display:flex; flex-direction:column; gap:32px; max-width:560px; } .footer__logo img{ width:195px; height:50px; filter:brightness(0) invert(1); } .footer__about p{ margin:0; font-family:var(--ff-display); font-weight:400; font-size:14px; line-height:1.5; } .footer__about b{ display:block; font-weight:700; } .footer__links{ display:grid; grid-template-columns:1fr 1fr; gap:32px; min-width:460px; } .footer__links ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } .footer__links a{ display:block; padding:8px 0; font-family:var(--ff-display); font-weight:600; font-size:16px; line-height:1.5; color:var(--c-white); } .footer__links a:hover{ text-decoration:underline; } /* По заказу 2026-05-07: иконки соцсетей в футере скрыть. Когда появятся реальные ссылки на аккаунты — убрать display:none. */ .footer__socials{ display:none !important; } .footer__socials a{ width:24px; height:24px; display:grid; place-items:center; color:var(--c-white); opacity:.9; } .footer__socials a:hover{ opacity:1; } .footer__socials svg{ width:24px; height:24px; } .footer__credits{ display:flex; justify-content:space-between; gap:24px; font-family:var(--ff-display); font-weight:400; font-size:14px; border-top:1px solid rgba(255,255,255,.1); padding-top:24px; } .footer__credits-links{ display:flex; gap:24px; } /* ---------- Sale badge & misc ---------- */ .sale-badge{ width:40px; height:40px; background:var(--c-accent-pink); color:var(--c-white); display:grid; place-items:center; font-size:24px; font-family:"Inter"; } .bonus-mark{ display:inline-flex; align-items:center; gap:10px; padding:2px 10px 2px 4px; background:var(--c-accent-pink-bg); border-radius:34px; font-family:var(--ff-roboto); font-size:14px; } .bonus-mark__ico{ width:24px; height:24px; display:grid; place-items:center; color:var(--c-white); } /* ---------- Utility ---------- */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .only-desktop{ display:initial; } .only-mobile{ display:none; } /* Mobile-actions: gap+flex применяется только когда блок реально показан. !important нужен чтобы перебить .only-mobile{ display:initial !important } из @media ≤767. */ @media (max-width:991px){ .navbar .navbar__actions-mobile, .navbar__actions-mobile{ display:flex !important; gap:28px !important; align-items:center; flex-shrink:0; } .navbar__actions-mobile > *{ flex-shrink:0; margin:0 !important; } .navbar__actions-mobile > * + *{ margin-left:0 !important; } } /* ========================================================= MOBILE (≤ 767px) ========================================================= */ @media (max-width: 767px){ .only-desktop{ display:none !important; } .only-mobile{ display:initial !important; } .section, .section--sm, .section--lg{ padding:24px 20px; } .container{ padding:0 20px; } .navbar{ padding:12px 20px; background:var(--c-grey-bg); } .navbar__inner{ gap:0; } /* Z26 (08.05.2026): desktop-правило ставит height:38px !important — на mobile нужен такой же !important иначе лого вылетало за плашку 28px. */ .navbar__main{ height:auto; min-height:32px; } .navbar__logo img{ height:28px !important; } .navbar__panel{ display:none; } .navbar__right{ display:none; } .navbar__burger{ display:grid; place-items:center; width:36px; height:36px; } .navbar__burger svg{ width:36px; height:36px; } .navbar__actions-mobile .ico-btn{ width:32px; height:32px; color:var(--c-text-2); } .navbar__actions-mobile .ico-btn svg{ width:32px; height:32px; } .h1{ font-size:36px; } h1,.h2{ font-size:30px; } .sec-head{ flex-direction:column; align-items:flex-start; margin-bottom:24px; gap:12px; } .sec-head__heading{ font-size:30px; } .sec-head__nav{ display:none; } /* hero aspect-ratio управляется выше в @media (max-width:991/480), здесь только nav-стрелки */ .hero__nav{ display:none; } .product-row{ grid-template-columns:1fr; gap:24px; } .product-card{ width:100%; } .product-card__image{ aspect-ratio:1/1; } .brand-strip__inner{ padding:0 20px; } .two-col{ padding:40px 0; } .two-col__inner{ grid-template-columns:1fr; gap:24px; padding:0 20px; } .two-col__heading{ font-size:32px; } .two-col__actions{ flex-direction:column; } .two-col__actions .btn--primary, .two-col__actions .btn--stroke{ width:100%; } .bonus{ padding:48px 20px 64px; background-image:var(--bonus-bg-mobile, var(--bonus-bg)); background-position:bottom center; background-size:contain; padding-bottom:340px; } .bonus__container{ gap:24px; max-width:100%; } .bonus__text{ max-width:100%; } .bonus__text .h2{ font-size:30px; } .bonus__content{ max-width:100%; } .bonus__body{ font-size:16px; } .bonus__actions{ flex-direction:column; align-items:stretch; gap:12px; } .bonus__actions .btn--primary{ width:100%; } .promo{ padding:32px 20px 64px; } .promo__container{ display:grid; grid-template-columns:1fr; gap:24px; } .promo__left{ width:auto; height:auto; gap:24px; padding:16px 0; } .promo__head .h2, .promo__head .sub{ width:auto; max-width:100%; } .promo__head .h2{ font-size:32px; } .promo__cta, .promo__cta .btn{ width:100%; } .promo__bg{ display:none; } .promo__nav{ display:none; } /* На мобиле возвращаем фикс-ширину карточек 240px и горизонтальный скролл — calc-based 1/3-ширина из десктопа для одной колонки делает карточки слишком узкими и текст рвётся. */ .promo__right .product-slider{ margin-right:0; padding-right:20px; gap:12px; } .promo__right .product-slider .product-card{ flex:0 0 240px; } /* Кнопка «Все товары» на мобиле — не растягиваем колонку, чтобы grid `align-items:stretch` не делал из левой колонки 1000px пустого места. */ .promo__container{ align-items:start; } .promo__left{ width:100%; gap:16px; } /* На мобиле сохраняем стандартный левый padding 20px (как у остальных секций) — чтобы heading и сетка были выровнены, а не липли к краю. Только padding-right оставляем 0 для bleed слайдера. */ .section--bleed-right{ padding-left:20px; padding-right:0; } .section--bleed-right > .container{ margin-left:0; } .section--bleed-right .product-slider{ margin-right: calc(-1 * (100vw - 100%) - 20px); } .editorial{ padding:40px 20px; } .editorial__grid{ grid-template-columns:1fr; gap:24px; } .editorial__feature{ height:360px; padding:24px; gap:16px; } .editorial__feature .h1{ font-size:28px; } .blog-grid{ padding:24px 20px 64px; } .blog-grid__container{ grid-template-columns:1fr; } .blog-grid__items{ grid-template-columns:1fr 1fr; gap:16px; } .article-frame{ min-height:280px; height:auto; padding:12px; } .article-frame__btn{ min-height:36px; padding:8px 12px; font-size:13px; /* Жёстко 3 строки на мобиле — больше не влезает аккуратно. */ -webkit-line-clamp:3; } .cta{ padding:64px 20px; min-height:auto; } .cta__container{ grid-template-columns:1fr; gap:24px; } .cta__title{ font-size:32px; } .cta__bg{ position:relative; left:auto; top:auto; width:240px; height:240px; margin:0 auto; } .cta__right{ gap:24px; } .cta__actions{ flex-direction:column; align-items:stretch; gap:12px; } .cta__actions .btn--white, .cta__actions .btn--stroke-white{ width:100%; min-width:0; } .cta--banner{ padding:0; } .cta--banner .cta__cta-wrap{ left:20px; bottom:24px; } .footer{ padding:40px 20px; } .footer__top{ grid-template-columns:1fr; } .footer__links{ min-width:0; } .footer__credits{ flex-direction:column; gap:8px; } } .navbar__logo{ text-decoration:none; display:inline-flex; align-items:center; } .navbar__logo img{ display:block; height:38px; width:auto; } .footer__logo{ display:inline-flex; align-items:center; } .footer__logo img{ display:block; width:195px; height:50px; } .footer__about{ display:flex; flex-direction:column; gap:16px; max-width:560px; } .footer__about .footer__logo{ margin-bottom:8px; } .footer__subscribe-text{ margin:0; font-family:var(--ff-display); font-weight:400; font-size:14px; line-height:1.5; color:var(--c-white); } .footer__address{ margin:0; font-family:var(--ff-display); font-weight:400; font-size:14px; color:var(--c-white); } .footer__phone, .footer__email{ font-family:var(--ff-display); font-weight:700; font-size:14px; color:var(--c-white); text-decoration:underline; align-self:flex-start; } .footer__phone:hover, .footer__email:hover{ opacity:.8; } .footer__socials{ display:flex; gap:12px; margin-top:8px; } .footer__socials a{ width:24px; height:24px; display:grid; place-items:center; color:var(--c-white); opacity:.9; } .footer__socials a:hover{ opacity:1; } .footer__socials svg{ width:24px; height:24px; } .footer__credits-meta{ display:flex; flex-direction:column; gap:4px; } .footer__legal{ color:rgba(255,255,255,.55); font-size:12px; } /* Nav drawer (Figma: nav frame) — внутренние стили работают при любой ширине, видимость drawer привязана к body.has-menu-open + media (≤767). */ .nav-drawer{ display:none; } .nav-drawer[hidden]{ display:none !important; } body.has-menu-open .nav-drawer, body.has-menu-open .nav-drawer[hidden]{ display:flex !important; flex-direction:column; position:fixed; inset:0; z-index:200; background:var(--c-grey-bg); padding:16px 20px 24px; overflow-y:auto; } body.has-menu-open{ overflow:hidden; } .nav-drawer__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 16px; } .nav-drawer__close-btn{ width:28px; height:28px; padding:0; background:transparent; border:0; cursor:pointer; display:grid; place-items:center; flex-shrink:0; color:var(--c-text-2); } .nav-drawer__close-btn svg{ width:28px; height:28px; display:block; } .nav-drawer__head-actions{ display:flex; gap:20px; align-items:center; } .nav-drawer__head-actions .ico-btn{ width:28px; height:28px; padding:0; background:transparent; border:0; cursor:pointer; display:grid; place-items:center; color:var(--c-text-2); flex-shrink:0; } .nav-drawer__head-actions .ico-btn svg{ width:28px; height:28px; display:block; } .nav-drawer__head-actions .ico-btn:hover{ opacity:.6; } .nav-drawer__geo{ display:flex; align-items:center; gap:6px; color:var(--c-accent-burgundy); font-family:var(--ff-display); font-weight:400; font-size:14px; padding:8px 0 16px; border-bottom:1px solid var(--c-grey-bg-3); } .nav-drawer__geo svg{ width:10px; height:10px; fill:currentColor; transform:rotate(180deg); } .nav-drawer__primary{ display:flex; flex-direction:column; padding:8px 0; border-bottom:1px solid var(--c-grey-bg-3); } .nav-drawer__primary a{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; font-family:var(--ff-display); font-weight:700; font-size:20px; color:var(--c-black); text-decoration:none; } /* 4.1: drill-down панели для бургер-каталога (Figma 2026-05-04). */ .nav-drawer__catalog-trigger{ cursor:pointer; } .nav-drawer__drill{ position:absolute; inset:0; background:var(--c-white); z-index:2; overflow:hidden; display:flex; flex-direction:column; } .nav-drawer__drill[hidden]{ display:none !important; } .nav-drawer__pane{ position:absolute; inset:0; background:var(--c-white); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .25s var(--ease, ease-out); overflow-y:auto; -webkit-overflow-scrolling:touch; } .nav-drawer__pane[hidden]{ display:none !important; } .nav-drawer__pane[data-drill-pane="root"]{ transform:translateX(0); } /* root уже на месте */ .nav-drawer__pane.is-active{ transform:translateX(0); } .nav-drawer__pane.is-out-left{ transform:translateX(-100%); } .nav-drawer__pane-head{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--c-grey-bg-3); position:sticky; top:0; background:var(--c-white); z-index:1; } .nav-drawer__pane-back{ width:32px; height:32px; padding:0; border:0; background:transparent; display:grid; place-items:center; cursor:pointer; color:var(--c-black); } .nav-drawer__pane-back svg{ width:24px; height:24px; } .nav-drawer__pane-title{ margin:0; font-family:var(--ff-display); font-weight:700; font-size:22px; line-height:1.2; color:var(--c-black); } .nav-drawer__pane-list{ list-style:none; padding:8px 20px 24px; margin:0; display:flex; flex-direction:column; } .nav-drawer__pane-list li{ display:block; } .nav-drawer__pane-list a, .nav-drawer__pane-link{ display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; padding:14px 0; font-family:var(--ff-display); font-weight:500; font-size:16px; color:var(--c-black); text-decoration:none; text-align:left; border:0; background:transparent; cursor:pointer; border-bottom:1px solid var(--c-grey-bg-3); } .nav-drawer__pane-list li:last-child > a, .nav-drawer__pane-list li:last-child > .nav-drawer__pane-link{ border-bottom:0; } .nav-drawer__pane-arrow{ width:18px; height:18px; flex-shrink:0; color:var(--c-text-muted); } @media (min-width:992px){ .nav-drawer__drill{ display:none !important; } } /* ============== Mega-menu (desktop, Figma 2026-05-04) ============== */ .pm-megamenu{ position:absolute; left:0; right:0; top:100%; background:var(--c-white); box-shadow:0 8px 24px rgba(0,0,0,.08); border-top:1px solid var(--c-grey-bg-3); z-index:50; } .pm-megamenu[hidden]{ display:none; } .pm-megamenu__inner{ max-width:var(--container-w); margin:0 auto; padding:24px var(--page-pad-x); display:grid; grid-template-columns:280px 280px 280px; gap:0; } .pm-megamenu__col{ list-style:none; padding:0; margin:0; min-height:320px; } .pm-megamenu__col--l1, .pm-megamenu__col--l2{ border-right:1px solid var(--c-grey-bg-3); padding-right:24px; } .pm-megamenu__col--l2, .pm-megamenu__col--l3{ padding-left:24px; } .pm-megamenu__sublist{ list-style:none; padding:0; margin:0; display:none; } .pm-megamenu__sublist:not([hidden]){ display:block; } .pm-megamenu__item{ display:block; margin:0; } .pm-megamenu__item > a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; font-family:var(--ff-display); font-weight:400; font-size:15px; line-height:1.3; color:var(--c-black); text-decoration:none; transition:color .12s; } .pm-megamenu__item > a:hover, .pm-megamenu__item.is-active > a{ font-weight:600; color:var(--c-black); } .pm-megamenu__item--all > a, .pm-megamenu__item--special > a{ color:var(--c-text-muted); font-weight:400; } .pm-megamenu__item--all > a:hover, .pm-megamenu__item--special > a:hover{ color:var(--c-black); } .pm-megamenu__arrow{ width:14px; height:8px; flex-shrink:0; transform:rotate(-90deg); } @media (max-width:991px){ .pm-megamenu{ display:none !important; } } .nav-drawer__secondary{ display:flex; flex-direction:column; padding:16px 0; border-bottom:1px solid var(--c-grey-bg-3); } .nav-drawer__secondary a{ padding:8px 0; font-family:var(--ff-body); font-weight:400; font-size:14px; color:var(--c-black); text-decoration:none; } .nav-drawer__login{ display:flex; justify-content:space-between; align-items:center; padding:24px 0 8px; font-family:var(--ff-display); font-weight:500; font-size:16px; color:var(--c-black); text-decoration:none; } .nav-drawer__arrow{ width:18px; height:14px; color:var(--c-black); display:inline-grid; place-items:center; } .nav-drawer__arrow svg{ width:18px; height:14px; display:block; } /* ============================================ Cart badge + add-to-cart toast ============================================ */ .pm-cart-link{ position:relative; } /* 13.05.2026: бейдж раньше стоял top:-6 right:-8 и уезжал ЗА правую границу .navbar__inner (там overflow:hidden из-за R2 slide-up панели — Z5), отчего цифра обрезалась. Кладём бейдж В bbox иконки (top/right = 0). */ .pm-cart-link__count{ position:absolute; top:-2px; right:0; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--c-accent-burgundy); color:var(--c-white); font-family:var(--ff-display); font-weight:700; font-size:10px; line-height:1; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; pointer-events:none; transition:transform .25s var(--ease, ease); } .pm-cart-link__count[data-count="0"]{ display:none; } .pm-cart-link.is-bumping .pm-cart-link__count{ transform:scale(1.4); } .pm-cart-toast{ position:fixed; right:24px; bottom:24px; z-index:300; display:flex; align-items:center; gap:12px; background:var(--c-black); color:var(--c-white); padding:14px 20px; min-width:260px; max-width:calc(100vw - 48px); box-shadow:0 8px 24px rgba(0,0,0,.18); font-family:var(--ff-display); font-size:14px; transform:translateY(20px); opacity:0; pointer-events:none; transition:transform .25s ease, opacity .25s ease; } .pm-cart-toast[hidden]{ display:none; } .pm-cart-toast.is-visible{ transform:translateY(0); opacity:1; pointer-events:auto; } .pm-cart-toast__check{ width:24px; height:24px; flex-shrink:0; display:grid; place-items:center; background:#39A769; border-radius:50%; color:var(--c-white); } .pm-cart-toast__check svg{ width:14px; height:14px; } .pm-cart-toast__msg{ flex:1 1 auto; min-width:0; } .pm-cart-toast__link{ color:var(--c-white); text-decoration:underline; font-weight:500; font-size:13px; white-space:nowrap; } .pm-cart-toast__link:hover{ color:var(--c-white); opacity:.85; } @media (max-width:767px){ .pm-cart-toast{ left:16px; right:16px; bottom:16px; min-width:0; } } /* Состояние «в процессе добавления» / «уже в корзине» для кнопки в карточке */ .product-card .btn.loading{ opacity:.7; pointer-events:none; position:relative; } .product-card .btn.loading::after{ content:""; width:14px; height:14px; margin-left:8px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; display:inline-block; animation:pm-spin .7s linear infinite; } .product-card .btn.added{ /* Лёгкая «галочка» вместо ярко-зелёного — кнопка остаётся в нашем чёрном стиле, подтверждение успеха даём через cart-toast + bump на иконке корзины. */ background:var(--c-black); color:var(--c-white); position:relative; } .product-card .btn.added::before{ content:"\2713"; /* ✓ */ margin-right:6px; font-weight:700; } /* WC по умолчанию вставляет рядом с кнопкой ссылку «Просмотр корзины» (`a.added_to_cart`). У нас вместо этого toast + бейдж в шапке — скрываем. */ .product-card .added_to_cart, .product-card a.added_to_cart{ display:none !important; } @keyframes pm-spin{ to{ transform:rotate(360deg); } } /* ============================================ Favorites (♥) ============================================ */ .product-card{ position:relative; } .product-card__fav{ position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; padding:0; background:var(--c-white); border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--c-black); box-shadow:0 1px 4px rgba(0,0,0,.08); transition:transform .15s, background .15s; } .product-card__fav:hover{ transform:scale(1.06); } .product-card__fav svg{ width:18px; height:18px; pointer-events:none; } .product-card__fav.is-active{ background:var(--c-accent-burgundy); color:var(--c-white); } .product-card__fav.is-active svg{ fill:currentColor; } .product-card__fav:disabled{ opacity:.5; cursor:wait; } /* Страница /favorites/ */ .pm-favorites{ display:flex; flex-direction:column; gap:24px; padding:0 0 64px; } .pm-favorites__guest-note{ background:var(--c-white); padding:14px 20px; font-family:var(--ff-display); font-size:14px; color:var(--c-text-muted); display:flex; flex-wrap:wrap; gap:8px; align-items:center; border-left:3px solid var(--c-accent-burgundy); } .pm-favorites__guest-note a{ color:var(--c-black); text-decoration:underline; font-weight:500; } .pm-favorites__grid{ transition:opacity .2s; } .pm-favorites__grid .product-card{ transition:opacity .2s; } .pm-favorites__empty{ background:var(--c-white); padding:64px 32px; display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; } .pm-favorites__empty h3{ font-family:var(--ff-display); font-weight:700; font-size:24px; margin:0; color:var(--c-black); } .pm-favorites__empty p{ font-family:var(--ff-body); font-size:15px; color:var(--c-text-muted); margin:0; max-width:480px; } .pm-favorites__empty .btn{ margin-top:8px; } .pm-favorites__empty[hidden], .pm-empty-state[hidden]{ display:none !important; } /* ============================================ Blog single post — Figma 2026-04-27 ============================================ */ .post-hero{ position:relative; height:520px; background:#333 center/cover no-repeat; padding:64px; display:flex; align-items:flex-end; color:var(--c-white); } .post-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 40%, rgba(0,0,0,.7)); } .post-hero__inner{ position:relative; z-index:1; max-width:var(--container-w); margin:0 auto; width:100%; display:flex; flex-direction:column; gap:16px; } .post-hero__meta{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; font-family:var(--ff-display); font-size:14px; opacity:.9; } .post-hero__chip{ display:inline-flex; align-items:center; padding:6px 16px; border:1px solid var(--c-white); border-radius:var(--radius-pill); line-height:1; } /* Z17 (07.05.2026): уменьшили с 64 до 44px — текст перекрывал нижнюю часть имиджа. Сохраняем 28px на mobile (см. блок ниже). */ .post-hero h1{ font-family:var(--ff-roboto); font-size:44px; line-height:1.15; max-width:760px; color:var(--c-white); } .post-body{ padding:64px 64px 32px; } .post-body__inner{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:20px; font-family:var(--ff-roboto); font-size:18px; line-height:1.6; color:var(--c-text-3); } .post-body h2{ font-family:var(--ff-display); font-weight:700; font-size:32px; line-height:1.2; margin-top:24px; color:var(--c-black); } .post-body h3{ font-family:var(--ff-display); font-weight:700; font-size:22px; margin-top:12px; } .post-body ul{ padding-left:20px; display:flex; flex-direction:column; gap:8px; } .post-body blockquote{ margin:16px 0; padding:24px 32px; background:var(--c-accent-pink-light); font-family:var(--ff-display); font-size:22px; line-height:1.4; font-weight:500; } .post-body figure{ margin:12px 0; } .post-body figure img{ width:100%; height:auto; } .post-body figcaption{ font-size:13px; color:var(--c-text-muted); margin-top:8px; text-align:center; } /* Z17 (13.05.2026, retry): WC Product Collection (рекомендации) внутри статьи — подгоняем под вид с главной: фикс. ширина 296px, gap 24px, горизонтальный скролл если контент шире контейнера статьи. WC рендерит `