/* =========================================================
   Li-Cha — product pages (v4)
   Same language as the home page: galvanized surfaces, the rating plate,
   the technical drawing sheet, ruled tables. The catalogue gives the data
   and the family colours; it does not dictate the layout.
   ========================================================= */

.pd-h2 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.4; }
.pd-sec__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s2) var(--s5); align-items: end; margin-bottom: var(--s4); }
.pd-sec__head h2 { font-size: var(--t-h2); line-height: 1.25; }
.pd-sec__head p { color: #4C5558; line-height: 1.85; max-width: 32em; }
.pd-sec__head .scode { grid-column: 1 / -1; }
.pd-note { margin-top: var(--s2); font-size: .85rem; color: var(--steel); line-height: 1.9; max-width: 60em; }

/* ---------- series head: text + rating plate ---------- */
.pd-head { padding-block: var(--s5) var(--s6); position: relative; }
.pd-head::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--rule); }
.pd-head .crumbs { margin-bottom: var(--s5); }
.pd-head__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: start; }
.pd-head__text h1 { margin-top: var(--s3); font-size: clamp(2rem, 4.4vw, 4rem); line-height: 1.3; }
.smoke-page .pd-head__text h1 { font-size: clamp(1.9rem, 3.6vw, 3.3rem); margin-top: 0; }
.pd-en { margin-top: .5rem; font-weight: 300; color: var(--steel); letter-spacing: .02em; }
.pd-lead { margin-top: var(--s3); font-size: var(--t-lead); line-height: 1.9; color: #3E474A; max-width: 36em; }
.pd-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.pd-head__side { display: grid; gap: var(--s3); }
.pd-plate { padding-top: var(--s3); }
.pd-plate .plate__rows > div { grid-template-columns: 7.5em 1fr; padding: .7rem 0; }
.pd-plate dt { font-size: .95rem; }
.pd-plate dd { font-size: 1rem; color: var(--graphite); }
.pd-plate .plate__head { border-bottom-color: var(--fc, var(--graphite)); border-bottom-width: 3px; }
.rivet.r1 { top: 12px; right: 12px; } .rivet.r2 { top: 12px; left: 12px; }
.rivet.r3 { bottom: 12px; right: 12px; } .rivet.r4 { bottom: 12px; left: 12px; }
.pd-drawing { position: relative; aspect-ratio: 4 / 3; border: 2px solid var(--graphite); background: var(--zinc); padding: var(--s3); }
.pd-drawing .drawing, .sheet--plain .drawing { position: relative; inset: auto; height: auto; }

/* drawings outside the home sheet are fully drawn (no scroll animation) */
.drawing.tech.is-cover, .drawing.tech.is-figure { --fo: 1; }
.pd-drawing .drawing .bal, .pd-drawing .drawing .bt, .pd-drawing .drawing .ld, .pd-drawing .drawing .ldot,
.hub-fam__drawing .drawing .bal, .hub-fam__drawing .drawing .bt, .hub-fam__drawing .drawing .ld, .hub-fam__drawing .drawing .ldot { display: none; }

/* ---------- size navigator ---------- */
.pd-sizes { padding-block: var(--s6); }
.szbar {
  position: sticky; top: calc(var(--nav-h) + .5rem); z-index: 5;
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  margin-bottom: var(--s4); background: var(--zinc); border: 2px solid var(--graphite); width: max-content; max-width: 100%;
}
.szbar::-webkit-scrollbar { display: none; }
.szchip { flex: none; position: relative; padding: .8rem 1.2rem .7rem; text-decoration: none; font: 300 1.02rem/1 var(--f-lat); color: var(--graphite); transition: background-color .2s, color .2s; }
.szchip + .szchip { border-right: 1px solid var(--rule); }
.szchip:hover { background: #fff; }
.szchip::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--fc, var(--green)); transform: scaleX(0); transition: transform .3s; }
.szchip[aria-current="true"] { background: var(--graphite); color: var(--zinc); font-weight: 500; }
.szchip[aria-current="true"]::after { transform: none; }
.szpanels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.szpanel { min-width: 0; scroll-margin-top: calc(var(--nav-h) + 5rem); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s4); align-items: start; }
.has-sizes .szpanels { gap: 0; }
.szpanel[hidden] { display: none; }

