/* ============================================================
   PC Phone Services — Shared UI components
   Version: 4.0 (Phase 6 — one design language)

   Every root page is built from the pieces in this file. It is
   loaded globally by app/layout/head.php, after main.css and
   before any page stylesheet, so a page sheet can still override.

   The vocabulary here was lifted out of pages/home.css, which was
   the only page speaking the current design language. Nothing in
   this file is page-specific; anything that is stays in pages/.

   Contents:
     1. Page shell + section rhythm
     2. Page hero (interior pages)
     3. Section headings
     4. Cards and card grids
     5. Icon lists
     6. Rate / data tables
     7. FAQ accordion (native <details>)
     8. Stat grid
     9. Info rows (address, phone, email)
    10. Prose (legal + long-form text)
    11. Media rows (alternating image + text)
    12. Buttons, chips and CTA band
    13. Accessibility + reduced motion
   ============================================================ */

/* ============================================================
   1. PAGE SHELL + SECTION RHYTHM
   ============================================================ */

/* Every converted page wraps its body in .content (from main.css)
   and each block in .section. The rhythm is one scale, so pages
   no longer each invent their own vertical spacing. */
.page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.section {
  width: 100%;
  margin: 0 0 var(--space-7);
  scroll-margin-top: 90px;
}

.section:last-child {
  margin-bottom: 0;
}

/* main.css sets `.content section { margin: 2rem 0 }`, which outranks a single
   class. Matching its specificity keeps the rhythm on one scale. */
.content .section {
  margin: 0 0 var(--space-7);
}

.content .section:last-child { margin-bottom: 0; }

.section--tight { margin-bottom: var(--space-6); }

/* Sunken band used to separate alternating sections */
.section--band {
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
}

@media (max-width: 767px) {
  .section { margin-bottom: var(--space-6); }
  .section--band { padding: var(--space-5) var(--space-4); }
}

/* ============================================================
   2. PAGE HERO — interior pages

   The homepage keeps its full-height hero. Every other page gets
   this compact band: it states where you are in one screen-third
   instead of pushing the content below the fold, which matters
   most on a phone held by someone who does not scroll much.
   ============================================================ */
.page-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--brand-black);
  color: var(--text-inverse);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem);
  text-align: center;
}

/* Optional photographic backdrop: set --page-hero-image on the element */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--page-hero-image, none);
  background-size: cover;
  background-position: center;
  opacity: 0.35;
}

.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--brand-gold) 20%,
    var(--brand-gold) 80%,
    transparent 100%);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
}

.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.9rem;
  margin-bottom: var(--space-4);
  border: 1px solid rgba(204, 171, 86, 0.55);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--brand-gold);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-hero h1 {
  margin: 0 0 var(--space-3);
  color: var(--surface);
  font-size: clamp(1.85rem, 4vw + 0.5rem, 3rem);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
}

.page-hero h1 .accent { color: var(--brand-gold); }

.page-hero__lead {
  margin: 0 auto;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  line-height: var(--lh-base);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Facts strip under the hero title (opening hours, guarantees…) */
.page-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-5) 0 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-sm);
}

.page-hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.page-hero__facts i { color: var(--brand-gold); }

@media (max-width: 767px) {
  .page-hero__facts { gap: var(--space-2) var(--space-4); }
}

/* ============================================================
   3. SECTION HEADINGS
   (moved out of pages/home.css — every page uses these now)
   ============================================================ */
.section-heading {
  text-align: center;
  margin-bottom: var(--space-6);
}

.section-heading h2 {
  margin: var(--space-1) 0 var(--space-2);
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  font-weight: var(--fw-bold);
  color: var(--brand-black);
}

.section-heading h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: var(--space-3) auto 0;
  background: var(--brand-gold);
  border-radius: 2px;
}

/* An <h1> in a section heading behaves like the <h2> beside it. The
   account views are pages in their own right and carry a first-level
   heading; every other .section-heading on the site carries a second. */
.section-heading h1 {
  margin: var(--space-1) 0 var(--space-2);
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  font-weight: var(--fw-bold);
  color: var(--brand-black);
}

.section-heading h1::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: var(--space-3) auto 0;
  background: var(--brand-gold);
  border-radius: 2px;
}

/* Left-aligned, for a view that already has a breadcrumb above it: a
   centred heading under a left-aligned trail reads as two pages. */
