/* TECHCOMIN DAY 5 - visual system tokens (single source of spacing/scale) */
:root{
  --d5-max:1160px; --d5-gap:clamp(16px,2vw,28px); --d5-sec:clamp(28px,4vw,64px);
  --d5-h-margin:clamp(10px,1.2vw,18px); --d5-btn-h:46px; --d5-radius-img:14px;
  --d5-radius-card:14px; --d5-line:#e4e8e6; --d5-ink:#16211c; --d5-muted:#5d6b64;
  --d5-accent:#0F6B46; --d5-accent-ink:#0b5637; --d5-soft:#f3f6f4;
}
body.d5{color:var(--d5-ink)}
body.d5 .wrap,body.d5 main.wrap{max-width:var(--d5-max)}
body.d5 main.wrap > section.sec{margin-block:var(--d5-sec)}
body.d5 h1.page-h1{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.5rem);line-height:1.18;margin:.15em 0 .55em}
body.d5 h2{font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem);line-height:1.28;margin:0 0 var(--d5-h-margin)}
body.d5 h3{font-size:clamp(1.02rem,.98rem + .3vw,1.15rem);line-height:1.35;margin:0 0 6px}
body.d5 p,body.d5 li{line-height:1.7}
body.d5 .lead{font-size:1.05rem;color:var(--d5-muted)}
/* --- buttons: one height, one radius, consistent labels */
body.d5 .btn{min-height:var(--d5-btn-h);display:inline-flex;align-items:center;justify-content:center;
  padding:0 18px;border-radius:10px;font-weight:600;text-decoration:none;gap:8px}
body.d5 .btn.small{min-height:38px;padding:0 14px;font-size:.86rem}
body.d5 .btn.primary{background:var(--d5-accent);color:#fff;border:1px solid var(--d5-accent)}
body.d5 .btn.ghost{background:#fff;color:var(--d5-accent-ink);border:1px solid var(--d5-line)}
/* --- media rules per media type (step 9) */
body.d5 img,body.d5 picture{max-width:100%;height:auto}
body.d5 .d5-media-product img{aspect-ratio:4/5;object-fit:cover}
body.d5 .d5-media-texture img{aspect-ratio:1/1;object-fit:cover}
body.d5 .d5-media-room img{aspect-ratio:16/10;object-fit:cover}
body.d5 .d5-media-poster img{aspect-ratio:1/1;object-fit:contain;background:#fff}
/* --- one card system (step 8) */
body.d5 .d5-grid{display:grid;gap:var(--d5-gap);
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
body.d5 .d5-grid.cols-2{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
body.d5 .d5-grid.cols-4{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
body.d5 .d5-card{display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--d5-line);border-radius:var(--d5-radius-card);overflow:hidden}
body.d5 .d5-card .d5-thumb{display:block;background:var(--d5-soft);overflow:hidden}
body.d5 .d5-card .d5-thumb img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
body.d5 .d5-card.is-room .d5-thumb img{aspect-ratio:16/10}
body.d5 .d5-card .d5-body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
body.d5 .d5-card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.d5 .d5-card .d5-label{margin:0;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--d5-muted)}
body.d5 .d5-card .d5-price{margin:0;font-weight:700}
body.d5 .d5-card .d5-price small{font-weight:400;color:var(--d5-muted)}
body.d5 .d5-card .d5-acts{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;padding-top:10px}
/* --- compact catalogue rows (step 6/7: no large empty cards) */
body.d5 .d5-compact{width:100%;border-collapse:collapse}
body.d5 .d5-compact th,body.d5 .d5-compact td{border-bottom:1px solid var(--d5-line);
  padding:9px 10px;font-size:.92rem;text-align:left}
body.d5 .d5-compact tr:nth-child(even){background:#fbfdfc}
body.d5 .d5-status{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--d5-soft);
  color:var(--d5-muted);font-size:.78rem}
/* --- related content cards replace raw link lists (step 12) */
body.d5 .d5-related{display:grid;gap:var(--d5-gap);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
body.d5 .d5-related .d5-card .d5-thumb img{aspect-ratio:16/9}
body.d5 .d5-crumbs-link{color:var(--d5-muted)}
/* --- knowledge hub groups */
body.d5 .d5-kgroup{margin-block:var(--d5-sec)}
body.d5 .d5-hero{display:grid;gap:var(--d5-gap);grid-template-columns:1.1fr .9fr;align-items:center;
  background:var(--d5-soft);border-radius:var(--d5-radius-card);padding:clamp(18px,2.4vw,32px)}
body.d5 .d5-hero img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--d5-radius-img)}
body.d5 .d5-spec{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
body.d5 .d5-spec div{background:#fff;border:1px solid var(--d5-line);border-radius:12px;padding:12px 14px}
body.d5 .d5-spec strong{display:block;font-size:1.15rem}
body.d5 .d5-spec span{color:var(--d5-muted);font-size:.85rem}
/* --- header / footer / sidebar (steps 21-23) */
body.d5 .site-head{padding-block:14px;border-bottom:1px solid var(--d5-line);background:#fff}
body.d5 .site-head .brand span{font-weight:700}
body.d5 .site-foot{border-top:1px solid var(--d5-line);margin-top:var(--d5-sec)}
body.d5 .layout{gap:var(--d5-gap)}
@media (max-width:860px){
  body.d5 .d5-hero{grid-template-columns:1fr}
}
@media (max-width:640px){
  body.d5 .d5-grid,body.d5 .d5-grid.cols-4{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
    gap:12px}
  body.d5 .d5-card .d5-thumb img{aspect-ratio:1/1}
  body.d5 .d5-acts .btn{width:100%}
  body.d5 .d5-compact th:nth-child(3),body.d5 .d5-compact td:nth-child(3){display:none}
}