/* the drawing sheet frame around a catalogue curve + dimension sheet */
.sheet--doc, .sheet--plain { aspect-ratio: auto; max-height: none; height: auto; display: block; }
.sheet__doc { margin: var(--s4) var(--s4) var(--s3); background: #fff; border: 1px solid var(--rule); padding: var(--s2); }
.sheet__doc img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.sheet--doc .sheet__title { grid-template-columns: 1fr auto auto auto; }
.sheet--doc .sheet__title > * { padding: .6rem 1rem; font-size: var(--t-small); line-height: 1.5; }
.sheet--doc .sheet__name { margin: 0; outline: none; }
.sheet--doc .sheet__name .scode { font-size: 1.05rem; }
.sheet__pdf { color: var(--green-ink); text-decoration: none; }
.sheet__pdf:hover { text-decoration: underline; }
.sheet--plain { padding: var(--s4) var(--s4) 0; }
.sheet--plain .sheet__title { margin: var(--s3) calc(var(--s4) * -1) 0; grid-template-columns: 1fr auto; }

/* ---------- spec tables — ruled, like the plate ---------- */
.table-wrap { overflow-x: auto; background: var(--zinc); border-top: 2px solid var(--graphite); border-bottom: 2px solid var(--graphite); margin: 0; }
.spec { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 40rem; }
.szpanel .spec { min-width: 30rem; }
.spec thead th { font-weight: 600; font-size: .82rem; line-height: 1.45; padding: .9rem .7rem .6rem; text-align: center; vertical-align: bottom; border-bottom: 1px solid var(--graphite); color: var(--graphite); }
.spec thead th .lat { display: block; margin-top: .2rem; font-weight: 300; font-size: .76rem; color: var(--steel); }
.spec tbody th, .spec tbody td { padding: .68rem .7rem; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--rule); }
.spec tbody tr:last-child > * { border-bottom: 0; }
.spec tbody th { font: 500 .88rem/1.3 var(--f-lat); text-align: left; position: relative; }
.spec tbody th::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--fc, var(--green)); transform: translateY(-50%); transition: height .25s; }
.spec tbody tr:hover > * { background: #fff; }
.spec tbody tr:hover th::before { height: 60%; }
.spec td.lat { font-family: var(--f-lat); font-weight: 300; }
.spec tbody tr.is-match > * { background: rgba(0,153,51,.1); }
.spec tbody tr.is-match th::before { height: 70%; background: var(--green); }
.spec tbody tr.is-dim > * { color: #A3ABAE; }

.pd-all { padding-block: var(--s6); background: var(--zinc); border-block: 1px solid var(--rule); }
.pd-all .table-wrap { background: var(--galv); }
.pd-all__head { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); }
.pd-filter__out { grid-column: 1 / -1; min-height: 1.6em; font-size: .92rem; color: var(--green-ink); }

/* ---------- siblings ---------- */
.pd-sibs { padding-block: var(--s6); }
.siblings { margin-top: var(--s4); display: grid; border-top: 2px solid var(--graphite); }
.sibling { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; transition: padding .3s; }
.sibling__name { font-weight: 600; }
.sibling__name small { display: block; font-weight: 400; color: var(--steel); font-size: .85rem; }
.sibling__flow { color: var(--steel); font-weight: 300; direction: ltr; }
.sibling:hover { padding-inline: .8rem; background: var(--zinc); }
.sibling:hover .sibling__name { color: var(--green-ink); }

/* ---------- hub ---------- */
.hub-jump { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s2); }
.hub-jump a { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem; border: 1px solid var(--graphite); text-decoration: none !important; font-size: .95rem; color: var(--graphite); transition: background-color .2s, color .2s; }
.hub-jump a::before { content: ""; width: 4px; height: 1em; background: var(--fc); }
.hub-jump a:hover { background: var(--graphite); color: var(--zinc); }
.hub-fam { padding-block: var(--s6); border-top: 2px solid var(--graphite); scroll-margin-top: var(--nav-h); }
.hub-fam__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s6); align-items: start; }
.hub-fam__intro { position: sticky; top: calc(var(--nav-h) + var(--s4)); }
.hub-fam__intro h2 { font-size: var(--t-h3); line-height: 1.4; }
.hub-fam__intro > p { margin-top: var(--s2); color: #4C5558; line-height: 1.9; font-size: .95rem; }
.hub-fam__drawing { margin-top: var(--s4); aspect-ratio: 4 / 3; position: relative; opacity: .9; }
.hub-fam__drawing .drawing { --fo: 1; }
.srows { display: grid; border-top: 1px solid var(--graphite); }
.srow {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr) 5.5rem 4rem 9rem; gap: var(--s2); align-items: center;
  padding: 1.15rem .2rem; border-bottom: 1px solid var(--rule); text-decoration: none !important; color: inherit; position: relative;
  transition: background-color .25s, padding .3s;
}
.srow::after { content: "←"; position: absolute; left: .2rem; top: 50%; transform: translate(8px, -50%); opacity: 0; transition: transform .3s, opacity .3s; color: var(--green-ink); }
.srow:hover { background: var(--zinc); padding-inline: .8rem 2rem; }
.srow:hover::after { opacity: 1; transform: translate(0, -50%); }
.srow__name b { display: block; font-weight: 600; }
.srow__name span { font-size: .85rem; color: var(--steel); }
.srow__k { display: grid; gap: .15rem; font: 300 .98rem/1.3 var(--f-lat); }
.srow__k small { font: 400 .74rem/1.3 var(--f-body); color: var(--steel); }
.hub-page .selector { background: var(--zinc); padding-block: var(--s6); border-top: 2px solid var(--graphite); }