.section-heading--start {
  text-align: left;
  margin-bottom: var(--space-5);
}

.section-heading--start h1::after,
.section-heading--start h2::after { margin-inline: 0 auto; }

.section-heading--start .section-lead { margin-inline: 0; }
.section-heading--start h1,
.section-heading--start h2 { text-align: left; }


.section-heading--row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  text-align: left;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.section-heading--row h2::after { margin-left: 0; }

.section-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.section-lead {
  max-width: 640px;
  margin: var(--space-3) auto 0;
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.6;
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  color: var(--brand-black);
  font-weight: var(--fw-semibold);
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}

.section-link:hover,
.section-link:focus-visible {
  color: var(--brand-gold);
  border-bottom-color: var(--brand-gold);
}

@media (max-width: 767px) {
  .section-heading { margin-bottom: var(--space-5); }
  .section-heading--row { align-items: flex-start; }
}

/* ============================================================
   4. CARDS AND CARD GRIDS

   One card, one border radius, one shadow, one hover lift. The
   old .box/.boxhover/.boximage trio each had their own.
   ============================================================ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  color: var(--text);
  text-align: left;
}

/* Padding lives on .card__body so media can bleed to the edge */
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  flex: 1;
}

.card__body > :last-child { margin-bottom: 0; }

.card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-alt);
}

.card__head h2,
.card__head h3 {
  margin: 0;
  text-align: left;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--brand-black);
}

.card__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--brand-black);
  color: var(--brand-gold);
  font-size: var(--fs-md);
}

/* An action belonging to the card, inside its header rather than floating
   over the corner. The account views used to absolutely position an "edit"
   button so that it straddled the card's top border. */
.card__action {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--brand-black);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.card__action:hover,
.card__action:focus-visible {
  background: var(--brand-black);
  border-color: var(--brand-black);
  color: var(--surface);
}

.card__icon--gold {
  background: var(--brand-gold);
  color: var(--brand-black);
}

/* Icon floating over the card image instead of sitting in a header */
.card__icon--float {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: var(--fs-base);
  box-shadow: 0 2px 6px rgba(204, 171, 86, 0.3);
}

.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-alt);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.card__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--brand-black);
  text-align: left;
}

.card__text {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Actions belonging to the card, on its floor. Pushed down so the row of
   buttons lines up across a grid of cards whose bodies differ in length. */
.card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-color);
  background: var(--surface);
}

.card__foot .btn {
  flex: 1 1 8rem;
  justify-content: center;
  min-height: 44px;
}

/* A button that needs its own <form> (anything that POSTs) is wrapped in
   one, and the wrapper — not the button — is the flex child. Without this
   the form sizes to its content and the row wraps a line early. */
.card__foot form {
  display: flex;
  flex: 1 1 8rem;
}

.card__foot form .btn { width: 100%; }

@media (max-width: 600px) {
  .card__foot { padding: var(--space-3) var(--space-4); }
}

.card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--gold-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  transition: gap var(--transition);
}

/* Interactive card — the whole tile is one link */
a.card {
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

a.card:hover,
a.card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  border-color: rgba(204, 171, 86, 0.6);
  color: var(--text);
}

a.card:hover .card__media img { transform: scale(1.04); }
a.card:hover .card__cta { gap: var(--space-2); }

/* Emphasis variants */
.card--gold { border-color: rgba(204, 171, 86, 0.55); }

.card--dark {
  background: var(--brand-black);
  border-color: rgba(204, 171, 86, 0.35);
  color: var(--surface);
}

.card--dark .card__title,
.card--dark h2,
.card--dark h3,
.card--dark h4 { color: var(--surface); }

.card--dark .card__text { color: rgba(255, 255, 255, 0.78); }

/* On a dark surface the contrast problem inverts: --gold-text is 2.8:1 there,
   while the bright brand gold is 7:1. */
.card--dark .section-eyebrow,
.card--dark .card__cta,
.card--dark .icon-list i { color: var(--brand-gold); }

.card--center { text-align: center; }
.card--center .card__body { align-items: center; text-align: center; }
.card--center .card__title { text-align: center; }

/* Grids.
   Column counts are declared, not inferred. auto-fit filled the row and left
   the remainder stranded — six cards came out as four and two, which is the
   one thing a grid must not do. */
