@font-face{ font-family:'Google Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/google-sans-hebrew.woff2') format('woff2'); unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } @font-face{ font-family:'Google Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/google-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ============================================================================ MOBILE-FIRST ============================================================================ Base rules = the 375px Figma frame. Larger layouts are added with min-width queries only, so phones parse the smallest possible rule set. Breakpoints: 600 · 768 · 992 (burger → full nav) · 1200 · 1440 Type and spacing scale linearly between the two Figma frames via clamp(min, slope·vw + intercept, max) — each token hits the mobile value at 375px and the desktop value at 1920px exactly. Header tokens scale between 992px and 1920px instead, because the full nav only exists above 992. GUTTER ------ --gutter: max(24px, (100vw - 1524px) / 2) This single expression does two jobs: it keeps a comfortable minimum edge padding on small/medium screens AND automatically caps the content column at the design's 1524px on large ones (at 1920px it evaluates to exactly 198px, matching the Figma px-198). No max-width wrappers needed anywhere. ============================================================================ RTL / LTR ============================================================================ Only logical properties are used for direction-dependent values: inset-inline-*, margin-inline-*, padding-inline-*, text-align: start/end, align-items: start/end, flex-start/flex-end. Direction comes solely from dir on ; flipping it to "ltr" mirrors the layout with no CSS changes. Physical left/right appears only where the result is direction-independent or inside an explicit [dir="ltr"] override. NOTE: Figma's physical `text-right` / `items-end` = logical START in RTL. */ :root{ --color-bg: #fff7f1; --color-cream: #f9f3ed; --color-cream-border: #f8f1ec; --color-peach: #fff2e7; --color-dark: #333124; --color-brown: #464334; --color-border: #eee7e0; --color-border-2: #dddbd5; --color-gold: #da9800; --color-ink: #0d0326; --color-white: #ffffff; --shadow-card: 0px 4px 13.1px 0px rgba(235,221,211,0.72); --shadow-card-sm: 0px 4px 6.55px rgba(235,221,211,0.72); --font: 'Google Sans', system-ui, sans-serif; --gutter: max(16px, (100vw - 1524px) / 2); --section-gap: clamp(80px, 3.24vw + 67.9px, 130px); --fs-h1: clamp(32px, 2.46vw + 22.8px, 70px); --fs-h2: clamp(28px, 1.81vw + 21.2px, 56px); --fs-body: clamp(22px, 0.65vw + 19.6px, 32px); --fs-btn: clamp(16px, 0.26vw + 15px, 20px); --fs-name: clamp(18px, 0.39vw + 16.5px, 24px); --fs-quote: clamp(14px, 0.26vw + 13px, 18px); --fs-tag: 14px; --fs-filter-title: clamp(22px, 0.6472vw + 19.5728px, 32px); --fs-menu: clamp(14px, 0.862vw + 5.45px, 22px); --pill-pad: clamp(8px, 0.862vw - 0.55px, 16px); --hdr-gap: clamp(12px, 1.293vw - 0.83px, 24px); --hdr-gap-s: clamp(6px, 1.078vw - 4.69px, 16px); --logo-h: clamp(42px, 1.509vw + 27.03px, 56px); --icon-pad: clamp(6px, 0.323vw + 2.79px, 9px); --cta-pad: clamp(14px, 1.940vw - 5.24px, 32px); --review-photo: clamp(120px, 5.82vw + 62.3px, 174px); } *{ box-sizing: border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ font-family: var(--font); background: var(--color-bg); color: var(--color-dark); overflow-x:hidden; } body.is-nav-open{ overflow:hidden; } img{ display:block; max-width:100%; } a{ text-decoration:none; color:inherit; } ul{ list-style:none; } button{ font-family:inherit; border:none; background:none; cursor:pointer; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ============================================================ CORE GUTENBERG BLOCKS ON THE PAGE CANVAS page.php is a bare canvas: every ACF block draws its own full-width section with --gutter inside. A core block (paragraph, heading, list, image, quote, table, separator — the set allowed in §3) dropped between them is a direct child of
with none of that, so without these rules it would run edge to edge with no vertical rhythm — the reset zeroes all margins. :where() keeps specificity at 0 so any block or page style still wins, and the element list deliberately excludes
/
, which is what the ACF blocks render. ============================================================ */ main > :where(p, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, table, pre){ padding-inline: var(--gutter); margin-block-start:24px; font-size: var(--fs-quote); line-height:1.5; color: var(--color-brown); } main > :where(h2, h3, h4, h5, h6){ font-weight:600; line-height:1.2; color: var(--color-dark); } main > h2{ font-size: var(--fs-h2); } main > h3{ font-size: var(--fs-body); } main > :where(ul, ol){ padding-inline-start: calc(var(--gutter) + 20px); } main > :where(ul, ol) li{ list-style:inherit; } main > ul{ list-style:disc; } main > ol{ list-style:decimal; } main > hr{ margin-block:32px; margin-inline: var(--gutter); border:none; border-block-start:1px solid var(--color-border); } main > figure img{ border-radius:16px; } /* ============================================================ BUTTONS ============================================================ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:16px; border-radius:183px; font-weight:700; font-size: var(--fs-btn); line-height:1.1; white-space:nowrap; transition: opacity .2s ease; } .btn:hover{ opacity:.9; } .btn--primary{ background: var(--color-brown); border:1px solid var(--color-border-2); color: var(--color-white); padding:18px 32px; } /* ============================================================ HEADER — mobile bar: logo (right) · icons · burger (left) ============================================================ */ .site-header{ position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:16px; padding-block:8px; padding-inline: var(--gutter); background: rgba(255,247,241,0.86); backdrop-filter: blur(8px); border-block-end:1px solid var(--color-border); } .logo{ height:50px; display:flex; align-items:center; flex-shrink:0; margin-inline-end:auto; } .logo img{ height:100%; width:auto; object-fit:contain; } .menu-icons{ display:flex; gap:8px; align-items:center; } .icon-round{ position:relative; padding:5px; background: var(--color-dark); border-radius:58px; display:inline-flex; align-items:center; justify-content:center; transition: opacity .2s ease; } .icon-round:hover{ opacity:.85; } .icon-round img{ width:22px; height:22px; } .cart-badge{ position:absolute; inset-block-start:-6px; inset-inline-end:-5px; width:20px; height:20px; border-radius:50%; background: var(--color-gold); color: var(--color-white); font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; } /* display:flex above beats the UA [hidden] rule, so an empty cart needs this explicitly — the badge is hidden server-side and by the cart refresh in main.js. */ .cart-badge[hidden]{ display:none; } /* Standard WordPress a11y utility — the prototype never needed it because it had no real forms. Used for submit buttons that the design does not show but the markup still requires (see myaccount/form-edit-account.php). */ .screen-reader-text{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path: inset(50%); white-space:nowrap; border:0; } .burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:22px; height:22px; flex-shrink:0; } .burger span{ display:block; width:22px; height:2px; background: var(--color-ink); transition: transform .25s ease, opacity .2s ease; } .burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } .site-nav{ position:fixed; inset-block-start:0; inset-inline-start:0; height:100vh; height:100dvh; z-index:110; width:min(320px, 86vw); padding:24px 20px; background: var(--color-bg); border-inline-end:1px solid var(--color-border); display:flex; flex-direction:column; gap:24px; transform: translateX(100%); transition: transform .3s ease; overflow-y:auto; overscroll-behavior:contain; } [dir="ltr"] .site-nav{ transform: translateX(-100%); } .site-nav.is-open{ transform: translateX(0); } .nav-overlay{ position:fixed; inset:0; z-index:105; background: rgba(51,49,36,.45); opacity:0; transition: opacity .3s ease; } .nav-overlay.is-visible{ opacity:1; } /* ============================================================ HEADER — search modal (Figma 1:1946 default state / 1:1927 typing state). Triggered by the header's data-action="open-search" button on every page (js/theme.js "Header: search modal"). Fixed 788px max-width regardless of viewport (only shrinks below ~820px), so its type is NOT tied to the page's --fs-* vw-based clamps — same reasoning as .account-edit-modal__title. Centered via inset:0 + margin:auto, not translate(-50%,-50%), for the same RTL-sign reasons noted on .account-edit-modal above. ============================================================ */ .search-overlay{ position:fixed; inset:0; z-index:200; background: rgba(0,0,0,.8); opacity:0; transition: opacity .3s ease; } .search-overlay.is-visible{ opacity:1; } .search-modal{ position:fixed; inset:0; z-index:210; margin:auto; width:min(788px, calc(100% - 32px)); height:fit-content; max-height:calc(100vh - 32px); overflow-x:hidden; overflow-y:auto; display:flex; flex-direction:column; gap:16px; padding:24px; background: var(--color-bg); border-radius:8px; opacity:0; transform:scale(.96); transition: opacity .2s ease, transform .2s ease; } .search-modal.is-open{ opacity:1; transform:scale(1); } .search-modal[hidden]{ display:none; } .search-modal__head{ display:flex; align-items:flex-start; justify-content:space-between; width:100%; } .search-modal__title{ font-size:24px; font-weight:600; line-height:1.1; color: var(--color-dark); } @media (min-width:600px){ .search-modal__title{ font-size:32px; } } .search-modal__close{ width:35px; height:35px; flex-shrink:0; border:none; background:none; padding:0; cursor:pointer; } .search-modal__close img{ width:100%; height:100%; display:block; } .search-modal__field{ display:flex; flex-direction:column; gap:8px; width:100%; } .search-box{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; height:48px; padding:16px; background: var(--color-border); border:1px solid #ececeb; border-radius:8px; cursor:text; } .search-box__input{ flex:1 1 0; min-width:0; background:none; border:none; padding:0; margin:0; font-family:inherit; font-size:18px; color: var(--color-brown); text-align:end; } .search-box__input:focus{ outline:none; } .search-box__input::placeholder{ color:#78622f; } .search-box__input::-webkit-search-cancel-button{ display:none; } .search-box__icons{ display:flex; align-items:center; gap:4px; flex-shrink:0; } .search-box__icon{ width:24px; height:24px; } .search-box__clear{ width:24px; height:24px; border:none; background:none; padding:0; cursor:pointer; opacity:.24; transition:opacity .2s ease; } .search-box__clear:hover{ opacity:.6; } .search-box__clear img{ width:100%; height:100%; display:block; } .search-modal__count{ width:100%; font-size:18px; color:#505050; opacity:.5; text-align:end; } .search-modal__default{ display:flex; flex-direction:column; align-items:start; gap:16px; width:100%; } .search-modal__default[hidden]{ display:none; } .search-modal__subhead{ width:100%; font-size:24px; font-weight:400; color:#0c0c0c; text-align:end; } .search-suggestions{ display:flex; flex-wrap:wrap; gap:24px; } .search-suggestions__col{ display:flex; flex-direction:column; gap:16px; width:210px; max-width:100%; } .search-suggestions__col a{ display:block; width:100%; font-weight:700; font-size: var(--fs-btn); color: var(--color-brown); text-align:end; } .search-suggestions__col a:hover{ text-decoration:underline; } .search-results{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:16px; width:100%; list-style:none; } .search-results__item{ flex:1 1 140px; max-width:calc(50% - 8px); } .search-result{ display:flex; flex-direction:column; align-items:start; gap:8px; width:100%; height:100%; padding:4px 4px 8px; background: var(--color-white); border:1px solid var(--color-border); border-radius:16px; } .search-result:hover{ border-color: var(--color-border-2); } .search-result__image{ width:100%; aspect-ratio: 460 / 430; border-radius:12px; object-fit:cover; } .search-result__name{ width:100%; padding-inline:4px; font-size:14px; font-weight:600; color: var(--color-brown); text-align:end; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .search-result__price{ width:100%; padding-inline:4px; font-size:14px; font-weight:600; color: var(--color-brown); text-align:end; } .search-result--all{ align-items:center; justify-content:center; min-height:150px; padding:16px; background: var(--color-border); border-color: var(--color-border); text-align:center; font-weight:700; font-size: var(--fs-btn); color: var(--color-brown); } @media (min-width:600px){ .search-results__item{ max-width:calc(33.333% - 11px); } } @media (min-width:768px){ .search-results__item{ flex:0 1 173px; max-width:173px; } .search-result--all{ min-height:208px; } } /* ============================================================ HEADER — login/register modal (Figma 1:1978). Opened by data-action="open-account" (js/theme.js "Header: login/register modal"). Same fixed-width-modal reasoning as .search-modal/ .account-edit-modal above (centering technique, non-fluid title size). ============================================================ */ .auth-overlay{ position:fixed; inset:0; z-index:200; background: rgba(0,0,0,.8); opacity:0; transition: opacity .3s ease; } .auth-overlay.is-visible{ opacity:1; } .auth-modal{ position:fixed; inset:0; z-index:210; margin:auto; width:min(492px, calc(100% - 32px)); height:fit-content; max-height:calc(100vh - 32px); overflow-x:hidden; overflow-y:auto; display:flex; flex-direction:column; gap:16px; padding:60px 24px 24px; background: var(--color-bg); border-radius:16px; opacity:0; transform:scale(.96); transition: opacity .2s ease, transform .2s ease; } .auth-modal.is-open{ opacity:1; transform:scale(1); } .auth-modal[hidden]{ display:none; } .auth-modal__close{ position:absolute; inset-block-start:16px; inset-inline-end:16px; width:35px; height:35px; flex-shrink:0; border:none; background:none; padding:0; cursor:pointer; } .auth-modal__close img{ width:100%; height:100%; display:block; } .auth-tabs{ display:flex; width:100%; border-block-end:2px solid #cbcbcb; } .auth-tab{ flex:1 1 0; margin-block-end:-2px; padding-block:8px; border:none; background:none; cursor:pointer; font-family:inherit; font-size: var(--fs-btn); font-weight:700; color: rgba(70,67,52,.8); border-block-end:2px solid transparent; } .auth-tab.is-active{ color: var(--color-gold); border-block-end-color: var(--color-gold); } .auth-panel{ display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; } .auth-panel[hidden]{ display:none; } .auth-modal__title{ width:100%; font-size:24px; font-weight:600; color:#333124; text-align:center; } @media (min-width:600px){ .auth-modal__title{ font-size:32px; } } .auth-panel .form-field input{ padding:16px; } .auth-panel__submit{ width:100%; } .auth-panel__terms{ width:100%; font-size: var(--fs-quote); color:#acacaf; text-align:center; } .auth-panel__forgot{ font-weight:700; font-size: var(--fs-btn); color: var(--color-brown); } .auth-panel__forgot:hover{ text-decoration:underline; } .auth-terms-check{ display:flex; align-items:center; gap:8px; width:100%; justify-content:flex-start; } .auth-terms-check input{ width:24px; height:24px; flex-shrink:0; accent-color: var(--color-brown); } .auth-terms-check label{ font-size: var(--fs-quote); color: var(--color-brown); } .auth-terms-check label a{ text-decoration:underline; } .menu-pages{ display:flex; flex-direction:column; gap:8px; } .page-pill{ display:flex; background: var(--color-white); border:1px solid var(--color-border); border-radius:42px; padding:10px 16px; font-weight:700; font-size: var(--fs-btn); color: var(--color-dark); white-space:nowrap; transition: background .2s ease; } .page-pill:hover{ background: var(--color-border); } .lang-switch{ display:flex; align-items:center; gap:8px; cursor:pointer; flex-shrink:0; } .lang-label{ font-weight:700; font-size: var(--fs-btn); color: var(--color-dark); } .lang-arrow{ width:20px; height:20px; display:flex; transform: rotate(90deg); } /* ---------- LANG SWITCH — раскрытый список ---------- В Figma раскрытого состояния нет (нарисован один пункт «HE»), но языков два, поэтому список собран на существующих токенах — та же карточка, что у .sort-select. См. CLAUDE.md §8.4. */ .lang-switch{ position:relative; } .lang-switch[aria-expanded="true"] .lang-arrow{ transform: rotate(-90deg); } .lang-switch__menu{ position:absolute; inset-block-start: calc(100% + 8px); inset-inline-start:0; z-index:20; min-width:120px; padding:6px; display:flex; flex-direction:column; gap:2px; background: var(--color-white); border:1px solid var(--color-border); border-radius:12px; box-shadow: var(--shadow-card-sm); } .lang-switch__menu[hidden]{ display:none; } .lang-switch__menu a{ display:block; padding:8px 12px; border-radius:8px; font-size: var(--fs-menu); color: var(--color-dark); white-space:nowrap; } .lang-switch__menu a:hover{ background: var(--color-border); } .lang-switch__menu [aria-selected="true"] a{ background: var(--color-border); font-weight:700; } .header__cta{ width:100%; } .arrow-btn{ width:44px; height:44px; border-radius:44px; background: var(--color-brown); border:1px solid var(--color-border-2); display:flex; align-items:center; justify-content:center; overflow:hidden; transition: background .2s ease, opacity .2s ease; } .arrow-btn:hover{ background:#3a3829; } .arrow-btn img{ width:9px; height:auto; } /* Ссылка не может быть :disabled — у неотключаемого направления пагинации ставится aria-disabled, чтобы правило работало и для /. */ .arrow-btn:disabled, .arrow-btn[aria-disabled="true"]{ opacity:.35; pointer-events:none; } .pagination-prev img{ transform: scaleX(-1); } .pagination-next img{ transform:none; } [dir="ltr"] .pagination-prev img{ transform:none; } [dir="ltr"] .pagination-next img{ transform: scaleX(-1); } .arrow-btn.swiper-button-disabled{ opacity:.35; pointer-events:none; } .cta .btn{ position:relative; z-index:1; } /* ============================================================ FOOTER — mobile: 14 links reflow into 2 multicol columns ============================================================ */ .site-footer{ margin-block-start: var(--section-gap); width:100%; background: var(--color-cream); border-block-start:1px solid var(--color-cream-border); padding-block:24px; padding-inline: var(--gutter); display:flex; flex-direction:column; gap:16px; } .footer__nav{ column-count:2; column-gap:16px; width:100%; } .footer__list{ display:flex; flex-direction:column; font-weight:700; font-size: var(--fs-btn); line-height:1.1; color: var(--color-brown); } .footer__list li{ border-block-start:1px solid var(--color-border); } .footer__list a{ display:flex; justify-content:flex-start; padding-block:6px; transition: opacity .2s ease; } .footer__list a:hover{ opacity:.65; } .footer__contacts{ display:flex; flex-direction:column; gap:16px; align-items:start; } .footer__phones{ display:flex; flex-direction:column; gap:8px; align-items:start; } .footer__row{ display:flex; align-items:center; gap:8px; } .footer__row img{ width:20px; height:20px; flex-shrink:0; } .footer__row span{ font-weight:700; font-size: var(--fs-btn); line-height:1.1; color: var(--color-brown); white-space:nowrap; } .footer__row:hover span{ text-decoration:underline; } .footer__social{ display:flex; gap:16px; } .social-btn{ padding:8px; background: var(--color-white); border:1px solid var(--color-border); border-radius:50px; display:inline-flex; align-items:center; justify-content:center; transition: background .2s ease; } .social-btn:hover{ background: var(--color-border); } .social-btn img{ width:24px; height:24px; } /* ============================================================ ≥ 600px — larger phones ============================================================ */ @media (min-width: 600px){ :root{ --gutter: max(24px, (100vw - 1524px) / 2); } .footer__nav{ column-gap:32px; } } @media (min-width: 768px){ .site-footer{ padding-block:28px; } .footer__nav{ column-count:3; } } /* ============================================================ ≥ 992px — full desktop navigation ============================================================ */ @media (min-width: 992px){ /* ---- header: off-canvas panel dissolves into the bar ---- */ .site-header{ justify-content:space-between; gap: var(--hdr-gap); flex-wrap:wrap; padding-block:16px; } .burger, .nav-overlay{ display:none; } .site-nav{ position:static; display:contents; width:auto; padding:0; background:none; border:none; transform:none; overflow:visible; } .logo{ order:1; height: var(--logo-h); margin-inline-end:0; } .menu-primary{ order:2; flex:1 1 auto; min-width:0; } .lang-switch{ order:3; margin-inline-start:auto; } .menu-icons{ order:4; gap: var(--hdr-gap-s); } .header__cta{ order:5; width:auto; padding-inline: var(--cta-pad); } .menu-pages{ flex-direction:row; flex-wrap:wrap; gap: var(--hdr-gap-s); } .page-pill{ padding:6px var(--pill-pad); font-size: var(--fs-menu); } .lang-label{ font-size: var(--fs-menu); } .icon-round{ padding: var(--icon-pad); } .cart-badge{ inset-block-start:-2px; inset-inline-end:-2px; } /* ---- footer: four columns spread with justify-between ---- */ .site-footer{ flex-direction:row; align-items:flex-start; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-block:32px; } .footer__nav{ display:contents; } .footer__col{ flex:0 0 auto; } .footer__list{ gap:24px; align-items:start; text-align:start; } .footer__list li{ border:none; } .footer__list a{ padding-block:0; } .footer__contacts{ flex:0 0 auto; } .footer__phones{ gap:16px; } .footer__row img{ width:24px; height:24px; } } /* ============================================================================ ABOUT PAGE (about.html) Header, footer and the reviews block reuse the rules above unchanged. ============================================================================ */ :root{ --fs-b3: clamp(16px, 0.26vw + 15px, 20px); --fs-tag-sm: clamp(12px, 0.13vw + 11.5px, 14px); } .section-title{ font-size: var(--fs-h2); font-weight:600; line-height:1.2; color: var(--color-dark); text-align:center; max-width:746px; } .page-pill.is-current{ background: var(--color-border); } /* ---------- BREADCRUMBS ---------- */ .breadcrumbs{ display:flex; align-items:center; justify-content:center; gap:8px; padding-block-start:8px; padding-inline: var(--gutter); font-size: var(--fs-quote); line-height:1.2; color: var(--color-brown); } .breadcrumbs a:hover{ text-decoration:underline; } .breadcrumbs__sep{ width:5px; height:5px; border-radius:50%; background: var(--color-brown); flex-shrink:0; } .breadcrumbs__current{ color: rgba(70,67,52,.8); } .post-card{ display:flex; flex-direction:column; gap:16px; background: var(--color-white); border-radius:16px; padding:16px; box-shadow: var(--shadow-card); height:100%; overflow:hidden; } .post-card__media{ display:block; width:100%; } .post-card__media img{ width:100%; aspect-ratio: 455 / 240; object-fit:cover; border-radius:6px; transition: transform .3s ease; } .post-card:hover .post-card__media img{ transform: scale(1.03); } .post-card__content{ display:flex; flex-direction:column; gap:8px; align-items:start; text-align:start; } .post-card__heading{ display:flex; flex-direction:column; gap:8px; align-items:start; width:100%; } .post-card__tag{ display:inline-flex; align-items:center; justify-content:center; background:#faf1e3; border:1px solid var(--color-border); border-radius:8px; padding:8px 16px; font-size: var(--fs-tag-sm); font-weight:600; line-height:1.1; color: var(--color-dark); white-space:nowrap; } .post-card__title{ font-size:24px; font-weight:400; line-height:1.2; color: var(--color-brown); } .post-card__title a:hover{ text-decoration:underline; } .post-card__date{ font-size: var(--fs-quote); line-height:1.2; color: var(--color-brown); } .clients__head .section-title{ max-width:none; } .site-footer--flush{ margin-block-start:0; } /* ============================================================ ABOUT — ≥ 992px ============================================================ */ @media (min-width: 992px){ .breadcrumbs{ padding-block-start:24px; } .post-card{ gap:16px; } .post-card__heading{ gap:16px; } .post-card__tag{ padding:8px 16px; } } .hero-slide-card__arrows .arrow-btn{ width:28px; height:28px; pointer-events:auto; } .hero-slide-card__arrows .arrow-btn img{ width:6px; } /* ============================================================ BUSINESS — ≥ 768px ============================================================ */ @media (min-width: 768px){ .hero-slide-card__arrows .arrow-btn{ width:36px; height:36px; } .hero-slide-card__arrows .arrow-btn img{ width:8px; } } @media (min-width: 992px){ .hero-slide-card__arrows .arrow-btn{ width:44px; height:44px; } .hero-slide-card__arrows .arrow-btn img{ width:9px; } } .shop__head{ display:flex; flex-direction:column; gap:16px; width:100%; } .shop__head h1{ font-size: var(--fs-h1); font-weight:700; line-height:1.1; color: var(--color-dark); text-align:center; } /* ---------- CATEGORY FILTER PILLS ---------- */ .cat-filter{ background: var(--color-white); border-radius:16px; box-shadow: var(--shadow-card-sm); padding:8px; } .cat-filter ul{ display:flex; flex-wrap:wrap; justify-content: flex-start; gap:8px; } .cat-filter__pill{ display:inline-flex; align-items:center; justify-content:center; background:#faf1e3; border:1px solid var(--color-border); border-radius:8px; padding: clamp(4px, 0.3883vw + 2.5437px, 10px) clamp(8px, 2.9126vw - 2.9223px, 53px); font-size: var(--fs-btn); font-weight:700; line-height:1.1; color: var(--color-dark); white-space:nowrap; transition: background .2s ease, color .2s ease; } .cat-filter__pill:hover{ background: var(--color-border); } .cat-filter__pill.is-active{ background: var(--color-brown); border-color: var(--color-brown); color: var(--color-white); } .cat-filter__pill.is-active:hover{ background:#3a3829; } .product{ background: var(--color-white); border:1px solid var(--color-border); border-radius:16px; box-shadow: var(--shadow-card-sm); padding:16px; display:flex; flex-direction:column; gap:8px; } .product .woocommerce-LoopProduct-link{ display:flex; flex-direction:column; gap:14px; } .product .attachment-woocommerce_thumbnail{ width:100%; aspect-ratio: 311 / 247; object-fit:cover; border-radius:8px; } .woocommerce-loop-product__title{ font-size: var(--fs-name); font-weight:600; line-height:1.2; color: var(--color-brown); text-align:start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .product .price{ display:block; font-size: var(--fs-btn); font-weight:700; line-height:1.1; color: var(--color-brown); text-align:start; } .product .add_to_cart_button{ width:100%; height:40px; padding-block:0; } /* ---------- PAGINATION (WooCommerce nav.woocommerce-pagination) ---------- DOM order: prev-button → page list → next-button. Контейнер — flex + space-between, поэтому под dir=rtl первый ребёнок встаёт СПРАВА: «назад» читается в сторону начала строки (право), «вперёд» — в сторону конца (лево). Под dir=ltr порядок зеркалится сам. ⚠ Здесь раньше стоял комментарий с обратным порядком (next → список → prev). Он не соответствовал ни blog.html, ни catalog.html — обе страницы вёрстки всегда выводили prev первым. Комментарий исправлен по факту разметки. */ .woocommerce-pagination{ display:flex; align-items:center; justify-content:space-between; width:100%; } .page-numbers{ display:flex; align-items:center; gap:8px; list-style:none; } .page-numbers a, .page-numbers span{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:183px; background: var(--color-white); border:1px solid var(--color-border); font-size:18px; font-weight:700; color: var(--color-dark); transition: background .2s ease, color .2s ease; } .page-numbers a:hover{ background: var(--color-border); } .page-numbers .is-current{ background: var(--color-brown); border-color: var(--color-brown); color: var(--color-white); } .page-numbers .dots{ border:none; background:none; } @media (min-width: 768px){ .page-numbers a, .page-numbers span{ width:40px; height:40px; font-size:20px; } } @media (min-width: 992px){ .shop__head{ gap:24px; } .shop__head h1{ text-align:center; } .cat-filter{ padding:16px; } .product{ gap:16px; } .product .attachment-woocommerce_thumbnail{ aspect-ratio: 454 / 360; } .product .add_to_cart_button{ height:48px; } .page-numbers a, .page-numbers span{ width:44px; height:44px; font-size:22px; } .cat-filter ul{justify-content: space-between;} } .breadcrumbs--product{ padding-block-start:0; } .btn--secondary{ background: var(--color-white); border:1px solid var(--color-border); color: var(--color-brown); padding:21px 33px; } @media (min-width: 992px){ .breadcrumbs--product{ position:absolute; inset-inline:0; width:fit-content; margin-inline:auto; } } .form-field{ display:flex; flex-direction:column; gap:4px; align-items:start; width:100%; } .form-field label{ font-size: var(--fs-quote); color:#78622f; } .form-field input, .form-field textarea{ width:100%; background: var(--color-border); border:2px solid #ebe5de; border-radius:10px; padding:12px 16px; font-family:inherit; font-size: var(--fs-quote); line-height:1.2; color: var(--color-dark); } .form-field input::placeholder, .form-field textarea::placeholder{ color:#acacaf; } .form-field textarea{ min-height:110px; resize:vertical; } a.info-row__value:hover{ text-decoration:underline; } .social-btn--lg{ width:46px; height:46px; padding:0; } .social-btn--lg img{ width:24px; height:24px; } @media (min-width: 768px){ .form-field--name, .form-field--email{ flex:1 1 calc(50% - 8px); } .form-field--phone, .form-field--message{ flex:1 1 100%; } } @media (min-width: 992px){ .form-field--email{ order:1; } .form-field--name{ order:2; } .form-field--phone{ order:3; } .form-field--message{ order:4; } .form-field input, .form-field textarea{ padding:16px; } .social-btn--lg{ width:62px; height:62px; } .social-btn--lg img{ width:38px; height:38px; } } .checkout-fields .form-field input{ padding:16px; } /* ---------- category filter: same padding scale as catalog.html's .cat-filter, but the pill's own horizontal padding is wider here (16px→53px vs. catalog's 8px→53px) — Figma's mobile frame for this page uses px-16 on the pill, not catalog's px-8, so it needs its own clamp rather than the shared one. ---------- */ .blog .cat-filter__pill{ padding-inline: clamp(16px, 2.3948vw + 7.0194px, 53px); } @media (min-width: 992px){ .blog .page-numbers{ gap:16px; } .blog .cat-filter{ align-self:center; } } /* ============================================================================ SINGLE POST PAGE (single-post.html) Header, footer, .news (related posts) and .reviews reuse the rules above unchanged. .legal__body (rich text) is reused as-is for the_content(). ============================================================================ */ .single-post__crumbs .breadcrumbs__current{ display:inline-block; max-width:228px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; } .account-edit-modal .form-field input{ padding:16px; } .account-edit-modal__actions .btn{ flex:1 1 0; min-width:0; } .orders-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; padding:24px 12px; filter: drop-shadow(-2.8px 2.8px 21px rgba(113,113,113,.15)); } .orders-empty img{ width:140px; height:auto; } .orders-empty p{ font-size: var(--fs-quote); color:#0c0c0c; text-align:center; } @media (min-width:600px){ .orders-empty img{ width:200px; } }