/*
 * Page-scoped additions for the homepage prototype (pages/home/index.html).
 * Tokens, type, chrome and registry components come from ../_shared/ (PAGE-DESIGN load order).
 * Here only: image placeholders, the gap layouts of the blueprint rows, the review badges,
 * the Ratgeber tile, the section newsletter and terms share, and the footer layout (logo with the contact block,
 * three columns, base line with the payment logos).
 * Precedent: design/prototypes/hasena-lp/prototype.css.
 */

/* The heading face (user, 2026-10-07): Newsreader, upright, self-hosted (OFL, fonts/newsreader/). The promoted
   sheets in ../_shared/ are pinned copies and keep their system stack, so the face is named here, in the sheet
   every page of the shell loads after them. Their headings ask for 700; the face ends at 600, so a heavier
   request is drawn at 600, and no engine may fatten it into a false bold. There is no italic file (user,
   2026-10-07): an italic serif word, such as the three marks of the homepage's steps, is the upright, slanted.
   ponytail: one cap for every heading; a heading that needs its own weight wants the range opened to 800 and the
   weights set rule by rule. */
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader/newsreader-normal-200-800-latin.woff2") format("woff2"); font-weight: 200 600; font-style: normal; font-display: swap; }
:root { --serif: "Newsreader", Georgia, "Iowan Old Style", Palatino, Cambria, "Times New Roman", serif; font-synthesis-weight: none; }

/* Image placeholder: a labelled box with the final aspect ratio (set per box as --ar). */
.ph {
  display: flex;
  align-items: flex-end;
  aspect-ratio: var(--ar, 16 / 9);
  border: 1px solid var(--gold-soft);
  background:
    linear-gradient(135deg, rgba(174,138,86,.09) 25%, transparent 25%) 0 0 / 28px 28px,
    var(--paper-warm);
}
.ph__label {
  margin: 12px;
  padding: 6px 10px;
  background: #fff;
  color: var(--petrol);
  font-size: 14px;
  line-height: 1.4;
}
/* The hero box fills .hero__media; its label sits top right, clear of the hero copy. */
.hero__media .ph { height: 100%; aspect-ratio: auto; border: 0; align-items: flex-start; justify-content: flex-end; }
/* The hero with the live copy (user, 2026-10-02): a two-line H1 needs more leading than the theme's 1.04, and
   without a .facts row the buttons need their own distance from the lead. */
.hero__title { line-height: 1.16; margin-bottom: 26px; }
.hero .cta-row { margin-top: 30px; }
/* A phone shows a narrow slice of the wide live image: the slice with the bed and the finder panel. Only the live
   image moves; the snapshots' mood image keeps its crop. */
@media (max-width: 768px) { .hero__img[src^="live/"] { object-position: 75% center; } }

