/* Product card Т1 B · Т2 B · Т3 A · Т4 A · Т5 A, phone Т1m A. Mock-up pixels × --u (see tp.css). Catalog parts: shop.css. */
.tp-pdp { padding-top: calc(10 * var(--u)); padding-bottom: calc(40 * var(--u)); }
.tp-pdp .tp-crumbs { font-size: var(--t-s); }
.tp-pdp .tp-crumbs span { margin: 0 calc(8 * var(--u)); }

/* Т1 — gallery and buy box */
.tp-pdp__top { display: grid; grid-template-columns: 736fr 693fr; gap: calc(17 * var(--u)); margin-top: calc(11 * var(--u)); }
.tp-gal, .tp-buy { background: var(--c-paper); border-radius: 4px; }
.tp-gal { padding: calc(17 * var(--u)) calc(17 * var(--u)) calc(30 * var(--u)) calc(74 * var(--u)); }
.tp-gal__main { height: calc(318 * var(--u)); display: flex; align-items: center; justify-content: center; }
.tp-gal__main img { width: 100%; height: 100%; object-fit: contain; }
.tp-gal__thumbs { list-style: none; margin: calc(18 * var(--u)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, calc(190 * var(--u))); gap: calc(10 * var(--u)); }
.tp-gal__t { display: block; width: 100%; height: calc(106 * var(--u)); padding: 4px; border: 1px solid var(--c-line); border-radius: 2px; background: #fff; cursor: pointer; }
.tp-gal__t.is-on { border: 2px solid var(--c-accent); }
.tp-gal__t img { width: 100%; height: 100%; object-fit: contain; }
.tp-buy { padding: calc(4 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)); }
.tp-buy__brand { font-size: var(--t-s); color: #1D5FC2; text-decoration: underline; text-underline-offset: 3px; }
.tp-buy__h { margin-top: calc(4 * var(--u)); font: 400 var(--t-d3)/1.06 var(--f-head); color: var(--c-ink); letter-spacing: -.02em; }
.tp-buy__model { display: flex; align-items: center; gap: 12px; margin-top: calc(6 * var(--u)); font-size: var(--t-s); color: var(--c-muted); }
.tp-buy__copy { border: 0; background: none; padding: 0; color: var(--c-muted); cursor: pointer; display: grid; }
.tp-keys { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 0 calc(26 * var(--u)); margin: calc(12 * var(--u)) 0 0; padding: calc(10 * var(--u)) 0 calc(12 * var(--u)) 2px;
	border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.tp-keys div { display: grid; grid-template-columns: calc(127 * var(--u)) 1fr; gap: 8px; font-size: var(--t-s); line-height: 1.6; }
.tp-keys div:nth-child(n+4) { grid-template-columns: calc(135 * var(--u)) 1fr; }
.tp-keys dt { color: var(--c-muted); }
.tp-keys dd { margin: 0; color: var(--c-ink); }
.tp-buy__row { display: flex; align-items: center; gap: calc(26 * var(--u)); margin-top: calc(14 * var(--u)); }
.tp-buy__price { font: 400 var(--t-price-l)/1 var(--f-head); color: var(--c-ink); letter-spacing: -.03em; white-space: nowrap; }
.tp-buy__form { display: flex; gap: calc(22 * var(--u)); flex: 1; }
.tp-buy__add { flex: 1; min-height: max(46px, calc(47 * var(--u))); font-size: var(--t-btn-l); border-radius: 4px; }
.tp-buy__terms { list-style: none; margin: calc(12 * var(--u)) 0 0; padding: 0 0 calc(8 * var(--u)); border-bottom: 1px solid var(--c-line); display: grid; gap: calc(2 * var(--u)); }
.tp-buy__terms li { display: flex; align-items: center; gap: calc(16 * var(--u)); font-size: var(--t-s); color: var(--c-ink); }
.tp-buy__terms .tp-ic { flex: none; width: calc(26 * var(--u)); min-width: 22px; color: var(--c-navy); }
.tp-buy__terms .tp-ic .a, .tp-buy__ask .tp-ic .a { stroke: var(--c-navy); }
.tp-buy__ask { display: flex; align-items: center; gap: calc(16 * var(--u)); margin-top: calc(8 * var(--u)); font-size: var(--t-s); color: var(--c-ink); }
.tp-buy__ask a:hover { text-decoration: underline; }
.tp-buy .tp-pay { margin-top: calc(6 * var(--u)); }
.tp-buy .tp-pay li { color: var(--c-navy); border-color: #C9CFD8; }

/* Т1 — what it sees */
.tp-sees { position: relative; margin-top: calc(15 * var(--u)); background: var(--c-paper); border-radius: 4px; padding: calc(6 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u)) calc(18 * var(--u)); }
.tp-sees__h { position: absolute; left: calc(18 * var(--u)); top: calc(12 * var(--u)); z-index: 1; font: 400 var(--t-d4)/1 var(--f-head); color: var(--c-ink); letter-spacing: -.02em; }
.tp-sees__svg { display: block; width: 100%; height: auto; margin-top: calc(4 * var(--u)); }
.tp-sees__svg text { font-family: var(--f-text); }
.tp-sees__fov { font-size: var(--t-xl); font-weight: 500; fill: var(--c-ink); }
.tp-sees__tag rect { fill: #fff; stroke: #C9CFD8; }
.tp-sees__k { font-size: var(--t-xs); font-weight: 600; fill: var(--c-ink); }
.tp-sees__v { font-size: var(--t-s); font-weight: 500; fill: #E07B00; }
.tp-sees__note { font-size: var(--t-xs); color: var(--c-muted); margin-top: calc(-2 * var(--u)); }

/* tabs */
.tp-ptabs { display: flex; gap: calc(44 * var(--u)); margin-top: calc(10 * var(--u)); background: var(--c-paper); border-radius: 4px; padding: calc(10 * var(--u)) calc(20 * var(--u)) 0; position: relative; }
.tp-ptabs a { position: relative; z-index: 1; padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u)); font-size: var(--t-m); color: var(--c-ink); }
.tp-ptabs a.is-on { font-weight: 700; }
.tp-ptabs a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c-accent); }
.tp-ptabs::after { content: ""; position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); bottom: 0; border-bottom: 1px solid var(--c-line); }

