@layer layout {
  /* ================================================================ Header
     Goodyear pattern: utility row + main row. The utility row scrolls away,
     the main row sticks. Over the home hero it starts transparent. */
  .site-header {
    position: sticky;
    top: calc(var(--utility-h) * -1);
    z-index: var(--z-header);
    color: var(--navy);
  }

  .site-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    height: 100%;
  }

  .site-header__utility {
    height: var(--utility-h);
    background: var(--surface-2);
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.25rem;
    overflow: hidden;
  }

  /* Stays on the right when the office link is absent (office switched off or deleted). */
  .utility-group {
    display: flex;
    align-items: center;
    gap: var(--space-l);
    margin-inline-start: auto;
  }

  .utility-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    text-decoration: none;
  }

  .utility-link .icon {
    width: 1.05rem;
    height: 1.05rem;
  }

  .utility-link:hover span {
    text-decoration: underline;
  }

  .lang-switch {
    display: flex;
    gap: 0.125rem;
  }

  .lang-switch a {
    display: inline-grid;
    place-items: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding-inline: 0.375rem;
    border-radius: var(--r-xs);
    text-decoration: none;
    letter-spacing: 0.02em;
    opacity: 0.72;
    transition: opacity var(--dur-fast) ease;
  }

  .lang-switch a:hover {
    opacity: 1;
  }

  .lang-switch a[aria-current] {
    opacity: 1;
    box-shadow: inset 0 -2px 0 currentColor;
    border-radius: 0;
  }

  .site-header__main {
    height: var(--nav-h);
    background: var(--surface);
    box-shadow: 0 1px 0 var(--line);
    transition:
      background-color var(--dur-base) ease,
      box-shadow var(--dur-base) ease,
      color var(--dur-base) ease;
  }

  .site-logo {
    display: block;
    flex: none;
    color: var(--navy);
    transition: color var(--dur-base) ease;
  }

  .site-logo .logo {
    width: clamp(7.5rem, 5.8rem + 5vw, 11rem);
    height: auto;
  }

  .site-nav {
    margin-left: clamp(var(--space-m), 3vw, var(--space-2xl));
    margin-right: auto;
  }

  .site-nav ul {
    display: flex;
    gap: var(--space-l);
    padding: 0;
    list-style: none;
  }

  .site-nav a {
    position: relative;
    display: inline-block;
    padding-block: 0.5rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: var(--ls-caps);
  }

  .site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.1rem;
    height: 3px;
    border-radius: 2px;
    background: var(--nav-accent, var(--blue));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-base) var(--ease-out);
  }

  .site-nav a:hover::after,
  .site-nav a[aria-current]::after {
    transform: scaleX(1);
  }

  .site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  .site-header__finder {
    margin-right: var(--space-2xs);
  }

  .site-header__finder .icon {
    width: 1.3em;
    height: 1.3em;
  }

  .site-header__menu-btn {
    display: none;
  }

  /* Overlay variant: transparent over the hero until the main row sticks */
  .site-header[data-variant="overlay"] {
    margin-bottom: calc((var(--utility-h) + var(--nav-h)) * -1);
  }

  .site-header[data-variant="overlay"]:not([data-stuck]) {
    color: #fff;
    --nav-accent: var(--yellow);
  }

  .site-header[data-variant="overlay"]::before {
    content: "";
    position: absolute;
    inset: 0 0 -3rem;
    z-index: -1;
    background: linear-gradient(180deg, rgb(6 18 46 / 0.78), rgb(6 18 46 / 0));
    pointer-events: none;
    transition: opacity var(--dur-base) ease;
  }

  .site-header[data-variant="overlay"][data-stuck]::before {
    opacity: 0;
  }

  .site-header[data-variant="overlay"]:not([data-stuck]) .site-header__utility,
  .site-header[data-variant="overlay"]:not([data-stuck]) .site-header__main {
    background: transparent;
    box-shadow: none;
  }

  .site-header[data-variant="overlay"]:not([data-stuck]) .site-logo {
    color: #fede01;
  }

  .site-header[data-variant="overlay"]:not([data-stuck]) .site-header__finder {
    --btn-bg: var(--yellow);
    --btn-fg: var(--navy);
    --btn-bg-hover: var(--yellow-hover);
  }

  .site-header[data-variant="overlay"]:not([data-stuck]) :focus-visible {
    outline-color: var(--yellow);
  }

  /* The menu button over the hero photo: white lines disappeared into the lights of the pit lane
     photo (client feedback), so it gets the brand yellow ground with navy lines. */
  .site-header[data-variant="overlay"]:not([data-stuck]) .site-header__menu-btn {
    background: var(--yellow);
    color: var(--navy);
  }

  @media (hover: hover) and (pointer: fine) {
    .site-header[data-variant="overlay"]:not([data-stuck]) .site-header__menu-btn:hover {
      background: var(--yellow-hover);
    }
  }

  .site-header[data-stuck] .site-header__main {
    box-shadow: var(--shadow-header);
  }

  @media (max-width: 64rem) {
    .site-header__utility,
    .site-nav {
      display: none;
    }

    .site-header__menu-btn {
      display: inline-grid;
    }

    .site-header__finder {
      margin-right: 0;
    }
  }

  @media (max-width: 30rem) {
    .site-header__finder {
      width: 2.75rem;
      min-height: 2.75rem;
      padding: 0;
      border-radius: var(--r-pill);
    }

    .site-header__finder-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .site-header__actions {
      gap: 0;
    }
  }

  /* ================================================================ Mobile menu */
  .menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sheet);
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
    width: min(26rem, 100vw);
    /* The same gutter as .container, so the logo inside lands exactly where the header's logo
       was. It used to be --space-m, and opening the menu shifted the logo sideways. */
    padding: 0 var(--gutter) calc(var(--space-l) + env(safe-area-inset-bottom));
    overflow-y: auto;
    background: var(--navy);
    color: #fff;
    transform: translateX(100%);
    transition: transform var(--dur-panel) var(--ease-drawer);
  }

  /* On a phone it is the page, not a panel over it (client request). A 26rem panel on a
     430px phone left a sliver of the page down one side, which reads as a drawer half-open.
     Tablets keep the panel. */
  @media (max-width: 36rem) {
    .menu-panel {
      left: 0;
      width: 100vw;
    }
  }

  .menu-panel[data-open] {
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .menu-panel {
      transform: none;
      opacity: 0;
      transition: opacity var(--dur-base) ease;
    }

    .menu-panel[data-open] {
      opacity: 1;
    }
  }

  /* Exactly the header's nav row, so the logo and the close button sit on the line the logo
     and the burger were on a moment ago and nothing jumps when the menu opens. */
  .menu-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-h);
    /* Out to the panel's edge, cancelling the gutter, so the close button lines up with the
       burger it replaced rather than sitting a gutter further in. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }

  .site-logo--menu,
  .site-logo--footer {
    color: #fede01;
  }

  .menu-panel__nav ul {
    display: grid;
    gap: var(--space-2xs);
    padding: 0;
    list-style: none;
  }

  .menu-panel__nav a {
    display: block;
    padding-block: 0.25rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem);
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: var(--ls-caps);
  }

  .menu-panel__nav a[aria-current] {
    color: var(--yellow);
  }

  .menu-panel__contacts {
    display: grid;
    gap: var(--space-xs);
    padding-top: var(--space-m);
    border-top: 1px solid rgb(255 255 255 / 0.14);
  }

  .menu-panel__contact {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 2.75rem;
    font-weight: 600;
    text-decoration: none;
  }

  .menu-panel__contact .icon {
    color: var(--yellow);
  }

  .lang-switch--menu {
    margin-top: auto;
    gap: var(--space-2xs);
  }

  /* No outline round the other languages: the desktop switcher has none (owner, 2026-09-28). */
  .lang-switch--menu a {
    padding-inline: var(--space-xs);
    border-radius: var(--r-s);
    opacity: 1;
    font-size: var(--fs-small);
    font-weight: 600;
  }

  .lang-switch--menu a[aria-current] {
    background: #fff;
    color: var(--navy);
    box-shadow: none;
    border-radius: var(--r-s);
  }

  /* ================================================================ Finder panel
     Goodyear's "Find tires" panel: drops from the top edge over a dimmed page. */
  .finder {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-finder);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    transform: translateY(-100%);
    transition: transform var(--dur-panel) var(--ease-drawer);
  }

  .finder[data-open] {
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .finder {
      transform: none;
      opacity: 0;
      transition: opacity var(--dur-base) ease;
    }

    .finder[data-open] {
      opacity: 1;
    }
  }

  .finder__inner {
    position: relative;
    padding-bottom: var(--space-xl);
  }

  .finder__top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-s);
    min-height: var(--nav-h);
  }

  .finder__logo {
    color: var(--navy);
  }

  .finder__logo .logo {
    width: clamp(6.5rem, 5rem + 4vw, 9.5rem);
    height: auto;
  }

  .finder__close {
    justify-self: end;
    color: var(--navy);
  }

  .finder__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    gap: var(--space-xl);
    align-items: start;
    padding-top: var(--space-m);
  }

  /* Both tab panels share one grid cell, so switching tabs never changes the panel height. */
  .finder__panel {
    grid-area: 1 / 1;
    min-width: 0;
  }

  .finder__panel:not([data-active]) {
    visibility: hidden;
  }

  /* Goodyear's finder is set in PT Sans Pro, sentence case: 32px title, 20px field text. */
  .finder__title {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    line-height: 1.25;
  }

  .finder__help {
    margin-top: 0.25rem;
    font-size: var(--fs-small);
    color: var(--ink-2);
  }

  .finder__steps {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)) auto;
    gap: var(--space-s);
    align-items: end;
    margin-top: var(--space-m);
  }

  .finder__steps--size {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    max-width: 52rem;
  }

  .finder-step {
    position: relative;
    min-width: 0;
  }

  .finder-step__control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label chevron"
      "value chevron";
    align-items: center;
    column-gap: var(--space-2xs);
    width: 100%;
    min-height: 3.25rem;
    padding: 0.25rem 0.25rem 0.375rem;
    border-bottom: 2px solid var(--navy);
    text-align: left;
    color: var(--navy);
    transition:
      background-color var(--dur-fast) ease,
      color var(--dur-fast) ease,
      border-color var(--dur-fast) ease,
      border-radius var(--dur-fast) ease;
  }

  .finder-step__label {
    grid-area: label;
    font-size: var(--fs-xs);
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1rem;
    text-transform: uppercase;
  }

  .finder-step__value {
    grid-area: value;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--ink-3);
  }

  .finder-step[data-done] .finder-step__value {
    color: var(--navy);
  }

  .finder-step__chevron {
    grid-area: chevron;
    width: 1.35rem;
    height: 1.35rem;
    transition: transform var(--dur-base) var(--ease-out);
  }

  .finder-step__control[aria-expanded="true"] .finder-step__chevron {
    transform: rotate(180deg);
  }

  .finder-step__control:hover {
    background: var(--surface-2);
  }

  /* Locked steps are solid navy blocks, like Goodyear's Make / Model / Trim */
  .finder-step[data-locked] .finder-step__control {
    grid-template-areas: "value chevron";
    grid-template-rows: auto;
    justify-items: center;
    border-bottom-color: transparent;
    border-radius: var(--r-s);
    background: var(--navy);
    color: #fff;
    cursor: not-allowed;
  }

  .finder-step[data-locked] .finder-step__label,
  .finder-step[data-locked] .finder-step__chevron {
    display: none;
  }

  .finder-step[data-locked] .finder-step__value {
    grid-column: 1 / -1;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
  }

  .finder__submit {
    min-height: 3.25rem;
    min-width: 3.25rem;
    padding-inline: 1rem;
  }

  .finder__submit .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .finder__submit-label {
    display: none;
  }

  /* The list is exactly as wide as its field. */
  .finder-pop {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    right: 0;
    z-index: 2;
    border-radius: var(--r-s);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    transform-origin: top center;
    transition:
      opacity var(--dur-fast) ease,
      transform var(--dur-fast) var(--ease-out);
    @starting-style {
      opacity: 0;
      transform: translateY(-4px);
    }
  }

  .finder-pop__search {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin: var(--space-2xs);
    padding-inline: var(--space-xs);
    border-radius: var(--r-s);
    background: var(--surface-2);
  }

  .finder-pop__search .icon {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--ink-3);
  }

  .finder-pop__search input {
    flex: 1;
    min-width: 0;
    height: 2.5rem;
    border: 0;
    background: transparent;
    font-size: 1rem;
  }

  .finder-pop__search input:focus {
    outline: none;
  }

  .finder-pop__search:focus-within {
    box-shadow: inset 0 0 0 2px var(--blue);
  }

  .finder-pop__list {
    max-height: min(18rem, 50dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 0 var(--space-2xs) var(--space-2xs);
    list-style: none;
  }

  .finder-pop__list[data-columns] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
    gap: 0.125rem;
  }

  .finder-pop__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
    min-height: 2.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--r-s);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
  }

  .finder-pop__option[data-active],
  .finder-pop__option:hover {
    background: var(--blue-soft);
  }

  /* Waiting for a step's list. Same row height as the real options, so the popover does not
     resize when they arrive. */
  .finder-pop__option--skel {
    cursor: default;
  }

  .finder-pop__option--skel:hover {
    background: none;
  }

  .finder-pop__option[aria-selected="true"] {
    font-weight: 700;
    color: var(--blue-press);
  }

  .finder-pop__option small {
    font-size: var(--fs-xs);
    color: var(--ink-3);
    font-weight: 600;
  }

  /* Rim options copy goodyear.com: the rim as the main line, the tyre size under it. */
  .finder-pop__lines {
    display: grid;
    gap: 0.0625rem;
    min-width: 0;
    padding-block: 0.125rem;
  }

  .finder-pop__main {
    font-weight: 600;
    line-height: 1.3;
  }

  .finder-pop__sub {
    font-size: var(--fs-small);
    font-weight: 400;
    line-height: 1.3;
    color: var(--ink-2);
  }

  .finder-pop__option[aria-selected="true"] .finder-pop__main {
    font-weight: 700;
  }

  .finder-pop__option[aria-selected="true"] .finder-pop__sub {
    color: inherit;
  }

  .finder-pop__group {
    padding: 0.5rem 0.625rem 0.25rem;
    font-size: var(--fs-xs);
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink-3);
    grid-column: 1 / -1;
  }

  .finder-pop__empty {
    padding: var(--space-s);
    color: var(--ink-2);
  }

  .finder__alt {
    margin-top: var(--space-m);
    font-size: var(--fs-small);
    color: var(--ink-2);
  }

  .finder__alt .link {
    font-size: inherit;
  }

  .finder__recent {
    margin-top: var(--space-l);
  }

  .finder__recent-label {
    font-size: var(--fs-small);
    font-weight: 700;
  }

  .finder__recent-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-top: var(--space-2xs);
    padding: 0;
    list-style: none;
  }

  .finder__recent-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--r-s);
    box-shadow: inset 0 0 0 2px var(--line-2);
    font-weight: 600;
    text-decoration: none;
    font-size: var(--fs-small);
  }

  .finder__recent-list a:hover {
    box-shadow: inset 0 0 0 2px var(--navy);
  }

  .finder__art {
    grid-area: 1 / 2;
    align-self: center;
    margin-block: calc(var(--space-xl) * -1);
    pointer-events: none;
  }

  .finder__art img {
    width: 100%;
    height: auto;
    transform: rotate(-12deg) translateX(8%);
  }

  @media (max-width: 72rem) {
    .finder__body {
      grid-template-columns: 1fr;
    }

    .finder__art {
      display: none;
    }
  }

  @media (max-width: 56rem) {
    /* Tall enough to need scrolling, and it scrolls down only.
       `overflow-y: auto` on its own is not enough: when one axis is set to anything other than
       visible, the other computes from visible to auto, so asking for a vertical scroll
       quietly granted a horizontal one as well. Anything a pixel too wide then became a
       sideways drag — at 320px that was the close button, twelve pixels out. Both axes are
       named here so neither is decided for us.
       And no bar: it is a panel that covers the screen, not a document, and a thin grey rail
       down the side of it is the browser's furniture rather than ours (owner, 2026-09-19).
       scrollbar-width handles Firefox and Chrome 121+; the pseudo-element covers older
       WebKit. Hiding it does not stop it scrolling, by wheel, finger or keyboard. */
    .finder {
      max-height: 100dvh;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: none;
    }

    .finder::-webkit-scrollbar {
      display: none;
    }

    .finder__top {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .finder__logo {
      display: none;
    }

    .finder__tabs {
      justify-self: start;
      /* So the 1fr track is allowed to shrink rather than being held open by two labels that
         refuse to wrap. Without it the close button is pushed off the edge. */
      min-width: 0;
    }

    .finder__steps,
    .finder__steps--size {
      grid-template-columns: 1fr;
      gap: var(--space-xs);
    }

    /* The panel scrolls here, and a scrolling box cuts off whatever is drawn inside it, whatever
       its z-index: a list reaching past the panel's lower edge lost its last options (owner,
       2026-09-28). Fixed to the screen instead, it floats over the page as it does on a desktop,
       and finder.js keeps it under its field and inside the screen. */
    .finder-pop {
      position: fixed;
      top: calc(var(--pop-top, 0px) + 0.375rem);
      right: auto;
      left: var(--pop-left, 0px);
      width: var(--pop-width, auto);
    }

    .finder-pop__list {
      max-height: max(7.5rem, min(18rem, 50dvh, var(--pop-room, 100dvh) - 4.5rem));
    }
  }

  /* The narrowest phones still in use, 320px. «Автомобиль» and «Размер шины» beside a
     44px close button do not fit at the full tab padding, and the overflow was what made the
     panel scroll sideways. Tighter padding and a slightly smaller mark buy back more than the
     twelve pixels that were missing, without dropping either label or shrinking the tap
     targets below 2.5rem. */
  @media (max-width: 22.5rem) {
    .finder__tabs .segmented__item {
      padding-inline: 0.5rem;
      gap: 0.25rem;
      font-size: 0.9375rem;
    }

    .finder__tabs .segmented__item .icon {
      width: 1rem;
      height: 1rem;
    }

    .finder__submit-label {
      display: inline;
    }

    /* Stacked on a phone, navy blocks read as buttons: locked steps become empty greyed fields. */
    .finder-step[data-locked] .finder-step__control {
      min-height: 3.25rem;
      justify-items: start;
      border-bottom-color: var(--line-2);
      border-radius: 0;
      background: none;
      color: var(--line-3);
    }

    .finder-step[data-locked] .finder-step__chevron {
      display: block;
    }

    .finder-step[data-locked] .finder-step__value {
      grid-column: auto;
      color: var(--ink-3);
      font-weight: 400;
      font-size: 1.25rem;
    }
  }

  @media (max-width: 30rem) {
    .segmented__item {
      padding-inline: 0.75rem;
      font-size: 1rem;
    }

    .finder-pop__list[data-columns] {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ================================================================ Footer */
  .site-footer {
    margin-top: var(--section-gap);
    border-top: 6px solid var(--yellow);
    background: var(--navy);
    color: #fff;
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-l);
    padding-block: var(--space-2xl) var(--space-xl);
  }

  .site-footer__brand {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--space-s);
    max-width: 26rem;
  }

  .site-footer__brand .logo {
    width: 11rem;
    height: auto;
  }

  .site-footer__official {
    display: flex;
    gap: var(--space-2xs);
    align-items: center;
    font-weight: 700;
  }

  .site-footer__official .icon {
    color: var(--yellow);
    width: 1.5rem;
    height: 1.5rem;
  }

  .site-footer__tagline {
    color: var(--ink-on-dark-2);
  }

  .site-footer__brand .btn {
    margin-top: var(--space-2xs);
  }

  .site-footer__heading {
    margin-bottom: var(--space-s);
    color: var(--yellow);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .site-footer__col ul {
    display: grid;
    gap: 0.375rem;
    padding: 0;
    list-style: none;
  }

  .site-footer__col a,
  .site-footer__col button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: 2rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
  }

  .site-footer__col a:hover,
  .site-footer__col button:hover {
    text-decoration: underline;
  }

  .site-footer__phones .icon {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--yellow);
  }

  .site-footer__places {
    display: grid;
    gap: var(--space-s);
    margin-top: var(--space-m);
  }

  .site-footer__places dt {
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--ink-on-dark-2);
  }

  .site-footer__places dd {
    margin: 0.125rem 0 0;
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s) var(--space-l);
    padding-block: var(--space-m) var(--space-l);
    border-top: 1px solid rgb(255 255 255 / 0.14);
    font-size: var(--fs-small);
    color: var(--ink-on-dark-2);
  }

  .site-footer__note {
    flex: 1;
  }

  /* The legal row: phones only, where the «Документы» list is hidden (see the end of this
     section). Wider screens have that list, and the same three links twice would be noise. */
  .site-footer__legal {
    display: none;
  }

  /* The builder's credit, off unless the client switches it on in Контент.
     The same mark as the panel's footer, but that one sits on white and this one on navy, and
     the artwork is a single navy fill — so it would be invisible here. brightness(0) flattens
     it to black whatever it started as, invert(1) lifts it to white, and the opacity brings it
     down to the weight of the text beside it. One asset, two backgrounds. */
  .site-footer__by {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-left: var(--space-2xs);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
  }

  .site-footer__mark {
    width: auto;
    height: 0.8125rem;
    filter: brightness(0) invert(1);
    opacity: 0.6;
    transition: opacity var(--dur-fast) ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .site-footer__by:hover {
      color: #fff;
    }

    .site-footer__by:hover .site-footer__mark {
      opacity: 1;
    }
  }

  .site-footer__by:focus-visible .site-footer__mark {
    opacity: 1;
  }

  .site-footer__social {
    display: flex;
    gap: var(--space-2xs);
    padding: 0;
    list-style: none;
    color: #fff;
  }

  @media (max-width: 64rem) {
    .site-footer__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__brand {
      grid-column: 1 / -1;
    }
  }

  /* Phones: the two link lists side by side, contacts across the full width, tighter rhythm. */
  @media (max-width: 36rem) {
    .site-footer__grid {
      gap: var(--space-l) var(--space-m);
      padding-block: var(--space-xl) var(--space-l);
    }

    .site-footer__brand .btn {
      width: 100%;
    }

    .site-footer__col:last-child {
      grid-column: 1 / -1;
    }

    .site-footer__heading {
      margin-bottom: var(--space-2xs);
      font-size: var(--fs-small);
    }

    .site-footer__col ul {
      gap: 0;
    }

    .site-footer__col a,
    .site-footer__col button {
      min-height: 2.5rem;
    }

    .site-footer__places {
      margin-top: var(--space-xs);
    }

    .site-footer__bottom {
      padding-block: var(--space-s) calc(var(--space-m) + env(safe-area-inset-bottom));
    }
  }

  /* Phones: no «Покупателям» or «Документы» lists and no prototype note, only the brand block and
     contacts (client feedback). The shop links stay in the menu; the offer and privacy policy are
     still linked from checkout. */
  @media (max-width: 48rem) {
    .site-footer__col--nav,
    .site-footer__note {
      display: none;
    }

    .site-footer__grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .site-footer__legal {
      display: flex;
      flex-basis: 100%;
      flex-wrap: wrap;
      gap: 0 var(--space-m);
      padding: 0;
      list-style: none;
    }

    .site-footer__legal a {
      display: inline-flex;
      align-items: center;
      min-height: 2.5rem;
      color: #fff;
      font-weight: 600;
      text-decoration: none;
    }

    .site-footer__legal a:hover {
      text-decoration: underline;
    }
  }
}