— and its ::before "!" icon — visible on valid inputs. This compound selector (0,2,0) reliably wins, same tactic as `.dimensions-section .ds-input` below. Without it, a phantom error icon shows under every dimension field. */ .ds-input-error-text.hidden { display: none; } /* Print configurator numeric fields (width/height/copies) are ~64-80px wide; the comfortable .ds-input padding is too roomy there. .dimensions-section is the stable wrapper around exactly those three inputs (see print-item-card.ejs / print.js), so this compound selector (0,2,0) reliably out-specifies the plain .ds-input rule (0,1,0) regardless of source order. */ .dimensions-section .ds-input { padding: 0.4rem 0.55rem; font-size: 0.8125rem; } /* --- Segmented control (used for option-choice basis selection) --- */ .ds-segmented { display: inline-flex; background: var(--surface-warm); border: 1px solid var(--hairline); border-radius: 10px; padding: 2px; gap: 2px; } .ds-segmented > button { appearance: none; background: transparent; border: none; padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--ink-muted); border-radius: 8px; cursor: pointer; transition: background-color 120ms var(--ease), color 120ms var(--ease); white-space: nowrap; font-family: inherit; } .ds-segmented > button:hover:not(:disabled) { color: var(--ink); } .ds-segmented > button.is-active { background: var(--surface-card); color: var(--ink); box-shadow: var(--shadow-card); } .ds-segmented > button:disabled { opacity: 0.4; cursor: not-allowed; } /* --- Custom Select --- Animated dropdown (src/public/js/components/custom-select.js): only class hooks it queries are restyled here (.ds-select, .open, .ds-select-trigger, .ds-select-arrow, .ds-select-dropdown, .ds-select-option, .selected) — markup structure, transitions timing/easing and the open/close behavior are unchanged, just recolored to the token set. */ .ds-select { position: relative; font-family: inherit; } .ds-select-trigger { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; font-size: 0.9375rem; font-weight: 500; color: var(--ink); background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--radius); cursor: pointer; transition: box-shadow 0.16s var(--ease), background 0.15s ease; user-select: none; } .ds-select-trigger:hover { background: var(--surface); } .ds-select.open .ds-select-trigger { box-shadow: 0 0 0 2px var(--green-700); background: var(--surface-card); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ds-select-arrow { display: flex; align-items: center; justify-content: center; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); color: var(--ink-muted); } .ds-select.open .ds-select-arrow { transform: rotate(180deg); color: var(--green-700); } .ds-select-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface-card); border: 1px solid var(--hairline); border-top: none; border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-hover); z-index: 50; overflow: hidden; opacity: 0; transform: translateY(-4px) scaleY(0.96); transform-origin: top center; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; max-height: 0; /* GPU layer promoted ahead of the open transition: without this hint the panel can occasionally rasterize before its option text paints, leaving a blank panel until the next repaint. Same pattern as .ds-modal above. */ will-change: opacity, transform; } .ds-select.open .ds-select-dropdown { opacity: 1; transform: translateY(0) scaleY(1); pointer-events: auto; max-height: 300px; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .ds-select-option { padding: 0.7rem 1rem; font-size: 0.875rem; color: var(--ink); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; display: flex; align-items: center; justify-content: space-between; } .ds-select-option:hover { background: var(--green-50); } .ds-select-option.selected { background: var(--green-50); color: var(--green-800); font-weight: 600; } .ds-select-option.selected::after { content: '\2713'; font-size: 0.75rem; color: var(--green-700); } .ds-select-option + .ds-select-option { border-top: 1px solid var(--hairline); } .ds-select-option-desc { font-size: 0.75rem; color: var(--ink-muted); font-weight: 400; margin-top: 0.15rem; } /* --- Cards --- Shadow-elevated, never border-defined: --shadow-card at rest, lift to --shadow-hover + translateY(-3px) on hover. Selected state is a green ring layered onto the same shadow (box-shadow, not a heavy border). Nested cards are never allowed. See DESIGN.md "Shape, elevation & borders" + Components › Cards. */ .ds-card { background: var(--surface-card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease); } .ds-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } /* A ds-select's dropdown is absolutely positioned and escapes the card's content box; the card's own overflow:hidden (needed to clip corners to its radius) would otherwise clip the open dropdown mid-panel. */ .ds-card:has(.ds-select.open) { overflow: visible; } @media (prefers-reduced-motion: reduce) { .ds-card:hover { transform: none; } } .ds-card-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; } .ds-card-link:focus-visible { outline: none; box-shadow: var(--shadow-card), var(--focus-ring); } /* Featured — the larger, emphasized tile in a bento grid. Same shadow language and radius; size/emphasis comes from bigger type + padding, not a different shadow or border. */ .ds-card-featured .ds-card-body { padding: 1.5rem; } .ds-card-featured .ds-card-title { font-size: 1.25rem; } .ds-card-featured .ds-card-desc { font-size: 0.875rem; min-height: 2.625rem; /* 0.875rem × 1.5 × 2 */ } .ds-card-featured .ds-card-price { font-size: 1.35rem; } /* Selected — a green ring, not a heavy border: the same rest/hover shadow with a 2px --green ring layered on top via a second box-shadow value. */ .ds-card-selected { box-shadow: var(--shadow-card), 0 0 0 2px var(--green); } .ds-card-selected:hover { box-shadow: var(--shadow-hover), 0 0 0 2px var(--green); } .ds-card-body { padding: 1rem; display: flex; flex-direction: column; } /* Title + description are truncated to a fixed line count so every caption is the SAME height. Combined with the grid stretching cards in a row to equal total height, that forces the flex:1 image area to be equal too — no more long-description cards stealing height from their image. Description reserves two lines even when short/absent (min-height) so the caption never collapses. */ .ds-card-title { font-size: 0.9rem; font-weight: 700; color: var(--ink); margin-bottom: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-card-desc { font-size: 0.75rem; color: var(--ink-muted); line-height: 1.5; margin-bottom: 0.5rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.25rem; /* 0.75rem × 1.5 × 2 lines */ } .ds-card-price { font-size: 1rem; font-weight: 800; color: var(--green-800); white-space: nowrap; } .ds-card-price-unit { font-size: 0.65rem; font-weight: 500; color: var(--ink-muted); } /* Card footer (price + «Подробнее →»). Compact cards are too narrow to fit both on one line — the price unit wraps and the CTA collides — so they STACK: price, then the CTA below-left. The wide featured tile has room for one baseline, so it goes inline (price left, CTA right). mt-auto pins the footer to the card bottom regardless of description length. */ .ds-card-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; } .ds-card-featured .ds-card-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem; } /* Solid-fill badge, no border (DESIGN.md: "inside a card stays calm — badges = solid fills"). Single --radius, not a pill (no fully-rounded pills). */ .ds-card-badge { display: inline-block; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: var(--radius); background: var(--ink); color: var(--surface-card); margin-bottom: 0.4rem; } /* --- Bento grid --- The signature catalog/marketing layout: CSS grid, varied spans, a larger featured tile — never a wall of equal-size tiles. Tight 8px gap (DESIGN.md Spacing: "bento gap 8"). Mobile reflows, it never shrinks the desktop columns: the featured tile goes full-width, the rest become a 2-up grid. See DESIGN.md Spacing & layout + Components › Store catalog. */ .ds-bento { display: grid; grid-template-columns: repeat(4, 1fr); /* Bounded max track (not `auto`): an `auto` max sizes to the item's max-content, so the featured 2×2 tile's large intrinsic image would inflate its two rows — and, because sibling compact cards share those rows, every tile balloons with it. A fixed max clamps the featured to ~2×280+gap and keeps compact tiles ~280px regardless of the source image's resolution. */ grid-auto-rows: minmax(220px, 280px); gap: 8px; } /* The shell column width matches the page's BODY width, so the store bar always lines up with the content beneath it (user direction). - Store catalog: the body IS the grid, which fills the full width — no cap, so the column and bar span the whole width next to the rail (home's

has no inner cap). As many tile columns as fit. - Every other page: the body is capped for readability (marketing: .ds-mkt 1160; product/cart/checkout: max-w-* mx-auto). Cap the column to 1160 to match .ds-mkt so the bar aligns with the content instead of spanning wider. */ /* EVERY page's content column is capped to ONE consistent width and centered in the space after the rail, so all pages line up identically — store and marketing alike (user: same centered width on ALL pages). The explicit flex-basis (not Tailwind's flex-1 grow) gives a definite width so the auto margins reliably absorb the excess; it still shrinks on narrow screens (flex-shrink:1 + min-w-0). Paired with `scrollbar-gutter: stable` on so the centering never shifts between a page that scrolls and one that doesn't (the О Нас vs Контакт drift). Bump the 1160 here (and .ds-mkt) to rewiden. */ .ds-shell-catalog, .ds-shell-page { flex: 0 1 1160px; max-width: 1160px; margin-inline: auto; } .ds-bento .ds-card-featured { grid-column: span 2; grid-row: span 2; } @media (max-width: 640px) { .ds-bento { grid-template-columns: repeat(2, 1fr); /* Mobile 2-up: revert to content sizing (tiles are ~half-width; a fixed 220–280 track would make them tall and skinny). Matches prior verified mobile layout. */ grid-auto-rows: minmax(160px, auto); } .ds-bento .ds-card-featured { grid-column: 1 / -1; grid-row: span 1; } } /* --- Store catalog grid --- Deliberately UNIFORM: every tile is the same size so the catalog scans as a predictable grid (product register: "Consistency IS an affordance"). No featured tile. The tiles themselves are the universal image-overlay card (.ds-mkt-section-card), the SAME component as the marketing "Что мы производим" grid (user direction), so height comes from the card's 3/4 aspect-ratio, not a fixed row. Columns responsive via auto-fill (~260px min → 4-up on the 1280-capped column, fewer as it narrows); `1fr` keeps a partial last row's tiles the same width. Mobile: 2-up, minmax(0,1fr) so a long Cyrillic word can't set a min-content floor. */ .ds-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); } @media (max-width: 640px) { .ds-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } } /* Store tile commerce additions — the overlay card (.ds-mkt-section-card) has no price/buy affordance, so these sit in its scrim body. Price is off-white and bold (legible on the ink scrim, where --green-800 would be too dark); the CTA reuses .ds-mkt-card-more (green + arrow). */ .ds-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.2rem; } .ds-tile-price { font-size: 1.1rem; font-weight: 800; color: var(--green); /* corporate green — light enough to read on the ink scrim */ white-space: nowrap; text-shadow: 0 1px 3px oklch(19% 0.012 124 / 0.5); } .ds-tile-price-unit { font-size: 0.7rem; font-weight: 600; color: oklch(79.3% 0.175 123.7 / 0.72); } .ds-tile-foot .ds-mkt-card-more { margin-top: 0; flex-shrink: 0; } /* Placeholder when a product has no photo — centered icon on the warm backing. */ .ds-tile-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); opacity: 0.5; } /* Mobile: tiles are ~half-width (~170px). Tighten the type so the title and price fit without clipping (keeping the 2-up grid), clamp the title to 2 lines so a long product name can't overflow, and drop the «Подробнее» CTA — the whole tile is tappable, and the price + CTA won't fit one row this narrow. Scoped to .ds-tile-card (higher specificity) so marketing tiles are untouched. */ @media (max-width: 639px) { .ds-tile-card .ds-mkt-section-card-body { padding: 0.7rem 0.75rem 0.8rem; gap: 0.15rem; } .ds-tile-card .ds-mkt-section-card-body h3 { font-size: 0.88rem; line-height: 1.15; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .ds-tile-card .ds-mkt-section-card-body p { font-size: 0.75rem; line-height: 1.35; } .ds-tile-card .ds-tile-price { font-size: 0.9rem; } .ds-tile-card .ds-tile-price-unit { font-size: 0.6rem; } .ds-tile-card .ds-tile-foot .ds-mkt-card-more { display: none; } } /* Product card extensions — a photo area with a dark category badge (top-left) sitting over a caption bar (.ds-card-body). The image→caption split reads from dark-photo/light-caption contrast alone, never a divider line; elevation is inherited from .ds-card. */ .prod-card-img { position: relative; background: var(--surface-warm); min-height: 120px; display: flex; align-items: center; justify-content: center; flex: 1; } .prod-card-placeholder-icon { color: var(--ink-muted); opacity: 0.5; } .prod-card-tag { position: absolute; top: 0.5rem; left: 0.5rem; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: var(--radius); background: var(--ink); color: var(--surface-card); } .prod-card-btn { font-size: 0.7rem; font-weight: 700; color: var(--ink); white-space: nowrap; flex-shrink: 0; transition: color 0.16s var(--ease); } .ds-card-link:hover .prod-card-btn { color: var(--green-800); } /* text — see green-700 AA note near .ds-btn-ghost:hover */ /* Media type chip (print builder). A

Заголовок.