/* Home page (approved mock-ups: Г1 g1v3 t, phone g1m c). Sizes measured off the 1536 px mock-ups (tools/measure_mock.py). */

/* Г1: ink hero 887 tall at 1536; text column at x 62; the diagram box 910 x 680 at x 600, 43 below the hero top. */
.ds-hero { background: var(--c-ink); color: var(--c-white); overflow: hidden; }
.ds-hero__in { position: relative; display: grid; grid-template-columns: calc(520 * var(--u)) 1fr; align-items: start; column-gap: calc(22 * var(--u));
	min-height: calc(887 * var(--u)); padding-left: calc(62 * var(--u)); padding-right: calc(26 * var(--u)); }
.ds-hero__text { padding-top: calc(97 * var(--u)); }
.ds-hero .ds-eyebrow { color: var(--c-yellow); }
.ds-hero h1 { margin-top: calc(22 * var(--u)); font: 700 var(--t-h1)/1.15 var(--f-head); letter-spacing: -.012em; color: var(--c-white); }
.ds-hero__lead { margin-top: calc(17 * var(--u)); font-size: var(--t-lead); line-height: 1.6; color: var(--c-ink-2); }
.ds-hero__btns { display: grid; justify-items: start; gap: calc(14 * var(--u)); margin-top: calc(22 * var(--u)); }
.ds-hero__btns .ds-btn { padding: 0 calc(16 * var(--u)); }
.ds-hero__btns .ds-btn { width: calc(292 * var(--u)); min-width: 240px; height: calc(58 * var(--u)); }
.ds-hero__btns .ds-btn--outline-light { height: calc(62 * var(--u)); }
.ds-hero__brands { margin-top: calc(60 * var(--u)); font-size: var(--t-s); color: var(--c-ink-2); width: max-content; position: relative; z-index: 1; }
.ds-hero__net { margin-top: calc(43 * var(--u)); }
.ds-hero__mini, .ds-hero__rows { display: none; }