/* Т2 — datasheet */
.tp-sheet { margin-top: calc(24 * var(--u)); background: var(--c-paper); border: 1.5px solid var(--c-navy); border-radius: 4px; padding: calc(36 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u)); scroll-margin-top: 120px; }
.tp-sheet__top { display: grid; grid-template-columns: 1fr calc(470 * var(--u)); gap: calc(40 * var(--u)); padding-bottom: calc(26 * var(--u)); border-bottom: 1px solid var(--c-line); }
.tp-sheet__h { font: 400 var(--t-d2)/1.15 var(--f-head); color: var(--c-ink); letter-spacing: -.025em; overflow-wrap: anywhere; }
.tp-sheet__h span { display: block; }
.tp-sheet__hl { list-style: none; margin: calc(16 * var(--u)) 0 0; padding: 0; columns: 2; column-gap: calc(34 * var(--u)); }
.tp-sheet__hl li { display: grid; grid-template-columns: calc(38 * var(--u)) 1fr; break-inside: avoid; padding: calc(5 * var(--u)) 0; font-size: var(--t-m); line-height: 1.36; color: var(--c-navy); }
.tp-sheet__hl .tp-ic { width: calc(22 * var(--u)); min-width: 18px; color: var(--c-accent); margin-top: 2px; }
.tp-sheet__p { margin-top: 14px; font-size: var(--t-m); line-height: 1.5; color: var(--c-navy); }
.tp-sheet__fig { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tp-sheet__fig img { max-height: calc(240 * var(--u)); width: auto; object-fit: contain; }
.tp-sheet__fig figcaption { margin-top: 10px; font-size: var(--t-s); color: var(--c-navy); }
.tp-sheet__h2 { margin-top: calc(26 * var(--u)); font: 400 var(--t-d3)/1 var(--f-head); text-transform: uppercase; color: var(--c-ink); letter-spacing: -.02em; scroll-margin-top: 120px; }
.tp-specs { columns: 3; column-gap: calc(40 * var(--u)); margin-top: calc(16 * var(--u)); }
.tp-specs__g { break-inside: avoid; margin-bottom: calc(26 * var(--u)); }
.tp-specs__g h3 { display: flex; align-items: center; gap: calc(12 * var(--u)); font: 400 var(--t-d5)/1.2 var(--f-head); text-transform: uppercase; color: var(--c-ink); padding-bottom: calc(8 * var(--u)); border-bottom: 1px solid var(--c-line); }
.tp-specs__g h3::before { content: ""; width: 4px; height: 1.1em; background: var(--c-accent); }
.tp-specs table { width: 100%; border-collapse: collapse; }
.tp-specs th, .tp-specs td { text-align: left; vertical-align: top; padding: calc(9 * var(--u)) calc(6 * var(--u)); border-bottom: 1px solid var(--c-line); font-size: var(--t-m); line-height: 1.38; overflow-wrap: anywhere; }
.tp-specs th { width: 40%; font-weight: 400; color: var(--c-muted); }
.tp-specs td { color: var(--c-ink); }
.tp-specs__all { margin-top: 4px; }
.tp-dl { margin-top: calc(26 * var(--u)); scroll-margin-top: 120px; }
.tp-dl h3 { font-weight: 700; font-size: var(--t-m); color: var(--c-ink); }
.tp-dl ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tp-dl a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid #C9CFD8; border-radius: 4px; color: var(--c-navy); }
.tp-dl a:hover { border-color: var(--c-navy); }
.tp-dl .tp-ic { transform: rotate(180deg); }

/* Т3 — system around it */
.tp-sys { display: grid; grid-template-columns: 1fr calc(440 * var(--u)); margin-top: calc(40 * var(--u)); background: var(--c-paper); border: 1.5px solid var(--c-navy); border-radius: 4px; padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(36 * var(--u)) calc(36 * var(--u)); scroll-margin-top: 120px; }
.tp-sys__main { padding-right: calc(30 * var(--u)); border-right: 1px solid var(--c-line); }
.tp-sys__h { font: 400 var(--t-d2)/1.05 var(--f-head); color: var(--c-ink); letter-spacing: -.025em; }
.tp-sys__sub { margin-top: calc(10 * var(--u)); font-size: var(--t-lead); color: var(--c-muted); }
.tp-sys__flow { position: relative; display: flex; align-items: center; height: calc(190 * var(--u)); margin: calc(22 * var(--u)) 0 calc(20 * var(--u)); }
.tp-sys__flow img { height: 100%; width: auto; max-width: calc(300 * var(--u)); object-fit: contain; position: relative; }
.tp-sys__flow img:first-of-type { max-width: calc(260 * var(--u)); }
.tp-sys__flow img:last-of-type { max-width: calc(360 * var(--u)); }
.tp-sys__cone { position: absolute; left: calc(-36 * var(--u)); top: 18%; width: calc(110 * var(--u)); height: 64%; background: linear-gradient(to left, rgba(248, 173, 64, .5), rgba(248, 173, 64, 0)); clip-path: polygon(100% 42%, 100% 58%, 0 100%, 0 0); }
.tp-sys__wire { flex: 1; min-width: calc(60 * var(--u)); height: 3px; margin: 0 calc(10 * var(--u)) 0 calc(4 * var(--u)); background: var(--c-accent); position: relative; }
.tp-sys__wire::before { content: ""; position: absolute; left: -4px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--c-accent); }
.tp-sys__wire::after { content: ""; position: absolute; right: -12px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 11px solid var(--c-accent); border-right: 0; }
.tp-sys__cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(22 * var(--u)); }
.tp-sys__card { display: flex; flex-direction: column; border: 1px solid #C9CFD8; border-radius: 4px; padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)); }
.tp-sys__role { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: var(--t-xl); color: var(--c-ink); }
.tp-sys__role::before { content: ""; width: 4px; height: 1.3em; background: var(--c-accent); }
.tp-sys__img { display: block; height: calc(220 * var(--u)); margin: calc(10 * var(--u)) 0 calc(14 * var(--u)); }
.tp-sys__img img { width: 100%; height: 100%; object-fit: contain; }
.tp-sys__card h3 { font: 400 var(--t-xl)/1.35 var(--f-text); color: var(--c-ink); }
.tp-sys__card h3 a:hover { text-decoration: underline; }
.tp-sys__price { margin: auto 0 calc(14 * var(--u)); padding-top: calc(12 * var(--u)); font-weight: 700; font-size: var(--t-price-l); color: var(--c-ink); }
.tp-sys__card .tp-btn { min-height: max(48px, calc(55 * var(--u))); font-size: var(--t-btn-l); font-weight: 600; }
.tp-sys__install { padding-left: calc(30 * var(--u)); display: flex; flex-direction: column; }
.tp-sys__art { width: 100%; max-height: calc(500 * var(--u)); object-fit: contain; mix-blend-mode: multiply; }
.tp-sys__h2 { margin-top: calc(20 * var(--u)); font: 400 var(--t-d3)/1.1 var(--f-head); color: var(--c-ink); letter-spacing: -.02em; }
.tp-sys__install p { margin: calc(14 * var(--u)) 0 calc(36 * var(--u)); font-size: var(--t-xl); line-height: 1.5; color: var(--c-muted); }
.tp-sys__install .tp-btn { margin-top: auto; min-height: max(48px, calc(63 * var(--u))); font-size: var(--t-btn-l); }

/* Т4 — terms */

/* Т5 — similar models */
.tp-similar { margin-top: calc(80 * var(--u)); }
.tp-similar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.tp-similar__h { font: 400 var(--t-d2)/1.1 var(--f-head); color: var(--c-ink); letter-spacing: -.025em; }
.tp-similar__all { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-xl); color: var(--c-navy); text-decoration: underline; text-underline-offset: 4px; }
.tp-similar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(22 * var(--u)); margin-top: calc(30 * var(--u)); }
.tp-card--sim { padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u)); }
.tp-card--sim .tp-card__img { height: calc(290 * var(--u)); }
.tp-card--sim .tp-card__brand { font-weight: 700; font-size: var(--t-m); color: var(--c-ink); }
.tp-card--sim .tp-card__name { font-size: var(--t-xl); line-height: 1.27; min-height: 5.08em; }
.tp-card--sim .tp-card__chips { font-size: var(--t-m); }
.tp-card--sim .tp-card__price { font-size: var(--t-price); color: var(--c-ink); margin: calc(18 * var(--u)) 0; }
.tp-card--sim .tp-btn { min-height: max(48px, calc(55 * var(--u))); font-size: var(--t-btn); font-weight: 600; }
.tp-card--sim .tp-card__compare { margin-top: calc(16 * var(--u)); font-size: var(--t-xl); gap: 16px; }
.tp-card--sim .tp-card__compare input { width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-color: var(--c-navy); }
.tp-stickybuy { display: none; }

