/* The open site doorsdesk.com (templates/site): on top of app.css, which gives the fonts, the colours and the header. */

.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- header: the brand, then the languages and the way in (no menu: the owner, 14.10 and 25.10) ---------- */
.site .site-header__inner { flex-wrap: wrap; }
/* the languages stand apart from the way in: on the right on a computer, by the logo on a phone (the owner, 14.10) */
.site-header__inner > .brand { order: 0; }
.site-header__inner > .site-nav__lang { order: 2; margin-left: auto; }
.site-header__inner > .site-nav { order: 3; }
.site-header__inner > .site-nav__lang > a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14px; padding: 6px 2px; }
.site-header__inner > .site-nav__lang > a:hover { color: var(--copper-dark); }
.site-header__inner > .site-nav__lang > a[aria-current="true"] { color: var(--copper-dark); border-bottom: 2px solid var(--copper); }
/* the list of 🌐: its own look (the pair above must not reach it: its 2px padding glued the names to the edge, the owner 17.10) */
.site-header__inner > .site-nav__lang .lang-menu li a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14px; }
.site-header__inner > .site-nav__lang .lang-menu li a:hover { color: var(--copper-dark); }
.site-header__inner > .site-nav__lang .lang-menu li a[aria-current="true"] { color: var(--copper-dark); }