@media (max-width: 960px) {
	/* phone g1m c: headline, the mini diagram and both buttons in the first view; the lead and the four categories as rows after */
	.ds-hero__in { display: block; min-height: 0; padding: 22px var(--gutter) 30px; }
	.ds-hero__text { display: flex; flex-direction: column; padding-top: 0; }

	.ds-hero h1 { line-height: 1.1; margin-top: 10px; }
	.ds-hero__mini { display: block; position: relative; order: 2; margin: 18px auto 0; width: min(100%, 360px); aspect-ratio: 350 / 190; }
	.ds-hero__mini svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
	.ds-hero__mini img { position: absolute; height: auto; }
	.ds-hero__btns { order: 3; margin-top: 18px; }
	.ds-hero__btns .ds-btn { width: 100%; height: 54px; }
	.ds-hero__lead { order: 4; margin-top: 26px; }
	.ds-hero__rows { display: block; order: 5; margin-top: 14px; }
	.ds-hero__rows a { display: grid; grid-template-columns: 104px 1fr 22px; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #374151;
		color: var(--c-ink-2); text-decoration: none; font-size: var(--t-s); line-height: 1.35; }
	.ds-hero__rows img { width: 104px; height: 44px; object-fit: contain; }
	.ds-hero__rows b { display: block; color: var(--c-white); font: 600 var(--t-m)/1.3 var(--f-text); }
	.ds-hero__rows strong { display: block; color: var(--c-white); }
	.ds-hero__rows .ds-ic { color: var(--c-white); }
	.ds-hero__brands { order: 6; width: auto; margin-top: 18px; color: var(--c-ink-muted); }
	.ds-hero__net { display: none; }
}
/* --- Г2 g2 c: 10 category cards with real product photos (5 x 2) ------------------------------------------------------------------ */
.ds-cats { background: #F7F8FA; padding: calc(92 * var(--u)) 0 calc(80 * var(--u)); }
.ds-cats__sub { margin-top: calc(12 * var(--u)); font-size: var(--t-l); color: var(--c-body); }
.ds-cats__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(17 * var(--u)); margin-top: calc(30 * var(--u)); }
.ds-cat { position: relative; display: flex; flex-direction: column; height: calc(268 * var(--u)); padding: calc(22 * var(--u)); border-radius: 8px;
	background: #EEF0F3; color: var(--c-ink); text-decoration: none; overflow: hidden; transition: box-shadow .15s; }
.ds-cat:hover { box-shadow: inset 0 0 0 2px var(--c-blue); }
.ds-cat b { font: 600 var(--t-h5)/1.25 var(--f-head); }
.ds-cat span { margin-top: calc(6 * var(--u)); font-size: var(--t-s); color: var(--c-body); }
.ds-cat strong { margin-top: calc(10 * var(--u)); font-size: var(--t-l); font-weight: 700; }
.ds-cat__img { display: block; margin-top: auto; padding-top: calc(10 * var(--u)); width: 100%; height: auto; max-height: calc(128 * var(--u)); min-height: 0;
	flex: 1 1 0; object-fit: contain; object-position: center bottom; mix-blend-mode: multiply; }
.ds-cats__all { display: inline-block; margin-top: calc(34 * var(--u)); font: 600 var(--t-l)/1.3 var(--f-text); color: var(--c-blue); text-decoration: none; }

/* --- Г3 g3 a: services on ink, five rows ------------------------------------------------------------------------------------------- */
.ds-svc { background: var(--c-ink); color: var(--c-white); padding: calc(130 * var(--u)) 0 calc(120 * var(--u)); }
.ds-svc__in { display: grid; grid-template-columns: calc(540 * var(--u)) 1fr; column-gap: calc(64 * var(--u)); padding-left: calc(62 * var(--u)); }
.ds-svc__head { align-self: center; }   /* the title is the section size now, not the poster size of the mock-up */
.ds-svc .ds-eyebrow { color: var(--c-yellow); letter-spacing: .12em; font-size: var(--t-eyebrow); }
.ds-svc h2 { max-width: calc(420 * var(--u)); margin-top: calc(24 * var(--u)); font: 700 var(--t-h2)/1.15 var(--f-head); letter-spacing: -.015em; color: var(--c-white); }
.ds-svc__head .ds-btn { margin-top: calc(36 * var(--u)); min-height: max(50px, calc(60 * var(--u))); padding: 0 calc(32 * var(--u)); font-size: var(--t-l); }
.ds-svc__list a { display: grid; grid-template-columns: calc(80 * var(--u)) 1fr auto; align-items: center; column-gap: calc(50 * var(--u));
	padding: calc(30 * var(--u)) 0; border-bottom: 1px solid #374151; color: var(--c-ink-2); text-decoration: none; font-size: var(--t-l); line-height: 1.5; }
.ds-svc__list li:last-child a { border-bottom: 0; }
.ds-svc__list .ds-ic:first-child { color: var(--c-yellow); width: calc(80 * var(--u)); height: calc(80 * var(--u)); }
.ds-svc__list b { display: block; margin-bottom: calc(6 * var(--u)); font: 700 var(--t-h4)/1.25 var(--f-head); color: var(--c-white); }
.ds-svc__list a:hover b { color: var(--c-yellow); }
.ds-svc__list .ds-ic:last-child { color: var(--c-white); }

/* --- Г4 g4 a: four steps on a network line ----------------------------------------------------------------------------------------- */

/* --- Г5 g5 b: one large product and three on the right ------------------------------------------------------------------------------- */
.ds-feat { background: var(--c-bg); padding: calc(110 * var(--u)) 0 calc(70 * var(--u)); }
.ds-feat__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.ds-feat .ds-h2 { font-size: var(--t-h2); }
.ds-feat__head .ds-btn--link { font-size: var(--t-l); margin-bottom: calc(14 * var(--u)); }
.ds-feat__grid { display: grid; grid-template-columns: calc(650 * var(--u)) 1fr; grid-template-rows: repeat(3, auto); gap: calc(16 * var(--u)); margin-top: calc(38 * var(--u)); }
.ds-fcard { display: grid; grid-template-columns: calc(310 * var(--u)) 1fr; align-items: center; column-gap: calc(20 * var(--u)); padding: calc(18 * var(--u)) calc(26 * var(--u));
	background: var(--c-white); border: 1px solid var(--c-line); border-radius: 8px; }
.ds-fcard--big { grid-row: 1 / span 3; grid-template-columns: 1fr; align-content: end; padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(56 * var(--u)); }
.ds-fcard__img img { display: block; width: 100%; height: calc(150 * var(--u)); object-fit: contain; mix-blend-mode: multiply; }
.ds-fcard--big .ds-fcard__img img { height: calc(400 * var(--u)); }
.ds-fcard__brand { font-size: var(--t-xs); color: var(--c-muted); }
.ds-fcard h3 { margin-top: calc(6 * var(--u)); font: 400 var(--t-s)/1.45 var(--f-text); }
.ds-fcard h3 a { color: var(--c-ink); text-decoration: none; }
.ds-fcard--big .ds-fcard__brand { font-size: var(--t-s); margin-top: calc(20 * var(--u)); }
.ds-fcard--big h3 { font: 700 var(--t-h4)/1.25 var(--f-head); }
.ds-fcard__price { margin-top: calc(8 * var(--u)); font: 700 var(--t-h4)/1.2 var(--f-head); color: var(--c-ink); }
.ds-fcard--big .ds-fcard__price { font-size: var(--t-h3); margin-top: calc(18 * var(--u)); }
.ds-fcard .ds-cartform button { margin-top: calc(14 * var(--u)); }
.ds-fcard--big .ds-cartform button { margin-top: calc(26 * var(--u)); min-width: calc(215 * var(--u)); }

/* --- Г6 g6 a: four real reviews (initials, no stars) and the facts row ---------------------------------------------------------------- */

@media (max-width: 960px) {
	.ds-cats { padding: 44px 0 40px; }

	.ds-cats__grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
	.ds-cat { height: 210px; padding: 14px; }

	.ds-cat__img { max-height: 92px; }
	.ds-cats__all { margin-top: 20px; }
	.ds-svc { padding: 48px 0; }
	.ds-svc__in { display: block; padding-left: var(--gutter); }
	.ds-svc__head { padding-top: 0; }

	.ds-svc h2 { max-width: none; margin-top: 12px; }
	.ds-svc__head .ds-btn { height: 52px; margin: 22px 0 18px; padding: 0 22px; }
	.ds-svc__list a { grid-template-columns: 44px 1fr auto; column-gap: 16px; padding: 18px 0; }
	.ds-svc__list .ds-ic:first-child { width: 44px; height: 44px; }

	.ds-feat { padding: 48px 0 40px; }
.ds-feat__head .ds-btn--link { margin: 0; }
	.ds-feat__grid { grid-template-columns: 1fr; margin-top: 20px; }
	.ds-fcard--big { grid-row: auto; }
	.ds-fcard { grid-template-columns: 120px 1fr; padding: 14px; }
	.ds-fcard--big { grid-template-columns: 1fr; padding: 18px; }
	.ds-fcard__img img { height: 100px; } .ds-fcard--big .ds-fcard__img img { height: 180px; }



}