/* The front page. Phase F stop F4.3.
 *
 * Ported from `mockups/build.py` and `mockups/front-build.py`, whose output the
 * owner signed off at F3.2 and F3.2b. Same three transformations as the chrome's
 * stylesheet, and for the same reasons: the mockups fake width with a `data-w`
 * attribute and this uses real media queries; every rule is prefixed `.mk` there
 * and scoped to `.fp` here; and the tokens are `uc-ds.css`'s on `:root` rather
 * than redeclared per block.
 *
 * The mockup's `--m-*` token set is folded into the standard one -- it was a
 * second vocabulary for the same seven colours, which is the drift the design
 * system exists to stop.
 *
 * INTRINSIC SIZING, NOT A COLUMN COUNT. The grid and the rails are
 * `repeat(auto-fill, minmax(…, 1fr))` -- as many as fit. design-system.md
 * section 3 is explicit that a 12-column system cannot express that, and that
 * approximating it needs a breakpoint per width, which is how the site acquired
 * the 1200px cliff the F2.1 census measured. The two rules below that DO name a
 * column count are the rail at its widest, where six cards are the block's
 * definition rather than a fitting problem.
 */

/* THE GROUND IS FULL WIDTH AND THE CONTENT IS NOT. Getting that the wrong way
 * round is what put a frame around the page on review, 2026-09-05: .fp was grey
 * and constrained while the body behind it was white, so the ground read as a
 * panel sitting on a page rather than as the page.
 *
 * The chrome already does it this way -- .mh-in and .ftr-in constrain an inner
 * element while the masthead and footer run edge to edge. This is the same
 * shape, and the constraint moved to .blk below. */
.fp { background: var(--ground); }
body { background: var(--ground); }
.fp a { color: inherit; text-decoration: none; }

/* Blocks -------------------------------------------------------------- */
.fp .blk { padding: 22px var(--gutter); border-bottom: 1px solid var(--rule); }
.fp .blk:last-of-type { border-bottom: 0; }
.fp h2 { margin: 0 0 var(--s-1); font-size: 20px; font-weight: var(--fw-semibold); letter-spacing: -.01em; }
.fp h3 { margin: 0 0 var(--s-2); font-size: 15px; font-weight: var(--fw-semibold); }
.fp .lede { margin: 0 0 14px; max-width: 62ch; font-size: 13.5px; color: var(--sec); }

/* The promoted slot --------------------------------------------------- */
/* The accent's two permitted homes are this border and the badge. F3.1: orange
 * is applied by hand and NEVER automatically -- 87.6% of enabled priced products
 * carry a discount, so colouring discounted prices would colour nine cards in
 * ten and signal nothing. */
.fp .promo-blk { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.fp .promo {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3);
  padding: 14px var(--s-4);
  background: var(--surface);
  border: 1px solid var(--accent); border-left: 4px solid var(--accent);
  border-radius: var(--r);
}
.fp .promo-tag {
  padding: 3px var(--s-2); border-radius: 4px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: .07em; text-transform: uppercase;
}
.fp .promo-body { flex: 1; min-width: 190px; display: block; }
.fp .promo-t { display: block; font-weight: var(--fw-semibold); }
.fp .promo-d { display: block; font-size: 13px; color: var(--sec); }
.fp .promo-go { white-space: nowrap; font-size: 14px; font-weight: var(--fw-semibold); color: var(--accent); }

/* The category grid --------------------------------------------------- */
.fp .cat-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.fp .cat {
  padding: var(--s-3); border: 1px solid var(--tile); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--sh-card);
}
.fp .cat-main { display: flex; align-items: center; gap: var(--s-3); }
.fp .cat-pic {
  width: 60px; height: 60px; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--ground); border-radius: var(--r-sm);
}
.fp .cat-pic img { max-width: 100%; height: auto; mix-blend-mode: multiply; }
.fp .cat-txt { display: block; min-width: 0; }
.fp .cat-n { display: block; font-weight: var(--fw-semibold); }
.fp .cat-c { display: block; font-size: 12.5px; color: var(--mut); }
.fp .cat-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule);
}

/* Chips carry NO counts. Section 3.15: 36 of them at ~30 ms each is ~1,080 ms,
 * and a count that is not live goes stale invisibly. Fresh or absent. */
.fp .chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 13px; border: 1px solid var(--tile); border-radius: var(--r-pill);
  background: var(--surface); font-size: 13.5px;
}
.fp .chip-sm { padding: 5px 11px; font-size: 12.5px; }
.fp .chip:hover { border-color: var(--brand); color: var(--brand); }

