/* The printable product datasheet (master prompt, section 18).

   One A4 page on paper, one clean column on screen. It borrows the site's
   fonts and colours from gw.css and adds only what a sheet needs: a fixed
   width, a header with the logo, a two-column table and a contact footer.
   Everything that belongs to the website and not to the sheet — navigation,
   buttons, animation — is left out or hidden when printing. */

.ds-body {
  background: var(--warm);
  padding: clamp(16px, 3vw, 40px);
}

.ds-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  max-width: 880px; margin: 0 auto 18px;
}

.ds-sheet {
  max-width: 880px; margin: 0 auto; background: #fff; color: var(--ink);
  padding: clamp(22px, 4vw, 46px);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}

.ds-head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-bottom: 18px; border-bottom: 2px solid var(--ink);
}
.ds-logo { height: 38px; width: auto; }
.ds-head-meta { text-align: end; }
.ds-kicker {
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0;
}
.ds-code { font-family: var(--display); font-size: 1.1rem; font-weight: 700; margin: 2px 0 0; }

.ds-top {
  display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: start;
  margin: 26px 0;
}
.ds-photo { border: 1px solid var(--line); background: #fff; padding: 8px; }
.ds-photo img { display: block; width: 100%; height: auto; object-fit: contain; }
.ds-title { font-size: 1.6rem; line-height: 1.15; margin: 0 0 4px; }
.ds-sub { font-family: var(--display); font-size: 1rem; color: var(--amber); font-weight: 600; margin: 0 0 10px; }
.ds-family {
  font-family: var(--display); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 12px;
}
.ds-application { margin: 0; color: var(--muted); }

.ds-table { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.ds-table th, .ds-table td {
  text-align: start; vertical-align: top; padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.ds-table th {
  width: 34%; font-family: var(--display); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

.ds-h2 {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 8px;
}
.ds-list { margin: 0 0 22px; padding-inline-start: 18px; }
.ds-list li { margin-bottom: 4px; font-size: .92rem; }

.ds-foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  border-top: 2px solid var(--ink); padding-top: 16px; margin-top: 8px;
}
.ds-foot p { margin: 0 0 3px; font-size: .84rem; color: var(--muted); }
.ds-company { font-family: var(--display); font-weight: 700; color: var(--ink) !important; font-size: .95rem !important; }
.ds-contact { text-align: end; }
.ds-note { margin: 14px 0 0; font-size: .74rem; color: var(--muted-2); }

@media (max-width: 680px) {
  .ds-top { grid-template-columns: 1fr; }
  .ds-foot { grid-template-columns: 1fr; }
  .ds-contact { text-align: start; }
}

/* On paper: no buttons, no shadow, no page background — and the sheet keeps
   its blocks together instead of splitting a table across two sheets. */
@media print {
  @page { size: A4; margin: 12mm; }
  .ds-body { background: #fff; padding: 0; }
  .ds-actions { display: none; }
  .ds-sheet { max-width: none; border: 0; box-shadow: none; padding: 0; }
  .ds-table, .ds-foot, .ds-list { break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
}