.card-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
  .card-grid,
  .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

@media (max-width: 600px) {
  .card-grid,
  .card-grid--3,
  .card-grid--4 { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .card-grid { gap: var(--space-4); }
  .card__body { padding: var(--space-4); }
  .card__head { padding: var(--space-3) var(--space-4); }
}

/* ============================================================
   5. ICON LISTS

   Replaces the icon-in-a-table-cell pattern (.data-table-centerd)
   that carried non-tabular content. A list is what these are, and
   each row is a 48px target with the icon locked to one column.
   ============================================================ */
.icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.icon-list li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  min-height: 48px;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.45;
}

.icon-list li:last-child { border-bottom: none; }

.icon-list i {
  justify-self: center;
  margin-top: 0.15rem;
  color: var(--gold-text);
  font-size: var(--fs-md);
}

.icon-list b,
.icon-list strong {
  color: var(--brand-black);
  font-weight: var(--fw-semibold);
}

/* Two-part row: label then value (brand: devices covered) */
.icon-list__label {
  display: block;
  color: var(--brand-black);
  font-weight: var(--fw-semibold);
}

.icon-list__value {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Compact variant for dense lists inside narrow cards */
.icon-list--compact li {
  padding: var(--space-2) 0;
  min-height: 40px;
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------
   Price list — a label, a leader, a price.

   Prices are tabular data, but a bordered table with an
   uppercase header for four rows is heavier than the data. This
   is the same information as a list, aligned on the number.
   ------------------------------------------------------------ */
.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.price-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color);
}

.price-list li:last-child { border-bottom: none; }

.price-list__label {
  color: var(--text);
  font-size: var(--fs-sm);
}

/* The leader dots: a flexible rule between label and price, so
   the eye can travel across without a table's gridlines. */
.price-list__leader {
  flex: 1;
  height: 1px;
  margin-bottom: 0.28em;
  border-bottom: 1px dotted var(--border-strong);
}

.price-list__value {
  color: var(--brand-black);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* An included-in-the-package note under a price row */
.price-list__note {
  display: block;
  padding: 0 0 var(--space-3);
  margin-top: calc(-1 * var(--space-2));
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* ------------------------------------------------------------
   AI-generated image badge.

   Sits on an illustration that was produced by a model, so the
   page says so where the image is, not in a footnote.
   ------------------------------------------------------------ */
.ai-badge {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(20, 18, 18, 0.72);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
}

.ai-badge i { color: var(--brand-gold); }

/* ============================================================
   6. RATE / DATA TABLES

   Genuine tabular data keeps a table. Two columns survive a
   320px screen; anything wider gets a horizontal scroll shell.
   ============================================================ */
.rate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.rate-table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.rate-table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
}

.rate-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}

.rate-table tr:last-child td { border-bottom: none; }

.rate-table td:last-child {
  text-align: right;
  white-space: nowrap;
  font-weight: var(--fw-semibold);
  color: var(--brand-black);
}

/* A row whose detail continues on the next row (the CV package) */
.rate-table tr.row-continues td { border-bottom: none; padding-bottom: 0; }

.rate-table tr.row-detail td {
  padding-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  text-align: left;
  white-space: normal;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------
   Opening hours.

   Genuinely tabular — day, morning, afternoon — and used on both
   the homepage and the contact page, which is why it is here
   rather than in one page's stylesheet.
   ------------------------------------------------------------ */
.hours-table {
  width: 100%;
  border-collapse: collapse;
  padding: 0 var(--space-5) var(--space-5);
}

.hours-table td {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.hours-table td:first-child {
  color: var(--brand-black);
  font-weight: var(--fw-semibold);
}

.hours-table td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}

.hours-table tr:last-child td {
  border-bottom: none;
}

/* Today's row is the one anyone is actually looking for */
.hours-table tr.is-today td {
  background: var(--surface-sunken);
  color: var(--brand-black);
}

@media (max-width: 600px) {
  .hours-table td {
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-sm);
  }
}

