/*
 * One site for every screen. main.css is the desktop design, made for 1280 px and more; below
 * 1280 px this file switches to the compact layout of the former mobile site (m.belprofile.eu):
 * yellow top bar with a full-screen menu, one column of content.
 */

.mobile-nav { display: none; }

/* ---------------------------------------------------------------------------------------------
   The way back above the title of a model's page (produse/partials/model_breadcrumb.php), every width
   --------------------------------------------------------------------------------------------- */
nav.model-breadcrumb {                               /* main.css makes every <nav> a fixed bar */
    position: static; height: auto; width: auto; z-index: auto; background: none;
    padding: 30px 0 10px; font-size: 12px; letter-spacing: 1px; color: #808080;
}
.model-breadcrumb a { color: #595959; text-decoration: none; }
.model-breadcrumb a:hover {
    color: #000; text-decoration: underline; text-decoration-color: #FDEA1B;
    text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.model-breadcrumb span[aria-hidden] { margin: 0 8px; color: #b3b3b3; }
.model-breadcrumb [aria-current] { color: #000; }
/* the model name is the H1 of the page and looks like the title of the former product blocks */

/* ---------------------------------------------------------------------------------------------
   Product type pages (produse/partials/family_page.php): top, model cards with filters and the comparison bar,
   presentation, projects, contact; their comparison (family_compare.php) and choice guide (family_guide.php)
   --------------------------------------------------------------------------------------------- */
.type-page { background: #ffffff; color: #2b2b2b; }
.type-page a, .type-page a:hover { text-decoration: none; }
.type-page [hidden] { display: none !important; }    /* the elements site.js shows (their classes set a display) */
.type-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* A picture whose width and height the server wrote in (site_image_sizes()): the two numbers only tell the browser its
   shape, so that it keeps the picture's place before it arrives. How large it is drawn stays with the rules of the
   style sheets, as before: this rule weighs nothing, any other one wins over it. */
:where(img[data-sized]) { width: auto; height: auto; }
.type-wrap { max-width: 1248px; margin: 0 auto; }
.type-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #5c5c5c; }
.type-section { padding: 48px 32px; }
.type-section--surface { background: #f4f4f1; }
.type-section--dark { background: #111111; color: #ffffff; }
.type-section--dark .type-eyebrow { color: #FDEA1B; }
.type-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.type-head h2, .type-about-text h2 { margin: 10px 0 0; font-size: 30px; line-height: 1.2; font-weight: 600; color: #111111; }
.type-section--dark .type-head h2 { color: #ffffff; }
.type-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px;
    box-sizing: border-box; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    transition: background .2s, color .2s;
}
.type-button--yellow { background: #FDEA1B; color: #111111; }
.type-button--yellow:hover { background: #f1d900; color: #111111; }
.type-button--dark { border: 0; background: #111111; color: #ffffff; cursor: pointer; }
.type-button--dark:hover { background: #333333; color: #ffffff; }

/* top (partials/type_top.php): breadcrumb, title, short text and figures, the buttons of the type's other pages; the
   text starts under the fixed desktop header */
.type-top { padding: 120px 32px 40px; background: #ffffff; }
.type-top nav.model-breadcrumb { padding: 0; font-size: 13px; }
.type-top-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-top: 14px; }
.type-top-text { display: flex; flex-direction: column; gap: 12px; }
.type-top h1 { margin: 0; font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -.5px; color: #111111; }
.type-lead { margin: 0; max-width: 700px; font-size: 16px; line-height: 1.6; color: #3a3a3a; }
.type-facts { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; flex-shrink: 0; }
.type-facts div { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.type-facts dd { order: -1; margin: 0; font-size: 18px; font-weight: 700; color: #111111; }
.type-facts dt { font-size: 13px; font-weight: 400; letter-spacing: .5px; color: #5c5c5c; }
.type-tools { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.type-tool {
    display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; box-sizing: border-box;
    border: 1px solid #111111; background: #ffffff; color: #111111; font-size: 13px; font-weight: 600; letter-spacing: 1.5px;
    text-transform: uppercase; transition: background .2s, color .2s;
}
.type-tool:hover, .type-tool:focus-visible { background: #111111; color: #ffffff; }
.type-tool svg { flex-shrink: 0; }

/* model cards, three per row; the band under the title has the same space above and under (also on the choice guide) */
.type-models, .guide-section { padding-top: 32px; padding-bottom: 32px; }
.model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.model-card { position: relative; display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e2e2dd; transition: box-shadow .25s; }
.model-card:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .10); }
.model-card-image { display: block; height: 240px; overflow: hidden; background: #ffffff; border-bottom: 1px solid #ecece8; }
.model-card-image img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 16px 26px 26px; box-sizing: border-box; transition: transform .4s; }
.model-card:hover .model-card-image img { transform: scale(1.03); }
.model-card-colour { position: absolute; top: 214px; left: 14px; right: 14px; font-size: 11px; color: #5c5c5c; pointer-events: none; }
.model-card-body { display: flex; flex-direction: column; flex-grow: 1; gap: 14px; padding: 22px 24px 18px; }
.model-card-title { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 400; letter-spacing: .5px; }
.model-card-title a { color: #111111; }
.model-card-text {
    font-size: 14px; line-height: 1.6; color: #4a4a4a;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.model-card-text b, .model-card-text strong, .model-card-text span { font-weight: inherit; padding: 0 !important; }
/* the finishes of a model: the chosen one (the first when the page opens) shows its colour dots (site.js) */
.model-finishes { display: flex; flex-wrap: wrap; gap: 6px; }
.model-finish {
    margin: 0; padding: 5px 9px; border: 1px solid #d3d3cc; background: #ffffff; color: #333333; cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 1px; text-transform: uppercase;
    transition: background .2s, border-color .2s, color .2s;
}
.model-finish { white-space: nowrap; }
.model-finish:hover { border-color: #111111; color: #111111; }
.model-finish[aria-pressed="true"] { border-color: #111111; background: #111111; color: #ffffff; }
.model-finish:focus-visible { outline: 3px solid #FDEA1B; outline-offset: 2px; }
/* colour dots: the site's swatches (main.css .color.<code>), a click shows the model in that colour */
.model-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.model-dots .color, .model-dots .color:hover {
    float: none; display: inline-block; flex-shrink: 0; width: 22px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 50%;
    font-size: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.model-dots .color[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 2px #ffffff, 0 0 0 4px #111111; }
.model-dots .color:focus-visible { outline: 3px solid #FDEA1B; outline-offset: 3px; }
/* colour dots elsewhere (comparison): the swatches made small */
.swatches { display: inline-flex; align-items: center; gap: 4px; }
.swatches .color, .swatches .color:hover {
    float: none; display: inline-block; width: 14px; height: 14px; margin: 0; padding: 0; border: 0; border-radius: 50%;
    outline: 0; font-size: 0; cursor: default; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.model-card-meta { font-size: 12px; line-height: 1.5; color: #5c5c5c; }
.model-card-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    margin-top: auto; padding-top: 12px; border-top: 1px solid #ecece8;
}
.model-card-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #111111; }
.model-card-link svg { transition: transform .2s; }
.model-card:hover .model-card-link svg { transform: translateX(4px); }
.model-compare {
    display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0; border: 0; background: transparent;
    color: #111111; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
}
.model-compare-box {
    display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; box-sizing: border-box;
    border: 2px solid #8a8a8a; background: #ffffff;
}
.model-compare-box svg { visibility: hidden; }
.model-compare[aria-pressed="true"] .model-compare-box { border-color: #111111; background: #111111; }
.model-compare[aria-pressed="true"] .model-compare-box svg { visibility: visible; }
.model-compare:focus-visible { outline: 3px solid #FDEA1B; outline-offset: 2px; }
.consult-card { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 40px 36px; background: #111111; color: #ffffff; }
.consult-card-top { display: flex; flex-direction: column; gap: 16px; }
.consult-card .type-eyebrow { color: #FDEA1B; }
.consult-card h3 { margin: 0; font-size: 26px; line-height: 1.3; font-weight: 400; color: #ffffff; }
.consult-card p { margin: 0; font-size: 15px; line-height: 1.65; color: #cfcfcf; }
.consult-card-actions { display: flex; flex-direction: column; gap: 14px; }
.consult-card-phone { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; letter-spacing: .5px; color: #ffffff; }
.consult-card-phone:hover { color: #FDEA1B; }
/* the consultancy card as a band (under full rows, on the comparison and the guide): the text beside the buttons */
.consult-card--span-3 { grid-column: span 3; }
.consult-card--span-3, .consult-card--band { flex-direction: row; align-items: center; gap: 48px; }
.consult-card--span-3 .consult-card-top, .consult-card--band .consult-card-top { flex: 1 1 auto; max-width: 620px; }
.consult-card--span-3 .consult-card-actions, .consult-card--band .consult-card-actions { flex: 0 0 280px; }
/* beside a single card of the last row it takes the two columns left, so that no column stays empty */
.consult-card--span-2 { grid-column: span 2; flex-direction: row; align-items: center; gap: 40px; }
.consult-card--span-2 .consult-card-top { flex: 1 1 auto; max-width: 560px; }
.consult-card--span-2 .consult-card-actions { flex: 0 0 260px; }

/* the models ticked for comparison, in a bar at the bottom of the screen */
.compare-bar {
    position: fixed; left: 50%; bottom: 24px; z-index: 1001; display: flex; align-items: center; gap: 12px 20px;
    width: min(860px, calc(100% - 32px)); box-sizing: border-box; padding: 12px 14px 12px 22px; transform: translateX(-50%);
    background: #111111; color: #ffffff; box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.compare-bar-text { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
.compare-bar-items { display: flex; flex-wrap: wrap; gap: 8px; flex-grow: 1; margin: 0; padding: 0; list-style: none; }
.compare-bar-items li {
    display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 2px 0 10px; background: #2b2b2b;
    font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.compare-bar-items button { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: #ffffff; font-size: 17px; line-height: 1; cursor: pointer; }
.compare-bar-items button:hover { color: #FDEA1B; }
.compare-bar-slots { font-size: 11px; color: #9a9a9a; white-space: nowrap; }
.compare-bar-go {
    display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; background: #FDEA1B; color: #111111;
    font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap;
}
.compare-bar-go:hover { background: #f1d900; color: #111111; }
.compare-bar-go[aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* marks shared by the comparisons (this page's, the products overview's) */
.compare-yes { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #FDEA1B; }
.compare-no { font-size: 18px; color: #a3a39d; }
.compare-pdf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 1px; color: #111111; }
.compare-tags { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 220px; }
.compare-tags span { padding: 4px 8px; background: #f4f4f1; border: 1px solid #e2e2dd; font-size: 11px; font-weight: 600; letter-spacing: .5px; }
.compare-hint { display: none; }

/* comparison page (partials/family_compare.php): one column per model, its head stays under the site's header */
.cmp-section { padding-top: 8px; }
.cmp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding-top: 22px; border-top: 1px solid #e2e2dd; }
.cmp-notes { display: flex; flex-direction: column; gap: 6px; }
.cmp-note, .cmp-selection { margin: 0; font-size: 14px; line-height: 1.5; color: #5c5c5c; }
.cmp-selection a { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-weight: 700; color: #111111; }
.cmp-switch {
    display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 0; border: 0; background: transparent;
    color: #111111; font-size: 14px; font-weight: 700; cursor: pointer;
}
.cmp-switch-track { position: relative; width: 46px; height: 26px; flex-shrink: 0; border-radius: 13px; background: #cfcfc8; transition: background .2s; }
.cmp-switch-track::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .2s;
}
.cmp-switch[aria-checked="true"] .cmp-switch-track { background: #111111; }
.cmp-switch[aria-checked="true"] .cmp-switch-track::after { left: 23px; }
.cmp-switch:focus-visible { outline: 3px solid #FDEA1B; outline-offset: 4px; }
.cmp-pick { display: none; }
.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; color: #111111; }
.cmp-table thead th, .cmp-table thead td {
    position: sticky; top: 88px; z-index: 2; padding: 16px 14px 18px; background: #111111; color: #ffffff;
    text-align: left; vertical-align: bottom;
}
.cmp-corner { width: 250px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #bdbdbd !important; }
.cmp-model { border-left: 1px solid #2f2f2f; font-weight: 400; }
.cmp-model img { display: block; width: 100%; height: 60px; margin-bottom: 10px; object-fit: cover; }
.cmp-model-name { display: block; font-size: 15px; line-height: 1.3; color: #ffffff; }
.cmp-model-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: 1px; color: #FDEA1B; }
.cmp-model-name:hover, .cmp-model-link:hover { color: #FDEA1B; }
.cmp-group-head th {
    padding: 26px 0 10px; border-bottom: 2px solid #111111; background: #ffffff; text-align: left;
    font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #111111;
}
.cmp-table tbody tr:not(.cmp-group-head) th {
    padding: 12px 16px 12px 0; border-bottom: 1px solid #e2e2dd; text-align: left; vertical-align: middle;
    font-size: 14px; font-weight: 600; line-height: 1.4;
}
.cmp-table td { padding: 12px 14px; border-bottom: 1px solid #e2e2dd; border-left: 1px solid #ecece8; text-align: center; vertical-align: middle; line-height: 1.4; overflow-wrap: break-word; }
.cmp-table .is-same th, .cmp-table .is-same td { color: #8a8a8a; }
.cmp-same {
    display: inline-block; margin-left: 8px; padding: 2px 6px; background: #ecece8; vertical-align: 1px;
    font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #5c5c5c;
}
.cmp-picture { display: block; width: 100%; height: 118px; object-fit: contain; }
.cmp-table td strong { font-weight: 700; }
.cmp-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 150px; margin: 8px auto 0; }
.cmp-table.is-diff tr[data-same], .cmp-table .cmp-group.is-empty { display: none; }
.cmp-legend { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: #5c5c5c; }
/* sideways: each model column at least 190 px (170 px on tablets); when the models need more room than the page has,
   the table scrolls in its frame: the row labels stay at the left, shadows show there is more (site.js .can-left,
   .can-right), arrows next to the switch move it by one model, and a copy of the head of the table (.cmp-float,
   site.js) stays under the top bar while the table is passed. Phones keep their two columns (see below). */
.cmp-actions { display: flex; align-items: center; gap: 24px; }
.cmp-arrows { display: flex; gap: 8px; }
.cmp-arrow {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
    border: 1px solid #111111; background: #ffffff; color: #111111; cursor: pointer; transition: background .2s, color .2s;
}
.cmp-arrow:hover { background: #111111; color: #ffffff; }
.cmp-arrow:disabled { border-color: #d3d3cc; background: #ffffff; color: #bdbdbd; cursor: default; }
.cmp-arrow:focus-visible { outline: 3px solid #FDEA1B; outline-offset: 2px; }
.cmp-float { position: fixed; z-index: 50; overflow: hidden; box-shadow: 0 8px 18px rgba(0, 0, 0, .16); }
.cmp-float .cmp-table { min-width: 0; }
.cmp-float .cmp-table thead th, .cmp-float .cmp-table thead td { position: static; top: auto; }
.cmp-float .cmp-table .cmp-corner { position: relative; z-index: 1; }
@media (min-width: 768px) {
    .cmp-frame { position: relative; --cmp-first: 250px; --cmp-col: 190px; }
    .cmp-scroll { overflow-x: auto; }
    .cmp-table { min-width: calc(var(--cmp-first) + var(--cmp-models, 5) * var(--cmp-col)); }
    /* the head stays in the frame (its copy follows the page); the labels stay at the left while it scrolls */
    .cmp-frame .cmp-table thead th, .cmp-frame .cmp-table thead td { position: static; top: auto; }
    .cmp-frame .cmp-table .cmp-corner, .cmp-frame .cmp-table tbody tr:not(.cmp-group-head) th { position: sticky; left: 0; top: auto; z-index: 1; }
    .cmp-frame .cmp-table tbody tr:not(.cmp-group-head) th { background: #ffffff; }
    .cmp-group-head th > span { position: sticky; left: 0; }
    .cmp-frame::before, .cmp-frame::after {
        content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 24px; pointer-events: none; opacity: 0; transition: opacity .2s;
    }
    .cmp-frame::before { left: var(--cmp-first); background: linear-gradient(to right, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0)); }
    .cmp-frame::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0)); }
    .cmp-frame.can-left::before, .cmp-frame.can-right::after { opacity: 1; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
    .cmp-frame { --cmp-first: 150px; --cmp-col: 170px; }
}

/* choice guide (partials/family_guide.php): the questions beside the models in order */
.guide { display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 28px; align-items: start; }
.guide-form { display: flex; flex-direction: column; gap: 24px; padding: 30px 30px 32px; border: 1px solid #e2e2dd; background: #ffffff; }
.guide-question { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.guide-question legend { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 0; font-size: 16px; font-weight: 700; color: #111111; }
.guide-number {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    background: #111111; color: #ffffff; font-size: 12px;
}
.guide-options { display: flex; flex-direction: column; gap: 8px; }
.guide-option {
    display: flex; align-items: center; gap: 12px; min-height: 46px; margin: 0; padding: 10px 14px; box-sizing: border-box;
    border: 1px solid #d6d6cf; background: #ffffff; font-size: 14px; font-weight: 500; color: #111111; cursor: pointer;
}
.guide-option:hover { border-color: #111111; }
.guide-option input {  /* main.css paints every input grey and square */
    -webkit-appearance: none; appearance: none; flex-shrink: 0; width: 18px; height: 18px; margin: 0; border: 2px solid #9a9a93;
    border-radius: 50% !important; background-color: #ffffff !important; cursor: pointer;
}
.guide-option input:checked { border-color: #111111; background-color: #FDEA1B !important; }
.guide-option input:focus-visible { outline: 3px solid #FDEA1B; outline-offset: 2px; }
.guide-option:has(input:checked) { border-color: #111111; font-weight: 700; }
.guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.guide-reset { font-size: 13px; font-weight: 600; color: #111111; text-decoration: underline !important; text-underline-offset: 3px; }
.guide-results { display: flex; flex-direction: column; gap: 14px; }
.guide-results-title { margin: 0; }
.guide-lead { margin: 0 0 6px; font-size: 20px; line-height: 1.4; font-weight: 600; color: #111111; }
.guide-list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.guide-item {
    display: grid; grid-template-columns: 36px 190px minmax(0, 1fr) auto; align-items: center; gap: 22px;
    padding: 16px 24px 16px 18px; border: 1px solid #e2e2dd; background: #ffffff;
}
.guide-item--best { border: 2px solid #111111; }
.guide-item--exclude { opacity: .55; }
.guide-rank { font-size: 28px; font-weight: 300; color: #5c5c5c; }
.guide-picture { display: block; width: 190px; height: 128px; object-fit: contain; }
.guide-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.guide-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.guide-name { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 400; color: #111111; }
.guide-name a { color: #111111; }
.guide-badge { padding: 4px 8px; background: #FDEA1B; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #111111; }
.guide-badge--exclude { background: #e9e9e4; }
.guide-score { font-size: 12px; color: #5c5c5c; }
.guide-reasons { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.guide-reasons li { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; color: #2b2b2b; }
.guide-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; height: 18px; border-radius: 50%; }
.guide-mark--match { background: #FDEA1B; }
.guide-mark--exclude { background: #e9e9e4; }
.guide-mark--neutral::before { content: ""; width: 12px; height: 2px; background: #b5b5ae; }
.guide-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #111111; white-space: nowrap; }
.guide-link svg { transition: transform .2s; }
.guide-link:hover svg { transform: translateX(4px); }
.guide-note { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #5c5c5c; }

/* presentation text and key points */
.type-about { display: grid; grid-template-columns: 7fr 5fr; gap: 72px; align-items: start; }
.type-about-text { display: flex; flex-direction: column; gap: 20px; }
.type-about-text h2 { margin: 0; }
.type-about-text p { margin: 0; font-size: 16px; line-height: 1.75; color: #333333; }
.type-points { display: flex; flex-direction: column; gap: 22px; padding: 36px; background: #ffffff; border: 1px solid #e2e2dd; }
.type-points h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #111111; }
.type-points ul { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.type-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.55; color: #2b2b2b; }
.type-check { flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; height: 22px; margin-top: 1px; border-radius: 50%; background: #FDEA1B; }
.type-related { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid #ecece8; }
.type-related:first-child { padding-top: 0; border-top: 0; }
.type-related a { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #111111; }
.type-related a svg { transition: transform .2s; }
.type-related a:hover svg { transform: translateX(4px); }

/* the questions people ask about what the page shows, each with its answer, all in view: two on a row
   (page_questions.php, on the page of a product type, of a type that is its own model and of a category) */
.type-faq .type-head { margin-bottom: 28px; }
.type-faq .type-head h2 { margin: 10px 0 0; font-size: 30px; line-height: 1.2; font-weight: 600; color: #111111; }
.type-faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 72px; border-bottom: 1px solid #e2e2dd; }
.type-faq-item { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; border-top: 1px solid #e2e2dd; }
.type-faq-item h3 { margin: 0; font-family: inherit; font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: 0; text-transform: none; color: #111111; }
.type-faq-item p { margin: 0; font-size: 15px; line-height: 1.7; color: #333333; }

/* projects */
.type-more { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #ffffff; white-space: nowrap; }
.type-more:hover { color: #FDEA1B; }
.type-projects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.type-projects--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.type-projects--2, .type-projects--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.type-projects figure { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.type-projects img { display: block; width: 100%; height: 220px; object-fit: cover; transition: opacity .2s; }
.type-projects a:hover img { opacity: .85; }
.type-projects figcaption { font-size: 13px; letter-spacing: .5px; color: #d9d9d9; }
.type-projects figcaption strong { color: #ffffff; }

/* segment pages (produse/partials/category_hub.php): a photo of the segment on the first screen with its name and
   short text, its product types (gutter systems, accessory sets) on cards at the bottom of the photo */
.category-hero {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto;
    min-height: min(calc(100vh - 32px), 960px); background: #1b1b1b; color: #ffffff;
}
.category-hero-media { position: relative; grid-row: 1 / 3; grid-column: 1; overflow: hidden; }
.category-hero-media img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.category-hero-media::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(10, 10, 10, .45); }
/* the text and the cards in the 1248 px column of the other sections */
.category-hero-text, .category-choices {
    position: relative; z-index: 1; grid-column: 1; box-sizing: border-box; width: 100%; max-width: 1312px;
    margin: 0 auto; padding-left: 32px; padding-right: 32px;
}
.category-hero-text { grid-row: 1; display: flex; flex-direction: column; gap: 16px; padding-top: 178px; padding-bottom: 40px; }
.category-hero-text > * { max-width: 760px; }
.category-hero-text nav.model-breadcrumb { padding: 0; font-size: 13px; }
.category-hero h1 { margin: 0; font-size: 72px; line-height: 1.02; font-weight: 700; letter-spacing: -1px; color: #ffffff; text-wrap: balance; }  /* a title of several words: even lines, no word left alone on the last one */
.category-lead { margin: 0; font-size: 18px; line-height: 1.6; color: #f0f0f0; }
.category-choices { grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-bottom: 56px; }
.category-choices--1 { grid-template-columns: minmax(0, 1fr); }
.category-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* a category without a photo: its top is as tall as its words, the cards right under them */
.category-hero--plain { min-height: 0; }
/* a name takes the lines it needs and breaks inside a long word rather than run under the arrow or out of the card */
.category-choice-name { overflow-wrap: anywhere; hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; }
.category-choice {
    display: grid; grid-template-columns: 150px minmax(0, 1fr) 48px; align-items: center; gap: 20px;
    padding: 16px 24px 16px 16px; background: #ffffff; color: #111111; box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
    transition: box-shadow .25s, transform .25s;
}
.category-choice:hover { color: #111111; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.category-choice-image { height: 96px; overflow: hidden; background: #ffffff; }
.category-choice-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.category-choice-image--contain img { object-fit: contain; }
.category-choice-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.category-choice-meta { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #5c5c5c; }
.category-choice-name { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: #111111; }
.category-choice-text { font-size: 13px; line-height: 1.5; color: #4a4a4a; }
.category-choice-arrow { display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; background: #FDEA1B; color: #111111; }
.category-choice-arrow svg { transition: transform .2s; }
.category-choice:hover .category-choice-arrow svg { transform: translateX(3px); }
.category-choice:focus-visible { outline: 3px solid #FDEA1B; outline-offset: 3px; }
/* the labels and links of the accessory sets' lists */
.hub-card-label { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #5c5c5c; }
.hub-card-more { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #111111; }
.hub-card-more:hover { color: #111111; }
.hub-card-more svg, .hub-compare-links svg { flex-shrink: 0; transition: transform .2s; }
.hub-card-more:hover svg, .hub-compare-links a:hover svg { transform: translateX(4px); }
/* comparison of the two product types or gutter systems */
.hub-compare td a { color: #111111; text-decoration: underline; text-decoration-color: #d3d3cc; text-underline-offset: 3px; }
.hub-compare td a:hover { text-decoration-color: #FDEA1B; text-decoration-thickness: 2px; }
.hub-compare .hub-compare-links a { text-decoration: none; }
.hub-compare { width: 100%; border-collapse: collapse; background: #ffffff; border: 1px solid #e2e2dd; font-size: 15px; line-height: 1.5; color: #222222; }
.hub-compare thead th, .hub-compare thead td {
    padding: 20px 24px; background: #111111; color: #ffffff; font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
    text-transform: uppercase; text-align: left;
}
.hub-compare tbody tr { border-top: 1px solid #e2e2dd; }
.hub-compare tbody th {
    width: 260px; padding: 18px 24px; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
    color: #5c5c5c; text-align: left; vertical-align: middle;
}
.hub-compare td { padding: 18px 24px; vertical-align: middle; }
.hub-compare strong { font-weight: 600; }
.hub-compare-links a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #111111; }
/* products overview (produse/produse.php): a photo with the title and the figures of the offer, the categories on
   cards overlapping its bottom, each with its product types as direct links */
.overview-hero { position: relative; padding: 0 32px; overflow: hidden; background: #1b1b1b; color: #ffffff; }
.overview-hero-photo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.overview-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.overview-hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(10, 10, 10, .52); }
.overview-hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; padding: 134px 0 170px; }
.overview-hero-text nav.model-breadcrumb { padding: 0; font-size: 13px; }
.model-breadcrumb--light a, .model-breadcrumb--light a:hover, .model-breadcrumb--light [aria-current] { color: #ffffff; }
.model-breadcrumb--light span[aria-hidden] { color: #bdbdbd; }
.overview-hero h1 { margin: 0; font-size: 64px; line-height: 1.05; font-weight: 700; letter-spacing: -1px; color: #ffffff; text-wrap: balance; }
.overview-lead { margin: 0; max-width: 640px; font-size: 18px; line-height: 1.6; color: #f0f0f0; }
.overview-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.overview-facts div { display: inline-flex; align-items: baseline; gap: 6px; }
.overview-facts dd { order: -1; margin: 0; font-size: 18px; font-weight: 700; color: #ffffff; }
.overview-facts dt { font-size: 13px; font-weight: 400; letter-spacing: .5px; color: #e8e8e8; }
.overview-categories { position: relative; z-index: 2; margin-top: -120px; padding: 0 32px; }
.overview-categories-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.overview-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* more than four categories: even rows (3 + 2, 3 + 3, 4 + 3), the last one centred */
@media (min-width: 1280px) {
    .overview-tiles--of-3, .overview-tiles--of-4 { display: flex; flex-wrap: wrap; justify-content: center; }
    .overview-tiles--of-3 > .overview-tile { flex: 0 0 calc((100% - 32px) / 3); }
    .overview-tiles--of-4 > .overview-tile { flex: 0 0 calc((100% - 48px) / 4); }
}
.overview-tile { display: flex; flex-direction: column; background: #ffffff; box-shadow: 0 18px 40px rgba(0, 0, 0, .18); }
.overview-tile-image { display: block; height: 170px; overflow: hidden; background: #1b1b1b; }
.overview-tile-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.overview-tile:hover .overview-tile-image img { transform: scale(1.04); }
.overview-tile-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px; border-top: 4px solid #FDEA1B; }
.overview-tile-count { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #5c5c5c; }
/* two lines for every name, so that the links of the four cards line up */
/* the name of the category, and on its right the yellow arrow leading to it (as the cards of the segment pages) */
/* the name may come up to the arrow; one with a word too long for that is written smaller, and the names of the other
   tiles with it; where that would make them much smaller ("Професионална", "Velkoformátová"), the names take the row
   under the arrow, across the tile (site.js) */
.overview-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 2px; margin-bottom: 4px; }
.overview-tiles--stacked .overview-tile-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 2px; }
.overview-tiles--stacked .overview-tile-heading { display: contents; }
.overview-tiles--stacked .overview-tile-count { grid-column: 1; grid-row: 1; }
.overview-tiles--stacked .overview-tile-arrow { grid-column: 2; grid-row: 1; }
.overview-tiles--stacked .overview-tile-title { grid-column: 1 / -1; grid-row: 2; }
.overview-tile-heading { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.overview-tile-arrow { display: flex; flex-shrink: 0; width: 48px; height: 48px; align-items: center; justify-content: center; background: #FDEA1B; color: #111111; }
.overview-tile-arrow:hover { color: #111111; }
.overview-tile-arrow svg { transition: transform .2s; }
.overview-tile:hover .overview-tile-arrow svg { transform: translateX(3px); }
.overview-tile-title { margin: 0; min-height: 2.5em; font-size: 20px; line-height: 1.25; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; }
.overview-tile-title a { color: #111111; }
.overview-tile-links { margin: 0; padding: 0; list-style: none; }
.overview-tile-links a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid #ecece8; font-size: 13px; font-weight: 600; letter-spacing: .5px; color: #111111; }
.overview-tile-links a:hover { color: #000000; }
.overview-tile-links svg { flex-shrink: 0; transition: transform .2s; }
.overview-tile-links a:hover svg { transform: translateX(4px); }
/* the roof types compared: four columns, the table scrolls sideways on small screens, its first column stays */
.hub-compare-scroll { overflow-x: auto; }
.hub-compare--wide { min-width: 960px; table-layout: fixed; }  /* the four types in equal columns */
.hub-compare--wide tbody th { width: 220px; }
/* the comparisons (partials/compare_table.php): the categories over their columns, a row label that leads to its
   explanation, and in one line the rows with the same value for every item */
.hub-compare .hub-compare-groups th, .hub-compare .hub-compare-groups td { padding-bottom: 0; color: #FDEA1B; letter-spacing: 2px; }
.hub-compare tbody th a { color: inherit; text-decoration: underline; text-decoration-color: #d3d3cc; text-underline-offset: 3px; }
.hub-compare tbody th a:hover { color: #111111; text-decoration-color: #FDEA1B; text-decoration-thickness: 2px; }
.hub-compare .hub-compare-same th, .hub-compare .hub-compare-same td { background: #f7f7f4; }
.hub-compare-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; }
.hub-compare-fact-label { margin-right: 4px; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #5c5c5c; }
/* products overview: "Cum alegi", a line on when to choose each roof type, leading to it */
.compare-choose { margin-bottom: 32px; }
.compare-choose-title { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #111111; }
.compare-choose-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.compare-choose-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compare-choose-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1280px) {  /* more than four boxes: even rows, the last one centred */
    .compare-choose-list--even { display: flex; flex-wrap: wrap; justify-content: center; }
    .compare-choose-list--even.compare-choose-list--3 > li { flex: 0 0 calc((100% - 32px) / 3); }
    .compare-choose-list--even.compare-choose-list--4 > li { flex: 0 0 calc((100% - 48px) / 4); }
    .compare-choose-list--even > li > a { height: 100%; }
}
.compare-choose-list a {
    display: flex; flex-direction: column; justify-content: space-between; gap: 16px; height: 100%; padding: 18px 20px;
    background: #ffffff; border: 1px solid #e2e2dd; border-top: 4px solid #FDEA1B; color: #111111; transition: box-shadow .25s;
}
.compare-choose-list a:hover { color: #111111; box-shadow: 0 14px 34px rgba(0, 0, 0, .10); }
.compare-choose-text { font-size: 16px; line-height: 1.45; }
.compare-choose-name { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.compare-choose-name svg { flex-shrink: 0; transition: transform .2s; }
.compare-choose-list a:hover .compare-choose-name svg { transform: translateX(4px); }
/* segment pages: when to choose each type or system, under the comparison */
.hub-choose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.hub-choose--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-choose-box { display: flex; flex-direction: column; gap: 12px; padding: 28px 32px; background: #f7f7f4; border: 1px solid #e2e2dd; }
.hub-choose-box h3 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: #111111; }
.hub-choose-box p { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #5c5c5c; }
.hub-choose-box ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hub-choose-box li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.55; color: #2b2b2b; }
/* "Înainte să alegi": blog articles to read, one card each (partials/page_articles.php) */
.type-tips { display: flex; flex-direction: column; }
.hub-page .type-tips { margin-top: 48px; }
.type-tips-title { margin: 10px 0 24px; font-size: 30px; line-height: 1.2; font-weight: 600; color: #111111; }
h3.type-tips-title { font-size: 24px; }
.type-tips-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.type-tips-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.type-tips-list--1 { grid-template-columns: minmax(0, 1fr); max-width: 616px; }
.type-tips-list a {
    display: flex; flex-direction: column; justify-content: space-between; gap: 18px; height: 100%; padding: 22px 24px;
    background: #ffffff; border: 1px solid #e2e2dd; color: #111111; transition: box-shadow .25s;
}
.type-tips-list a:hover { color: #111111; box-shadow: 0 14px 34px rgba(0, 0, 0, .10); }
.type-tips-name { font-size: 17px; line-height: 1.45; font-weight: 600; }
.type-tips-more { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.type-tips-more svg { flex-shrink: 0; transition: transform .2s; }
.type-tips-list a:hover .type-tips-more svg { transform: translateX(4px); }
/* products overview: the finishes explained, from the technical sheets (partials/finish_guide.php): a table on large
   screens, below 1280 px one block per finish whose values say what they are */
.finish-guide { width: 100%; border-collapse: collapse; background: #ffffff; border: 1px solid #e2e2dd; font-size: 14px; line-height: 1.5; color: #222222; }
.finish-guide thead th {
    padding: 16px 18px; background: #111111; color: #ffffff; font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
    text-transform: uppercase; text-align: left; vertical-align: bottom;
}
.finish-guide tbody { border-top: 1px solid #d3d3cc; }
.finish-guide tbody tr + tr td { border-top: 1px dashed #e2e2dd; }
.finish-guide tbody th { width: 34%; padding: 20px 18px; font-weight: 400; text-align: left; vertical-align: top; }
.finish-guide td { padding: 20px 18px; white-space: nowrap; vertical-align: top; font-variant-numeric: tabular-nums; }
.finish-guide td.finish-guide-places { min-width: 180px; white-space: normal; }
.finish-guide-name { white-space: nowrap; }
.finish-guide-name { display: block; font-size: 15px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #111111; }
.finish-guide-text { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; color: #4a4a4a; }
.finish-guide-dots { display: flex; flex-wrap: wrap; margin-top: 12px; }
.finish-guide-places a { white-space: nowrap; color: #111111; text-decoration: underline; text-decoration-color: #d3d3cc; text-underline-offset: 3px; }
.finish-guide-places a:hover { text-decoration-color: #FDEA1B; text-decoration-thickness: 2px; }
@media (max-width: 1279.98px) {
    .compare-choose-list, .compare-choose-list--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hub-choose-box { padding: 24px; }
    .finish-guide, .finish-guide thead, .finish-guide tbody, .finish-guide tr, .finish-guide th, .finish-guide td { display: block; }
    .finish-guide { border: 0; background: transparent; }
    .finish-guide thead { display: none; }
    .finish-guide tbody { margin-bottom: 14px; background: #ffffff; border: 1px solid #e2e2dd; }
    .finish-guide tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 20px; padding: 20px 24px; }
    .finish-guide tbody tr + tr { border-top: 1px dashed #e2e2dd; }
    .finish-guide tbody tr + tr td { border-top: 0; }
    .finish-guide tbody th, .finish-guide td.finish-guide-places { grid-column: 1 / -1; width: auto; min-width: 0; padding: 0; }
    .finish-guide tbody th { order: -2; }
    .finish-guide td.finish-guide-places { order: -1; }  /* under the finish's text: it holds for every sheet */
    .finish-guide td { padding: 0; white-space: normal; }
    .finish-guide td::before {
        content: attr(data-label); display: block; margin-bottom: 2px; font-size: 10px; font-weight: 600; letter-spacing: 1px;
        text-transform: uppercase; color: #5c5c5c;
    }
}
@media (max-width: 767.98px) {
    .compare-choose { margin-bottom: 24px; }
    .compare-choose-list, .compare-choose-list--2, .compare-choose-list--3 { grid-template-columns: 1fr; gap: 10px; }
    .compare-choose-list a { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; border-top-width: 1px; border-left: 4px solid #FDEA1B; }
    .compare-choose-text { font-size: 14px; }
    .compare-choose-name { flex-shrink: 0; max-width: 45%; font-size: 11px; letter-spacing: 1px; text-align: right; }
    .hub-compare:not(.hub-compare--wide) .hub-compare-same td { grid-column: 1 / -1; }
    .hub-compare-facts { flex-direction: column; gap: 6px; font-size: 13px; }
    .hub-choose, .hub-choose--3 { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
    .hub-choose-box { gap: 10px; padding: 20px; }
    .hub-choose-box h3 { font-size: 16px; letter-spacing: 2px; }
    .hub-choose-box li { font-size: 14px; }
    .hub-page .type-tips { margin-top: 32px; }
    .type-tips-title, h3.type-tips-title { margin-bottom: 16px; font-size: 22px; }
    .type-tips-list, .type-tips-list--2 { grid-template-columns: 1fr; gap: 10px; }
    .type-tips-list a { padding: 16px 18px; gap: 12px; }
    .type-tips-name { font-size: 15px; }
    /* the values of a finish two by two */
    .finish-guide tbody { margin-bottom: 12px; }
    .finish-guide tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px; }
}
/* what each accessory set contains, numbered as on its diagram */
.hub-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.hub-parts-box { display: flex; flex-direction: column; gap: 24px; padding: 32px; background: #ffffff; border: 1px solid #e2e2dd; }
.hub-parts-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid #ecece8; }
.hub-parts-head h3 { margin: 6px 0 0; font-size: 20px; line-height: 1.3; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: #111111; }
.hub-parts-head .hub-card-more { white-space: nowrap; }
.hub-parts-list { columns: 2; column-gap: 24px; margin: 0; padding: 0; list-style: none; }
.hub-parts-list li { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; break-inside: avoid; font-size: 14px; line-height: 1.4; color: #2b2b2b; }
.hub-parts-number {
    flex: 0 0 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #b9b9b3; border-radius: 50%; font-size: 11px; font-weight: 600; color: #111111;
}

/* ---------------------------------------------------------------------------------------------
   Other pages, every width
   --------------------------------------------------------------------------------------------- */
/* page banners: the title is the H1 of the page (it was a div) */
.component_BgTop .info h1.title { margin: 0; line-height: inherit; }
/* a title that became the H1 of its page keeps the look of the text it was (class as-text) */
h1.as-text { font: inherit; letter-spacing: inherit; text-transform: inherit; margin: 0; color: inherit; }
h1.h2div { line-height: inherit; margin-bottom: auto; }  /* as main.css does for h2.h2div */

/* ---------------------------------------------------------------------------------------------
   Compact layout: phones and tablets
   --------------------------------------------------------------------------------------------- */
@media (max-width: 1279.98px) {

    /* the desktop design forces 1280 px */
    body.container, .container { min-width: 0 !important; max-width: none; }
    body.container { padding: 0; overflow-x: hidden; }
    img { max-width: 100%; }

    /* top bar */
    #topnav {
        position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
        height: 56px; min-width: 0 !important; max-width: none;
        background-color: #FDEA1B;
    }
    #topnav .logo {
        width: 190px !important; height: 56px !important; top: 0 !important; left: 12px !important;
        background: url(../img/logo/belprofile_logo_mobile_en.png) no-repeat 0 50% !important;
        background-size: 170px !important;
    }
    #topnav .logo.ro { background-image: url(../img/logo/belprofile_logo_mobile.png) !important; }
    #topnav .nav { display: none !important; }
    .container_box { padding-top: 56px; }

    /* menu button (main.css gives every <nav> a height of 100 px) */
    .mobile-nav { display: block; height: 0; width: 0; position: static; }
    .mobile-nav-toggle {
        position: absolute; top: 8px; right: 8px; width: 40px; height: 40px;
        background: transparent; border: 0; padding: 0; cursor: pointer;
    }
    .mobile-nav-toggle .hamburger,
    .mobile-nav-toggle .hamburger::before,
    .mobile-nav-toggle .hamburger::after {
        display: block; position: absolute; left: 8px; width: 24px; height: 2px; background: #000;
        transition: transform .25s, top .25s, opacity .25s;
    }
    .mobile-nav-toggle .hamburger { top: 19px; }
    .mobile-nav-toggle .hamburger::before, .mobile-nav-toggle .hamburger::after { content: ""; left: 0; }
    .mobile-nav-toggle .hamburger::before { top: -8px; }
    .mobile-nav-toggle .hamburger::after { top: 8px; }
    .mobile-nav-toggle[aria-expanded="true"] .hamburger { background: transparent; }
    .mobile-nav-toggle[aria-expanded="true"] .hamburger::before { top: 0; transform: rotate(45deg); }
    .mobile-nav-toggle[aria-expanded="true"] .hamburger::after { top: 0; transform: rotate(-45deg); }
    /* the languages: a globe beside the menu button, as on the mobile site; its list is a menu like the other */
    .mobile-lang-toggle { right: 48px; }
    .mobile-lang-toggle img { display: block; width: 24px; height: 24px; margin: 8px; }
    .mobile-lang-toggle[aria-expanded="true"] { border-radius: 50%; background: rgba(0, 0, 0, .12); }

    /* full-screen menu */
    .mobile-menu {
        position: fixed; top: 56px; left: 0; right: 0; bottom: 0; overflow-y: auto;
        background: #262625; padding: 12px 20px 40px; text-align: center;
    }
    .mobile-menu[hidden] { display: none; }
    body.menu-open { overflow: hidden; }
    .mobile-menu a { color: #fff; text-decoration: none; display: block; }
    .mobile-menu-link {
        font-size: 18px; text-transform: uppercase; letter-spacing: 1px;
        padding: 12px 0; border-bottom: 1px solid #444;
    }
    .mobile-language { font-size: 18px; letter-spacing: 1px; padding: 12px 0; border-bottom: 1px solid #444; }
    .mobile-language:last-child { border-bottom: 0; }
    .mobile-menu a.active, .mobile-menu a:hover { color: #FDEA1B; }
    .mobile-menu-category { padding: 10px 0; border-bottom: 1px solid #444; }
    .mobile-menu-category > a:first-child { font-size: 16px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 0 6px; }
    .mobile-menu-category .no { font-weight: 700; color: #FDEA1B; margin-right: 6px; }
    .mobile-menu-category a.sub { font-size: 14px; color: #ccc; padding: 5px 0; }
    .mobile-menu-category.active > a:first-child { color: #FDEA1B; }

    /* footer: columns one under the other */
    .footer .footer_box { flex: 0 0 100%; max-width: 100%; text-align: center !important; padding: 12px 20px; }
    .footer .footer_logo img { max-width: 260px; }
    .footer .fleX { justify-content: center; }
}

/* ---------------------------------------------------------------------------------------------
   Compact layout: product pages
   --------------------------------------------------------------------------------------------- */
@media (max-width: 1279.98px) {

    /* offer button: a small tab at the bottom right instead of the middle of the screen */
    section.offer {
        top: auto; bottom: 14px; padding: 9px 12px 9px 40px;
        background-size: 20px auto; background-position: 12px 50%;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    }
    section.offer, section.offer * { font-size: 12px !important; }
    body.menu-open section.offer { display: none; }

    /* spacing made for large screens */
    .mt-5-rem { margin-top: 2.5rem; }
    .mt-6-rem { margin-top: 3rem; }
    .mt-7-rem, .mt-8-rem, .mt-9-rem, .mt-10-rem { margin-top: 3.5rem; }

    /* category pages: introductions and model cards */
    .component_profile .title, .component_profile:hover > .title { font-size: 15px; }
    .component_profile .text { font-size: 13px; line-height: 1.5; margin: 6px 16px 0; text-align: left; }
    .component_profile .image img { min-height: 110px; object-fit: cover; }  /* wide banners (Tablă fălțuită) */

    /* the way back above the title of a model's page */
    nav.model-breadcrumb { padding: 16px 0 8px; font-size: 11px; }
}

/* ---------------------------------------------------------------------------------------------
   Compact layout: the other pages
   --------------------------------------------------------------------------------------------- */
@media (max-width: 1279.98px) {

    /* page banners (contact, gallery, media, blog, legal pages): high enough for their title */
    .component_BgTop:has(> .info) > img { height: 170px; object-fit: cover; }
    .component_BgTop > .info { top: 50%; transform: translateY(-50%); padding: 0 16px; }
    .component_BgTop .info .title { padding-top: 0 !important; font-size: 22px !important; letter-spacing: 3px; }
    .component_BgTop .info .description { font-size: 14px !important; padding: 6px 0 0 !important; }
    /* legal pages: a long address written in the text breaks at the edge instead of making the page wider than the screen */
    section.container.politici { overflow-wrap: break-word; word-wrap: break-word; }

    /* home: the four categories two by two */
    .container_info .descriere { padding: 0 16px; }

    /* accessories: the drawing keeps its own height, parts three by three */
    .accesorii .container.produse { width: auto !important; margin: 0 8px !important; }

    /* about us: one column */
    .despre_noi .row { margin: 0; }
    .despre_noi .row > [class*="col-"] { flex: 0 0 100%; width: 100%; max-width: 100%; }
    .despre_noi .component_Top .info { width: auto; margin: 64px 16px 32px; padding: 0; }
    .despre_noi .component_Top .info .title { font-size: 20px !important; letter-spacing: 1px; line-height: 1.4; }
    .despre_noi .component_Top .info .description { font-size: 14px !important; line-height: 1.55; }
    .despre_noi .component_about { background-size: auto 260px; background-position: right bottom; padding-bottom: 260px; }
    .despre_noi .component_about_text { padding: 48px 16px; }
    .despre_noi .component_about_text.about { padding: 56px 16px 24px; }
    .despre_noi .component_about_text.about .title { font-size: 30px; }
    .despre_noi .component_about_work_text { padding: 24px 16px; }

    /* contact form: one field per line */
    .contact_form .row { margin: 0; }
    .contact_form .row > [class*="col-"] { flex: 0 0 100%; width: 100%; max-width: 100%; padding: 0 16px; }
    .contact_form .row > .col-3:empty { display: none; }
    .contact_form .row > .col-3 > .form-control { margin-bottom: 1rem; }

    /* media: the players are as wide as the screen */
    .media .row[style] { width: auto !important; margin: 0 8px !important; }
    .media .row > [class*="col-"] { margin-bottom: 16px; }
    .media iframe { max-width: 100%; }

    /* partners (Makita) */
    .component_Top .info[style] { width: auto !important; margin: 64px 16px 24px; }
}

/* blog article on phones: the article first, search and categories after it (the list keeps them on top) */
@media (max-width: 767px) {
    .blogPage .blogPage_inner:has(.blogArticle) { display: flex; flex-direction: column; }
    .blogPage .blogPage_inner:has(.blogArticle) > .blogSidebar { order: 2; margin: 32px 0 0; }
}

/* text set left-and-right (justified) opens gaps between its words in a narrow column: on screens up to a small laptop
   it is aligned at the left */
@media (max-width: 1100px) {
    .tj, .ps-a-justify .ps-prose, .ps-col .ps-prose { text-align: left; }
}

/* products overview on small screens */
@media (max-width: 1279.98px) {
    .overview-hero-text { padding: 48px 0 150px; }
    .overview-hero h1 { font-size: 48px; }
    .overview-categories { margin-top: -110px; }
    .overview-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 767.98px) {
    .overview-hero { padding: 0 20px; }
    .overview-hero-text { gap: 12px; padding: 24px 0 26px; }
    .overview-hero h1 { font-size: 36px; }
    .overview-lead { font-size: 14px; line-height: 1.55; }
    .overview-facts { gap: 4px 16px; }
    .overview-facts dd { font-size: 16px; }
    .overview-facts dt { font-size: 12px; }
    .overview-categories { margin-top: 0; padding: 22px 20px 0; }
    .overview-categories-title {
        position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
        margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #5c5c5c;
    }
    .overview-tiles { grid-template-columns: 1fr; gap: 12px; }
    .overview-tile { display: grid; grid-template-columns: 112px minmax(0, 1fr); box-shadow: none; border: 1px solid #e2e2dd; }
    .overview-tile-image { height: auto; min-height: 104px; }
    .overview-tile-body { gap: 4px; padding: 12px 14px; border-top: 0; }
    .overview-tile-count { font-size: 10px; letter-spacing: 1.5px; }
    .overview-tile-title { min-height: 0; margin: 0; font-size: 15px; letter-spacing: 2px; }
    .overview-tile-head { gap: 10px; margin-bottom: 2px; }
    .overview-tile-heading { gap: 4px; }
    .overview-tile-arrow { width: 40px; height: 40px; }
    .overview-tile-links a { padding: 7px 0; font-size: 12px; }
}

/* segment pages on small screens */
@media (min-width: 768px) {
    .category-choices--3 .category-choice { grid-template-columns: minmax(0, 1fr) 48px; grid-template-rows: auto 1fr; align-items: start; gap: 14px 16px; padding: 16px 16px 18px; }
    .category-choices--3 .category-choice-image { grid-column: 1 / -1; height: 150px; }
    .category-choices--3 .category-choice-body { grid-column: 1; }
    .category-choices--3 .category-choice-arrow { grid-column: 2; align-self: end; }
    .category-choices--3 .category-choice-name { font-size: 20px; letter-spacing: 2px; }
}
@media (max-width: 1279.98px) {
    .category-hero { min-height: 560px; }
    .category-hero--plain { min-height: 0; }
    .category-hero-text { padding-top: 48px; padding-bottom: 32px; }
    .category-hero h1 { font-size: 52px; }
    .category-choices { gap: 16px; padding-bottom: 32px; }
    .category-choice { grid-template-columns: 110px minmax(0, 1fr) 44px; gap: 16px; padding: 14px 18px 14px 14px; }
    .category-choice-image { height: 80px; }
    .category-choice-name { font-size: 19px; letter-spacing: 2px; }
    .category-choice-arrow { width: 44px; height: 44px; }
}
@media (max-width: 1023.98px) {
    .hub-parts { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    /* the photo behind the text only; the cards under it, one per row */
    .category-hero { min-height: 0; }
    .category-hero-media { grid-row: 1 / 2; }
    .category-hero-text { gap: 10px; padding: 26px 20px 24px; }
    /* a name that is one long word ("Професионална") stays on the screen of a narrow phone */
    .category-hero h1 { font-size: min(40px, 10vw); line-height: 1.05; overflow-wrap: break-word; }
    .category-lead { font-size: 14px; line-height: 1.55; }
    .category-choices, .category-choices--3, .category-choices--4 { grid-template-columns: 1fr; gap: 12px; padding: 16px 20px 8px; background: #ffffff; }
    .category-choice { grid-template-columns: 84px minmax(0, 1fr) 40px; gap: 12px; padding: 10px 12px 10px 10px; border: 1px solid #e2e2dd; box-shadow: none; }
    .category-choice:hover { transform: none; box-shadow: none; }
    .category-choice-image { height: 72px; }
    .category-choice-body { gap: 3px; }
    .category-choice-meta { font-size: 10px; letter-spacing: 1px; }
    .category-choice-name { font-size: 16px; letter-spacing: 2px; }
    .category-choice-text { font-size: 12px; line-height: 1.45; }
    .category-choice-arrow { width: 40px; height: 40px; }
    /* the comparison of two: each row's label above the values of the two types */
    .hub-compare:not(.hub-compare--wide) thead tr, .hub-compare:not(.hub-compare--wide) tbody tr {
        display: grid; grid-template-columns: repeat(var(--hub-columns, 2), minmax(0, 1fr));
    }
    .hub-compare:not(.hub-compare--wide) thead td, .hub-compare:not(.hub-compare--wide) .hub-compare-links td:first-child { display: none; }
    .hub-compare thead th { padding: 14px 12px; font-size: 10px; }
    .hub-compare:not(.hub-compare--wide) tbody th { grid-column: 1 / -1; width: auto; padding: 14px 12px 4px; }
    .hub-compare:not(.hub-compare--wide) td { padding: 4px 12px 14px; font-size: 14px; }
    .hub-compare:not(.hub-compare--wide) .hub-compare-links td { padding-top: 14px; }
    .hub-compare-links a { font-size: 12px; }
    /* the roof types: the table to the edge of the screen, scrolling under its first column */
    .hub-compare-scroll { margin-right: -20px; }
    .hub-compare--wide { min-width: 760px; font-size: 13px; border-right: 0; }
    .hub-compare--wide thead td, .hub-compare--wide tbody th { position: sticky; left: 0; z-index: 1; }
    .hub-compare--wide thead td { padding: 14px 12px; }
    .hub-compare--wide tbody th { width: 110px; padding: 12px; background: #ffffff; font-size: 10px; }
    .hub-compare--wide td { padding: 12px; }
    .hub-parts-box { padding: 24px 20px; }
    .hub-parts-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .hub-parts-list { columns: 1; }
}

/* product type pages on small screens */
@media (max-width: 1279.98px) {
    .type-top { padding: 28px 24px 30px; }
    .type-top-row { flex-direction: column; align-items: flex-start; gap: 16px; }
    .type-top h1 { font-size: 38px; }
    .type-section { padding: 40px 24px; }
    .type-models, .guide-section { padding-top: 28px; padding-bottom: 28px; }
    .cmp-section { padding-top: 0; }
    .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* two per row: the consultancy card is one more card, or a band after an even number of models */
    .consult-card--span-3, .consult-card--span-2 { grid-column: auto; flex-direction: column; align-items: stretch; gap: 28px; }
    .consult-card--span-3 .consult-card-top, .consult-card--span-3 .consult-card-actions,
    .consult-card--span-2 .consult-card-top, .consult-card--span-2 .consult-card-actions { flex: none; max-width: none; }
    .consult-card--tablet-span-2 { grid-column: span 2; flex-direction: row; align-items: center; gap: 40px; }
    .consult-card--tablet-span-2 .consult-card-top { flex: 1 1 auto; max-width: 560px; }
    .consult-card--tablet-span-2 .consult-card-actions { flex: 0 0 260px; }
    .consult-card--band { gap: 40px; }
    .consult-card--band .consult-card-actions { flex-basis: 260px; }
    .type-about { grid-template-columns: 1fr; gap: 32px; }
    .type-faq-list { grid-template-columns: minmax(0, 1fr); }
    .type-faq .type-head h2 { font-size: 24px; }
    .type-projects, .type-projects--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* comparison: the head of the table under the compact top bar */
    .cmp-table thead th, .cmp-table thead td { top: 56px; padding: 12px 10px 14px; }
    .cmp-corner { width: 150px; }
    .cmp-model img { height: 44px; }
    .cmp-model-name { font-size: 13px; }
    .cmp-table { font-size: 13px; }
    .cmp-table td { padding: 10px; }
    .cmp-picture { height: 90px; }
    /* guide: the questions above the models */
    .guide { grid-template-columns: 1fr; }
    .guide-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* the offer tab above the comparison bar */
    body.compare-bar-open section.offer { bottom: 96px; }
}
@media (max-width: 767.98px) {
    .type-top { padding: 20px 20px 24px; }
    .type-top h1 { font-size: 30px; line-height: 1.18; }
    .type-lead { font-size: 15px; }
    .type-facts { gap: 6px 18px; }
    .type-facts dd { font-size: 16px; }
    .type-tools { flex-direction: column; gap: 10px; margin-top: 18px; }
    .type-tool { justify-content: center; width: 100%; height: 46px; padding: 0 14px; font-size: 12px; letter-spacing: 1px; }
    .type-button { width: 100%; height: 50px; }
    .type-section { padding: 32px 20px; }
    .type-models, .guide-section { padding-top: 20px; padding-bottom: 20px; }
    .cmp-section { padding-top: 0; }
    .type-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
    .type-head h2, .type-about-text h2 { font-size: 24px; line-height: 1.25; }
    /* model cards: one per row, the picture above */
    .model-grid { grid-template-columns: 1fr; gap: 16px; }
    .consult-card--tablet-span-2 { grid-column: auto; flex-direction: column; align-items: stretch; gap: 28px; }
    .consult-card--tablet-span-2 .consult-card-top, .consult-card--tablet-span-2 .consult-card-actions { flex: none; max-width: none; }
    .consult-card--band { flex-direction: column; align-items: stretch; gap: 24px; }
    .consult-card--band .consult-card-top, .consult-card--band .consult-card-actions { flex: none; max-width: none; }
    .model-card-image { height: 200px; }
    .model-card-colour { top: 176px; }
    .model-card-body { gap: 12px; padding: 18px 18px 14px; }
    .model-card-title { font-size: 20px; }
    .consult-card { padding: 28px 22px; }
    .consult-card h3 { font-size: 22px; }
    /* the comparison bar across the bottom of the screen */
    .compare-bar { left: 0; right: 0; bottom: 0; width: auto; flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px 12px 16px; transform: none; }
    .compare-bar-text { flex: 1 1 100%; font-size: 11px; letter-spacing: 1px; color: #bdbdbd; }
    .compare-bar-items { flex: 1 1 0; min-width: 0; }
    .compare-bar-items li { height: 32px; padding-left: 8px; font-size: 11px; }
    .compare-bar-slots { display: none; }
    .compare-bar-go { height: 40px; padding: 0 14px; }
    body.compare-bar-open { padding-bottom: 96px; }
    body.compare-bar-open section.offer { bottom: 118px; }
    /* comparison: two models side by side (site.js), else the table scrolls sideways */
    .cmp-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .cmp-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
    .cmp-pick label { margin: 0; }
    .cmp-pick select {
        width: 100%; height: 46px; padding: 0 10px; border: 1px solid #111111; background-color: #ffffff !important;
        font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #111111 !important; text-align: left !important;
    }
    .cmp-pick p { grid-column: 1 / -1; margin: 0; font-size: 12px; color: #5c5c5c; }
    .cmp-scroll { overflow-x: auto; margin-right: -20px; }
    .cmp-scroll .cmp-table { min-width: 640px; }
    .cmp-scroll.is-enhanced { overflow: visible; margin-right: 0; }
    .cmp-scroll.is-enhanced .cmp-table { min-width: 0; }
    .cmp-table .is-off { display: none; }
    .cmp-corner { width: 30%; font-size: 10px; letter-spacing: 1px; }
    .cmp-table thead th, .cmp-table thead td { padding: 10px 8px 12px; }
    .cmp-model img { height: 36px; }
    .cmp-model-link { display: none; }
    .cmp-group-head th { padding: 20px 0 8px; font-size: 11px; letter-spacing: 2px; }
    .cmp-table tbody tr:not(.cmp-group-head) th { padding: 10px 8px 10px 0; font-size: 12px; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; }
    .cmp-table td { padding: 10px 6px; font-size: 13px; }
    .cmp-same { display: none; }
    .cmp-picture { height: 70px; }
    /* guide: answers two by two, each model with its picture beside its name */
    .guide-form { padding: 22px 18px 24px; }
    .guide-option { min-height: 44px; padding: 8px 10px; gap: 10px; font-size: 13px; }
    .guide-lead { font-size: 17px; }
    .guide-item { grid-template-columns: 100px minmax(0, 1fr); gap: 10px 14px; padding: 14px; }
    .guide-rank { display: none; }
    .guide-picture { width: 100px; height: 72px; }
    .guide-body { gap: 8px; }
    .guide-name { font-size: 18px; }
    .guide-link { grid-column: 1 / -1; }
    .compare-hint { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: #5c5c5c; }  /* products overview */
    .type-about-text p { font-size: 15px; line-height: 1.7; }
    .type-points { padding: 24px 20px; }
    .type-projects, .type-projects--3 { gap: 14px 12px; }
    .type-projects img { height: 124px; }
    .type-projects figcaption { font-size: 12px; line-height: 1.4; }
}

/* pages made of sections (their top is a .type-top): the compact layout, then a phone */
@media (max-width: 1279.98px) {
  .ps-top .type-top-text { flex: none; }
  .ps-top .type-facts { justify-content: flex-start; max-width: none; }
  .ps { margin-bottom: 40px; padding: 0 24px; }
  .ps-bg-grey, .ps-bg-dark { padding-top: 40px; padding-bottom: 40px; }
  .ps-title { font-size: 26px; }
  .ps-text-image .ps-in { gap: 32px; }
  .ps-cols-4 .ps-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
  .ps-text--cols .ps-prose { columns: auto; }
}
@media (max-width: 767.98px) {
  .ps { margin-bottom: 32px; padding: 0 20px; }
  .ps-bg-grey, .ps-bg-dark { padding-top: 32px; padding-bottom: 32px; }
  .ps-title { font-size: 24px; line-height: 1.25; }
  .ps-subtitle { font-size: 17px; letter-spacing: 2px; }
  .ps-text-image .ps-in { grid-template-columns: 1fr; gap: 20px; }
  .ps-text-image.ps-img-right .ps-figure { order: 0; }
  .ps-cols, .ps-cols-2 .ps-cols, .ps-cols-4 .ps-cols { grid-template-columns: 1fr; gap: 14px; }
  .ps-col { padding: 20px; }
}

/* ---------------------------------------------------------------------------------------------
   First page (home/home.php): the film (or the slides of the languages without it), the advantages, the introduction
   with the figures of the offer, the cards of the categories, the projects
   --------------------------------------------------------------------------------------------- */
.home-film { position: relative; overflow: hidden; background: #111111; }
.home-film-video { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 750; object-fit: cover; background: #111111; }
/* until the film is played: a veil over its picture, the button in the middle, the slogan at the bottom (site.js) */
.home-film.is-poster::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(17, 17, 17, .35); pointer-events: none; }
.home-film-play {
    position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 104px; height: 104px;
    margin: -52px 0 0 -52px; padding: 0 0 0 6px; border: 0; border-radius: 50%; background: #FDEA1B; color: #111111; cursor: pointer;
    transition: transform .2s, background .2s;
}
.home-film-play:hover, .home-film-play:focus-visible { background: #ffffff; transform: scale(1.06); }
.home-film-text { position: absolute; z-index: 1; right: 0; bottom: 48px; left: 0; padding: 0 32px; pointer-events: none; }
.home-film-text .type-eyebrow { color: #ffffff; }
.home-film-text [data-home-film-time]:not(:empty)::before { content: " · "; }
.home-film-slogan { margin: 14px 0 0; font-size: 60px; line-height: 1.05; font-weight: 700; letter-spacing: -1px; color: #ffffff; }
.home-film-slogan span { display: block; }

.home-advantages { padding: 26px 32px; background: #111111; }
.home-advantages ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; margin: 0 auto; padding: 0; list-style: none; }
/* each advantage is a list item written in the panel (a text with its bold words): its sign stands before it */
.home-advantages li { position: relative; padding: 11px 0 11px 58px; font-size: 15px; line-height: 1.45; letter-spacing: .3px; color: #ffffff; }
.home-advantages li::before {
    content: ""; position: absolute; top: 50%; left: 0; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%;
    background: #FDEA1B center / 20px 20px no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.home-advantages li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.home-advantages li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 10 5-10 5L2 7z'/%3E%3Cpath d='m2 17 10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E"); }
.home-advantages li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.home-advantages .font-weight-bold, .home-advantages b, .home-advantages strong { font-weight: 700; }

.home-intro { padding: 56px 32px; }
.home-intro .type-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 880px; text-align: center; }
.home-intro h1 { margin: 0; font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -.5px; color: #111111; text-wrap: balance; }
.home-intro .type-lead { max-width: 820px; }
.home-intro .type-lead .font-weight-bold, .home-intro .type-lead b, .home-intro .type-lead strong { font-weight: 600; color: #111111; }
.home-intro .type-facts { justify-content: center; }
/* the colours of the offer on the products overview: a swatch, the colour by its name, the roof types made in it */
.overview-colours .type-head { margin-bottom: 14px; }
.overview-palette-text { max-width: 760px; margin: 0 0 32px; font-size: 16px; line-height: 1.6; color: #3a3a3a; }
.overview-palette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.overview-palette li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid #e2e2dd; }
.overview-palette .color, .overview-palette .color:hover {
    flex: 0 0 auto; float: none; display: block; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%;
    outline: 0; font-size: 0; cursor: default; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.overview-palette strong { font-size: 16px; font-weight: 700; color: #111111; }
.overview-palette div > span { font-size: 15px; color: #3a3a3a; }
.overview-palette small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: #5c5c5c; }
.overview-palette small a { color: #5c5c5c; text-decoration: underline; text-decoration-color: #cfcfc8; text-underline-offset: 3px; white-space: nowrap; }   /* the name of a type stays on one row */
.overview-palette small a:hover { color: #111111; text-decoration-color: #111111; }
@media (max-width: 1023.98px) { .overview-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; } }
@media (max-width: 640px) { .overview-palette { grid-template-columns: minmax(0, 1fr); } }
/* the row of links under the introduction: every type of the catalogue by its name, one press away */
.home-types { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 8px; padding: 0; list-style: none; }
.home-types a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; background: #ffffff; border: 1px solid #e2e2dd;
    font-size: 14px; line-height: 1.2; font-weight: 600; color: #111111; text-decoration: none; transition: border-color .2s, background-color .2s;
}
.home-types a:hover { border-color: #111111; background: #FDEA1B; color: #111111; }
.home-types a:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }

/* the cards of the categories: four on a row; with more of them even rows (3 + 2, 3 + 3), an incomplete one centred */
.home-categories { padding: 0 32px 56px; }
.home-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.home-card {
    display: flex; flex: 0 0 calc((100% - 72px) / 4); flex-direction: column; align-items: center; gap: 6px; box-sizing: border-box; min-width: 0;
    padding: 18px 24px 22px; background: #ffffff; border: 1px solid #e2e2dd; text-align: center; color: #111111; transition: box-shadow .25s;
}
.home-cards--3 .home-card { flex-basis: calc((100% - 48px) / 3); }
.home-cards--2 .home-card { flex-basis: calc((100% - 24px) / 2); }
.home-cards--1 .home-card { flex-basis: 100%; }
.home-card:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .10); color: #111111; }
.home-card-image { display: block; width: 100%; height: 200px; overflow: hidden; }
.home-card-image picture { display: contents; }   /* the picture with its lighter copy: the frame is still the span */
.home-card-image img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .4s; }
.home-card--photo .home-card-image img { object-fit: cover; }   /* a category added in the panel: its photo */
.home-card:hover .home-card-image img { transform: scale(1.03); }
.home-card-name { margin-top: 6px; font-size: 16px; line-height: 1.3; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; }
.home-card-count { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #5c5c5c; }
.home-card-count svg { flex-shrink: 0; transition: transform .2s; }
.home-card:hover .home-card-count svg { transform: translateX(4px); }

/* the projects chosen for the first page: the first one large, the others (up to four) beside it */
.home-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 240px; gap: 20px 24px; }
.home-mosaic figure { display: flex; flex-direction: column; gap: 10px; min-height: 0; margin: 0; }
.home-mosaic figure:first-child { grid-row: span 2; }
.home-mosaic figure > a:first-child { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.home-mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.home-mosaic a:hover img { opacity: .85; }
.home-mosaic figcaption { font-size: 13px; line-height: 1.5; letter-spacing: .5px; color: #d9d9d9; }
.home-mosaic figcaption strong { color: #ffffff; }
.home-mosaic--4 figure:nth-child(2) { grid-column: span 2; }
.home-mosaic--3 { grid-template-columns: 2fr 1fr; }
.home-mosaic--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 360px; }
.home-mosaic--1 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 480px; }
.home-mosaic--2 figure:first-child, .home-mosaic--1 figure:first-child { grid-row: auto; }

@media (max-width: 1279.98px) {
    .home-film-slogan { font-size: 40px; }
    .home-film-play { width: 80px; height: 80px; margin: -40px 0 0 -40px; }
    .home-film-play svg { width: 32px; height: 32px; }
    .home-film-text { bottom: 28px; padding: 0 24px; }
    .home-advantages { padding: 22px 24px; }
    .home-intro { padding: 44px 24px; }
    .home-intro h1 { font-size: 36px; }
    .home-categories { padding: 0 24px 44px; }
    .home-cards { gap: 20px; }
    .home-card, .home-cards--3 .home-card, .home-cards--2 .home-card { flex-basis: calc((100% - 20px) / 2); }
    .home-mosaic, .home-mosaic--3, .home-mosaic--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 16px; }
    .home-mosaic figure:first-child { grid-column: span 2; grid-row: span 2; }
    .home-mosaic--4 figure:nth-child(2) { grid-column: auto; }
    .home-mosaic--4 figure:last-child, .home-mosaic--2 figure:last-child { grid-column: span 2; }
    .home-mosaic--2 figure:first-child { grid-row: span 2; }
}
@media (max-width: 1023.98px) {
    .home-advantages ul { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 767.98px) {
    .home-film-text { bottom: 12px; padding: 0 20px; }
    .home-film-text .type-eyebrow { display: none; }
    .home-film-slogan { margin: 0; font-size: 20px; line-height: 1.15; letter-spacing: 0; }
    .home-film-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; padding-left: 4px; }
    .home-film-play svg { width: 24px; height: 24px; }
    .home-advantages { padding: 16px 20px; }
    .home-advantages li { padding: 9px 0 9px 50px; font-size: 14px; }
    .home-advantages li::before { width: 38px; height: 38px; margin-top: -19px; background-size: 18px 18px; }
    .home-intro { padding: 32px 20px; }
    .home-intro .type-wrap { gap: 12px; }
    .home-intro h1 { font-size: 28px; }
    .home-intro .type-lead { font-size: 15px; }
    .home-categories { padding: 0 20px 32px; }
    .home-cards { gap: 12px; }
    .home-card, .home-cards--3 .home-card, .home-cards--2 .home-card { flex-basis: calc((100% - 12px) / 2); padding: 10px 10px 14px; }
    .home-card-image { height: 112px; }
    .home-card-name { font-size: 13px; letter-spacing: 2px; }
    .home-card-count { font-size: 11px; letter-spacing: 1px; }
    .home-mosaic, .home-mosaic--3, .home-mosaic--2 { grid-auto-rows: 150px; gap: 14px 12px; }
    .home-mosaic--1 { grid-auto-rows: 260px; }
    .home-mosaic figcaption { font-size: 12px; line-height: 1.4; }
}

/* ---------------------------------------------------------------------------------------------
   Gallery (galerie/galerie.php): a dark page; the title with the roof types as a row of buttons, the projects as a
   mosaic that fills the page, a large tile (two columns, two rows) at every four small ones, at the left and at the
   right in turn; what a project is made of is written over its picture
   --------------------------------------------------------------------------------------------- */
.gallery-page { background: #111111; color: #ffffff; }
.gallery-top { padding-bottom: 36px; background: #111111; }
.gallery-top .type-top-row { gap: 40px; }
.gallery-top .type-top-text { flex: 0 0 auto; gap: 10px; }
.gallery-top .type-eyebrow { color: #FDEA1B; }
.gallery-top h1 { color: #ffffff; }
.gallery-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.gallery-pill {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border: 1px solid #8a8a8a; border-radius: 22px; background: transparent;
    font: inherit; font-size: 13px; letter-spacing: 1px; white-space: nowrap; color: #ffffff; cursor: pointer; transition: border-color .2s, background-color .2s;
}
.gallery-pill:hover { border-color: #ffffff; }
.gallery-pill:focus-visible { outline: 2px solid #FDEA1B; outline-offset: 2px; }
.gallery-pill-n { font-size: 12px; font-weight: 600; color: #cfcfcf; }
.gallery-pill[aria-pressed="true"] { border-color: #FDEA1B; background: #FDEA1B; font-weight: 700; color: #111111; }
.gallery-pill[aria-pressed="true"] .gallery-pill-n { color: #111111; }
.gallery-body { padding: 0 32px 48px; background: #111111; }
/* the rows are as high as 250 px beside columns of 306 px (four in 1248 px), whatever the width of the page */
.gallery-body > .type-wrap { container-type: inline-size; }
.gallery-mosaic {
    --columns: 4; --gap: 8px;
    display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--gap);
    grid-auto-rows: 250px;
    grid-auto-rows: calc((100cqw - (var(--columns) - 1) * var(--gap)) / var(--columns) * .817);
}
.gallery-tile { position: relative; margin: 0; overflow: hidden; background: #2b2b2b; }
.gallery-tile--large { grid-column: span 2; grid-row: span 2; }
.gallery-tile--right { grid-column: 3 / span 2; }
.gallery-tile > a:first-child { display: block; width: 100%; height: 100%; }
.gallery-tile > a:first-child:focus-visible { outline: 2px solid #FDEA1B; outline-offset: -2px; }
.gallery-tile picture { display: contents; }
.gallery-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }   /* the tile has one shape, whatever the shape of its photo */
.gallery-tile > a:hover img, .gallery-tile > a:focus-visible img { transform: scale(1.03); }
.gallery-tile figcaption {
    position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 12px; max-width: 100%; padding: 8px 12px; background: rgba(17, 17, 17, .86);
    font-size: 12px; line-height: 1.5; color: #cfcfcf; pointer-events: none;
}
.gallery-tile figcaption strong { font-weight: 700; color: #ffffff; }
.gallery-tile--large figcaption { padding: 12px 16px; font-size: 14px; }
.gallery-tile-photos { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; font-size: 12px; }

@media (max-width: 1279.98px) {
    .gallery-top { padding-bottom: 26px; }
    .gallery-pills { justify-content: flex-start; }
    .gallery-body { padding: 0 24px 40px; }
}
@media (max-width: 1023.98px) {
    /* three columns: a large tile takes two of them */
    .gallery-mosaic { --columns: 3; }
    .gallery-tile--right { grid-column: 2 / span 2; }
}
@media (max-width: 767.98px) {
    /* a phone: two columns, a large tile across both; the roof types on one row that slides sideways */
    .gallery-top { padding-bottom: 20px; }
    .gallery-top .type-top-row { align-items: stretch; }
    .gallery-pills { flex-wrap: nowrap; margin: 0 -20px; padding: 2px 20px; overflow-x: auto; scrollbar-width: none; }
    .gallery-pills::-webkit-scrollbar { display: none; }
    .gallery-pill { flex: 0 0 auto; padding: 0 16px; }
    .gallery-body { padding: 0 20px 28px; }
    .gallery-mosaic { --columns: 2; --gap: 6px; }
    .gallery-tile--right { grid-column: span 2; }
    .gallery-tile figcaption { gap: 8px; padding: 6px 8px; font-size: 11px; line-height: 1.35; }
    .gallery-tile figcaption > span:first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
    .gallery-tile--large figcaption { padding: 8px 12px; font-size: 13px; }
}

/* ---------------------------------------------------------------------------------------------
   Media (media/media.php): the title and the clips on the dark ground of the gallery, then the documents on the
   grey one: a shelf of covers for each kind, the documents without a cover as a list by product type
   --------------------------------------------------------------------------------------------- */
.media-page { background: #f4f4f1; }
.media-top { padding-bottom: 52px; background: #111111; color: #ffffff; }
.media-top .type-top-row { gap: 40px; }
.media-top .type-top-text { gap: 10px; }
.media-top .type-eyebrow { color: #FDEA1B; }
.media-top h1 { color: #ffffff; }
.media-figures { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0; list-style: none; font-size: 13px; letter-spacing: .5px; color: #cfcfcf; }
.media-figures li { white-space: nowrap; }
.media-figures strong { margin-right: 2px; font-size: 18px; font-weight: 700; letter-spacing: 0; color: #ffffff; }
.media-video { margin-top: 26px; scroll-margin-top: 108px; }
.media-video-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; margin-bottom: 10px; }
.media-video-head h2 { margin: 0; }
.media-channel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #ffffff; }
.media-page .media-channel:hover { color: #FDEA1B; }
.media-channel svg { flex-shrink: 0; }
/* a clip: its picture (16:9, whatever YouTube gives), the round button, the sign of YouTube in the corner, its title */
.media-clip { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; color: #ffffff; }
.media-page .media-clip:hover { color: #ffffff; }
.media-clip:focus-visible { outline: 2px solid #FDEA1B; outline-offset: 3px; }
.media-clip-picture { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #2b2b2b; }
.media-clip-picture img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.media-clip:hover .media-clip-picture img, .media-clip:focus-visible .media-clip-picture img { transform: scale(1.03); }
.media-clip-play {
    position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -20px 0 0 -20px;
    border-radius: 50%; background: #FDEA1B; color: #111111; transition: transform .2s;
}
.media-clip:hover .media-clip-play { transform: scale(1.08); }
.media-clip-source {
    position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; background: rgba(17, 17, 17, .86); font-size: 12px; font-weight: 600;
    letter-spacing: .5px; color: #ffffff;
}
.media-clip-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 12px; line-height: 1.4; font-weight: 500; }
/* seven clips or more: the first one large (three columns, two rows), the others six on a row, beside it and under it */
.media-clips--featured { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; }
.media-clips--featured .media-clip-title { min-height: 4.2em; }
.media-clips--featured .media-clip--large { grid-column: span 3; grid-row: span 2; }
.media-clips--featured .media-clip--large .media-clip-picture { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
/* two large ones side by side (8, 14... clips): nothing small stands beside them, so they take their own shape */
.media-clips--pair .media-clip--large { grid-row: auto; }
.media-clips--pair .media-clip--large .media-clip-picture { flex: none; aspect-ratio: 16 / 9; }
.media-clip--large .media-clip-play { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
.media-clip--large .media-clip-source { padding: 8px 12px; }
.media-clips--featured .media-clip--large .media-clip-title {
    position: absolute; left: 0; bottom: 0; max-width: 100%; min-height: 0; padding: 12px 16px; -webkit-line-clamp: 2; background: rgba(17, 17, 17, .86); font-size: 18px; font-weight: 600;
}
/* six or fewer: all of one size, on even rows, a shorter last row in the middle */
.media-clips--equal { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; --columns: 3; }
.media-clips--1 { --columns: 1; }
.media-clips--2 { --columns: 2; }
.media-clips--4 { --columns: 4; }
.media-clips--equal .media-clip { flex: 0 0 calc((100% - (var(--columns) - 1) * 24px) / var(--columns)); gap: 12px; }
.media-clips--1 .media-clip { flex-basis: min(100%, 832px); }
.media-clips--equal .media-clip-title { -webkit-line-clamp: 2; font-size: 15px; font-weight: 600; }
.media-clips--equal .media-clip-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
/* the documents */
.media-docs { scroll-margin-top: 88px; }
.media-anchor { display: block; height: 0; scroll-margin-top: 108px; }
.media-docs-head { align-items: flex-end; }
.media-docs-hint { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: #5c5c5c; }
.media-docs-hint svg { flex-shrink: 0; }
.media-shelves { display: flex; flex-wrap: wrap; gap: 44px 96px; margin-top: 36px; }
.media-shelf { display: flex; flex-direction: column; min-width: 0; }
.media-shelf h3, .media-lists h3 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; font-size: 18px; line-height: 1.3; font-weight: 600; color: #111111; }
.media-shelf h3 span, .media-lists h3 span { font-size: 13px; font-weight: 400; color: #5c5c5c; }
.media-covers { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 28px 24px; margin: 0; padding: 0; list-style: none; }   /* two shelves on a line end level */
.media-cover { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 157px; }
.media-cover-sheet { display: block; width: 100%; background: #ffffff; box-shadow: 0 8px 22px rgba(0, 0, 0, .16); transition: transform .25s, box-shadow .25s; }
.media-cover-sheet:hover, .media-cover-sheet:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 0, 0, .24); }
.media-cover-sheet:focus-visible, .media-doc:focus-visible, .media-file:focus-visible { outline: 2px solid #111111; outline-offset: 3px; }
.media-cover-sheet img { display: block; width: 100%; height: auto; aspect-ratio: 595 / 842; object-fit: cover; }
.media-cover-name { font-size: 13px; line-height: 1.35; font-weight: 600; color: #111111; }
.media-cover > .media-file { margin-top: auto; }   /* the sizes of a row stand on one line, whatever the length of the names */
.media-doc-lang { font-weight: 400; color: #5c5c5c; }
.media-file { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; min-height: 24px; font-size: 12px; white-space: nowrap; color: #5c5c5c; }
.media-page .media-file:hover { color: #111111; }
.media-lists { margin-top: 44px; }
.media-lists-card { columns: 4 230px; column-gap: 32px; padding: 20px 24px 6px; background: #ffffff; border: 1px solid #e2e2dd; }
.media-list { break-inside: avoid; padding-bottom: 14px; scroll-margin-top: 108px; }
.media-list h4 { margin: 0 0 6px; font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #5c5c5c; }
.media-list h5 { margin: 10px 0 2px; font-size: 12px; font-weight: 600; color: #5c5c5c; }
.media-list ul { margin: 0; padding: 0; list-style: none; }
.media-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; border-top: 1px solid #ecece8; }
.media-doc { display: inline-flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; min-height: 44px; font-size: 14px; line-height: 1.35; font-weight: 600; color: #111111; }
.media-doc svg { flex-shrink: 0; color: #5c5c5c; }
.media-page .media-doc:hover { color: #111111; text-decoration: underline; text-decoration-color: #FDEA1B; text-decoration-thickness: 2px; text-underline-offset: 4px; }

@media (max-width: 1279.98px) {
    .media-top { padding-bottom: 36px; }
    .media-video { margin-top: 20px; }
    .media-video, .media-anchor, .media-list, .media-docs { scroll-margin-top: 76px; }
    .media-shelves { gap: 36px 56px; margin-top: 28px; }
}
@media (max-width: 1023.98px) {
    /* four small clips on a row; the large one takes the whole first row */
    .media-clips--featured { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .media-clips--featured .media-clip--large { grid-column: 1 / -1; grid-row: auto; }
    .media-clips--featured .media-clip--large .media-clip-picture { flex: none; aspect-ratio: 16 / 9; }
    .media-clips--4 { --columns: 2; }
}
@media (max-width: 767.98px) {
    .media-top { padding-bottom: 28px; }
    .media-clips--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
    .media-clips--featured .media-clip--large .media-clip-title { padding: 8px 12px; font-size: 15px; }
    .media-clip--large .media-clip-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
    .media-clips--equal { gap: 20px 12px; --columns: 1; }
    .media-clips--4, .media-clips--equal[data-clips="6"] { --columns: 2; }
    .media-clips--equal .media-clip { flex-basis: calc((100% - (var(--columns) - 1) * 12px) / var(--columns)); }
    .media-clips--equal .media-clip-title { font-size: 14px; }
    .media-docs-hint { font-size: 12px; }
    .media-covers { gap: 22px 16px; }
    .media-cover { width: calc((100% - 16px) / 2); max-width: 170px; }
    .media-lists-card { padding: 16px 16px 2px; }
}

/* ---------------------------------------------------------------------------------------------
   A document opened over the page, to be leafed through (system/lib/js/flipbook.js): it takes the whole screen, as
   the pictures and the clips of the site do in their viewer; its bar of buttons above the pages
   --------------------------------------------------------------------------------------------- */
html.flip-open { overflow: hidden; }
.flip-viewer { position: fixed; inset: 0; z-index: 99990; display: flex; background: #1c1c1c; font-family: 'Montserrat', sans-serif; }
.flip-viewer[hidden] { display: none; }
.flip-panel { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; color: #ffffff; }
.flip-bar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px 20px; min-height: 56px; padding: 0 6px 0 20px; background: #111111; }
.flip-title { min-width: 0; margin: 0; overflow: hidden; font-size: 14px; line-height: 1.4; font-weight: 600; letter-spacing: .3px; text-overflow: ellipsis; white-space: nowrap; color: #ffffff; }
.flip-tools { display: flex; flex-shrink: 0; align-items: center; gap: 2px; }
.flip-turn { display: flex; align-items: center; gap: 2px; margin-right: 12px; }
.flip-turn[hidden] { display: none; }
.flip-count { min-width: 66px; font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; color: #cfcfcf; }
.flip-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #ffffff; cursor: pointer; }
.flip-viewer .flip-button:hover { color: #FDEA1B; }
.flip-button:focus-visible { outline: 2px solid #FDEA1B; outline-offset: -3px; }
.flip-viewer .flip-button:disabled { color: #6f6f6f; cursor: default; }
.flip-stage { position: relative; flex: 1 1 auto; min-height: 0; padding: 20px; }
.flip-scroll { width: 100%; height: 100%; overflow: hidden; }
.flip-scroll.is-zoomed { overflow: auto; cursor: grab; }
.flip-scroll.is-zoomed .flip-book { touch-action: pan-x pan-y; }
.flip-book--alone { display: flex; align-items: center; justify-content: center; }
.flip-page { overflow: hidden; background: #ffffff; }
.flip-page--alone { position: relative; flex: 0 0 auto; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.flip-page canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.flip-status { position: absolute; left: 20px; right: 20px; top: 50%; margin: -11px 0 0; font-size: 14px; line-height: 22px; text-align: center; color: #cfcfcf; pointer-events: none; }
.flip-status[hidden] { display: none; }
.flip-status a { color: #FDEA1B; text-decoration: underline; pointer-events: auto; }
@media (max-width: 767.98px) {
    .flip-bar { flex-wrap: wrap; padding: 6px 2px 2px 12px; }
    .flip-title { flex: 1 1 100%; font-size: 13px; }
    .flip-tools { flex: 1 1 auto; justify-content: space-between; }
    .flip-turn { margin-right: 0; }
    .flip-stage { padding: 10px; }
}

/* ---------------------------------------------------------------------------------------------
   Blog (blog/index.php). The list: a dark top with the title, the numbers and the newest article, large; on white the
   themes as round buttons and the search, then the other articles as cards. An article: a dark top with its title,
   its picture half over the dark band, its text with its chapters kept in view beside it, three other articles
   --------------------------------------------------------------------------------------------- */
.blog-top { padding-bottom: 52px; background: #111111; color: #ffffff; }
.blog-top .type-top-row { gap: 40px; }
.blog-top .type-top-text { gap: 10px; }
.blog-top .type-eyebrow { color: #FDEA1B; }
.blog-top h1 { color: #ffffff; }
.blog-figures { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0; list-style: none; font-size: 13px; letter-spacing: .5px; color: #cfcfcf; }
.blog-figures li { white-space: nowrap; }
.blog-figures strong { margin-right: 2px; font-size: 18px; font-weight: 700; letter-spacing: 0; color: #ffffff; }
/* the pieces an article is made of wherever it stands: its themes, its date, the sign of its clip, the link to it */
.blog-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.blog-chips li { position: relative; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; background: #FDEA1B; font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; color: #111111; }
.blog-chips a, .blog-page .blog-chips a:hover { color: #111111; }
.blog-chips a::after { content: ""; position: absolute; inset: -10px 0; }   /* as tall as a finger needs */
.blog-chips a:focus-visible { outline: 2px solid #111111; outline-offset: 4px; }
.blog-top .blog-chips a:focus-visible { outline-color: #ffffff; }
.blog-themes { font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #5c5c5c; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; font-size: 13px; line-height: 1.5; color: #5c5c5c; }
.blog-meta > * { white-space: nowrap; }
.blog-meta-dot { color: #9a9a9a; }
.blog-meta-clip { display: inline-flex; align-items: center; gap: 6px; }
.blog-more { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; min-height: 44px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; color: #111111; }
.blog-page .blog-more:hover { color: #111111; }
.blog-more svg { flex-shrink: 0; transition: transform .2s; }
.blog-more:hover svg { transform: translateX(4px); }
.blog-more--yellow, .blog-page .blog-more--yellow:hover { color: #FDEA1B; }
.blog-play { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #FDEA1B; color: #111111; }
.blog-picture-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #2b2b2b; font-size: 15px; font-weight: 700; letter-spacing: 6px; color: #FDEA1B; }
/* the newest article */
.blog-lead { display: flex; align-items: stretch; gap: 40px; margin-top: 28px; }
/* (the pictures of the lists are 16:9, the shape of a clip: the frame YouTube serves for one loses its black bands) */
.blog-lead-picture { position: relative; display: block; flex: 3 1 0; align-self: center; min-width: 0; overflow: hidden; aspect-ratio: 16 / 9; background: #2b2b2b; }
.blog-lead-picture img, .blog-card-picture img, .blog-also-picture img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-lead:hover .blog-lead-picture img, .blog-card:hover .blog-card-picture img, .blog-also-item:hover .blog-also-picture img { transform: scale(1.03); }
.blog-lead-text { display: flex; flex: 2 1 0; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.blog-lead h2 { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 600; text-wrap: balance; color: #ffffff; }
.blog-lead h2 a, .blog-page .blog-lead h2 a:hover { color: #ffffff; }
.blog-lead h2 a:hover, .blog-card h2 a:hover, .blog-also-item h3 a:hover { text-decoration: underline; text-decoration-color: #FDEA1B; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.blog-lead h2 a:focus-visible { outline: 2px solid #FDEA1B; outline-offset: 4px; }
.blog-lead-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; margin: 0; overflow: hidden; font-size: 15px; line-height: 1.6; color: #cfcfcf; }
.blog-top .blog-meta { color: #cfcfcf; }
/* the themes and the search, then the other articles */
.blog-rest { padding-top: 40px; padding-bottom: 56px; }
/* the themes and the search: the search keeps the right end of the first row; the themes that do not fit beside it go on a second row, under the first */
.blog-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; margin-bottom: 32px; }
.blog-pills { display: flex; flex: 1 1 560px; flex-wrap: wrap; gap: 8px; min-width: 0; }
nav.blog-pills, .blog-contents nav { position: static; width: auto; height: auto; z-index: auto; background: none; }   /* main.css makes every <nav> a fixed bar */
.blog-pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border: 1px solid #8a8a8a; border-radius: 22px; background: #ffffff; font-size: 13px; letter-spacing: 1px; white-space: nowrap; color: #111111; transition: border-color .2s, background-color .2s; }
.blog-page .blog-pill:hover { border-color: #111111; color: #111111; }
.blog-pill:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
.blog-pill-n { font-size: 12px; font-weight: 600; color: #5c5c5c; }
.blog-pill[aria-current="true"], .blog-page .blog-pill[aria-current="true"]:hover { border-color: #FDEA1B; background: #FDEA1B; font-weight: 700; }
.blog-pill[aria-current="true"] .blog-pill-n { color: #111111; }
.blog-search { display: flex; flex: 0 0 320px; height: 44px; margin: 0; border: 1px solid #8a8a8a; background: #ffffff; }
.blog-search:focus-within { border-color: #111111; outline: 2px solid #FDEA1B; outline-offset: 1px; }
/* (main.css paints every field grey, with its words in the middle) */
.blog-search input { flex: 1 1 auto; min-width: 0; padding: 0 14px; border: 0; background-color: transparent !important; font: inherit; font-size: 14px; text-align: left !important; color: #111111 !important; outline: 0; -webkit-appearance: none; appearance: none; }
.blog-search input::placeholder { color: #5c5c5c; opacity: 1; }
.blog-search button { display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center; padding: 0; border: 0; background: #111111; color: #FDEA1B; cursor: pointer; }
.blog-found { margin: -12px 0 24px; font-size: 14px; line-height: 1.5; color: #5c5c5c; }
.blog-found strong { font-weight: 600; color: #111111; }
.blog-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
.blog-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.blog-card-picture { position: relative; display: block; margin-bottom: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: #f4f4f1; }
.blog-card-picture::after, .blog-also-picture::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(17, 17, 17, .08); pointer-events: none; }   /* a white picture keeps its edge */
.blog-card-picture .blog-play { width: 44px; height: 44px; }
.blog-card h2 { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; color: #111111; }
.blog-card h2 a, .blog-page .blog-card h2 a:hover, .blog-also-item h3 a, .blog-page .blog-also-item h3 a:hover { color: #111111; }
.blog-card h2 a:focus-visible, .blog-also-item h3 a:focus-visible { outline: 2px solid #111111; outline-offset: 3px; }
.blog-card .blog-meta { margin-top: auto; padding-top: 2px; }
.blog-empty { margin: 0; padding: 56px 20px; border: 1px dashed #b3b3b3; font-size: 15px; text-align: center; color: #5c5c5c; }
/* an article */
.blog-top--article { padding-bottom: 36px; }
.blog-top--figure { padding-bottom: 36px; }
.blog-crumb { display: inline-block; max-width: min(520px, 50vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.blog-top--article .blog-chips { margin-top: 18px; }
.blog-top--article h1 { max-width: 960px; margin-top: 16px; text-wrap: balance; }
.blog-facts { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; color: #cfcfcf; }
.blog-facts li { white-space: nowrap; }
.blog-facts strong { font-weight: 600; color: #ffffff; }
.blog-figure { padding: 0 32px; background: linear-gradient(#111111 0, #111111 150px, #ffffff 150px); }
/* (the picture of an article is shown whole when it is a wide one, a drawing with words in it for instance; a taller one is cut to twice as wide as high) */
.blog-figure .type-wrap > img { display: block; width: 100%; height: auto; max-height: 624px; object-fit: cover; background: #2b2b2b; }
.blog-figure-clip { position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 1; background: #2b2b2b; }
.blog-figure-clip img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-figure-clip:hover img { transform: scale(1.02); }
.blog-figure-clip:focus-visible { outline: 3px solid #FDEA1B; outline-offset: 3px; }
.blog-play--large { left: 50%; top: 50%; bottom: auto; width: 84px; height: 84px; transform: translate(-50%, -50%); }
.blog-body { padding-top: 48px; padding-bottom: 56px; }
.blog-columns { display: flex; align-items: flex-start; gap: 96px; }
.blog-columns--plain { justify-content: center; }
.blog-contents { position: sticky; top: 112px; flex: 0 0 264px; max-height: calc(100vh - 136px); overflow-y: auto; }
.blog-contents summary { display: block; cursor: default; pointer-events: none; }
.blog-contents summary::-webkit-details-marker { display: none; }
.blog-contents-n { display: none; }
.blog-contents ol { margin: 12px 0 0; padding: 0; border-left: 2px solid #e2e2dd; list-style: none; }
.blog-contents a { display: flex; align-items: baseline; gap: 10px; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.45; color: #111111; }
.blog-contents a span { flex: 0 0 22px; font-size: 12px; font-weight: 600; color: #5c5c5c; }
.blog-page .blog-contents a:hover { border-left-color: #8a8a8a; color: #111111; }
.blog-contents a[aria-current="true"], .blog-page .blog-contents a[aria-current="true"]:hover { border-left-color: #111111; font-weight: 700; }
.blog-contents a:focus-visible { outline: 2px solid #111111; outline-offset: -2px; }
.blog-main { flex: 1 1 520px; min-width: 0; max-width: 760px; }
.blog-text { font-size: 17px; line-height: 1.75; color: #2b2b2b; overflow-wrap: break-word; }
.blog-text p { margin: 0 0 18px; }
.blog-text > p:first-child { font-size: 21px; line-height: 1.6; font-weight: 500; color: #111111; }
.blog-text h2 { margin: 40px 0 18px; font-size: 26px; line-height: 1.25; font-weight: 700; color: #111111; scroll-margin-top: 112px; }
.blog-text h3 { margin: 32px 0 12px; font-size: 20px; line-height: 1.3; font-weight: 600; color: #111111; }
.blog-text h4 { margin: 24px 0 10px; font-size: 17px; line-height: 1.4; font-weight: 700; color: #111111; }
.blog-text > :first-child { margin-top: 0; }
.blog-text > :last-child { margin-bottom: 0; }
.blog-text ul, .blog-text ol { margin: 0 0 18px; padding: 0 0 0 22px; }
.blog-text li { margin: 6px 0; }
.blog-text b, .blog-text strong { font-weight: 600; color: #111111; }
.blog-page .blog-text a, .blog-page .blog-text a:hover { color: #111111; text-decoration: underline; text-decoration-color: #FDEA1B; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.blog-page .blog-text a:hover { background: #FDEA1B; }
.blog-text blockquote { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 3px solid #FDEA1B; font-size: 19px; line-height: 1.6; color: #111111; }
.blog-text img, .blog-text iframe, .blog-text video { max-width: 100%; }
.blog-text img { height: auto; }
.blog-text table { display: block; max-width: 100%; margin: 0 0 18px; overflow-x: auto; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.blog-text th, .blog-text td { padding: 8px 12px; border: 1px solid #e2e2dd; text-align: left; vertical-align: top; }
.blog-text hr { margin: 32px 0; border: 0; border-top: 1px solid #e2e2dd; }
.blog-ending { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 32px; padding-top: 16px; border-top: 1px solid #e2e2dd; }
.blog-ending-themes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; color: #5c5c5c; }
.blog-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; color: #111111; }
.blog-page .blog-back:hover { color: #111111; }
.blog-back svg { flex-shrink: 0; transition: transform .2s; }
.blog-back:hover svg { transform: translateX(-4px); }
.blog-also .type-head { margin-bottom: 28px; }
.blog-also-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.blog-also-item { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.blog-also-picture { position: relative; display: block; flex: 0 0 136px; overflow: hidden; aspect-ratio: 16 / 9; background: #e2e2dd; }
.blog-also-picture .blog-play { left: 8px; bottom: 8px; width: 32px; height: 32px; }
.blog-also-picture .blog-picture-none { font-size: 9px; letter-spacing: 2px; }
.blog-also-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.blog-also-item h3 { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; color: #111111; }

@media (max-width: 1279.98px) {
    .blog-top { padding-bottom: 36px; }
    .blog-lead { gap: 28px; margin-top: 22px; }
    .blog-lead h2 { font-size: 26px; }
    .blog-rest { padding-top: 32px; padding-bottom: 44px; }
    .blog-cards, .blog-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
    .blog-figure { padding: 0 24px; background: linear-gradient(#111111 0, #111111 120px, #ffffff 120px); }
    .blog-figure .type-wrap > img { max-height: calc((100vw - 48px) / 2); }
    .blog-body { padding-top: 40px; padding-bottom: 44px; }
    .blog-columns { gap: 48px; }
    .blog-contents { top: 80px; flex-basis: 232px; max-height: calc(100vh - 104px); }   /* the yellow bar at the top is 56 px high */
    .blog-text h2 { scroll-margin-top: 80px; }
}
@media (max-width: 1023.98px) {
    .blog-lead { flex-direction: column; gap: 20px; }
    .blog-lead-picture { flex: none; aspect-ratio: 16 / 9; }
    .blog-lead-text { flex: none; }
    .blog-cards, .blog-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-columns { flex-direction: column; align-items: stretch; gap: 28px; }
    /* the chapters: a closed list above the text, opened by a tap (site.js closes it when the page opens) */
    .blog-contents { position: static; flex: none; max-height: none; overflow: visible; border: 1px solid #e2e2dd; }
    .blog-contents summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; cursor: pointer; pointer-events: auto; }
    .blog-contents summary::after { content: ""; flex-shrink: 0; width: 9px; height: 9px; margin: -4px 4px 0 0; border-right: 2px solid #111111; border-bottom: 2px solid #111111; transform: rotate(45deg); transition: transform .2s; }
    .blog-contents[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
    .blog-contents-n { display: inline; margin: 0 auto 0 12px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #5c5c5c; }
    .blog-contents ol { margin: 0 16px 14px; }
    .blog-contents a { padding: 9px 0 9px 14px; }
    .blog-main { flex: none; max-width: none; }
    .blog-also-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .blog-top { padding-bottom: 28px; }
    .blog-lead { margin-top: 18px; }
    .blog-lead h2 { font-size: 22px; line-height: 1.25; }
    .blog-rest { padding-top: 24px; padding-bottom: 36px; }
    .blog-toolbar { gap: 14px; margin-bottom: 24px; }
    /* the themes: one row that slides sideways, as in the gallery */
    .blog-pills { flex-wrap: nowrap; margin: 0 -20px; padding: 2px 20px; overflow-x: auto; scrollbar-width: none; }
    .blog-pills::-webkit-scrollbar { display: none; }
    .blog-pill { flex: 0 0 auto; padding: 0 16px; }
    .blog-toolbar > .blog-pills { flex: 1 1 100%; }
    .blog-search { flex: 1 1 100%; }
    .blog-search input { font-size: 16px; }   /* smaller letters make a phone zoom in */
    .blog-cards, .blog-cards--3 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .blog-card h2 { font-size: 18px; }
    .blog-top--article h1 { margin-top: 14px; }
    .blog-facts { gap: 2px 18px; margin-top: 14px; }
    .blog-figure { padding: 0 20px; background: linear-gradient(#111111 0, #111111 64px, #ffffff 64px); }
    .blog-figure .type-wrap > img { max-height: calc((100vw - 40px) / 1.6); }
    .blog-figure-clip { aspect-ratio: 16 / 9; }
    .blog-play--large { width: 64px; height: 64px; }
    .blog-body { padding-top: 28px; padding-bottom: 36px; }
    .blog-text { font-size: 16px; line-height: 1.7; }
    .blog-text > p:first-child { font-size: 18px; }
    .blog-text h2 { margin-top: 32px; font-size: 22px; }
    .blog-text h3 { font-size: 18px; }
    .blog-ending { align-items: flex-start; flex-direction: column; }
    .blog-back { margin-left: 0; }
    .blog-also-list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .blog-also-picture { flex-basis: 112px; }
}

/* ---------------------------------------------------------------------------------------------
   About page (despre_noi/despre_noi.php): the mission as the title, the yellow band of the brand, the ideas two on a
   row, the values with their diagram, the map with its labels (both diagrams answer the mouse: main.js)
   --------------------------------------------------------------------------------------------- */
/* (the top of a page that is not of the catalogue, .type-top--page: its name as a small line over its title, a text under it) */
.type-top--page .type-eyebrow { margin-top: 14px; }
.type-top--page h1 { margin-top: 10px; }
.type-top--page .type-lead { max-width: 780px; margin-top: 14px; }
.about-top h1 { max-width: 980px; font-size: 38px; line-height: 1.18; text-wrap: balance; }
/* the picture (five stars drawn by a hand, on yellow) fills the height of the band from its right edge */
.about-brand { padding: 0 32px; background: #FBE919 url(../img/pages/about_us/background/about.jpg) right center / auto 100% no-repeat; color: #111111; }
.about-brand .type-wrap { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; box-sizing: border-box; min-height: 440px; padding: 40px 0; }
.about-brand h2 { margin: 0; font-size: 34px; line-height: 1.2; font-weight: 700; color: #111111; }
.about-brand p { max-width: 760px; margin: 0; font-size: 15px; line-height: 1.65; color: #111111; }
.about-idea-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.about-idea { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; background: #ffffff; border: 1px solid #e2e2dd; border-top: 3px solid #FDEA1B; }
.about-idea h3 { margin: 0; font-size: 12px; line-height: 1.5; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #5c5c5c; }
.about-idea p { margin: 0; font-size: 14px; line-height: 1.65; color: #2b2b2b; }
.about-idea .about-idea-lead { font-size: 17px; line-height: 1.4; font-weight: 600; color: #111111; }
/* the band of the values has the grey the pictures of its diagram are drawn on */
.about-values { padding: 48px 32px; background: #464646; color: #ffffff; }
.about-values-row { display: flex; align-items: center; gap: 56px; }
.about-values-text { display: flex; flex: 1 1 0; flex-direction: column; gap: 18px; min-width: 0; }
.about-values .type-eyebrow { color: #FDEA1B; }
.about-values .valori_boxes_left { display: block; width: auto; height: auto; }
.about-values .valori_description { min-height: 140px; font-size: 18px; line-height: 1.55; color: #ffffff; }   /* the band keeps its height whichever text shows */
.about-values-map { flex: 0 1 637px; min-width: 0; }
.about-values-map img { display: block; width: 100%; max-width: 637px; height: auto; }
.about-where-row { display: flex; align-items: center; gap: 56px; }
.about-where-map { flex: 1 1 0; min-width: 0; }
.about-where-map img { display: block; width: 100%; max-width: 660px; height: auto; margin: 0 auto; }
.about-where-text { display: flex; flex: 1 1 0; flex-direction: column; gap: 16px; min-width: 0; }
.about-where-words { font-size: 15px; line-height: 1.65; color: #2b2b2b; }
.about-where-text > img { display: block; width: 100%; max-width: 679px; height: auto; margin-top: 8px; }

@media (max-width: 1279.98px) {
    .about-top h1 { font-size: 32px; }
    .about-brand { padding: 0 24px; background-size: auto 240px; background-position: right bottom; }
    .about-brand .type-wrap { min-height: 0; padding: 40px 0 264px; }
    .about-values { padding: 40px 24px; }
    .about-values-row, .about-where-row { flex-direction: column; align-items: stretch; gap: 28px; }
    .about-values-map { flex: none; }
    .about-values .valori_description { min-height: 0; }
    .about-values-map img, .about-where-text > img { margin-right: auto; margin-left: auto; }
}
@media (max-width: 767.98px) {
    .about-top h1 { font-size: 24px; line-height: 1.25; }
    .about-brand { padding: 0 20px; background-size: auto 190px; }
    .about-brand .type-wrap { padding: 32px 0 206px; }
    .about-brand h2 { font-size: 26px; }
    .about-idea-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .about-idea { padding: 20px; }
    .about-values { padding: 32px 20px; }
    .about-values .valori_description { min-height: 150px; font-size: 16px; }   /* on a phone the text is above the diagram: it keeps its room, so the diagram stays under the finger */
}

/* ---------------------------------------------------------------------------------------------
   Contact (contact/contact.php): a dark top with the phone and the e-mail of the office beside the title; the form on
   the dark ground, in three numbered parts side by side, each field under its name; the office and its map on the
   grey ground; the regional contacts of the languages that have them
   --------------------------------------------------------------------------------------------- */
.contact-top { padding-bottom: 40px; background: #111111; color: #ffffff; }
.contact-top .type-top-row { gap: 48px; }
.contact-top .type-eyebrow { color: #FDEA1B; }
.contact-top h1 { color: #ffffff; }
.contact-top .type-lead { max-width: 640px; color: #cfcfcf; }
.contact-ways { display: flex; flex: 0 0 auto; flex-direction: column; gap: 14px; }
.contact-line { display: flex; align-items: flex-start; gap: 14px; }
.contact-line svg { flex-shrink: 0; margin-top: 3px; }
.contact-line-label { display: block; font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #5c5c5c; }
.contact-line-value { display: block; font-size: 15px; line-height: 1.45; font-weight: 600; color: #111111; overflow-wrap: anywhere; }
/* (under the mouse a link keeps its size and its colour and gets a yellow line: only what changes is written here) */
.contact-page a.contact-line-value:hover { color: #111111; text-decoration: underline; text-decoration-color: #FDEA1B; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.contact-ways .contact-line svg { color: #FDEA1B; }
.contact-ways .contact-line-label { color: #cfcfcf; }
.contact-ways .contact-line-value { font-size: 18px; white-space: nowrap; color: #ffffff; }
.contact-page .contact-ways a.contact-line-value:hover { color: #ffffff; }
.contact-ways .contact-line--large .contact-line-value { font-size: 24px; }
.contact-ways a.contact-line-value:focus-visible { outline: 2px solid #FDEA1B; outline-offset: 3px; }
/* the form (main.css paints every field of the site grey, centred: these are dark, written from the left) */
.contact-body { padding: 0 32px 64px; background: #111111; color: #ffffff; }
.contact-form { color-scheme: dark; }   /* the lists and the buttons the browser draws are dark too */
.contact-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.contact-step { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.contact-step-head { display: flex; align-items: flex-end; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid #3a3a3a; }
.contact-step-n { font-size: 64px; line-height: 1; font-weight: 700; letter-spacing: -1px; color: #FDEA1B; }
/* the number as an outline: a line drawn around its shape, then the shape filled with the colour of the ground, which
   hides the half of the line that falls inside it and the places where the strokes of a digit cross */
@supports (-webkit-text-stroke: 1px #000) and (paint-order: stroke fill) {
    .contact-step-n { color: #111111; -webkit-text-stroke: 3px #FDEA1B; paint-order: stroke fill; }
}
.contact-step h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.3; font-weight: 600; color: #ffffff; }
.contact-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.contact-field--tall { flex: 1 1 auto; }
.contact-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; }
.contact-field label { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 600; color: #ffffff; }
.contact-form .contact-input {
    width: 100%; height: 52px; box-sizing: border-box; padding: 0 14px; border: 1px solid #6f6f6f; background-color: #1c1c1c !important;
    font: inherit; font-size: 15px; color: #ffffff !important; text-align: left !important;
}
.contact-form textarea.contact-input { flex: 1 1 auto; height: auto; min-height: 146px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.contact-form .contact-input:focus-visible, .contact-form .contact-file:focus-visible { border-color: #FDEA1B; outline: 2px solid #FDEA1B; outline-offset: 1px; }
.contact-form .contact-input.is-invalid, .contact-form .contact-file.is-invalid { border-color: #ff8f85; box-shadow: inset 0 0 0 1px #ff8f85; }
.contact-form .contact-file {
    width: 100%; height: 52px; box-sizing: border-box; padding: 9px 14px; border: 1px dashed #8a8a8a; background-color: transparent !important; font: inherit; font-size: 14px;
    line-height: 32px; color: #cfcfcf !important; text-align: left !important;
}
.contact-form .contact-file::file-selector-button { height: 32px; margin: 0 12px 0 0; padding: 0 14px; border: 1px solid #6f6f6f; border-radius: 0; background: #2b2b2b; font: inherit; font-size: 13px; color: #ffffff; cursor: pointer; }
.contact-form .contact_errors { margin-top: 28px; }
.contact-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: 36px; padding-top: 28px; border-top: 1px solid #3a3a3a; }
.contact-checks { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; max-width: 760px; }
.contact-check { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 13px; line-height: 1.5; color: #cfcfcf; cursor: pointer; }
.contact-check input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: #FDEA1B; }
.contact-check input.is-invalid { outline: 2px solid #ff8f85; outline-offset: 1px; }
.contact-check a, .contact-page .contact-check a:hover { color: #ffffff; text-decoration: underline; }
.contact-go { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 10px; }
.contact-send, .contact-send:hover { height: 60px; padding: 0 34px; border: 0; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.contact-send svg { flex-shrink: 0; }
.contact-send:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.contact-send:disabled { opacity: .6; cursor: default; }
.contact-note { font-size: 12px; color: #cfcfcf; }
.contact-sent { padding: 48px 28px; border: 1px solid #3a3a3a; background: #1c1c1c; text-align: center; }
.contact-sent h3 { margin: 0; font-size: 22px; line-height: 1.4; font-weight: 600; color: #ffffff; }
/* the office and its map */
.contact-where-row { display: flex; align-items: stretch; gap: 24px; }
.contact-office { display: flex; flex: 1 1 0; flex-direction: column; gap: 14px; box-sizing: border-box; min-width: 0; padding: 30px 32px 22px; border: 1px solid #e2e2dd; background: #ffffff; color: #111111; }
.contact-office-name { font-size: 18px; line-height: 1.4; font-weight: 700; letter-spacing: .5px; }
.contact-office .contact-line--large .contact-line-value { font-size: 18px; }
.contact-map { display: flex; flex: 2 1 0; min-width: 0; min-height: 340px; }
.contact-map iframe { display: block; flex: 1 1 auto; width: 100%; min-height: 340px; border: 0; background: #e9e9e4; }
.contact-map-link, .contact-page .contact-map-link:hover { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; min-height: 44px; margin-top: auto; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #111111; }
.contact-map-link svg { flex-shrink: 0; transition: transform .2s; }
.contact-map-link:hover svg { transform: translateX(4px); }
.contact-regions-row { display: flex; align-items: center; gap: 56px; margin-top: 20px; }
.contact-regions-map { flex: 1 1 0; min-width: 0; }
.contact-regions-map img { display: block; width: 100%; max-width: 660px; height: auto; margin: 0 auto; }
.contact-regions-list { flex: 1 1 0; min-width: 0; border-bottom: 1px solid #e2e2dd; }
.contact-region { padding: 16px 0; border-top: 1px solid #e2e2dd; cursor: default; }
.contact-region:hover, .contact-region:focus-visible { box-shadow: inset 4px 0 0 #FDEA1B; padding-left: 16px; outline: 0; }
.contact-region-name { font-size: 16px; line-height: 1.4; font-weight: 600; color: #111111; }
.contact-region-text { font-size: 14px; line-height: 1.55; color: #5c5c5c; }

@media (max-width: 1279.98px) {
    .contact-top { padding-bottom: 32px; }
    .contact-ways { flex-direction: row; flex-wrap: wrap; gap: 14px 40px; }
    .contact-body { padding: 0 24px 48px; }
    .contact-steps { gap: 28px; }
    .contact-regions-row { flex-direction: column; align-items: stretch; gap: 24px; }
}
@media (max-width: 1023.98px) {
    /* two parts side by side, the message under them, across */
    .contact-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-step:last-child { grid-column: 1 / -1; }
    .contact-foot { flex-direction: column; align-items: stretch; }
    .contact-go { align-items: stretch; }
    .contact-where-row { flex-direction: column; }
    .contact-office, .contact-map { flex: none; }
}
@media (max-width: 767.98px) {
    .contact-top { padding-bottom: 24px; }
    .contact-ways .contact-line-value { font-size: 16px; }
    .contact-ways .contact-line--large .contact-line-value { font-size: 20px; }
    .contact-body { padding: 0 20px 36px; }
    .contact-steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .contact-step-n { font-size: 52px; }
    .contact-form .contact-input { font-size: 16px; }   /* a phone does not zoom into a field written at 16 px */
    .contact-foot { margin-top: 28px; padding-top: 22px; }
    .contact-office { padding: 24px 20px 16px; }
    .contact-map, .contact-map iframe { min-height: 260px; }
}

/* ---------------------------------------------------------------------------------------------
   The search of the site (system/template/wes/header/search.php, system/lib/js/search.js; the
   results are drawn by search_panel() of system/core/search.php).
   Closed: a magnifier in the top bar, before the globe of the languages. Open, from 1280 px: the
   menu gives its place to the field, beside the logo, and the results come under the bar, over
   the page: the buttons of the groups, the groups on three columns, a line that opens them all.
   Below 1280 px: the yellow bar becomes the field and the results fill the screen, one group
   under the other.
   --------------------------------------------------------------------------------------------- */
.site-search-open, .mobile-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #ffffff; transition: color .15s; }
.site-search-open:hover, .site-search-open:focus-visible { color: #FDEA1B; }
/* the globe of the languages beside it: white too, yellow while the mouse is over it and its list is open. The picture
   (white on nothing) gives the shape, the colour is the element's */
#topnav .menu-globe {
    display: inline-block; width: 28px; height: 28px; margin-top: -6px; vertical-align: middle; background-color: #ffffff; transition: background-color .15s;
    -webkit-mask: url(../img/ico/globe.png) center / contain no-repeat; mask: url(../img/ico/globe.png) center / contain no-repeat;
}
#topnav li.menu-languages:hover .menu-globe, #topnav li.menu-languages:focus-within .menu-globe { background-color: #FDEA1B; }
.site-search-open:focus-visible, .mobile-search-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.mobile-search-toggle { display: none; }

.site-search[hidden] { display: none; }
.site-search {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1200; max-width: 2880px; margin: 0 auto; pointer-events: none;
    font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.35; letter-spacing: 0; text-align: left; color: #111111;
}
.site-search > * { pointer-events: auto; }
.site-search button { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.site-search a, .site-search a:hover { color: inherit; text-decoration: none; }
.site-search mark, .site-search-page mark { padding: 0; background: #FDEA1B; color: #111111; }
.site-search-shade { position: absolute; top: 88px; right: 0; bottom: 0; left: 0; background: rgba(17, 17, 17, .55); }

/* the bar as a field */
.site-search-bar { position: absolute; top: 0; right: 0; left: 319px; z-index: 2; display: flex; align-items: center; gap: 18px; height: 88px; margin: 0; padding: 0 32px 0 40px; background: #111111; color: #ffffff; }
.site-search-glass { display: inline-flex; flex: 0 0 auto; color: #FDEA1B; }
.site-search-bar input {
    flex: 1 1 auto; min-width: 0; height: 52px; margin: 0; padding: 0; border: 0; border-bottom: 2px solid #FDEA1B;
    background-color: transparent !important; color: #ffffff !important; font: 600 26px/1.2 'Montserrat', sans-serif; text-align: left !important;
    outline: 0; box-shadow: none; -webkit-appearance: none; appearance: none;
}
.site-search-bar input::placeholder { color: #9a9a9a; font-weight: 400; opacity: 1; }
.site-search-bar input::-webkit-search-cancel-button, .site-search-bar input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.site-search-esc { flex: 0 0 auto; padding: 3px 10px; border: 1px solid #5c5c5c; font-size: 12px; color: #bdbdbd; }
.site-search-bar button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; }
.site-search-bar button[hidden], .site-search-bar .site-search-back, .site-search-bar .site-search-clear { display: none; }
.site-search-bar button:focus-visible { outline: 2px solid #FDEA1B; outline-offset: -2px; }
.site-search.is-loading .site-search-bar::after {  /* a search on its way: a thin line runs under the field */
    content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #FDEA1B, transparent); background-size: 40% 100%; background-repeat: no-repeat;
    animation: site-search-run 1s linear infinite;
}
@keyframes site-search-run { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* the results, under the bar */
.site-search-results { position: absolute; top: 88px; right: 0; left: 0; z-index: 1; display: flex; flex-direction: column; max-height: calc(100% - 88px); background: #ffffff; box-shadow: 0 18px 48px rgba(0, 0, 0, .25); }
.site-search-results:empty { display: none; }
.site-search-wrap { width: 100%; max-width: 1248px; margin: 0 auto; }
.site-search-chips { flex: 0 0 auto; padding: 0 32px; border-bottom: 1px solid #e2e2dd; }
.site-search-chips .site-search-wrap { display: flex; align-items: center; gap: 10px; min-height: 64px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.site-search .site-search-chip { flex: 0 0 auto; padding: 6px 14px; border: 1px solid #e2e2dd; }
.site-search .site-search-chip:hover { border-color: #111111; }
.site-search .site-search-chip.is-on { border-color: #111111; background: #111111; color: #ffffff; }
.site-search-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px 32px 32px; }
.site-search-body--hint { padding: 16px 32px; }  /* nothing searched yet: a strip with what may be tried */
.site-search-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.site-search-column { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.site-search-column[hidden], .site-search-group[hidden] { display: none; }
.site-search-group { display: flex; flex-direction: column; min-width: 0; }
.site-search-group h2 { margin: 0; padding: 0 0 10px; border-bottom: 2px solid #111111; font-size: 11px; line-height: 1.35; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #5c5c5c; }
.site-search-list { display: flex; flex-direction: column; }
.site-search-item { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 10px; border-top: 1px solid #e2e2dd; }
.site-search-item:first-child { border-top: 0; }
.site-search-item.is-active, .site-search-page .site-search-item:hover { background: #f4f4f1; }
.site-search-item:focus-visible { outline: 2px solid #111111; outline-offset: -2px; }
.site-search-thumb { flex: 0 0 104px; width: 104px; height: 40px; overflow: hidden; background: #f4f4f1; }
.site-search-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-search-thumb--icon { display: inline-flex; align-items: center; justify-content: center; background: #111111; color: #FDEA1B; }
.site-search-thumb--swatch { flex-basis: 40px; width: 40px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.site-search-thumb--swatch .color, .site-search-thumb--swatch .color:hover { float: none; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; font-size: 0; cursor: inherit; background-size: cover; }
.site-search-icon { display: inline-flex; flex: 0 0 auto; }
.site-search-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.site-search-text b { font-weight: 700; overflow-wrap: anywhere; }
.site-search-text span { font-size: 12px; color: #5c5c5c; }
.site-search-group--documents .site-search-item, .site-search-group--parts .site-search-item { gap: 12px; min-height: 48px; padding: 6px 10px; }
.site-search-group--projects .site-search-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 12px; }
.site-search-group--projects .site-search-item { flex-direction: column; align-items: stretch; gap: 6px; min-height: 0; padding: 0; border: 0; font-size: 12px; }
.site-search-group--projects .site-search-item img { display: block; width: 100%; height: 112px; object-fit: cover; background: #f4f4f1; }
.site-search-group--projects .site-search-item.is-active { background: none; outline: 2px solid #111111; outline-offset: 2px; }
.site-search-group--articles .site-search-item, .site-search-group--pages .site-search-item { min-height: 0; padding: 10px; }
.site-search .site-search-more { display: none; align-self: flex-start; padding: 10px 10px 0; font-size: 13px; font-weight: 600; text-decoration: underline; }
.site-search .site-search-more.is-for-wide { display: block; }  /* only where something waits behind it at this width */
.site-search .site-search-group.is-open .site-search-more, .site-search-narrow { display: none; }
.site-search-group:not(.is-open) .is-extra-wide { display: none; }
.site-search-note { margin: 0 0 20px; font-size: 14px; color: #5c5c5c; }
.site-search-none { margin: 0 0 20px; }
.site-search-none p { margin: 0 0 4px; font-size: 14px; color: #5c5c5c; }
.site-search-none b { font-size: 18px; font-weight: 700; color: #111111; }
.site-search-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; max-width: 1248px; margin: 0 auto; font-size: 13px; color: #5c5c5c; }
.site-search .site-search-example, .site-search-page .site-search-example { padding: 6px 14px; border: 1px solid #e2e2dd; background: #ffffff; font-size: 13px; font-weight: 600; color: #111111; text-decoration: none; cursor: pointer; }
.site-search .site-search-example:hover, .site-search-page .site-search-example:hover { border-color: #111111; color: #111111; }
.site-search-chip:focus-visible, .site-search-example:focus-visible, .site-search-more:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
/* one group alone (its button was pressed): everything it has, on three columns */
.site-search-columns.is-single { display: block; }
.site-search-columns.is-single .site-search-list { display: block; column-count: 3; column-gap: 40px; }
.site-search-columns.is-single .site-search-item { break-inside: avoid; }
.site-search-columns.is-single .site-search-item:first-child { border-top: 1px solid #e2e2dd; }
.site-search-columns.is-single .site-search-group--projects .site-search-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.site-search-columns.is-single .site-search-group--projects .site-search-item:first-child { border-top: 0; }
/* the line under the results */
.site-search-foot { flex: 0 0 auto; padding: 0 32px; background: #111111; color: #ffffff; }
.site-search-foot .site-search-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 52px; }
.site-search .site-search-all { display: none; align-items: center; gap: 10px; min-height: 44px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #ffffff; }
.site-search-all svg { color: #FDEA1B; }
.site-search-all:focus-visible { outline: 2px solid #FDEA1B; outline-offset: 2px; }
.site-search-foot.has-more-wide:not(.is-done) .site-search-all { display: inline-flex; }
.site-search-keys { margin-left: auto; font-size: 12px; color: #bdbdbd; }
body.search-open { overflow: hidden; }

/* the magnifier in the top bar: before the globe, which stands in the middle of the last place of the row */
@media (min-width: 1280px) {
    #topnav .nav { padding-right: max(133px, calc(47px + (175 - 1) * ((100vw - 1000px) / (1920 - 1000)))); }
    /* over the place of the globe, which is as wide as an entry of the menu and opens the languages under the mouse */
    #topnav .nav .menu-main-container > ul > li.menu-search { position: absolute; top: 40px; right: 114px; z-index: 3; flex: none; }
    #topnav .nav .menu-main-container > ul > li.menu-search--alone { right: 10px; }
}
@media (min-width: 1280px) and (max-width: 1580px) {
    #topnav .nav .menu-main-container > ul > li.menu-search { right: 97px; }
    #topnav .nav .menu-main-container > ul > li.menu-search--alone { right: 10px; }
}
@media (min-width: 1280px) and (max-width: 1360px) {
    #topnav .nav .menu-main-container > ul > li.menu-search { right: 93px; }
    #topnav .nav .menu-main-container > ul > li.menu-search--alone { right: 10px; }
}

/* a narrow screen: the yellow bar is the field, the results fill the screen */
@media (max-width: 1279.98px) {
    .mobile-search-toggle { display: inline-flex; position: absolute; top: 8px; right: 88px; width: 40px; height: 40px; color: #111111; }
    .mobile-search-toggle--alone { right: 48px; }
    .site-search { background: #ffffff; pointer-events: auto; }
    .site-search-shade { display: none; }
    .site-search-bar { left: 0; gap: 4px; height: 56px; padding: 0 2px 0 4px; background: #FDEA1B; color: #111111; }
    .site-search-glass, .site-search-esc, .site-search-bar .site-search-close { display: none; }
    .site-search-bar .site-search-back, .site-search-bar .site-search-clear { display: inline-flex; }
    .site-search-bar .site-search-clear[hidden] { display: none; }
    .site-search-bar input { height: 40px; border-bottom-color: #111111; color: #111111 !important; font-size: 20px; }
    .site-search-bar input::placeholder { color: #5c5c5c; font-size: 16px; }
    .site-search-bar button:focus-visible { outline-color: #111111; }
    .site-search.is-loading .site-search-bar::after { background-image: linear-gradient(90deg, transparent, #111111, transparent); }
    .site-search-results { top: 56px; bottom: 0; max-height: none; box-shadow: none; }
    .site-search-chips { padding: 0; }
    .site-search-chips .site-search-wrap { gap: 8px; min-height: 0; padding: 12px; overflow-x: auto; scrollbar-width: none; }
    .site-search-chips .site-search-wrap::-webkit-scrollbar { display: none; }
    .site-search .site-search-chip { padding: 8px 14px; }
    .site-search-body, .site-search-body--hint { padding: 0 16px 20px; }
    .site-search-columns { display: flex; flex-direction: column; gap: 22px; padding-top: 18px; }
    .site-search-columns.is-single .site-search-list { column-count: 1; }
    .site-search-columns.is-single .site-search-group--projects .site-search-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .site-search-group h2 { padding-bottom: 8px; }
    .site-search-item { gap: 12px; padding: 8px; }
    .site-search-thumb { flex-basis: 96px; width: 96px; height: 38px; }
    .site-search-thumb--swatch { flex-basis: 38px; width: 38px; }
    .site-search-group--documents .site-search-item, .site-search-group--parts .site-search-item { padding: 6px 8px; }
    .site-search-group--projects .site-search-list { gap: 10px; }
    .site-search .site-search-more { display: none; padding: 10px 8px 0; }
    .site-search .site-search-more.is-for-narrow { display: block; }
    .site-search .site-search-group.is-open .site-search-more { display: none; }
    .site-search-wide { display: none; }
    .site-search-narrow { display: inline; }
    .site-search-group:not(.is-open) .is-extra-wide { display: flex; }
    .site-search-group:not(.is-open) .is-extra-narrow { display: none; }
    .site-search-note, .site-search-none, .site-search-hint { margin-top: 18px; }
    .site-search-foot { padding: 0 16px; }
    .site-search-foot.has-more-wide:not(.is-done) .site-search-all { display: none; }
    .site-search-foot.has-more-narrow:not(.is-done) .site-search-all { display: flex; flex: 1 1 auto; justify-content: space-between; min-height: 52px; }
    .site-search-foot:not(.has-more-narrow), .site-search-foot.is-done { display: none; }
    .site-search-keys { display: none; }
}

/* the search page, for a visitor without scripts: the same groups, everything in view */
.search-page .type-top-row { align-items: flex-end; }
.search-page-form { flex: 0 1 520px; }
.search-page-found { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: #5c5c5c; }
.search-page-found strong { color: #111111; }
.site-search-page { font-size: 14px; line-height: 1.35; color: #111111; }
.site-search-page a { color: inherit; text-decoration: none; }
.site-search-page .site-search-body { padding: 0; overflow: visible; }
.site-search-page .site-search-columns { align-items: start; }
.site-search-page .site-search-item { background: transparent; }
@media (max-width: 1279.98px) {
    .search-page-form { flex: 1 1 100%; }
    .site-search-page .site-search-columns { padding-top: 0; }
    .site-search-page .site-search-group:not(.is-open) .is-extra-narrow { display: flex; }
}

/* a finish of the guide reached from the search (#finisaj-…) stops under the top bar */
.finish-guide tbody[id] { scroll-margin-top: 108px; }
@media (max-width: 1279.98px) {
    .finish-guide tbody[id] { scroll-margin-top: 76px; }
}

/* ---------------------------------------------------------------------------------------------
   The page of a model, "Scena" (produse/partials/model_scene.php, system/lib/js/model.js): a photo
   across the top with the way back, the name and the beginning of the description; under them,
   on white, the rest of the description and the advantages. Beside them a white card that begins
   on the photo: the model in the colour chosen with its points, what the picture shows, the
   finishes as a table with one row open (its colours, its note), the technical sheet. Then the
   project photos, on a dark band. The points of the picture are dots that pulse like a radar;
   the one chosen is yellow, and a click opens its text beside it (the one place it is shown).
   From 1024 px two columns; below, one: the top, the card (over the edge of the photo), the texts.
   --------------------------------------------------------------------------------------------- */
.scene { background: #ffffff; color: #2b2b2b; font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 1.6; letter-spacing: 0; text-align: left; }
.scene [hidden] { display: none !important; }
.scene h1, .scene h2 { margin: 0; font-family: inherit; letter-spacing: 0; text-transform: none; }
.scene p { margin: 0; }
.scene button { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.scene a, .scene a:hover { color: inherit; text-decoration: none; }
.scene-top { position: relative; padding: 88px 32px 56px; }   /* the bar of the site stands over the top of the photo */
/* the offer button is the one of every page: its own size and its black words, not the page's */
.scene section.offer { font-size: 1rem; line-height: 1.5; }
.scene section.offer .link, .scene section.offer .link:hover { color: #000000; }
@media (min-width: 1280px) {
    .scene section.offer { top: 106px; }   /* the tab of the site: right under the bar, above the card of the choices */
}
.scene-photo { position: absolute; top: 0; right: 0; left: 0; height: 608px; background: #111111; }
.scene-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.scene-photo::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, rgba(17, 17, 17, .86) 0%, rgba(17, 17, 17, .62) 55%, rgba(17, 17, 17, .35) 100%); }
.scene-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 560px; grid-template-rows: auto 1fr; column-gap: 64px; align-items: start; }   /* the card is taller than the top: the second row takes what is left */
.scene-intro { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 12px; min-height: 520px; padding: 36px 0 48px; color: #ffffff; }
.scene-head { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; }
.scene nav.model-breadcrumb { margin-bottom: auto; padding: 0 0 24px; font-size: 13px; letter-spacing: 1px; color: #ffffff; }
.scene .model-breadcrumb a, .scene .model-breadcrumb a:hover, .scene .model-breadcrumb [aria-current] { color: #ffffff; }
.scene .model-breadcrumb span[aria-hidden] { color: #bdbdbd; }
.scene-title { display: flex; flex-direction: column; gap: 12px; font-weight: 700; }
.scene-title .type-eyebrow { line-height: 1.5; color: #FDEA1B; }
/* the name is the whole title where the line over it is not part of it (a type that is its own model, an accessory set):
   written with the scene before it, the rule holds for a name that is an <h1> as for one that is a <span> */
.scene .scene-name { font-size: 56px; line-height: 1.05; font-weight: 700; letter-spacing: -1px; color: #ffffff; overflow-wrap: anywhere; }
.scene-lead { max-width: 560px; font-size: 17px; line-height: 1.6; color: #ffffff; }
.scene-lead b, .scene-lead strong, .scene-lead .font-weight-bold { font-weight: 600; }

/* the rest of the description and the advantages, on white under the photo */
.scene-about { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 14px; padding-top: 48px; }
.scene-about h2 { font-size: 30px; line-height: 1.2; font-weight: 600; color: #111111; }
.scene-about b, .scene-about strong, .scene-about .font-weight-bold { font-weight: 600; color: #111111; }
.scene .scene-read { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; min-height: 32px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #111111; }
.scene-read svg { transition: transform .2s; }
.scene-read[aria-expanded="true"] svg { transform: rotate(180deg); }
.scene-about .type-eyebrow { margin-top: 26px; line-height: 1.5; color: #5c5c5c; }
.scene-about .type-eyebrow:first-child { margin-top: 0; }
.scene-benefits { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.scene-benefits li { position: relative; padding-left: 22px; }
.scene-benefits li::before { content: ""; position: absolute; top: 8px; left: 0; width: 8px; height: 8px; background: #FDEA1B; outline: 1px solid #111111; }
/* the technical data of the model, a name and its value on each line, as a technical sheet lists them (model_data.php);
   its title is a heading of the page that looks like the small title of the advantages; then the pages that go with
   the model */
.scene-about h2.scene-data-title { font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #5c5c5c; }
.scene-data { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-bottom: 1px solid #e2e2dd; }
.scene-data > div { display: grid; grid-template-columns: minmax(150px, 36%) minmax(0, 1fr); column-gap: 20px; padding: 10px 0; border-top: 1px solid #e2e2dd; }
.scene-data dt { margin: 0; font-weight: 400; color: #5c5c5c; }
.scene-data dd { margin: 0; font-weight: 600; color: #111111; }
.scene-also { display: flex; flex-wrap: wrap; gap: 6px 32px; margin-top: 12px; }
.scene .scene-also a { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #111111; }
.scene-also a svg { flex: 0 0 auto; transition: transform .2s; }
.scene-also a:hover svg { transform: translateX(4px); }
.scene-also a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.scene-also a:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }

/* the card: the model, what its picture shows, the finishes and their colours, the technical sheet */
.scene-card { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; margin-top: 96px; padding: 28px; background: #ffffff; border: 1px solid #e2e2dd; box-shadow: 0 18px 48px rgba(0, 0, 0, .25); color: #111111; }
.scene-card button:focus-visible, .scene-file:focus-visible, .scene-read:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }

/* the model: its picture with the points, its 3D model, its project photos */
.scene-stage { position: relative; aspect-ratio: 700 / 515; background: #ffffff; }
.scene-view { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.scene-picture { display: block; width: 100%; height: 100%; object-fit: contain; }
/* a ground behind the picture of the model (the walls of the house behind a gutter system): the picture, on white, is
   multiplied over it, so the ground shows around the model and the model keeps its colours where the ground is white */
.scene-view--ground { isolation: isolate; background: #ffffff; }
.scene-ground { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.scene-view--ground .scene-picture { position: relative; mix-blend-mode: multiply; }
/* the pictures of the points (the drawing with the piece of a point set off), laid over the picture of the model while
   a point is pointed at (system/lib/js/model.js). They come in and go softly with the model's own picture; between
   themselves they change at once: two layers, of which the one that is ready takes the place of the other in one step */
.scene-overs { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .12s; }
.scene-over { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: contain; visibility: hidden; }
.scene-over.is-top { visibility: visible; }
.scene-picture { transition: opacity .12s; }
.scene-view.is-over .scene-overs { opacity: 1; }
.scene-view.is-over .scene-picture { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .scene-overs, .scene-picture { transition: none; }
}
.scene-view model-viewer { display: block; width: 100%; height: 100%; background: #ffffff; }
/* until the script of the 3D viewer has come (it is asked for when the view is first opened) */
.scene-view model-viewer:not(:defined) { background: #ffffff url(../img/preloader/01.gif) center / 56px auto no-repeat; }
.scene-slides-row { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.scene-slides-row::-webkit-scrollbar { display: none; }
.scene-slides-row img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.scene .scene-slides-go { position: absolute; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -22px; background: rgba(17, 17, 17, .7); color: #ffffff; }
.scene-slides-go--back { left: 0; }
.scene-slides-go--on { right: 0; }
.scene .scene-slides-go:focus-visible { outline: 2px solid #FDEA1B; outline-offset: -4px; }
/* at the lower left of the picture, the sign of a magnifier, as on the photo of a component (.scene-pop-zoom): a button that opens what the picture shows over the whole screen
   (over the picture, under its points and under the pop-up of a point) */
.scene .scene-zoom { position: absolute; left: 0; bottom: 0; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(17, 17, 17, .78); color: #ffffff; cursor: zoom-in; transition: background-color .15s, color .15s; }
.scene .scene-zoom:hover, .scene .scene-zoom:focus-visible { background: #FDEA1B; color: #111111; }
.scene .scene-zoom:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
.scene-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; border: 1px solid #111111; }
.scene-tabs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scene .scene-tab { min-height: 44px; border-left: 1px solid #111111; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-align: center; text-transform: uppercase; color: #111111; transition: background-color .15s; }
.scene .scene-tab:first-child { border-left: 0; }
.scene .scene-tab:hover { background: #f4f4f1; }
.scene .scene-tab[aria-selected="true"] { background: #111111; color: #ffffff; }
.scene .scene-tab:focus-visible { outline-offset: -4px; }
.scene .scene-tab[aria-selected="true"]:focus-visible { outline-color: #FDEA1B; }

/* what the points say, one under the other, under the picture: for a visitor without scripts alone (a <noscript>), who has no pop-up */
.scene-said { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; color: #3a3a3a; }
.scene-said li { display: flex; gap: 12px; }
.scene-said b { flex: 0 0 auto; font-weight: 700; color: #111111; }

/* the material, for a model made of several sheets */
.scene-label { margin-top: 22px; padding-bottom: 8px; font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #5c5c5c; }
.scene-sheets { display: flex; flex-wrap: wrap; gap: 8px; }   /* each as wide as its words, the row filled: four in a row on a wide card, two on a phone */
.scene .scene-sheet { flex: 1 1 auto; min-height: 42px; padding: 6px 9px; border: 1px solid #cfcfca; font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center; white-space: nowrap; color: #111111; transition: background-color .15s, border-color .15s; }
.scene .scene-sheet:hover { border-color: #111111; }
.scene .scene-sheet[aria-pressed="true"] { border-color: #111111; background: #111111; color: #ffffff; }

/* the finishes: a table of which one row is open, with its colours and its note */
.scene-table { margin-top: 22px; }
.scene-table-head { display: flex; align-items: flex-end; padding-bottom: 8px; font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #5c5c5c; }
.scene-table-head span:first-child, .scene-finish > span:first-child { flex: 1 1 auto; min-width: 0; }
.scene-table-head span:nth-child(2), .scene-years { flex: 0 0 110px; width: 110px; }
.scene-table-head span:nth-child(3), .scene-has { flex: 0 0 150px; width: 150px; text-align: right; }
.scene-row { border-top: 1px solid #e2e2dd; }
.scene .scene-finish { display: flex; align-items: center; width: 100%; min-height: 52px; color: #111111; }
.scene-finish > span:first-child { padding-right: 12px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.scene-years { font-size: 13px; }
.scene-has { display: flex; justify-content: flex-end; font-size: 13px; }
.scene-minis { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.scene-mini { display: block; flex: 0 0 20px; width: 20px; height: 20px; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .12); }
.scene-rest { margin-left: 2px; font-size: 12px; font-weight: 600; color: #5c5c5c; }
.scene-count { display: none; }
.scene-row:not(.is-open) .scene-finish:hover > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
/* the row that is open: a grey band from one edge of the card to the other */
.scene-row.is-open { margin: 0 -28px; padding: 0 28px 16px; background: #f4f4f1; }
.scene-row.is-open .scene-finish { cursor: default; }
.scene-row.is-open .scene-finish > span:first-child { font-weight: 700; }
.scene-row.is-open .scene-years { font-weight: 600; }
.scene-row.is-open .scene-minis { display: none; }
.scene-row.is-open .scene-count { display: block; }
.scene-colours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 10px; }
.scene .scene-colour { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.3; color: #111111; overflow-wrap: anywhere; }
.scene-swatch { display: block; height: 48px; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .12); }
.scene-swatch .color, .scene-swatch .color:hover, .scene-mini .color, .scene-mini .color:hover { float: none; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; font-size: 0; line-height: 0; text-shadow: none; cursor: inherit; background-size: cover; background-position: center; }
.scene-colour[aria-pressed="true"] .scene-swatch { outline: 3px solid #FDEA1B; outline-offset: 2px; }
.scene-colour[aria-pressed="true"] > span:last-child { font-weight: 700; }
.scene .scene-note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: #3a3a3a; }
.scene .scene-file { display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid #111111; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #111111; }
.scene-table + .scene-file { margin-top: 0; }
.scene-file span { flex: 1 1 auto; }
.scene-file .scene-file-kind { flex: 0 0 auto; font-weight: 500; letter-spacing: 0; text-transform: none; color: #5c5c5c; }
.scene .scene-file:hover span:not(.scene-file-kind) { text-decoration: underline; text-underline-offset: 3px; }

/* the points: a dot with its number, rings that leave it like those of a radar; the one chosen is yellow */
.scene .scene-point { position: absolute; z-index: 1; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; }
.scene-point span { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: 50%; background: #111111; color: #ffffff; font-size: 13px; font-weight: 700; line-height: 30px; text-align: center; transition: background-color .15s, color .15s; }
.scene-point::before, .scene-point::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background: #FDEA1B; opacity: 0; animation: scene-radar 2.4s ease-out infinite; animation-delay: var(--scene-wait, 0s); }
.scene-point::after { animation-delay: calc(var(--scene-wait, 0s) + 1.2s); }
@keyframes scene-radar { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(2.7); opacity: 0; } }
.scene-point:hover span, .scene-point:focus-visible span, .scene-point.is-on span, .scene-point[aria-expanded="true"] span { background: #FDEA1B; color: #111111; box-shadow: 0 0 0 5px rgba(253, 234, 27, .4); }
.scene-point.is-on, .scene-point[aria-expanded="true"] { z-index: 2; }
.scene-point.is-on::before, .scene-point.is-on::after, .scene-point[aria-expanded="true"]::before, .scene-point[aria-expanded="true"]::after { animation: none; }
.scene .scene-point:focus-visible { outline: 2px solid #111111; outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
    .scene-point::before, .scene-point::after { animation: none; }
    .scene-point span { box-shadow: 0 0 0 5px rgba(253, 234, 27, .4); }
}
/* the text of a point, beside it */
.scene-pop { position: absolute; z-index: 5; width: min(300px, calc(100% - 16px)); padding: 14px 44px 16px 16px; background: #111111; border-top: 3px solid #FDEA1B; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); font-size: 14px; line-height: 1.5; color: #ffffff; }
.scene .scene-pop-close { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #ffffff; }
.scene .scene-pop-close:focus-visible { outline: 2px solid #FDEA1B; outline-offset: -4px; }
/* the picture of a part: a button that opens it over the whole screen, with the sign of a magnifier at its lower left */
.scene .scene-pop-figure { position: relative; display: block; width: 100%; margin-bottom: 10px; background: #ffffff; cursor: zoom-in; }
.scene-pop-picture { display: block; width: 100%; height: 130px; object-fit: contain; background: #ffffff; }
.scene-pop-zoom { position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(17, 17, 17, .78); color: #ffffff; transition: background-color .15s, color .15s; }
.scene .scene-pop-figure:hover .scene-pop-zoom, .scene .scene-pop-figure:focus-visible .scene-pop-zoom { background: #FDEA1B; color: #111111; }
.scene .scene-pop-figure:focus-visible { outline: 2px solid #FDEA1B; outline-offset: 2px; }
.scene-pop-words { display: flex; flex-direction: column; gap: 4px; }
.scene-pop-number { font-size: 26px; line-height: 1; letter-spacing: -1px; -webkit-text-stroke: 1.2px #FDEA1B; }
.scene-pop-title { font-weight: 600; }
.scene-pop-text { color: #cfcfcf; }
.scene-pop-title:empty, .scene-pop-text:empty { display: none; }
.scene-pop-title:empty + .scene-pop-text { color: #ffffff; }

/* the project photos, on a dark band */
.scene-projects { padding: 48px 32px; background: #111111; }
.scene-projects-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.scene-projects-head .type-eyebrow { line-height: 1.5; color: #FDEA1B; }
.scene-projects-head h2 { font-size: 30px; line-height: 1.2; font-weight: 600; color: #ffffff; }
.scene-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.scene-tiles img { display: block; width: 100%; height: 202px; object-fit: cover; background: #1c1c1c; }
.scene-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scene-tiles--3 img { height: 270px; }
.scene-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scene-tiles--2 img { height: 340px; }
.scene-tiles--1 { grid-template-columns: minmax(0, 1fr); }
.scene-tiles--1 img { height: 420px; }
.scene-tiles a:focus-visible { outline: 2px solid #FDEA1B; outline-offset: 2px; }

@media (max-width: 1279.98px) {
    .scene-top { padding-top: 0; }   /* the compact bar stands above the page, not over it */
    .scene-photo { height: 520px; }
    .scene-grid { grid-template-columns: minmax(0, 1fr) minmax(420px, 46%); column-gap: 40px; }
    .scene-card { margin-top: 72px; padding: 22px; }
    .scene-row.is-open { margin: 0 -22px; padding: 0 22px 16px; }
    .scene-table-head span:nth-child(2), .scene-years { flex-basis: 84px; width: 84px; }
    .scene-table-head span:nth-child(3), .scene-has { flex-basis: 130px; width: 130px; }
    .scene .scene-name { font-size: 44px; }
}
@media (max-width: 1023.98px) {
    /* one column: the top with the photo, the card over its edge, the texts */
    .scene-top { padding: 0 0 40px; }
    .scene-photo { height: 330px; }
    .scene-photo img { object-position: 30% center; }
    .scene-photo::after { background: linear-gradient(180deg, rgba(17, 17, 17, .72) 0%, rgba(17, 17, 17, .5) 45%, rgba(17, 17, 17, .82) 100%); }
    .scene-grid { display: flex; flex-direction: column; align-items: stretch; }   /* each part as wide as the screen (the row of the name too: the offer button stands at its end) */
    .scene-intro, .scene-about { display: contents; }   /* their parts take their places one by one: the name, the card, "Despre …", the description from its beginning */
    .scene-head { order: 1; flex: none; gap: 10px; min-height: 330px; padding: 20px 20px 70px; color: #ffffff; }
    .scene nav.model-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; padding-bottom: 16px; font-size: 12px; letter-spacing: .5px; }
    .scene .model-breadcrumb span[aria-hidden] { margin: 0; }
    .scene-title { gap: 10px; }
    .scene .scene-name { font-size: 34px; line-height: 1.08; letter-spacing: -.5px; }
    .scene-card { order: 2; width: auto; max-width: 640px; margin: -48px 12px 0; padding: 18px; box-shadow: 0 14px 36px rgba(0, 0, 0, .22); }
    .scene-tabs { margin-top: 14px; }
    .scene .scene-tab { letter-spacing: 1.5px; }
    .scene-said { margin-top: 12px; }
    .scene-label, .scene-table { margin-top: 18px; }
    .scene-label, .scene-table-head { padding-bottom: 6px; font-size: 10px; letter-spacing: 1.5px; }
    .scene-table-head span:nth-child(2), .scene-years { flex-basis: 70px; width: 70px; }
    .scene-table-head span:nth-child(3), .scene-has { flex-basis: 112px; width: 112px; }
    .scene-minis { gap: 5px; }
    .scene-mini { flex-basis: 18px; width: 18px; height: 18px; }
    .scene-row.is-open { margin: 0 -18px; padding: 0 18px 14px; }
    .scene-colours { gap: 10px 8px; }
    .scene .scene-colour { font-size: 11px; }
    .scene-swatch { height: 44px; }
    .scene-colour[aria-pressed="true"] .scene-swatch { outline-offset: 1px; }
    .scene .scene-note { margin-top: 10px; }
    .scene .scene-point { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
    .scene-point span { line-height: 28px; }
    .scene .scene-about > * { order: 5; margin: 12px 20px 0; }
    .scene .scene-about > h2 { order: 3; margin-top: 36px; font-size: 24px; }
    .scene .scene-lead { order: 4; max-width: none; margin: 12px 20px 0; font-size: 15px; color: #2b2b2b; }
    .scene .scene-lead--first { margin-top: 36px; }
    .scene-lead b, .scene-lead strong, .scene-lead .font-weight-bold { color: #111111; }
    .scene .scene-about > .scene-read { min-height: 44px; margin-top: 0; }
    .scene .scene-about > .type-eyebrow { margin-top: 20px; }
    .scene .scene-about > .type-eyebrow.scene-first { margin-top: 36px; }
    .scene .scene-about > h2.scene-data-title { order: 5; font-size: 12px; }   /* a small title among the texts, not the title "Despre …" above them */
    .scene .scene-also a { min-height: 44px; }
    .scene-projects { padding: 40px 0 40px 20px; }
    .scene-projects-head { gap: 8px; margin-bottom: 20px; padding-right: 20px; }
    .scene-projects-head h2 { font-size: 24px; }
    .scene-tiles, .scene-tiles--3, .scene-tiles--2, .scene-tiles--1 { display: flex; gap: 10px; overflow-x: auto; padding-right: 20px; scroll-snap-type: x proximity; scrollbar-width: none; }
    .scene-tiles::-webkit-scrollbar { display: none; }
    .scene-tiles a { flex: 0 0 auto; scroll-snap-align: start; }
    .scene-tiles img, .scene-tiles--3 img, .scene-tiles--2 img, .scene-tiles--1 img { width: 280px; height: 187px; }
}
@media (min-width: 641px) and (max-width: 1023.98px) {
    .scene-card { align-self: center; width: calc(100% - 24px); }
}
@media (max-width: 480px) {
    .scene .scene-colour { font-size: 10px; }   /* five colours in a row on a phone: a name like "Weathered" stays whole */
    /* a phone: the name and its value still on one line, so that the list stays short; a long value (the colours) under its name, with the whole width */
    .scene-data > div { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); column-gap: 14px; }
    .scene-data > div.is-long { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}
@media (max-width: 767.98px) {
    /* a phone: the offer button stands beside the type, above the name (one button on the page, as everywhere) */
    .scene-title-row { position: relative; }
    .scene-title .type-eyebrow { min-height: 18px; padding-right: 150px; }
    .scene section.offer {
        position: absolute; top: -13px; right: -20px; bottom: auto; z-index: 2; display: flex; align-items: center; width: auto; height: 44px; padding: 0 14px 0 16px;
        border: 0; border-radius: 6px 0 0 6px; background: #FDEA1B; box-shadow: none; line-height: 1.2; letter-spacing: .5px; white-space: nowrap;
    }
    .scene section.offer, .scene section.offer * { font-size: 12px !important; }
}

/* A gutter system: its drawing has many pieces, so from 1024 px its card takes the width of the page, as the card of an
   accessory set does: the drawing large at the left (711 px in a page of 1248), with what it shows under it; the
   finishes and the technical sheet at its right; the advantages under the card, in columns. */
@media (min-width: 1024px) {
    .scene--gutter .scene-photo { height: 500px; }
    .scene--gutter .scene-grid { display: block; }
    .scene--gutter .scene-intro { min-height: 300px; padding-bottom: 40px; }
    .scene--gutter .scene-card { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 40px; align-items: start; margin-top: 0; }
    .scene--gutter .scene-stage { grid-column: 1; grid-row: 1; }
    .scene--gutter .scene-tabs { grid-column: 1; grid-row: 2; }
    .scene--gutter .scene-card > noscript { grid-column: 1; grid-row: 3; }
    .scene--gutter .scene-choices { grid-column: 2; grid-row: 1 / span 3; }
    .scene--gutter .scene-choices > :first-child { margin-top: 0; }
    .scene--gutter .scene-row.is-open { margin: 0 -28px 0 -16px; padding: 0 28px 16px 16px; }   /* its grey band: from a little before the column to the edge of the card */
    .scene--gutter .scene-about { padding-top: 40px; }
    .scene--gutter .scene-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 40px; }
    .scene--gutter .scene-data { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }   /* the text is as wide as the page here */
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .scene--gutter .scene-card { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 28px; }
    .scene--gutter .scene-row.is-open { margin: 0 -22px 0 -12px; padding: 0 22px 16px 12px; }
    .scene--gutter .scene-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A picture with many points (more than eight: a gutter system, an accessory set) on a phone: it takes its card from
   edge to edge, and its points are small and still, without the rings, so that none covers another or the pieces */
@media (max-width: 575.98px) {
    .scene-stage--many { margin: -18px -18px 0; }
    .scene .scene-stage--many .scene-point { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
    .scene-stage--many .scene-point span { font-size: 10px; line-height: 18px; box-shadow: none; }
    .scene-stage--many .scene-point::before, .scene-stage--many .scene-point::after { content: none; animation: none; }
    .scene-stage--many .scene-point:hover span, .scene-stage--many .scene-point:focus-visible span, .scene-stage--many .scene-point.is-on span, .scene-stage--many .scene-point[aria-expanded="true"] span { box-shadow: 0 0 0 3px rgba(253, 234, 27, .45); }
    .scene .scene-stage--many .scene-point:focus-visible { outline-offset: 3px; }
}

/* An accessory set (produse/partials/accessory_set.php) in the same look: the top, a white card with the drawing of the
   set and its points, and every accessory as a tile in a light band (a click opens its picture in the photo viewer). */
.scene--accessories .scene-top { padding-bottom: 0; }
.scene--accessories .scene-grid { display: block; }
.scene--accessories .scene-photo { height: 500px; }
.scene--accessories .scene-intro { min-height: 300px; padding-bottom: 40px; }
.scene--accessories .scene-card { margin-top: 0; }
.scene-parts { margin-top: 56px; padding: 48px 32px; background: #f4f4f1; color: #2b2b2b; }
.scene-parts .type-eyebrow { margin-bottom: 20px; line-height: 1.5; color: #5c5c5c; }
.scene-parts ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.scene-part { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 16px; background: #ffffff; border: 1px solid #e2e2dd; font-size: 14px; line-height: 1.4; color: #111111; }
.scene-part b { position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; border-radius: 50%; background: #FDEA1B; font-size: 13px; line-height: 30px; text-align: center; }
.scene-part img { display: block; width: 100%; height: 150px; object-fit: contain; }
.scene-part span { font-weight: 600; }
.scene a.scene-part:hover, .scene a.scene-part:focus-visible { border-color: #111111; outline: 0; }
.scene--gutter .scene-parts { margin-top: 0; }   /* the components of a gutter system: the part above ends with its own space */
/* under the tiles of an accessory set: what each accessory is for, two columns of short texts */
.scene .scene-parts-title { margin: 44px 0 20px; font-size: 26px; line-height: 1.2; font-weight: 700; color: #111111; }
.scene-parts-words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; }
.scene-parts-words div { padding: 16px 0; border-top: 1px solid #deded8; }
.scene-parts-words dt { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 16px; line-height: 1.3; font-weight: 700; color: #111111; }
.scene-parts-words dt b { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #FDEA1B; font-size: 13px; line-height: 30px; text-align: center; }
.scene-parts-words dd { margin: 0; font-size: 15px; line-height: 1.6; color: #3a3a3a; }
@media (max-width: 1279.98px) {
    .scene-parts ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
    .scene--accessories .scene-grid { display: flex; }
    .scene--accessories .scene-photo { height: 330px; }
    .scene--accessories .scene-card { margin: -48px 12px 0; max-width: none; align-self: stretch; width: auto; }
    .scene-parts { margin-top: 40px; padding: 32px 20px; }
    .scene-parts ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 640px) {
    .scene-parts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .scene-part { padding: 12px; font-size: 13px; }
    .scene .scene-parts-title { margin: 32px 0 14px; font-size: 22px; }
    .scene-parts-words { grid-template-columns: minmax(0, 1fr); }
    .scene-part img { height: 110px; }
}