.site-button {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--radius);
    background: var(--copper-dark);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.site-button:hover { background: var(--copper-darker); color: #fff; }
.site-nav a.site-button { color: #fff; padding: 8px 16px; }

/* ---------- breadcrumbs: Home › Companies › Factories › the page ---------- */
.site-crumbs { padding-top: 16px; font-size: 13px; color: var(--muted); }
.site-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.site-crumbs li + li::before { content: "›"; margin-right: 4px; color: #b9b4aa; }
.site-crumbs a { color: var(--muted); text-decoration: none; }
.site-crumbs a:hover { color: var(--copper-dark); text-decoration: underline; }
.site-crumbs span { color: var(--ink-2); }

/* ---------- page ---------- */
.site-main { max-width: 1120px; }
.site-muted { color: var(--muted); }

.site-hero { padding: 28px 0 40px; text-align: center; }
/* the headline in capitals, without a full stop (the owner, 10.10): the text itself stays as written, for Google and screen readers */
.site-hero h1 { font-size: 40px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
.site-hero__line { font-size: 18px; font-weight: 600; color: var(--copper-dark); letter-spacing: 0.02em; margin-bottom: 28px; }

.site-search { display: flex; gap: 8px; max-width: 640px; margin: 0 auto; }
.site-search input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    font: inherit;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}
.site-search input:focus { outline: 2px solid var(--copper); outline-offset: 1px; }
.site-search button {
    padding: 12px 24px;
    font: inherit;
    font-weight: 700;
    color: #fff;
    background: var(--ink);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}
.site-search button:hover { background: var(--ink-2); }

.site-block { margin: 0 0 40px; }
.site-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }

/* eight sections of Companies: 4 in a row, 2 on a phone */
.site-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* a low button: the name and the number in one row (the owner, 10.10: room for a carousel as on the portal, later) */
/* the icon of the section first; on hover the tile lifts, a copper bar runs along its top (the owner, 18.10) */
.site-tiles a {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    height: 100%;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.site-tiles a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.site-tiles a:hover { border-color: var(--copper); color: var(--copper-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(42, 46, 52, .10); }
.site-tiles a:hover::before { transform: scaleX(1); }
.site-tiles strong { margin-left: auto; font-size: 18px; font-weight: 800; color: var(--copper-dark); }
.site-tiles h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; color: inherit; }
.site-tiles .dd-ico { flex: none; width: 34px; height: 34px; color: var(--copper-dark); }
@media (prefers-reduced-motion: reduce) { .site-tiles a, .site-tiles a::before { transition: none; } .site-tiles a:hover { transform: none; } }

/* the numbers of the hub under the search (App\Site\SiteStats) */
.site-stats { display: flex; justify-content: center; max-width: 860px; margin: 8px auto 36px; padding: 0 16px; }
.site-stats div { flex: 1; text-align: center; padding: 4px 12px; border-left: 1px solid var(--line); }
.site-stats div:first-child { border-left: 0; }
.site-stats b { display: block; font-size: 34px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.site-stats span { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 640px) { .site-stats { flex-wrap: wrap; } .site-stats div { flex-basis: 50%; border-left: 0; padding: 10px 4px; } .site-stats b { font-size: 28px; } }

.site-career { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.site-career__card { padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.site-career__card h3 { margin: 0 0 4px; font-size: 18px; }

/* under Careers: the two buttons of snapdoors.app (the owner, 21.10: «take the plates of snapdoors.app») - pistachio for SnapDoors,
   pistachio on black for Pro as its dark block there, «Google Play · soon» under each, and the site under both */
.site-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; text-align: center; }
.site-apps__button { display: block; padding: 16px 20px; border-radius: 6px; background: #b8cc7a; color: #000; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); font-size: 15px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.site-apps__button:hover { filter: brightness(1.06); color: #000; }
.site-apps__button--pro { padding: 14px 18px; background: #181818; border: 2px solid #b8cc7a; color: #b8cc7a; }
.site-apps__button--pro:hover { background: #b8cc7a; color: #000; filter: none; }
.site-apps__note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.site-apps__gp { flex: none; }
/* snapdoors.app itself: an orange plate (the owner, 21.10) - the orange of the SnapDoors mark (#FDC030 -> #FC8403), black as its buttons */
.site-apps__site { grid-column: 1 / -1; justify-self: center; box-sizing: border-box; width: calc(50% - 6px); padding: 16px 20px; border-radius: 6px; background: #fc9a06; color: #000; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); font-size: 15px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }   /* the type of the two buttons above, as wide as one of them (the owner, 21.10) */
.site-apps__site:hover { filter: brightness(1.06); color: #000; }
@media (max-width: 640px) { .site-apps { grid-template-columns: 1fr; } .site-apps__site { width: 100%; } }

/* ---------- Companies: the list, the search, the sections as chips ---------- */
.site-list { padding-top: 28px; }
.site-search--list { margin: 0 0 16px; max-width: none; }
.site-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.site-chips a { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.site-chips a span { color: var(--muted); font-weight: 500; margin-left: 2px; }
.site-chips a:hover { border-color: var(--copper); }
.site-chips a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.site-chips a[aria-current="page"] span { color: #d8d4cc; }
.site-companies { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.site-companies li { padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
/* the circle of the company before its name (the owner, 17.10) */
.site-companies__item { display: flex; gap: 14px; align-items: flex-start; }
.site-companies__item > div { min-width: 0; }
.site-company__head { display: flex; align-items: center; gap: 16px; }
.site-company__head h1 { margin: 0; }
.site-companies__name { font-size: 18px; font-weight: 800; color: var(--ink); text-decoration: none; }
.site-companies__name:hover { color: var(--copper-dark); }
.site-companies__kind { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.site-companies__brands { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.site-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.site-empty p { margin: 0; }

/* ---------- Careers: the vacancies ---------- */
.site-vacancies h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.site-vacancy__facts { font-weight: 600; color: var(--ink-2); }
.site-vacancy__apply { margin-top: 28px; }

/* ---------- Blog: a publication and the list ---------- */
.blog-article__header { display: block; width: 100%; height: auto; aspect-ratio: 32 / 9; object-fit: cover; border-radius: var(--radius); background: #eee; }
.blog-article__company { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; font-weight: 700; color: var(--ink-2); }
.blog-article__company img { width: 96px; height: 96px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.blog-article h1 { font-size: 32px; line-height: 1.2; margin: 0 0 16px; }
.blog-article__block { font-size: 17px; line-height: 1.7; margin: 0 0 18px; }
.blog-article__block h2 { font-size: 22px; margin: 24px 0 8px; }
.blog-article__block h3 { font-size: 18px; margin: 20px 0 6px; }
.blog-article__block ul, .blog-article__block ol { padding-left: 22px; }
.blog-article__block p { margin: 0; }   /* lines of the text evenly spaced, as in the editor (the owner, 10.10) */
/* a picture block: the photo at its width (% of the column), left or right with the text flowing around it, or alone in the centre */
.blog-photo { display: flow-root; }
.blog-photo__img { display: block; width: var(--blog-photo-size, 35%); height: auto; border-radius: 10px; background: #eee; }
.blog-photo--left .blog-photo__img { float: left; margin: 4px 20px 10px 0; }
.blog-photo--right .blog-photo__img { float: right; margin: 4px 0 10px 20px; }
.blog-photo--center .blog-photo__img { margin: 0 auto 12px; }
.blog-photo > p:first-of-type { margin-top: 0; }
.blog-photo--square-corners .blog-photo__img { border-radius: 0; }   /* «Rounded corners» unticked (the owner, 10.10) */
/* a phone: the text still flows around it, the photo never narrower than 40% of the screen (10-25% would be an icon) */
@media (max-width: 640px) { .blog-photo__img { width: max(var(--blog-photo-size, 35%), 40%); } .blog-photo--left .blog-photo__img { margin-right: 12px; } .blog-photo--right .blog-photo__img { margin-left: 12px; } }
/* a video block (SITE-SPEC §4а): the cover 9:16 with ▶; the player in its place (a computer) or in a window over the page (a phone) */
.blog-video { position: relative; overflow: hidden; aspect-ratio: 9 / 16; cursor: pointer; }
.blog-video img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blog-video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; min-height: 0; padding: 0 0 0 5px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 26px; line-height: 64px; cursor: pointer; }
.blog-video__play:hover { background: rgba(0, 0, 0, .78); }
.blog-video--locked { cursor: default; }
.blog-video__play:disabled { opacity: .55; cursor: default; }
.blog-video-layer { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .88); }
.blog-video-layer__frame { position: relative; height: min(92vh, 177.7vw); aspect-ratio: 9 / 16; }
.blog-video-layer__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blog-video-layer__close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; font-size: 20px; }
.blog-video-open { overflow: hidden; }
.blog-post__meta a { font-weight: 600; }
.blog-views { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.blog-views .blog-eye { width: 18px; height: 18px; }
.blog-cards { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.blog-cards li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.blog-cards a { display: block; color: var(--ink); text-decoration: none; }
.blog-cards img { display: block; width: 100%; height: auto; aspect-ratio: 32 / 9; object-fit: cover; }
.blog-cards h2 { font-size: 18px; margin: 12px 16px 4px; }
.blog-cards p { margin: 0 16px 10px; font-size: 14px; }
@media (max-width: 760px) { .blog-cards { grid-template-columns: 1fr; } .blog-article h1 { font-size: 26px; } }

/* ---------- the WIKI (the help, App\Site\Help): the list and a question ---------- */
.site-wiki { max-width: 820px; margin: 0 auto; padding-top: 28px; }
.site-articles { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.site-articles li { padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.site-articles h2, .site-articles h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.site-articles a { font-size: 18px; font-weight: 800; color: var(--ink); text-decoration: none; }
.site-articles a:hover { color: var(--copper-dark); }
.site-articles p { margin: 4px 0 0; color: var(--ink-2); }
.site-articles time { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.site-articles--home { grid-template-columns: repeat(2, 1fr); margin-top: 12px; }
.site-wiki-soon { margin-top: 12px; }
.site-help .site-search { margin: 16px 0 20px; }
.site-help__block { margin: 0 0 28px; }
.site-help__block h2 { margin: 0 0 10px; font-size: 20px; }
.site-help__list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.site-help__list li + li { border-top: 1px solid var(--line); }
.site-help__list a { display: block; padding: 12px 16px; color: var(--ink); font-weight: 600; text-decoration: none; }
.site-help__list a:hover { color: var(--copper-dark); }
.site-help__none { padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.site-help .site-related__chips { margin: 0 0 24px; }
.site-career--companies { margin-top: 12px; }
.site-article { max-width: 760px; margin: 0 auto; padding: 28px 0 16px; }
.site-article h1 { font-size: 34px; }
.site-article__back a { text-decoration: none; font-weight: 600; }
.site-article__lead { font-size: 19px; color: var(--ink-2); }
.site-article__body { font-size: 17px; line-height: 1.7; }
.site-article__body h2 { margin: 32px 0 10px; }
.site-article__body h3 { margin: 24px 0 8px; font-size: 18px; }
.site-article__body ul { margin: 0 0 12px; padding-left: 22px; }

/* ---------- the page of a company doorsdesk.com/{slug}/ ---------- */
.site-company { max-width: 760px; margin: 0 auto; padding: 28px 0 16px; }
.site-company h1 { font-size: 34px; margin-bottom: 8px; }
.site-company h2 { margin-top: 32px; }
.site-company__kind { color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.site-company__kind a { color: var(--copper-dark); text-decoration: none; }
.site-company__own { padding: 10px 14px; border-left: 3px solid var(--copper); background: #faf8f4; }
.site-brands { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.site-brands li { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); font-weight: 700; }
.site-brands__logo { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: #fff; color: var(--copper); font-weight: 800; font-size: 22px; }
.site-brands__logo img { width: 100%; height: 100%; object-fit: contain; }
.site-keywords { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.site-keywords li { padding: 4px 12px; border-radius: 999px; background: #ece7df; color: var(--ink-2); font-size: 14px; }
.site-contacts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; }
.site-contacts dt { color: var(--muted); }
.site-contacts dd { margin: 0; font-weight: 600; }
.site-contacts-closed { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.site-contacts-closed p { flex-basis: 100%; margin: 0; }

.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    padding: 24px 16px;
    border-top: 3px solid var(--copper);   /* graphite with a copper line (the owner, 18.10) */
    background: #24272c;
    color: #a9adb4;
    font-size: 14px;
}
.site-footer a { color: #d9dce0; }
.site-footer a:hover { color: #e3bb8a; }
/* the blocks at the bottom of a page: more of the section, other publications... (App\Site\Related, the owner, 11.10) */
.site-related { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.site-related h2 { margin: 0 0 12px; font-size: 18px; }
.site-related__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 24px; }
.site-related__list a { font-weight: 600; color: var(--ink); text-decoration: none; }
.site-related__list a:hover { color: var(--copper-dark); }
.site-related__list span { display: block; color: var(--muted); font-size: 13px; }
.site-related__all { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--copper-dark); text-decoration: none; }
.site-related__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.site-related__chips a { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; font-size: 14px; }
.site-related__chips a:hover { border-color: var(--copper); color: var(--copper-dark); }
/* the columns of links: the sections, the useful pages, for partners (the owner, 11.10) */
/* always the columns in one row, narrowing (5 since «Our projects», the owner 21.10) (the owner, 18.10: on an open Galaxy Fold, ~800 px, the 4th fell under the others) */
/* each column as wide as its links, the gaps between them equal (the owner, 21.10: a strange gap between the 3rd and the 4th) */
.site-footer__cols { flex-basis: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, max-content)); justify-content: space-between; gap: 16px clamp(16px, 4vw, 48px); padding: 0 max(0px, calc((100% - 1080px) / 2)) 16px; margin-bottom: 8px;   /* full width keeps the row of its own; the links within 1080 px */ border-bottom: 1px solid var(--line); }
.site-footer__cols strong, .site-footer__cols strong a { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; }
.site-footer__cols ul { list-style: none; margin: 0; padding: 0; }
.site-footer__cols li { margin: 0 0 6px; }
.site-footer__cols li a { color: var(--ink-2); text-decoration: none; }
.site-footer__cols a:hover { color: var(--copper-dark); }
/* a tablet or an open Fold (the owner, 21.10): «Our projects» leaves the row of columns for a line of its own under them */
@media (max-width: 900px) {
    .site-footer__cols { grid-template-columns: repeat(4, minmax(0, max-content)); }
    .site-footer__projects { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 20px; }
    .site-footer__projects strong { margin: 0; }
    .site-footer__projects ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
    .site-footer__projects li { margin: 0; }
}
@media (max-width: 640px) { .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 16px 24px; } }
.site-footer__langs { flex-basis: 100%; text-align: center; }   /* all the languages, a line of their own */
.site-footer__credit { flex-basis: 100%; text-align: center; font-size: 12px; }
.site-footer .site-footer__cols { border-color: #3a3e45; }
.site-footer .site-footer__cols strong, .site-footer .site-footer__cols strong a { color: #fff; }
.site-footer .site-footer__cols li a { color: #c4c7cc; }
.site-footer .site-footer__cols a:hover { color: #e3bb8a; }
.site-footer a.site-footer__credit { color: #8a8e95; }

/* our pages in the social networks (Trello SOCIAL MEDIA, the owner 21.10: variants 1 and 2): the bookmark by the languages and in the
   phone menu opens a panel of round icons, as «Follow SnapDoors» of snapdoors.app; the footer has them in a row (site/_social.html.twig) */
.site-social { position: relative; }
.site-social summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-2); cursor: pointer; }
.site-social summary::-webkit-details-marker { display: none; }
.site-social summary:hover, .site-social[open] summary { border-color: var(--copper); color: var(--copper-dark); background: #f6f0e6; }
.site-social__panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; width: max-content; box-sizing: border-box; padding: 14px 16px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(42, 46, 52, .16); }
.site-social__panel strong { display: block; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.site-social__panel nav { display: grid; grid-template-columns: repeat(8, 40px); gap: 6px; }   /* all eight in a row on a computer */
.site-social__panel a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); }
.site-social__panel a:hover { border-color: var(--copper); color: var(--copper-dark); }
.site-header__inner > .site-social { order: 2; }
.site-social-row { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid #3a3e45; }
.site-social-row strong { color: #fff; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.site-social-row nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.site-footer .site-social-row a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #4a4e55; border-radius: 50%; color: #d9dce0; }
.site-footer .site-social-row a:hover { border-color: #e3bb8a; color: #e3bb8a; }

/* ---------- contact: the e-mail, on the Chinese pages the WeChat QR ---------- */
.site-contact { text-align: center; }
.site-contact__mail { font-size: 20px; font-weight: 700; }
.site-contact__form { max-width: 560px; margin: 24px auto 8px; padding: 20px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.site-contact__form p { margin: 0 0 14px; }
.site-contact__form label { display: block; margin: 0 0 4px; font-weight: 600; font-size: 14px; }
.site-contact__form input, .site-contact__form textarea { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.site-contact__form input:focus, .site-contact__form textarea:focus { outline: 2px solid var(--copper); outline-offset: 1px; }
.site-contact__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.site-contact__form button { border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: 10px 24px; }
.site-contact__errors { margin: 0 0 14px; padding: 10px 14px 10px 30px; color: var(--error); background: var(--error-bg); border-radius: var(--radius); font-weight: 600; font-size: 14px; }
/* the trap for bots stays off the screen (not display:none: some bots skip hidden fields) */
.site-contact__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.site-contact__sent { max-width: 560px; margin: 24px auto; }
.site-contact__or { margin: 24px 0 0; color: var(--muted); }
@media (max-width: 640px) { .site-contact__pair { grid-template-columns: 1fr; } }
.site-contact__wechat { margin: 24px auto 0; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.site-contact__wechat figcaption { font-weight: 600; color: var(--ink-2); }
/* the QR stands on its own row under the line of the footer, in the middle */
.site-footer__wechat { flex-basis: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; text-decoration: none; color: var(--ink-2); font-size: 13px; }
.site-footer__wechat img { background: #fff; border-radius: 6px; }

@media (max-width: 760px) {
    /* a phone (the owner, 22.10): the logo, the languages and the bookmark on one line, the way in on one line under them; the header
       scrolls away with the page (it took a quarter of the screen), and «Companies» is left to the bottom menu */
    .site .site-header__inner { gap: 6px 10px; padding: 8px 16px; }   /* not the --edge of the advertising strip: the logo and the languages need the width */
    .site-header .brand { gap: 8px; }
    .site-header .brand img { height: 32px; }
    .site-header .brand__name { font-size: 19px; }
    .site-header__inner > .site-nav__lang { order: 1; margin-left: auto; }
    .site-header__inner > .site-social--header { order: 1; }
    .site-social summary { width: 36px; height: 36px; }
    /* the panel under the header across the phone, 4 icons a row */
    .site-social--header .site-social__panel { position: fixed; left: 16px; right: 16px; top: auto; width: auto; margin-top: 10px; }
    .site-social__panel nav { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; gap: 12px 6px; }
    .site-social__panel a { width: 48px; height: 48px; }
    /* the button and «Sign in» side by side; signed in - «My cabinet» and the circle */
    .site-header__inner > .site-nav { order: 3; width: 100%; justify-content: center; gap: 6px 16px; }
    .site-nav .site-button--add { order: -1; padding: 8px 18px; font-size: 15px; }
    .site-hero { padding: 12px 0 28px; }
    .site-hero h1 { font-size: 28px; }
    .site-hero__line { font-size: 15px; }
    .site-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }   /* a long name wraps, the page does not run off the phone */
    /* the icon and the number on top, the name under them across the tile: a word is not cut in two (the owner, 22.10) */
    .site-tiles a { display: grid; grid-template-columns: auto 1fr; align-items: center; padding: 10px 12px; gap: 6px 8px; }
    .site-tiles .dd-ico { width: 28px; height: 28px; }
    .site-tiles strong { grid-row: 1; grid-column: 2; justify-self: end; margin-left: 0; }
    .site-tiles h3 { grid-column: 1 / -1; min-width: 0; font-size: 15px; overflow-wrap: break-word; }
    .site-career { grid-template-columns: 1fr; }
    .site-companies { grid-template-columns: 1fr; }
    .site-articles--home { grid-template-columns: 1fr; }
}

/* the messengers of a company as QR codes (templates/site/company.html.twig, App\Site\Messengers): scan and write */
.site-messengers { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.site-messengers__item, .site-messengers__item a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--ink); text-decoration: none; font-size: 14px; }
.site-messengers__item span:not(.site-messengers__qr) { color: var(--muted); font-size: 13px; word-break: break-all; }
.site-messengers__qr { display: block; width: 140px; height: 140px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.site-messengers__qr svg, .site-messengers__qr img { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-messengers__item a:hover strong { color: var(--copper-dark); }

/* the shops on the map (SITE-SPEC §10): «Retail» of «Companies» and the page of a shop; OpenStreetMap through Leaflet */
.retail-map { height: 420px; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 8px; z-index: 0; }
.retail-card { font-size: 14px; line-height: 1.45; min-width: 180px; }
.retail-card__name { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 2px; }
.retail-card__muted { color: var(--muted); }
.retail-card__brands { margin-top: 4px; font-weight: 600; }

.retail-map--small { height: 300px; }
/* the names of the shops over their pins (assets/retail-map.js); hidden while the whole country is in view */
.leaflet-tooltip.retail-label { padding: 2px 8px; border: 1px solid var(--copper, #b07a3c); border-radius: 999px; background: #fff; color: #2b2b2b; font-weight: 700; font-size: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); white-space: nowrap; }
.leaflet-tooltip-top.retail-label::before { border-top-color: var(--copper, #b07a3c); }
.retail-map--far .leaflet-tooltip.retail-label { display: none; }
.site-retail { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.site-retail li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 640px) { .retail-map { height: 320px; } .retail-map--small { height: 260px; } }
.site-retail__photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; margin-bottom: 8px; }
.retail-card__photo { display: block; width: 220px; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; margin-bottom: 6px; }

/* the stars under a blog publication (templates/blog/post.html.twig, assets/rating.js): 5..1 in the page, shown 1..5 */
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 4px 0 18px; }
.rating__form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.rating__stars { display: inline-flex; flex-direction: row-reverse; }
.rating__star { border: 0; background: none; padding: 0 2px; font-size: 24px; line-height: 1; color: var(--line); cursor: pointer; }
.rating__star.is-on, .rating__star:hover, .rating__star:hover ~ .rating__star, .rating__star:focus-visible, .rating__star:focus-visible ~ .rating__star { color: var(--copper); }
.rating__avg { color: var(--ink); font-weight: 600; white-space: nowrap; }
.rating__thanks { color: var(--ok); }
/* the brands and the shops by city (the owner, 13.10: internal links, step 2) */
.site-brands--links li { padding: 0; }
.site-brands--links a { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; color: var(--ink); text-decoration: none; }
.site-brands--links a:hover { color: var(--copper-dark); }
.site-brands li > a, .site-companies__brands a, .site-retail__brands a { color: inherit; }
.site-brand__head { display: flex; align-items: center; gap: 20px; margin: 0 0 12px; }
.site-brand__head h1 { margin: 0 0 4px; }
.site-brand__logo { width: 96px; height: 96px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.site-related__chips a span { color: var(--muted); margin-left: 2px; }
.site-shops { margin-bottom: 16px; }

/* the menu at the bottom of a phone (the owner, 14.10): it comes up when the visitor reaches the footer (layout.html.twig) */
.site-bottom-menu { display: none; }
@media (max-width: 760px) {
    .site-bottom-menu {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; justify-content: space-around; align-items: center; gap: 4px;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); transform: translateY(110%); visibility: hidden; transition: transform .2s ease, visibility .2s;
    }
    .site-bottom-menu.is-shown { transform: none; visibility: visible; }
    /* icons (the owner, 14.10), each with its small name under it (22.10) */
    .site-bottom-menu > a, .site-bottom-menu__add { display: flex; align-items: center; justify-content: center; width: 52px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; box-shadow: none; color: var(--ink); cursor: pointer; }
    .site-bottom-menu > a[aria-current="page"] { color: var(--copper-dark); background: #f6f0e6; }
    /* a small name under each icon (the owner, 22.10: the icons alone said nothing) */
    .site-bottom-menu > a { flex-direction: column; gap: 2px; width: 64px; height: auto; padding: 4px 0; text-decoration: none; }
    .site-bottom-menu__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 1.2; font-weight: 600; }
    .site-bottom-menu__add { color: #fff; background: var(--copper-dark); border-radius: 50%; width: 46px; height: 46px; min-height: 0; }
    .site-bottom-menu__add svg { width: 28px; height: 28px; stroke-width: 2.4; transition: transform .2s ease; }
    .site-bottom-menu__add[aria-expanded="true"] svg { transform: rotate(45deg); }
    /* «+» opens the button over the menu, in the middle */
    .site-bottom-menu__pop { position: absolute; left: 16px; right: 16px; bottom: calc(100% + 12px); display: flex; justify-content: center; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); }
    .site-bottom-menu__pop[hidden] { display: none; }
    /* the bookmark of our social pages in the menu: an icon as the others, its panel over the menu as the one of «+» */
    .site-social--menu { position: static; }
    .site-social--menu summary { flex-direction: column; gap: 2px; width: 64px; height: auto; padding: 4px 0; border: 0; border-radius: 12px; background: none; color: var(--ink); }
    .site-social--menu[open] summary, .site-social--menu summary:hover { background: #f6f0e6; color: var(--copper-dark); }
    .site-social--menu .site-social__panel { position: absolute; left: 16px; right: 16px; top: auto; bottom: calc(100% + 12px); width: auto; }
    .site-bottom-menu__pop .site-button--add { padding: 12px 22px; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
    .site-footer { padding-bottom: 88px; }   /* the end of the footer does not hide under the menu */
    /* our social pages in the footer: all of them in one row (the owner, 22.10) */
    .site-social-row nav { flex-wrap: nowrap; gap: 6px; width: 100%; }
    .site-footer .site-social-row a { flex: 0 1 36px; width: auto; min-width: 26px; height: auto; aspect-ratio: 1; }   /* they shrink to the width of the phone */
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .site-bottom-menu { transition: none; } }

/* «+ Add your company» (the owner, 14.10): a white round plus inside the button */
.site-button--add { display: inline-flex; align-items: center; gap: 8px; }
.site-button__plus { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.site-button__plus::before, .site-button__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; border-radius: 1px; background: var(--copper-dark); transform: translate(-50%, -50%); }
.site-button__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.site-button--add:hover .site-button__plus::before, .site-button--add:hover .site-button__plus::after { background: var(--copper-darker); }

/* Careers, the CVs (SITE-SPEC §1, step 2): the contacts are not in the page - a blurred stand-in; the form and the state of one's CV */
.cv-contacts__blur { filter: blur(5px); user-select: none; font-weight: 600; letter-spacing: .02em; }
.cv-form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .cv-form .pair { grid-template-columns: 1fr; } }
.cv-form h2 { margin: 28px 0 4px; font-size: 18px; }
.cv-state { padding: 12px 16px; margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.cv-state p { margin: 0 0 10px; }
.cv-state__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cv-state__actions form { margin: 0; }
.cv-form { max-width: 760px; }
.cv-form input:not([type=checkbox]), .cv-form select, .cv-form textarea { width: 100%; max-width: none; box-sizing: border-box; }
.cv-form input[type=number] { max-width: 180px; }

/* «Where to buy» (SITE-SPEC §10): a brand, near me or a city; the shops in a list, the nearest first, and on the map */
.where__form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px 16px; align-items: end; margin: 16px 0 24px; }
.where__form > div { margin: 0; }
.where__field input { max-width: none; }
.where__buttons { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) { .where__form { grid-template-columns: 1fr; } }
.where__list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.where__shop { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.where__shop h2 { margin: 0 0 4px; font-size: 18px; }
.where__shop p { margin: 0 0 4px; }
.where__brands { font-size: 13px; color: var(--muted); }
.where__actions { display: flex; flex-direction: column; gap: 8px; flex: none; align-self: center; }
.site-button--light { background: var(--card); color: var(--copper-dark); border: 1px solid var(--copper-dark); }
@media (max-width: 640px) { .where__shop { flex-direction: column; } .where__actions { flex-direction: row; align-self: stretch; } .where__actions a { flex: 1; text-align: center; } }

/* «Персональная VIP презентация» (the owner 25.10, App\Controller\VipController): the form of «Contact us» with the gold of the VIP room */
.site-vip__kick { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: #9a7340; }
.site-vip select { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.site-vip select:focus { outline: 2px solid var(--copper); outline-offset: 1px; }
.site-contact__form .site-vip__gold { background: linear-gradient(115deg, #9a7340 0%, #e6c890 22%, #fff1cf 34%, #c9a36a 48%, #8d6534 66%, #e2c389 84%, #a57b45 100%);
    background-size: 200% 100%; color: #21180c; letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 28px; transition: background-position 0.8s; }
.site-contact__form .site-vip__gold:hover { background-position: 100% 0; color: #21180c; }