/* Summa-Chem — DRATEC layer.

   Deliberately small. The DRATEC pages are built from the components the site
   already has (page-hero, g-hero-grid, l-section, ga-card, ga-faq, g-card,
   g-toolbar, g-filters, g-product, g-psection, g-docs, card form-card), so
   only three things live here:

     1. the technical tables, which follow the same spec as .mw-table so a
        DRATEC table and a Magmaweld one look identical;
     2. the brand plate that stands in for a product photograph — DRATEC
        publishes no usable per-product image, and showing the same generic
        spool on every card, or the wrong product, would both be worse;
     3. two small helpers the shared sheets do not define.
*/

/* ------------------------------------------------------------ technical tables
   Same visual spec as .mw-table (magmaweld.css), restated here because the
   DRATEC pages do not load that brand's stylesheet. Values keep qualifiers
   like "<0,03", "0,10 max", "Rest" and "12 x C", so the table scrolls inside
   its own container rather than wrapping or hiding a column. */
/* .dt-table and .dt-table-wrap are defined in gloor.css, which every DRATEC
   page also loads — see the "data tables" block there. The restatement this
   file used to carry is gone; only the DRATEC-only additions remain. */
.dt-table td a { display: inline-flex; align-items: center; gap: 6px; }
/* chemistry: symbols across the top, values under them */
.dt-chem td { font-variant-numeric: tabular-nums; }

.dt-list { margin: 0; padding-left: 20px; color: var(--l-muted); }
.dt-list li { margin: 0 0 6px; line-height: var(--lh-body); }

/* .badge.badge-ok, not .badge-ok: the single-class form (0,0,1,0) loses to
   .is-dark .badge (0,0,2,0) in styles.css, so the CE badge rendered exactly
   like a plain one. Matching specificity and relying on dratec.css loading
   later restores the intended brand colour. */
.badge.badge-ok { border-color: rgba(56, 146, 207, 0.55); color: var(--brand); }

/* -------------------------------------------------------------- brand plate
   Fills the media slot on the product page and the catalogue card. It shows
   the DRATEC lockup and the designation — never a stand-in photograph. */
.dt-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 34px 24px;
  min-height: 240px;
  border: 1px solid var(--l-line);
  border-radius: var(--radius-md, 16px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(56, 146, 207, 0.12), transparent 70%),
    var(--l-surface);
}
.dt-plate img { width: min(240px, 70%); height: auto; opacity: 0.95; }
.dt-plate-code {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--l-text);
}
.dt-plate-cat {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-muted);
}

/* product-page media: the manufacturer's packaging photograph, with the
   caption that says it illustrates the delivery form rather than the article */
.dt-media { margin: 0; }
.dt-media img {
  width: 100%;
  height: auto;
  border: 1px solid var(--l-line);
  border-radius: var(--radius-md, 16px);
  background: var(--l-surface);
}
.dt-media figcaption { margin-top: 10px; }

/* wide range shot on the landing */
.dt-range {
  margin: 26px 0 0;
  border: 1px solid var(--l-line);
  border-radius: var(--radius-md, 16px);
  overflow: hidden;
  background: var(--l-surface);
}
.dt-range img { display: block; width: 100%; height: auto; }
.dt-range figcaption {
  margin: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--l-line);
}

.dt-card-media {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(56, 146, 207, 0.10), transparent 70%),
    rgba(255, 255, 255, 0.02);
}
.dt-card-media img {
  width: min(160px, 72%);
  height: auto;
  object-fit: contain;
  opacity: 0.92;
}
.dt-card-plate {
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--l-text);
}

/* An author-origin display value beats the UA stylesheet's [hidden]{display:none},
   so without this the filter, the search and the pagination would set the
   property and nothing on screen would move. gloor.css carries the same rule
   for its own cards; the catalogue markup is shared, this restates it for the
   card media and the load-more button. */
.g-card[hidden] { display: none !important; }
.g-more { margin-top: 22px; text-align: center; }
.g-more .btn[hidden] { display: none; }

@media (max-width: 640px) {
  .dt-table th, .dt-table td { padding: 8px 11px; }
  .dt-plate { min-height: 180px; padding: 24px 18px; }
}