@media (max-width: 1023px) {
	.tp-pdp__top { grid-template-columns: 1fr; }
	.tp-gal { padding: 16px; }
	.tp-gal__main { height: 320px; }
	.tp-gal__thumbs { grid-template-columns: repeat(3, 1fr); }
	.tp-sees__h { position: static; margin-bottom: 8px; }
	.tp-sheet__top { grid-template-columns: 1fr; }
	.tp-specs { columns: 2; }
	.tp-sys { grid-template-columns: 1fr; }
	.tp-sys__main { padding: 0 0 24px; border-right: 0; border-bottom: 1px solid var(--c-line); }
	.tp-sys__install { padding: 24px 0 0; }
	.tp-sys__art { max-height: 260px; }
	.tp-similar__grid { grid-template-columns: 1fr 1fr; }
	.tp-ptabs { overflow-x: auto; }
}
@media (max-width: 767px) {
	.tp-pdp { padding-bottom: 90px; }
	.tp-gal { padding: 12px; }
	.tp-gal__main { height: 240px; }
	.tp-gal__thumbs { display: flex; justify-content: center; gap: 0; }
	/* a 10 px dot inside a 24 px button: the smallest touch target Lighthouse accepts */
	.tp-gal__t { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 0; background: none; overflow: hidden; }
	.tp-gal__t::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #C9CFD8; }
	.tp-gal__t.is-on { border: 0; }
	.tp-gal__t.is-on::before { background: var(--c-accent); }
	.tp-gal__t img { display: none; }
	.tp-buy { padding: 16px; }
	.tp-buy__h {  }
	.tp-keys { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
	.tp-keys div, .tp-keys div:nth-child(n+4) { grid-template-columns: 44% 1fr; }
	.tp-buy__row { flex-wrap: wrap; }
	.tp-buy__form { flex-basis: 100%; }
	.tp-sees { overflow-x: auto; }
	.tp-sees__svg { width: 900px; max-width: none; }
	.tp-sheet { padding: 20px 16px; }
	.tp-sheet__hl, .tp-specs { columns: 1; }
	.tp-sys { padding: 20px 16px; }
	.tp-sys__flow { display: none; }
	.tp-sys__cards { grid-template-columns: 1fr; }
	.tp-similar__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.tp-card--sim .tp-card__img { height: 150px; }
	.tp-card--sim .tp-card__name { min-height: 0; }
	.tp-stickybuy { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--c-line); }
	.tp-stickybuy .tp-buy__price {  }
	.tp-stickybuy .tp-btn { flex: 1; max-width: 240px; min-height: 52px;  }
}

/* no maker distances: a slim offer instead of an empty plan (29.10) */
.tp-sees-cta { display: flex; align-items: center; gap: 16px; margin-top: calc(15 * var(--u)); padding: 14px calc(20 * var(--u)); background: var(--c-paper); border-radius: 4px; font-weight: 600; font-size: var(--t-m); color: var(--c-ink); }
.tp-sees-cta .tp-ic { color: var(--c-navy); flex: none; }
.tp-sees-cta .tp-btn { margin-left: auto; }
@media (max-width: 767px) { .tp-sees-cta { flex-wrap: wrap; } .tp-sees-cta .tp-btn { margin-left: 0; width: 100%; } }