/* Review mode: body.review shows one badge per blueprint section; without the class they are gone. */
.bp-badge { display: none; }
.review [data-blueprint] { position: relative; }
.review .bp-badge {
  display: inline-block;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  padding: 4px 8px;
  border: 1px solid var(--petrol);
  background: #fff;
  color: var(--petrol);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.review .bp-badge:hover, .review .bp-badge:focus-visible { text-decoration: underline; }
/* Below 1280 the hero label wraps under the B01 badge; start it below the badge instead. */
.review .hero__media .ph__label { margin-top: 44px; }

/* B03 category-navigation (user, 2026-10-05): seven tiles without an orphan. Matratzen leads, two of five columns
   wide and two rows high, and its picture block grows to the height of both rows; the six others stand beside it
   in three columns. Each tile is a hairline box with hard corners and a rounded picture block inside, the Ratgeber
   tile's idiom, and one link. Below 900 px the lead takes a row of its own above three columns, below 560 px above
   two. A picture block without a picture yet says so by itself. */
.cats { display: grid; gap: 18px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 10px 0 0; padding: 0; list-style: none; }
.cats > li { min-width: 0; }
.cats > li:first-child { grid-column: span 2; grid-row: span 2; }
.cats a { display: flex; flex-direction: column; height: 100%; padding: 12px 12px 16px; border: 1px solid var(--gold-soft); background: #fff; color: var(--petrol); text-decoration: none; }
.cats a:hover, .cats a:focus-visible { border-color: var(--gold); }
.cats__pic { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: var(--paper); }
.cats__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cats__pic:empty { display: grid; place-items: center; }
.cats__pic:empty::after { content: "Bild folgt"; color: var(--ink-soft); font-size: 13px; }
/* A stock stand-in from looks/mood/ is tagged as one (mood/CREDITS.md); the tag goes with the picture. */
.cats__pic:has(img[src^="../mood/"])::after { content: "Mood"; position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; background: rgba(255, 255, 255, .85); color: var(--petrol); font: 600 11px/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.cats h3 { margin: 14px 0 0; color: var(--petrol); font-family: var(--serif); font-size: 17px; hyphens: auto; line-height: 1.2; }
.cats a:hover h3, .cats a:focus-visible h3 { text-decoration: underline; text-underline-offset: 4px; }
.cats > li:first-child a { padding: 16px 16px 20px; }
.cats > li:first-child .cats__pic { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
.cats > li:first-child h3 { font-size: 26px; }
@media (max-width: 900px) {
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cats > li:first-child { grid-column: 1 / -1; grid-row: auto; }
  .cats > li:first-child .cats__pic { flex: none; aspect-ratio: 16 / 7; }
}
@media (max-width: 560px) {
  .cats { gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cats h3 { font-size: 15px; }
  .cats > li:first-child .cats__pic { aspect-ratio: 3 / 2; }
  .cats > li:first-child h3 { font-size: 22px; }
}

/* B06 product-finder (user, 2026-10-02): the Ratgeber tile's idiom, hard outer corners and a rounded block inside.
   Heading and intro sit above the tile. Left: three whole screens of the live finder, fading into each other every
   three seconds; CSS only, the checkbox pauses the loop, reduced motion shows the first screen alone. Right: the
   three steps as the registered prep-list, then the button and the showroom link, centred and as far from step iii
   as from the tile's edge (30 px at least). One column below 900 px. */
.finder-head { margin-bottom: 28px; }
.finder-head__kicker { margin: 0 0 14px; color: var(--ink-soft); font-size: 14px; font-weight: 600; letter-spacing: .14em; }
.finder-head .lede { max-width: 38em; margin: 0; font-size: 18px; }
.finder-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 44px; padding: 24px; border: 1px solid var(--gold-soft); background: #fff; }
.finder-shot { align-content: start; display: grid; gap: 10px; justify-items: start; width: 320px; }
/* The block has the tallest screen's proportions and the finder's white as ground, so every screen shows whole: a
   shorter one ends in its own white button bar and nothing is cut. */
.finder-shot__screen { display: grid; width: 100%; aspect-ratio: 690 / 1144; overflow: hidden; border: 1px solid var(--gold-soft); border-radius: 6px; background: #fff; }
.finder-shot__screen img { grid-area: 1 / 1; display: block; width: 100%; height: auto; background: #fff; }
.finder-shot__screen img:nth-child(2) { animation: finder-shot-2 9s infinite; }
.finder-shot__screen img:nth-child(3) { animation: finder-shot-3 9s infinite; }
.finder-shot:has(input:checked) img { animation-play-state: paused; }
@keyframes finder-shot-2 { 0%, 29% { opacity: 0; } 33.3%, 71% { opacity: 1; } 71.1%, 100% { opacity: 0; } }
@keyframes finder-shot-3 { 0%, 62.3% { opacity: 0; } 66.6%, 95.7% { opacity: 1; } 100% { opacity: 0; } }
.finder-shot__pause { align-items: center; display: inline-flex; gap: 8px; color: var(--ink-soft); font-size: 13px; cursor: pointer; }
.finder-shot__pause input { margin: 0; accent-color: var(--petrol); }
.finder-tile__steps { display: flex; flex-direction: column; padding: 12px 24px 0 0; }
.finder-tile__steps .prep__item:last-child { padding-bottom: 0; }
.finder-tile__steps .prep__mark { line-height: 1; }
/* The tile's own padding (24 px, on phones 18) is the rest of the distance below the link. */
.finder-tile__go { align-items: center; display: flex; flex: 1; flex-direction: column; gap: 14px; justify-content: center; padding: 30px 0 6px; text-align: center; }
.finder-tile__go a:not(.btn) { color: var(--petrol); font-size: 15px; }
@media (prefers-reduced-motion: reduce) {
  .finder-shot__screen img { animation: none; }
  .finder-shot__screen img + img, .finder-shot__pause { display: none; }
}
@media (max-width: 900px) {
  .finder-tile { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .finder-shot { justify-self: center; width: min(100%, 260px); }
  .finder-tile__steps { padding: 4px 6px 0; }
  .finder-tile__go { padding: 30px 0 12px; }
}

/* B04: the placeholder image sits above the rg-card title. */
.rg-card .ph { margin: 0 0 16px; }

/* B04 product-recommendation (user, 2026-10-02): the six live mattresses in one row that scrolls sideways and snaps
   card by card. Three cards are in view, two below 900 px, one and the edge of the next on phones. The arrows beside
   the heading step the row by one view; the page's script shows them, and without it the row still scrolls by swipe,
   trackpad, keyboard and its scrollbar. Nothing moves on its own. The product name is the card's one link, stretched
   over the whole card. Name, picture, price and link are shop data: the template prints them from WooCommerce. */
.prod-head { align-items: end; display: flex; gap: 24px; justify-content: space-between; }
.prod-nav { display: flex; gap: 8px; margin-bottom: 22px; }
.prod-nav[hidden] { display: none; }
.prod-nav button { width: 44px; height: 44px; padding: 0 0 4px; border: 1px solid var(--gold-soft); border-radius: 50%; background: #fff; color: var(--petrol); font-size: 26px; line-height: 1; cursor: pointer; }
.prod-nav button:hover, .prod-nav button:focus-visible { border-color: var(--gold); }
.prod-nav button:disabled { border-color: var(--gold-soft); color: var(--ink-soft); cursor: default; opacity: .4; }
.rg-cards--row { grid-auto-columns: calc((100% - 36px) / 3); grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.rg-cards--row { margin: 10px 0 0; padding: 0 0 16px; list-style: none; scrollbar-color: var(--gold) transparent; scrollbar-width: thin; }
@media (prefers-reduced-motion: no-preference) { .rg-cards--row { scroll-behavior: smooth; } }
.prod-card { display: flex; flex-direction: column; position: relative; scroll-snap-align: start; }
.prod-card img { display: block; width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 18px; object-fit: contain; }
.prod-card a { color: inherit; text-decoration: none; }
.prod-card a::after { content: ""; inset: 0; position: absolute; }
.prod-card a:focus-visible { outline: none; }
.prod-card a:focus-visible::after { outline: 2px solid var(--petrol); outline-offset: 2px; }
.prod-card__price { margin: 4px 0 18px; font-size: 16px; }
.prod-card__go { margin: auto 0 0; color: var(--petrol); font-size: 15px; font-weight: 600; }
.prod-delivery { max-width: 50em; margin: 22px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.prod-delivery a { color: var(--petrol); font-weight: 600; white-space: nowrap; }
@media (max-width: 900px) { .rg-cards--row { grid-auto-columns: calc((100% - 18px) / 2); } }
@media (max-width: 600px) { .rg-cards--row { grid-auto-columns: 82%; } }

/* B05: the location card's media box carries no border of its own (the card has one). */
.loc__media .ph { border: 0; }
/* B05 local-showroom (user, 2026-10-02): the showroom hub's location cards and benefits row (theme-showroom-hub.css)
   under a head like the finder's. Here only what the hub does not have: the head, the region label above a card's
   town, the phone line under its buttons, and the distances between cards, benefits and the closing line. */
.show-head { margin-bottom: 36px; }
.show-head__kicker, .loc__kicker { margin: 0 0 14px; color: var(--ink-soft); font-size: 14px; font-weight: 600; letter-spacing: .14em; }
.show-head .lede { max-width: 44em; margin: 0; font-size: 18px; }
.show-head .lede + .lede { margin-top: 12px; }
.loc__kicker { margin-bottom: 8px; font-size: 13px; text-transform: uppercase; }
.loc__call { margin: 16px 0 0; font-size: 15px; }
.loc__call a, .show-more a { color: var(--petrol); }
.benefits { margin-top: 56px; }
.benefit__p + .benefit__p { margin-top: 6px; }
.show-more { margin: 40px 0 0; }

/* B08 tests-awards (gap): a row of seals with their caption. */
.awards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 22px;
}
.awards .ph { max-width: 160px; margin: 0 0 12px; }
.awards p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
/* The worked page shows two certificate marks (user, 2026-10-05): the mark left, beside it its name, what it stands
   for and its proof. While a mark comes from vorschau/ it is a preview and carries the tag, as the mood pictures do. */
.awards--certs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; }
.cert { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 24px; align-items: start; }
.cert__seal { position: relative; }
.cert__seal img { display: block; width: 100%; height: auto; }
.cert__seal:has(img[src^="vorschau/"])::after { content: "Vorschau"; position: absolute; left: 0; top: calc(100% + 8px); padding: 2px 8px; background: rgba(255, 255, 255, .92); color: var(--petrol); font: 600 11px/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 0 0 1px var(--gold-soft); }
.cert__name { margin: 0 0 8px; font-family: var(--serif); font-size: 21px; font-weight: 400; line-height: 1.3; color: var(--ink); }
.awards .cert__no { margin-top: 10px; font-size: 14px; }
@media (max-width: 900px) {
  .awards--certs { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cert { grid-template-columns: 84px minmax(0, 1fr); column-gap: 18px; }
}

/* B07 social-proof (gap): one quote with its source; no stars, no rating markup. The snapshots still show it. */
.proof { margin: 0; max-width: 46rem; }
.proof__quote { margin: 0 0 12px; font-family: var(--serif); font-size: 24px; line-height: 1.4; color: var(--ink); }
.proof__source { color: var(--ink-soft); font-size: 15px; }
/* B07 social-proof (user, 2026-10-02): the live Trustindex widget and, under a hairline, the live press block. The
   widget is third-party output that the template prints from its shortcode; the static page shows a capture of it
   with a line that says so. The press block sets its three texts beside the logos, which are grey until pointed at
   or focused, as on live; one column below 900 px. No rating markup. */
.proof-widget { margin-top: 30px; }
.proof-widget img { display: block; width: 100%; height: auto; }
.proof-widget__tag { margin: 12px 0 0; color: var(--ink-soft); font-size: 13px; }
.press { align-items: center; display: grid; gap: 28px 56px; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--gold-soft); }
.press__kicker { margin: 0 0 14px; color: var(--ink-soft); font-size: 14px; font-weight: 600; letter-spacing: .14em; }
.press__h { margin: 0 0 10px; color: var(--ink); font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.press__p { margin: 0; }
.press__logos { align-items: center; display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.press__logos a { display: block; }
.press__logos img { display: block; width: auto; height: 54px; filter: grayscale(1); opacity: .85; transition: filter .25s, opacity .25s; }
.press__logos a:hover img, .press__logos a:focus-visible img { filter: none; opacity: 1; }
.press__more { grid-column: 1 / -1; margin: 0; font-size: 15px; }
.press__more a { color: var(--petrol); }
@media (max-width: 900px) {
  .press { grid-template-columns: 1fr; margin-top: 44px; padding-top: 36px; }
  .press__logos { gap: 20px 36px; justify-content: flex-start; }
  .press__logos img { height: 44px; }
}

/* B10 brand-story inside B12 (user, 2026-10-05): the live block "Beratung" is the closing strip of the Ratgeber
   tile's box, under a hairline and on the tile's two columns: its heading as the small label and its sentence on the
   left, the three ways to reach Mara Vital side by side on the right, each with a written label and the number or
   address in the display serif. Below 900 px the ways are ruled rows under the sentence. */
.guide-box { margin-top: 10px; padding: 24px; border: 1px solid var(--gold-soft); background: #fff; }
.guide-box .guide-tile a { padding: 0; border: 0; }
.advice { align-items: center; display: grid; gap: 24px 40px; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--gold-soft); }
.advice__kicker { margin: 0 0 12px; color: var(--ink-soft); font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: .14em; line-height: 1.5; }
.advice__lead { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 19px; line-height: 1.35; }
.advice__ways { display: grid; gap: 16px 28px; grid-template-columns: repeat(3, auto); justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.advice__ways li { display: flex; flex-direction: column; gap: 2px; }
.advice__label { color: var(--ink-soft); font-size: 15px; }
.advice__ways a { color: var(--petrol); font-family: var(--serif); font-size: 19px; line-height: 1.3; text-decoration: none; }
.advice__ways a:hover, .advice__ways a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
/* Review mode: the B10 badge sits on the strip's hairline at the right, clear of the label. */
.review .advice > .bp-badge { top: -14px; right: 0; left: auto; }
@media (max-width: 900px) {
  .advice { grid-template-columns: 1fr; gap: 20px; }
  .advice__ways { grid-template-columns: 1fr; gap: 0; }
  .advice__ways li { align-items: baseline; flex-direction: row; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--gold-soft); }
}
@media (max-width: 768px) { .guide-box { padding: 18px; } }

/* B12 guide-teaser (user, 2026-10-01): one tile on its own. The registered image row (rg-material-rows) at section
   width, with a larger image, larger type and a link cue; the whole tile is the link. */
.guide-tile { max-width: none; }
.guide-tile a { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 40px; padding: 24px; }
.guide-tile h3 { margin-bottom: 12px; font-size: 28px; }
.guide-tile p { max-width: 34em; font-size: 17px; line-height: 1.6; }
.guide-tile__more { display: inline-block; margin-top: 20px; padding-bottom: 3px; border-bottom: 1px solid currentColor; color: var(--petrol); font-weight: 600; }
.guide-tile a:hover .guide-tile__more, .guide-tile a:focus-visible .guide-tile__more { color: var(--ink); }
@media (max-width: 768px) {
  .guide-tile a { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .guide-tile h3 { font-size: 24px; }
}

/* Newsletter and terms as one section, split horizontally (user, 2026-10-01; order 2026-10-02): the newsletter on
   top, its copy left and the form right (the wider part, so field and button fit one row), then the shared terms
   row with its own grid and numerals. No line between the two (user, 2026-10-02): the terms cells carry their own
   top lines. The texts stay as they are. */
.nl-terms { padding: 56px 0; }
.nl-terms__nl { display: grid; grid-template-columns: 2fr 3fr; gap: 24px 40px; align-items: start; }
.nl-terms .terms-sec { margin-top: 56px; }
.nl-terms__copy .h2 { margin-top: 0; }
.nl-terms__copy p { margin-bottom: 0; }
/* Field and button share a row while both fit; the consent line runs below them. */
.nl-terms .nl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px; }
.nl-terms .nl .field { flex: 1 1 220px; margin: 0; }
.nl-terms .nl > p { flex-basis: 100%; margin: 0; color: var(--ink-soft); font-size: 15px; }
/* The teaser's one button (user, 2026-10-05: no sign-up form until the newsletter exists) keeps its own width. */
.nl-terms__nl > .btn { justify-self: start; }
/* A fifth cell on the homepage (user, 2026-10-05: "Hergestellt in D-A-CH"): five across where the shared row has
   four. Only pages/looks/heute carries the class. At this width its small words stand above "D-A-CH", which never
   breaks, so the cells share their rows: every figure stands on the same line, the headings under it. */
@media (min-width: 1025px) {
  .terms--five { grid-template-columns: repeat(5, 1fr); gap: 32px; }
  .terms--five .terms__cell { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
  .terms--five .terms__n { align-self: end; white-space: nowrap; }
  .terms--five .terms__cell:nth-child(5) .terms__q { display: block; margin-bottom: 10px; }
}
/* Review mode: the B02 badge stands in the flow above the terms, clear of the B13 badge at the section's corner. */
.review .nl-terms .terms-sec > .bp-badge { position: static; margin-bottom: 14px; }
@media (max-width: 900px) {
  .nl-terms__nl { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nl-terms { padding: 40px 0; }
  .nl-terms .terms-sec { margin-top: 40px; }
}

/* Footer: a proposal on top of mv_boutique_footer()'s markup (user, 2026-10-01): the brand block, then Kontakt and
   three more columns (Kontakt its own column since 2026-10-02), and one base line. All five stay in one row from
   1000 px up: the brand block is at most 260 px and never narrower than its logo, the columns are as wide as their
   content, and the spare width is shared between them. The .foot prefix outranks the theme's .foot .hold paddings
   (60px on top, none below). */
.foot .foot__grid { grid-template-columns: minmax(192px, 260px) repeat(4, auto); justify-content: space-between; gap: 36px 28px; padding-bottom: 40px; font-size: 15px; }
.foot__grid li { margin-bottom: 6px; }
.foot__grid .linklike { font-size: inherit; }
.foot__brand img { width: 192px; height: 80px; display: block; margin-bottom: 20px; filter: brightness(0) invert(1); }  /* the black logo, white on petrol; hairlines smear below 192 px */
/* Hierarchy inside the columns (user, 2026-10-02: "not like a Word document"): what a visitor acts on stays bright,
   the describing lines (hours, regions, addresses, the sentence) recede, and the phone number is the one large
   element, in the display serif. Each showroom is a group of its own. */
.foot .foot__grid > div { color: rgba(231, 237, 240, .72); }
.foot .foot__tel { display: inline-block; margin-bottom: 2px; font-family: var(--serif); font-size: 21px; line-height: 1.3; color: #fff; }
.foot .foot__loc { margin-bottom: 16px; }
/* One sentence on what Mara Vital is, with the about link on its own line (user, 2026-10-02). */
.foot__about { max-width: 360px; }
.foot__about a { text-decoration: underline; text-underline-offset: 3px; }
/* Below 1000 the five no longer fit without breaking the showroom names: the brand block takes its own row and the
   columns sit below it, as many as fit at 190 px each, then one column. */
@media (max-width: 999px) {
  .foot .foot__grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .foot .foot__grid { grid-template-columns: 1fr; gap: 28px; }
}
/* Social links: line icons in the header icons' style, each in a 40 px circle; the name is the link's aria-label. */
.foot .foot__socials { display: flex; gap: 10px; margin: 18px 0 16px; }
.foot .foot__socials li { margin: 0; }
.foot__social { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; }
.foot__social:hover { border-color: #fff; }
.foot__social svg { width: 18px; height: 18px; stroke-width: 1.5; }
/* Base line: copyright left, payment logos, legal links right (the theme's space-between). Width and margin instead
   of .hold's side padding, so the hairline runs on the columns' edges. */
.foot .foot__base { width: calc(100% - 80px); max-width: 1080px; padding: 20px 0 24px; }
.foot .foot__legal { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot .foot__legal li { margin: 0; }
.foot__legal a { color: inherit; }
@media (max-width: 768px) {
  .foot .foot__base { width: calc(100% - 44px); }
}
/* Payment logos: the live footer's nine (pay/SOURCE.md) in one link. They are white on transparent, so they sit
   straight on the petrol ground; a white chip would hide them. */
.foot__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.foot__pay img { width: auto; height: 28px; }  /* 28: with the six legal links the base line stays on one row from 1160 px */