/* ============================================================
   7. FAQ ACCORDION — native <details>, no JavaScript

   Collapsed by default so the whole question list is visible on
   one phone screen; opening one is a single tap and keyboard
   operable for free.
   ============================================================ */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq__item {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

.faq__item[open] {
  border-color: rgba(204, 171, 86, 0.6);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.faq__q {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: 56px;
  cursor: pointer;
  list-style: none;
  font-weight: var(--fw-semibold);
  color: var(--brand-black);
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q > i:first-child {
  color: var(--gold-text);
  font-size: var(--fs-md);
  width: 1.5rem;
  text-align: center;
}

.faq__q::after {
  content: "\f078"; /* fa chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  transition: transform var(--transition);
}

.faq__item[open] .faq__q::after { transform: rotate(180deg); }

.faq__q:hover { background: var(--surface-alt); }

.faq__a {
  margin: 0;
  padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 2.25rem);
  color: var(--text-muted);
  line-height: 1.6;
}

/* A clause body can be several paragraphs and a list (legal pages), not just
   the single answer paragraph an FAQ needs. */
.faq__a > * + * { margin-top: var(--space-3); }
.faq__a p { margin: 0; color: inherit; }
.faq__a ul,
.faq__a ol { margin-left: var(--space-5); }
.faq__a ul { list-style: disc; }
.faq__a ol { list-style: decimal; }
.faq__a li { margin-bottom: var(--space-2); }

@media (max-width: 767px) {
  .faq__a { padding-left: var(--space-4); }
}

/* ============================================================
   8. STAT GRID

   Explicit column counts, not auto-fit. Auto-fit packed six
   items into five columns and left one alone on the next row —
   arithmetically correct and visually broken. A grid of six
   wants 3x2, a grid of four wants 2x2 or 4x1, and the page
   should say which.
   ============================================================ */
.stat-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
  .stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Two columns hold down to a 360px phone: six stacked cells is a
   scroll, six in 3x2 or 2x3 is a shape. */
@media (max-width: 359px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* Framed: one bordered block divided into cells, rather than
   items floating on the page with nothing holding them. */
.stat-grid--framed {
  gap: 0;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}

.stat-grid--framed .stat {
  padding: var(--space-6) var(--space-5);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

/* Close the outer edges: which cells sit on an edge depends on
   the column count, so each layout states its own. */
@media (min-width: 900px) {
  .stat-grid--framed.stat-grid--3 .stat:nth-child(3n) { border-right: none; }
  .stat-grid--framed.stat-grid--3 .stat:nth-last-child(-n+3) { border-bottom: none; }
  .stat-grid--framed.stat-grid--4 .stat:nth-child(4n) { border-right: none; }
  .stat-grid--framed.stat-grid--4 .stat:nth-last-child(-n+4) { border-bottom: none; }
}

@media (min-width: 360px) and (max-width: 899px) {
  .stat-grid--framed .stat:nth-child(2n) { border-right: none; }
  .stat-grid--framed .stat:nth-last-child(-n+2) { border-bottom: none; }
}

@media (max-width: 359px) {
  .stat-grid--framed .stat { border-right: none; }
  .stat-grid--framed .stat:last-child { border-bottom: none; }
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
}

.stat__icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--surface-sunken);
  color: var(--gold-text);
  font-size: var(--fs-md);
}

.stat__value {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  color: var(--brand-black);
}

.stat__label {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
  max-width: 30ch;
}

@media (max-width: 600px) {
  .stat-grid--framed .stat { padding: var(--space-5) var(--space-3); }
  .stat__icon { width: 44px; height: 44px; font-size: var(--fs-base); }
}

/* ============================================================
   9. INFO ROWS — address, phone, email

   Each value is its own tap target: tel: and mailto: links get a
   full-width row rather than a link buried in a paragraph.
   ============================================================ */
.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.info-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  min-height: 56px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--transition), background var(--transition);
}

a.info-row:hover,
a.info-row:focus-visible {
  border-color: var(--brand-gold);
  background: var(--surface-alt);
  color: var(--text);
}

.info-row__icon {
  justify-self: center;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--gold-text);
}

.info-row__label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.info-row__value {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--brand-black);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------
   Label / value list — "Civility: Mr", "First name: Guilherme".
   The account views wrote these as paragraphs with the label and
   the value in one run of text, so nothing lined up down the
   column and nothing was marked up as a pair.
   ------------------------------------------------------------ */
.data-list {
  margin: 0;
  display: grid;
  gap: var(--space-1) var(--space-4);
}

.data-list > div {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-color);
}

.data-list > div:last-child { border-bottom: 0; }

