/* Summa-Chem — three-brand catalogue layer
   (Lincoln Electric, Oerlikon Welding, voestalpine Böhler Welding)

   Deliberately small, for the same reason dratec.css is: these pages are built
   from components the site already has — page-hero, g-hero-grid, l-section,
   ga-card, g-toolbar, g-filters, g-grid, g-card, g-product, g-psection,
   g-docs, dt-table, card form-card — so only four things live here:

     1. the no-image state, which is a designed panel rather than an absent
        <img>: no authorized product photography exists for these three
        catalogues, and showing a stand-in photograph of a different product
        would be worse than showing none;
     2. the verbatim source block, where manufacturer catalogue lines are
        reproduced exactly as printed and must stay legible without being
        re-tabulated;
     3. the bullet list the shared sheets do not define (dt-list lives in
        dratec.css, which these pages do not load);
     4. two small helpers for the hub.

   Every value is a token from styles.css. No new colour, radius, shadow or
   type step is introduced, and nothing here overrides a shared component.

   This is a NEW file at a NEW URL, so the site-wide cache-buster does not
   change: nothing already cached anywhere is modified by adding it. */

/* ------------------------------------------------------------------ lists */
.c-list { margin: 0; padding-left: 20px; color: var(--l-muted); }
.c-list li { margin: 0 0 6px; line-height: var(--lh-body); }
.c-list li:last-child { margin-bottom: 0; }

/* --------------------------------------------------- verbatim source block
   One row per line the manufacturer prints, in the printed order. The list
   markers are suppressed because a printed catalogue line is not an ordered
   step and a visible "3." beside a chemistry row reads as data. <ol> is kept
   for the semantics: the order is the manufacturer's, not ours. */
.c-raw {
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 100%;
  font-variant-numeric: tabular-nums;
}
.c-raw li {
  padding: 8px 12px;
  color: var(--l-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  border-bottom: 1px solid var(--l-line);
}
.c-raw li:first-child {
  font-weight: 700;
  background: var(--l-surface-2);
}
.c-raw li:last-child { border-bottom: 0; }

/* ------------------------------------------------------------ no-image state
   Product page media slot. Carries the brand lockup, the product's own
   designation and its commercial form, and says plainly that the
   manufacturer publishes no photograph — so the slot reads as a decision,
   not as a failed image load. */
.c-plate {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  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);
}
.c-plate img { width: min(220px, 66%); height: auto; opacity: 0.95; }
.c-plate figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.c-plate-code {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--l-text);
  overflow-wrap: anywhere;
}
.c-plate-cat {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-muted);
}
.c-plate-note {
  font-size: var(--fs-xs, 0.8125rem);
  color: var(--l-muted);
  max-width: 34ch;
  margin-inline: auto;
}

/* catalogue card variant of the same idea */
.c-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%),
    var(--l-surface);
}
.c-card-media img {
  width: min(150px, 68%);
  height: auto;
  object-fit: contain;
  opacity: 0.92;
}
.c-card-plate {
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--l-text);
  text-align: center;
  overflow-wrap: anywhere;
}

/* ----------------------------------------------- product actions, narrow
   The "back" button carries the subcategory's own name, which in several
   locales is a phrase — "MMA (stick) welding machine", "Elektrolučno
   zavarivanje pod praškom (EPP / SAW)". `.btn` is white-space: nowrap, so at
   375px that phrase became the grid track's min-content width and pushed the
   page 2px wider than the viewport. Letting this one button's label wrap
   removes the overflow without touching the shared button anywhere else —
   this stylesheet only ever loads on the three new catalogues.

   min-width: 0 on the grid child is the companion fix: a grid item defaults to
   min-width: auto, which is what lets any long token stretch its track. */
.g-prod .g-product > * { min-width: 0; }
.g-prod .g-pinfo .actions .btn { white-space: normal; text-align: center; }

/* ------------------------------------------------- section sub-headings
   A product page stacks several verbatim blocks, each followed by the note
   that says where it came from. Without this the next block's <h3> sits
   directly on that note and the two read as one paragraph. */
.g-psection h3 {
  margin: 28px 0 10px;
  font-size: var(--fs-md, 1rem);
  font-weight: 700;
  color: var(--l-text);
}
.g-psection h3:first-of-type { margin-top: 4px; }
.g-psection .form-note + h3 { margin-top: 28px; }