/* «Ещё в каталоге» ---------------------------------------------------- */
.fp .tail-blk { border-top: 1px solid var(--rule); }
.fp .tail { margin: 0; font-size: 13px; line-height: 2; color: var(--mut); }
.fp .tail a { color: var(--ink); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.fp .tail a:hover { border-bottom-color: var(--brand); color: var(--brand); }
.fp .tail-n { margin-left: 4px; font-size: 11px; color: var(--mut); }
.fp .tail-more { margin-top: 10px; }
.fp .tail-more a { border-bottom-color: var(--brand); font-weight: var(--fw-semibold); }

/* The rail, and the brand cards which are built like it ---------------- */
.fp .rail { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
/* THE CARD IS NOT HERE ANY MORE. It moved to uc-ds.css on 2026-09-08, at F4.6,
 * when `/search/` became its second caller -- search.md `Q3`. It is a component
 * with two surfaces now, not the front page's, and a second copy is what `S97`
 * and `S98` already record the cost of. The rail below is still this page's:
 * the grid a set of cards sits in is per surface, and the search page's is
 * `.se-grid` in uc-catalog.css. */
/* Stiebel Eltron has no logo on the site, so its card is the name set in type.
 * The fallback is in the signed-off artefact rather than hidden. */
.fp .b-wordmark { font-size: 15px; font-weight: var(--fw-semibold); color: var(--sec); text-align: center; }

/* «О нас» ------------------------------------------------------------- */
/* 13.5px, like every other body text on the page. It was the only block
 * inheriting the 15px base, which is what made it read as belonging to a
 * different site -- the owner found it by eye on 2026-09-02.
 *
 * THE 78ch MEASURE IS DELIBERATE AND IS THE SIGNED-OFF VALUE. Prose set the
 * full width of a 1180px block runs past 130 characters a line, and the eye
 * loses its place returning to the left edge. It is the only block on the page
 * that is continuous prose, so it is the only one that needs the limit -- the
 * tiles, the rail and the information cards are all short strings in boxes.
 * The lede uses 62ch and the F3.5 footer 76ch for the same reason.
 *
 * It shipped at 72ch, which was mine and not the design's. Corrected to 78ch on
 * review, 2026-09-05, along with the paragraph spacing and the link treatment,
 * which are also the artefact's. */
/* ~~max-width:78ch~~ removed 2026-09-10, the owner's: prose takes the shell's
 * width here as it does on every other page, and as production always did. */
.fp .about-p { margin: 0 0 var(--s-2); font-size: 13.5px; line-height: 1.6; color: var(--sec); }
.fp .about-p:last-child { margin-bottom: 0; }
.fp .about-p a { color: var(--brand); text-decoration: none; border-bottom: 1px solid rgba(15, 143, 174, .35); }
.fp .about-p a:hover { border-bottom-color: var(--brand); }

/* «Полезная информация» ----------------------------------------------- */
.fp .trust { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.fp .t-card { padding: 14px; border: 1px solid var(--tile); border-radius: var(--r); background: var(--surface); }
.fp .t-card ul { margin: 0 0 10px; padding-left: 18px; font-size: 13.5px; color: var(--sec); }
.fp .t-card li { margin-bottom: 5px; }
.fp .t-card b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fp .t-card > a { font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--brand); }
.fp .sr-card { display: flex; flex-direction: column; gap: 2px; }
/* S114. The picture and its frame were in the signed-off F3.2 artefact
 * (front-build.py:474-477) and this stylesheet never carried them, so the card
 * shipped as three lines of text. Restored 2026-09-09 on the owner's report.
 * `margin-top: auto` on the link keeps «Как доехать» on the card's floor now
 * that the card is taller than its three neighbours. */
.fp .sr-pic { display: block; margin-bottom: var(--s-2); border: 1px solid var(--tile);
  border-radius: 6px; background: var(--ground); overflow: hidden; }
.fp .sr-map { display: block; width: 100%; height: auto; }
/* F3.1's hand-applied accent, in CSS because `fill="var(--accent)"` on the
 * element would not work -- var() is a CSS value function and a presentation
 * attribute is not a declaration, so it parses as an invalid paint and the
 * marker renders black. The white dot inside the pin keeps its own fill. */
.fp .sr-map .sr-pin { fill: var(--accent); }
.fp .sr-name { font-size: 15px; font-weight: var(--fw-semibold); color: var(--ink); }
.fp .sr-sub { margin-bottom: var(--s-2); font-size: 12.5px; color: var(--mut); }
.fp .sr-card > a { margin-top: auto; }

/* ---------------------------------------------------------- 768 and up */
@media (min-width: 768px) {
  .fp .blk { padding: 34px var(--gutter); }
  .fp h2 { font-size: 25px; }
  .fp .rail { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------- 1200 and up */
@media (min-width: 1200px) {
  /* The BLOCK is centred, not the page -- see the note at the top. */
  .fp .blk { max-width: var(--shell); margin: 0 auto; }
  /* Six, because six is what the block IS -- one series from each of six
     categories, six distinct brands. At this width that is a definition and not
     a fitting problem. */
  .fp .rail { grid-template-columns: repeat(6, 1fr); }
}

/* ------------------------------------------------------------- flatpages */
/* The frame around prose the owner writes in the admin. Deliberately plain: the
 * body carries its own markup and the styling here has to be forgiving of
 * whatever a WYSIWYG editor produced, so it sets type and spacing and takes no
 * view on structure.
 *
 * `S79` matters here more than anywhere: these pages change when the owner edits
 * them, and their stylesheet does not. */
/* ~~760~~ -- the prose column is `.uc-page > *`'s 720 and there is one of it.
 * This rule kept only the difference, and nobody chose the difference. */
.fp-body { font-size: 14.5px; line-height: 1.65; color: var(--sec); }
.fp-body h2 { margin: var(--s-6) 0 var(--s-2); font-size: 20px; color: var(--ink); }
.fp-body h3 { margin: var(--s-5) 0 var(--s-2); font-size: 16px; color: var(--ink); }
.fp-body p { margin: 0 0 var(--s-3); }
.fp-body a { color: var(--brand); font-weight: var(--fw-semibold); }
.fp-body ul, .fp-body ol { margin: 0 0 var(--s-3); padding-left: var(--s-5); }
.fp-body li { margin-bottom: 6px; }
.fp-body img { max-width: 100%; height: auto; }
.fp-body b, .fp-body strong { color: var(--ink); }
/* A table in a flatpage scrolls inside itself rather than pushing the page
 * sideways -- /dostavka/ carries one and 53.4% of sessions are phones. */
.fp-body table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fp-body td, .fp-body th { padding: 8px 10px; border-top: 1px solid var(--rule); text-align: left; }