.data-list dt {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.data-list dd {
  margin: 0;
  color: var(--brand-black);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  /* Label above value: two columns inside a 327px card left the value
     four characters of room. */
  .data-list > div {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Named person (owner, staff) above their contact rows */
.person {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.person__avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--brand-gold);
  font-size: var(--fs-lg);
}

.person__role {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ============================================================
   10. PROSE — legal pages and other long-form text
   ============================================================ */
.prose {
  max-width: 70ch;
  margin: 0 auto;
  color: var(--text);
}

.prose > * + * { margin-top: var(--space-4); }

.prose h2 {
  text-align: left;
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--fs-lg);
  color: var(--brand-black);
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
  text-align: left;
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--fs-md);
  color: var(--brand-black);
}

.prose p {
  margin-bottom: 0;
  color: var(--text-muted);
  line-height: var(--lh-loose);
}

.prose ul,
.prose ol {
  margin-left: var(--space-5);
  color: var(--text-muted);
  line-height: var(--lh-loose);
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--space-2); }

.prose a { text-decoration: underline; }

/* Document meta line under a legal page title */
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ============================================================
   11. MEDIA ROWS — alternating image and text
   ============================================================ */
.media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-6);
}

.media-row__media {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-alt);
}

.media-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Keep the shop name and entrance in frame when a portrait photo fills a tile. */
.storefront-photo { object-position: center 35%; }

.media-row__body h3 {
  text-align: left;
  margin-bottom: var(--space-3);
  color: var(--brand-black);
}

.media-row__body p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Every other row flips on desktop; on mobile the image always
   comes first, because a text-then-image order reads as two
   unrelated blocks on a narrow screen. */
.media-row--flip .media-row__media { order: 2; }

@media (max-width: 900px) {
  .media-row { grid-template-columns: 1fr; gap: var(--space-4); }
  .media-row--flip .media-row__media { order: 0; }
  .media-row__media { aspect-ratio: 16 / 9; }
}

/* ============================================================
   12. BUTTONS, CHIPS AND CTA BAND
   ============================================================ */

/* Gold call-to-action, used on dark backgrounds */
.btn--gold {
  background-color: var(--brand-gold) !important;
  color: var(--brand-black) !important;
  border: 2px solid var(--brand-gold);
}

.btn--gold:hover,
.btn--gold:focus-visible {
  background-color: var(--surface) !important;
  color: var(--brand-black) !important;
  border-color: var(--surface);
}

/* Outline buttons, named for the background they belong on.
   They were .btn--ghost (white ink, for dark backgrounds) and
   .btn--ghost-dark (dark ink, for light ones) — a pair whose names said the
   opposite of where each one goes, and the shop's "show more" button ended up
   white on white because of it. */

/* For dark backgrounds: white ink */
.btn--outline-on-dark {
  background-color: transparent !important;
  color: var(--surface) !important;
  border: 2px solid rgba(255, 255, 255, 0.55);
}

.btn--outline-on-dark:hover,
.btn--outline-on-dark:focus-visible {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--surface) !important;
  border-color: var(--surface);
}

/* For light backgrounds: dark ink. The default. */
.btn--outline {
  background-color: transparent !important;
  color: var(--brand-black) !important;
  border: 2px solid var(--brand-black);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--brand-black) !important;
  color: var(--surface) !important;
}

/* Icons inside buttons line up rather than sit on the baseline */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
}

.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.btn-row--center { justify-content: center; }

/* Small labelled chip, e.g. "3 GB", "no contract" */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--brand-black);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}

.chip--gold { background: var(--brand-gold); color: var(--brand-black); }
.chip--dark  { background: var(--brand-black); color: var(--brand-gold); }

/* ------------------------------------------------------------
   Search box — used in the shop hero and the search page hero.
   ------------------------------------------------------------ */
.search-form {
  margin-top: var(--space-5);
}

.search-input-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 620px;
  margin: 0 auto;
  padding: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

/* The whole pill takes the focus ring, not the bare field inside it: a ring
   drawn around the input alone sat inside the white pill looking like a
   second, misaligned box. */
.search-input-container:focus-within {
  box-shadow: var(--shadow-md), var(--ring);
}

.search-input:focus-visible {
  box-shadow: none;
}

