/* Уход за матрасом: /uhod и блок «Уход» на странице матраса (tools/site_care.py, 05.11.2026).
   Макет «Ритм ухода». Отдельный файл, чтобы не трогать общий site.css: подключается только там, где есть уход. */
.care-i{width:30px;height:30px;color:var(--indigo);flex:none}
.care-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.care-chip{display:inline-block;font-size:13.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--linen);color:var(--ink)}
.care-chip:hover{background:var(--sand);color:var(--ink)}
/* первый экран: заголовок + три цифры */
.care-hero{padding:30px 0 6px}
.care-hg{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end}
.care-hero h1{font-size:52px;margin-top:10px}
.care-lead{color:var(--muted);max-width:520px;margin:16px 0 0}
.care-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.care-nums div{background:var(--card);border:1px solid var(--sand);border-radius:var(--r);padding:20px 18px}
.care-nums b{display:block;font-family:'Unbounded','Unbounded Fallback',Arial,sans-serif;font-size:44px;font-weight:600;color:var(--indigo);line-height:1}
.care-nums span{display:block;margin-top:10px;font-size:14px;color:var(--muted);line-height:1.35}
/* луна: растущая фаза от привычки к привычке, последняя — полная */
.care-moon{display:block;width:30px;height:30px;border-radius:50%;background:var(--night);position:relative;z-index:1;border:2px solid var(--paper);flex:none}
.care-m0{box-shadow:inset -7px 0 0 0 var(--gold)}
.care-m1{box-shadow:inset -14px 0 0 0 var(--gold)}
.care-m2{box-shadow:inset -21px 0 0 0 var(--gold)}
.care-m3{background:var(--gold);box-shadow:0 0 18px rgba(233,199,161,.9)}
.care-when{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--dawn-d)}
/* ритм: шкала «когда что делать» */
.care-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.care-line:before{content:"";position:absolute;left:14px;right:14px;top:14px;height:2px;background:linear-gradient(90deg,var(--sand),var(--gold),var(--dawn))}
.care-line li{position:relative;display:flex;flex-direction:column}
.care-line .care-when{margin:14px 0 10px}
.care-card{flex:1;background:var(--card);border:1px solid var(--sand);border-radius:var(--r);padding:20px;display:flex;flex-direction:column}
.care-card h3{font-size:17px;line-height:1.25;margin:12px 0 8px}
.care-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
/* схема переворота: матрас сбоку переворачивается, сверху — разворачивается подушкой к ногам */
.care-flip{display:flex;gap:10px;margin-top:auto;padding-top:16px}
.care-flip figure{margin:0;flex:1;text-align:center}
.care-flip svg{width:100%;height:auto;display:block;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.care-flip rect{fill:var(--linen)}
.care-flip .cf-top{stroke:var(--indigo);stroke-width:3}
.care-flip .cf-pil{fill:var(--card);stroke:var(--indigo)}
.care-flip .cf-arr{stroke:var(--dawn-d)}
.care-flip figcaption{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-top:2px}
.care-flip .cf-a,.care-flip .cf-b{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .care-flip .cf-a{animation:cf-v 5s var(--ease) infinite}
  .care-flip .cf-b{animation:cf-r 5s var(--ease) infinite}
}
@keyframes cf-v{0%,35%{transform:scaleY(1)}50%,85%{transform:scaleY(-1)}100%{transform:scaleY(1)}}
@keyframes cf-r{0%,35%{transform:rotate(0)}50%,85%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
/* запреты */
.care-bans{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.care-ban{background:var(--card);border:1px solid rgba(217,128,63,.35);border-radius:var(--r);padding:20px 14px;text-align:center;font-size:14.5px;font-weight:600;line-height:1.3}
.care-bi{width:46px;height:46px;color:var(--ink);display:block;margin:0 auto 12px}
.care-bi .x{stroke:var(--dawn-d);stroke-width:2.2}
.care-room{margin:14px 0 0;color:var(--muted)}
/* слои: одна раскраска для разреза на /uhod и полосок в блоке на товаре */
.care-band-memory{background:repeating-linear-gradient(0deg,#C9C7F2 0 6px,#D6D4F7 6px 12px)}
.care-band-latex{background:radial-gradient(circle,#E9DDBF 3px,transparent 3.5px) 0 0/16px 16px,#F6EBD0}
.care-band-foam{background:radial-gradient(circle,#D8DEE6 2px,transparent 2.5px) 0 0/9px 9px,#EEF1F5}
.care-band-coir{background:repeating-linear-gradient(115deg,#8A5A35 0 2px,#B07A4C 2px 5px,#9A6840 5px 7px)}
.care-band-springs{background:repeating-linear-gradient(90deg,transparent 0 6px,#4A50D4 6px 8px,transparent 8px 14px),repeating-linear-gradient(0deg,#ECEEFD 0 8px,#DFE2FB 8px 16px)}
/* разрез: выбор слоя радиокнопкой, без скрипта */
.care-x{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.care-x input{position:absolute;opacity:0;pointer-events:none}
.care-stack{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:24px;background:var(--linen)}
.care-l{display:flex;align-items:center;cursor:pointer;border-radius:12px;padding:0 14px;transition:transform .3s var(--ease),box-shadow .3s}
.care-l:hover{transform:translateX(6px)}
.care-l span{background:rgba(255,255,255,.88);color:#23264B;font-weight:600;font-size:14px;padding:5px 12px;border-radius:999px;transition:background .2s,color .2s}
.care-l.care-band-memory{height:58px}.care-l.care-band-latex{height:52px}.care-l.care-band-foam{height:44px}
.care-l.care-band-coir{height:26px}.care-l.care-band-springs{height:92px}
.care-panels{background:var(--card);border:1px solid var(--sand);border-radius:24px;padding:26px 28px;min-height:330px}
.care-p{display:none}
.care-p h3{font-size:24px;margin:6px 0 12px}
.care-short{font-weight:600;margin:0 0 12px}
.care-p ul{margin:0 0 16px;padding-left:20px;color:var(--muted)}
.care-p li{margin:5px 0}
.care-in{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.care-in>span{font-size:13px;color:var(--faint)}
#cx-memory:checked~.care-panels .care-p-memory,#cx-latex:checked~.care-panels .care-p-latex,
#cx-foam:checked~.care-panels .care-p-foam,#cx-coir:checked~.care-panels .care-p-coir,
#cx-springs:checked~.care-panels .care-p-springs{display:block}
#cx-memory:checked~.care-stack [for=cx-memory],#cx-latex:checked~.care-stack [for=cx-latex],
#cx-foam:checked~.care-stack [for=cx-foam],#cx-coir:checked~.care-stack [for=cx-coir],
#cx-springs:checked~.care-stack [for=cx-springs]{transform:translateX(14px);box-shadow:0 0 0 2px var(--indigo),var(--sh)}
#cx-memory:checked~.care-stack [for=cx-memory] span,#cx-latex:checked~.care-stack [for=cx-latex] span,
#cx-foam:checked~.care-stack [for=cx-foam] span,#cx-coir:checked~.care-stack [for=cx-coir] span,
#cx-springs:checked~.care-stack [for=cx-springs] span{background:var(--indigo);color:#fff}
.care-x input:focus-visible~.care-stack{outline:2px solid var(--indigo);outline-offset:3px}
/* ткань чехла */
.care-fabs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.care-fab{display:flex;gap:18px;align-items:flex-start;background:var(--card);border:1px solid var(--sand);border-radius:var(--r);padding:20px}
.care-fab b{font-family:'Unbounded','Unbounded Fallback',Arial,sans-serif;font-size:17px;font-weight:600}
.care-fab p{margin:6px 0 0;color:var(--muted);font-size:15px}
.care-sw{width:64px;height:64px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.care-sw-matrix{background:repeating-linear-gradient(45deg,#E6E3F6 0 3px,#F7F5FD 3px 6px)}
.care-sw-anatomic{background:repeating-linear-gradient(135deg,#D9CDB4 0 2px,#EFE6D3 2px 4px,#E4D8BF 4px 6px)}
/* наматрасник */
.care-pr{display:flex;align-items:center;gap:22px;padding:22px 26px;border-radius:var(--r);background:linear-gradient(135deg,#EEF0FD,#F6EFE3);border:1px solid var(--sand)}
:root[data-theme=dark] .care-pr{background:var(--linen)}
.care-pr img{width:96px;height:96px;object-fit:cover;border-radius:14px;flex:none}
.care-pr>div{flex:1}
.care-pr b{display:block;font-family:'Unbounded','Unbounded Fallback',Arial,sans-serif;font-size:19px;font-weight:600}
.care-pr span{display:block;margin-top:6px;color:var(--muted);max-width:520px;font-size:15.5px}
/* блок на странице матраса: ритм с лунами слева (вертикальная шкала), слои модели справа */
.care-blk{display:grid;grid-template-columns:1fr 1.1fr;gap:18px;align-items:stretch}
.care-rh{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.care-rh:before{content:"";position:absolute;left:14px;top:24px;bottom:24px;width:2px;background:linear-gradient(180deg,var(--sand),var(--gold),var(--dawn))}
.care-rh li{display:flex;align-items:center;gap:14px}
.care-rh li>div{flex:1;background:var(--card);border:1px solid var(--sand);border-radius:16px;padding:12px 16px}
.care-rh b{display:block;margin-top:3px;font-size:16px;line-height:1.3}
.care-own{border-radius:var(--r);background:var(--linen);padding:22px 24px;display:flex;flex-direction:column}
.care-own .k{margin:0 0 12px}
.care-lyr{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:10px}
.care-lyr li{display:flex;gap:14px;align-items:center}
.care-band{width:56px;height:34px;border-radius:9px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.care-lyr b{display:block;font-size:15px}
.care-lyr span{display:block;color:var(--muted);font-size:14.5px;line-height:1.4}
.care-cov{margin:4px 0 14px;font-size:14.5px;color:var(--muted)}
.care-go{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:auto;font-weight:600;font-size:15px}
@media(max-width:1000px){.care-blk{grid-template-columns:1fr}}
@media(max-width:900px){
  .care-hg,.care-x,.care-fabs{grid-template-columns:minmax(0,1fr)}
  .care-line{grid-template-columns:1fr 1fr}.care-line:before{display:none}
  .care-bans{grid-template-columns:repeat(3,1fr)}
  .care-hero h1{font-size:38px}
}
@media(max-width:560px){
  .care-line{grid-template-columns:1fr}
  .care-bans{grid-template-columns:1fr 1fr}
  .care-nums{gap:8px}.care-nums b{font-size:32px}.care-nums div{padding:14px 10px;min-width:0}
  .care-nums span{font-size:12.5px;hyphens:auto;overflow-wrap:anywhere}
  .care-panels{min-height:0;padding:22px 20px}
  .care-pr{flex-wrap:wrap;padding:20px}.care-pr img{width:72px;height:72px}
  .care-pr .btn{width:100%;justify-content:center}
}