/* Theme Name: INMOST Description: Тема магазина INMOST. Разметка из макетов, данные из WooCommerce. Токены — 04_Дизайн/INMOST_DESIGN_SYSTEM.md версии 1.1. Version: 0.1 */ /* ──────────────────────────────────────────────────────────────────────── Токены — из 04_Дизайн/INMOST_DESIGN_SYSTEM.md, не выдуманы ──────────────────────────────────────────────────────────────────── */ :root{ --porcelain:#F7F2EC; --burgundy:#4B1025; --burgundy-hover:#3C0D1E; --ink:#140F11; --blush:#E5C4C8; --white:#FFF; --muted:#6E6266; --border:#D9CFCA; --border-strong:#A7969C; --wine-text:#59162A; /* Служебные цвета дизайн-системы: смысл несёт сам цвет */ --surface-soft:#F1EAE2; /* второй светлый тон: плашки и подложки */ --text-faint:#A7969C; /* зачёркнутая старая цена */ --in-stock:#2F7A55; /* «В наличии» */ --warning:#8A5C18; /* «Мало осталось» */ --rating:#C89B3C; /* звёзды рейтинга */ --favorite:#D62B3A; /* избранное */ --container:1280px; /* по артбордам: сетка 1280 при поле 80 */ --radius-pill:999px; --radius-card:16px; --radius-panel:20px; --radius-surface:24px; --radius-hero:28px; --gap-surface:20px; /* промежуток между крупными поверхностями */ } *{box-sizing:border-box} /* Подпись для скринридера. Без этого правила label в поиске печатался на экране поверх подсказки — было видно «Поиск по каталогуБренд, товар». */ .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} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--porcelain);color:var(--ink); font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased} a{color:var(--burgundy);text-decoration:none} a:hover{color:var(--burgundy-hover)} img{max-width:100%;display:block} :focus-visible{outline:2px solid var(--burgundy);outline-offset:2px} /* Гарнитура заголовков. Дизайн-система §5.1 требует Manrope SemiBold. Georgia в трёх текущих прототипах — дрейф от 25.08, не решение. Чтобы посмотреть serif-вариант: добавьте class="serif" на . */ h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.025em;line-height:1.15} .serif h1,.serif h2,.serif h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.04em} .container{width:min(var(--container),100% - 40px);margin-inline:auto} .surface{background:var(--white);border-radius:var(--radius-surface);padding:40px} .stack{display:flex;flex-direction:column} .btn{display:inline-flex;align-items:center;justify-content:center; min-height:56px;padding:0 34px;border-radius:var(--radius-pill); font-size:17px;font-weight:600;border:1px solid transparent} .btn--primary{background:var(--burgundy);color:var(--white)} .btn--primary:hover{background:var(--burgundy-hover);color:var(--white)} .btn--outline{border-color:var(--burgundy);color:var(--burgundy)} .btn--disabled{border-color:var(--border);color:var(--border-strong);cursor:not-allowed} .eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .pill{display:inline-flex;align-items:center;min-height:26px;padding:2px 12px; border-radius:999px;background:var(--porcelain);border:1px solid var(--border); font-size:12px;font-weight:600;color:var(--muted)} .empty{border:1px dashed var(--border);border-radius:12px;padding:32px;text-align:center} .empty__t{font-size:16px;font-weight:600;margin-bottom:6px} .empty__p{font-size:14px;line-height:1.5;color:var(--muted);max-width:52ch;margin-inline:auto} /* ── Служебная полоса и шапка ─────────────────────────────────────────── */ padding:0 16px;border:1px solid var(--border);border-radius:var(--radius-pill); background:var(--white);color:var(--muted)} /* Скрытые подписи. left:-9999px выносит элемент за край и тянет прокрутку — используем clip, он не влияет на поток. */ .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ── 7.1 Первый экран: split-hero ─────────────────────────────────────── */ .hero{margin-top:24px;background:var(--blush);border-radius:24px;overflow:hidden} .hero__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;min-height:560px} .hero__copy{padding:76px 64px} .hero__copy .eyebrow{color:var(--burgundy);opacity:.75;margin-bottom:20px} .hero h1{font-size:clamp(38px,4.4vw,64px);line-height:1.04;letter-spacing:-.03em;color:var(--burgundy);margin-bottom:24px} .hero p{font-size:22px;line-height:1.45;color:var(--wine-text);max-width:46ch;margin:0 0 36px} .hero__cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap} .hero__note{font-size:14px;color:var(--wine-text);opacity:.8} .hero__media{height:560px;display:flex;align-items:flex-end;justify-content:center;padding:40px 40px 0} .hero__media img{max-height:100%;width:auto;border-radius:16px 16px 0 0} /* ── 7.2 Полоса доводов ───────────────────────────────────────────────── */ .claims{margin-top:var(--gap-surface);padding:34px 40px} .claims__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px} .claim{display:flex;gap:16px;align-items:flex-start} .claim svg{flex:0 0 auto} .claim__t{font-size:18px;font-weight:600;line-height:1.3;margin-bottom:6px} .claim__p{font-size:14px;line-height:1.45;color:var(--muted)} /* ── 7.3 Три направления ──────────────────────────────────────────────── */ .section{margin-top:var(--gap-surface)} .section__head a{display:inline-flex;align-items:center;min-height:44px} .section__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:20px;flex-wrap:wrap} .section h2{font-size:clamp(28px,3vw,38px)} .dirs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-surface)} .dir{background:var(--white);border-radius:var(--radius-card);padding:32px;min-height:220px;position:relative;display:block} .dir--soon{opacity:.72} .dir__t{font-size:26px;font-weight:600;line-height:1.25;margin-bottom:8px} .dir__paren{font-size:14px;color:var(--muted);margin-bottom:20px} .dir__n{font-size:16px} .dir__arrow{position:absolute;right:32px;bottom:32px} /* ── 7.4 Витрина ──────────────────────────────────────────────────────── */ .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .card{display:flex;flex-direction:column;gap:12px} .card__ph{background:var(--porcelain);border-radius:12px;height:240px; display:flex;align-items:center;justify-content:center;overflow:hidden} .card__ph img{height:100%;width:auto;object-fit:contain} .card__brand{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted)} .card__name{font-size:16px;line-height:1.35;min-height:2.7em} .card__meta{font-size:14px;color:var(--muted)} .card__buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px} .card__price{font-size:14px;color:var(--muted)} .card .btn{min-height:44px;padding:0 16px;font-size:14px} /* ── 7.5 Повторная покупка ────────────────────────────────────────────── */ .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-surface)} .repeat h3{font-size:26px;line-height:1.25;margin:12px 0} .repeat p{font-size:16px;line-height:1.55;color:var(--muted);margin:0 0 24px} /* ── 7.6 Подбор по компоненту ─────────────────────────────────────────── */ .chips{display:flex;flex-wrap:wrap;gap:12px} .chip{display:inline-flex;align-items:center;min-height:48px;padding:0 22px; border-radius:999px;border:1px solid var(--border);font-size:16px;color:var(--border-strong)} /* ── 7.7 Бренды ───────────────────────────────────────────────────────── */ .brands{display:flex;flex-wrap:wrap;gap:14px} .brand{display:inline-flex;align-items:center;min-height:52px;padding:0 26px; border-radius:var(--radius-pill);background:var(--porcelain); font-size:18px;font-weight:600;letter-spacing:.02em} /* ── 7.9 Опт ──────────────────────────────────────────────────────────── */ .wholesale{margin-top:var(--gap-surface);background:var(--burgundy);color:var(--white); border-radius:var(--radius-card);padding:48px; display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center} .wholesale h2{color:var(--white);margin-bottom:14px} .wholesale p{font-size:18px;line-height:1.6;color:var(--blush);margin:0} .wholesale__form{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap} .wholesale input{min-height:56px;padding:0 20px;border-radius:var(--radius-pill); background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25); color:var(--white);font:inherit;min-width:240px} .wholesale input::placeholder{color:var(--blush)} .wholesale .btn{background:var(--white);color:var(--burgundy)} /* ── 7.10 Дробление к низу: три колонки ───────────────────────────────── */ .bottom{margin-top:var(--gap-surface);display:grid;grid-template-columns:1.15fr 1fr .85fr;gap:var(--gap-surface)} .bottom .surface{padding:32px} .bottom h3{font-size:26px;line-height:1.25;margin-bottom:20px} .faq__row{display:flex;align-items:center;justify-content:space-between;gap:12px; min-height:56px;padding:16px 0;border-bottom:1px solid var(--border);font-size:16px} .faq__row:last-child{border-bottom:0} .sub{background:var(--blush)} .sub h3{color:var(--burgundy)} .sub p{font-size:14px;line-height:1.5;color:var(--wine-text);margin:0 0 20px} .sub input{width:100%;min-height:52px;padding:0 16px;border-radius:var(--radius-pill); background:rgba(255,255,255,.5);border:1px solid var(--border);font:inherit;margin-bottom:12px} .sub .btn{width:100%} /* ── Подвал ───────────────────────────────────────────────────────────── */ /* ═══ Планшет 1024 ════════════════════════════════════════════════════ */ @media (max-width:1100px){ .grid-4{grid-template-columns:repeat(3,minmax(0,1fr))} .card__ph{height:200px} .hero__copy{padding:52px 40px} .hero__media{height:auto;min-height:420px} .bottom{grid-template-columns:repeat(2,minmax(0,1fr))} .bottom .sub{grid-column:1 / -1} } /* ═══ Мобильная 390: поверхности встык, промежутки съедают экран ═══════ */ @media (max-width:767px){ :root{--gap-surface:12px} .container{width:min(var(--container),100% - 32px)} /* Поиск не прячем, а переносим строкой под шапку — как на боевом сайте */ .hero{margin-top:12px;border-radius:18px} .hero__grid{grid-template-columns:1fr;min-height:0} .hero__copy{padding:36px 20px 28px} /* поля 16-20, не 22: см. §9 */ .hero h1{font-size:min(48px,9vw)} /* держит и Manrope, и Georgia на 320 */ .hero p{font-size:17px;margin-bottom:24px} .hero__cta .btn{width:100%} .hero__note{display:none} .hero__media{height:auto;min-height:280px;padding:0 20px} .surface{padding:24px 20px} .claims{padding:24px 20px} .claims__grid{grid-template-columns:1fr;gap:18px} .dirs{grid-template-columns:1fr;gap:12px} .dir{padding:22px;min-height:0} .dir__t{font-size:22px} .dir__arrow{position:static;margin-top:12px} .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .card{background:var(--white);border-radius:12px;padding:12px;gap:8px} .card__ph{height:150px} .card__name{font-size:15px;min-height:3.6em} .card__buy{flex-direction:column;align-items:stretch} .card .btn{width:100%} .two,.bottom{grid-template-columns:1fr} .wholesale{padding:28px;grid-template-columns:1fr;gap:20px} .wholesale__form{justify-content:stretch} .wholesale input,.wholesale .btn{width:100%} } /* ═══ 320 — контрольная ширина WCAG 1.4.10 Reflow ═════════════════════ */ @media (max-width:400px){ /* Боковое поле телефона по макету 16 с каждой стороны */ .container{width:calc(100% - 32px)} .hero__copy{padding:28px 16px 24px} .grid-4{grid-template-columns:1fr} .card__ph{height:200px} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ── Листинг ─────────────────────────────────────────────────────────── */ .listing{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--gap-surface);margin-top:24px} .filters{align-self:start;position:sticky;top:16px;padding:28px} /* Крошки по макету: всё в одну линию по центру, текущая страница тёмная — иначе непонятно, где ты находишься. */ /* Только margin-top: сокращённая запись обнуляла боковые поля, и там, где крошки сами себе контейнер (подборки, опт), они прижимались к левому краю окна — .container ставит поля через margin-inline:auto, а «margin:22px 0 0» его затирал */ .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px;font-size:13px;line-height:1.6;color:var(--muted)} /* На телефоне ссылка в строке должна ловиться пальцем: добавляем вертикальный запас, не раздвигая саму строку. */ /* Строчная ссылка держит базовую линию; запас под палец даём полями, а не высотой строки. */ /* Все звенья одной высоты, иначе разделители съезжают относительно слов. Запас под палец даём всей строке, а не отдельным ссылкам. */ .crumbs > *{display:inline-flex;align-items:center;min-height:21px} .crumbs a{color:var(--muted)} .crumbs [aria-current]{color:var(--ink)} @media (max-width:767px){ /* По эталонам мобильных экранов крошки — одна строка с прокруткой, кегль 12. С переносом последнее звено уезжало на вторую строку, а разделитель оставался висеть в конце первой: путь читался как оборванный. Прокрутка держит порядок и на длинных названиях. */ .crumbs{flex-wrap:nowrap;gap:8px;overflow-x:auto;white-space:nowrap; font-size:12px;scrollbar-width:none;-ms-overflow-style:none} .crumbs::-webkit-scrollbar{display:none} .crumbs > *{flex:none;min-height:34px}} .crumbs a:hover{color:var(--burgundy)} .card__ph{display:flex} .card__ph img{height:100%;width:auto;object-fit:contain} .chip{cursor:pointer} .chip:hover{border-color:var(--burgundy);color:var(--burgundy)} /* ── Карточка товара ─────────────────────────────────────────────────── */ /* ── Пагинация ───────────────────────────────────────────────────────── */ .page-numbers{display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:0 12px;margin-right:8px; border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--ink)} .page-numbers.current{background:var(--burgundy);color:var(--white);border-color:var(--burgundy)} ul.page-numbers{list-style:none;display:flex;flex-wrap:wrap;gap:0;padding:0;margin:0} @media (max-width:900px){ .listing{grid-template-columns:1fr} .filters{position:static} } /* ── Правки после осмотра боевых страниц 30.08 ───────────────────────── */ /* Ссылки на тёмном наследуют цвет полосы: бордовый по чёрному не читается */ /* Товары лежат на белой панели — как на боевой главной. Плейсхолдер «Фото готовится» фарфоровый: на песке страницы он был не виден. */ .goods{background:var(--white);border-radius:var(--radius-surface);padding:32px} .goods .section__head{margin:0 0 20px} .grid-4{align-items:stretch} .grid-4 .card{height:100%} .card__buy{margin-top:auto;padding-top:8px} /* Счётчик у чипа фильтра — отдельным словом, а не «FANCL16» */ .chip b{font-weight:400;color:var(--muted);margin-left:8px} /* Список страниц — контейнер, а не таблетка: рамку носят только звенья */ ul.page-numbers{border:0;min-height:0;padding:0;margin:0} ul.page-numbers li{display:inline-flex} /* Фильтры на телефоне свёрнуты: иначе до товаров надо пролистать экран */ .filters summary{display:flex;align-items:center;justify-content:space-between; min-height:44px;cursor:pointer;font-size:20px;font-weight:600;list-style:none} .filters summary::-webkit-details-marker{display:none} .filters summary::after{content:"";width:10px;height:10px;margin-left:12px; border-right:2px solid var(--border-strong);border-bottom:2px solid var(--border-strong); transform:rotate(45deg) translateY(-3px);transition:transform .15s} .filters[open] summary::after{transform:rotate(-135deg) translateY(-1px)} @media (min-width:901px){.filters summary::after{display:none} .filters summary{cursor:default}} /* Имя товара распирает карточку, а цена и кнопка прижаты к низу: иначе в ряду они пляшут по высоте вслед за длиной названия. */ .card__name{margin-bottom:auto} .card__price,.card .btn{white-space:nowrap} .card .btn{padding:0 14px} /* На узкой карточке цена и кнопка в строку не помещаются — ставим друг под друга */ @media (max-width:700px){ .card__buy{flex-direction:column;align-items:stretch;gap:8px} .card .btn{width:100%} } /* На телефоне белую плитку носит сама карточка (так в мобильном артборде), поэтому панель под сеткой становится прозрачной — белое на белом не нужно. */ @media (max-width:700px){ .goods{background:transparent;padding:0} .goods .section__head{margin:0 0 12px} } /* В листинге две колонки держим до 320: один товар на экран — это не просмотр каталога из 36 позиций, а листание по одному. */ @media (max-width:400px){ .listing .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .listing .card__ph{height:130px} .listing .card__name{font-size:14px} } /* ── Выдвижное меню телефона ─────────────────────────────────────────── */ padding:20px;display:flex;flex-direction:column;overflow-y:auto} min-height:56px;margin-bottom:12px} line-height:1;color:var(--ink);cursor:pointer} color:var(--ink);border-bottom:1px solid var(--border)} /* Включённый фильтр видно без наведения: цветом, а не только рамкой */ .chip--on{background:var(--burgundy);border-color:var(--burgundy);color:var(--white)} .chip--on b{color:var(--blush)} .chip--on:hover{color:var(--white)} /* ── По разбору Кодекса 30.08 ────────────────────────────────────────── */ /* Ссылка «к содержимому» — первое, на что попадает клавиатура */ .skip{position:absolute;left:-9999px;top:0;z-index:100} .skip:focus{left:8px;top:8px;padding:12px 18px;background:var(--white); border-radius:var(--radius-pill);box-shadow:0 2px 12px rgba(0,0,0,.2)} /* Поиск: было inline outline:0 — клавиатурный пользователь не видел, где он */ /* Поле занимает всю высоту таблетки: нажатие мимо текста должно попадать в поиск, а не в пустоту вокруг него. */ /* var(--text-faint) давал 2.8:1 на белом — обычному тексту нужно 4.5:1 */ .chip{color:var(--muted)} .filters summary::after{border-color:var(--muted)} /* Длинный бренд или фасовка без пробелов не должны рвать вёрстку на 320 */ .chip,.crumbs,.card__name,.card__meta,h1,h2{overflow-wrap:anywhere;min-width:0} .chip{max-width:100%} .wholesale input{min-width:0} /* Проза из редактора: ссылки в ней должны быть отличимы от текста */ .proza{font-size:17px;line-height:1.65} .proza a{text-decoration:underline} .proza p{margin:0 0 14px;max-width:70ch;text-wrap:pretty} .proza p:last-child{margin-bottom:0} /* Подзаголовки в тексте: общее правило .section h2 даёт 38 px — размер заголовка страницы. Внутри статьи это спорит с текстом и съедает воздух, поэтому здесь своя ступень */ .proza h2{margin:32px 0 10px;font-size:21px;line-height:1.3;letter-spacing:-.015em} .proza h2:first-child{margin-top:0} .proza h3{margin:24px 0 8px;font-size:17px;line-height:1.35} .proza ul,.proza ol{margin:0 0 14px;padding-left:22px} .proza li{margin-bottom:6px} .proza strong{font-weight:600} /* Раздел без фильтров отдаёт всю ширину товарам */ .listing--nofilters{grid-template-columns:minmax(0,1fr)} /* ── Индекс брендов ──────────────────────────────────────────────────── */ .brand-list__row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px; align-items:start;padding:18px 0;border-bottom:1px solid var(--border)} .brand-list__row:last-child{border-bottom:0} .brand-list__name{font-size:18px;font-weight:600;letter-spacing:.02em} @media (max-width:700px){ .brand-list__row{grid-template-columns:1fr;gap:10px} } /* Название товара — заголовок h2, и его накрывало правило .section h2 (0,1,1 против 0,1,0 у .card__name): в листинге имена стали 38px. Компонентный размер должен быть сильнее секционного. */ .card .card__name{font-size:16px;line-height:1.35} @media (max-width:700px){ .card .card__name{font-size:15px} } @media (max-width:400px){ .listing .card .card__name{font-size:14px} } /* Пагинацию рисует WooCommerce, и её собственные селекторы длиннее наших: страница подсвечивалась вукомерсовским сиреневым. Пишем той же длиной, а не !important. */ .woocommerce nav.woocommerce-pagination ul{border:0;margin:0;padding:0; display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .woocommerce nav.woocommerce-pagination ul li{border:0;overflow:visible} .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{ display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:0 14px; border:1px solid var(--border);border-radius:var(--radius-pill); background:transparent;color:var(--ink);font-size:15px} .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li a:focus{ background:var(--burgundy);border-color:var(--burgundy);color:var(--white)} /* На коротких страницах — 404, журнал, служебные — подвал висел посреди экрана, а под ним оставалась пустая полоса фона. Прижимаем к низу. */ body{min-height:100vh;display:flex;flex-direction:column} body > main{flex:1 0 auto} /* Короткое сообщение не должно растягиваться на всю ширину страницы */ .empty--tight{max-width:56ch} /* ═══════════════════════════════════════════════════════════════════════ ШАПКА И ПОДВАЛ — по боевой главной Величины сняты с неё, а не подобраны: полоса 42 (телефон 36), шапка 83 (61), логотип 172×29 (118×20), меню 14, поиск 597×48, действия 56 с подписями 12 и счётчиком корзины 18×18. Подвал: логотип 180×31, описание 13, заголовки колонок 12/600, ссылки 15 со строкой 24. ═══════════════════════════════════════════════════════════════════════ */ /* Интерлиньяж шапки 1.6 — как на главной; в теле страниц остаётся 1.55 */ .utility{background:var(--ink);color:var(--white);font-size:12px;line-height:1.6} .utility__in{display:flex;align-items:center;justify-content:space-between; gap:16px;min-height:42px} .utility__left{font-weight:600} .utility__right{display:flex;align-items:center;gap:26px} .utility a{color:inherit} .utility a:hover{color:var(--blush)} /* Шапка липкая, как в макетах листинга и главной. От неё же считается прилипание панели фильтров (104 = 82 шапки + 22 зазора): пока шапка была relative, над фильтрами при прокрутке висела пустота в её рост. */ .header{position:sticky;top:0;z-index:30;line-height:1.6;background:rgba(247,242,236,.98); backdrop-filter:saturate(140%) blur(6px); border-bottom:1px solid rgba(217,207,202,.6)} .header__in{display:flex;align-items:center;gap:24px;height:82px} .burger{display:none;width:44px;height:44px;flex:none;align-items:center; justify-content:center;border:0;background:0;color:var(--ink);cursor:pointer} /* Логотип шапки. Имя .brand занято плашкой бренда в блоке «Бренды» на главной — оттуда логотип получал min-height 52 и поля 26, и обёртка 224×52 сдвигала меню с поиском вправо на сорок пикселей. */ .logo{display:block;flex:none;line-height:0} .logo img{display:block;width:172px;height:29px} .nav{display:flex;align-items:center;gap:20px;font-size:14px;flex:none} /* Зазор до стрелки 6, сама стрелка 14 — так стоит на главной */ .nav__item{display:inline-flex;align-items:center;gap:6px} .nav__link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)} .nav__link:hover{color:var(--burgundy)} .nav__toggle{position:relative;display:inline-flex;align-items:center; justify-content:center;width:14px;min-height:44px;padding:0;border:0; background:0;color:var(--muted);cursor:pointer} /* Сама стрелка 14px, как на главной, но нажимать можно по площади вокруг неё: раскладку это не двигает. */ /* Влево не расширяем: там ссылка пункта, и её край должен оставаться кликабельным как ссылка. Весь запас уходит вправо. */ .nav__toggle::after{content:'';position:absolute;inset:0 -16px 0 0} .nav__item:hover .nav__toggle,.nav__toggle[aria-expanded=true]{color:var(--burgundy)} .nav__toggle svg{width:14px;height:14px;flex:none;transition:transform .15s} .nav__toggle[aria-expanded=true] svg{transform:rotate(180deg)} /* ── Выпадающие меню шапки ────────────────────────────────────────── */ /* Панель шириной контейнера 1280, как в макете, а не во всю ширину окна */ .drop{position:absolute;left:0;right:0;top:100%;z-index:40} .drop__in{max-width:var(--container);margin-inline:auto} .drop__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:var(--white);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 40px rgba(20,15,17,.12);overflow:hidden} .drop__in--brands{grid-template-columns:repeat(3,minmax(0,1fr))} .drop__col{padding:26px 28px;border-right:1px solid var(--border)} .drop__col:last-child{border-right:0} .drop__col--note{background:var(--porcelain)} .drop__t{margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} /* Строки меню в макете 24 высотой и полужирные: это список разделов, а не набор кнопок. Высота ниже нашего стандарта — так в макете. */ /* В первом столбце ссылки лежат прямо в колонке — зазор тот же */ .drop__col > .drop__row + .drop__row{margin-top:12px} .drop__list{display:flex;flex-direction:column;gap:12px} .drop__link{display:flex;align-items:center;min-height:24px;font-size:15px; color:var(--ink)} .drop__link:hover{color:var(--burgundy)} /* Ссылки идут столбцом с зазором 12; счётчик — глухой цифрой справа */ .drop__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:15px;font-weight:600;color:var(--ink)} .drop__row:hover{color:var(--burgundy)} .drop__row b{font-size:12px;font-weight:400;color:var(--muted)} .drop__chips{display:flex;flex-wrap:wrap;gap:8px} .drop__all{display:inline-flex;align-items:center;min-height:40px; font-size:13px;font-weight:600;color:var(--burgundy)} .drop__p{margin:0 0 20px;font-size:14px;line-height:1.5;color:var(--muted)} .drop__go{min-height:44px;padding:0 22px;font-size:14px} /* Не `search`: этим классом WordPress помечает на странице результатов поиска, и правила поля прилетали всей странице — шапка ужималась до ширины содержимого. */ .searchbar{flex:1;min-width:0;display:flex;align-items:center; height:48px;padding:0;border-radius:var(--radius-pill); background:var(--white);border:1px solid var(--border)} .search__input{flex:1;min-width:0;height:46px;padding:0 0 0 18px;border:0; background:0;font:inherit;font-size:14px;outline:0;color:var(--ink)} .search__input::-webkit-search-cancel-button{display:none} .search__go{width:48px;height:46px;flex:none;display:inline-flex; align-items:center;justify-content:center;border:0;background:0; color:var(--muted);cursor:pointer;border-radius:var(--radius-pill)} .search__go:hover{color:var(--burgundy)} /* На широком экране поле стоит в самой шапке, фокус на него наводит человек — кольцо там и остаётся. Телефон снимает его отдельным правилом ниже: там строку раскрывает лупа и сразу наводит фокус сама, и кольцо встречало касание как обводка ошибки. */ .searchbar:focus-within{border-color:var(--burgundy); outline:2px solid var(--burgundy);outline-offset:2px} .search__go:focus-visible{outline:2px solid var(--burgundy);outline-offset:-2px} /* Промежуток 14 и поля 6/4 — снято с шапки главной */ .actions{display:flex;align-items:center;gap:14px;flex:none} /* Поля и промежуток сняты с главной: 6px 4px, зазор 2. */ .act{position:relative;display:inline-flex;flex-direction:column; align-items:center;justify-content:flex-start;gap:2px;padding:6px 4px; min-width:48px;min-height:56px;font-size:12px;color:var(--ink)} .act:hover{color:var(--burgundy)} /* Строка подписи 1.6 — иначе подпись садится на три пункта ниже эталона */ .act__t{line-height:1.6} .act--find{display:none;border:0;background:0;cursor:pointer;color:var(--ink); border-radius:var(--radius-pill)} /* Строка поиска под шапкой: раскрывается лупой, по эталону «Шапка бой моб» */ .hsearch{display:none} .hsearch[hidden]{display:none} /* Раскрытый поиск подсвечивает кнопку — по эталону «Шапка бой моб» */ .act--find[aria-expanded="true"]{background:#EFE7DF} .act__n{font-size:12px} /* Кружок счётчика 20×20 под кегль 12 — меньше выглядит обрубленным */ .act__n[hidden]{display:none} .act__n{position:absolute;top:0;right:2px;min-width:20px;height:20px; display:inline-flex;align-items:center;justify-content:center;padding:0 5px; border-radius:999px;background:var(--burgundy);color:var(--white); font-size:12px;font-weight:600;line-height:1} /* ── Подвал ───────────────────────────────────────────────────────── */ /* Интерлиньяж 1.6 — как в подвале главной: иначе колонки короче на 7px */ /* Перед подвалом в макетах 64, а не общий межблочный зазор 20 */ .footer{margin-top:64px;line-height:1.6;background:var(--ink);color:var(--white)} .footer__in{display:grid;grid-template-columns:395fr 247fr 247fr 247fr;gap:48px; padding:76px 0 38px} .footer__brand img{display:block;width:180px;height:auto;margin-bottom:18px} .footer__about{max-width:310px;margin:0;font-size:13px;line-height:1.6; color:rgba(255,255,255,.6)} .footer__t{font-size:12px;line-height:19px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 17px} .footer__list{display:flex;flex-direction:column;font-size:15px; color:rgba(255,255,255,.86)} .footer__list a,.footer__list span{display:flex;align-items:center;height:24px; margin:5px 0;color:inherit} /* Время работы — вторичная строка, а не пункт меню */ .footer__list span{color:rgba(255,255,255,.6)} .footer__list a:hover{color:var(--white)} .footer__list a.footer__moved{display:none} /* дубль для мобильной колонки */ .footer__list a.footer__wide{display:flex} /* «Журнал» — только широкий */ .footer__bottom{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px; padding:18px 0 22px;border-top:1px solid rgba(255,255,255,.12); font-size:12px;color:rgba(255,255,255,.5)} .footer__bottom a{color:inherit} .footer__bottom a:hover{color:var(--white)} /* ── Выдвижное меню телефона ──────────────────────────────────────── */ /* Меню телефона по макету: панель слева, подложка справа от неё. Скругление и тень только со стороны содержимого. */ /* hidden обязан перебивать display:grid, иначе меню висит поверх сайта */ .drawer[hidden]{display:none} .drawer{position:fixed;inset:0;z-index:60;display:grid; grid-template-columns:auto minmax(0,1fr)} .drawer::after{content:'';grid-area:1 / 2;background:rgba(20,15,17,.45)} .drawer__in{grid-area:1 / 1;width:min(88vw,340px);height:100%;overflow-y:auto; /* Правка 02.09: панель прямая от края до края. Скругление справа оставляло у самого края полоску фона и читалось как щель. */ background:var(--white);border-radius:0;padding:18px 20px 32px; box-shadow:8px 0 32px rgba(20,15,17,.16); display:flex;flex-direction:column;gap:0} .drawer__head{display:flex;align-items:center;justify-content:space-between; gap:16px;margin-bottom:22px} .drawer__head img{display:block;width:120px;height:auto} .drawer__x{display:grid;place-items:center;width:44px;height:44px;padding:0; border:0;background:0;color:var(--ink);cursor:pointer;border-radius:var(--radius-pill)} .drawer__x svg{width:24px;height:24px;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round} .drawer__t{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)} .drawer__nav{display:flex;flex-direction:column; border-top:1px solid var(--border)} .drawer__nav a{display:flex;align-items:center;justify-content:space-between; gap:12px;min-height:56px;border-bottom:1px solid var(--border); font-size:16px;font-weight:600;color:var(--ink)} .drawer__nav a b{font-size:12px;font-weight:400;color:var(--muted)} /* Знак пользователя у входа — по эталону «Меню моб бой» от 06.09: 21 пиксель, обводка цвета подписей, на месте чисел из каталога */ .drawer__acc svg{width:21px;flex:none;fill:none;stroke:var(--muted); stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .drawer__t--2{margin-top:22px} /* Первый список главный, и отличается он не только высотой строки. В макете разделы каталога набраны полужирным, а всё остальное — обычным начертанием: на одинаковом весе три верхних пункта переставали читаться как главные. */ .drawer__nav a{min-height:56px} .drawer__nav--2 a{min-height:52px;font-weight:400} .drawer__hours{margin:20px 0 0;font-size:13px;color:var(--muted)} /* Кнопка внизу меню — единственный сплошной акцент на этом экране */ .drawer__cta{display:inline-flex;align-items:center;justify-content:center; min-height:50px;margin-top:22px;padding:0 20px;background:var(--burgundy); color:var(--white);border-radius:var(--radius-pill);font-size:15px; font-weight:600} .drawer__cta:hover{background:var(--burgundy-hover);color:var(--white)} .drawer__nav{display:flex;flex-direction:column} /* ═══ Планшет ══════════════════════════════════════════════════════ */ @media (max-width:1100px){ .header__in{gap:16px} .nav{gap:18px} .act__t{display:none} .act{min-height:44px} .footer__in{grid-template-columns:1.4fr 1fr 1fr;gap:32px} .footer__brand{grid-column:1 / -1} } /* ═══ Телефон ══════════════════════════════════════════════════════ */ @media (max-width:767px){ /* Плашка по эталону: одна строка, 36 пикселей, текст по центру. Часы работы и ссылка на опт уезжают — на 390 они не помещаются и превращают строку в две */ .utility__right{display:none} .utility__in{justify-content:center;min-height:36px;text-align:center} /* height:82px из общего правила min-height не отменяет — снимаем его явно, иначе строка шапки остаётся десктопной высоты. 60 по эталону */ .header__in{gap:8px;height:auto;min-height:60px} .burger{display:inline-flex} /* По макету логотип стоит сразу за бургером, а не по центру: место справа занимают поиск и корзина, и симметрия там мнимая — иконок две, а бургер один. */ .logo{flex:1;text-align:left} /* 118×20 по главной: высота 29 растягивала знак */ /* 112 по эталону «Шапка бой моб» */ .logo img{width:112px;height:19px;margin-inline:0} /* Строка поиска живёт только на телефоне: на широком экране поле стоит в самой шапке и прятать его незачем */ /* Своего фона у полосы нет: в эталоне она стоит на фоне шапки, а белый давал шов ровно под логотипом */ .hsearch{display:block;padding:0 0 12px} .hsearch[hidden]{display:none} .hsearch .searchbar{display:flex;flex:none;height:48px;margin:0} /* Высоту детям не задаём: внутри рамки 46, и ровно 48 переливались на пиксель вверх и вниз. Кегль 16 — иначе iOS увеличит страницу при фокусе; в эталоне 15, но зум дороже двух пунктов кегля */ .hsearch .search__input{padding-right:18px;font-size:16px} .hsearch .search__go{color:var(--ink)} /* Отделить касание от клавиатуры через :focus-visible нельзя: текстовое поле по спецификации подходит под него при любом способе фокусировки. Индикатором остаётся бордовая рамка — как на странице выдачи. */ .hsearch .searchbar:focus-within{outline:0} .nav{display:none} /* В самой шапке поля нет: на 390 ему негде встать. Оно раскрывается строкой под шапкой по нажатию на лупу */ .header__in > .searchbar{display:none} .actions{gap:0} /* Подписи под иконками здесь нет, а выравнивание по верху осталось с десктопа: лупа сидела на пять пикселей выше центра своего кружка */ .act{min-width:44px;min-height:44px;justify-content:center;padding:0} .act--find{display:inline-flex} .act--user,.act--fav{display:none} .act--cart .act__n{top:2px;right:0;min-width:20px;height:20px} /* Подвал главной на телефоне компактный: логотип поменьше, описание во всю ширину, две колонки, «Компания» отдельной колонкой не идёт. */ .footer__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px; padding:40px 0 26px} .footer__brand{grid-column:1 / -1} .footer__brand img{width:150px;margin-bottom:14px} .footer__about{max-width:none;font-size:13px;line-height:1.45} .footer__t{margin:0 0 12px} .footer__list{font-size:14px} .footer__list a,.footer__list span{height:22px;margin:4px 0;line-height:1.35} /* Состав мобильного подвала как на главной: «Журнал» и колонка «Компания» уходят, «О компании» встаёт четвёртым к покупателям. */ .footer__col--company{display:none} .footer__list a.footer__wide{display:none} .footer__list a.footer__moved{display:flex} /* В макете копирайт и ссылки идут строкой; перенос — по месту, а не принудительным столбиком. */ .footer__bottom{align-items:baseline;gap:6px 18px;padding:16px 0 24px} } /* Порог 360, а не 400: на 390 подвал главной держит две колонки, и схлопывать его туда же было ошибкой. */ @media (max-width:360px){ .footer__in{grid-template-columns:1fr} } /* ═══ Строка товара в списках заказа ═══════════════════════════════════ Заглушка вместо снимка и подпись бренда встречаются в корзине, оформлении, на странице результата и в кабинете. Пока правила жили в cart.css, на остальных страницах «IM» показывалось обычным текстом у края, а бренд терял разрядку. ═════════════════════════════════════════════════════════════════════ */ .crow__mono{display:grid;place-items:center;width:100%;aspect-ratio:4/5; font-size:20px;font-weight:700;letter-spacing:.08em;color:#A7969C} .crow__brand{margin:0 0 6px;font-size:12px;font-weight:700; letter-spacing:.1em;color:var(--muted)} /* ═══ Сводка заказа ═══════════════════════════════════════════════════ Одни и те же строки сумм в корзине, оформлении, на странице результата и в кабинете. Раньше жили в cart.css, и там, где его не подключали, значок плашки БАД оставался без размеров и растягивался во всю ширину чёрным кругом. ═════════════════════════════════════════════════════════════════════ */ .sum__box{padding:26px 28px 28px;background:var(--white);border-radius:20px} .sum__t{margin:0 0 20px;font-size:19px;font-weight:600;letter-spacing:-.01em} .sum__row{display:flex;align-items:baseline;justify-content:space-between; gap:16px;margin-bottom:12px;font-size:15px} .sum__row span{color:var(--muted)} .sum__row b{font-weight:600;color:var(--ink)} .sum__row--off b{color:#2F7A55} /* display:flex сильнее [hidden] — строку скидки без скидки надо гасить явно */ .sum__row[hidden]{display:none} .sum__later{text-align:right;font-size:14px;color:#3C3336!important} .sum__total{display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding-top:16px;border-top:1px solid var(--border)} .sum__total span{font-size:16px;font-weight:600} .sum__total b{font-size:26px;font-weight:700;letter-spacing:-.02em} .sum__note{margin:4px 0 0;text-align:right;font-size:12px;color:var(--muted)} .sum__bad{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0; padding:14px 16px;background:#EFE7DF;border-radius:16px; font-size:12px;line-height:1.45;color:#3C3336;text-wrap:pretty} .sum__bad svg{width:16px;flex:none;margin-top:2px;fill:none;stroke:var(--muted); stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* ── Полоса уведомлений ──────────────────────────────────────────────── Компонент витрины от 01.09: ответ на действие покупателя. Цвет несёт только иконка — тип читается ещё и текстом, на цвет не полагаемся. */ .notices{width:min(var(--container),100% - 80px);margin:16px auto 0; display:grid;gap:12px} .notice{position:relative;overflow:hidden;display:grid; grid-template-columns:20px minmax(0,1fr) auto 40px;align-items:center; gap:12px;padding:16px 8px 18px 16px;background:var(--white); border:1px solid var(--border);border-radius:var(--radius-card); animation:noticeIn .22s ease-out} /* В списке ошибок кнопки-ссылки нет, и её пустая колонка вместе с промежутком отодвигала крестик от края на полсотни пикселей */ .notice--list{align-items:start;grid-template-columns:20px minmax(0,1fr) 40px} /* Иконка ловит середину полосы, пока строка одна. У списка ошибок и переноса на телефоне она встаёт по первой строке — так велит хендофф. */ .notice__ic{display:grid;place-items:center;width:20px;height:20px} .notice--list .notice__ic{align-self:start;margin-top:1px} .notice__ic svg{width:20px;height:20px;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .notice--success .notice__ic{color:var(--in-stock)} .notice--error .notice__ic{color:#9B2C3C} .notice--info .notice__ic{color:#38566E} .notice__body{min-width:0} .notice__t{margin:0;font-size:14px;line-height:1.45;color:var(--ink)} .notice__t--head{font-weight:700;margin-bottom:8px} .notice__list{display:grid;gap:6px;margin:0;padding:0 0 0 18px; font-size:14px;line-height:1.45;color:#3C3336} .notice__go{display:inline-flex;align-items:center;min-height:40px; padding:0 18px;background:var(--white);border:1px solid var(--border); border-radius:var(--radius-pill);font-size:14px;font-weight:600; color:var(--ink);white-space:nowrap} .notice__go:hover{border-color:var(--ink);color:var(--ink)} .notice__x{display:grid;place-items:center;width:40px;height:40px;padding:0; background:0;border:0;border-radius:var(--radius-pill);color:var(--muted); cursor:pointer} .notice__x svg{width:18px;height:18px;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round} .notice__x:hover{color:var(--ink);background:var(--porcelain)} /* Тонкая линия отсчёта: успех гаснет сам, и это видно */ .notice__timer{position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--in-stock);transform-origin:left center; animation:noticeTimer 5s linear forwards} .notice:hover .notice__timer,.notice:focus-within .notice__timer{ animation-play-state:paused} @keyframes noticeIn{from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none}} @keyframes noticeTimer{from{transform:scaleX(1)}to{transform:scaleX(0)}} @media (prefers-reduced-motion:reduce){ .notice{animation:none} .notice__timer{display:none} } @media (max-width:767px){ .notices{width:calc(100% - 32px)} /* Кнопка уходит под текст, крестик держит поле касания 44 */ .notice{grid-template-columns:20px minmax(0,1fr) 36px;padding:12px 6px 12px 14px} /* Кнопка уходит во вторую строку, а крестик должен остаться в первой: без явных ячеек он вставал следом за ней и уезжал вниз */ .notice__ic{grid-area:1 / 1} .notice__body{grid-area:1 / 2} .notice__x{grid-area:1 / 3;width:36px;height:36px;margin:-4px} .notice__go{grid-area:2 / 2;margin-top:10px} } /* WooCommerce после добавления дописывает под кнопку ссылку «Просмотр корзины». В макете её нет, и она разъезжает плитку: ответ покупателю даёт счётчик в шапке и полоса уведомления. */ .added_to_cart{display:none !important} /* ── Всплывающее «добавлено в корзину» ───────────────────────────────── Ответ на действие приходит туда, куда покупатель и смотрит после нажатия, — к корзине в шапке. Полоса в потоке для этого не годилась: при добавлении из середины списка она появлялась выше экрана. */ .toasts{position:fixed;z-index:60;top:96px;right:20px;display:grid;gap:10px; width:min(370px,calc(100vw - 32px));pointer-events:none} .toasts:empty{display:none} .toast{position:relative;overflow:hidden;display:grid; grid-template-columns:64px minmax(0,1fr) 28px;align-items:center;gap:14px; padding:14px;background:var(--ink);color:var(--white); border-radius:var(--radius-card);box-shadow:0 18px 40px rgba(20,15,17,.28); pointer-events:auto;animation:toastIn .24s ease-out} .toast--gone{animation:toastOut .18s ease-in forwards} /* Линии отсчёта у плашки нет: она висит поверх содержимого пять секунд и уходит сама, полоска времени тут только мельтешила бы. */ .toast__ph{display:grid;place-items:center;width:64px;height:64px; background:var(--white);border-radius:12px;overflow:hidden} .toast__ph img{width:100%;height:100%;object-fit:cover} .toast__ph span{font-size:11px;font-weight:600;letter-spacing:.06em; color:var(--text-faint)} .toast__body{min-width:0} .toast__label{display:flex;align-items:center;gap:6px;margin:0 0 6px; font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--blush)} .toast__label svg{width:14px;height:14px;flex:none;fill:none; stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* Название держим в двух строках: третья уже выталкивает фасовку */ .toast__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;margin:0;font-size:14px;font-weight:600;line-height:1.35; letter-spacing:-.01em;color:var(--white)} .toast__spec{margin:6px 0 0;font-size:12px;color:rgba(255,255,255,.62)} .toast__x{display:grid;place-items:center;align-self:start;width:28px;height:28px; padding:0;background:0;border:0;border-radius:var(--radius-pill); color:rgba(255,255,255,.6);cursor:pointer} .toast__x svg{width:16px;height:16px;fill:none;stroke:currentColor; stroke-width:1.8;stroke-linecap:round} .toast__x:hover{color:var(--white);background:rgba(255,255,255,.12)} /* Вся плашка — ссылка в корзину, кроме крестика */ .toast__go{position:absolute;inset:0;border-radius:inherit} .toast__go:focus-visible{outline:2px solid var(--blush);outline-offset:-3px} @keyframes toastIn{from{opacity:0;transform:translateX(12px)} to{opacity:1;transform:none}} @keyframes toastOut{to{opacity:0;transform:translateX(12px)}} @media (prefers-reduced-motion:reduce){ .toast{animation:none} .toast--gone{animation:none;opacity:0} } @media (max-width:767px){ /* Под шапкой во всю ширину: узкая плашка у края теряется */ .toasts{top:92px;right:16px;left:16px;width:auto} .toast{grid-template-columns:56px minmax(0,1fr) 28px;gap:12px;padding:12px} .toast__ph{width:56px;height:56px} } /* ── Зоны нажатия на телефоне ────────────────────────────────────────── Общая часть брифа требует 44×44. Логотип давал 20 по высоте, крошки 34: попасть пальцем можно, но мимо промахиваешься чаще, чем кажется. Поднимаем полями — надпись и кегль остаются прежними. */ @media (max-width:767px){ .logo{display:inline-flex;align-items:center;min-height:44px} .crumbs a,.crumbs span[aria-current]{display:inline-flex;align-items:center; min-height:44px} /* Служебная ссылка для клавиатуры: показывается по фокусу, но и её касание должно попадать в норму */ .skip:focus{min-height:44px;display:inline-flex;align-items:center} }