/* On a light background (product page) it needs its own edge */
.search-input-container--inline {
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.search-input {
  flex: 1;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-base);
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 48px;
  min-height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--brand-black);
  color: var(--text-inverse);
  font-weight: var(--fw-semibold);
  transition: background var(--transition);
}

.search-btn:hover,
.search-btn:focus-visible {
  background: var(--brand-gold);
  color: var(--brand-black);
}

.search-btn svg {
  width: 20px;
  height: 20px;
}

/* ------------------------------------------------------------
   Breadcrumb — where you are, and the way back up.
   ------------------------------------------------------------ */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.breadcrumb a {
  color: var(--text-muted);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible { color: var(--gold-text); }

.breadcrumb i {
  font-size: 0.65em;
  color: var(--border-strong);
}

.breadcrumb [aria-current] {
  color: var(--brand-black);
  font-weight: var(--fw-semibold);
}

/* Scroll lock, set on <html> while a dialogue is open. Scrolling happens on
   the root element here, so locking the body alone did nothing. */
.is-scroll-locked {
  overflow: hidden;
}

/* ------------------------------------------------------------
   Empty state — 403, 404, an empty cart, a search with no hits.
   One shape for "there is nothing here, and here is the way out".
   ------------------------------------------------------------ */
.empty-state {
  grid-column: 1 / -1;   /* fills the row when it sits inside a product grid */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5);
}

.empty-state__icon {
  width: 96px;
  height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--brand-gold);
  font-size: var(--fs-2xl);
}

.empty-state h1,
.empty-state h2 {
  margin: 0;
  color: var(--brand-black);
  font-size: var(--fs-xl);
}

.empty-state p {
  margin: 0;
  color: var(--text-muted);
}

/* ------------------------------------------------------------
   Jump navigation — the section index at the top of a long page.

   A long page on a phone is a scrolling problem, and the readers
   this site is built for do not scroll speculatively. The index
   turns "is what I want on this page?" into one glance.
   ------------------------------------------------------------ */
/* .content centres its children, so the <nav> around the list would otherwise
   size to its content and carry the row off the page with it. */
.jump-nav-wrap {
  width: 100%;
}

.jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  list-style: none;
  /* .content centres its children, which makes an unconstrained flex row size
     to its content — the row then ran off the side of the page instead of
     scrolling inside itself. */
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.jump-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--brand-black);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.jump-nav a i { color: var(--gold-text); }

.jump-nav a:hover,
.jump-nav a:focus-visible {
  background: var(--brand-black);
  border-color: var(--brand-black);
  color: var(--surface);
}

.jump-nav a:hover i,
.jump-nav a:focus-visible i { color: var(--brand-gold); }

@media (max-width: 767px) {
  /* One horizontal row that scrolls, so the index never eats the
     first screen on a phone. */
  .jump-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-1);
  }

  .jump-nav::-webkit-scrollbar { display: none; }
  .jump-nav li { flex: 0 0 auto; }
}

/* Shared closing call to action (the helpbox) */
.cta-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--brand-black);
  color: var(--surface);
}

.cta-band__icon {
  font-size: var(--fs-xl);
  color: var(--brand-gold);
}

.cta-band h2,
.cta-band h3 {
  margin: 0;
  color: var(--surface);
  font-size: var(--fs-lg);
}

.cta-band p {
  margin: 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.8);
}

.cta-band .btn { margin-top: var(--space-2); }

/* ============================================================
   13. ACCESSIBILITY

   Older users on phones are the target reader: nothing below
   16px for body copy, 48px minimum for anything tappable, and
   focus that is visible without hunting for it.
   ============================================================ */
a.card:focus-visible,
.info-row:focus-visible,
.faq__q:focus-visible {
  box-shadow: var(--ring);
  outline: none;
}

@media (max-width: 767px) {
  .icon-list li,
  .info-row { font-size: var(--fs-base); }

  .card__title { font-size: var(--fs-base); }
}

@media (prefers-reduced-motion: reduce) {
  a.card:hover { transform: none; }
  .card__media img,
  a.card:hover .card__media img { transform: none; }
}

/* ------------------------------------------------------------
   Environment ribbon.

   Shown on every page that is not the live public shop, and on
   a live shop whose sales side is switched off. It is fixed to
   the bottom-left so it never covers the navbar, the cookie bar
   or a form control, and it is not interactive.
   ------------------------------------------------------------ */