/* ---------- smoke page ---------- */
.sm-block { padding-block: var(--s6); border-top: 1px solid var(--rule); }
.sm-block .table-wrap { margin-top: var(--s4); }
.sm-dark { background: var(--graphite-2); color: var(--zinc); border-top: 0; }
.sm-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s3) var(--s6); align-items: start; }
.sm-split h2 { margin-top: var(--s2); font-size: var(--t-h3); line-height: 1.45; }
.sm-split p { margin-top: var(--s2); line-height: 1.95; color: #4C5558; }
.sm-dark .sm-split p { color: #B9C0C3; }
.sm-split > div > .scode--lg { margin-bottom: var(--s1); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--graphite); }
.ticks li { position: relative; padding: .75rem 1.8rem .7rem 0; border-bottom: 1px solid var(--rule); line-height: 1.7; font-size: .95rem; }
.ticks li::before { content: ""; position: absolute; right: .2rem; top: 1.15rem; width: 12px; height: 7px; border: solid var(--green); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.ticks--dark { border-top-color: #4C5558; grid-template-columns: 1fr 1fr; column-gap: var(--s4); }
.ticks--dark li { border-bottom-color: #3A4144; }
.sys-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--graphite); }
.sys-parts li { padding: var(--s3) var(--s3) var(--s4) 0; border-bottom: 1px solid var(--rule); display: grid; gap: .3rem; align-content: start; }
.sys-parts li:not(:nth-child(3n + 1)) { padding-right: var(--s3); border-right: 1px solid var(--rule); }
.sys-parts li > span { font: 300 1.9rem/1 var(--f-lat); color: var(--c-smoke); margin-bottom: var(--s1); }
.sys-parts b { font-size: 1.08rem; }
.sys-parts small { color: var(--steel); font-size: .78rem; }
.sys-parts p { margin-top: .3rem; font-size: .92rem; line-height: 1.8; color: #4C5558; }
.sm-split--top { align-items: start; }
.sm-split--top .sheet--plain { margin-top: var(--s4); }
.acc-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--graphite); counter-reset: acc; }
.acc-list li { counter-increment: acc; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .2rem var(--s2); padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.acc-list li::before { content: counter(acc); display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 1px solid var(--graphite); border-radius: 50%; font: 500 .8rem/1 var(--f-lat); grid-row: span 2; }
.acc-list b { font-size: 1.02rem; }
.acc-list span { font-size: .8rem; color: var(--steel); align-self: center; }
.acc-list p { grid-column: 2 / -1; font-size: .92rem; line-height: 1.8; color: #4C5558; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .pd-head__grid, .szpanel, .hub-fam__grid, .sm-split, .pd-sec__head { grid-template-columns: minmax(0, 1fr); }
  .pd-head__grid { gap: var(--s5); }
  .hub-fam__intro { position: static; }
  .hub-fam__drawing { max-width: 28rem; }
  .sys-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-parts li:not(:nth-child(3n + 1)) { padding-right: 0; border-right: 0; }
  .sys-parts li:nth-child(even) { padding-right: var(--s3); border-right: 1px solid var(--rule); }
}
@media (max-width: 767px) {
  .pd-head { padding-block: var(--s4) var(--s5); }
  .pd-head .crumbs { margin-bottom: var(--s4); }
  .sheet__doc { margin: var(--s3) var(--s2) var(--s2); padding: .4rem; }
  .sheet--doc .sheet__title { grid-template-columns: 1fr auto; }
  .sheet--doc .sheet__title > :nth-child(2), .sheet--doc .sheet__mark { display: none; }
  .sheet--plain { padding: var(--s3) var(--s2) 0; }
  .sheet--plain .sheet__title { margin-inline: calc(var(--s2) * -1); }
  .pd-all__head { grid-template-columns: minmax(0, 1fr); }
  .srow { grid-template-columns: 6rem minmax(0, 1fr); row-gap: .5rem; }
  .srow__k { grid-column: span 1; }
  .srow__k:first-of-type { grid-column: 1; }
  .srow:hover { padding-inline: .2rem; }
  .srow::after { display: none; }
  .sibling { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .sibling__flow { grid-column: 2; font-size: .85rem; }
  .sys-parts { grid-template-columns: minmax(0, 1fr); }
  .sys-parts li, .sys-parts li:nth-child(even) { padding-right: 0; border-right: 0; }
  .ticks--dark { grid-template-columns: minmax(0, 1fr); }
  .acc-list li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .acc-list span { grid-column: 2; }
}

/* drawings outside the home sheet are always shown */
.js .drawing.tech.is-cover, .js .drawing.tech.is-figure, .js .hub-fam__drawing .drawing { opacity: 1; }