@layer reset, base, layout, blocks, pages;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body, h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img, picture, svg { display: block; max-inline-size: 100%; block-size: auto; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; }
  table { border-collapse: collapse; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
}

@layer base {
  :root {
    --blue: #0a34b0; --blue-deep: #071f6e; --blue-soft: #e7eefc; --sky: #bfe0f2;
    --red: #d0121e; --green: #00a85c; --green-neon: #34e08a; --yellow: #ffd23f;
    --ply: #f4e7cc; --ply-dark: #e3cfa6; --ink: #0b173a; --mute: #55607a; --line: #d9deea; --paper: #ffffff;
    --head: "Bai Jamjuree", "Trebuchet MS", sans-serif; --text: "Instrument Sans", system-ui, sans-serif;
    --wrap: 1240px; --gut: clamp(16px, 4vw, 40px);
  }
  body { font-family: var(--text); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--paper); overflow-x: hidden; }
  h1, h2, h3 { font-family: var(--head); line-height: 1.15; letter-spacing: -.01em; }
  a:focus-visible, button:focus-visible, summary:focus-visible, label:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
  .ly0rm { position: absolute; inset-inline-start: -999px; inset-block-start: 8px; background: var(--ink); color: #fff; padding: .5rem 1rem; z-index: 99; }
  .ly0rm:focus { inset-inline-start: 8px; }
  .eaxc41 { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .l7weqw { --fill: 90%; display: inline-block; font-size: .95em; letter-spacing: .08em; line-height: 1;
    background: linear-gradient(90deg, #f5a300 var(--fill), #cfd5e3 var(--fill)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .e9ql { display: block; inline-size: 100%; max-inline-size: 320px; transition: transform .15s ease, filter .15s ease; }
  .e9ql img { inline-size: 100%; }
  .e9ql:hover { transform: translateY(-2px); filter: brightness(1.05); }
  .xhb2fac { display: inline-flex; align-items: center; justify-content: center; min-block-size: 48px; padding: .7rem 1.7rem; border-radius: 999px;
    font-family: var(--head); font-weight: 700; font-size: 1rem; text-decoration: none; letter-spacing: .02em; transition: transform .15s ease; }
  .xhb2fac:hover { transform: translateY(-2px); }
  .fw728 { background: var(--green-neon); color: var(--ink); box-shadow: 0 4px 0 #0f9a57; }
  .a59mo5e { background: #fff; color: var(--blue); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; min-block-size: 42px; padding: .5rem 1.6rem; }
  .u5ipthv { background: var(--blue); color: #fff; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; }
}

@layer layout {
  /* полоса и шапка — The Science Hut: тонкая строка, лого по центру, ряд ссылок ниже */
  .ttasm { background: var(--blue-deep); color: var(--green-neon); text-align: center; font-weight: 600; font-size: .82rem; padding: .45rem var(--gut); }
  .kyw2lq { background: #fff; border-block-end: 4px solid var(--red); position: sticky; inset-block-start: 0; z-index: 40; }
  .eqbe0 { max-inline-size: var(--wrap); margin-inline: auto; padding: .7rem var(--gut) 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .papqj { grid-column: 2; justify-self: center; }
  .papqj img { inline-size: clamp(150px, 16vw, 210px); }
  .eipi5pc { grid-column: 3; justify-self: end; inline-size: 250px; }
  .fjcn { grid-column: 1 / -1; }
  .fjcn ul { display: flex; justify-content: center; flex-wrap: wrap; gap: .2rem 2.2rem; padding-block: .8rem .7rem; }
  .fjcn a { font-family: var(--head); font-weight: 600; text-decoration: none; color: var(--blue); font-size: 1rem; padding-block: .3rem; border-block-end: 2px solid transparent; }
  .fjcn a:hover, .fjcn a[aria-current] { color: var(--red); border-color: var(--red); }
  .neak { position: absolute; opacity: 0; pointer-events: none; }
  .cf2e { display: none; grid-column: 1; grid-row: 1; inline-size: 44px; block-size: 44px; padding: 11px 9px; cursor: pointer; border-radius: 10px; border: 2px solid var(--line); }
  .cf2e span { display: block; block-size: 3px; background: var(--blue); border-radius: 2px; margin-block-end: 5px; }
  .cf2e span:last-child { margin: 0; }
  .neak:focus-visible + .cf2e { outline: 3px solid var(--blue); }

  main { display: block; }
  .wf1ddt { background: #fff; padding: clamp(18px, 3vw, 34px) var(--gut) 0; }
  .wf1ddt img { max-inline-size: var(--wrap); inline-size: 100%; margin-inline: auto; border-radius: 14px; }

  /* подвал — Home Science Tools: синий, лого + адрес, колонки, нижняя полоса */
  .aot7n7 { background: var(--blue); color: #fff; margin-block-start: clamp(18px, 3vw, 34px); }
  .aot7n7 a { color: #fff; text-decoration: none; }
  .aot7n7 a:hover { text-decoration: underline; }
  .yv6b9 { max-inline-size: var(--wrap); margin-inline: auto; padding: 3rem var(--gut) 2rem; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; }
  .ieqd2nz { display: inline-block; background: #fff; border-radius: 12px; padding: .6rem 1rem; margin-block-end: 1.1rem; }
  .ieqd2nz img { inline-size: 170px; }
  .dqkv { display: flex; gap: .7rem; font-size: .93rem; margin-block-end: .7rem; line-height: 1.5; }
  .r6fu71d { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 2px; }
  .mvnrpe9 { font-family: var(--text); font-size: .82rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-block-end: 1rem; }
  .aot7n7 li { margin-block-end: .55rem; font-size: .95rem; }
  .jpj5 { max-inline-size: var(--wrap); margin-inline: auto; padding: 0 var(--gut) 2rem; display: flex; align-items: center; gap: 1.3rem; }
  .jpj5 img { inline-size: 150px; border-radius: 10px; }
  .jpj5 p { max-inline-size: 46ch; font-size: .95rem; opacity: .92; }
  .w2xev4h { background: #0a2a8f; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 3rem; padding: 1rem var(--gut); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

  .gnvmfg { display: none; }

  .urg8c ol { display: flex; flex-wrap: wrap; gap: .2rem .55rem; font-size: .86rem; color: var(--mute); margin-block-end: 1.2rem; }
  .urg8c li + li::before { content: "›"; margin-inline-end: .55rem; color: var(--mute); }
  .urg8c a { color: var(--blue); text-decoration: none; }
  .urg8c a:hover { text-decoration: underline; }
}

@layer blocks {
  /* хиро — The Science Hut */
  .bf1btl4 { position: relative; isolation: isolate; min-block-size: clamp(440px, 62vh, 620px); display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; }
  .bf1btl4 picture, .e6p2p { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 35%; z-index: -2; }
  .bf1btl4::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 18, 60, .55), rgba(7, 18, 60, .78)); }
  .g7r2w { max-inline-size: 860px; padding: 3rem var(--gut); }
  .bf1btl4 h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 700; color: #fff; }
  .bf1btl4 h1 span { display: block; color: var(--yellow); }
  .bf1btl4 p { margin: 1rem auto 1.8rem; max-inline-size: 60ch; font-size: clamp(1rem, 1.6vw, 1.15rem); color: #e9eefb; }
  .qgef { display: flex; flex-wrap: wrap; gap: 1rem 1.3rem; justify-content: center; align-items: center; }
  .qgef .e9ql { inline-size: 300px; }

  /* плитки категорий — The Science Hut */
  .ldx3g { max-inline-size: var(--wrap); margin: 0 auto; padding: 2.6rem var(--gut) 1rem; }
  .mbz2xn { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-block-end: 1.3rem; }
  .tx23x { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }
  .tx23x a { display: block; text-decoration: none; font-weight: 700; font-size: .95rem; }
  .tx23x picture { aspect-ratio: 1; border-radius: 18px; overflow: hidden; border: 3px solid var(--ink); box-shadow: 4px 6px 0 rgba(11, 23, 58, .22); margin-block-end: .7rem; }
  .tx23x img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .25s ease; }
  .tx23x a:hover img { transform: scale(1.05); }
  .tx23x i { font-style: normal; color: var(--red); }

  /* bestsellers — CircuitMess */
  .kkm8c { max-inline-size: var(--wrap); margin: 0 auto; padding: 2.4rem var(--gut) 3rem; }
  .zpwgz { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: .4rem 2rem; margin-block-end: 1.4rem; }
  .zpwgz h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
  .zpwgz p { color: var(--mute); max-inline-size: 52ch; font-size: .95rem; }
  .hjxpq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
  .hr2b { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 2px 14px rgba(11, 23, 58, .12); padding: 1rem 1.1rem 1.2rem; }
  .pl3vc { position: absolute; inset-block-start: .9rem; inset-inline-start: .9rem; z-index: 2; background: var(--yellow); color: var(--ink); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: .25rem .7rem .25rem 1.9rem; }
  .pl3vc::before { content: "%"; position: absolute; inset-inline-start: -.2rem; inset-block-start: 50%; translate: 0 -50%; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: .78rem; }
  .s33x0 { display: block; aspect-ratio: 1; margin-block-end: .7rem; }
  .s33x0 img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .gxo9 { flex: 1; }
  .xs7t { font-size: 1.08rem; font-weight: 700; }
  .xs7t a { text-decoration: none; }
  .xs7t a:hover { color: var(--blue); }
  .ey51oo { font-size: .85rem; color: var(--mute); margin-block: .2rem .6rem; }
  .d7wmz4 { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-block-end: .9rem; }
  .q430 { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--mute); }
  .xcylojt { font-family: var(--head); font-weight: 700; font-size: 1.45rem; color: var(--red); text-align: end; line-height: 1.1; }
  .xcylojt s { display: block; font-size: .78rem; color: var(--mute); font-weight: 600; }
  .tjki3yo { max-inline-size: none; margin-block-start: auto; }

  /* диагональная полоса — CircuitMess */
  .bres1 { background: var(--blue-deep) radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .5) 1px, transparent 1.6px) 0 0 / 48px 48px;
    clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); color: #fff; padding: 4rem var(--gut) 7rem; }
  .z52syy { max-inline-size: 1060px; margin-inline: auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; }
  .i2ic0u { display: block; background: #fff; border-radius: 26px; padding: 1rem; rotate: -4deg; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); max-inline-size: 420px; }
  .gc2cvt h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-block-end: 1rem; }
  .gc2cvt p { color: #d8e1fb; margin-block-end: 1.5rem; max-inline-size: 48ch; }
  .y6jx { inline-size: 300px; }

  /* вкладки навыков — CircuitMess */
  .fifruz { max-inline-size: var(--wrap); margin: 0 auto; padding: 2rem var(--gut) 3.4rem; text-align: center; }
  .fifruz > h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-block-end: 1rem; }
  .si9z199 { position: absolute; opacity: 0; pointer-events: none; }
  .gua60 { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 2rem; margin-block-end: 1.6rem; }
  .gua60 label { cursor: pointer; font-weight: 600; color: var(--mute); padding-block: .35rem; border-block-end: 3px solid transparent; }
  .nyxz { display: none; grid-template-columns: 1fr 1.1fr 1fr; gap: 2rem; align-items: center; text-align: start; }
  .cp7yf { position: relative; text-align: end; font-size: 1rem; padding-inline-end: 2.4rem; }
  .cp7yf::after { content: ""; position: absolute; inset-inline-end: 0; inset-block-start: 50%; inline-size: 2rem; block-size: 2px; background: var(--green); }
  .cp7yf::before { content: ""; position: absolute; inset-inline-end: -6px; inset-block-start: calc(50% - 6px); inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(0, 168, 92, .25); }
  .jdu7t { display: block; border-radius: 50%; overflow: hidden; background: radial-gradient(#fff 55%, #eef2fa); box-shadow: 0 20px 50px rgba(11, 23, 58, .12); aspect-ratio: 1; }
  .jdu7t img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .tghv57x h3 { font-size: 1.45rem; margin-block-end: .6rem; }
  .tghv57x p { color: var(--mute); margin-block-end: 1.2rem; }

  /* возраст — Home Science Tools */
  .hmpq2a { max-inline-size: var(--wrap); margin: 0 auto; padding: 2rem var(--gut) 3.4rem; display: grid; grid-template-columns: .8fr 2.6fr; gap: 1.4rem; align-items: center; }
  .hmpq2a h2 { font-family: var(--text); font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.8rem); color: var(--blue-deep); line-height: 1.15; }
  .hmpq2a ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .hmpq2a a { position: relative; display: block; border-radius: 8px; overflow: hidden; aspect-ratio: .95; text-decoration: none; color: #fff; isolation: isolate; }
  .hmpq2a picture, .hmpq2a img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: -2; }
  .hmpq2a a::after { content: ""; position: absolute; inset: 0; background: rgba(10, 52, 176, .72); z-index: -1; transition: background .2s; }
  .hmpq2a a:hover::after { background: rgba(10, 52, 176, .6); }
  .zaagoj { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; block-size: 100%; text-align: center; padding: 1rem; font-size: 1.05rem; font-weight: 600; }
  .zaagoj b { font-family: var(--text); font-size: 1.55rem; font-weight: 500; }
  .zaagoj .xhb2fac { margin-block-start: 1.1rem; font-style: normal; }

  /* три рамочных блока — The Science Hut */
  .zz1j { max-inline-size: var(--wrap); margin: 0 auto; padding: 1rem var(--gut) 3rem; }
  .zz1j > h2 { text-align: center; font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-block-end: 1.3rem; }
  .cewul5m { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
  .tau4 { background: #f4f5f7; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 5px 6px 0 rgba(11, 23, 58, .28); padding: 1.3rem 1.3rem 1.5rem; }
  .tau4 h3 { font-family: var(--text); font-size: 1rem; font-weight: 700; margin-block-end: .7rem; }
  .tau4 p { color: #4b5368; font-size: .98rem; line-height: 1.75; }
  .g2zz { margin-block-start: 1.8rem; }
  .g2zz img { border-radius: 14px; inline-size: 100%; }

  /* рейтинги — CircuitMess (тёмный фон, облака) */
  .axwoou { position: relative; background: linear-gradient(180deg, #120b52, #2a0f6e 70%, #3a137d); color: #fff; padding: 4.5rem var(--gut) 6rem; overflow: hidden; }
  .axwoou::before, .axwoou::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
  .axwoou::before { inline-size: 260px; block-size: 110px; inset-inline-end: -40px; inset-block-start: -50px; box-shadow: -120px 20px 0 -20px #fff, 90px 30px 0 -10px #fff; }
  .axwoou::after { inline-size: 340px; block-size: 120px; inset-inline-start: -60px; inset-block-end: -60px; box-shadow: 150px 20px 0 -30px #fff, 300px 40px 0 -20px #fff, 900px 30px 0 -10px #fff, 1080px 10px 0 0 #fff; }
  .l35fz { position: relative; z-index: 1; max-inline-size: var(--wrap); margin-inline: auto; }
  .axwoou h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); max-inline-size: 22ch; }
  .l35fz > p { max-inline-size: 62ch; margin-block: .8rem 1.8rem; color: #d9d6f5; }
  .xawq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .xawq a { display: grid; grid-template-columns: 84px 1fr; gap: .9rem; align-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; padding: .8rem; text-decoration: none; font-size: .86rem; color: #e8e5ff; }
  .xawq a:hover { background: rgba(255, 255, 255, .14); }
  .xawq picture { border-radius: 10px; overflow: hidden; background: #fff; }
  .xawq b { display: block; color: #fff; font-size: .95rem; margin-block-end: .25rem; line-height: 1.3; }
  .zv4p1a { margin-block-start: 1.8rem; }
  .zv4p1a img { border-radius: 14px; inline-size: 100%; }

  /* build notes — Solar Made (белая панель на фоне-текстуре) */
  .g413 { background: var(--ply) repeating-linear-gradient(100deg, transparent 0 22px, rgba(160, 120, 60, .08) 22px 24px, transparent 24px 61px); padding: 3rem var(--gut); }
  .b0r58 { max-inline-size: var(--wrap); margin-inline: auto; background: #fff; padding: 2.2rem clamp(16px, 3vw, 3rem) 2.6rem; text-align: center; box-shadow: 0 2px 0 var(--ply-dark); }
  .b0r58 h2, .b0r58 h1 { font-style: italic; font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
  .pm30rz { display: inline-block; color: var(--blue); font-size: .9rem; letter-spacing: .12em; margin-block: .2rem 1.6rem; text-decoration: none; }
  .b0r58 ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
  .b0r58 li a { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-decoration: none; }
  .b0r58 picture { aspect-ratio: 1.3; overflow: hidden; inline-size: 100%; margin-block-end: .4rem; }
  .b0r58 img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .b0r58 time { font-size: .78rem; letter-spacing: .14em; color: var(--mute); }
  .b0r58 span { font-weight: 700; letter-spacing: .06em; font-size: 1.02rem; line-height: 1.35; }
  .b0r58 em { font-style: normal; color: var(--blue); font-size: .9rem; letter-spacing: .1em; }
  .lo6f6c .ufa6 { margin: .6rem auto 2rem; }
  .lo6f6c em { letter-spacing: 0; color: var(--mute); max-inline-size: 40ch; }

  /* SEO-сплиты — Home Science Tools */
  .x5gp { padding: 3.4rem var(--gut); }
  .g9pukv { background: var(--sky); }
  .brqx3h { max-inline-size: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: center; }
  .g9pukv .brqx3h { grid-template-columns: 1.25fr 1fr; }
  .g9pukv figure { order: 2; }
  .x5gp figure img { border-radius: 8px; inline-size: 100%; aspect-ratio: 1.25; object-fit: cover; }
  .x5gp h2 { font-family: var(--text); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--blue-deep); margin-block-end: 1rem; }
  .x5gp p { color: #475069; margin-block-end: 1rem; line-height: 1.75; }
  .x5gp .xhb2fac { margin-block-start: .5rem; }

  /* ряд гарантий — CircuitMess */
  .pcvotin { max-inline-size: var(--wrap); margin: 0 auto; padding: 3rem var(--gut) 1rem; }
  .pcvotin ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; text-align: center; }
  .pcvotin li { display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: .85rem; color: var(--mute); }
  .pcvotin b { color: var(--ink); text-transform: uppercase; font-size: .82rem; letter-spacing: .04em; margin-block-start: .6rem; }
  .e2u3 { inline-size: 64px; block-size: 64px; border-radius: 50%; background: var(--blue-deep); color: #fff; display: grid; place-items: center; }
  .e2u3 svg { inline-size: 30px; block-size: 30px; }

  /* FAQ — CircuitMess */
  .z2kc6he { max-inline-size: var(--wrap); margin: 0 auto; padding: 3rem var(--gut) 3.2rem; display: grid; grid-template-columns: 1fr 2.2fr; gap: 2.4rem; align-items: start; }
  .z2kc6he > h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
  .gx76yyt details { border-block-start: 1px solid #b8bfcd; }
  .gx76yyt details:last-of-type { border-block-end: 1px solid #b8bfcd; }
  .gx76yyt summary { list-style: none; cursor: pointer; padding: 1rem 2.4rem 1rem 0; position: relative; font-weight: 600; }
  .gx76yyt summary::-webkit-details-marker { display: none; }
  .gx76yyt summary::after { content: ""; position: absolute; inset-inline-end: .4rem; inset-block-start: 1.25rem; inline-size: 10px; block-size: 10px; border-inline-end: 2.5px solid var(--ink); border-block-end: 2.5px solid var(--ink); rotate: 45deg; transition: rotate .2s; }
  .gx76yyt details[open] summary::after { rotate: -135deg; inset-block-start: 1.5rem; }
  .gx76yyt details p { padding-block-end: 1.1rem; color: #475069; }
}

@layer pages {
  /* коллекция — Solar Made */
  .ej4f { max-inline-size: var(--wrap); margin: 0 auto; padding: 1.4rem var(--gut) 3rem; }
  .tz2a3 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-block-end: 1.6rem; }
  .ej4f h1 { font-style: italic; font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
  .ufa6 { max-inline-size: 64ch; color: var(--mute); letter-spacing: .02em; margin-block-start: .5rem; }
  .at0mt9p { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); font-weight: 700; }
  .jgeb73 { display: grid; grid-template-columns: repeat(4, 1fr); border-block-start: 1px solid var(--line); border-inline-start: 1px solid var(--line); }
  .gt596l { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.1rem 1rem 1.3rem; border-inline-end: 1px solid var(--line); border-block-end: 1px solid var(--line); }
  .irkp { display: flex; flex-direction: column; align-items: center; gap: .7rem; text-decoration: none; flex: 1; }
  .irkp picture { aspect-ratio: 1; inline-size: 100%; max-inline-size: 230px; }
  .irkp img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .lygc13 { font-weight: 700; letter-spacing: .05em; font-size: .95rem; line-height: 1.35; }
  .irkp:hover .lygc13 { color: var(--blue); }
  .gscy { font-size: .78rem; color: var(--mute); margin-block: .5rem .2rem; }
  .zf8a { font-family: var(--head); font-weight: 700; font-size: 1.25rem; color: var(--red); margin-block-end: .7rem; }
  .zf8a s { font-size: .8rem; color: var(--mute); font-weight: 500; }
  .hdjaj { max-inline-size: 240px; }
  .lde7c { max-inline-size: 76ch; margin-block-start: 2.2rem; }
  .lde7c p { margin-block-end: 1rem; color: #3d4660; }
  .kzx2d { margin-block-start: 2rem; padding-block-start: 1.6rem; border-block-start: 1px solid var(--line); }
  .kzx2d h2 { font-size: 1.2rem; margin-block-end: .8rem; }
  .kzx2d ul, .klf40n { display: flex; flex-wrap: wrap; gap: .6rem; }
  .kzx2d a, .klf40n a { display: inline-block; border: 2px solid var(--blue); color: var(--blue); border-radius: 999px; padding: .45rem 1.1rem; text-decoration: none; font-weight: 600; font-size: .92rem; }
  .kzx2d a:hover, .klf40n a:hover { background: var(--blue); color: #fff; }
  .pfp1o { position: absolute; opacity: 0; pointer-events: none; }
  .x5m451n { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1.4rem; }
  .x5m451n label { cursor: pointer; border: 2px solid var(--line); border-radius: 8px; padding: .5rem 1rem; font-weight: 600; font-size: .92rem; }
  .x5m451n small { color: inherit; opacity: .7; margin-inline-start: .2rem; }

  /* карточка товара */
  .njvy { max-inline-size: var(--wrap); margin: 0 auto; padding: 1.4rem var(--gut) 3rem; }
  .bpha7xb { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
  .ap8k1 { position: absolute; opacity: 0; pointer-events: none; }
  .quud { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
  .q53f { display: none; }
  .q53f img { inline-size: 100%; aspect-ratio: 1; object-fit: contain; }
  .y83p61r { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; margin-block-start: .6rem; }
  .xb55z { cursor: pointer; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
  .xb55z img { aspect-ratio: 1; object-fit: cover; inline-size: 100%; }
  .b4y2a6d { display: inline-block; background: var(--yellow); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: .25rem .8rem; }
  .l1d27jg h1 { font-size: clamp(1.7rem, 3vw, 2.35rem); margin-block: .7rem .6rem; }
  .gcmyf { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--mute); font-size: .95rem; }
  .gcmyf .l7weqw { font-size: 1.15rem; }
  .gcmyf b { color: var(--ink); }
  .qm2i { font-family: var(--head); font-weight: 700; font-size: 2.3rem; color: var(--red); margin-block: .6rem .9rem; display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
  .qm2i s { font-size: 1.05rem; color: var(--mute); font-weight: 500; }
  .qm2i em { font-style: normal; font-size: .82rem; background: var(--green); color: #fff; border-radius: 6px; padding: .15rem .55rem; font-family: var(--text); }
  .jmohsye { max-inline-size: 360px; }
  .rmprb { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-block: 1.4rem; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .rmprb div { padding: .75rem 1rem; border-block-end: 1px solid var(--line); }
  .rmprb div:nth-child(odd) { border-inline-end: 1px solid var(--line); }
  .rmprb div:nth-last-child(-n+2) { border-block-end: 0; }
  .rmprb dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); font-weight: 700; }
  .rmprb dd { font-weight: 600; }
  .rmprb a { color: var(--blue); }
  .zw76zr { font-size: 1.08rem; color: #33405f; }
  .u9or0 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.4rem; margin-block-start: 3rem; padding-block-start: 2.4rem; border-block-start: 4px solid var(--ply-dark); }
  .u9or0 h2 { font-size: 1.5rem; margin-block-end: 1rem; }
  .p3lwfw p { margin-block-end: 1rem; color: #3d4660; }
  .m587 { background: var(--blue-soft); border-radius: 16px; padding: 1.6rem; }
  .m587 li { position: relative; padding-inline-start: 2rem; margin-block-end: .8rem; }
  .m587 li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .25rem; inline-size: 1.2rem; block-size: 1.2rem; border-radius: 50%; background: var(--green) no-repeat center / 70% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
  .m587 .e9ql { margin-block-start: 1.2rem; }
  .wkia { margin-block-start: 3rem; }
  .wkia h2 { font-size: 1.6rem; margin-block-end: 1.2rem; }

  /* build note */
  .kyntt0 { max-inline-size: 860px; margin: 0 auto; padding: 1.4rem var(--gut) 3rem; }
  .jmcl7jb { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); font-weight: 700; }
  .kgipjh h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-block: .5rem .9rem; }
  .oeoi8n { font-size: 1.15rem; color: #33405f; margin-block-end: 1.6rem; }
  .nme0yt h2 { font-size: 1.45rem; margin-block: 2rem .7rem; }
  .nme0yt p { margin-block-end: 1rem; color: #3d4660; line-height: 1.75; }
  .mld1s { margin-block-start: 2.6rem; }
  .mld1s h2 { font-size: 1.4rem; margin-block-end: 1rem; }
  .tco3 { display: grid; grid-template-columns: 200px 1fr; gap: 1.4rem; align-items: center; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 5px 6px 0 rgba(11, 23, 58, .2); padding: 1rem; margin-block-end: 1.2rem; background: #fff; }
  .hk9gl5 { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); font-weight: 700; }
  .tco3 h3 { font-size: 1.2rem; margin-block: .2rem .4rem; }
  .tco3 h3 a { text-decoration: none; }
  .lds1w > p { font-size: .95rem; color: #475069; margin-block-end: .5rem; }
  .tco3 .q430 b { color: var(--red); font-family: var(--head); font-size: 1.1rem; margin-inline-start: .4rem; }
  .ycy2hnw { max-inline-size: 280px; margin-block-start: .4rem; }

  /* сервисные */
  .uug57 { max-inline-size: 960px; margin: 0 auto; padding: 1.4rem var(--gut) 3rem; }
  .h07f4sr { margin-block-end: 2rem; padding-block-end: 1.4rem; border-block-end: 4px solid var(--red); }
  .h07f4sr h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-block-end: .7rem; }
  .h07f4sr p { font-size: 1.1rem; color: #33405f; max-inline-size: 66ch; }
  .uug57 > p { margin-block-end: 1rem; color: #3d4660; }
  .uug57 a { color: var(--blue); }
  .yz0tw { font-size: 1.4rem; margin-block: 2rem 1rem; }
  .eldj7c { font-size: .88rem; color: var(--mute); }
  .ihftl li { display: grid; grid-template-columns: 70px 1fr; gap: 1rem; padding-block: 1.1rem; border-block-end: 1px dashed var(--line); }
  .oxm9puy { font-family: var(--head); font-weight: 700; font-size: 2rem; color: var(--red); line-height: 1; }
  .ihftl h2 { font-size: 1.2rem; margin-block-end: .3rem; }
  .ihftl p { color: #475069; }
  .s2wc7j8 { margin-block: 2rem; }
  .s2wc7j8 img { border-radius: 14px; }
  .un68 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .un68 div { background: var(--ply); border-radius: 12px; padding: 1rem 1.2rem; }
  .un68 dt { font-family: var(--head); font-weight: 700; font-size: 1.1rem; }
  .dwxzk { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; align-items: start; }
  .jugc { background: var(--blue); color: #fff; border-radius: 16px; padding: 1.6rem; }
  .jugc h2 { font-size: 1.3rem; margin-block-end: .8rem; }
  .jugc p { margin-block-end: .9rem; }
  .jugc .eldj7c { color: #d8e1fb; }
  .jlw0h0q { color: #fff !important; font-weight: 700; font-size: 1.08rem; word-break: break-all; }
  .h0rz7w { inline-size: 100%; font-size: .95rem; }
  .h0rz7w th, .h0rz7w td { text-align: start; vertical-align: top; padding: .8rem .9rem; border-block-end: 1px solid var(--line); }
  .h0rz7w thead th { background: var(--ink); color: #fff; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
  .h0rz7w tbody th { font-weight: 700; inline-size: 30%; }
  .dwxzk .yz0tw { margin-block-start: 0; }
  .qmla { counter-reset: r; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .qmla li { counter-increment: r; position: relative; background: var(--blue-soft); border-radius: 14px; padding: 3.2rem 1rem 1.1rem; }
  .qmla li::before { content: counter(r); position: absolute; inset-block-start: .9rem; inset-inline-start: 1rem; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 700; }
  .qmla b { display: block; font-family: var(--head); font-size: 1.05rem; margin-block-end: .3rem; }
  .qmla p { font-size: .92rem; color: #475069; }
  .lf71 ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1.4rem; margin-block-end: 1rem; }
  .lf71 li::before { content: "▪ "; color: var(--green); }
  .d9xmjm8 { background: var(--ply); border-inline-start: 5px solid var(--red); border-radius: 8px; padding: 1rem 1.2rem; }
  .gmx4 tbody th { inline-size: 24%; }
  .y42cv { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-block-end: 1.8rem; }
  .cmdw032 { border-radius: 16px; padding: 1.4rem; }
  .cmdw032 h2 { font-size: 1.2rem; margin-block-end: .7rem; }
  .cmdw032 li { margin-block-end: .5rem; padding-inline-start: 1.4rem; position: relative; }
  .g4ts9r { background: var(--blue-soft); }
  .g4ts9r li::before { content: "+"; position: absolute; inset-inline-start: 0; color: var(--green); font-weight: 700; }
  .w7pr35 { background: #fdecee; }
  .w7pr35 li::before { content: "×"; position: absolute; inset-inline-start: 0; color: var(--red); font-weight: 700; }
  .d98qad { counter-reset: q; }
  .d98qad li { counter-increment: q; display: grid; grid-template-columns: 56px 1fr; column-gap: 1rem; padding-block: 1rem; border-block-end: 1px solid var(--line); }
  .d98qad li::before { content: counter(q); grid-row: span 2; inline-size: 44px; block-size: 44px; border: 3px solid var(--ink); border-radius: 10px; display: grid; place-items: center; font-family: var(--head); font-weight: 700; font-size: 1.2rem; }
  .d98qad h2 { font-size: 1.1rem; }
  .d98qad p { color: #475069; }
  .o8ty9u9 ul { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1.6rem; }
  .o8ty9u9 a { display: inline-block; background: var(--ply); border-radius: 8px; padding: .45rem 1rem; text-decoration: none; font-weight: 600; color: var(--ink) !important; }
  .prurv { margin-block-end: 1.8rem; }
  .prurv h2 { font-size: 1.25rem; margin-block-end: .5rem; color: var(--blue); }
  .kgkxcvw { max-inline-size: 760px; margin: 0 auto; padding: 4rem var(--gut); text-align: center; }
  .gjic { font-family: var(--head); font-weight: 700; font-size: clamp(5rem, 16vw, 9rem); line-height: 1; color: var(--ply-dark); }
  .kgkxcvw h1 { font-size: 2rem; margin-block: .6rem; }
  .kgkxcvw p { color: var(--mute); margin-block-end: 1.4rem; }
  .klf40n { justify-content: center; }

  /* адаптив */
  @media (max-width: 1060px) {
    .eipi5pc { display: none; }
    .gnvmfg { display: block; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50; background: rgba(255, 255, 255, .96); box-shadow: 0 -4px 16px rgba(11, 23, 58, .15); padding: .5rem 16px calc(.5rem + env(safe-area-inset-bottom)); }
    .y5yuxy { max-inline-size: 300px; margin-inline: auto; }
    body { padding-block-end: 84px; }
    .tx23x { grid-template-columns: repeat(3, 1fr); }
    .hjxpq { grid-template-columns: repeat(2, 1fr); }
    .nyxz { grid-template-columns: 1fr 1fr; }
    .cp7yf { grid-column: 1 / -1; text-align: center; padding: 0; }
    .cp7yf::before, .cp7yf::after { display: none; }
    .hmpq2a { grid-template-columns: 1fr; }
    .xawq { grid-template-columns: repeat(2, 1fr); }
    .yv6b9 { grid-template-columns: 1fr 1fr; }
    .jgeb73 { grid-template-columns: repeat(3, 1fr); }
    .qmla { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 860px) {
    .cf2e { display: block; }
    .eqbe0 { padding-block-end: .7rem; }
    .fjcn { display: none; }
    .neak:checked ~ .fjcn { display: block; }
    .fjcn ul { flex-direction: column; align-items: stretch; gap: 0; padding-block: .6rem 0; }
    .fjcn a { display: block; padding: .8rem .2rem; border-block-end: 1px solid var(--line); }
    .bres1 { clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); padding-block-end: 5rem; }
    .z52syy, .brqx3h, .g9pukv .brqx3h, .z2kc6he, .bpha7xb, .u9or0, .dwxzk { grid-template-columns: 1fr; }
    .g9pukv figure { order: 0; }
    .i2ic0u { max-inline-size: 300px; margin-inline: auto; }
    .cewul5m, .b0r58 ul { grid-template-columns: 1fr; }
    .pcvotin ul { grid-template-columns: repeat(2, 1fr); }
    .rmprb { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    body { font-size: 16px; }
    .tx23x { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
    .hjxpq { grid-template-columns: 1fr; }
    .nyxz { grid-template-columns: 1fr; }
    .hmpq2a ul { grid-template-columns: 1fr; }
    .hmpq2a a { aspect-ratio: 1.6; }
    .xawq { grid-template-columns: 1fr; }
    .jgeb73 { grid-template-columns: repeat(2, 1fr); }
    .gt596l { padding: .8rem .5rem 1rem; }
    .lygc13 { font-size: .85rem; }
    .yv6b9 { grid-template-columns: 1fr; }
    .jpj5 { flex-direction: column; align-items: flex-start; }
    .tco3 { grid-template-columns: 1fr; }
    .msufx { max-inline-size: 220px; }
    .qmla, .un68, .y42cv, .lf71 ul { grid-template-columns: 1fr; }
    .y83p61r { grid-template-columns: repeat(6, 1fr); gap: .3rem; }
    .h0rz7w thead { display: none; }
    .h0rz7w tr { display: block; border-block-end: 2px solid var(--line); padding-block: .5rem; }
    .h0rz7w th, .h0rz7w td { display: block; inline-size: auto !important; border: 0; padding: .3rem .2rem; }
    .qgef .e9ql { inline-size: 270px; }
  }
}
.si9z199:nth-of-type(1):checked~.wmx0nt>.nyxz:nth-child(1){display:grid}.si9z199:nth-of-type(1):checked~.gua60 label:nth-child(1){color:var(--ink);border-color:var(--green)}.si9z199:nth-of-type(1):focus-visible~.gua60 label:nth-child(1){outline:3px solid var(--blue);outline-offset:3px}.si9z199:nth-of-type(2):checked~.wmx0nt>.nyxz:nth-child(2){display:grid}.si9z199:nth-of-type(2):checked~.gua60 label:nth-child(2){color:var(--ink);border-color:var(--green)}.si9z199:nth-of-type(2):focus-visible~.gua60 label:nth-child(2){outline:3px solid var(--blue);outline-offset:3px}.si9z199:nth-of-type(3):checked~.wmx0nt>.nyxz:nth-child(3){display:grid}.si9z199:nth-of-type(3):checked~.gua60 label:nth-child(3){color:var(--ink);border-color:var(--green)}.si9z199:nth-of-type(3):focus-visible~.gua60 label:nth-child(3){outline:3px solid var(--blue);outline-offset:3px}.si9z199:nth-of-type(4):checked~.wmx0nt>.nyxz:nth-child(4){display:grid}.si9z199:nth-of-type(4):checked~.gua60 label:nth-child(4){color:var(--ink);border-color:var(--green)}.si9z199:nth-of-type(4):focus-visible~.gua60 label:nth-child(4){outline:3px solid var(--blue);outline-offset:3px}.si9z199:nth-of-type(5):checked~.wmx0nt>.nyxz:nth-child(5){display:grid}.si9z199:nth-of-type(5):checked~.gua60 label:nth-child(5){color:var(--ink);border-color:var(--green)}.si9z199:nth-of-type(5):focus-visible~.gua60 label:nth-child(5){outline:3px solid var(--blue);outline-offset:3px}.ap8k1:nth-of-type(1):checked~.quud>.q53f:nth-child(1){display:block}.ap8k1:nth-of-type(1):checked~.y83p61r .xb55z:nth-child(1){border-color:var(--red)}.ap8k1:nth-of-type(1):focus-visible~.y83p61r .xb55z:nth-child(1){outline:3px solid var(--blue)}.ap8k1:nth-of-type(2):checked~.quud>.q53f:nth-child(2){display:block}.ap8k1:nth-of-type(2):checked~.y83p61r .xb55z:nth-child(2){border-color:var(--red)}.ap8k1:nth-of-type(2):focus-visible~.y83p61r .xb55z:nth-child(2){outline:3px solid var(--blue)}.ap8k1:nth-of-type(3):checked~.quud>.q53f:nth-child(3){display:block}.ap8k1:nth-of-type(3):checked~.y83p61r .xb55z:nth-child(3){border-color:var(--red)}.ap8k1:nth-of-type(3):focus-visible~.y83p61r .xb55z:nth-child(3){outline:3px solid var(--blue)}.ap8k1:nth-of-type(4):checked~.quud>.q53f:nth-child(4){display:block}.ap8k1:nth-of-type(4):checked~.y83p61r .xb55z:nth-child(4){border-color:var(--red)}.ap8k1:nth-of-type(4):focus-visible~.y83p61r .xb55z:nth-child(4){outline:3px solid var(--blue)}.ap8k1:nth-of-type(5):checked~.quud>.q53f:nth-child(5){display:block}.ap8k1:nth-of-type(5):checked~.y83p61r .xb55z:nth-child(5){border-color:var(--red)}.ap8k1:nth-of-type(5):focus-visible~.y83p61r .xb55z:nth-child(5){outline:3px solid var(--blue)}.ap8k1:nth-of-type(6):checked~.quud>.q53f:nth-child(6){display:block}.ap8k1:nth-of-type(6):checked~.y83p61r .xb55z:nth-child(6){border-color:var(--red)}.ap8k1:nth-of-type(6):focus-visible~.y83p61r .xb55z:nth-child(6){outline:3px solid var(--blue)}#f-speaker-kits:checked~.jgeb73 .gt596l:not([data-c=speaker-kits]){display:none}#f-speaker-kits:checked~.x5m451n label[for=f-speaker-kits]{background:var(--blue);color:#fff;border-color:var(--blue)}#f-speaker-kits:focus-visible~.x5m451n label[for=f-speaker-kits]{outline:3px solid var(--green)}#f-radio-kits:checked~.jgeb73 .gt596l:not([data-c=radio-kits]){display:none}#f-radio-kits:checked~.x5m451n label[for=f-radio-kits]{background:var(--blue);color:#fff;border-color:var(--blue)}#f-radio-kits:focus-visible~.x5m451n label[for=f-radio-kits]{outline:3px solid var(--green)}#f-solar-kits:checked~.jgeb73 .gt596l:not([data-c=solar-kits]){display:none}#f-solar-kits:checked~.x5m451n label[for=f-solar-kits]{background:var(--blue);color:#fff;border-color:var(--blue)}#f-solar-kits:focus-visible~.x5m451n label[for=f-solar-kits]{outline:3px solid var(--green)}#f-gift-sets:checked~.jgeb73 .gt596l:not([data-c=gift-sets]){display:none}#f-gift-sets:checked~.x5m451n label[for=f-gift-sets]{background:var(--blue);color:#fff;border-color:var(--blue)}#f-gift-sets:focus-visible~.x5m451n label[for=f-gift-sets]{outline:3px solid var(--green)}#f-all:checked~.x5m451n label[for=f-all]{background:var(--blue);color:#fff;border-color:var(--blue)}#f-all:focus-visible~.x5m451n label[for=f-all]{outline:3px solid var(--green)}