.env-ribbon {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: var(--z-toast);
  padding: 0.35rem 0.9rem 0.35rem 0.7rem;
  border-top-right-radius: 8px;
  background: var(--brand-black);
  color: var(--brand-gold);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  pointer-events: none;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
}

.env-ribbon--dev { background: #1f5675; color: #ffffff; }
.env-ribbon--simulation { background: #7a4b00; color: #ffffff; }

@media print {
  .env-ribbon { display: none; }
}

/* Native disclosure sections keep secondary content available on demand. */
.disclosure {
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.disclosure__summary {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  cursor: pointer;
  list-style: none;
}
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary::marker { content: ''; }
.disclosure__summary:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.disclosure__heading {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  margin: 0;
  text-align: left;
  font-size: var(--fs-lg);
}
.disclosure__image {
  flex: 0 0 112px;
  width: 112px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius);
}
.disclosure__copy { display: grid; gap: var(--space-2); min-width: 0; }
.disclosure__title { font-weight: var(--fw-bold); line-height: 1.4; }
.disclosure__description {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 1.5;
}
.disclosure__chevron { flex: 0 0 auto; margin-left: auto; font-size: var(--fs-sm); transition: transform var(--transition); }
.disclosure[open] > .disclosure__summary { border-bottom: 1px solid var(--border-color); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.disclosure[open] .disclosure__chevron { transform: rotate(180deg); }
.disclosure__body { min-width: 0; padding: var(--space-5); }
@media (max-width: 767px) {
  .disclosure__summary, .disclosure__body { padding: var(--space-4); }
  .disclosure__heading { gap: var(--space-3); font-size: var(--fs-base); }
  .disclosure__image { flex-basis: 64px; width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .disclosure__chevron { transition: none; }
}

/* Public-page framework: the homepage measure and one set of components. */
.site-page .content {
  width: 100%;
  max-width: var(--layout-width);
  margin-inline: auto;
  padding: var(--space-7) var(--layout-gutter);
}

.site-page main { min-width: 0; }

/* The same shell serves photo-led pages and reference documents. */
.page-hero--editorial.page-hero--compact { padding-block: clamp(2.5rem, 5vw, 4rem); }
.store-address { display: grid; gap: var(--space-1); font-style: normal; color: var(--brand-black); font-size: var(--fs-md); }
.site-page .policy-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.policy-content { min-width: 0; }
.policy-content .doc-meta { margin-bottom: var(--space-5); }
.storage-list { margin: 0; }
.storage-list > div { padding: var(--space-4) 0; border-top: 1px solid var(--border-color); }
.storage-list dt { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.storage-list dd { margin: var(--space-2) 0 0; color: var(--text-muted); line-height: 1.65; }
.policy-content .prose { max-width: 70ch; }
.policy-content [id] { scroll-margin-top: 100px; }
.policy-content .section-heading, .policy-content .section-heading h2 { text-align: left; }
.policy-content .section-heading h2::after { margin-inline: 0 auto; }
.policy-content .card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.document-nav { position: sticky; top: 96px; padding: var(--space-4); background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-lg); min-width: 0; }
.document-nav__links, .document-nav__related { list-style: none; margin: 0; padding: 0; }
.document-nav__links { max-height: min(52vh, 560px); overflow-y: auto; scrollbar-width: thin; }
.document-nav__links a { display: flex; align-items: center; min-height: 44px; padding: var(--space-2) 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
.document-nav a:hover { color: var(--gold-text); }
.document-nav a:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.document-nav__mobile { display: none; }
.document-nav__related { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-color); }
.document-nav__related a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--brand-black); font-size: var(--fs-sm); }
.document-nav__related i { color: var(--gold-text); }
.document-nav [data-cookie-settings] { margin-top: var(--space-3); white-space: normal; }
.support-links .card__body { align-items: flex-start; }
.support-links .btn { margin-top: auto; }
@media (max-width: 900px) {
  .site-page .policy-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .document-nav { position: static; }
  .document-nav__desktop { display: none; }
  .document-nav__mobile { display: block; }
  .document-nav__mobile summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; cursor: pointer; list-style: none; font-weight: var(--fw-semibold); }
  .document-nav__mobile summary::-webkit-details-marker { display: none; }
  .document-nav__mobile summary::marker { content: ''; }
  .document-nav__mobile summary i { color: var(--gold-text); font-size: var(--fs-sm); }
  .document-nav__mobile[open] summary i { transform: rotate(180deg); }
}
@media print {
  .document-nav, .page-hero__actions { display: none; }
  .site-page .policy-layout { display: block; }
  .policy-content .faq__item > .faq__a { display: block; }
}

/* Interior hero variant follows the homepage's alignment and contrast. */
.page-hero--editorial {
  isolation: isolate;
  padding: clamp(3rem, 6vw, 5rem) var(--layout-gutter);
  text-align: left;
}
.page-hero--editorial::before {
  z-index: -1;
  background: linear-gradient(90deg, rgba(20, 18, 18, 0.94), rgba(20, 18, 18, 0.7));
  opacity: 1;
}
.page-hero--editorial::after { display: none; }
.page-hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero--editorial .page-hero__inner {
  max-width: calc(var(--layout-width) - 2 * var(--layout-gutter));
}
.page-hero--editorial .page-hero__eyebrow {
  gap: var(--space-3);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  letter-spacing: 0.22em;
}
.page-hero--editorial .page-hero__eyebrow::before {
  content: "";
  width: 40px;
  height: 2px;
  background: var(--brand-gold);
}
.page-hero--editorial h1 {
  max-width: 22ch;
  margin-bottom: var(--space-5);
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.page-hero--editorial .page-hero__lead {
  max-width: 54ch;
  margin: 0;
  line-height: 1.65;
}
.page-hero--editorial .page-hero__actions { justify-content: flex-start; }
.page-hero--editorial .page-hero__facts {
  justify-content: flex-start;
  gap: var(--space-3) var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  list-style: none;
  color: rgba(255, 255, 255, 0.78);
}
.page-hero--editorial .page-hero__facts li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-right: var(--space-5);
  border-radius: 50%;
  background: var(--brand-gold);
}

/* Section navigation fits every destination, including on a phone. */
.section-nav { width: 100%; margin-bottom: var(--space-7); }
.section-nav__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.section-nav__list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 100%;
  min-height: 76px;
  padding: var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--brand-black);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.section-nav__list a:hover {
  border-color: var(--brand-gold);
  box-shadow: var(--shadow-sm);
}
.section-nav__arrow { margin-left: auto; color: var(--gold-text); }
.section-nav--4 .section-nav__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Feature rows work in repair, home-support and software cards. */
.feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.feature-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--surface-sunken);
  color: var(--gold-text);
}