/* --------------------------------------------- load-more, actually hidden
   styles.css gives .btn an author-origin `display: inline-flex`, which beats
   the user-agent's `[hidden] { display: none }`. The script sets the hidden
   attribute correctly, but the button kept rendering: on a subcategory page
   with four products, "Load more" sat there permanently with nothing to load.
   dratec.css carries the same restatement for the same reason. */
.g-more .btn[hidden] { display: none; }

/* ------------------------------------------- closed drawer, actually closed
   Below 1100px the filter drawer is hidden with opacity: 0 and
   pointer-events: none. Neither removes anything from the tab order or the
   accessibility tree, so a keyboard user tabbing down a catalogue page walked
   through every control of a drawer they could not see — 19 of them on a
   catalogue root. visibility does remove them, and it is inherited, so the
   panel and all its contents go with it.

   The delay keeps the closing fade: visibility flips only after the opacity
   transition has run, and flips back instantly on open.

   Scoped to this stylesheet, which only the three new catalogues load. The
   same pattern exists in the shared gloor.css and therefore on the Gloor,
   Magmaweld, DRATEC and Fliess catalogues; that is pre-existing and is
   reported rather than changed here, because those pages are protected. */
@media (max-width: 1100px) {
  .g-filters:not(.is-open) { visibility: hidden; }
}

/* ------------------------------------------------------------- wordmark
   Used where the project holds no asset that is demonstrably the brand's own
   mark. Oerlikon Welding is the case: the only Oerlikon image in the repo is
   the OC Oerlikon GROUP corporate logo, and showing another company's mark is
   worse than showing none. The brand name set as type asserts only its name. */
.c-wordmark {
  display: inline-block;
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--l-text);
  text-align: center;
  overflow-wrap: anywhere;
}
.g-hero-logo .c-wordmark {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  padding: 22px 18px;
  border: 1px solid var(--l-line);
  border-radius: var(--radius-md, 16px);
  background: var(--l-surface);
  width: 100%;
}
.c-card-media .c-wordmark { font-size: var(--fs-sm); color: var(--l-muted); }
.c-plate .c-wordmark { font-size: var(--fs-xl, 1.35rem); }

/* --------------------------------------------------------------- hub bits
   Long names — "voestalpine Böhler Welding", "Unterpulverschweißen" — must be
   allowed to break rather than push the page sideways. */
.c-hub-logo img {
  width: min(300px, 100%);
  height: auto;
}
.c-source { margin-top: 10px; }
.c-source a .icon { width: 15px; height: 15px; vertical-align: -2px; }

.g-card-title, .g-pinfo h1, .page-hero h1 { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .c-plate { min-height: 180px; padding: 24px 18px; }
  .c-raw li { padding: 7px 10px; }
}

/* ------------------------------------------------- welding attribute chips
   Same visual spec as .mw-attrs / .mw-badges (magmaweld.css), restated here
   because these pages do not load that brand sheet. */
.c-attrs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 6px;
}
.c-attrs h3 { margin: 0 0 4px; font-size: var(--fs-base); color: var(--l-muted); }
.c-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.c-badges .badge { cursor: default; }

/* two-row technical table heads (impact energies per temperature): the group
   heading sits above its temperature columns; same borders as every dt-table */
.dt-table thead tr + tr th { border-top: 1px solid var(--l-line); }

/* programme segment heading: the count chip and the plain-title link */
.ga-seg-title a { color: inherit; text-decoration: none; }
.ga-seg-title a:hover { color: var(--brand-strong); }
.ga-seg-count { color: var(--l-muted); font-weight: 500; }


/* ------------------------------------------- grouped official-document lists
   Same visual spec as the Fliess documentation section (fliess.css
   .g-doc-group / ul.g-docs), restated because these pages do not load that
   brand sheet. */
ul.g-docs { list-style: none; margin: 0; padding-left: 0; }
ul.g-docs li { margin: 0 0 8px; }
ul.g-docs li a { display: inline-flex; align-items: center; gap: 8px; }
ul.g-docs li small { color: var(--l-muted); }
.g-doc-group {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--l-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: var(--sp-5) 0 var(--sp-2);
}
.g-doc-group:first-of-type { margin-top: var(--sp-2); }