/* Secondary details stay available without overwhelming the main service. */
.brand-directory {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.brand-directory summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-5);
  cursor: pointer;
  list-style: none;
  font-weight: var(--fw-semibold);
}
.brand-directory summary::-webkit-details-marker { display: none; }
.brand-directory summary > i { margin-left: auto; color: var(--gold-text); }
.brand-directory[open] summary > i { transform: rotate(180deg); }
.brand-directory__preview { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.brand-directory__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  padding: var(--space-5);
  border-top: 1px solid var(--border-color);
}
.brand-directory__item { display: flex; align-items: flex-start; gap: var(--space-3); }
.brand-directory__item > i { width: 24px; margin-top: var(--space-1); color: var(--gold-text); }
.brand-directory__item strong { display: block; font-size: var(--fs-sm); }
.brand-directory__item span { display: block; margin-top: var(--space-1); color: var(--text-muted); font-size: var(--fs-xs); }

@media (max-width: 899px) {
  .section-nav__list,
  .section-nav--4 .section-nav__list,
  .feature-list--3,
  .brand-directory__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .page-hero--editorial { padding-block: var(--space-7); }
  .page-hero--editorial .page-hero__actions { flex-direction: column; }
  .page-hero--editorial .page-hero__actions .btn { width: 100%; }
  .page-hero--editorial .page-hero__facts { flex-direction: column; gap: var(--space-2); }
  .page-hero--editorial .page-hero__facts li + li::before { display: none; }
  .section-nav__list a { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .section-nav__list .section-nav__arrow { display: none; }
  .feature-list,
  .feature-list--3,
  .brand-directory__grid { grid-template-columns: 1fr; }
  .brand-directory summary { padding: var(--space-4); }
  .brand-directory__preview { flex-basis: 100%; order: 1; }
}